@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/components/pf-progress-circle.js

@@ -0,0 +1,2 @@
+import{t as e,p as s,H as r,h as t,a}from"./index.js";import{c as i,g as o,p as c}from"./p-BA6CMosJ.js";const l=()=>`@keyframes pf-progress-circle-in{from{stroke-dashoffset:var(--pf-progress-circ)}}:host{align-items:center;display:inline-flex;height:var(--pf-progress-circle-size, 64px);justify-content:center;position:relative;width:var(--pf-progress-circle-size, 64px)}:host([hidden]){display:none}.svg{display:block;height:100%;transform:rotate(-90deg);width:100%}.circle-track,.circle-fill{fill:none}.circle-track{stroke:var(--pf-progress-track-bg)}.circle-fill{animation:pf-progress-circle-in var(--duration-slow) var(--easing-decelerate);stroke:var(--pf-progress-accent);stroke-dashoffset:var(--pf-progress-dashoffset);stroke-linecap:round;transition:stroke-dashoffset var(--pf-transition-slow)}.value{color:var(--pf-progress-text);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}@media (prefers-reduced-motion: reduce){.circle-fill{animation:none;transition:none}}`;const f=s(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}value=0;max=100;size=64;strokeWidth=6;showValue=true;label;render(){const e=i(this.value,this.max);const{radius:s,circumference:r,dashOffset:l,center:f}=o(this.size,this.strokeWidth,e);return t(a,{key:"b99d70605eb7b981da829d5cda0a194e6c266fc5",role:"progressbar","aria-label":this.label,"aria-valuemin":"0","aria-valuemax":`${this.max}`,"aria-valuenow":`${c(e,this.max)}`,style:{"--pf-progress-circle-size":`${this.size}px`}},t("svg",{key:"1bee11db8cfeebb35fe84bca03621a9e64a84c60",class:"svg",part:"svg",viewBox:`0 0 ${this.size} ${this.size}`,"aria-hidden":"true",focusable:"false"},t("circle",{key:"8dc237646a40afa9d8f8ddff456367afa3b35718",class:"circle-track",part:"track",cx:`${f}`,cy:`${f}`,r:`${s}`,"stroke-width":`${this.strokeWidth}`}),t("circle",{key:"34f8f094047de322717ff56dc956de39749de1eb",class:"circle-fill",part:"fill",cx:`${f}`,cy:`${f}`,r:`${s}`,"stroke-width":`${this.strokeWidth}`,"stroke-dasharray":`${r}`,style:{"--pf-progress-dashoffset":`${l}`,"--pf-progress-circ":`${r}`}})),this.showValue&&t("span",{key:"18a89c9d9f967609f23db7e2a520df4f8400b1ad",class:"value",part:"value"},Math.round(e),"%"))}static get style(){return l()}},[513,"pf-progress-circle",{value:[2],max:[2],size:[2],strokeWidth:[2,"stroke-width"],showValue:[516,"show-value"],label:[1]}]);function n(){if(typeof customElements==="undefined"){return}const s=["pf-progress-circle"];s.forEach((s=>{switch(s){case"pf-progress-circle":if(!customElements.get(e(s))){customElements.define(e(s),f)}break}}))}n();const p=f;const d=n;export{p as PfProgressCircle,d as defineCustomElement};
+//# sourceMappingURL=pf-progress-circle.js.map

