@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/components/pf-input.d.ts

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

package/dist/components/pf-input.js

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

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

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

package/dist/components/pf-kbd.d.ts

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

package/dist/components/pf-kbd.js

@@ -0,0 +1,2 @@
+import{P as t,d as o}from"./p-C4aE66tt.js";const s=t;const a=o;export{s as PfKbd,a as defineCustomElement};
+//# sourceMappingURL=pf-kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,h as a,a as n}from"./index.js";import{c as i,n as r,C as l,p as o,a as c,d,f as h,g as p,s as f,h as u,i as y,e as g}from"./p-CmX-kVk-.js";const m=()=>`:host{display:flex;flex-direction:column;gap:var(--space-3);width:100%}:host([hidden]){display:none}.svg{display:block;height:auto;overflow:visible;width:100%}.empty{align-items:center;color:var(--pf-chart-text-muted);display:flex;font-size:var(--font-size-sm);height:120px;justify-content:center}.grid{stroke:var(--pf-chart-grid);stroke-width:1}.tick{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs)}.tick--y{dominant-baseline:middle;text-anchor:end}.tick--x{dominant-baseline:hanging;text-anchor:middle}.axis-label{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs);text-anchor:middle}.dot{opacity:0;transition:opacity 80ms ease}.svg:hover .dot{opacity:1}.legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;margin:0;padding:0;padding-inline-start:var(--pf-chart-plot-inset-left, 0)}.legend.legend--hidden{display:none}.legend slot{display:contents}@media (prefers-reduced-motion: reduce){.dot{transition:none}}`;const x=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}data=[];area=false;curved=true;showLegend=true;yAxisLabel;label;series=[];componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}async refresh(){this.sync()}get seriesElements(){return Array.from(this.el.children).filter((t=>t.tagName.toLowerCase()==="pf-chart-series"))}get rows(){const t=this.data;if(Array.isArray(t))return t;try{const e=JSON.parse(String(t||"[]"));return Array.isArray(e)?e:[]}catch{return[]}}sync(){const t=this.seriesElements;this.series=t.map(((t,e)=>{const s=t;const a=i(e,s.color??t.getAttribute("color")??undefined);t.swatch=a;return{key:s.seriesKey??t.getAttribute("series-key")??"",color:a,dashed:s.dashed??t.hasAttribute("dashed")}}))}render(){const t=this.rows;const e=this.series;if(t.length===0||e.length===0){return a(n,null,a("div",{class:"empty",part:"empty"},a("slot",{name:"empty"},"No data")),a("ul",{class:"legend legend--hidden",part:"legend"},a("slot",{onSlotchange:()=>this.refresh()})))}const s=(t,e)=>Number(t[e]??0);const i=Math.max(0,...e.flatMap((e=>t.map((t=>s(t,e.key))))));const m=r(i);const x=m[m.length-1];const k=g(t.length);const v=c.top+d.height;return a(n,{style:{"--pf-chart-plot-inset-left":`${c.left/l.width*100}%`}},a("svg",{class:"svg",part:"svg",viewBox:`0 0 ${l.width} ${l.height}`,role:"img","aria-label":this.label??this.yAxisLabel??"Line chart"},m.map((t=>{const e=o(t,x);return a("g",null,a("line",{class:"grid",part:"grid",x1:c.left,y1:e,x2:c.left+d.width,y2:e}),a("text",{class:"tick tick--y",part:"tick",x:c.left-8,y:e},h(t)))})),t.map(((e,s)=>s%k===0?a("text",{class:"tick tick--x",part:"tick",x:p(s,t.length),y:v+20},e.label):null)),this.yAxisLabel&&a("text",{class:"axis-label",x:-112,y:14,transform:"rotate(-90)"},this.yAxisLabel),e.map((e=>{const n=t.map(((a,n)=>({x:p(n,t.length),y:o(s(a,e.key),x)})));const i=this.curved?f(n):u(n);return a("g",null,this.area&&a("path",{class:"area",part:"area",d:y(i,n),fill:e.color,"fill-opacity":"0.12",stroke:"none"}),a("path",{class:"line",part:"line",d:i,fill:"none",stroke:e.color,"stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","stroke-dasharray":e.dashed?"6 4":undefined}),n.map(((n,i)=>a("circle",{class:"dot",part:"dot",cx:n.x,cy:n.y,r:"3.5",fill:e.color},a("title",null,`${t[i].label}: ${h(s(t[i],e.key))}`)))))}))),a("ul",{class:{legend:true,"legend--hidden":!this.showLegend||e.length<2},part:"legend"},a("slot",{onSlotchange:()=>this.refresh()})))}static get watchers(){return{data:[{sync:0}]}}static get style(){return m()}},[769,"pf-line-chart",{data:[1],area:[516],curved:[516],showLegend:[516,"show-legend"],yAxisLabel:[1,"y-axis-label"],label:[1],series:[32],refresh:[64]},undefined,{data:[{sync:0}]}]);function k(){if(typeof customElements==="undefined"){return}const e=["pf-line-chart"];e.forEach((e=>{switch(e){case"pf-line-chart":if(!customElements.get(t(e))){customElements.define(t(e),x)}break}}))}k();const v=x;const b=k;export{v as PfLineChart,b as defineCustomElement};
+//# sourceMappingURL=pf-line-chart.js.map