package/dist/components/pf-progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfProgressCircleCss","PfProgressCircle","__stencil_proxyCustomElement","HTMLElement","value","max","size","strokeWidth","showValue","label","render","percent","clampProgressPercent","this","radius","circumference","dashOffset","center","getProgressCircleGeometry","h","Host","key","role","progressValueNow","style","class","part","viewBox","focusable","cx","cy","r","Math","round"],"sources":["src/components/pf-progress-circle/pf-progress-circle.css?tag=pf-progress-circle&encapsulation=shadow","src/components/pf-progress-circle/pf-progress-circle.tsx"],"sourcesContent":["/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-progress-circle-in {\n  from {\n    stroke-dashoffset: var(--pf-progress-circ);\n  }\n}\n\n:host {\n  align-items: center;\n  display: inline-flex;\n  height: var(--pf-progress-circle-size, 64px);\n  justify-content: center;\n  position: relative;\n  width: var(--pf-progress-circle-size, 64px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  display: block;\n  height: 100%;\n  /* Start the arc at twelve o'clock rather than three. */\n  transform: rotate(-90deg);\n  width: 100%;\n}\n\n.circle-track,\n.circle-fill {\n  fill: none;\n}\n\n.circle-track {\n  stroke: var(--pf-progress-track-bg);\n}\n\n.circle-fill {\n  animation: pf-progress-circle-in var(--duration-slow) var(--easing-decelerate);\n  stroke: var(--pf-progress-accent);\n  stroke-dashoffset: var(--pf-progress-dashoffset);\n  stroke-linecap: round;\n  /* Animate in from empty on mount, and smoothly between values on change. */\n  transition: stroke-dashoffset var(--pf-transition-slow);\n}\n\n.value {\n  color: var(--pf-progress-text);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .circle-fill {\n    animation: none;\n    transition: none;\n  }\n}\n","import {\n  clampProgressPercent,\n  getProgressCircleGeometry,\n  progressValueNow,\n} from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A circular determinate progress track.\n *\n * @part svg - the drawing surface.\n * @part track - the unfilled ring.\n * @part fill - the drawn arc.\n * @part value - the percentage readout.\n */\n@Component({\n  tag: 'pf-progress-circle',\n  styleUrl: 'pf-progress-circle.css',\n  shadow: true,\n})\nexport class PfProgressCircle {\n  /** How far along, on the 0..max scale. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 100;\n\n  /** Diameter in pixels. */\n  @Prop() size = 64;\n\n  /** Ring thickness in pixels. */\n  @Prop() strokeWidth = 6;\n\n  /** Show the percentage in the middle. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  /** Accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    const percent = clampProgressPercent(this.value, this.max);\n    // The arc only lands on the right angle if the dash offset and the dash\n    // array come from the same radius, which is why core returns them together.\n    const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(\n      this.size,\n      this.strokeWidth,\n      percent,\n    );\n\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-label={this.label}\n        aria-valuemin=\"0\"\n        aria-valuemax={`${this.max}`}\n        aria-valuenow={`${progressValueNow(percent, this.max)}`}\n        style={{ '--pf-progress-circle-size': `${this.size}px` }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${this.size} ${this.size}`}\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <circle\n            class=\"circle-track\"\n            part=\"track\"\n            cx={`${center}`}\n            cy={`${center}`}\n            r={`${radius}`}\n            stroke-width={`${this.strokeWidth}`}\n          />\n          <circle\n            class=\"circle-fill\"\n            part=\"fill\"\n            cx={`${center}`}\n            cy={`${center}`}\n            r={`${radius}`}\n            stroke-width={`${this.strokeWidth}`}\n            stroke-dasharray={`${circumference}`}\n            style={{\n              '--pf-progress-dashoffset': `${dashOffset}`,\n              '--pf-progress-circ': `${circumference}`,\n            }}\n          />\n        </svg>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {Math.round(percent)}%\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wGAAA,MAAMA,EAAsB,IAAM,k7B,MCoBrBC,EAAgBC,EAAA,MAAAD,UAAAE,E,iFAEnBC,MAAQ,EAGRC,IAAM,IAGNC,KAAO,GAGPC,YAAc,EAGGC,UAAY,KAG7BC,MAER,MAAAC,GACE,MAAMC,EAAUC,EAAqBC,KAAKT,MAAOS,KAAKR,KAGtD,MAAMS,OAAEA,EAAMC,cAAEA,EAAaC,WAAEA,EAAUC,OAAEA,GAAWC,EACpDL,KAAKP,KACLO,KAAKN,YACLI,GAGF,OACEQ,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,cAAa,aACNT,KAAKJ,MAAK,gBACR,IAAG,gBACF,GAAGI,KAAKR,MAAK,gBACb,GAAGkB,EAAiBZ,EAASE,KAAKR,OACjDmB,MAAO,CAAE,4BAA6B,GAAGX,KAAKP,WAE9Ca,EAAA,OAAAE,IAAA,2CACEI,MAAM,MACNC,KAAK,MACLC,QAAS,OAAOd,KAAKP,QAAQO,KAAKP,OAAM,cAC5B,OACZsB,UAAU,SAEVT,EAAA,UAAAE,IAAA,2CACEI,MAAM,eACNC,KAAK,QACLG,GAAI,GAAGZ,IACPa,GAAI,GAAGb,IACPc,EAAG,GAAGjB,IAAQ,eACA,GAAGD,KAAKN,gBAExBY,EAAA,UAAAE,IAAA,2CACEI,MAAM,cACNC,KAAK,OACLG,GAAI,GAAGZ,IACPa,GAAI,GAAGb,IACPc,EAAG,GAAGjB,IAAQ,eACA,GAAGD,KAAKN,cAAa,mBACjB,GAAGQ,IACrBS,MAAO,CACL,2BAA4B,GAAGR,IAC/B,qBAAsB,GAAGD,QAI9BF,KAAKL,WACJW,EAAA,QAAAE,IAAA,2CAAMI,MAAM,QAAQC,KAAK,SACtBM,KAAKC,MAAMtB,GAAQ,K","ignoreList":[]}

package/dist/components/pf-progress-step.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfProgressStep extends Components.PfProgressStep, HTMLElement {}
+export const PfProgressStep: {
+    prototype: PfProgressStep;
+    new (): PfProgressStep;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-progress-step.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as r,h as o,a as s}from"./index.js";const a=()=>`:host{display:flex;gap:var(--space-3)}:host([hidden]){display:none}:host([orientation='horizontal']){align-items:center;flex-direction:column;gap:var(--space-2)}:host([orientation='vertical']){align-items:flex-start;position:relative}.marker-wrap{align-items:center;display:flex;flex:0 0 auto}:host([orientation='horizontal']) .marker-wrap{justify-content:center}@media (min-width: 640px){:host([orientation='horizontal']) .marker-wrap{flex:1;position:relative;width:100%}}:host([orientation='vertical']) .marker-wrap{align-items:center;flex-direction:column}.marker{align-items:center;background:var(--pf-progress-steps-bg);border:1px solid var(--pf-progress-steps-border);border-radius:var(--radius-full);color:var(--pf-progress-steps-text-muted);display:inline-flex;flex:0 0 auto;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);height:28px;justify-content:center;position:relative;width:28px;z-index:1;transition:background-color var(--pf-transition-medium),     border-color var(--pf-transition-medium),     color var(--pf-transition-medium),     box-shadow var(--pf-transition-medium)}.connector{background:var(--pf-progress-steps-border);display:block;flex:1;margin-inline-start:var(--space-2);transition:background-color var(--pf-transition-slow)}:host([orientation='horizontal']) .connector{display:none}@media (min-width: 640px){:host([orientation='horizontal']) .connector{display:block;height:1px;left:50%;margin-inline-start:0;position:absolute;top:50%;transform:translateY(-50%);width:calc(100% + var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap)));z-index:0}}:host([orientation='vertical']) .connector{bottom:calc(var(--space-3) * -1);inset-inline-start:14px;margin:0;position:absolute;top:28px;width:1px}.content{min-width:0}:host([orientation='horizontal']) .content{text-align:center}.title{color:var(--pf-progress-steps-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:var(--space-1) 0 0;transition:color var(--pf-transition-medium)}slot[name='description']::slotted(*){color:var(--pf-progress-steps-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.4;margin:var(--space-1) 0 0}:host([state='complete']) .marker{background:var(--pf-progress-steps-complete-bg);border-color:var(--pf-progress-steps-complete-border);color:var(--pf-progress-steps-complete-text)}:host([state='current']) .marker{background:var(--pf-progress-steps-current-bg);border-color:var(--pf-progress-steps-current-border);box-shadow:var(--pf-focus-ring);color:var(--pf-progress-steps-current-text)}:host([state='complete']) .connector{background:var(--pf-progress-steps-complete-border)}:host([state='current']) .title{color:var(--pf-progress-steps-current-title)}@media (prefers-reduced-motion: reduce){.marker,.connector,.title{transition:none}}`;const n=e(class t extends r{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}status;state="upcoming";position=1;last=false;orientation="horizontal";render(){return o(s,{key:"178b256dfa9df01c41cacddbd9e49c72beb2567f",role:"listitem","aria-current":this.state==="current"?"step":null},o("div",{key:"f8b100c14751727adaad8a604de7a900a7963086",class:"marker-wrap",part:"marker-wrap","aria-hidden":"true"},o("span",{key:"bcf15a8d42e80f56cd53da2a41513d90454d7c76",class:"marker",part:"marker"},this.position),!this.last&&o("span",{key:"eade849134d12e42e40cc8fb6dfe21c3c026ed5b",class:"connector",part:"connector"})),o("div",{key:"6b169c22f58a7c4eba922f19d969d7560fa71b9e",class:"content",part:"content"},o("p",{key:"b12aa29ae1dee718543f3ed7d586e2c901bb6562",class:"title",part:"title"},o("slot",{key:"a61cf4299dddc0e92a1b89cc6d21496b0519efef",name:"title"})),o("slot",{key:"b026c37e8600250f9df2e01b7704a60f0b876fd9",name:"description"})))}static get style(){return a()}},[769,"pf-progress-step",{status:[513],state:[1537],position:[1026],last:[1540],orientation:[1537]}]);function i(){if(typeof customElements==="undefined"){return}const e=["pf-progress-step"];e.forEach((e=>{switch(e){case"pf-progress-step":if(!customElements.get(t(e))){customElements.define(t(e),n)}break}}))}i();const p=n;const c=i;export{p as PfProgressStep,c as defineCustomElement};
+//# sourceMappingURL=pf-progress-step.js.map

package/dist/components/pf-progress-step.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfProgressStepCss","PfProgressStep","__stencil_proxyCustomElement","HTMLElement","status","state","position","last","orientation","render","h","Host","key","role","this","class","part","name"],"sources":["src/components/pf-progress-step/pf-progress-step.css?tag=pf-progress-step&encapsulation=shadow","src/components/pf-progress-step/pf-progress-step.tsx"],"sourcesContent":[":host {\n  display: flex;\n  gap: var(--space-3);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  align-items: center;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n\n:host([orientation='vertical']) {\n  align-items: flex-start;\n  position: relative;\n}\n\n.marker-wrap {\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n}\n\n:host([orientation='horizontal']) .marker-wrap {\n  justify-content: center;\n}\n\n@media (--sm) {\n  :host([orientation='horizontal']) .marker-wrap {\n    flex: 1;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host([orientation='vertical']) .marker-wrap {\n  align-items: center;\n  flex-direction: column;\n}\n\n.marker {\n  align-items: center;\n  background: var(--pf-progress-steps-bg);\n  border: 1px solid var(--pf-progress-steps-border);\n  border-radius: var(--radius-full);\n  color: var(--pf-progress-steps-text-muted);\n  display: inline-flex;\n  flex: 0 0 auto;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  height: 28px;\n  justify-content: center;\n  position: relative;\n  width: 28px;\n  z-index: 1;\n  /* The marker changes as the current step advances. */\n  transition:\n    background-color var(--pf-transition-medium),\n    border-color var(--pf-transition-medium),\n    color var(--pf-transition-medium),\n    box-shadow var(--pf-transition-medium);\n}\n\n.connector {\n  background: var(--pf-progress-steps-border);\n  display: block;\n  flex: 1;\n  margin-inline-start: var(--space-2);\n  /* The connector fills in as the step completes. */\n  transition: background-color var(--pf-transition-slow);\n}\n\n:host([orientation='horizontal']) .connector {\n  display: none;\n}\n\n@media (--sm) {\n  :host([orientation='horizontal']) .connector {\n    display: block;\n    height: 1px;\n    left: 50%;\n    margin-inline-start: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    /* Spans the group's own gap, which it reads through the bridge above. */\n    width: calc(100% + var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap)));\n    z-index: 0;\n  }\n}\n\n:host([orientation='vertical']) .connector {\n  bottom: calc(var(--space-3) * -1);\n  inset-inline-start: 14px;\n  margin: 0;\n  position: absolute;\n  top: 28px;\n  width: 1px;\n}\n\n.content {\n  min-width: 0;\n}\n\n:host([orientation='horizontal']) .content {\n  text-align: center;\n}\n\n.title {\n  color: var(--pf-progress-steps-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  margin: var(--space-1) 0 0;\n  transition: color var(--pf-transition-medium);\n}\n\n/*\n * The description is styled through the slot rather than wrapped in a box of\n * its own, so that a step without one has no stray margin: a wrapper cannot be\n * collapsed from CSS, while an unassigned slot generates nothing at all.\n */\nslot[name='description']::slotted(*) {\n  color: var(--pf-progress-steps-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  margin: var(--space-1) 0 0;\n}\n\n:host([state='complete']) .marker {\n  background: var(--pf-progress-steps-complete-bg);\n  border-color: var(--pf-progress-steps-complete-border);\n  color: var(--pf-progress-steps-complete-text);\n}\n\n:host([state='current']) .marker {\n  background: var(--pf-progress-steps-current-bg);\n  border-color: var(--pf-progress-steps-current-border);\n  /*\n   * `--pf-focus-ring`, not the `--focus-ring-shadow` the React component asked\n   * for: that one is defined nowhere, and an undefined custom property makes\n   * the declaration invalid at computed-value time -- measured in Chromium,\n   * `box-shadow: var(--focus-ring-shadow)` computes to `none`, so the ring had\n   * never been drawn. Fixed in both layers.\n   */\n  box-shadow: var(--pf-focus-ring);\n  color: var(--pf-progress-steps-current-text);\n}\n\n:host([state='complete']) .connector {\n  background: var(--pf-progress-steps-complete-border);\n}\n\n:host([state='current']) .title {\n  color: var(--pf-progress-steps-current-title);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .marker,\n  .connector,\n  .title {\n    transition: none;\n  }\n}\n","import type { StepStatus } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { PfProgressStepsOrientation } from '../pf-progress-steps/pf-progress-steps';\n\n/**\n * One step inside a `pf-progress-steps`.\n *\n * @slot title - the step's title.\n * @slot description - secondary text below the title.\n * @part marker-wrap - the box holding the marker and the connector.\n * @part marker - the numbered circle.\n * @part connector - the line to the next step. Absent on the last.\n * @part content - the box holding the title and description.\n * @part title - the title's box.\n */\n@Component({\n  tag: 'pf-progress-step',\n  styleUrl: 'pf-progress-step.css',\n  shadow: true,\n})\nexport class PfProgressStep {\n  /**\n   * Set it to say where the trail has got to — usually `current` on one step,\n   * and the group infers the rest.\n   *\n   * This is the *asking* half, which the group never writes; `state` below is\n   * the answer. Keeping them apart is what lets the trail change: if the\n   * answer were written back here, the first step of a trail that said nothing\n   * would look explicitly `current`, and prepending a step would leave the\n   * mark behind on it.\n   */\n  @Prop({ reflect: true }) status?: StepStatus;\n\n  /**\n   * Set by the group: the resolved status, which is what the stylesheet reads\n   * and what carries `aria-current=\"step\"` for the one current step.\n   */\n  @Prop({ mutable: true, reflect: true }) state: StepStatus = 'upcoming';\n\n  /** Set by the group: the step's number, counting from 1. */\n  @Prop({ mutable: true }) position = 1;\n\n  /** Set by the group: the last step draws no connector. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** Set by the group from its own `orientation`. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) orientation: PfProgressStepsOrientation = 'horizontal';\n\n  render() {\n    return (\n      <Host role=\"listitem\" aria-current={this.state === 'current' ? 'step' : null}>\n        {/* Decorative: the number repeats the step's position in the list. */}\n        <div class=\"marker-wrap\" part=\"marker-wrap\" aria-hidden=\"true\">\n          <span class=\"marker\" part=\"marker\">\n            {this.position}\n          </span>\n          {!this.last && <span class=\"connector\" part=\"connector\" />}\n        </div>\n\n        <div class=\"content\" part=\"content\">\n          <p class=\"title\" part=\"title\">\n            <slot name=\"title\" />\n          </p>\n          {/*\n            No wrapper around the description, deliberately: a box around a\n            slot cannot be collapsed from CSS — `:not(:has(*))` never matches,\n            because the slot is itself a child — so an empty one would leave\n            its margin under every step without a description. An *unassigned*\n            slot generates nothing, so the styling goes on `::slotted(*)` and\n            the box goes away with the content.\n          */}\n          <slot name=\"description\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAoB,IAAM,kxF,MCqBnBC,EAAcC,EAAA,MAAAD,UAAAE,E,iFAWAC,OAMeC,MAAoB,WAGnCC,SAAW,EAGIC,KAAO,MAGPC,YAA0C,aAElF,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,WAAU,eAAeC,KAAKT,QAAU,UAAY,OAAS,MAEtEK,EAAA,OAAAE,IAAA,2CAAKG,MAAM,cAAcC,KAAK,cAAa,cAAa,QACtDN,EAAA,QAAAE,IAAA,2CAAMG,MAAM,SAASC,KAAK,UACvBF,KAAKR,WAENQ,KAAKP,MAAQG,EAAA,QAAAE,IAAA,2CAAMG,MAAM,YAAYC,KAAK,eAG9CN,EAAA,OAAAE,IAAA,2CAAKG,MAAM,UAAUC,KAAK,WACxBN,EAAA,KAAAE,IAAA,2CAAGG,MAAM,QAAQC,KAAK,SACpBN,EAAA,QAAAE,IAAA,2CAAMK,KAAK,WAUbP,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iB","ignoreList":[]}

package/dist/components/pf-progress-steps.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfProgressSteps extends Components.PfProgressSteps, HTMLElement {}
+export const PfProgressSteps: {
+    prototype: PfProgressSteps;
+    new (): PfProgressSteps;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-progress-steps.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,h as n,a as r}from"./index.js";function o(t){const e=t.findIndex((t=>t.status==="current"));return t.map(((t,s)=>{if(t.status)return t.status;if(e===-1)return s===0?"current":"upcoming";return s<e?"complete":"upcoming"}))}const i=()=>`:host{display:grid}:host([hidden]){display:none}:host([orientation='horizontal']){--pf-progress-step-gap:var(--space-3);gap:var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap));grid-template-columns:1fr}@media (min-width: 640px){:host([orientation='horizontal']){--pf-progress-step-gap:var(--space-4);grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}}:host([orientation='vertical']){gap:var(--space-3)}slot{display:contents}`;const a=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}orientation="horizontal";componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleOrientationChange(){this.sync()}async refresh(){this.sync()}get steps(){return Array.from(this.el.querySelectorAll("pf-progress-step")).filter((t=>t.parentElement===this.el))}askedStatus(t){const e=t.status;return e??t.getAttribute("status")??undefined}sync(){const t=this.steps;const e=o(t.map((t=>({status:this.askedStatus(t)}))));for(const[s,n]of t.entries()){const r=n;r.state=e[s];r.position=s+1;r.last=s===t.length-1;r.orientation=this.orientation}}render(){return n(r,{key:"cf93162c6e257b13786028c3c4d602642786fd39",role:"list"},n("slot",{key:"1d1d22b80605aff984af850933c4221a7ae740da",onSlotchange:()=>this.refresh()}))}static get watchers(){return{orientation:[{handleOrientationChange:0}]}}static get style(){return i()}},[769,"pf-progress-steps",{orientation:[513],refresh:[64]},undefined,{orientation:[{handleOrientationChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["pf-progress-steps"];e.forEach((e=>{switch(e){case"pf-progress-steps":if(!customElements.get(t(e))){customElements.define(t(e),a)}break}}))}p();const c=a;const h=p;export{c as PfProgressSteps,h as defineCustomElement};
+//# sourceMappingURL=pf-progress-steps.js.map

package/dist/components/pf-progress-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveStepStatuses","steps","firstCurrent","findIndex","step","status","map","index","pfProgressStepsCss","PfProgressSteps","__stencil_proxyCustomElement","HTMLElement","orientation","componentWillLoad","this","sync","componentDidLoad","handleOrientationChange","refresh","Array","from","el","querySelectorAll","filter","parentElement","askedStatus","asProp","getAttribute","undefined","statuses","entries","node","state","position","last","length","render","h","Host","key","role","onSlotchange"],"sources":["../core/dist/steps.js","src/components/pf-progress-steps/pf-progress-steps.css?tag=pf-progress-steps&encapsulation=shadow","src/components/pf-progress-steps/pf-progress-steps.tsx"],"sourcesContent":["//#region src/steps.ts\n/**\n* A status for every step, in order.\n*\n* An explicit status always wins, so a trail can mark several steps complete\n* out of order if it really wants to. Everything else follows from the first\n* step marked `current`: before it is complete, after it is upcoming. With\n* nothing marked at all the first step is the current one, because a progress\n* indicator showing no progress at all reads as broken.\n*\n* The whole array rather than one step's answer, so the scan for that first\n* `current` happens once instead of once per step.\n*/\nfunction resolveStepStatuses(steps) {\n\tconst firstCurrent = steps.findIndex((step) => step.status === \"current\");\n\treturn steps.map((step, index) => {\n\t\tif (step.status) return step.status;\n\t\tif (firstCurrent === -1) return index === 0 ? \"current\" : \"upcoming\";\n\t\treturn index < firstCurrent ? \"complete\" : \"upcoming\";\n\t});\n}\n//#endregion\nexport { resolveStepStatuses };\n",":host {\n  display: grid;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The gap is declared here and read by each step's connector, which has to\n * span it: custom properties inherit through the shadow boundary, so the\n * child picks up whichever indicator it is slotted into. The same bridge\n * pf-option uses for its colours.\n */\n:host([orientation='horizontal']) {\n  --pf-progress-step-gap: var(--space-3);\n  gap: var(--pf-progresssteps-progress-step-gap, var(--pf-progress-step-gap));\n  grid-template-columns: 1fr;\n}\n\n@media (--sm) {\n  :host([orientation='horizontal']) {\n    --pf-progress-step-gap: var(--space-4);\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  }\n}\n\n:host([orientation='vertical']) {\n  gap: var(--space-3);\n}\n\n/* The steps have to be grid items of the host, not of a box inside it. */\nslot {\n  display: contents;\n}\n","import { resolveStepStatuses, type StepStatus } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';\n\nexport type PfProgressStepsOrientation = 'horizontal' | 'vertical';\n\n/**\n * A step indicator over `pf-progress-step` children.\n *\n * The group owns everything a step cannot see on its own: its number, whether\n * it is last — so only the others draw a connector — the orientation, and the\n * status inference, which depends on where the current step is.\n *\n * @slot - the `pf-progress-step` children.\n */\n@Component({\n  tag: 'pf-progress-steps',\n  styleUrl: 'pf-progress-steps.css',\n  shadow: true,\n})\nexport class PfProgressSteps {\n  @Element() el!: HTMLElement;\n\n  /** Layout. Reflected, and pushed down onto every step. */\n  @Prop({ reflect: true }) orientation: PfProgressStepsOrientation = 'horizontal';\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('orientation')\n  handleOrientationChange() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the children, for a consumer who set a step's status through its\n   * *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested indicator owns its own steps. */\n  private get steps(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-progress-step')).filter(\n      (step) => step.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the step has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private askedStatus(step: HTMLElement): StepStatus | undefined {\n    const asProp = (step as HTMLElement & { status?: StepStatus }).status;\n    return asProp ?? (step.getAttribute('status') as StepStatus | null) ?? undefined;\n  }\n\n  /**\n   * Core's inference, so the React `ProgressSteps` reads the same trail the\n   * same way.\n   *\n   * The answer goes to `state`, never to the `status` a consumer asked with —\n   * the lesson `pf-breadcrumbs` learned the hard way. Writing it back would\n   * make the first step of an unmarked trail look explicitly `current`, and\n   * prepending a step would then leave the mark behind on it.\n   */\n  private sync() {\n    const steps = this.steps;\n    const statuses = resolveStepStatuses(steps.map((step) => ({ status: this.askedStatus(step) })));\n\n    for (const [index, step] of steps.entries()) {\n      const node = step as HTMLElement & {\n        state: StepStatus;\n        position: number;\n        last: boolean;\n        orientation: PfProgressStepsOrientation;\n      };\n      node.state = statuses[index];\n      node.position = index + 1;\n      node.last = index === steps.length - 1;\n      node.orientation = this.orientation;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"list\">\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAaA,SAASA,EAAoBC,GAC5B,MAAMC,EAAeD,EAAME,WAAWC,GAASA,EAAKC,SAAW,YAC/D,OAAOJ,EAAMK,KAAI,CAACF,EAAMG,KACvB,GAAIH,EAAKC,OAAQ,OAAOD,EAAKC,OAC7B,GAAIH,KAAiB,EAAI,OAAOK,IAAU,EAAI,UAAY,WAC1D,OAAOA,EAAQL,EAAe,WAAa,UAAU,GAEvD,CCpBA,MAAMM,EAAqB,IAAM,uc,MCmBpBC,EAAeC,EAAA,MAAAD,UAAAE,E,sGAIDC,YAA0C,aAGnE,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAIP,uBAAAE,GACEH,KAAKC,M,CAQP,aAAMG,GACJJ,KAAKC,M,CAIP,SAAYd,GACV,OAAOkB,MAAMC,KAAKN,KAAKO,GAAGC,iBAA8B,qBAAqBC,QAC1EnB,GAASA,EAAKoB,gBAAkBV,KAAKO,I,CAQlC,WAAAI,CAAYrB,GAClB,MAAMsB,EAAUtB,EAA+CC,OAC/D,OAAOqB,GAAWtB,EAAKuB,aAAa,WAAmCC,S,CAYjE,IAAAb,GACN,MAAMd,EAAQa,KAAKb,MACnB,MAAM4B,EAAW7B,EAAoBC,EAAMK,KAAKF,IAAI,CAAQC,OAAQS,KAAKW,YAAYrB,QAErF,IAAK,MAAOG,EAAOH,KAASH,EAAM6B,UAAW,CAC3C,MAAMC,EAAO3B,EAMb2B,EAAKC,MAAQH,EAAStB,GACtBwB,EAAKE,SAAW1B,EAAQ,EACxBwB,EAAKG,KAAO3B,IAAUN,EAAMkC,OAAS,EACrCJ,EAAKnB,YAAcE,KAAKF,W,EAI5B,MAAAwB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,QACTH,EAAA,QAAAE,IAAA,2CAAME,aAAc,IAAM3B,KAAKI,Y","ignoreList":[]}

package/dist/components/pf-radar-axis.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfRadarAxis extends Components.PfRadarAxis, HTMLElement {}
+export const PfRadarAxis: {
+    prototype: PfRadarAxis;
+    new (): PfRadarAxis;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-radar-axis.js

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as s,h as t,a as n}from"./index.js";const r=()=>`:host{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}:host([hidden]){display:none}:host(:not([drawn])){display:none}.label{color:var(--pf-radar-legend-text);font-size:var(--font-size-sm)}.value{color:var(--pf-radar-legend-value);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}`;const l=a(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}label="";value=0;drawn=false;render(){return t(n,{key:"41f13fdd1cdc8cf1bf0ae402af0007047cfa0545",role:"listitem"},t("span",{key:"061bc65887e2bdac027a2bb4e15f0e03512e7add",class:"label",part:"label"},this.label),t("span",{key:"c9edf254f3998b842bd62eb0c071366ac6082a40",class:"value",part:"value"},this.value))}static get style(){return r()}},[513,"pf-radar-axis",{label:[513],value:[514],drawn:[1540]}]);function c(){if(typeof customElements==="undefined"){return}const a=["pf-radar-axis"];a.forEach((a=>{switch(a){case"pf-radar-axis":if(!customElements.get(e(a))){customElements.define(e(a),l)}break}}))}c();const o=l;const i=c;export{o as PfRadarAxis,i as defineCustomElement};
+//# sourceMappingURL=pf-radar-axis.js.map

package/dist/components/pf-radar-axis.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfRadarAxisCss","PfRadarAxis","__stencil_proxyCustomElement","HTMLElement","label","value","drawn","render","h","Host","key","role","class","part","this"],"sources":["src/components/pf-radar-axis/pf-radar-axis.css?tag=pf-radar-axis&encapsulation=shadow","src/components/pf-radar-axis/pf-radar-axis.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n  justify-content: space-between;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* An axis the chart did not draw is not a legend row either. */\n:host(:not([drawn])) {\n  display: none;\n}\n\n.label {\n  color: var(--pf-radar-legend-text);\n  font-size: var(--font-size-sm);\n}\n\n.value {\n  color: var(--pf-radar-legend-value);\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One axis of a `pf-radar-chart`, and its own row in the legend.\n *\n * The name is a `label` **attribute** rather than slotted content, which is\n * the one place this differs from the React `RadarChart`'s `ReactNode`: the\n * chart draws each name inside its own SVG as a `<text>`, and an SVG `<text>`\n * cannot hold arbitrary markup in either layer. The legend row the axis draws\n * for itself uses the same string, so the two always agree.\n *\n * @part label - the legend row's name.\n * @part value - the legend row's number.\n */\n@Component({\n  tag: 'pf-radar-axis',\n  styleUrl: 'pf-radar-axis.css',\n  shadow: true,\n})\nexport class PfRadarAxis {\n  /** The axis's name, drawn in the chart and in the legend. */\n  @Prop({ reflect: true }) label = '';\n\n  /** How far along this axis the shape reaches. */\n  @Prop({ reflect: true }) value = 0;\n\n  /**\n   * Set by the chart: whether this axis is in the drawing.\n   *\n   * An axis with an unusable value is not drawn, so it is not a legend row\n   * either — a legend naming an axis that appears nowhere is worse than a\n   * shorter legend. Reflected, because that is what the stylesheet hides it\n   * with.\n   */\n  @Prop({ mutable: true, reflect: true }) drawn = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"label\" part=\"label\">\n          {this.label}\n        </span>\n        <span class=\"value\" part=\"value\">\n          {this.value}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAiB,IAAM,0U,MCmBhBC,EAAWC,EAAA,MAAAD,UAAAE,E,iFAEGC,MAAQ,GAGRC,MAAQ,EAUOC,MAAQ,MAEhD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACtBC,KAAKV,OAERI,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACtBC,KAAKT,O","ignoreList":[]}

package/dist/components/pf-radar-chart.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfRadarChart extends Components.PfRadarChart, HTMLElement {}
+export const PfRadarChart: {
+    prototype: PfRadarChart;
+    new (): PfRadarChart;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-radar-chart.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as r,h as a,a as s}from"./index.js";var n=3;function i(e,t,r){return{x:e+t*Math.cos(r),y:e+t*Math.sin(r)}}function o(e){if(!(e>0))return[];const t=2*Math.PI/e;return Array.from({length:e},((e,r)=>-Math.PI/2+r*t))}function l(e){return e.filter((e=>Number.isFinite(e.value)&&e.value>=0))}function d(e,t){if(typeof t==="number"&&t>0)return t;const r=Math.max(...l(e).map((e=>e.value)),1);return r>0?r:1}function c(e){return e.map((e=>`${e.x.toFixed(2)},${e.y.toFixed(2)}`)).join(" ")}function h(e,t,r,a){const s=Math.max(2,Math.floor(a)||2);return Array.from({length:s},((a,n)=>{const o=(n+1)/s;return c(e.map((e=>i(t,r*o,e))))}))}function p(e,t,r,a,s){const n=t>0?t:1;return r.map(((t,r)=>{const o=e[r];return i(a,s*(Number.isFinite(o)?Math.max(0,Math.min(1,o/n)):0),t)}))}const u=()=>`:host{align-items:stretch;display:inline-flex;flex-direction:column;gap:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row;gap:var(--space-6)}}.svg{display:block;height:auto;overflow:visible;width:min(100%, 320px)}.grid{fill:none;stroke:var(--pf-radar-grid-stroke);stroke-width:1}.axis{stroke:var(--pf-radar-axis-stroke);stroke-width:1}.area{fill:var(--pf-radar-fill);stroke:var(--pf-radar-stroke);stroke-width:2}.point{fill:var(--pf-radar-stroke);stroke:var(--pf-radar-point-stroke);stroke-width:1.5}.axis-label{fill:var(--pf-radar-label);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium)}.value{animation:pf-radar-grow var(--duration-slow) var(--easing-decelerate)}@keyframes pf-radar-grow{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.value{animation:none}}.legend{display:grid;gap:var(--space-2);list-style:none;margin:0;min-width:0;padding:0;width:100%}@media (min-width: 640px){.legend{min-width:140px;width:auto}}.legend.legend--hidden{display:none}.legend slot{display:contents}.empty{align-items:center;border:1px dashed var(--pf-radar-empty-border);border-radius:var(--radius-md);color:var(--pf-radar-empty-text);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-height:180px;min-width:260px;padding:var(--space-4);text-align:center}`;const f=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}size=280;max;levels=4;showAxes=true;showLegend=true;label="Radar chart";axes=[];componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}async refresh(){this.sync()}get axisElements(){return Array.from(this.el.children).filter((e=>e.tagName.toLowerCase()==="pf-radar-axis"))}sync(){const e=this.axisElements;const t=e.map((e=>{const t=e;return{label:t.label??e.getAttribute("label")??"",value:Number(t.value??e.getAttribute("value"))}}));const r=l(t);const a=r.length>=n;this.axes=a?r:[];const s=new Set(r);for(const[r,n]of e.entries()){n.drawn=a&&s.has(t[r])}}render(){const e=Math.max(Number(this.size)||280,180);const t=e/2;const r=t-36;if(this.axes.length<n){return a(s,null,a("div",{class:"empty",part:"empty"},a("slot",{name:"empty"},"A radar chart needs at least ",n," axes.")),a("ul",{class:"legend legend--hidden",part:"legend"},a("slot",{onSlotchange:()=>this.refresh()})))}const l=d(this.axes,this.max);const u=o(this.axes.length);const f=h(u,t,r,Number(this.levels));const m=p(this.axes.map((e=>e.value)),l,u,t,r);return a(s,null,a("svg",{class:"svg",part:"svg",viewBox:`0 0 ${e} ${e}`,role:"img","aria-label":this.label},f.map((e=>a("polygon",{class:"grid",part:"grid",points:e}))),this.showAxes&&u.map((e=>{const s=i(t,r,e);return a("line",{class:"axis",part:"axis",x1:t,y1:t,x2:s.x,y2:s.y})})),a("g",{class:"value",style:{transformBox:"view-box",transformOrigin:`${t}px ${t}px`}},a("polygon",{class:"area",part:"area",points:c(m)}),m.map((e=>a("circle",{class:"point",part:"point",cx:e.x,cy:e.y,r:"3"})))),u.map(((e,s)=>{const n=i(t,r+18,e);return a("text",{class:"axis-label",part:"axis-label",x:n.x,y:n.y,"text-anchor":"middle","dominant-baseline":"middle"},this.axes[s].label)}))),a("ul",{class:{legend:true,"legend--hidden":!this.showLegend},part:"legend"},a("slot",{onSlotchange:()=>this.refresh()})))}static get watchers(){return{max:[{sync:0}]}}static get style(){return u()}},[769,"pf-radar-chart",{size:[2],max:[2],levels:[2],showAxes:[516,"show-axes"],showLegend:[516,"show-legend"],label:[1],axes:[32],refresh:[64]},undefined,{max:[{sync:0}]}]);function m(){if(typeof customElements==="undefined"){return}const t=["pf-radar-chart"];t.forEach((t=>{switch(t){case"pf-radar-chart":if(!customElements.get(e(t))){customElements.define(e(t),f)}break}}))}m();const g=f;const x=m;export{g as PfRadarChart,x as defineCustomElement};
+//# sourceMappingURL=pf-radar-chart.js.map

package/dist/components/pf-radar-chart.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","__stencil_proxyCustomElement","HTMLElement","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/components/pf-radio-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfRadioButton extends Components.PfRadioButton, HTMLElement {}
+export const PfRadioButton: {
+    prototype: PfRadioButton;
+    new (): PfRadioButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-radio-button.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as i,c as s,h as a,a as n}from"./index.js";const o=()=>`:host{align-items:flex-start;display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.input{accent-color:var(--pf-radiogroup-accent);height:18px;margin-top:2px;width:18px}.input:focus-visible{box-shadow:var(--pf-radiogroup-focus-ring, var(--pf-focus-ring));outline:none}.text{color:var(--pf-radiogroup-text);cursor:pointer;display:grid;gap:2px}.label-text{font-size:var(--font-size-md);line-height:1.3}.description{color:var(--pf-radiogroup-text-muted);font-size:var(--font-size-sm);line-height:1.35}.description:not(:has(*)){display:none}:host([disabled]) .text{cursor:not-allowed;opacity:0.6}`;const c=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfRadioSelect=s(this,"pfRadioSelect")}get el(){return this}value="";checked=false;disabled=false;pfRadioSelect;componentDidRender(){const e=this.el.shadowRoot?.querySelector("input");if(e&&e.checked!==this.checked){e.checked=this.checked}}onChange=()=>{const e=this.el.shadowRoot?.querySelector("input");if(e)e.checked=this.checked;if(this.disabled)return;this.pfRadioSelect.emit({value:this.value})};render(){return a(n,{key:"020ab86762039d87706de73cfc8f310fe0a4f107"},a("input",{key:"e071c04150c76955a04b2a5b0b801b9c6015c8d0",id:"input",part:"input",class:"input",type:"radio",tabindex:"-1",checked:this.checked,disabled:this.disabled,onChange:this.onChange}),a("label",{key:"bd345592c343cc38f028a671aab8a3612ccf54aa",class:"text",part:"label",htmlFor:"input"},a("span",{key:"f58cc544dee2150e7df08bc6e21f26b3ccf6543b",class:"label-text"},a("slot",{key:"24fb49ee5cb132e5840448680bb73732cfac8a01"})),a("span",{key:"9d09bfae1ef9c5905a972a3b7c12ab1469f99c94",class:"description",part:"description"},a("slot",{key:"e0803f90fb20d9d83d8f0645aae4baefd1f43bf5",name:"description"}))))}static get delegatesFocus(){return true}static get style(){return o()}},[785,"pf-radio-button",{value:[513],checked:[1540],disabled:[516]}]);function r(){if(typeof customElements==="undefined"){return}const t=["pf-radio-button"];t.forEach((t=>{switch(t){case"pf-radio-button":if(!customElements.get(e(t))){customElements.define(e(t),c)}break}}))}r();const d=c;const p=r;export{d as PfRadioButton,p as defineCustomElement};
+//# sourceMappingURL=pf-radio-button.js.map