package/dist/components/pf-line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfLineChartCss","PfLineChart","__stencil_proxyCustomElement","HTMLElement","data","area","curved","showLegend","yAxisLabel","label","series","componentWillLoad","this","sync","componentDidLoad","refresh","seriesElements","Array","from","el","children","filter","child","tagName","toLowerCase","rows","raw","isArray","parsed","JSON","parse","String","elements","map","element","index","node","color","chartSeriesColor","getAttribute","undefined","swatch","key","seriesKey","dashed","hasAttribute","render","length","h","Host","class","part","name","onSlotchange","valueAt","row","Number","highest","Math","max","flatMap","item","ticks","niceAxisTicks","maxTick","labelStep","axisLabelStep","floor","CHART_PADDING","top","CHART_PLOT","height","style","left","CHART_VIEW","width","viewBox","role","tick","y","plotY","x1","y1","x2","y2","x","formatAxisTick","plotX","transform","points","line","smoothSeriesPath","straightSeriesPath","d","areaSeriesPath","fill","stroke","point","cx","cy","r","legend"],"sources":["src/components/pf-line-chart/pf-line-chart.css?tag=pf-line-chart&encapsulation=shadow","src/components/pf-line-chart/pf-line-chart.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  display: block;\n  height: auto;\n  /* The y-axis label is drawn outside the plot, so the box must not clip. */\n  overflow: visible;\n  width: 100%;\n}\n\n.empty {\n  align-items: center;\n  color: var(--pf-chart-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  height: 120px;\n  justify-content: center;\n}\n\n.grid {\n  stroke: var(--pf-chart-grid);\n  stroke-width: 1;\n}\n\n.tick {\n  fill: var(--pf-chart-text-muted);\n  font-family: inherit;\n  font-size: var(--font-size-2xs);\n}\n\n.tick--y {\n  dominant-baseline: middle;\n  text-anchor: end;\n}\n\n.tick--x {\n  dominant-baseline: hanging;\n  text-anchor: middle;\n}\n\n.axis-label {\n  fill: var(--pf-chart-text-muted);\n  font-family: inherit;\n  font-size: var(--font-size-2xs);\n  text-anchor: middle;\n}\n\n/* The dots appear on hover, so the line reads cleanly at rest. */\n.dot {\n  opacity: 0;\n  transition: opacity 80ms ease;\n}\n\n.svg:hover .dot {\n  opacity: 1;\n}\n\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  list-style: none;\n  margin: 0;\n  /*\n   * Lines the legend's start edge up with the plot area: the SVG is inset by\n   * the y-axis gutter, and the inset is set inline from the chart's geometry.\n   */\n  padding: 0;\n  padding-inline-start: var(--pf-chart-plot-inset-left, 0);\n}\n\n/*\n * Hidden rather than dropped, so the series stay slotted and `slotchange`\n * still fires. Two classes deep, because the tie breaks on source order.\n */\n.legend.legend--hidden {\n  display: none;\n}\n\n/* The series are flex children of the list, not of a box inside it. */\n.legend slot {\n  display: contents;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dot {\n    transition: none;\n  }\n}\n","import {\n  CHART_PADDING,\n  CHART_PLOT,\n  CHART_VIEW,\n  areaSeriesPath,\n  axisLabelStep,\n  chartSeriesColor,\n  formatAxisTick,\n  niceAxisTicks,\n  plotX,\n  plotY,\n  smoothSeriesPath,\n  straightSeriesPath,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n/** One row of a chart's data: a label and a number per series. */\nexport type PfChartRow = { label: string } & Record<string, string | number>;\n\n/**\n * A line or area chart over `pf-chart-series` children.\n *\n * The split follows what the data is: the rows are bulk numbers and live in a\n * property, while the series are the part with names and colours and live in\n * the light DOM, where a consumer can loop over them and where the legend can\n * reach their labels.\n *\n * Every scale and path is core's, so this and the React `LineChart` draw the\n * same chart — the axis labels and the geometry have to come from the same\n * tick scale, or the gridlines say one thing and the line says another.\n *\n * @slot - the `pf-chart-series` children.\n * @slot empty - what to show when there is nothing to draw.\n * @part svg - the drawing.\n * @part grid - one gridline.\n * @part tick - one axis label.\n * @part line - one series' line.\n * @part area - one series' fill, on the area variant.\n * @part dot - one data point.\n * @part legend - the list the series are slotted into.\n * @part empty - the empty state's box.\n */\n@Component({\n  tag: 'pf-line-chart',\n  styleUrl: 'pf-line-chart.css',\n  shadow: true,\n})\nexport class PfLineChart {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The rows to plot.\n   *\n   * An array for a framework consumer, or JSON for plain HTML, because\n   * Stencil coerces an attribute only for the primitive types it recognises.\n   */\n  @Prop() data: PfChartRow[] | string = [];\n\n  /** Fill under each line. Reflected. */\n  @Prop({ reflect: true }) area = false;\n\n  /** Curve the lines through their points rather than joining them straight. */\n  @Prop({ reflect: true }) curved = true;\n\n  @Prop({ reflect: true }) showLegend = true;\n\n  /** Printed down the y axis, and used as the chart's name when it has none. */\n  @Prop() yAxisLabel?: string;\n\n  /** The chart's accessible name. */\n  @Prop() label?: string;\n\n  /** The series, read from the light DOM. */\n  @State() series: { key: string; color: string; dashed: boolean }[] = [];\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  /** Re-reads the series, for a consumer who changed one through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /**\n   * Direct children only: a nested chart owns its own series.\n   *\n   * Named `seriesElements`, not `children`: a component class's members land\n   * on the custom element itself, so a getter called `children` shadows\n   * `Element.children` and anything that walks it recurses for ever.\n   */\n  private get seriesElements(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pf-chart-series',\n    ) as HTMLElement[];\n  }\n\n  private get rows(): PfChartRow[] {\n    const raw = this.data;\n    if (Array.isArray(raw)) return raw;\n\n    try {\n      const parsed = JSON.parse(String(raw || '[]'));\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      // A malformed attribute is an empty chart, not a thrown render.\n      return [];\n    }\n  }\n\n  @Watch('data')\n  sync() {\n    const elements = this.seriesElements;\n\n    this.series = elements.map((element, index) => {\n      const node = element as HTMLElement & {\n        seriesKey?: string;\n        color?: string;\n        dashed?: boolean;\n      };\n      const color = chartSeriesColor(\n        index,\n        node.color ?? element.getAttribute('color') ?? undefined,\n      );\n\n      (element as HTMLElement & { swatch: string }).swatch = color;\n\n      return {\n        key: node.seriesKey ?? element.getAttribute('series-key') ?? '',\n        color,\n        dashed: node.dashed ?? element.hasAttribute('dashed'),\n      };\n    });\n  }\n\n  render() {\n    const rows = this.rows;\n    const series = this.series;\n\n    if (rows.length === 0 || series.length === 0) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n          {/* The list stays in the tree, or `slotchange` never fires again. */}\n          <ul class=\"legend legend--hidden\" part=\"legend\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n        </Host>\n      );\n    }\n\n    const valueAt = (row: PfChartRow, key: string) => Number(row[key] ?? 0);\n    const highest = Math.max(\n      0,\n      ...series.flatMap((item) => rows.map((row) => valueAt(row, item.key))),\n    );\n    const ticks = niceAxisTicks(highest);\n    const maxTick = ticks[ticks.length - 1];\n    const labelStep = axisLabelStep(rows.length);\n    const floor = CHART_PADDING.top + CHART_PLOT.height;\n\n    return (\n      <Host\n        style={{\n          // Lets the legend's start edge line up with the plot area.\n          '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,\n        }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`}\n          role=\"img\"\n          aria-label={this.label ?? this.yAxisLabel ?? 'Line chart'}\n        >\n          {ticks.map((tick) => {\n            const y = plotY(tick, maxTick);\n            return (\n              <g>\n                <line\n                  class=\"grid\"\n                  part=\"grid\"\n                  x1={CHART_PADDING.left}\n                  y1={y}\n                  x2={CHART_PADDING.left + CHART_PLOT.width}\n                  y2={y}\n                />\n                <text class=\"tick tick--y\" part=\"tick\" x={CHART_PADDING.left - 8} y={y}>\n                  {formatAxisTick(tick)}\n                </text>\n              </g>\n            );\n          })}\n\n          {rows.map((row, index) =>\n            index % labelStep === 0 ? (\n              <text class=\"tick tick--x\" part=\"tick\" x={plotX(index, rows.length)} y={floor + 20}>\n                {row.label}\n              </text>\n            ) : null,\n          )}\n\n          {this.yAxisLabel && (\n            <text\n              class=\"axis-label\"\n              x={-(CHART_PADDING.top + CHART_PLOT.height / 2)}\n              y={14}\n              transform=\"rotate(-90)\"\n            >\n              {this.yAxisLabel}\n            </text>\n          )}\n\n          {series.map((item) => {\n            const points = rows.map((row, index) => ({\n              x: plotX(index, rows.length),\n              y: plotY(valueAt(row, item.key), maxTick),\n            }));\n            const line = this.curved ? smoothSeriesPath(points) : straightSeriesPath(points);\n\n            return (\n              <g>\n                {this.area && (\n                  <path\n                    class=\"area\"\n                    part=\"area\"\n                    d={areaSeriesPath(line, points)}\n                    fill={item.color}\n                    fill-opacity=\"0.12\"\n                    stroke=\"none\"\n                  />\n                )}\n                <path\n                  class=\"line\"\n                  part=\"line\"\n                  d={line}\n                  fill=\"none\"\n                  stroke={item.color}\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-dasharray={item.dashed ? '6 4' : undefined}\n                />\n                {points.map((point, index) => (\n                  <circle\n                    class=\"dot\"\n                    part=\"dot\"\n                    cx={point.x}\n                    cy={point.y}\n                    r=\"3.5\"\n                    fill={item.color}\n                  >\n                    <title>{`${rows[index].label}: ${formatAxisTick(\n                      valueAt(rows[index], item.key),\n                    )}`}</title>\n                  </circle>\n                ))}\n              </g>\n            );\n          })}\n        </svg>\n\n        <ul\n          class={{ legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }}\n          part=\"legend\"\n        >\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kKAAA,MAAMA,EAAiB,IAAM,u/B,MC+ChBC,EAAWC,EAAA,MAAAD,UAAAE,E,sGASdC,KAA8B,GAGbC,KAAO,MAGPC,OAAS,KAETC,WAAa,KAG9BC,WAGAC,MAGCC,OAA4D,GAGrE,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAKP,aAAME,GACJH,KAAKC,M,CAUP,kBAAYG,GACV,OAAOC,MAAMC,KAAKN,KAAKO,GAAGC,UAAUC,QACjCC,GAAUA,EAAMC,QAAQC,gBAAkB,mB,CAI/C,QAAYC,GACV,MAAMC,EAAMd,KAAKR,KACjB,GAAIa,MAAMU,QAAQD,GAAM,OAAOA,EAE/B,IACE,MAAME,EAASC,KAAKC,MAAMC,OAAOL,GAAO,OACxC,OAAOT,MAAMU,QAAQC,GAAUA,EAAS,E,CACxC,MAEA,MAAO,E,EAKX,IAAAf,GACE,MAAMmB,EAAWpB,KAAKI,eAEtBJ,KAAKF,OAASsB,EAASC,KAAI,CAACC,EAASC,KACnC,MAAMC,EAAOF,EAKb,MAAMG,EAAQC,EACZH,EACAC,EAAKC,OAASH,EAAQK,aAAa,UAAYC,WAGhDN,EAA6CO,OAASJ,EAEvD,MAAO,CACLK,IAAKN,EAAKO,WAAaT,EAAQK,aAAa,eAAiB,GAC7DF,QACAO,OAAQR,EAAKQ,QAAUV,EAAQW,aAAa,UAC7C,G,CAIL,MAAAC,GACE,MAAMrB,EAAOb,KAAKa,KAClB,MAAMf,EAASE,KAAKF,OAEpB,GAAIe,EAAKsB,SAAW,GAAKrC,EAAOqC,SAAW,EAAG,CAC5C,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,QAAQC,KAAK,SACtBH,EAAA,QAAMI,KAAK,SAAO,YAGpBJ,EAAA,MAAIE,MAAM,wBAAwBC,KAAK,UACrCH,EAAA,QAAMK,aAAc,IAAMzC,KAAKG,a,CAMvC,MAAMuC,EAAU,CAACC,EAAiBb,IAAgBc,OAAOD,EAAIb,IAAQ,GACrE,MAAMe,EAAUC,KAAKC,IACnB,KACGjD,EAAOkD,SAASC,GAASpC,EAAKQ,KAAKsB,GAAQD,EAAQC,EAAKM,EAAKnB,UAElE,MAAMoB,EAAQC,EAAcN,GAC5B,MAAMO,EAAUF,EAAMA,EAAMf,OAAS,GACrC,MAAMkB,EAAYC,EAAczC,EAAKsB,QACrC,MAAMoB,EAAQC,EAAcC,IAAMC,EAAWC,OAE7C,OACEvB,EAACC,EAAI,CACHuB,MAAO,CAEL,6BAA8B,GAAIJ,EAAcK,KAAOC,EAAWC,MAAS,SAG7E3B,EAAA,OACEE,MAAM,MACNC,KAAK,MACLyB,QAAS,OAAOF,EAAWC,SAASD,EAAWH,SAC/CM,KAAK,MAAK,aACEjE,KAAKH,OAASG,KAAKJ,YAAc,cAE5CsD,EAAM7B,KAAK6C,IACV,MAAMC,EAAIC,EAAMF,EAAMd,GACtB,OACEhB,EAAA,SACEA,EAAA,QACEE,MAAM,OACNC,KAAK,OACL8B,GAAIb,EAAcK,KAClBS,GAAIH,EACJI,GAAIf,EAAcK,KAAOH,EAAWK,MACpCS,GAAIL,IAEN/B,EAAA,QAAME,MAAM,eAAeC,KAAK,OAAOkC,EAAGjB,EAAcK,KAAO,EAAGM,EAAGA,GAClEO,EAAeR,IAEhB,IAIPrD,EAAKQ,KAAI,CAACsB,EAAKpB,IACdA,EAAQ8B,IAAc,EACpBjB,EAAA,QAAME,MAAM,eAAeC,KAAK,OAAOkC,EAAGE,EAAMpD,EAAOV,EAAKsB,QAASgC,EAAGZ,EAAQ,IAC7EZ,EAAI9C,OAEL,OAGLG,KAAKJ,YACJwC,EAAA,QACEE,MAAM,aACNmC,GAAG,IACHN,EAAG,GACHS,UAAU,eAET5E,KAAKJ,YAITE,EAAOuB,KAAK4B,IACX,MAAM4B,EAAShE,EAAKQ,KAAI,CAACsB,EAAKpB,KAAK,CACjCkD,EAAGE,EAAMpD,EAAOV,EAAKsB,QACrBgC,EAAGC,EAAM1B,EAAQC,EAAKM,EAAKnB,KAAMsB,OAEnC,MAAM0B,EAAO9E,KAAKN,OAASqF,EAAiBF,GAAUG,EAAmBH,GAEzE,OACEzC,EAAA,SACGpC,KAAKP,MACJ2C,EAAA,QACEE,MAAM,OACNC,KAAK,OACL0C,EAAGC,EAAeJ,EAAMD,GACxBM,KAAMlC,EAAKxB,MAAK,eACH,OACb2D,OAAO,SAGXhD,EAAA,QACEE,MAAM,OACNC,KAAK,OACL0C,EAAGH,EACHK,KAAK,OACLC,OAAQnC,EAAKxB,MAAK,eACL,IAAG,iBACD,QAAO,kBACN,QAAO,mBACLwB,EAAKjB,OAAS,MAAQJ,YAEzCiD,EAAOxD,KAAI,CAACgE,EAAO9D,IAClBa,EAAA,UACEE,MAAM,MACNC,KAAK,MACL+C,GAAID,EAAMZ,EACVc,GAAIF,EAAMlB,EACVqB,EAAE,MACFL,KAAMlC,EAAKxB,OAEXW,EAAA,aAAQ,GAAGvB,EAAKU,GAAO1B,UAAU6E,EAC/BhC,EAAQ7B,EAAKU,GAAQ0B,EAAKnB,YAI9B,KAKVM,EAAA,MACEE,MAAO,CAAEmD,OAAQ,KAAM,kBAAmBzF,KAAKL,YAAcG,EAAOqC,OAAS,GAC7EI,KAAK,UAELH,EAAA,QAAMK,aAAc,IAAMzC,KAAKG,a","ignoreList":[]}

package/dist/components/pf-loading-dots.d.ts

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

package/dist/components/pf-loading-dots.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,h as s,a as i}from"./index.js";const o=()=>`@keyframes pf-pulse-dots{0%,80%,100%{opacity:0.35;transform:scale(0.9)}40%{opacity:1;transform:scale(1)}}:host{align-items:center;display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.dot{animation:pf-pulse-dots 1s ease-in-out infinite;background:var(--pf-loading-accent);border-radius:50%;display:inline-block}.dot:nth-child(2){animation-delay:0.16s}.dot:nth-child(3){animation-delay:0.32s}:host([size='sm']) .dot{height:6px;width:6px}:host([size='md']) .dot{height:8px;width:8px}:host([size='lg']) .dot{height:10px;width:10px}.sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion: reduce){.dot{animation-duration:0.01ms;animation-iteration-count:1}}`;const d=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}size="md";label="Loading";render(){return s(i,{key:"fc64cab922fb015ac60edca82b120cfecf7e59ff",role:"status","aria-label":this.label},s("span",{key:"d1b62c8ba624c0f721df65f194acefd8f883f025",class:"dot",part:"dot","aria-hidden":"true"}),s("span",{key:"d3b03fc4fb16bccb8dfdc64283072d41f382945b",class:"dot",part:"dot","aria-hidden":"true"}),s("span",{key:"755ab236742ab9974834cea364c60d4fc671f40b",class:"dot",part:"dot","aria-hidden":"true"}),s("span",{key:"eecce31b0360283eecb8cc06e258835ee4f19e4a",class:"sr-only",part:"label"},this.label))}static get style(){return o()}},[513,"pf-loading-dots",{size:[513],label:[1]}]);function n(){if(typeof customElements==="undefined"){return}const t=["pf-loading-dots"];t.forEach((t=>{switch(t){case"pf-loading-dots":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}n();const c=d;const r=n;export{c as PfLoadingDots,r as defineCustomElement};
+//# sourceMappingURL=pf-loading-dots.js.map

package/dist/components/pf-loading-dots.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfLoadingDotsCss","PfLoadingDots","__stencil_proxyCustomElement","HTMLElement","size","label","render","h","Host","key","role","this","class","part"],"sources":["src/components/pf-loading-dots/pf-loading-dots.css?tag=pf-loading-dots&encapsulation=shadow","src/components/pf-loading-dots/pf-loading-dots.tsx"],"sourcesContent":["/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-pulse-dots {\n  0%,\n  80%,\n  100% {\n    opacity: 0.35;\n    transform: scale(0.9);\n  }\n\n  40% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n:host {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.dot {\n  animation: pf-pulse-dots 1s ease-in-out infinite;\n  background: var(--pf-loading-accent);\n  border-radius: 50%;\n  display: inline-block;\n}\n\n/* The dots are the first three children; the hidden label follows them. */\n.dot:nth-child(2) {\n  animation-delay: 0.16s;\n}\n\n.dot:nth-child(3) {\n  animation-delay: 0.32s;\n}\n\n:host([size='sm']) .dot {\n  height: 6px;\n  width: 6px;\n}\n\n:host([size='md']) .dot {\n  height: 8px;\n  width: 8px;\n}\n\n:host([size='lg']) .dot {\n  height: 10px;\n  width: 10px;\n}\n\n.sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dot {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfLoadingDotsSize = 'sm' | 'md' | 'lg';\n\n/**\n * Three pulsing dots, for an indeterminate wait in a tight space.\n *\n * @part dot - each of the three dots.\n * @part label - the visually hidden text the live region announces.\n */\n@Component({\n  tag: 'pf-loading-dots',\n  styleUrl: 'pf-loading-dots.css',\n  shadow: true,\n})\nexport class PfLoadingDots {\n  /** Dot size. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfLoadingDotsSize = 'md';\n\n  /** Accessible name, announced by the live region. */\n  @Prop() label = 'Loading';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-label={this.label}>\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"sr-only\" part=\"label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAmB,IAAM,gyB,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,E,iFAECC,KAA0B,KAG3CC,MAAQ,UAEhB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAaC,KAAKN,OACnCE,EAAA,QAAAE,IAAA,2CAAMG,MAAM,MAAMC,KAAK,MAAK,cAAa,SACzCN,EAAA,QAAAE,IAAA,2CAAMG,MAAM,MAAMC,KAAK,MAAK,cAAa,SACzCN,EAAA,QAAAE,IAAA,2CAAMG,MAAM,MAAMC,KAAK,MAAK,cAAa,SACzCN,EAAA,QAAAE,IAAA,2CAAMG,MAAM,UAAUC,KAAK,SACxBF,KAAKN,O","ignoreList":[]}

package/dist/components/pf-loading-skeleton.d.ts

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

package/dist/components/pf-loading-skeleton.js

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

package/dist/components/pf-loading-skeleton.js.map

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

package/dist/components/pf-loading-spinner.d.ts

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

package/dist/components/pf-loading-spinner.js

@@ -0,0 +1,2 @@
+import{t as e,p as i,H as n,h as s,a as t}from"./index.js";const r=()=>`@keyframes pf-spin{to{transform:rotate(360deg)}}:host{animation:pf-spin 0.8s linear infinite;border:3px solid color-mix(in srgb, var(--pf-loading-border) 75%, transparent);border-radius:50%;border-top-color:var(--pf-loading-accent);display:inline-block;flex:0 0 auto;height:var(--pf-spinner-size, 24px);min-height:12px;min-width:12px;width:var(--pf-spinner-size, 24px)}:host([hidden]){display:none}.sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion: reduce){:host{animation-duration:0.01ms;animation-iteration-count:1}}`;const a=i(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}size=24;label="Loading";render(){return s(t,{key:"34cbe91125995cfa2cca9f4d988214ec9984f860",role:"status","aria-label":this.label,style:{"--pf-spinner-size":`${this.size}px`}},s("span",{key:"d5d50df4e6ec207337f1a418d39724d5c62314af",class:"sr-only",part:"label"},this.label))}static get style(){return r()}},[513,"pf-loading-spinner",{size:[2],label:[1]}]);function o(){if(typeof customElements==="undefined"){return}const i=["pf-loading-spinner"];i.forEach((i=>{switch(i){case"pf-loading-spinner":if(!customElements.get(e(i))){customElements.define(e(i),a)}break}}))}o();const p=a;const d=o;export{p as PfLoadingSpinner,d as defineCustomElement};
+//# sourceMappingURL=pf-loading-spinner.js.map

package/dist/components/pf-loading-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfLoadingSpinnerCss","PfLoadingSpinner","__stencil_proxyCustomElement","HTMLElement","size","label","render","h","Host","key","role","this","style","class","part"],"sources":["src/components/pf-loading-spinner/pf-loading-spinner.css?tag=pf-loading-spinner&encapsulation=shadow","src/components/pf-loading-spinner/pf-loading-spinner.tsx"],"sourcesContent":["/*\n * `@keyframes` do not cross a shadow boundary. In the React library pf-spin is\n * declared once in LoadingIndicators.css and every component picks it up from\n * the global sheet; here each shadow root needs its own copy.\n */\n@keyframes pf-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host {\n  animation: pf-spin 0.8s linear infinite;\n  border: 3px solid color-mix(in srgb, var(--pf-loading-border) 75%, transparent);\n  border-radius: 50%;\n  border-top-color: var(--pf-loading-accent);\n  display: inline-block;\n  flex: 0 0 auto;\n  height: var(--pf-spinner-size, 24px);\n  min-height: 12px;\n  min-width: 12px;\n  width: var(--pf-spinner-size, 24px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The React library reaches a global `.pf-sr-only` for this. A shadow root\n * cannot, so each of these elements declares its own copy.\n */\n.sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * An indeterminate spinner.\n *\n * @part label - the visually hidden text the live region announces.\n */\n@Component({\n  tag: 'pf-loading-spinner',\n  styleUrl: 'pf-loading-spinner.css',\n  shadow: true,\n})\nexport class PfLoadingSpinner {\n  /** Diameter in pixels. */\n  @Prop() size = 24;\n\n  /** Accessible name, announced by the live region. */\n  @Prop() label = 'Loading';\n\n  render() {\n    /*\n     * `role` and `aria-label` go on the host so the element is the live region,\n     * and the hidden text gives that region something to announce — an empty\n     * live region named only by `aria-label` is not reliably read out. The\n     * React component carries both for the same reason.\n     */\n    return (\n      <Host role=\"status\" aria-label={this.label} style={{ '--pf-spinner-size': `${this.size}px` }}>\n        <span class=\"sr-only\" part=\"label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAsB,IAAM,gpB,MCYrBC,EAAgBC,EAAA,MAAAD,UAAAE,E,iFAEnBC,KAAO,GAGPC,MAAQ,UAEhB,MAAAC,GAOE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAaC,KAAKN,MAAOO,MAAO,CAAE,oBAAqB,GAAGD,KAAKP,WAChFG,EAAA,QAAAE,IAAA,2CAAMI,MAAM,UAAUC,KAAK,SACxBH,KAAKN,O","ignoreList":[]}

package/dist/components/pf-menu-item.d.ts

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

package/dist/components/pf-menu-item.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,c as a,h as n,a as i}from"./index.js";import{i as o}from"./p-g4FlTDZx.js";const l=()=>`:host{align-items:center;border-radius:var(--radius-sm);color:var(--pf-menu-text);cursor:pointer;display:flex;font-size:var(--font-size-sm);gap:var(--space-2);line-height:1.3;padding:var(--space-2) var(--space-3);user-select:none}:host([hidden]){display:none}:host(:hover:not([disabled])),:host(:focus-visible){background:var(--pf-menu-item-active-bg);outline:none}:host([destructive]){color:var(--pf-menu-text-danger)}:host([disabled]){cursor:not-allowed;opacity:0.5}slot[name='icon']::slotted(*){flex-shrink:0}slot[name='shortcut']::slotted(*){color:var(--pf-menu-text-muted);flex-shrink:0;font-size:var(--font-size-xs);margin-inline-start:auto}.label{flex:1;min-width:0}`;const r=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfMenuSelect=a(this,"pfMenuSelect")}value="";disabled=false;destructive=false;pfMenuSelect;handleClick(e){if(this.disabled){e.stopPropagation();return}this.pfMenuSelect.emit({value:this.value})}handleKeyDown(e){if(!o(e.key)||this.disabled)return;e.preventDefault();this.pfMenuSelect.emit({value:this.value})}render(){return n(i,{key:"ee6beb23778f9fb73dd5f97b2392aef59496f126",role:"menuitem","aria-disabled":this.disabled?"true":null},n("slot",{key:"a50a636f70d9466f61af00718dd98a8f3fe5695f",name:"icon"}),n("span",{key:"42c033ee45a78affe99ef8ca65e2a415f21612ac",class:"label",part:"label"},n("slot",{key:"bfc005d6fcc614b3a1e0ad1f2ed2338d27d97960"})),n("slot",{key:"43d807fad2b7d5f44ab7b1320b198f8dd79e3ab7",name:"shortcut"}))}static get style(){return l()}},[769,"pf-menu-item",{value:[513],disabled:[516],destructive:[516]},[[0,"click","handleClick"],[0,"keydown","handleKeyDown"]]]);function d(){if(typeof customElements==="undefined"){return}const t=["pf-menu-item"];t.forEach((t=>{switch(t){case"pf-menu-item":if(!customElements.get(e(t))){customElements.define(e(t),r)}break}}))}d();const f=r;const c=d;export{f as PfMenuItem,c as defineCustomElement};
+//# sourceMappingURL=pf-menu-item.js.map

package/dist/components/pf-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfMenuItemCss","PfMenuItem","__stencil_proxyCustomElement","HTMLElement","value","disabled","destructive","pfMenuSelect","handleClick","event","this","stopPropagation","emit","handleKeyDown","isActivationKey","key","preventDefault","render","h","Host","role","name","class","part"],"sources":["src/components/pf-menu-item/pf-menu-item.css?tag=pf-menu-item&encapsulation=shadow","src/components/pf-menu-item/pf-menu-item.tsx"],"sourcesContent":["/*\n * This element is shared by pf-dropdown and pf-context-menu, whose React\n * counterparts have two separate alias families (--pf-dropdown-* and\n * --pf-contextmenu-*) with different values. Rather than invent a third, or\n * pick one and diverge from the other layer, the item reads a generic set of\n * `--pf-menu-*` properties that each container defines on itself.\n *\n * Custom properties inherit through the shadow boundary, so a slotted item\n * picks up whichever menu it is inside. One element, two themings, no new\n * theme aliases, and exact parity with both React families.\n */\n:host {\n  align-items: center;\n  border-radius: var(--radius-sm);\n  color: var(--pf-menu-text);\n  cursor: pointer;\n  display: flex;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  line-height: 1.3;\n  padding: var(--space-2) var(--space-3);\n  user-select: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:hover:not([disabled])),\n:host(:focus-visible) {\n  background: var(--pf-menu-item-active-bg);\n  outline: none;\n}\n\n:host([destructive]) {\n  color: var(--pf-menu-text-danger);\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/*\n * The icon and the shortcut are styled through `::slotted()` rather than\n * wrapped in a span each, because an *unassigned* slot generates no box at\n * all -- it is `display: contents` -- so the row's `gap` does not open beside\n * nothing.\n *\n * A wrapper cannot be collapsed from CSS. `.icon:not(:has(*))` reads as if it\n * does exactly that and never matches, because the `<slot>` inside the\n * wrapper is itself an element child -- measured. It was costing one\n * `--space-2` in front of the label of every item with no icon, so the labels\n * in a menu that mixed the two did not line up.\n */\nslot[name='icon']::slotted(*) {\n  flex-shrink: 0;\n}\n\nslot[name='shortcut']::slotted(*) {\n  color: var(--pf-menu-text-muted);\n  flex-shrink: 0;\n  font-size: var(--font-size-xs);\n  margin-inline-start: auto;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n}\n","import { isActivationKey } from '@pitchfork-ui/core';\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\n\n/**\n * One action inside a `pf-dropdown` or a `pf-context-menu`.\n *\n * Shared by both, because the React library's `DropdownItem` and\n * `ContextMenuItem` are the same shape and the two menus render them\n * identically — one element rather than two that would drift.\n *\n * It only reports that it was chosen. The menu owns focus, closing and the\n * keyboard pattern, exactly as `pf-radio-group` owns selection for its radios.\n *\n * @slot - the item's label.\n * @slot icon - a leading icon.\n * @slot shortcut - a trailing keyboard hint.\n * @part label - the label's box.\n */\n@Component({\n  tag: 'pf-menu-item',\n  styleUrl: 'pf-menu-item.css',\n  shadow: true,\n})\nexport class PfMenuItem {\n  /**\n   * Identifies the item in the menu's select event.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-menu-item[value=\"...\"]` in a React or\n   * Angular app finds nothing. The menus themselves read the property, so this\n   * was not 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  /** Reflected so the stylesheet and the menu's item query can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Style as a destructive action. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) destructive = false;\n\n  /** Asks the menu to act on this item. The menu decides and then closes. */\n  @Event() pfMenuSelect!: EventEmitter<{ value: string }>;\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      // A disabled item swallows the click rather than letting the menu's own\n      // handler see it as a selection.\n      event.stopPropagation();\n      return;\n    }\n    this.pfMenuSelect.emit({ value: this.value });\n  }\n\n  /**\n   * Enter and Space activate, as they do on a menuitem. The arrows are the\n   * menu's: only it knows the other items.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!isActivationKey(event.key) || this.disabled) return;\n    event.preventDefault();\n    this.pfMenuSelect.emit({ value: this.value });\n  }\n\n  render() {\n    return (\n      <Host role=\"menuitem\" aria-disabled={this.disabled ? 'true' : null}>\n        <slot name=\"icon\" />\n        <span class=\"label\" part=\"label\">\n          <slot />\n        </span>\n        <slot name=\"shortcut\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAgB,IAAM,oqB,MCuBfC,EAAUC,EAAA,MAAAD,UAAAE,E,0HAUIC,MAAQ,GAGRC,SAAW,MAGXC,YAAc,MAG9BC,aAGT,WAAAC,CAAYC,GACV,GAAIC,KAAKL,SAAU,CAGjBI,EAAME,kBACN,M,CAEFD,KAAKH,aAAaK,KAAK,CAAER,MAAOM,KAAKN,O,CAQvC,aAAAS,CAAcJ,GACZ,IAAKK,EAAgBL,EAAMM,MAAQL,KAAKL,SAAU,OAClDI,EAAMO,iBACNN,KAAKH,aAAaK,KAAK,CAAER,MAAOM,KAAKN,O,CAGvC,MAAAa,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,2CAACK,KAAK,WAAU,gBAAgBV,KAAKL,SAAW,OAAS,MAC5Da,EAAA,QAAAH,IAAA,2CAAMM,KAAK,SACXH,EAAA,QAAAH,IAAA,2CAAMO,MAAM,QAAQC,KAAK,SACvBL,EAAA,QAAAH,IAAA,8CAEFG,EAAA,QAAAH,IAAA,2CAAMM,KAAK,a","ignoreList":[]}

package/dist/components/pf-menu-separator.d.ts

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

package/dist/components/pf-menu-separator.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as a,a as r}from"./index.js";const n=()=>`:host{background:var(--pf-menu-separator);display:block;height:1px;margin:var(--space-1) 0}:host([hidden]){display:none}`;const o=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return a(r,{key:"2cd9dd808ab1b3f41a19ca8b58299e56c340f7d3",role:"separator","aria-orientation":"horizontal"})}static get style(){return n()}},[1,"pf-menu-separator"]);function c(){if(typeof customElements==="undefined"){return}const t=["pf-menu-separator"];t.forEach((t=>{switch(t){case"pf-menu-separator":if(!customElements.get(e(t))){customElements.define(e(t),o)}break}}))}c();const i=o;const p=c;export{i as PfMenuSeparator,p as defineCustomElement};
+//# sourceMappingURL=pf-menu-separator.js.map

package/dist/components/pf-menu-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfMenuSeparatorCss","PfMenuSeparator","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key","role"],"sources":["src/components/pf-menu-separator/pf-menu-separator.css?tag=pf-menu-separator&encapsulation=shadow","src/components/pf-menu-separator/pf-menu-separator.tsx"],"sourcesContent":["/* Reads the same generic set the items do; see pf-menu-item.css. */\n:host {\n  background: var(--pf-menu-separator);\n  display: block;\n  height: 1px;\n  margin: var(--space-1) 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A rule between groups of menu items.\n *\n * Unlike `pf-toolbar-separator` this needs no orientation: a menu is always a\n * column, so the rule is always horizontal.\n */\n@Component({\n  tag: 'pf-menu-separator',\n  styleUrl: 'pf-menu-separator.css',\n  shadow: true,\n})\nexport class PfMenuSeparator {\n  render() {\n    return <Host role=\"separator\" aria-orientation=\"horizontal\" />;\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAqB,IAAM,2H,MCapBC,EAAeC,EAAA,MAAAD,UAAAE,E,iFAC1B,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YAAW,mBAAkB,c","ignoreList":[]}

package/dist/components/pf-metric-card.d.ts

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

package/dist/components/pf-metric-card.js

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as t,h as s,a as i}from"./index.js";import{d as n}from"./p-CkFjPRTe.js";const c=()=>`:host{background:var(--pf-metric-bg);border:1px solid var(--pf-metric-border);border-radius:var(--radius-md);display:grid;gap:var(--space-3);padding:var(--space-3)}:host([hidden]){display:none}@media (min-width: 768px){:host{padding:var(--space-4)}}.icon.empty,.action.empty,.trend.empty{display:none}.header{align-items:flex-start;display:flex;gap:var(--space-3);justify-content:space-between}.heading-wrap{align-items:center;display:inline-flex;gap:var(--space-2);min-width:0}.heading{color:var(--pf-metric-text-muted);font-size:var(--font-size-sm);margin:0}.icon{align-items:center;color:var(--pf-metric-text-muted);display:inline-flex;font-size:var(--font-size-sm);justify-content:center}.action{align-items:center;display:inline-flex;gap:var(--space-2)}.body{align-items:baseline;display:flex;flex-wrap:wrap;gap:var(--space-2)}.value{color:var(--pf-metric-text);font-size:clamp(var(--font-size-3xl), 3vw, var(--font-size-4xl));font-weight:var(--font-weight-semibold);letter-spacing:-0.02em;line-height:1.05;margin:0}.trend{align-items:center;border-radius:var(--radius-full);display:inline-flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.trend-symbol{font-size:var(--font-size-2xs);line-height:1}:host([trend='positive']) .trend{background:color-mix(in srgb, var(--pf-metric-success-bg) 55%, var(--pf-mix-base));color:var(--pf-metric-success-text)}:host([trend='negative']) .trend{background:color-mix(in srgb, var(--pf-metric-danger-bg) 55%, var(--pf-mix-base));color:var(--pf-metric-danger-text)}:host([trend='neutral']) .trend{background:var(--pf-metric-bg-subtle);color:var(--pf-metric-text-muted)}slot[name='description']::slotted(*){color:var(--pf-metric-text-muted);display:block;font-size:var(--font-size-sm);margin:0}`;const r={positive:"+",negative:"-",neutral:"="};const d=a(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}trend="neutral";icon;hasIcon=false;hasAction=false;hasTrend=false;componentWillLoad(){this.read()}read=()=>{const e=e=>Array.from(this.el.children).some((a=>a.getAttribute("slot")===e));this.hasIcon=e("icon");this.hasAction=e("action");this.hasTrend=e("trend")};render(){const e=this.hasIcon||Boolean(this.icon);return s(i,{key:"f0080f6c50f8b6f305f7ba95ee141d44bb3525eb"},s("div",{key:"cf60ec686ecb6a0332333c0be121ec25c74f2c33",class:"header",part:"header"},s("div",{key:"f7ec949ba8c658cda28be64f2621a367a0940c69",class:"heading-wrap"},s("p",{key:"36fb4bac641a685fc4ccb14f0149c64b4ca39086",class:"heading",part:"heading"},s("slot",{key:"07d7e7fe3e280d81b5355054dc68897e32d79208",name:"heading"})),s("span",{key:"47ab4af87d3579281de4b03d9342d8a103a6347b",class:{icon:true,empty:!e},part:"icon","aria-hidden":"true"},this.icon&&!this.hasIcon&&s("pf-icon",{key:"0405bc2d5771976075019cbd771f6c9d5e292756",name:this.icon}),s("slot",{key:"f40c6534905851d680e35ec2787571cc23d955b7",name:"icon",onSlotchange:this.read}))),s("span",{key:"d562acc9b5ed5797c07d1240fb3e68c25166e8df",class:{action:true,empty:!this.hasAction},part:"action"},s("slot",{key:"036b278bd1f5d4a6aa8592dbdf801f4cee1f2e69",name:"action",onSlotchange:this.read}))),s("div",{key:"54725ad239175914a1c2dc5da6c240a3591f3d05",class:"body",part:"body"},s("p",{key:"dad5ea0763235663ec0dab48739d4773a2442bd8",class:"value",part:"value"},s("slot",{key:"b5cf390faf708ec25772c6734cd3296328b56849"})),s("span",{key:"f52b7bd58efbcb33324ec6df991cc4174263fbe3",class:{trend:true,empty:!this.hasTrend},part:"trend"},s("span",{key:"9db49c651c30c5ca89832a3a7577cb1f97f10a85",class:"trend-symbol","aria-hidden":"true"},r[this.trend]??r.neutral),s("slot",{key:"9f7efb7e27d855a6d5e8c721a808f0aa005c2170",name:"trend",onSlotchange:this.read}))),s("slot",{key:"77e4e3c62b902087d674fb32edd9bdad7004524d",name:"description"}))}static get style(){return c()}},[769,"pf-metric-card",{trend:[513],icon:[1],hasIcon:[32],hasAction:[32],hasTrend:[32]}]);function o(){if(typeof customElements==="undefined"){return}const a=["pf-metric-card","pf-icon"];a.forEach((a=>{switch(a){case"pf-metric-card":if(!customElements.get(e(a))){customElements.define(e(a),d)}break;case"pf-icon":if(!customElements.get(e(a))){n()}break}}))}o();const f=d;const l=o;export{f as PfMetricCard,l as defineCustomElement};
+//# sourceMappingURL=pf-metric-card.js.map

package/dist/components/pf-metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfMetricCardCss","TREND_SYMBOL","positive","negative","neutral","PfMetricCard","__stencil_proxyCustomElement","HTMLElement","trend","icon","hasIcon","hasAction","hasTrend","componentWillLoad","this","read","slotted","name","Array","from","el","children","some","child","getAttribute","render","showIcon","Boolean","h","Host","key","class","part","empty","onSlotchange","action"],"sources":["src/components/pf-metric-card/pf-metric-card.css?tag=pf-metric-card&encapsulation=shadow","src/components/pf-metric-card/pf-metric-card.tsx"],"sourcesContent":[":host {\n  background: var(--pf-metric-bg);\n  border: 1px solid var(--pf-metric-border);\n  border-radius: var(--radius-md);\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--md) {\n  :host {\n    padding: var(--space-4);\n  }\n}\n\n/*\n * The boxes that carry layout are hidden rather than left out when empty, so\n * that content slotted in later still fires `slotchange`.\n *\n * Two classes deep, because each of these boxes sets its own `display` below:\n * `.empty` alone ties on specificity and loses on order, which is a defect\n * only a real stylesheet shows -- `scripts/smoke-consumer.mjs` caught it as a\n * bare card drawing all three of its empty boxes.\n */\n.icon.empty,\n.action.empty,\n.trend.empty {\n  display: none;\n}\n\n.header {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--space-3);\n  justify-content: space-between;\n}\n\n.heading-wrap {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n.heading {\n  color: var(--pf-metric-text-muted);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.icon {\n  align-items: center;\n  color: var(--pf-metric-text-muted);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  justify-content: center;\n}\n\n.action {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.body {\n  align-items: baseline;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n.value {\n  color: var(--pf-metric-text);\n  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-4xl));\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: -0.02em;\n  line-height: 1.05;\n  margin: 0;\n}\n\n.trend {\n  align-items: center;\n  border-radius: var(--radius-full);\n  display: inline-flex;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-2);\n}\n\n.trend-symbol {\n  font-size: var(--font-size-2xs);\n  line-height: 1;\n}\n\n:host([trend='positive']) .trend {\n  background: color-mix(in srgb, var(--pf-metric-success-bg) 55%, var(--pf-mix-base));\n  color: var(--pf-metric-success-text);\n}\n\n:host([trend='negative']) .trend {\n  background: color-mix(in srgb, var(--pf-metric-danger-bg) 55%, var(--pf-mix-base));\n  color: var(--pf-metric-danger-text);\n}\n\n:host([trend='neutral']) .trend {\n  background: var(--pf-metric-bg-subtle);\n  color: var(--pf-metric-text-muted);\n}\n\n/*\n * The description needs no box of its own, so it has none: an unassigned slot\n * generates nothing, where an empty wrapper would leave the grid's own gap\n * behind it.\n */\nslot[name='description']::slotted(*) {\n  color: var(--pf-metric-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfMetricTrend = 'positive' | 'negative' | 'neutral';\n\n/** The symbol each trend is drawn with, which is decorative either way. */\nconst TREND_SYMBOL: Record<PfMetricTrend, string> = {\n  positive: '+',\n  negative: '-',\n  neutral: '=',\n};\n\n/**\n * One figure worth looking at: a heading, the number, and optionally how it\n * has moved.\n *\n * @slot heading - what the number is.\n * @slot - the number.\n * @slot trend - how it has moved, shown as a pill beside the number.\n * @slot description - a line below the number.\n * @slot icon - a small icon beside the heading.\n * @slot action - a control in the card's top corner.\n * @part header - the row holding the heading and the action.\n * @part heading - the heading's box.\n * @part icon - the icon's box.\n * @part action - the box holding the action slot.\n * @part body - the row holding the number and the trend.\n * @part value - the number's box.\n * @part trend - the trend pill.\n */\n@Component({\n  tag: 'pf-metric-card',\n  styleUrl: 'pf-metric-card.css',\n  shadow: true,\n})\nexport class PfMetricCard {\n  @Element() el!: HTMLElement;\n\n  /** Which way the trend reads. Reflected so the stylesheet can colour it. */\n  @Prop({ reflect: true }) trend: PfMetricTrend = 'neutral';\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /**\n   * Which of the optional slots have anything in them.\n   *\n   * Asked in JS because each of these three carries layout — a row, a pill —\n   * that its content cannot, and a wrapper around a slot cannot be collapsed\n   * from CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a\n   * child. The description needs no box, so it is styled through `::slotted()`\n   * and collapses on its own.\n   */\n  @State() hasIcon = false;\n  @State() hasAction = false;\n  @State() hasTrend = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasIcon = slotted('icon');\n    this.hasAction = slotted('action');\n    this.hasTrend = slotted('trend');\n  };\n\n  render() {\n    const showIcon = this.hasIcon || Boolean(this.icon);\n\n    return (\n      <Host>\n        <div class=\"header\" part=\"header\">\n          <div class=\"heading-wrap\">\n            <p class=\"heading\" part=\"heading\">\n              <slot name=\"heading\" />\n            </p>\n            {/*\n              Every one of these boxes stays in the tree and is hidden when\n              empty, rather than being left out: a slot that is not rendered\n              never fires `slotchange`, so content added later would stay\n              invisible for good.\n            */}\n            <span class={{ icon: true, empty: !showIcon }} part=\"icon\" aria-hidden=\"true\">\n              {this.icon && !this.hasIcon && <pf-icon name={this.icon}></pf-icon>}\n              <slot name=\"icon\" onSlotchange={this.read} />\n            </span>\n          </div>\n          <span class={{ action: true, empty: !this.hasAction }} part=\"action\">\n            <slot name=\"action\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        <div class=\"body\" part=\"body\">\n          <p class=\"value\" part=\"value\">\n            <slot />\n          </p>\n          <span class={{ trend: true, empty: !this.hasTrend }} part=\"trend\">\n            {/* Decorative: the trend's direction is in its label and its colour. */}\n            <span class=\"trend-symbol\" aria-hidden=\"true\">\n              {TREND_SYMBOL[this.trend] ?? TREND_SYMBOL.neutral}\n            </span>\n            <slot name=\"trend\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        <slot name=\"description\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAkB,IAAM,yxDCK9B,MAAMC,EAA8C,CAClDC,SAAU,IACVC,SAAU,IACVC,QAAS,K,MA0BEC,EAAYC,EAAA,MAAAD,UAAAE,E,sGAIEC,MAAuB,UAGxCC,KAWCC,QAAU,MACVC,UAAY,MACZC,SAAW,MAGpB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACb,MAAMC,EAAWC,GACfC,MAAMC,KAAKL,KAAKM,GAAGC,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYP,IAE9EH,KAAKJ,QAAUM,EAAQ,QACvBF,KAAKH,UAAYK,EAAQ,UACzBF,KAAKF,SAAWI,EAAQ,QAAQ,EAGlC,MAAAS,GACE,MAAMC,EAAWZ,KAAKJ,SAAWiB,QAAQb,KAAKL,MAE9C,OACEmB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASC,KAAK,UACvBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,UAAUC,KAAK,WACtBJ,EAAA,QAAAE,IAAA,2CAAMb,KAAK,aAQbW,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEtB,KAAM,KAAMwB,OAAQP,GAAYM,KAAK,OAAM,cAAa,QACpElB,KAAKL,OAASK,KAAKJ,SAAWkB,EAAA,WAAAE,IAAA,2CAASb,KAAMH,KAAKL,OACnDmB,EAAA,QAAAE,IAAA,2CAAMb,KAAK,OAAOiB,aAAcpB,KAAKC,SAGzCa,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEI,OAAQ,KAAMF,OAAQnB,KAAKH,WAAaqB,KAAK,UAC1DJ,EAAA,QAAAE,IAAA,2CAAMb,KAAK,SAASiB,aAAcpB,KAAKC,SAI3Ca,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OAAOC,KAAK,QACrBJ,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,SACpBJ,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEvB,MAAO,KAAMyB,OAAQnB,KAAKF,UAAYoB,KAAK,SAExDJ,EAAA,QAAAE,IAAA,2CAAMC,MAAM,eAAc,cAAa,QACpC9B,EAAaa,KAAKN,QAAUP,EAAaG,SAE5CwB,EAAA,QAAAE,IAAA,2CAAMb,KAAK,QAAQiB,aAAcpB,KAAKC,SAI1Ca,EAAA,QAAAE,IAAA,2CAAMb,KAAK,gB","ignoreList":[]}

package/dist/components/pf-metric-grid.d.ts

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

package/dist/components/pf-metric-grid.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as c,a as n}from"./index.js";const r=()=>`:host{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}:host([hidden]){display:none}slot{display:contents}`;const i=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return c(n,{key:"cd17f60b2f8f7b5c3e6e0b3d692100b2bf9e0984"},c("slot",{key:"f8f804e6e990e4a969637dc8acea9d761c6d466b"}))}static get style(){return r()}},[257,"pf-metric-grid"]);function o(){if(typeof customElements==="undefined"){return}const t=["pf-metric-grid"];t.forEach((t=>{switch(t){case"pf-metric-grid":if(!customElements.get(e(t))){customElements.define(e(t),i)}break}}))}o();const a=i;const d=o;export{a as PfMetricGrid,d as defineCustomElement};
+//# sourceMappingURL=pf-metric-grid.js.map

package/dist/components/pf-metric-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfMetricGridCss","PfMetricGrid","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/pf-metric-grid/pf-metric-grid.css?tag=pf-metric-grid&encapsulation=shadow","src/components/pf-metric-grid/pf-metric-grid.tsx"],"sourcesContent":[":host {\n  display: grid;\n  gap: var(--space-4);\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* The cards have to be grid items of the host, not of a box inside it. */\nslot {\n  display: contents;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A responsive grid of `pf-metric-card` children.\n *\n * Nothing but layout — the cards are independent, so there is no state to\n * push down and no group behaviour to own. It exists because the column\n * arithmetic (`auto-fit`, `minmax(220px, 1fr)`) is a decision rather than\n * something a consumer should have to repeat.\n *\n * @slot - the `pf-metric-card` children.\n */\n@Component({\n  tag: 'pf-metric-grid',\n  styleUrl: 'pf-metric-grid.css',\n  shadow: true,\n})\nexport class PfMetricGrid {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAkB,IAAM,uJ,MCiBjBC,EAAYC,EAAA,MAAAD,UAAAE,E,iFACvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/pf-modal-body.d.ts

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

package/dist/components/pf-modal-body.js

@@ -0,0 +1,2 @@
+import{t as e,p as s,H as t,h as o,a}from"./index.js";const n=()=>`:host{display:block;overflow:auto;padding:var(--space-4)}:host([hidden]){display:none}`;const c=s(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return o(a,{key:"da6957ef1b1462d731e4f7c6272a99ea4f9e8869"},o("slot",{key:"a06152e56c3408e56fe86a71f0672ddf8fb0c9ce"}))}static get style(){return n()}},[257,"pf-modal-body"]);function d(){if(typeof customElements==="undefined"){return}const s=["pf-modal-body"];s.forEach((s=>{switch(s){case"pf-modal-body":if(!customElements.get(e(s))){customElements.define(e(s),c)}break}}))}d();const f=c;const r=d;export{f as PfModalBody,r as defineCustomElement};
+//# sourceMappingURL=pf-modal-body.js.map

package/dist/components/pf-modal-body.js.map

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

package/dist/components/pf-modal-footer.d.ts

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

package/dist/components/pf-modal-footer.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as o,a}from"./index.js";const d=()=>`:host{border-top:1px solid var(--pf-modal-border);display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4)}:host([hidden]){display:none}`;const n=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return o(a,{key:"435da74561bd7d3c7ffa98169048cda6832fe092"},o("slot",{key:"67fc15dd9d746e0bafab9126baf0438b20c249f6"}))}static get style(){return d()}},[257,"pf-modal-footer"]);function f(){if(typeof customElements==="undefined"){return}const t=["pf-modal-footer"];t.forEach((t=>{switch(t){case"pf-modal-footer":if(!customElements.get(e(t))){customElements.define(e(t),n)}break}}))}f();const r=n;const c=f;export{r as PfModalFooter,c as defineCustomElement};
+//# sourceMappingURL=pf-modal-footer.js.map