package/dist/components/pf-radio-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfRadioButtonCss","PfRadioButton","__stencil_proxyCustomElement","HTMLElement","value","checked","disabled","pfRadioSelect","componentDidRender","input","this","el","shadowRoot","querySelector","onChange","emit","render","h","Host","key","id","part","class","type","tabindex","htmlFor","name"],"sources":["src/components/pf-radio-button/pf-radio-button.css?tag=pf-radio-button&encapsulation=shadow","src/components/pf-radio-button/pf-radio-button.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * `accent-color` on a native radio, exactly as the React component does it, so\n * the dot is the browser's and the two layers look the same.\n */\n.input {\n  accent-color: var(--pf-radiogroup-accent);\n  height: 18px;\n  margin-top: 2px;\n  width: 18px;\n}\n\n/*\n * The ring lands here rather than on the host: the host delegates focus, so\n * `:focus-visible` matches the input — measured, not assumed.\n */\n.input:focus-visible {\n  box-shadow: var(--pf-radiogroup-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.text {\n  color: var(--pf-radiogroup-text);\n  cursor: pointer;\n  display: grid;\n  gap: 2px;\n}\n\n.label-text {\n  font-size: var(--font-size-md);\n  line-height: 1.3;\n}\n\n.description {\n  color: var(--pf-radiogroup-text-muted);\n  font-size: var(--font-size-sm);\n  line-height: 1.35;\n}\n\n/*\n * A slot is `display: contents`, so an empty description slot leaves this\n * wrapper with no content — collapse it so the grid gap does not open.\n */\n.description:not(:has(*)) {\n  display: none;\n}\n\n:host([disabled]) .text {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * One choice inside a `pf-radio-group`.\n *\n * Not form-associated, and deliberately so: a form-associated custom element\n * gets no radio grouping from the browser. Measured — checking a second one\n * leaves the first checked and the form submits *both* values, where native\n * radios submit one. So `pf-radio-group` owns the single-selection invariant\n * and the form value, and this element only asks to be chosen.\n *\n * The control is a native `<input type=\"radio\">` so the dot is the browser's,\n * drawn from `accent-color` exactly as the React component's is. It carries\n * `tabindex=\"-1\"` and the host delegates focus, which means the group governs\n * the tab order through the host while `:focus-visible` still lands on the\n * input the user can see.\n *\n * @slot - the choice's label.\n * @slot description - secondary text below the label.\n * @part input - the native radio.\n * @part label - the label element.\n * @part description - the wrapper around the description slot.\n */\n@Component({\n  tag: 'pf-radio-button',\n  styleUrl: 'pf-radio-button.css',\n  shadow: { delegatesFocus: true },\n})\nexport class PfRadioButton {\n  @Element() el!: HTMLElement;\n\n  /** Submitted by the group when this choice is the selected one. */\n  /**\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-radio-button[value=\"...\"]` in a React\n   * or Angular app finds nothing. The group reads the property, so this was\n   * never a live defect here -- it is the same trap that was one in\n   * `pf-command-item`.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /**\n   * Whether this is the chosen one. The group sets this — a consumer who sets\n   * it directly will have it overwritten the next time the group syncs.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Disable this choice alone. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Asks the group to select this choice. The group decides. */\n  @Event() pfRadioSelect!: EventEmitter<{ value: string }>;\n\n  /**\n   * The native input checks itself the instant it is clicked, before the group\n   * has had any say. Writing the property back on every render is what undoes\n   * that when the group declines — a disabled group, or a value the consumer\n   * is holding. Guarded on inequality so an unrelated re-render does not\n   * disturb it.\n   */\n  componentDidRender() {\n    const input = this.el.shadowRoot?.querySelector('input');\n    if (input && input.checked !== this.checked) {\n      input.checked = this.checked;\n    }\n  }\n\n  private onChange = () => {\n    /*\n     * Put the dot back before asking, every time. The native input has already\n     * moved it, and nothing here knows yet whether the group will agree — it\n     * may be disabled, this choice may be disabled, or a consumer may be\n     * holding `value`. Restoring first makes every one of those paths correct\n     * without the group having to undo anything; when it does agree, `checked`\n     * flips and the next render writes the dot back on.\n     */\n    const input = this.el.shadowRoot?.querySelector('input');\n    if (input) input.checked = this.checked;\n\n    if (this.disabled) return;\n    this.pfRadioSelect.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <input\n          id=\"input\"\n          part=\"input\"\n          class=\"input\"\n          type=\"radio\"\n          // Never an independent tab stop: the group drives the tab order\n          // through the host, and the host delegates focus down to here.\n          tabindex=\"-1\"\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={this.onChange}\n        />\n        <label class=\"text\" part=\"label\" htmlFor=\"input\">\n          <span class=\"label-text\">\n            <slot />\n          </span>\n          <span class=\"description\" part=\"description\">\n            <slot name=\"description\" />\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAmB,IAAM,imB,MC4BlBC,EAAaC,EAAA,MAAAD,UAAAE,E,iJAWCC,MAAQ,GAMOC,QAAU,MAGzBC,SAAW,MAG3BC,cAST,kBAAAC,GACE,MAAMC,EAAQC,KAAKC,GAAGC,YAAYC,cAAc,SAChD,GAAIJ,GAASA,EAAMJ,UAAYK,KAAKL,QAAS,CAC3CI,EAAMJ,QAAUK,KAAKL,O,EAIjBS,SAAW,KASjB,MAAML,EAAQC,KAAKC,GAAGC,YAAYC,cAAc,SAChD,GAAIJ,EAAOA,EAAMJ,QAAUK,KAAKL,QAEhC,GAAIK,KAAKJ,SAAU,OACnBI,KAAKH,cAAcQ,KAAK,CAAEX,MAAOM,KAAKN,OAAQ,EAGhD,MAAAY,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CACEC,GAAG,QACHC,KAAK,QACLC,MAAM,QACNC,KAAK,QAGLC,SAAS,KACTnB,QAASK,KAAKL,QACdC,SAAUI,KAAKJ,SACfQ,SAAUJ,KAAKI,WAEjBG,EAAA,SAAAE,IAAA,2CAAOG,MAAM,OAAOD,KAAK,QAAQI,QAAQ,SACvCR,EAAA,QAAAE,IAAA,2CAAMG,MAAM,cACVL,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,MAAM,cAAcD,KAAK,eAC7BJ,EAAA,QAAAE,IAAA,2CAAMO,KAAK,kB","ignoreList":[]}

package/dist/components/pf-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfRadioGroup extends Components.PfRadioGroup, HTMLElement {}
+export const PfRadioGroup: {
+    prototype: PfRadioGroup;
+    new (): PfRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-radio-group.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as r,c as s,h as i,a}from"./index.js";import{r as o}from"./p-CAz7-p8y.js";import{s as n,r as c}from"./p-Fiuz9ck7.js";import{a as d}from"./p-Cr6IXrUk.js";const l=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.legend{color:var(--pf-radiogroup-text);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-1)}.choices{display:grid;gap:var(--space-3)}:host([orientation='horizontal']) .choices{column-gap:var(--space-6);grid-auto-flow:column;justify-content:flex-start}.error{color:var(--pf-radiogroup-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}`;const h=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=s(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";legend;error;orientation="vertical";required=false;disabled=false;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value;this.syncFormState()}componentDidLoad(){this.syncChildren()}syncFormState(){this.internals.setFormValue(this.value||null);d(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;this.syncChildren()}get radios(){return Array.from(this.el.querySelectorAll("pf-radio-button"))}isDisabled(e){return this.disabled||e.hasAttribute("disabled")}syncChildren(){const e=this.radios;if(e.length===0)return;for(const t of e){const e=t.value===this.value;t.checked=e;t.setAttribute("aria-checked",e?"true":"false")}const t=e.filter((e=>!this.isDisabled(e)));const r=t.find((e=>e.value===this.value));n(t,r??t[0]);for(const t of e){if(this.isDisabled(t))t.tabIndex=-1}}handleSelect(e){e.stopPropagation();if(this.disabled)return;const t=e.detail.value;if(t===this.value)return;this.value=t;this.syncChildren();this.pfChange.emit({value:t})}handleKeyDown(e){if(e.defaultPrevented||this.disabled)return;const t=c(e.key,this.orientation);if(!t)return;const r=this.radios.filter((e=>!this.isDisabled(e)));if(r.length===0)return;const s=r.indexOf(document.activeElement);const i=o(t,r.map(((e,t)=>t)),s);if(i<0)return;e.preventDefault();const a=r[i];this.value=a.value;this.syncChildren();a.focus();this.pfChange.emit({value:a.value})}render(){return i(a,{key:"a1fceefbb8b63d192de9d4c47b13655d86c699cb",role:"radiogroup","aria-labelledby":this.legend?"legend":null,"aria-describedby":this.error?"error":null,"aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null},i("div",{key:"9ac01e771ab31419fcfc3f9c13f6d5e7610ea902",class:"field",part:"field"},this.legend&&i("span",{key:"ae208de4c221e0d83b1612fe2e24aa6b35453717",class:"legend",part:"legend",id:"legend"},this.legend),i("div",{key:"e015065c2d269b5b29bba200df93ec4a0c2fc777",class:"choices",part:"choices"},i("slot",{key:"32f707a32f56beaa9ee538ef00fe03b1c14aed80",onSlotchange:()=>this.syncChildren()})),this.error&&i("p",{key:"9dc3e40a8b44ae72cdb1839c2109b703b28b7ad0",class:"error",part:"error",id:"error"},this.error)))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0},{syncChildren:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],disabled:[{syncChildren:0}]}}static get style(){return l()}},[833,"pf-radio-group",{name:[513],value:[1025],legend:[1],error:[1],orientation:[513],required:[516],disabled:[516],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},[[0,"pfRadioSelect","handleSelect"],[0,"keydown","handleKeyDown"]],{value:[{syncFormState:0},{syncChildren:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],disabled:[{syncChildren:0}]}]);function f(){if(typeof customElements==="undefined"){return}const t=["pf-radio-group"];t.forEach((t=>{switch(t){case"pf-radio-group":if(!customElements.get(e(t))){customElements.define(e(t),h)}break}}))}f();const u=h;const p=f;export{u as PfRadioGroup,p as defineCustomElement};
+//# sourceMappingURL=pf-radio-group.js.map

package/dist/components/pf-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfRadioGroupCss","PfRadioGroup","__stencil_proxyCustomElement","HTMLElement","internals","name","value","legend","error","orientation","required","disabled","pfChange","initialValue","componentWillLoad","this","syncFormState","componentDidLoad","syncChildren","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","radios","Array","from","el","querySelectorAll","isDisabled","radio","hasAttribute","length","selected","checked","setAttribute","enabled","filter","find","syncRovingTabIndex","tabIndex","handleSelect","event","stopPropagation","next","detail","emit","handleKeyDown","defaultPrevented","action","resolveRovingKey","key","currentIndex","indexOf","document","activeElement","nextIndex","resolveListMove","map","_","index","preventDefault","target","focus","render","h","Host","role","class","part","id","onSlotchange"],"sources":["src/components/pf-radio-group/pf-radio-group.css?tag=pf-radio-group&encapsulation=shadow","src/components/pf-radio-group/pf-radio-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.legend {\n  color: var(--pf-radiogroup-text);\n  font-size: var(--font-size-md);\n  font-weight: var(--font-weight-semibold);\n  margin-bottom: var(--space-1);\n}\n\n.choices {\n  display: grid;\n  gap: var(--space-3);\n}\n\n:host([orientation='horizontal']) .choices {\n  column-gap: var(--space-6);\n  grid-auto-flow: column;\n  justify-content: flex-start;\n}\n\n.error {\n  color: var(--pf-radiogroup-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n","import { resolveListMove, resolveRovingKey, syncRovingTabIndex } from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\nexport type PfRadioGroupOrientation = 'vertical' | 'horizontal';\n\n/**\n * A form-associated group of `pf-radio-button` children.\n *\n * The group is the control, not the radios: it holds the one `name` and the\n * one `value`, because a form-associated custom element gets no radio grouping\n * from the browser. Measured — three independent form-associated elements with\n * the same name all stay checked and all submit. So single selection is this\n * element's job, and it is the only one of the pair that touches the form.\n *\n * Keyboard follows the ARIA radiogroup pattern rather than the toolbar one:\n * the group is a single tab stop, and the arrows both move and select.\n *\n * @slot - the `pf-radio-button` children.\n * @part field - the wrapper around legend, choices and error.\n * @part legend - the group's heading.\n * @part choices - the container the children are slotted into.\n * @part error - the error message below the group.\n */\n@Component({\n  tag: 'pf-radio-group',\n  styleUrl: 'pf-radio-group.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfRadioGroup {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because a form-associated element\n   * takes its submission name from the attribute, not this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The selected choice's value. Empty means nothing is selected. */\n  @Prop({ mutable: true }) value = '';\n\n  /** The group's heading. */\n  @Prop() legend?: string;\n\n  /** Error message. Its presence is what marks the group invalid. */\n  @Prop() error?: string;\n\n  /** Layout and arrow-key axis. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) orientation: PfRadioGroupOrientation = 'vertical';\n\n  @Prop({ reflect: true }) required = false;\n\n  /** Disable every choice. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the selection changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The value a form reset restores, which is the initial attribute. */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormState();\n  }\n\n  componentDidLoad() {\n    this.syncChildren();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, with nothing selected: a radio group where\n     * no choice is picked is absent from the submission, exactly as a set of\n     * native radios with none checked is.\n     */\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the group is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the choice the group started with. */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.syncChildren();\n  }\n\n  /** The choices, in source order. */\n  private get radios(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll('pf-radio-button'));\n  }\n\n  private isDisabled(radio: HTMLElement) {\n    return this.disabled || radio.hasAttribute('disabled');\n  }\n\n  /**\n   * Pushes the group's state onto its children: one checked, the rest not, and\n   * exactly one tab stop.\n   *\n   * The ARIA pattern puts the tab stop on the *selected* choice rather than on\n   * whichever was focused last, so that tabbing into the group lands on the\n   * current answer. With nothing selected it falls to the first enabled one,\n   * which is how a user reaches an unanswered group at all.\n   */\n  @Watch('value')\n  @Watch('disabled')\n  syncChildren() {\n    const radios = this.radios;\n    if (radios.length === 0) return;\n\n    for (const radio of radios) {\n      const selected = (radio as HTMLElement & { value: string }).value === this.value;\n      (radio as HTMLElement & { checked: boolean }).checked = selected;\n      radio.setAttribute('aria-checked', selected ? 'true' : 'false');\n    }\n\n    const enabled = radios.filter((radio) => !this.isDisabled(radio));\n    const checked = enabled.find(\n      (radio) => (radio as HTMLElement & { value: string }).value === this.value,\n    );\n    // Only the enabled choices are tab stops; a disabled one is never reachable.\n    syncRovingTabIndex(enabled, checked ?? enabled[0]);\n    for (const radio of radios) {\n      if (this.isDisabled(radio)) radio.tabIndex = -1;\n    }\n  }\n\n  @Listen('pfRadioSelect')\n  handleSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const next = event.detail.value;\n    if (next === this.value) return;\n\n    this.value = next;\n    this.syncChildren();\n    this.pfChange.emit({ value: next });\n  }\n\n  /**\n   * In a radiogroup the arrows move *and* select — unlike a toolbar, where\n   * they only move. Disabled choices are skipped entirely, which is why the\n   * index maths runs over the enabled subset rather than over all children.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented || this.disabled) return;\n\n    const action = resolveRovingKey(event.key, this.orientation);\n    if (!action) return;\n\n    const enabled = this.radios.filter((radio) => !this.isDisabled(radio));\n    if (enabled.length === 0) return;\n\n    const currentIndex = enabled.indexOf(document.activeElement as HTMLElement);\n    const nextIndex = resolveListMove(\n      action,\n      enabled.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    const target = enabled[nextIndex] as HTMLElement & { value: string };\n    this.value = target.value;\n    this.syncChildren();\n    target.focus();\n    this.pfChange.emit({ value: target.value });\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-labelledby={this.legend ? 'legend' : null}\n        aria-describedby={this.error ? 'error' : null}\n        aria-invalid={this.error ? 'true' : null}\n        aria-required={this.required ? 'true' : null}\n      >\n        <div class=\"field\" part=\"field\">\n          {this.legend && (\n            <span class=\"legend\" part=\"legend\" id=\"legend\">\n              {this.legend}\n            </span>\n          )}\n          <div class=\"choices\" part=\"choices\">\n            <slot onSlotchange={() => this.syncChildren()} />\n          </div>\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gLAAA,MAAMA,EAAkB,IAAM,if,MC2CjBC,EAAYC,EAAA,MAAAD,UAAAE,E,6KAGJC,UAMMC,KAGAC,MAAQ,GAGzBC,OAGAC,MAGiBC,YAAuC,WAEvCC,SAAW,MAGXC,SAAW,MAG3BC,SAGDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKT,MACzBS,KAAKC,e,CAGP,gBAAAC,GACEF,KAAKG,c,CAMP,aAAAF,GAMED,KAAKX,UAAUe,aAAaJ,KAAKT,OAAS,MAC1Cc,EAAqBL,KAAKX,UAAWiB,QAAQN,KAAKT,OAAQS,KAAKL,SAAUK,KAAKP,M,CAKhF,mBAAMc,GACJ,OAAOP,KAAKX,UAAUkB,e,CAKxB,oBAAMC,GACJ,OAAOR,KAAKX,UAAUmB,gB,CAKxB,0BAAMC,GACJ,OAAOT,KAAKX,UAAUqB,iB,CAIxB,iBAAAC,GACEX,KAAKT,MAAQS,KAAKF,aAClBE,KAAKG,c,CAIP,UAAYS,GACV,OAAOC,MAAMC,KAAKd,KAAKe,GAAGC,iBAAiB,mB,CAGrC,UAAAC,CAAWC,GACjB,OAAOlB,KAAKJ,UAAYsB,EAAMC,aAAa,W,CAc7C,YAAAhB,GACE,MAAMS,EAASZ,KAAKY,OACpB,GAAIA,EAAOQ,SAAW,EAAG,OAEzB,IAAK,MAAMF,KAASN,EAAQ,CAC1B,MAAMS,EAAYH,EAA0C3B,QAAUS,KAAKT,MAC1E2B,EAA6CI,QAAUD,EACxDH,EAAMK,aAAa,eAAgBF,EAAW,OAAS,Q,CAGzD,MAAMG,EAAUZ,EAAOa,QAAQP,IAAWlB,KAAKiB,WAAWC,KAC1D,MAAMI,EAAUE,EAAQE,MACrBR,GAAWA,EAA0C3B,QAAUS,KAAKT,QAGvEoC,EAAmBH,EAASF,GAAWE,EAAQ,IAC/C,IAAK,MAAMN,KAASN,EAAQ,CAC1B,GAAIZ,KAAKiB,WAAWC,GAAQA,EAAMU,UAAW,C,EAKjD,YAAAC,CAAaC,GACXA,EAAMC,kBACN,GAAI/B,KAAKJ,SAAU,OAEnB,MAAMoC,EAAOF,EAAMG,OAAO1C,MAC1B,GAAIyC,IAAShC,KAAKT,MAAO,OAEzBS,KAAKT,MAAQyC,EACbhC,KAAKG,eACLH,KAAKH,SAASqC,KAAK,CAAE3C,MAAOyC,G,CAS9B,aAAAG,CAAcL,GACZ,GAAIA,EAAMM,kBAAoBpC,KAAKJ,SAAU,OAE7C,MAAMyC,EAASC,EAAiBR,EAAMS,IAAKvC,KAAKN,aAChD,IAAK2C,EAAQ,OAEb,MAAMb,EAAUxB,KAAKY,OAAOa,QAAQP,IAAWlB,KAAKiB,WAAWC,KAC/D,GAAIM,EAAQJ,SAAW,EAAG,OAE1B,MAAMoB,EAAehB,EAAQiB,QAAQC,SAASC,eAC9C,MAAMC,EAAYC,EAChBR,EACAb,EAAQsB,KAAI,CAACC,EAAGC,IAAUA,IAC1BR,GAEF,GAAII,EAAY,EAAG,OAEnBd,EAAMmB,iBACN,MAAMC,EAAS1B,EAAQoB,GACvB5C,KAAKT,MAAQ2D,EAAO3D,MACpBS,KAAKG,eACL+C,EAAOC,QACPnD,KAAKH,SAASqC,KAAK,CAAE3C,MAAO2D,EAAO3D,O,CAGrC,MAAA6D,GACE,OACEC,EAACC,EAAI,CAAAf,IAAA,2CACHgB,KAAK,aAAY,kBACAvD,KAAKR,OAAS,SAAW,KAAI,mBAC5BQ,KAAKP,MAAQ,QAAU,KAAI,eAC/BO,KAAKP,MAAQ,OAAS,KAAI,gBACzBO,KAAKL,SAAW,OAAS,MAExC0D,EAAA,OAAAd,IAAA,2CAAKiB,MAAM,QAAQC,KAAK,SACrBzD,KAAKR,QACJ6D,EAAA,QAAAd,IAAA,2CAAMiB,MAAM,SAASC,KAAK,SAASC,GAAG,UACnC1D,KAAKR,QAGV6D,EAAA,OAAAd,IAAA,2CAAKiB,MAAM,UAAUC,KAAK,WACxBJ,EAAA,QAAAd,IAAA,2CAAMoB,aAAc,IAAM3D,KAAKG,kBAEhCH,KAAKP,OACJ4D,EAAA,KAAAd,IAAA,2CAAGiB,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9B1D,KAAKP,Q","ignoreList":[]}

package/dist/components/pf-rating-badge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfRatingBadge extends Components.PfRatingBadge, HTMLElement {}
+export const PfRatingBadge: {
+    prototype: PfRatingBadge;
+    new (): PfRatingBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-rating-badge.js

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as s,h as t,a as i}from"./index.js";import{f as r,c as n}from"./p-DVK0sUX2.js";import{d as c}from"./p-CkFjPRTe.js";const o=()=>`:host{align-items:center;background:var(--pf-rating-badge-bg);border:1px solid var(--pf-rating-badge-border);border-radius:var(--radius-full);color:var(--pf-rating-badge-text);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--space-2);line-height:1}:host([hidden]){display:none}:host([size='sm']){min-height:24px;padding:0 var(--space-2)}:host([size='md']){min-height:28px;padding:0 var(--space-3)}.icon{display:block;fill:currentColor;height:14px;width:14px}.value{align-items:center;display:inline-flex;gap:var(--space-1)}.separator{opacity:0.65}.reviews{color:var(--pf-rating-badge-reviews);font-weight:var(--font-weight-medium)}`;const f=a(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}value=0;max=5;reviews;size="md";render(){const e=Number(this.max);const a=n(Number(this.value),e);const s=this.reviews;return t(i,{key:"6136e9ef02a72ad066bcd78116ce754d539fcfae"},t("pf-icon",{key:"716cfacb32809c7baed7a0033175e243f4999ff6",class:"icon",part:"icon",name:"star","aria-hidden":"true"}),t("span",{key:"33ac2a3b281d0fb975f94aee3f1f15a7c4ed095c",class:"value",part:"value"},r(a),t("span",{key:"876cd76f0cd653874a258d12f2288ce92ed38f02",class:"separator"},"/"),r(e)),s!==undefined&&s!==null&&t("span",{key:"158525f1ceaf5f08ef158eef1e5e99a521c37620",class:"reviews",part:"reviews"},"(",Number(s).toLocaleString(),")"))}static get style(){return o()}},[513,"pf-rating-badge",{value:[2],max:[2],reviews:[2],size:[513]}]);function d(){if(typeof customElements==="undefined"){return}const a=["pf-rating-badge","pf-icon"];a.forEach((a=>{switch(a){case"pf-rating-badge":if(!customElements.get(e(a))){customElements.define(e(a),f)}break;case"pf-icon":if(!customElements.get(e(a))){c()}break}}))}d();const p=f;const l=d;export{p as PfRatingBadge,l as defineCustomElement};
+//# sourceMappingURL=pf-rating-badge.js.map

package/dist/components/pf-rating-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfRatingBadgeCss","PfRatingBadge","__stencil_proxyCustomElement","HTMLElement","value","max","reviews","size","render","Number","this","clampRating","h","Host","key","class","part","name","formatRating","undefined","toLocaleString"],"sources":["src/components/pf-rating-badge/pf-rating-badge.css?tag=pf-rating-badge&encapsulation=shadow","src/components/pf-rating-badge/pf-rating-badge.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  background: var(--pf-rating-badge-bg);\n  border: 1px solid var(--pf-rating-badge-border);\n  border-radius: var(--radius-full);\n  color: var(--pf-rating-badge-text);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  gap: var(--space-2);\n  line-height: 1;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  min-height: 24px;\n  padding: 0 var(--space-2);\n}\n\n:host([size='md']) {\n  min-height: 28px;\n  padding: 0 var(--space-3);\n}\n\n.icon {\n  display: block;\n  fill: currentColor;\n  height: 14px;\n  width: 14px;\n}\n\n.value {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-1);\n}\n\n.separator {\n  opacity: 0.65;\n}\n\n.reviews {\n  color: var(--pf-rating-badge-reviews);\n  font-weight: var(--font-weight-medium);\n}\n","import { clampRating, formatRating } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfRatingBadgeSize = 'sm' | 'md';\n\n/**\n * A rating as a compact pill: one star, the number out of the maximum, and\n * optionally how many reviews it came from.\n *\n * @part icon - the star.\n * @part value - the rating and the maximum.\n * @part reviews - the review count, when `reviews` is set.\n */\n@Component({\n  tag: 'pf-rating-badge',\n  styleUrl: 'pf-rating-badge.css',\n  shadow: true,\n})\nexport class PfRatingBadge {\n  /** The rating. Clamped into 0..max. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 5;\n\n  /**\n   * How many reviews the rating came from. Omit it to show no count at all —\n   * which is different from `0`, a product nobody has reviewed yet.\n   */\n  @Prop() reviews?: number;\n\n  /** Padding and height. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfRatingBadgeSize = 'md';\n\n  render() {\n    const max = Number(this.max);\n    const value = clampRating(Number(this.value), max);\n    const reviews = this.reviews;\n\n    return (\n      <Host>\n        <pf-icon class=\"icon\" part=\"icon\" name=\"star\" aria-hidden=\"true\"></pf-icon>\n        <span class=\"value\" part=\"value\">\n          {formatRating(value)}\n          <span class=\"separator\">/</span>\n          {formatRating(max)}\n        </span>\n        {reviews !== undefined && reviews !== null && (\n          <span class=\"reviews\" part=\"reviews\">\n            ({Number(reviews).toLocaleString()})\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAmB,IAAM,6qB,MCkBlBC,EAAaC,EAAA,MAAAD,UAAAE,E,iFAEhBC,MAAQ,EAGRC,IAAM,EAMNC,QAGiBC,KAA0B,KAEnD,MAAAC,GACE,MAAMH,EAAMI,OAAOC,KAAKL,KACxB,MAAMD,EAAQO,EAAYF,OAAOC,KAAKN,OAAQC,GAC9C,MAAMC,EAAUI,KAAKJ,QAErB,OACEM,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WAAAE,IAAA,2CAASC,MAAM,OAAOC,KAAK,OAAOC,KAAK,OAAM,cAAa,SAC1DL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SACtBE,EAAad,GACdQ,EAAA,QAAAE,IAAA,2CAAMC,MAAM,aAAW,KACtBG,EAAab,IAEfC,IAAYa,WAAab,IAAY,MACpCM,EAAA,QAAAE,IAAA,2CAAMC,MAAM,UAAUC,KAAK,WAAS,IAChCP,OAAOH,GAASc,iBAAgB,K","ignoreList":[]}

package/dist/components/pf-rating-stars.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfRatingStars extends Components.PfRatingStars, HTMLElement {}
+export const PfRatingStars: {
+    prototype: PfRatingStars;
+    new (): PfRatingStars;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-rating-stars.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,h as s,a as i}from"./index.js";import{f as r,s as n,c as l}from"./p-DVK0sUX2.js";import{d as o}from"./p-CkFjPRTe.js";const f=()=>`: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 c=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}value=0;max=5;size=18;showValue=false;label;get count(){const e=Math.round(Number(this.max));return Number.isFinite(e)?Math.max(e,0):0}render(){const e=this.count;const t=l(Number(this.value),e);return s(i,{key:"01f323b4b49ee170a9849e74c14f4d13709b8e52",role:"img","aria-label":this.label??`Rating ${t} out of ${e}`},s("div",{key:"717c1eddcb89120cd107f0f2f57ed1e2d132e763",class:"track",part:"track","aria-hidden":"true"},Array.from({length:e},((e,a)=>s("span",{class:"star",part:"star",style:{"--pf-rating-fill":`${n(t,a)}%`,"--pf-rating-size":`${Number(this.size)}px`}},s("pf-icon",{class:"icon base",name:"star"}),s("span",{class:"fill"},s("pf-icon",{class:"icon filled",name:"star"})))))),this.showValue&&s("span",{key:"9f035bc5082e359f1c91a5a81af152f76d3371bf",class:"value",part:"value"},r(t)))}static get style(){return f()}},[513,"pf-rating-stars",{value:[2],max:[2],size:[2],showValue:[4,"show-value"],label:[1]}]);function p(){if(typeof customElements==="undefined"){return}const t=["pf-rating-stars","pf-icon"];t.forEach((t=>{switch(t){case"pf-rating-stars":if(!customElements.get(e(t))){customElements.define(e(t),c)}break;case"pf-icon":if(!customElements.get(e(t))){o()}break}}))}p();const d=c;const m=p;export{d as PfRatingStars,m as defineCustomElement};
+//# sourceMappingURL=pf-rating-stars.js.map