package/dist/components/pf-modal-footer.js.map

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

package/dist/components/pf-modal-header.d.ts

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

package/dist/components/pf-modal-header.js

@@ -0,0 +1,2 @@
+import{t as e,p as s,H as a,h as t,a as o}from"./index.js";const r=()=>`:host{border-bottom:1px solid var(--pf-modal-border);display:block;padding:var(--space-4) var(--space-10) var(--space-4) var(--space-4)}:host([hidden]){display:none}`;const c=s(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return t(o,{key:"d1ad25bd827a394611dec0358cba02bd73bbb104"},t("slot",{key:"4fe7116e3e9413e3b997cfaa92c97c245fc7a0b9"}))}static get style(){return r()}},[257,"pf-modal-header"]);function d(){if(typeof customElements==="undefined"){return}const s=["pf-modal-header"];s.forEach((s=>{switch(s){case"pf-modal-header":if(!customElements.get(e(s))){customElements.define(e(s),c)}break}}))}d();const n=c;const p=d;export{n as PfModalHeader,p as defineCustomElement};
+//# sourceMappingURL=pf-modal-header.js.map

package/dist/components/pf-modal-header.js.map

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

package/dist/components/pf-modal.d.ts

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

package/dist/components/pf-modal.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["isElementVisible","element","checkVisibility","offsetParent","getClientRects","length","getFocusableElements","container","selector","join","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","pfModalCss","PfModal","__stencil_proxyCustomElement","HTMLElement","open","size","label","dismissable","showCloseButton","pfOpenChange","releaseScroll","componentDidLoad","this","showDialog","disconnectedCallback","unlockScroll","show","hide","syncOpen","next","previous","closeDialog","emit","dialog","el","shadowRoot","querySelector","lockScroll","lockPageScroll","showModal","requestAnimationFrame","ensureFocusInside","componentDidRender","onFocusOut","event","relatedTarget","document","hasFocus","isConnected","matches","first","focus","close","onCancel","preventDefault","onClose","onDialogClick","target","accessibleName","text","textContent","trim","slice","undefined","render","h","Host","key","part","class","onFocusout","onClick","type","viewBox","width","height","focusable","d","stroke","fill"],"sources":["../core/dist/focus.js","src/components/pf-modal/pf-modal.css?tag=pf-modal&encapsulation=shadow","src/components/pf-modal/pf-modal.tsx"],"sourcesContent":["import { noop } from \"./internal.js\";\nimport { Keys } from \"./keys.js\";\n//#region src/focus.ts\nvar isElementVisible = (element) => {\n\tif (typeof element.checkVisibility === \"function\") return element.checkVisibility();\n\treturn element.offsetParent !== null || element.getClientRects().length > 0;\n};\nvar getFocusableElements = (container) => {\n\tconst selector = [\n\t\t\"a[href]\",\n\t\t\"button:not([disabled])\",\n\t\t\"input:not([disabled])\",\n\t\t\"select:not([disabled])\",\n\t\t\"textarea:not([disabled])\",\n\t\t\"[contenteditable]:not([contenteditable=\\\"false\\\"])\",\n\t\t\"[tabindex]:not([tabindex=\\\"-1\\\"])\"\n\t].join(\",\");\n\treturn Array.from(container.querySelectorAll(selector)).filter((element) => {\n\t\tif (element.hasAttribute(\"disabled\") || element.getAttribute(\"aria-hidden\") === \"true\") return false;\n\t\treturn isElementVisible(element);\n\t});\n};\n/**\n* Moves focus into the container and keeps Tab cycling inside it. Returns a\n* cleanup function that removes the listener and, unless told otherwise,\n* restores focus to the previously active element.\n*/\nfunction trapFocus({ getContainer, onEscape, restoreFocus = true }) {\n\tif (typeof document === \"undefined\") return noop;\n\tconst container = getContainer();\n\tconst previousActiveElement = document.activeElement;\n\tconst initialFocusable = container ? getFocusableElements(container)[0] : void 0;\n\tif (initialFocusable) initialFocusable.focus();\n\telse container?.focus();\n\tconst onKeyDown = (event) => {\n\t\tif (event.key === Keys.Escape) {\n\t\t\tonEscape?.();\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== Keys.Tab) return;\n\t\tconst current = getContainer();\n\t\tif (!current) return;\n\t\tconst focusableElements = getFocusableElements(current);\n\t\tif (focusableElements.length === 0) {\n\t\t\tevent.preventDefault();\n\t\t\tcurrent.focus();\n\t\t\treturn;\n\t\t}\n\t\tconst firstElement = focusableElements[0];\n\t\tconst lastElement = focusableElements[focusableElements.length - 1];\n\t\tconst activeElement = document.activeElement;\n\t\tif (!(activeElement ? current.contains(activeElement) : false)) {\n\t\t\tevent.preventDefault();\n\t\t\t(event.shiftKey ? lastElement : firstElement).focus();\n\t\t\treturn;\n\t\t}\n\t\tif (event.shiftKey && activeElement === firstElement) {\n\t\t\tevent.preventDefault();\n\t\t\tlastElement.focus();\n\t\t\treturn;\n\t\t}\n\t\tif (!event.shiftKey && activeElement === lastElement) {\n\t\t\tevent.preventDefault();\n\t\t\tfirstElement.focus();\n\t\t}\n\t};\n\tdocument.addEventListener(\"keydown\", onKeyDown);\n\treturn () => {\n\t\tdocument.removeEventListener(\"keydown\", onKeyDown);\n\t\tif (restoreFocus) previousActiveElement?.focus?.();\n\t};\n}\n//#endregion\nexport { getFocusableElements, trapFocus };\n",":host {\n  display: contents;\n}\n\n/*\n * The dialog is the overlay: it fills the viewport and centres the panel, so a\n * click that lands on it rather than on the panel is an overlay click.\n */\n.dialog {\n  align-items: center;\n  background: none;\n  border: 0;\n  display: none;\n  height: 100%;\n  justify-content: center;\n  max-height: 100%;\n  max-width: 100%;\n  padding: var(--space-4);\n  width: 100%;\n}\n\n.dialog[open] {\n  display: flex;\n}\n\n.dialog::backdrop {\n  background: var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop));\n}\n\n.panel {\n  background: var(--pf-modal-bg);\n  border: 1px solid var(--pf-modal-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-lg);\n  color: var(--pf-modal-text);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow: auto;\n  position: relative;\n  width: 100%;\n}\n\n:host([size='sm']) .panel {\n  max-width: 400px;\n}\n\n:host([size='md']) .panel {\n  max-width: 560px;\n}\n\n:host([size='lg']) .panel {\n  max-width: 800px;\n}\n\n.close {\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-modal-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  inset-block-start: var(--space-3);\n  inset-inline-end: var(--space-3);\n  padding: var(--space-1);\n  position: absolute;\n}\n\n.close:hover {\n  color: var(--pf-modal-text);\n}\n\n.close:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.dialog[open] .panel {\n  animation: pf-modal-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-modal-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialog[open] .panel {\n    animation: none;\n  }\n}\n","import { getFocusableElements, lockPageScroll } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfModalSize = 'sm' | 'md' | 'lg';\n\n/**\n * A modal dialog.\n *\n * A native `<dialog>` opened with `showModal()`, which from inside a shadow\n * root gives the focus trap, Escape and the backdrop for nothing — all\n * measured: focus cannot be taken by a light-DOM button, and a real Escape\n * fires `cancel` then `close`. So `trapFocus` from core is not needed here,\n * unlike in the React component.\n *\n * The one part of `showModal()` that cannot be relied on is where it puts\n * focus, and the gap is exactly the case every framework consumer is in. See\n * `showDialog` below.\n *\n * What `showModal()` does *not* do is lock page scroll — measured: a real\n * wheel still scrolled the page behind an open modal — so this element locks\n * it, exactly as the React component does.\n *\n * @slot - the modal's sections, usually `pf-modal-header`, `pf-modal-body` and\n * `pf-modal-footer`.\n * @part dialog - the native dialog, which is also the overlay.\n * @part panel - the bordered box the content sits in.\n * @part close - the close button.\n */\n@Component({\n  tag: 'pf-modal',\n  styleUrl: 'pf-modal.css',\n  shadow: true,\n})\nexport class PfModal {\n  @Element() el!: HTMLElement;\n\n  /** Whether the modal is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Panel width. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfModalSize = 'md';\n\n  /**\n   * Accessible name. Falls back to the text of whatever is slotted, which is\n   * usually the header — `aria-labelledby` cannot be used, because an IDREF\n   * does not cross a shadow boundary and the header is in the light DOM.\n   */\n  @Prop() label?: string;\n\n  /** Close on Escape or a click on the overlay. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Render the corner close button. Defaults to true. */\n  @Prop() showCloseButton = true;\n\n  /** Fires whenever the modal opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /**\n   * Releases the page-scroll lock, or null when this modal does not hold it.\n   * The lock is core's and reference-counted, so a slideout opening over a\n   * modal cannot leave the page unscrollable.\n   */\n  private releaseScroll: (() => void) | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  disconnectedCallback() {\n    // A modal removed while open would otherwise leave the page unscrollable.\n    this.unlockScroll();\n  }\n\n  /** Opens the modal. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place a state change is announced, whatever caused it: `show()`,\n   * the close button, Escape, an overlay click, or a consumer writing the prop.\n   *\n   * The first version emitted from the `close` handler alone, which fired for\n   * every close and for no open — caught by its own test. A consumer mirroring\n   * this value back sets `open` to what it already is, which Stencil does not\n   * treat as a change, so there is no loop.\n   */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showDialog();\n    else this.closeDialog();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private lockScroll() {\n    if (this.releaseScroll) return;\n    this.releaseScroll = lockPageScroll();\n  }\n\n  private unlockScroll() {\n    this.releaseScroll?.();\n    this.releaseScroll = null;\n  }\n\n  /**\n   * Opens the dialog, and makes sure focus actually went into it.\n   *\n   * `showModal()` focuses the dialog or its first focusable descendant — but\n   * **not** when light-DOM children were appended in the same task as the\n   * open. Measured in Chromium with no framework involved: append the three\n   * `pf-modal-*` sections to a long-mounted `pf-modal` and set `open` in the\n   * same task, and the dialog opens with `document.activeElement` still on\n   * `<body>` and `:focus-within` false. Leave one frame between the two and\n   * focus lands inside; mount the element with its children and `open`\n   * already set and focus lands inside. So it is the append racing the open,\n   * and the flattened tree `showModal()`'s focusing steps read.\n   *\n   * That race is not an edge case: React, Angular and Vue all commit a\n   * modal's content and its `open` in one go, so every framework consumer got\n   * an open modal with focus outside it and nothing to say so — the page is\n   * still inert, so the only symptom is that a reader is not taken to the\n   * dialog and the first Tab is needed. Porting `apps/demo` is what found it.\n   *\n   * What the trace shows, with element identity and a `MutationObserver` on\n   * the shadow root: `showModal()` **does** focus, onto `div[part=panel]`,\n   * and one frame later a `focusout` with `relatedTarget: null` drops it,\n   * with nothing removed from the shadow root. That is Chromium's focus\n   * fixup running once the appended children are assigned to the slot and\n   * finding the panel is no longer a valid target -- so it is not a render\n   * that loses focus, and re-asserting after a render does not catch it\n   * (measured: `componentDidRender` alone changes nothing here).\n   *\n   * So the dialog watches for exactly that: a `focusout` that goes nowhere\n   * while the modal is open puts focus back. `requestAnimationFrame` after\n   * `showModal()` covers the case where focus never arrived at all, and\n   * `componentDidRender` covers a render that discards the focused node. All\n   * three are the same guarded call, and the `:focus-within` guard makes it a\n   * no-op whenever focus is already inside -- so none of them moves focus\n   * that the platform or a consumer placed.\n   */\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n    requestAnimationFrame(() => this.ensureFocusInside());\n  }\n\n  componentDidRender() {\n    this.ensureFocusInside();\n  }\n\n  /**\n   * Focus left the dialog for nothing while it is open, which the platform\n   * does when its focus fixup runs after the slotted content changes.\n   *\n   * `relatedTarget` is the test: a Tab or a click inside names where focus\n   * went, and a modal dialog means it cannot have gone outside. The window\n   * losing focus also reports null, hence the `document.hasFocus()` guard --\n   * without it, switching tabs would pull focus back on return.\n   */\n  private onFocusOut = (event: FocusEvent) => {\n    if (!this.open || event.relatedTarget) return;\n    requestAnimationFrame(() => {\n      if (document.hasFocus()) this.ensureFocusInside();\n    });\n  };\n\n  /** Focus inside the open dialog, unless it is already there. */\n  private ensureFocusInside() {\n    const dialog = this.dialog;\n    if (!this.open || !dialog?.isConnected || !dialog.open) return;\n    if (dialog.matches(':focus-within')) return;\n    const [first] = getFocusableElements(dialog);\n    (first ?? dialog).focus();\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  /** Fires on Escape. Blocking it is how a non-dismissable modal stays put. */\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) {\n      event.preventDefault();\n      return;\n    }\n    // Let it close; `close` does the state mirroring.\n  };\n\n  /**\n   * Mirrors a close the browser made — Escape, or the dialog being closed by\n   * anything other than this element — back into `open`, which then announces\n   * it through the watch above.\n   */\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /**\n   * A click on the dialog element itself is a click on the overlay: the panel\n   * is an inner box, so anything landing on the dialog missed the content.\n   */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  private accessibleName() {\n    if (this.label) return this.label;\n    const text = this.el.textContent?.trim();\n    return text ? text.slice(0, 120) : undefined;\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.accessibleName()}\n          onCancel={this.onCancel}\n          onFocusout={this.onFocusOut}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\">\n            {this.showCloseButton && (\n              <button\n                class=\"close\"\n                part=\"close\"\n                type=\"button\"\n                aria-label=\"Close\"\n                onClick={() => this.hide()}\n              >\n                <svg\n                  viewBox=\"0 0 16 16\"\n                  width=\"16\"\n                  height=\"16\"\n                  aria-hidden=\"true\"\n                  focusable=\"false\"\n                >\n                  <path\n                    d=\"M4 4l8 8M12 4l-8 8\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.6\"\n                    stroke-linecap=\"round\"\n                    fill=\"none\"\n                  />\n                </svg>\n              </button>\n            )}\n            <slot />\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-multi-select.d.ts

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

package/dist/components/pf-multi-select.js

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