package/dist/components/pf-rating-stars.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfRatingStarsCss","PfRatingStars","__stencil_proxyCustomElement","HTMLElement","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":"iJAAA,MAAMA,EAAmB,IAAM,gqB,MCmBlBC,EAAaC,EAAA,MAAAD,UAAAE,E,iFAEhBC,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/components/pf-resizable.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfResizable extends Components.PfResizable, HTMLElement {}
+export const PfResizable: {
+    prototype: PfResizable;
+    new (): PfResizable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-resizable.js

@@ -0,0 +1,2 @@
+import{t as e,p as n,H as t,c as i,h as a,a as r}from"./index.js";import{c as s}from"./p-DSXauhXX.js";function o(e,{min:n=0,max:t=100}={}){if(!Number.isFinite(e))return s((n+t)/2,n,t);return s(e,n,t)}function h(e,n,t,i={}){if(!(t>0))return null;return o(Math.round((e-n)/t*100),i)}function l(e,n){const{orientation:t,size:i,step:a=2,min:r=0,max:s=100}=n;const h=o(i,{min:r,max:s});const l=t==="horizontal"?"ArrowLeft":"ArrowUp";const d=t==="horizontal"?"ArrowRight":"ArrowDown";if(e===l)return o(h-a,{min:r,max:s});if(e===d)return o(h+a,{min:r,max:s});if(e==="Home")return o(r,{min:r,max:s});if(e==="End")return o(s,{min:r,max:s});return null}const d=()=>`:host{display:flex;overflow:hidden;width:100%}:host([hidden]){display:none}:host([orientation='horizontal']){flex-direction:row}:host([orientation='vertical']){flex-direction:column}.panel{flex-grow:0;flex-shrink:0;min-height:0;min-width:0;overflow:auto}.end{flex:1 1 0}.handle{align-items:center;background:var(--pf-resizable-handle-bg);display:flex;flex-shrink:0;justify-content:center;position:relative;touch-action:none;transition:background var(--pf-transition-fast)}.handle:hover,.handle:focus-visible{background:var(--pf-resizable-handle-active-bg)}.handle:focus-visible{box-shadow:var(--pf-resizable-focus-ring, var(--pf-focus-ring));outline:none}:host([orientation='horizontal']) .handle{cursor:col-resize;width:var(--pf-resizable-handle-size, 6px)}:host([orientation='vertical']) .handle{cursor:row-resize;height:var(--pf-resizable-handle-size, 6px)}.grip{background:var(--pf-resizable-grip);border-radius:var(--radius-full)}:host([orientation='horizontal']) .grip{height:24px;width:2px}:host([orientation='vertical']) .grip{height:2px;width:24px}@media (prefers-reduced-motion: reduce){.handle{transition:none}}`;const c=n(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange")}get el(){return this}orientation="horizontal";size=50;min=10;max=90;step=2;handleLabel="Resize panels";pfChange;dragging=false;handleBoundsChange(){const e=this.resolved;if(e!==this.size)this.size=e}get resolved(){return o(Number(this.size),{min:this.min,max:this.max})}get bounds(){return{min:this.min,max:this.max}}handlePointerEnd(e){if(!this.dragging)return;this.dragging=false;const n=this.handle;if(n?.hasPointerCapture(e.pointerId))n.releasePointerCapture(e.pointerId)}get handle(){return this.el.shadowRoot?.querySelector(".handle")??null}onPointerDown=e=>{e.preventDefault();this.dragging=true;const n=e.currentTarget;n.setPointerCapture(e.pointerId);n.focus()};onPointerMove=e=>{if(!this.dragging)return;const n=this.el.getBoundingClientRect();const t=this.orientation==="horizontal"?h(e.clientX,n.left,n.width,this.bounds):h(e.clientY,n.top,n.height,this.bounds);if(t!==null)this.commit(t)};onKeyDown=e=>{const n=l(e.key,{orientation:this.orientation,size:this.resolved,min:this.min,max:this.max,step:Number(this.step)});if(n===null)return;e.preventDefault();this.commit(n)};commit(e){if(e===this.resolved)return;this.size=e;this.pfChange.emit({size:e})}render(){const e=this.resolved;const n=this.orientation==="horizontal";return a(r,{key:"2ac1ef130571d8eea4d6443bdf154c30190c7f68"},a("div",{key:"acce0a5eac7e80d55f29094d349615e741544b9a",class:"panel start",part:"start",style:{flexBasis:`${e}%`}},a("slot",{key:"da6b586f6501216f9496172c359418b27bbe2dda",name:"start"})),a("div",{key:"0d36376c8f1916c6d302216d88a49399b2f1e983",class:"handle",part:"handle",role:"separator",tabindex:"0","aria-label":this.handleLabel,"aria-orientation":n?"vertical":"horizontal","aria-valuenow":String(e),"aria-valuemin":String(this.min),"aria-valuemax":String(this.max),onPointerDown:this.onPointerDown,onPointerMove:this.onPointerMove,onKeyDown:this.onKeyDown},a("span",{key:"5d90a73260ad56738b9d697faa86e1eb5cd6bda2",class:"grip",part:"grip","aria-hidden":"true"})),a("div",{key:"758514a9446b4f9be4164334c56c98cff4492d79",class:"panel end",part:"end"},a("slot",{key:"8361324119a9ab7b732128d9680125b99a13c6be",name:"end"})))}static get watchers(){return{min:[{handleBoundsChange:0}],max:[{handleBoundsChange:0}]}}static get style(){return d()}},[769,"pf-resizable",{orientation:[513],size:[1026],min:[2],max:[2],step:[2],handleLabel:[1,"handle-label"]},[[1,"pointerup","handlePointerEnd"],[1,"pointercancel","handlePointerEnd"]],{min:[{handleBoundsChange:0}],max:[{handleBoundsChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const n=["pf-resizable"];n.forEach((n=>{switch(n){case"pf-resizable":if(!customElements.get(e(n))){customElements.define(e(n),c)}break}}))}f();const u=c;const p=f;export{u as PfResizable,p as defineCustomElement};
+//# sourceMappingURL=pf-resizable.js.map

package/dist/components/pf-resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampSplitSize","size","min","max","Number","isFinite","clampNumber","splitSizeFromPointer","position","start","length","bounds","Math","round","resolveSplitterKey","key","state","orientation","step","current","decrease","increase","pfResizableCss","PfResizable","__stencil_proxyCustomElement","HTMLElement","handleLabel","pfChange","dragging","handleBoundsChange","next","this","resolved","handlePointerEnd","event","handle","hasPointerCapture","pointerId","releasePointerCapture","el","shadowRoot","querySelector","onPointerDown","preventDefault","currentTarget","setPointerCapture","focus","onPointerMove","rect","getBoundingClientRect","clientX","left","width","clientY","top","height","commit","onKeyDown","emit","render","horizontal","h","Host","class","part","style","flexBasis","name","role","tabindex","String"],"sources":["../core/dist/splitter.js","src/components/pf-resizable/pf-resizable.css?tag=pf-resizable&encapsulation=shadow","src/components/pf-resizable/pf-resizable.tsx"],"sourcesContent":["import { clampNumber } from \"./number-field.js\";\n//#region src/splitter.ts\n/**\n* The arithmetic behind a two-panel splitter: what a pointer position means\n* as a percentage, what a key does to it, and what it is clamped into.\n*\n* Shared because every part of it is visible to a consumer, and because a\n* splitter's keys depend on its orientation — a React `Resizable` and a\n* `<pf-resizable>` that disagreed about which arrow grows the first panel\n* would be two controls wearing one name.\n*/\n/**\n* Keeps a size inside min..max, in percent.\n*\n* A size that is not a finite number becomes an even split *of the bounds*\n* rather than `NaN`. It matters because `NaN` survives arithmetic silently and\n* then reaches the DOM as `flex-basis: NaN%`, an invalid declaration that\n* collapses the panel — the same failure mode as an undefined custom property,\n* and just as hard to read back from the result.\n*/\nfunction clampSplitSize(size, { min = 0, max = 100 } = {}) {\n\tif (!Number.isFinite(size)) return clampNumber((min + max) / 2, min, max);\n\treturn clampNumber(size, min, max);\n}\n/**\n* Where a pointer sits along a container, as the first panel's share.\n*\n* `null` when the container has no length, which is not a hypothetical: a\n* splitter inside a closed disclosure, or one dragged before its first\n* layout, measures zero, and dividing by it gives `Infinity` — or `NaN` when\n* the pointer is at the container's own edge. The caller keeps the size it\n* had instead.\n*/\nfunction splitSizeFromPointer(position, start, length, bounds = {}) {\n\tif (!(length > 0)) return null;\n\treturn clampSplitSize(Math.round((position - start) / length * 100), bounds);\n}\n/**\n* What a key does to the size, or `null` for a key the splitter does not\n* handle — which is also the signal not to call `preventDefault`.\n*\n* Which arrows apply follows the orientation: side-by-side panels are grown\n* and shrunk with Left and Right, stacked ones with Up and Down. The other\n* pair is deliberately not handled, so Up and Down still scroll a page with a\n* horizontal splitter focused. Home and End jump to the bounds, which is the\n* only way to collapse a panel in one press.\n*/\nfunction resolveSplitterKey(key, state) {\n\tconst { orientation, size, step = 2, min = 0, max = 100 } = state;\n\tconst current = clampSplitSize(size, {\n\t\tmin,\n\t\tmax\n\t});\n\tconst decrease = orientation === \"horizontal\" ? \"ArrowLeft\" : \"ArrowUp\";\n\tconst increase = orientation === \"horizontal\" ? \"ArrowRight\" : \"ArrowDown\";\n\tif (key === decrease) return clampSplitSize(current - step, {\n\t\tmin,\n\t\tmax\n\t});\n\tif (key === increase) return clampSplitSize(current + step, {\n\t\tmin,\n\t\tmax\n\t});\n\tif (key === \"Home\") return clampSplitSize(min, {\n\t\tmin,\n\t\tmax\n\t});\n\tif (key === \"End\") return clampSplitSize(max, {\n\t\tmin,\n\t\tmax\n\t});\n\treturn null;\n}\n//#endregion\nexport { clampSplitSize, resolveSplitterKey, splitSizeFromPointer };\n",":host {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex-direction: row;\n}\n\n:host([orientation='vertical']) {\n  flex-direction: column;\n}\n\n.panel {\n  flex-grow: 0;\n  flex-shrink: 0;\n  min-height: 0;\n  min-width: 0;\n  overflow: auto;\n}\n\n/* The second panel takes whatever the first one leaves. */\n.end {\n  flex: 1 1 0;\n}\n\n.handle {\n  align-items: center;\n  background: var(--pf-resizable-handle-bg);\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  position: relative;\n  /* Without this a touch drag scrolls the page instead of moving the split. */\n  touch-action: none;\n  transition: background var(--pf-transition-fast);\n}\n\n.handle:hover,\n.handle:focus-visible {\n  background: var(--pf-resizable-handle-active-bg);\n}\n\n.handle:focus-visible {\n  box-shadow: var(--pf-resizable-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n:host([orientation='horizontal']) .handle {\n  cursor: col-resize;\n  width: var(--pf-resizable-handle-size, 6px);\n}\n\n:host([orientation='vertical']) .handle {\n  cursor: row-resize;\n  height: var(--pf-resizable-handle-size, 6px);\n}\n\n.grip {\n  background: var(--pf-resizable-grip);\n  border-radius: var(--radius-full);\n}\n\n:host([orientation='horizontal']) .grip {\n  height: 24px;\n  width: 2px;\n}\n\n:host([orientation='vertical']) .grip {\n  height: 2px;\n  width: 24px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .handle {\n    transition: none;\n  }\n}\n","import { clampSplitSize, resolveSplitterKey, splitSizeFromPointer } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * Two panels with a draggable separator between them.\n *\n * The panels are slotted — `start` and `end` rather than a default slot taking\n * exactly two children, because a slot cannot be told to take only the first\n * assigned node and a consumer looping in their own template would otherwise\n * find the third child silently ignored, which is what the React `Resizable`\n * does with `Children.toArray(children)`.\n *\n * All of the arithmetic is core's, so this and the React `Resizable` agree on\n * which arrow grows the first panel, on where a pointer sits, and on what a\n * size outside the bounds becomes.\n *\n * @slot start - the first panel: the one whose size this controls.\n * @slot end - the second panel, which takes the rest.\n * @part start - the first panel's box.\n * @part end - the second panel's box.\n * @part handle - the separator.\n * @part grip - the mark in the middle of the separator.\n */\n@Component({\n  tag: 'pf-resizable',\n  styleUrl: 'pf-resizable.css',\n  shadow: true,\n})\nexport class PfResizable {\n  @Element() el!: HTMLElement;\n\n  /**\n   * `horizontal` puts the panels side by side and drags left and right;\n   * `vertical` stacks them. Reflected, because the stylesheet selects on it.\n   */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** The first panel's share, in percent. */\n  @Prop({ mutable: true }) size = 50;\n\n  /** The first panel's smallest share, in percent. */\n  @Prop() min = 10;\n\n  /** Its largest. */\n  @Prop() max = 90;\n\n  /** How far one key press moves it, in percent. */\n  @Prop() step = 2;\n\n  /** The separator's accessible name. */\n  @Prop() handleLabel = 'Resize panels';\n\n  /** Fires when the split changes, by pointer or by key. */\n  @Event() pfChange!: EventEmitter<{ size: number }>;\n\n  private dragging = false;\n\n  @Watch('min')\n  @Watch('max')\n  handleBoundsChange() {\n    // A consumer narrowing the bounds must not leave the panel outside them.\n    const next = this.resolved;\n    if (next !== this.size) this.size = next;\n  }\n\n  /**\n   * The size actually in force. The consumer's `size` is left as they set it,\n   * so narrowing the bounds and widening them again restores what they asked\n   * for rather than what it was clamped to.\n   */\n  private get resolved(): number {\n    return clampSplitSize(Number(this.size), { min: this.min, max: this.max });\n  }\n\n  private get bounds() {\n    return { min: this.min, max: this.max };\n  }\n\n  /**\n   * A pointer release anywhere ends the drag.\n   *\n   * On the host rather than the handle, and `pointercancel` as well as\n   * `pointerup`: a drag interrupted by the browser — a touch turning into a\n   * scroll gesture, a window losing focus mid-drag — fires only `pointercancel`,\n   * and without it the splitter stays in a dragging state and follows the\n   * pointer around with no button held.\n   */\n  @Listen('pointerup')\n  @Listen('pointercancel')\n  handlePointerEnd(event: PointerEvent) {\n    if (!this.dragging) return;\n    this.dragging = false;\n    const handle = this.handle;\n    if (handle?.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);\n  }\n\n  private get handle(): HTMLElement | null {\n    return this.el.shadowRoot?.querySelector('.handle') ?? null;\n  }\n\n  private onPointerDown = (event: PointerEvent) => {\n    event.preventDefault();\n    this.dragging = true;\n    const handle = event.currentTarget as HTMLElement;\n    handle.setPointerCapture(event.pointerId);\n    // The separator is the control, so a drag has to focus it.\n    handle.focus();\n  };\n\n  private onPointerMove = (event: PointerEvent) => {\n    if (!this.dragging) return;\n\n    const rect = this.el.getBoundingClientRect();\n    /*\n     * `null` when the host has no length, which is not hypothetical: a\n     * splitter inside a collapsed box measures zero and dividing by it gives\n     * Infinity. The size it already had stands.\n     */\n    const next =\n      this.orientation === 'horizontal'\n        ? splitSizeFromPointer(event.clientX, rect.left, rect.width, this.bounds)\n        : splitSizeFromPointer(event.clientY, rect.top, rect.height, this.bounds);\n\n    if (next !== null) this.commit(next);\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    const next = resolveSplitterKey(event.key, {\n      orientation: this.orientation,\n      size: this.resolved,\n      min: this.min,\n      max: this.max,\n      step: Number(this.step),\n    });\n\n    // Nothing is prevented for a key the splitter does not handle, so Up and\n    // Down still scroll a page with a horizontal splitter focused.\n    if (next === null) return;\n    event.preventDefault();\n    this.commit(next);\n  };\n\n  private commit(next: number) {\n    if (next === this.resolved) return;\n    this.size = next;\n    this.pfChange.emit({ size: next });\n  }\n\n  render() {\n    const size = this.resolved;\n    const horizontal = this.orientation === 'horizontal';\n\n    return (\n      <Host>\n        <div class=\"panel start\" part=\"start\" style={{ flexBasis: `${size}%` }}>\n          <slot name=\"start\" />\n        </div>\n\n        <div\n          class=\"handle\"\n          part=\"handle\"\n          role=\"separator\"\n          tabindex=\"0\"\n          aria-label={this.handleLabel}\n          aria-orientation={horizontal ? 'vertical' : 'horizontal'}\n          aria-valuenow={String(size)}\n          aria-valuemin={String(this.min)}\n          aria-valuemax={String(this.max)}\n          onPointerDown={this.onPointerDown}\n          onPointerMove={this.onPointerMove}\n          onKeyDown={this.onKeyDown}\n        >\n          <span class=\"grip\" part=\"grip\" aria-hidden=\"true\"></span>\n        </div>\n\n        <div class=\"panel end\" part=\"end\">\n          <slot name=\"end\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-rich-text-editor.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfRichTextEditor extends Components.PfRichTextEditor, HTMLElement {}
+export const PfRichTextEditor: {
+    prototype: PfRichTextEditor;
+    new (): PfRichTextEditor;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-rich-text-editor.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as r,c as i,h as a,a as o}from"./index.js";import{c as s}from"./p-DfpCerXM.js";import{r as n}from"./p-CAz7-p8y.js";import{s as d,g as l,r as c}from"./p-Fiuz9ck7.js";import{a as h}from"./p-Cr6IXrUk.js";var f=[{command:"bold",label:"Bold",text:"B"},{command:"italic",label:"Italic",text:"I"},{command:"underline",label:"Underline",text:"U"},{command:"insertUnorderedList",label:"Bulleted list",text:"• List",separatorBefore:true},{command:"insertOrderedList",label:"Numbered list",text:"1. List"},{command:"removeFormat",label:"Clear formatting",text:"Clear"}];function p(t){if(!t)return"";const e=t.trim();if(!e.startsWith("<p>")||!e.endsWith("</p>"))return t;if(e.indexOf("</p>")!==e.length-4)return t;return e.slice(3,-4)}const u=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color: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-field-description);font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-field-error);font-size:var(--font-size-sm);margin:0}.box{background:var(--pf-rte-bg);border:1px solid var(--pf-rte-border);border-radius:var(--radius-md);overflow:hidden}.box:focus-within{border-color:var(--pf-rte-focus-border);box-shadow:var(--pf-rte-focus-ring, var(--pf-focus-ring))}.box--invalid{border-color:var(--pf-rte-invalid-border)}.box--disabled{opacity:var(--pf-rte-disabled-opacity, 0.75)}.toolbar{align-items:center;background:var(--pf-rte-bg-subtle);border-bottom:1px solid var(--pf-rte-border);display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2)}.tool{background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-rte-text);cursor:pointer;font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);min-height:28px;padding:0 var(--space-2)}.tool:hover:not(:disabled){background:var(--pf-rte-bg);border-color:var(--pf-rte-border)}.tool:focus-visible{box-shadow:var(--pf-rte-focus-ring, var(--pf-focus-ring));outline:none}.tool:disabled{cursor:not-allowed;opacity:var(--pf-rte-disabled-opacity, 0.55)}.divider{background:var(--pf-rte-border);height:18px;margin:0 var(--space-1);width:1px}.editor{color:var(--pf-rte-text);font:inherit;line-height:1.5;min-height:var(--pf-rte-min-height, 140px);outline:none;overflow-wrap:anywhere;padding:var(--space-3)}.editor p{margin:0 0 0.75em}.editor p:last-child{margin-bottom:0}.editor:empty::before{color:var(--pf-rte-text-muted);content:attr(data-placeholder);pointer-events:none}.count{color:var(--pf-rte-text-muted);font-size:var(--font-size-sm);margin:0;text-align:end}`;const b=e(class t extends r{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}internals;get el(){return this}name;value="";label;description;error;placeholder="Start typing...";minHeight=140;characterMax;required=false;disabled=false;pfChange;characterCount=0;initialValue="";lastWithinLimit="";editor;toolbar;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}componentDidLoad(){this.writeValueIntoEditor();if(this.toolbar)d(l(this.toolbar))}handleValueChange(){this.writeValueIntoEditor();this.syncFormState()}syncFormState(){const t=this.editor?.textContent??"";this.internals.setFormValue(this.value??"");h(this.internals,t.trim().length>0,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}async format(t){this.runCommand(t)}formResetCallback(){this.value=this.initialValue;this.writeValueIntoEditor()}writeValueIntoEditor(){const t=p(this.value??"");if(this.editor&&this.editor.innerHTML!==t)this.editor.innerHTML=t;this.lastWithinLimit=t;this.characterCount=this.editor?.textContent?.length??0}onInput=()=>{if(!this.editor)return;const t=this.editor.textContent?.length??0;if(typeof this.characterMax==="number"&&t>this.characterMax){this.editor.innerHTML=this.lastWithinLimit;this.characterCount=this.editor.textContent?.length??0;return}this.lastWithinLimit=this.editor.innerHTML;this.characterCount=t;this.value=this.editor.innerHTML;this.syncFormState();this.pfChange.emit({value:this.value})};runCommand(t){if(!this.editor||this.disabled)return;this.editor.focus();document.execCommand?.(t);this.onInput()}onToolbarKeyDown=t=>{if(t.defaultPrevented||!this.toolbar)return;const e=c(t.key,"horizontal");if(!e)return;const r=l(this.toolbar);const i=r.indexOf(this.el.shadowRoot?.activeElement);if(i===-1)return;const a=n(e,r.map(((t,e)=>e)),i);if(a>=0){t.preventDefault();r[a].focus()}};onToolbarFocusIn=t=>{if(this.toolbar)d(l(this.toolbar),t.target)};render(){const t=typeof this.characterMax==="number";const e=s(this.description&&"description",this.error&&"error",t&&"count");return a(o,{key:"1e777ccc50af79784ab6348ff378ebc505919fb2"},a("div",{key:"432f2eaa3288f993ec43423cccc29461713d0231",class:"field",part:"field"},this.label&&a("label",{key:"04fea69f6c553e6f0a9008696ec9a65b5741ba42",class:"label",part:"label",id:"label",htmlFor:"editor"},this.label,this.required&&a("span",{key:"104964261dc140c4aa59b3831ed40bdcd298b714",class:"required","aria-hidden":"true"},"*")),a("div",{key:"221e3f47b1bec4663155ad201bef63e1533eeb85",class:{box:true,"box--invalid":Boolean(this.error),"box--disabled":this.disabled}},a("div",{key:"20e03010935746f7491ec091395c698520d65f1b",class:"toolbar",part:"toolbar",role:"toolbar","aria-label":"Formatting options","aria-orientation":"horizontal",ref:t=>this.toolbar=t,onKeyDown:this.onToolbarKeyDown,onFocusin:this.onToolbarFocusIn},f.map((t=>[t.separatorBefore?a("span",{class:"divider","aria-hidden":"true"}):null,a("button",{type:"button",class:"tool",part:"tool","data-command":t.command,"aria-label":t.label,disabled:this.disabled,onMouseDown:t=>t.preventDefault(),onClick:()=>this.runCommand(t.command)},t.text)]))),a("div",{key:"ee4fa67a3c45efe5fb9d4e9f77d1a639fcee5c1a",id:"editor",class:"editor",part:"editor",role:"textbox","aria-multiline":"true","aria-labelledby":this.label?"label":null,"aria-required":this.required?"true":null,"aria-invalid":this.error?"true":null,"aria-describedby":e,"aria-disabled":this.disabled?"true":null,contentEditable:!this.disabled,"data-placeholder":this.placeholder,style:{"--pf-rte-min-height":`${this.minHeight}px`},ref:t=>this.editor=t,onInput:this.onInput})),this.description&&a("p",{key:"e55178dd64e111d6940a9a2de5541a1adfefef8d",class:"description",part:"description",id:"description"},this.description),this.error&&a("p",{key:"118e10b3463e82ef5af5f0a51df45693b864b695",class:"error",part:"error",id:"error"},this.error),t&&a("p",{key:"c8163c0bb3c46c1ea8c6b0def9179fbd93dffa56",class:"count",part:"count",id:"count","aria-live":"polite"},this.characterCount,"/",this.characterMax)))}static get formAssociated(){return true}static get watchers(){return{value:[{handleValueChange:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}static get style(){return u()}},[577,"pf-rich-text-editor",{name:[513],value:[1025],label:[1],description:[1],error:[1],placeholder:[1],minHeight:[2,"min-height"],characterMax:[2,"character-max"],required:[516],disabled:[516],characterCount:[32],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],format:[64]},undefined,{value:[{handleValueChange:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["pf-rich-text-editor"];e.forEach((e=>{switch(e){case"pf-rich-text-editor":if(!customElements.get(t(e))){customElements.define(t(e),b)}break}}))}m();const v=b;const g=m;export{v as PfRichTextEditor,g as defineCustomElement};
+//# sourceMappingURL=pf-rich-text-editor.js.map

package/dist/components/pf-rich-text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RICH_TEXT_COMMANDS","command","label","text","separatorBefore","stripOuterParagraph","html","trimmed","trim","startsWith","endsWith","indexOf","length","slice","pfRichTextEditorCss","PfRichTextEditor","__stencil_proxyCustomElement","HTMLElement","internals","name","value","description","error","placeholder","minHeight","characterMax","required","disabled","pfChange","characterCount","initialValue","lastWithinLimit","editor","toolbar","componentWillLoad","this","syncFormState","componentDidLoad","writeValueIntoEditor","syncRovingTabIndex","getRovingItems","handleValueChange","textContent","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","format","runCommand","formResetCallback","next","innerHTML","onInput","emit","focus","document","execCommand","onToolbarKeyDown","event","defaultPrevented","action","resolveRovingKey","key","items","current","el","shadowRoot","activeElement","resolveListMove","map","_","index","preventDefault","onToolbarFocusIn","target","render","hasCount","describedBy","composeDescribedBy","h","Host","class","part","id","htmlFor","box","Boolean","role","ref","node","onKeyDown","onFocusin","tool","type","onMouseDown","onClick","contentEditable","style"],"sources":["../core/dist/rich-text.js","src/components/pf-rich-text-editor/pf-rich-text-editor.css?tag=pf-rich-text-editor&encapsulation=shadow","src/components/pf-rich-text-editor/pf-rich-text-editor.tsx"],"sourcesContent":["//#region src/rich-text.ts\n/**\n* The toolbar, as data.\n*\n* Shared so the two layers cannot offer different buttons, or the same\n* buttons under different names — a design system whose editor is `B I U` in\n* one framework and `B I U S` in another is two editors.\n*/\nvar RICH_TEXT_COMMANDS = [\n\t{\n\t\tcommand: \"bold\",\n\t\tlabel: \"Bold\",\n\t\ttext: \"B\"\n\t},\n\t{\n\t\tcommand: \"italic\",\n\t\tlabel: \"Italic\",\n\t\ttext: \"I\"\n\t},\n\t{\n\t\tcommand: \"underline\",\n\t\tlabel: \"Underline\",\n\t\ttext: \"U\"\n\t},\n\t{\n\t\tcommand: \"insertUnorderedList\",\n\t\tlabel: \"Bulleted list\",\n\t\ttext: \"• List\",\n\t\tseparatorBefore: true\n\t},\n\t{\n\t\tcommand: \"insertOrderedList\",\n\t\tlabel: \"Numbered list\",\n\t\ttext: \"1. List\"\n\t},\n\t{\n\t\tcommand: \"removeFormat\",\n\t\tlabel: \"Clear formatting\",\n\t\ttext: \"Clear\"\n\t}\n];\n/**\n* Drops a single wrapping `<p>` from a value, leaving everything else alone.\n*\n* A contenteditable browsers have been left to themselves wraps a first line\n* in `<p>` in some engines and not others, so a value round-tripped through\n* one and set into another gains a level of nesting each time. Stripping one\n* outer paragraph is what keeps `value` stable.\n*\n* The check that matters is that the first `</p>` **is** the last one. The\n* React `RichTextEditor` tested `startsWith('<p>')`, `endsWith('</p>')`,\n* `indexOf('<p>') === 0` and `lastIndexOf('</p>') === length - 4`, every one\n* of which is true of `<p>a</p><p>b</p>` — two paragraphs, which it then cut\n* into the broken fragment `a</p><p>b`. Measured against that exact input.\n*/\nfunction stripOuterParagraph(html) {\n\tif (!html) return \"\";\n\tconst trimmed = html.trim();\n\tif (!trimmed.startsWith(\"<p>\") || !trimmed.endsWith(\"</p>\")) return html;\n\tif (trimmed.indexOf(\"</p>\") !== trimmed.length - 4) return html;\n\treturn trimmed.slice(3, -4);\n}\n//#endregion\nexport { RICH_TEXT_COMMANDS, stripOuterParagraph };\n",":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-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-field-description);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-field-error);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.box {\n  background: var(--pf-rte-bg);\n  border: 1px solid var(--pf-rte-border);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n}\n\n.box:focus-within {\n  border-color: var(--pf-rte-focus-border);\n  box-shadow: var(--pf-rte-focus-ring, var(--pf-focus-ring));\n}\n\n.box--invalid {\n  border-color: var(--pf-rte-invalid-border);\n}\n\n.box--disabled {\n  opacity: var(--pf-rte-disabled-opacity, 0.75);\n}\n\n.toolbar {\n  align-items: center;\n  background: var(--pf-rte-bg-subtle);\n  border-bottom: 1px solid var(--pf-rte-border);\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  padding: var(--space-2);\n}\n\n.tool {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--radius-sm);\n  color: var(--pf-rte-text);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  min-height: 28px;\n  padding: 0 var(--space-2);\n}\n\n.tool:hover:not(:disabled) {\n  background: var(--pf-rte-bg);\n  border-color: var(--pf-rte-border);\n}\n\n.tool:focus-visible {\n  box-shadow: var(--pf-rte-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.tool:disabled {\n  cursor: not-allowed;\n  opacity: var(--pf-rte-disabled-opacity, 0.55);\n}\n\n.divider {\n  background: var(--pf-rte-border);\n  height: 18px;\n  margin: 0 var(--space-1);\n  width: 1px;\n}\n\n.editor {\n  color: var(--pf-rte-text);\n  font: inherit;\n  line-height: 1.5;\n  min-height: var(--pf-rte-min-height, 140px);\n  outline: none;\n  overflow-wrap: anywhere;\n  padding: var(--space-3);\n}\n\n/*\n * The browser's own paragraphs, which `execCommand` and Enter both produce.\n * There is no `::slotted` involved: this content is in the shadow root,\n * written there imperatively, so a plain descendant selector reaches it.\n */\n.editor p {\n  margin: 0 0 0.75em;\n}\n\n.editor p:last-child {\n  margin-bottom: 0;\n}\n\n.editor:empty::before {\n  color: var(--pf-rte-text-muted);\n  content: attr(data-placeholder);\n  pointer-events: none;\n}\n\n.count {\n  color: var(--pf-rte-text-muted);\n  font-size: var(--font-size-sm);\n  margin: 0;\n  text-align: end;\n}\n","import {\n  RICH_TEXT_COMMANDS,\n  composeDescribedBy,\n  getRovingItems,\n  resolveListMove,\n  resolveRovingKey,\n  stripOuterParagraph,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated rich-text field over a `contenteditable`.\n *\n * The toolbar is core's list, so this and the React `RichTextEditor` cannot\n * offer different buttons, and the value is normalised with core's\n * `stripOuterParagraph`, so they cannot disagree about what a round trip\n * looks like.\n *\n * Two things differ from the React component, both deliberate:\n *\n * - **The toolbar is one tab stop**, with the arrows moving inside it, which\n *   is the ARIA toolbar pattern and what `pf-toolbar` already does. The React\n *   version is six tab stops inside a `role=\"toolbar\"`, so tabbing past the\n *   field walks every button; `todo.md` has that.\n * - **It is a real form control.** `formAssociated` with `ElementInternals` is\n *   what puts the value in `FormData`; a `contenteditable` is not a form\n *   control in any framework, and the React component's value reaches a form\n *   only if the consumer wires it there themselves.\n *\n * `document.execCommand` is deprecated and is still the only way to apply\n * formatting inside a `contenteditable` without a dependency, which is the\n * same trade the React component makes.\n *\n * @part field - the wrapper around label, toolbar, editor and messages.\n * @part label - the label element.\n * @part toolbar - the formatting toolbar.\n * @part tool - one toolbar button.\n * @part editor - the editable area.\n * @part count - the character counter.\n * @part description - the hint text.\n * @part error - the error message.\n */\n@Component({\n  tag: 'pf-rich-text-editor',\n  styleUrl: 'pf-rich-text-editor.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfRichTextEditor {\n  @AttachInternals() internals!: ElementInternals;\n\n  @Element() el!: HTMLElement;\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 rather than from this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The field's value, as HTML. */\n  @Prop({ mutable: true }) value = '';\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  /** Error message from the consumer. Its presence marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Start typing...';\n\n  /** The editable area's smallest height, in pixels. */\n  @Prop() minHeight = 140;\n\n  /** The most characters of text the field will hold. */\n  @Prop() characterMax?: number;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the value changes, however it changed. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The text length, which the counter shows. */\n  @State() characterCount = 0;\n\n  /** The value a reset restores, captured before `value` can be replaced. */\n  private initialValue = '';\n\n  /** The last value inside the character limit, which an overrun reverts to. */\n  private lastWithinLimit = '';\n\n  private editor?: HTMLElement;\n\n  private toolbar?: HTMLElement;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  componentDidLoad() {\n    this.writeValueIntoEditor();\n    if (this.toolbar) syncRovingTabIndex(getRovingItems(this.toolbar));\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.writeValueIntoEditor();\n    this.syncFormState();\n  }\n\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const text = this.editor?.textContent ?? '';\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, text.trim().length > 0, this.required, this.error);\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  /** Applies one of the toolbar's commands, as pressing its button does. */\n  @Method()\n  async format(command: string) {\n    this.runCommand(command);\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * the rule a native `<input value=\"initial\">` follows.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.writeValueIntoEditor();\n  }\n\n  /**\n   * The editable area's content is written imperatively, never rendered.\n   *\n   * A `contenteditable` that a vdom also owns is a fight: the person types,\n   * the DOM changes under the renderer, and the next render puts the old\n   * content back with the caret at the start. So the element renders an empty\n   * box once and sets `innerHTML` only when the value it holds and the value\n   * in the box actually differ.\n   */\n  private writeValueIntoEditor() {\n    const next = stripOuterParagraph(this.value ?? '');\n    if (this.editor && this.editor.innerHTML !== next) this.editor.innerHTML = next;\n\n    this.lastWithinLimit = next;\n    this.characterCount = this.editor?.textContent?.length ?? 0;\n  }\n\n  private onInput = () => {\n    if (!this.editor) return;\n\n    const length = this.editor.textContent?.length ?? 0;\n\n    /*\n     * Over the limit: put the last good value back rather than let the\n     * content grow. The caret lands at the start of the box, which is the\n     * cost of this approach and the reason a limit should be generous.\n     */\n    if (typeof this.characterMax === 'number' && length > this.characterMax) {\n      this.editor.innerHTML = this.lastWithinLimit;\n      this.characterCount = this.editor.textContent?.length ?? 0;\n      return;\n    }\n\n    this.lastWithinLimit = this.editor.innerHTML;\n    this.characterCount = length;\n    this.value = this.editor.innerHTML;\n    this.syncFormState();\n    this.pfChange.emit({ value: this.value });\n  };\n\n  private runCommand(command: string) {\n    if (!this.editor || this.disabled) return;\n\n    this.editor.focus();\n    /*\n     * Deprecated, and still the only way to format inside a\n     * `contenteditable` without a dependency. It is also the one DOM call\n     * here that a test project cannot make: Stencil's mock DOM has no\n     * `execCommand` at all, so the toolbar is browser-tested.\n     */\n    document.execCommand?.(command);\n    this.onInput();\n  }\n\n  /** The toolbar is one tab stop, with the arrows moving inside it. */\n  private onToolbarKeyDown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || !this.toolbar) return;\n\n    const action = resolveRovingKey(event.key, 'horizontal');\n    if (!action) return;\n\n    const items = getRovingItems(this.toolbar);\n    const current = items.indexOf(this.el.shadowRoot?.activeElement as HTMLElement);\n    if (current === -1) return;\n\n    const next = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      current,\n    );\n    if (next >= 0) {\n      event.preventDefault();\n      items[next].focus();\n    }\n  };\n\n  private onToolbarFocusIn = (event: FocusEvent) => {\n    if (this.toolbar) syncRovingTabIndex(getRovingItems(this.toolbar), event.target as HTMLElement);\n  };\n\n  render() {\n    const hasCount = typeof this.characterMax === 'number';\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n      hasCount && 'count',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" id=\"label\" htmlFor=\"editor\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div\n            class={{\n              box: true,\n              'box--invalid': Boolean(this.error),\n              'box--disabled': this.disabled,\n            }}\n          >\n            <div\n              class=\"toolbar\"\n              part=\"toolbar\"\n              role=\"toolbar\"\n              aria-label=\"Formatting options\"\n              aria-orientation=\"horizontal\"\n              ref={(node) => (this.toolbar = node)}\n              onKeyDown={this.onToolbarKeyDown}\n              onFocusin={this.onToolbarFocusIn}\n            >\n              {RICH_TEXT_COMMANDS.map((tool) => [\n                tool.separatorBefore ? <span class=\"divider\" aria-hidden=\"true\"></span> : null,\n                <button\n                  type=\"button\"\n                  class=\"tool\"\n                  part=\"tool\"\n                  data-command={tool.command}\n                  aria-label={tool.label}\n                  disabled={this.disabled}\n                  // A press must not take the caret out of the editor, or the\n                  // command has no selection to apply to.\n                  onMouseDown={(event: MouseEvent) => event.preventDefault()}\n                  onClick={() => this.runCommand(tool.command)}\n                >\n                  {tool.text}\n                </button>,\n              ])}\n            </div>\n\n            {/*\n              Rendered empty, once. Its content is set imperatively, because a\n              vdom that also owned it would put the old content back under the\n              person's caret on the next render.\n            */}\n            <div\n              id=\"editor\"\n              class=\"editor\"\n              part=\"editor\"\n              role=\"textbox\"\n              aria-multiline=\"true\"\n              aria-labelledby={this.label ? 'label' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              aria-disabled={this.disabled ? 'true' : null}\n              contentEditable={!this.disabled}\n              data-placeholder={this.placeholder}\n              style={{ '--pf-rte-min-height': `${this.minHeight}px` }}\n              ref={(node) => (this.editor = node)}\n              onInput={this.onInput}\n            ></div>\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n\n          {hasCount && (\n            <p class=\"count\" part=\"count\" id=\"count\" aria-live=\"polite\">\n              {this.characterCount}/{this.characterMax}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-scroll-area.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PfScrollArea extends Components.PfScrollArea, HTMLElement {}
+export const PfScrollArea: {
+    prototype: PfScrollArea;
+    new (): PfScrollArea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pf-scroll-area.js

@@ -0,0 +1,2 @@
+import{t as r,p as o,H as t,h as e,a}from"./index.js";const s=()=>`:host{display:block;scrollbar-color:var(--pf-scrollarea-thumb) transparent;scrollbar-width:thin;scrollbar-gutter:stable}:host([hidden]){display:none}:host(:focus-visible){border-radius:var(--radius-sm);box-shadow:var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));outline:none}:host([orientation='vertical']){overflow-x:hidden;overflow-y:auto}:host([orientation='horizontal']){overflow-x:auto;overflow-y:hidden}:host([orientation='both']){overflow:auto}:host::-webkit-scrollbar{height:10px;width:10px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:var(--pf-scrollarea-thumb);background-clip:padding-box;border:2px solid transparent;border-radius:var(--radius-full)}:host::-webkit-scrollbar-thumb:hover{background:var(--pf-scrollarea-thumb-hover);background-clip:padding-box}:host::-webkit-scrollbar-corner{background:transparent}`;const n=o(class r extends t{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}orientation="vertical";focusable=true;componentWillLoad(){if(this.focusable&&!this.el.hasAttribute("tabindex")){this.el.setAttribute("tabindex","0")}}render(){return e(a,{key:"1981de11e7e17cb513ca642b180062c3767fbf41"},e("slot",{key:"1260c995e6571cc826038be07fffc584343675c7"}))}static get style(){return s()}},[769,"pf-scroll-area",{orientation:[513],focusable:[4]}]);function l(){if(typeof customElements==="undefined"){return}const o=["pf-scroll-area"];o.forEach((o=>{switch(o){case"pf-scroll-area":if(!customElements.get(r(o))){customElements.define(r(o),n)}break}}))}l();const i=n;const c=l;export{i as PfScrollArea,c as defineCustomElement};
+//# sourceMappingURL=pf-scroll-area.js.map