@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/pitchfork/p-33857f80.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a as i,h as r,H as n}from"./p-Bm6UxEit.js";import{c as s}from"./p-DfpCerXM.js";import{K as a}from"./p-g4FlTDZx.js";import{p as o,r as l,s as d,f as c,c as p}from"./p-DSXauhXX.js";import{a as u}from"./p-Cr6IXrUk.js";const f=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-numberinput-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)}.control{align-items:stretch;background:var(--pf-numberinput-bg);border:1px solid var(--pf-numberinput-border);border-radius:var(--radius-md);display:inline-flex;min-height:40px;overflow:hidden;transition:border var(--pf-transition-fast),     box-shadow var(--pf-transition-fast);width:100%}.control:focus-within{border-color:var(--pf-numberinput-focus-border);box-shadow:var(--pf-numberinput-focus-ring, var(--pf-focus-ring))}.control--invalid{border-color:var(--pf-numberinput-invalid-border)}:host([disabled]) .control{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);opacity:0.6}.input{background:transparent;border:none;color:var(--pf-numberinput-text);flex:1;font:inherit;min-width:0;outline:none;padding:0 var(--space-3);text-align:center;width:100%}.input::placeholder{color:var(--pf-numberinput-placeholder)}.input:disabled{cursor:not-allowed}.step{align-items:center;align-self:stretch;background:var(--pf-numberinput-step-bg);border:none;color:var(--pf-numberinput-step-text);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:0;transition:background var(--pf-transition-fast),     color var(--pf-transition-fast);width:40px}.step:hover:not(:disabled){background:var(--pf-numberinput-step-hover-bg);color:var(--pf-numberinput-step-hover-text)}.step:disabled{cursor:not-allowed;opacity:0.45}[part='decrement']{border-inline-end:1px solid var(--pf-numberinput-border)}[part='increment']{border-inline-start:1px solid var(--pf-numberinput-border)}.step pf-icon{font-size:16px}.description{color:var(--pf-numberinput-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-field-error);font-size:var(--font-size-sm);margin:0}@media (prefers-reduced-motion: reduce){.control,.step{transition:none}}`;const h=class{constructor(i){e(this,i);this.pfChange=t(this,"pfChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";min;max;step=1;label;description;error;placeholder;required=false;disabled=false;decrementLabel="Decrease";incrementLabel="Increase";pfChange;draft=null;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");u(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.draft=null}async stepBy(e){this.step_(e)}get bounds(){return{min:this.min===undefined?-Infinity:Number(this.min),max:this.max===undefined?Infinity:Number(this.max),step:Number(this.step)||1}}get current(){return o(this.value)}get atMin(){const{min:e}=this.bounds;return this.current!==null&&this.current<=e}get atMax(){const{max:e}=this.bounds;return this.current!==null&&this.current>=e}commit(e){const{min:t,max:i,step:r}=this.bounds;const n=e===null?"":String(l(p(e,t,i),r));if(n===this.value)return;this.value=n;this.pfChange.emit({value:n,number:o(n)})}step_(e){if(this.disabled)return;this.draft=null;this.commit(d(this.current,e,this.bounds))}onInput=e=>{const t=e.target.value;this.draft=t;const i=o(t);if(t.trim()===""){this.commit(null);return}if(i!==null)this.commit(i)};onBlur=()=>{this.draft=null};onKeyDown=e=>{if(this.disabled)return;const{min:t,max:i}=this.bounds;if(e.key===a.ArrowUp){e.preventDefault();this.step_(1)}else if(e.key===a.ArrowDown){e.preventDefault();this.step_(-1)}else if(e.key===a.Home&&Number.isFinite(t)){e.preventDefault();this.draft=null;this.commit(t)}else if(e.key===a.End&&Number.isFinite(i)){e.preventDefault();this.draft=null;this.commit(i)}};render(){const e=s(this.description&&"description",this.error&&"error");const{min:t,max:i}=this.bounds;const a=this.draft??c(this.current);return r(n,{key:"b873ad5d26191b9589a3f67432f911f57a3db2cc"},r("div",{key:"1fe3503ee61589e6cd9ebe683c937665b934fc8e",class:"field",part:"field"},this.label&&r("label",{key:"7d9da068ca611a068b89e5292238852f2d40ba53",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&r("span",{key:"bfb6e221092438b3ccef19dfe811767f4d2f3a5d",class:"required","aria-hidden":"true"},"*")),r("div",{key:"7bb8c35312b4d30e1b09fefa78f752c6791a34f9",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},r("button",{key:"ff991dc6a65ca1fc5984e5b260b7b9c77def5d49",type:"button",class:"step",part:"decrement","aria-label":this.decrementLabel,disabled:this.disabled||this.atMin,tabindex:"-1",onMouseDown:e=>e.preventDefault(),onClick:()=>this.step_(-1)},r("pf-icon",{key:"4d65e8eda2958a1e9a7308a3b23f2f3bcf9083cf",name:"minus","aria-hidden":"true"})),r("input",{key:"4a7db9fb97f9cdf12c4228ff47079f2cecadf7d8",id:"input",part:"input",class:"input",type:"text",inputMode:"decimal",role:"spinbutton",name:this.name,value:a,placeholder:this.placeholder,required:this.required,disabled:this.disabled,autocomplete:"off","aria-invalid":this.error?"true":null,"aria-describedby":e,"aria-valuenow":this.current??null,"aria-valuemin":Number.isFinite(t)?t:null,"aria-valuemax":Number.isFinite(i)?i:null,onInput:this.onInput,onBlur:this.onBlur,onKeyDown:this.onKeyDown}),r("button",{key:"436e0a6557aef36b2bd59b7f0cee8d0a08636c53",type:"button",class:"step",part:"increment","aria-label":this.incrementLabel,disabled:this.disabled||this.atMax,tabindex:"-1",onMouseDown:e=>e.preventDefault(),onClick:()=>this.step_(1)},r("pf-icon",{key:"0ae5162f3d63f69c135cc9991c9d02aaf3ac86ea",name:"plus","aria-hidden":"true"}))),this.description&&r("p",{key:"6c958dd2bdeb22310d6c422d1757f4938687513c",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"f8ea4d36f4941251e63cdfdc127fd08d3bb55ae4",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}]}}};h.style=f();export{h as pf_number_input};
+//# sourceMappingURL=p-33857f80.entry.js.map

package/dist/pitchfork/p-33857f80.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfNumberInputCss","PfNumberInput","internals","name","value","min","max","step","label","description","error","placeholder","required","disabled","decrementLabel","incrementLabel","pfChange","draft","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","stepBy","direction","step_","bounds","undefined","Infinity","Number","current","parseNumberValue","atMin","atMax","commit","next","String","roundToStep","clampNumber","emit","number","stepNumber","onInput","event","raw","target","parsed","trim","onBlur","onKeyDown","key","Keys","ArrowUp","preventDefault","ArrowDown","Home","isFinite","End","render","describedBy","composeDescribedBy","shown","formatNumberValue","h","Host","class","part","htmlFor","control","type","tabindex","onMouseDown","onClick","id","inputMode","role","autocomplete"],"sources":["src/components/pf-number-input/pf-number-input.css?tag=pf-number-input&encapsulation=shadow","src/components/pf-number-input/pf-number-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-numberinput-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.control {\n  align-items: stretch;\n  background: var(--pf-numberinput-bg);\n  border: 1px solid var(--pf-numberinput-border);\n  border-radius: var(--radius-md);\n  display: inline-flex;\n  min-height: 40px;\n  overflow: hidden;\n  transition:\n    border var(--pf-transition-fast),\n    box-shadow var(--pf-transition-fast);\n  width: 100%;\n}\n\n.control:focus-within {\n  border-color: var(--pf-numberinput-focus-border);\n  box-shadow: var(--pf-numberinput-focus-ring, var(--pf-focus-ring));\n}\n\n.control--invalid {\n  border-color: var(--pf-numberinput-invalid-border);\n}\n\n/*\n * `:host([disabled])` rather than the React component's\n * `:has(.input:disabled)`: the host carries the reflected attribute, which is\n * both simpler and the thing a consumer's own stylesheet can see.\n */\n:host([disabled]) .control {\n  background: var(--pf-control-bg-disabled);\n  border-color: var(--pf-control-border-disabled);\n  color: var(--pf-control-text-disabled);\n  opacity: 0.6;\n}\n\n.input {\n  background: transparent;\n  border: none;\n  color: var(--pf-numberinput-text);\n  flex: 1;\n  font: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0 var(--space-3);\n  text-align: center;\n  width: 100%;\n}\n\n.input::placeholder {\n  color: var(--pf-numberinput-placeholder);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n.step {\n  align-items: center;\n  align-self: stretch;\n  background: var(--pf-numberinput-step-bg);\n  border: none;\n  color: var(--pf-numberinput-step-text);\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: 0;\n  transition:\n    background var(--pf-transition-fast),\n    color var(--pf-transition-fast);\n  width: 40px;\n}\n\n.step:hover:not(:disabled) {\n  background: var(--pf-numberinput-step-hover-bg);\n  color: var(--pf-numberinput-step-hover-text);\n}\n\n.step:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n[part='decrement'] {\n  border-inline-end: 1px solid var(--pf-numberinput-border);\n}\n\n[part='increment'] {\n  border-inline-start: 1px solid var(--pf-numberinput-border);\n}\n\n.step pf-icon {\n  font-size: 16px;\n}\n\n.description {\n  color: var(--pf-numberinput-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-field-error);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .control,\n  .step {\n    transition: none;\n  }\n}\n","import {\n  clampNumber,\n  composeDescribedBy,\n  formatNumberValue,\n  Keys,\n  parseNumberValue,\n  roundToStep,\n  stepNumber,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated stepper field.\n *\n * The value is a **string** rather than a number, because that is what an\n * attribute can carry and what a form submits; `pfChange` reports the parsed\n * number beside it, which is what a framework consumer wants. An empty string\n * is an empty field — not zero, which is a value someone chose.\n *\n * All of the arithmetic is core's, so this and the React `NumberInput` step,\n * round and clamp identically: ten steps of `0.1` reach exactly 1 in both.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the steppers and the input.\n * @part decrement - the step-down button.\n * @part input - the native input.\n * @part increment - the step-up button.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-number-input',\n  styleUrl: 'pf-number-input.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfNumberInput {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because a form-associated element\n   * takes its submission name from the attribute, not this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The value, as a string. Empty means an empty field. */\n  @Prop({ mutable: true }) value = '';\n\n  /** The lowest value the field accepts. */\n  @Prop() min?: number;\n\n  /** The highest value the field accepts. */\n  @Prop() max?: number;\n\n  /** How far one step moves, and what the result is rounded to. */\n  @Prop() step = 1;\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  /** The step-down button's accessible name. */\n  @Prop() decrementLabel = 'Decrease';\n\n  /** The step-up button's accessible name. */\n  @Prop() incrementLabel = 'Increase';\n\n  /** Fires when the value changes, with the parsed number beside the string. */\n  @Event() pfChange!: EventEmitter<{ value: string; number: number | null }>;\n\n  /**\n   * What the input shows while it is being edited, which is not always the\n   * value: a half-typed \"-\" or \"1.\" is neither a number nor a reason to throw\n   * the keystroke away.\n   */\n  @State() draft: string | null = null;\n\n  /** The value a form reset restores, which is the initial attribute. */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @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  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the field started with. */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.draft = null;\n  }\n\n  /** Steps the value up or down, as the buttons and the arrows do. */\n  @Method()\n  async stepBy(direction: 1 | -1): Promise<void> {\n    this.step_(direction);\n  }\n\n  private get bounds() {\n    return {\n      min: this.min === undefined ? -Infinity : Number(this.min),\n      max: this.max === undefined ? Infinity : Number(this.max),\n      step: Number(this.step) || 1,\n    };\n  }\n\n  private get current(): number | null {\n    return parseNumberValue(this.value);\n  }\n\n  private get atMin(): boolean {\n    const { min } = this.bounds;\n    return this.current !== null && this.current <= min;\n  }\n\n  private get atMax(): boolean {\n    const { max } = this.bounds;\n    return this.current !== null && this.current >= max;\n  }\n\n  private commit(next: number | null) {\n    const { min, max, step } = this.bounds;\n    const value = next === null ? '' : String(roundToStep(clampNumber(next, min, max), step));\n    if (value === this.value) return;\n\n    this.value = value;\n    this.pfChange.emit({ value, number: parseNumberValue(value) });\n  }\n\n  private step_(direction: 1 | -1) {\n    if (this.disabled) return;\n    this.draft = null;\n    this.commit(stepNumber(this.current, direction, this.bounds));\n  }\n\n  private onInput = (event: Event) => {\n    const raw = (event.target as HTMLInputElement).value;\n    /*\n     * The draft is kept as typed and the value follows it, rather than the\n     * input being rewritten from the value: clamping mid-keystroke would make\n     * \"5\" unreachable in a field whose minimum is 50, and rounding would eat\n     * the \".\" of \"1.5\" as it was typed.\n     */\n    this.draft = raw;\n    const parsed = parseNumberValue(raw);\n    if (raw.trim() === '') {\n      this.commit(null);\n      return;\n    }\n    if (parsed !== null) this.commit(parsed);\n  };\n\n  /** On blur the draft is given up, so the field shows its real value. */\n  private onBlur = () => {\n    this.draft = null;\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    const { min, max } = this.bounds;\n\n    if (event.key === Keys.ArrowUp) {\n      event.preventDefault();\n      this.step_(1);\n    } else if (event.key === Keys.ArrowDown) {\n      event.preventDefault();\n      this.step_(-1);\n    } else if (event.key === Keys.Home && Number.isFinite(min)) {\n      event.preventDefault();\n      this.draft = null;\n      this.commit(min);\n    } else if (event.key === Keys.End && Number.isFinite(max)) {\n      event.preventDefault();\n      this.draft = null;\n      this.commit(max);\n    }\n  };\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const { min, max } = this.bounds;\n    const shown = this.draft ?? formatNumberValue(this.current);\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\n          <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n            {/*\n              The steppers are out of the tab order and the arrows are on the\n              input, which is the spinbutton pattern: a keyboard user steps\n              without leaving the field. `mousedown` is prevented so a click\n              does not take focus off it either.\n            */}\n            <button\n              type=\"button\"\n              class=\"step\"\n              part=\"decrement\"\n              aria-label={this.decrementLabel}\n              disabled={this.disabled || this.atMin}\n              tabindex=\"-1\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.step_(-1)}\n            >\n              <pf-icon name=\"minus\" aria-hidden=\"true\"></pf-icon>\n            </button>\n\n            <input\n              id=\"input\"\n              part=\"input\"\n              class=\"input\"\n              type=\"text\"\n              inputMode=\"decimal\"\n              role=\"spinbutton\"\n              name={this.name}\n              value={shown}\n              placeholder={this.placeholder}\n              required={this.required}\n              disabled={this.disabled}\n              autocomplete=\"off\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              aria-valuenow={this.current ?? null}\n              aria-valuemin={Number.isFinite(min) ? min : null}\n              aria-valuemax={Number.isFinite(max) ? max : null}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onKeyDown={this.onKeyDown}\n            />\n\n            <button\n              type=\"button\"\n              class=\"step\"\n              part=\"increment\"\n              aria-label={this.incrementLabel}\n              disabled={this.disabled || this.atMax}\n              tabindex=\"-1\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.step_(1)}\n            >\n              <pf-icon name=\"plus\" aria-hidden=\"true\"></pf-icon>\n            </button>\n          </div>\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":"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","ignoreList":[]}

package/dist/pitchfork/p-34f2df95.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as r,H as o}from"./p-Bm6UxEit.js";const s=()=>`:host{background:var(--pf-menu-separator);display:block;height:1px;margin:var(--space-1) 0}:host([hidden]){display:none}`;const t=class{constructor(r){a(this,r)}render(){return r(o,{key:"2cd9dd808ab1b3f41a19ca8b58299e56c340f7d3",role:"separator","aria-orientation":"horizontal"})}};t.style=s();export{t as pf_menu_separator};
+//# sourceMappingURL=p-34f2df95.entry.js.map

package/dist/pitchfork/p-34f2df95.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfMenuSeparatorCss","PfMenuSeparator","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":"kDAAA,MAAMA,EAAqB,IAAM,2H,MCapBC,EAAe,M,yBAC1B,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YAAW,mBAAkB,c","ignoreList":[]}

package/dist/pitchfork/p-37ee290d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,a,h as t,H as s}from"./p-Bm6UxEit.js";const i=()=>`:host{display:grid;gap:var(--space-4)}:host([hidden]){display:none}.breadcrumbs.empty,.metadata.empty,.actions.empty{display:none}.breadcrumbs{min-width:0}.row{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between}@media (min-width: 768px){.row{flex-direction:row}}.content{display:grid;gap:var(--space-2);min-width:0}slot[name='eyebrow']::slotted(*){color:var(--pf-page-header-eyebrow);display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.08em;margin:0;text-transform:uppercase}.heading{color:var(--pf-page-header-text);font-size:clamp(var(--font-size-3xl), 3vw, var(--font-size-5xl));font-weight:var(--font-weight-semibold);letter-spacing:-0.03em;line-height:1.05;margin:0}slot[name='description']::slotted(*){color:var(--pf-page-header-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.5;margin:0;max-width:68ch}@media (min-width: 768px){slot[name='description']::slotted(*){font-size:var(--font-size-md)}}.metadata{align-items:center;color:var(--pf-page-header-text-muted);display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}.actions{align-items:center;display:inline-flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-start;width:100%}@media (min-width: 768px){.actions{justify-content:flex-end;width:auto}}`;const c=class{constructor(a){e(this,a)}get el(){return a(this)}hasBreadcrumbs=false;hasMetadata=false;hasActions=false;componentWillLoad(){this.read()}read=()=>{const e=e=>Array.from(this.el.children).some((a=>a.getAttribute("slot")===e));this.hasBreadcrumbs=e("breadcrumbs");this.hasMetadata=e("metadata");this.hasActions=e("actions")};render(){return t(s,{key:"8d3f6dee92d62335462229dc68b3fecf579e4846"},t("div",{key:"d35751a575c614707ab5c2057f16521c78bd9f47",class:{breadcrumbs:true,empty:!this.hasBreadcrumbs},part:"breadcrumbs"},t("slot",{key:"1315edcc31c9fa99b04980180d7d58cc9cb9da88",name:"breadcrumbs",onSlotchange:this.read})),t("div",{key:"e67a5113345cddc79a0112885f40e25398b1223a",class:"row",part:"row"},t("div",{key:"3bd9e036d55367de2d65aa0769abe64c0a084acd",class:"content",part:"content"},t("slot",{key:"8f963cce99ea42a5b61301f3dc5845a60543cf1a",name:"eyebrow"}),t("h1",{key:"a9c1a9a94a0cbac5e7e45fe41d0accf88845a5a2",class:"heading",part:"heading"},t("slot",{key:"b81e457428dc2e55688255a9023fd7633c48054b"})),t("slot",{key:"fe46f6ae144d97c2f941957751b3389d0fe8f457",name:"description"}),t("div",{key:"02110682bf36ce17fd8e824a08f5ea9243b04a16",class:{metadata:true,empty:!this.hasMetadata},part:"metadata"},t("slot",{key:"3e60c5a167573f752c50546944b142a2a34b9437",name:"metadata",onSlotchange:this.read}))),t("div",{key:"8558c324c524782f8ef73e3596f64da9e3c0cd41",class:{actions:true,empty:!this.hasActions},part:"actions"},t("slot",{key:"518894f2b38e56234a0a3d9fcbc6b64dbd651a36",name:"actions",onSlotchange:this.read}))))}};c.style=i();export{c as pf_page_header};
+//# sourceMappingURL=p-37ee290d.entry.js.map

package/dist/pitchfork/p-37ee290d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfPageHeaderCss","PfPageHeader","hasBreadcrumbs","hasMetadata","hasActions","componentWillLoad","this","read","slotted","name","Array","from","el","children","some","child","getAttribute","render","h","Host","key","class","breadcrumbs","empty","part","onSlotchange","metadata","actions"],"sources":["src/components/pf-page-header/pf-page-header.css?tag=pf-page-header&encapsulation=shadow","src/components/pf-page-header/pf-page-header.tsx"],"sourcesContent":[":host {\n  display: grid;\n  gap: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * Hidden rather than left out, so a later `slotchange` still arrives. Two\n * classes deep, because these boxes set their own `display` below.\n */\n.breadcrumbs.empty,\n.metadata.empty,\n.actions.empty {\n  display: none;\n}\n\n.breadcrumbs {\n  min-width: 0;\n}\n\n.row {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  justify-content: space-between;\n}\n\n@media (--md) {\n  .row {\n    flex-direction: row;\n  }\n}\n\n.content {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\nslot[name='eyebrow']::slotted(*) {\n  color: var(--pf-page-header-eyebrow);\n  display: block;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.08em;\n  margin: 0;\n  text-transform: uppercase;\n}\n\n.heading {\n  color: var(--pf-page-header-text);\n  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-5xl));\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: -0.03em;\n  line-height: 1.05;\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-page-header-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.5;\n  margin: 0;\n  max-width: 68ch;\n}\n\n@media (--md) {\n  slot[name='description']::slotted(*) {\n    font-size: var(--font-size-md);\n  }\n}\n\n.metadata {\n  align-items: center;\n  color: var(--pf-page-header-text-muted);\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n.actions {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  justify-content: flex-start;\n  width: 100%;\n}\n\n@media (--md) {\n  .actions {\n    justify-content: flex-end;\n    width: auto;\n  }\n}\n","import { Component, Element, h, Host, State } from '@stencil/core';\n\n/**\n * The heading of a page: a breadcrumb trail, an eyebrow, the title, a line of\n * explanation, some metadata and the page's actions.\n *\n * The trail is slotted rather than taken as data — the consumer nests a\n * `pf-breadcrumbs` (WEB-COMPONENTS-PLAN.md §2.1), where the React\n * `PageHeader` takes a `breadcrumbs` array and renders the component itself.\n * Each crumb's label is a node, which does not cross the HTML boundary.\n *\n * @slot breadcrumbs - a `pf-breadcrumbs` trail above the title.\n * @slot eyebrow - small text above the title.\n * @slot - the title.\n * @slot description - a line below the title.\n * @slot metadata - small facts below the description.\n * @slot actions - the page's controls.\n * @part breadcrumbs - the box holding the breadcrumbs slot.\n * @part row - the row holding the content and the actions.\n * @part content - the box holding everything but the actions.\n * @part heading - the title's box.\n * @part metadata - the box holding the metadata slot.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-page-header',\n  styleUrl: 'pf-page-header.css',\n  shadow: true,\n})\nexport class PfPageHeader {\n  @Element() el!: HTMLElement;\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasBreadcrumbs = false;\n  @State() hasMetadata = false;\n  @State() hasActions = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasBreadcrumbs = slotted('breadcrumbs');\n    this.hasMetadata = slotted('metadata');\n    this.hasActions = slotted('actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        {/*\n          Hidden rather than left out, every one of them: a slot that is not\n          rendered never fires `slotchange`, so a trail or an action added\n          later would stay invisible for good.\n        */}\n        <div class={{ breadcrumbs: true, empty: !this.hasBreadcrumbs }} part=\"breadcrumbs\">\n          <slot name=\"breadcrumbs\" onSlotchange={this.read} />\n        </div>\n\n        <div class=\"row\" part=\"row\">\n          <div class=\"content\" part=\"content\">\n            <slot name=\"eyebrow\" />\n            <h1 class=\"heading\" part=\"heading\">\n              <slot />\n            </h1>\n            <slot name=\"description\" />\n            <div class={{ metadata: true, empty: !this.hasMetadata }} part=\"metadata\">\n              <slot name=\"metadata\" onSlotchange={this.read} />\n            </div>\n          </div>\n\n          <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n            <slot name=\"actions\" onSlotchange={this.read} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAkB,IAAM,i1C,MC6BjBC,EAAY,M,iDAIdC,eAAiB,MACjBC,YAAc,MACdC,WAAa,MAGtB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACb,MAAMC,EAAWC,GACfC,MAAMC,KAAKL,KAAKM,GAAGC,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYP,IAE9EH,KAAKJ,eAAiBM,EAAQ,eAC9BF,KAAKH,YAAcK,EAAQ,YAC3BF,KAAKF,WAAaI,EAAQ,UAAU,EAGtC,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CAMHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEC,YAAa,KAAMC,OAAQjB,KAAKJ,gBAAkBsB,KAAK,eACnEN,EAAA,QAAAE,IAAA,2CAAMX,KAAK,cAAcgB,aAAcnB,KAAKC,QAG9CW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,MAAMG,KAAK,OACpBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUG,KAAK,WACxBN,EAAA,QAAAE,IAAA,2CAAMX,KAAK,YACXS,EAAA,MAAAE,IAAA,2CAAIC,MAAM,UAAUG,KAAK,WACvBN,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMX,KAAK,gBACXS,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEK,SAAU,KAAMH,OAAQjB,KAAKH,aAAeqB,KAAK,YAC7DN,EAAA,QAAAE,IAAA,2CAAMX,KAAK,WAAWgB,aAAcnB,KAAKC,SAI7CW,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEM,QAAS,KAAMJ,OAAQjB,KAAKF,YAAcoB,KAAK,WAC3DN,EAAA,QAAAE,IAAA,2CAAMX,KAAK,UAAUgB,aAAcnB,KAAKC,S","ignoreList":[]}

package/dist/pitchfork/p-3843faa6.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,a as i,h as e,H as a}from"./p-Bm6UxEit.js";import{r as n}from"./p-CAz7-p8y.js";import{s as r,r as o}from"./p-Fiuz9ck7.js";import"./p-g4FlTDZx.js";function d(t,s){return t.find((t=>t.value===s&&!t.disabled))??t.find((t=>!t.disabled))}const h=()=>`:host{display:grid;gap:var(--space-3)}:host([hidden]){display:none}@media (min-width: 768px){:host{gap:var(--space-4)}}.list{display:flex;min-width:0;overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:none}.list::-webkit-scrollbar{display:none}:host([full-width]) .list{width:100%}:host([variant='underline']) .list{border-bottom:1px solid var(--pf-tabs-border);gap:var(--space-1)}:host([variant='pills']) .list{background:var(--pf-tabs-bg-subtle);border-radius:var(--radius-md);gap:var(--space-1);padding:var(--space-1)}.indicator{pointer-events:none;position:absolute;transition:left var(--pf-transition-medium),     width var(--pf-transition-medium),     top var(--pf-transition-medium),     height var(--pf-transition-medium)}.indicator[hidden]{display:none}:host([variant='underline']) .indicator{background:var(--pf-tabs-text);border-radius:var(--radius-full);bottom:0;height:var(--pf-tabs-underline-width)}:host([variant='pills']) .indicator{background:var(--pf-tabs-bg);border-radius:var(--radius-sm);box-shadow:var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));z-index:0}.panels{min-width:0}.panels>slot::slotted(pf-tab){display:none}@media (prefers-reduced-motion: reduce){.indicator{transition:none}}`;let l=0;const c=t=>t.value??t.getAttribute("value")??"";const f=t=>t.disabled??t.hasAttribute("disabled");const p=(t,s)=>{if(!t.id)t.id=s;return t.id};const b=class{constructor(i){t(this,i);this.pfChange=s(this,"pfChange")}get el(){return i(this)}uid=++l;listEl;indicatorEl;observer;observed=[];value="";variant="underline";size="md";fullWidth=false;pfChange;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}componentDidRender(){this.placeIndicator();this.observe()}disconnectedCallback(){this.observer?.disconnect();this.observer=undefined;this.observed=[]}handleStateChange(){this.sync();this.placeIndicator()}async refresh(){this.sync();this.placeIndicator()}get tabs(){return Array.from(this.el.querySelectorAll("pf-tab")).filter((t=>t.parentElement===this.el))}get panels(){return Array.from(this.el.querySelectorAll("pf-tab-panel")).filter((t=>t.parentElement===this.el))}get descriptors(){return this.tabs.map(((t,s)=>({el:t,index:s,value:c(t),disabled:f(t)})))}get selectedValue(){return d(this.descriptors,this.value)?.value??""}sync(){const t=this.descriptors;const s=this.panels;const i=this.selectedValue;for(const{el:e,index:a,value:n,disabled:r}of t){const t=p(e,`pf-tabs-${this.uid}-tab-${a}`);const o=s.find((t=>c(t)===n));if(o){const s=p(o,`pf-tabs-${this.uid}-panel-${a}`);e.setAttribute("aria-controls",s);o.setAttribute("aria-labelledby",t)}const d=e;d.selected=n===i&&!r;d.variant=this.variant;d.size=this.size;d.fullWidth=this.fullWidth}for(const t of s){t.active=c(t)===i}this.syncTabIndex(t,i)}syncTabIndex(t,s){const i=t.filter((t=>!t.disabled));if(i.length===0)return;const e=i.find((t=>t.value===s));r(i.map((t=>t.el)),(e??i[0]).el);for(const{el:s,disabled:i}of t){if(i)s.tabIndex=-1}}placeIndicator(){const t=this.listEl;const s=this.indicatorEl;if(!t||!s)return;const i=this.selectedValue;const e=this.descriptors.find((t=>t.value===i))?.el;if(!e){s.setAttribute("hidden","");return}s.removeAttribute("hidden");const a=t.getBoundingClientRect();const n=e.getBoundingClientRect();s.style.left=`${n.left-a.left+t.scrollLeft}px`;s.style.width=`${n.width}px`;if(this.variant==="pills"){s.style.top=`${n.top-a.top+t.scrollTop}px`;s.style.height=`${n.height}px`}else{s.style.top="";s.style.height=""}}observe(){if(typeof ResizeObserver==="undefined")return;const t=this.selectedValue;const s=this.descriptors.find((s=>s.value===t))?.el;const i=[this.listEl,s].filter((t=>Boolean(t)));const e=i.length===this.observed.length&&i.every(((t,s)=>t===this.observed[s]));if(this.observer&&e)return;this.observer?.disconnect();this.observer=new ResizeObserver((()=>this.placeIndicator()));for(const t of i)this.observer.observe(t);this.observed=i;document.fonts?.ready.then((()=>this.placeIndicator()))}select(t,{focus:s=false}={}){const i=this.descriptors.find((s=>s.value===t));if(!i||i.disabled)return;const e=t!==this.selectedValue;this.value=t;this.sync();this.placeIndicator();if(s)i.el.focus();if(e)this.pfChange.emit({value:t})}handleTabSelect(t){t.stopPropagation();this.select(t.detail.value)}handleKeyDown(t){if(t.defaultPrevented)return;const s=o(t.key,"horizontal");if(!s)return;const i=this.descriptors.filter((t=>!t.disabled));if(i.length===0)return;const e=i.findIndex((t=>t.el===document.activeElement));if(e===-1)return;const a=n(s,i.map(((t,s)=>s)),e);if(a<0)return;t.preventDefault();this.select(i[a].value,{focus:true})}render(){return e(a,{key:"fba4350cf1bc8d7c9a3373b26c4a174606d097bf"},e("div",{key:"2ab8f90a922b2e5f0bcbc6d3fb5ed9537b4111ae",class:"list",part:"list",role:"tablist","aria-orientation":"horizontal",ref:t=>this.listEl=t},e("span",{key:"82efc96d0d645dd1fb728124032ad838b6b466b1",class:"indicator",part:"indicator","aria-hidden":"true",ref:t=>this.indicatorEl=t}),e("slot",{key:"444830fe87ecf929115ec3f39824f3c4d3bbd297",name:"tab",onSlotchange:()=>this.refresh()})),e("div",{key:"ce4636d0e2eca6db497ea9c1547e0100c3f53454",class:"panels",part:"panels"},e("slot",{key:"4b62a691759a5706f133fb0631f912f3d0874b7d",onSlotchange:()=>this.refresh()})))}static get watchers(){return{value:[{handleStateChange:0}],variant:[{handleStateChange:0}],size:[{handleStateChange:0}],fullWidth:[{handleStateChange:0}]}}};b.style=h();export{b as pf_tabs};
+//# sourceMappingURL=p-3843faa6.entry.js.map

package/dist/pitchfork/p-3843faa6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveSelectedTab","tabs","value","find","tab","disabled","pfTabsCss","instances","readValue","el","getAttribute","readDisabled","hasAttribute","ensureId","fallback","id","PfTabs","uid","listEl","indicatorEl","observer","observed","variant","size","fullWidth","pfChange","componentWillLoad","this","sync","componentDidLoad","componentDidRender","placeIndicator","observe","disconnectedCallback","disconnect","undefined","handleStateChange","refresh","Array","from","querySelectorAll","filter","parentElement","panels","panel","descriptors","map","index","selectedValue","selected","tabId","candidate","panelId","setAttribute","active","syncTabIndex","enabled","descriptor","length","current","syncRovingTabIndex","tabIndex","list","indicator","removeAttribute","listRect","getBoundingClientRect","tabRect","style","left","scrollLeft","width","top","scrollTop","height","ResizeObserver","next","node","Boolean","unchanged","every","i","document","fonts","ready","then","select","focus","changed","emit","handleTabSelect","event","stopPropagation","detail","handleKeyDown","defaultPrevented","action","resolveRovingKey","key","currentIndex","findIndex","activeElement","nextIndex","resolveListMove","_","preventDefault","render","h","Host","class","part","role","ref","name","onSlotchange"],"sources":["../core/dist/tabs.js","src/components/pf-tabs/pf-tabs.css?tag=pf-tabs&encapsulation=shadow","src/components/pf-tabs/pf-tabs.tsx"],"sourcesContent":["//#region src/tabs.ts\n/**\n* The tab a given value selects: the enabled tab carrying it, or the first\n* enabled tab when no such tab exists.\n*\n* That fallback covers three cases with one rule — no value asked for at all,\n* a value no tab carries, and a value belonging to a disabled tab — because a\n* tablist with nothing selected shows no panel, which reads as broken. It\n* returns `undefined` only when every tab is disabled or there are none, which\n* are the two cases where there is genuinely nothing to show.\n*/\nfunction resolveSelectedTab(tabs, value) {\n\treturn tabs.find((tab) => tab.value === value && !tab.disabled) ?? tabs.find((tab) => !tab.disabled);\n}\n//#endregion\nexport { resolveSelectedTab };\n",":host {\n  display: grid;\n  gap: var(--space-3);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--md) {\n  :host {\n    gap: var(--space-4);\n  }\n}\n\n.list {\n  display: flex;\n  /*\n   * As a grid item the strip defaults to `min-width: auto`, which refuses to\n   * shrink below its content width -- so it would overflow the viewport\n   * instead of scrolling inside itself.\n   */\n  min-width: 0;\n  /*\n   * Horizontal scroll only. Without pinning overflow-y, `overflow-x: auto`\n   * forces it to compute to `auto` too, so a horizontal scrollbar eats\n   * vertical space and triggers a phantom vertical one.\n   */\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  /* Hidden so it never draws over the underline; the indicator is the cue. */\n  scrollbar-width: none;\n}\n\n.list::-webkit-scrollbar {\n  display: none;\n}\n\n:host([full-width]) .list {\n  width: 100%;\n}\n\n:host([variant='underline']) .list {\n  border-bottom: 1px solid var(--pf-tabs-border);\n  gap: var(--space-1);\n}\n\n:host([variant='pills']) .list {\n  background: var(--pf-tabs-bg-subtle);\n  border-radius: var(--radius-md);\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n/*\n * One indicator for the whole strip, placed from measurements in\n * `placeIndicator` so it slides between tabs. `left`/`width` (and `top`/\n * `height` for a pill) are written inline; everything else is here.\n */\n.indicator {\n  pointer-events: none;\n  position: absolute;\n  transition:\n    left var(--pf-transition-medium),\n    width var(--pf-transition-medium),\n    top var(--pf-transition-medium),\n    height var(--pf-transition-medium);\n}\n\n.indicator[hidden] {\n  display: none;\n}\n\n:host([variant='underline']) .indicator {\n  background: var(--pf-tabs-text);\n  border-radius: var(--radius-full);\n  bottom: 0;\n  height: var(--pf-tabs-underline-width);\n}\n\n:host([variant='pills']) .indicator {\n  background: var(--pf-tabs-bg);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));\n  z-index: 0;\n}\n\n.panels {\n  min-width: 0;\n}\n\n/*\n * A `pf-tab` assigns itself to the `tab` slot in `connectedCallback`, but a\n * tab added later is briefly assigned to the default slot before that runs.\n * Hiding it there keeps it from flashing in the panel stack. `::slotted` after\n * the slot selector is what scopes this to the default slot's assignments --\n * the `tab` slot's own are untouched.\n */\n.panels > slot::slotted(pf-tab) {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .indicator {\n    transition: none;\n  }\n}\n","import {\n  resolveListMove,\n  resolveRovingKey,\n  resolveSelectedTab,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfTabsVariant = 'underline' | 'pills';\nexport type PfTabsSize = 'sm' | 'md';\n\n/** One `pf-tab`, read the way the group needs it. */\ninterface TabDescriptor {\n  el: HTMLElement;\n  index: number;\n  value: string;\n  disabled: boolean;\n}\n\n/**\n * Distinguishes the ids this element generates. Not `useId`, which has no\n * equivalent here, and not a shadow-scoped literal either: these ids go on\n * *light-DOM* children, so they share the document's namespace with every\n * other tab set on the page.\n */\nlet instances = 0;\n\n/**\n * The property if the element has been upgraded, the attribute if it has not.\n *\n * `componentWillLoad` runs before the children's own upgrade on a page that\n * parsed them as plain HTML, so the first sync can only read attributes; after\n * that the property is the truth, because the generated bindings set props as\n * properties and leave no attribute behind for an unreflected one.\n */\nconst readValue = (el: HTMLElement) =>\n  (el as HTMLElement & { value?: string }).value ?? el.getAttribute('value') ?? '';\n\nconst readDisabled = (el: HTMLElement) =>\n  (el as HTMLElement & { disabled?: boolean }).disabled ?? el.hasAttribute('disabled');\n\nconst ensureId = (el: HTMLElement, fallback: string) => {\n  if (!el.id) el.id = fallback;\n  return el.id;\n};\n\n/**\n * A tab set: a strip of `pf-tab` children over a stack of `pf-tab-panel`\n * children.\n *\n * Children rather than an `items` array (WEB-COMPONENTS-PLAN.md §2.1), because\n * the React `TabsItem` carries a `label` and a `content` that are both\n * `ReactNode` — neither crosses the HTML boundary, so a consumer nests instead\n * and loops in their own template.\n *\n * A `pf-tab` puts itself in the `tab` slot, so the two kinds of child can be\n * written interleaved — one `pf-tab` and one `pf-tab-panel` per item, which is\n * what a loop over data wants — and still land in the right box.\n *\n * The group owns everything the children cannot see on their own: which one is\n * selected, the single tab stop, the id wiring in both directions, and the\n * sliding indicator. Each `pf-tab` only reports that it was chosen, as\n * `pf-radio-button` does to its group.\n *\n * @slot tab - the `pf-tab` children. They assign themselves to it.\n * @slot - the `pf-tab-panel` children.\n * @part list - the tab strip, which is the `tablist`.\n * @part indicator - the bar or pill that slides to the selected tab.\n * @part panels - the box the panels are slotted into.\n */\n@Component({\n  tag: 'pf-tabs',\n  styleUrl: 'pf-tabs.css',\n  shadow: true,\n})\nexport class PfTabs {\n  @Element() el!: HTMLElement;\n\n  private uid = ++instances;\n  private listEl?: HTMLElement;\n  private indicatorEl?: HTMLElement;\n  private observer?: ResizeObserver;\n  private observed: HTMLElement[] = [];\n\n  /**\n   * The selected tab's value.\n   *\n   * Left exactly as the consumer set it, as the React component leaves its\n   * state: a value no tab carries still *shows* the first enabled tab, but it\n   * is not silently rewritten here, so a consumer holding `value` sees only\n   * the changes they made.\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /** Underline or pills. Reflected, and pushed down onto every tab. */\n  @Prop({ reflect: true }) variant: PfTabsVariant = 'underline';\n\n  /** Tab padding and type scale. Reflected, and pushed down onto every tab. */\n  @Prop({ reflect: true }) size: PfTabsSize = 'md';\n\n  /** Stretch the tabs to fill the strip. Reflected, and pushed down. */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /** Fires when the selected tab changes, however it was chosen. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The light DOM is readable here, so first paint already has the right tab\n   * selected and the other panels hidden — the mock DOM never fires\n   * `slotchange`, and a real one fires it after the first render.\n   */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * The indicator is placed from measurements, so it can only be done once the\n   * shadow DOM and the slotted tabs have been laid out.\n   */\n  componentDidRender() {\n    this.placeIndicator();\n    this.observe();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.observer = undefined;\n    this.observed = [];\n  }\n\n  @Watch('value')\n  @Watch('variant')\n  @Watch('size')\n  @Watch('fullWidth')\n  handleStateChange() {\n    this.sync();\n    this.placeIndicator();\n  }\n\n  /**\n   * Re-reads the children.\n   *\n   * Needed because a consumer can change a tab through its *property* —\n   * `tab.disabled = true` — which leaves no attribute, moves no node and so\n   * fires neither `slotchange` nor any watcher here.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n    this.placeIndicator();\n  }\n\n  /** Direct children only: a nested tab set owns its own tabs. */\n  private get tabs(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-tab')).filter(\n      (tab) => tab.parentElement === this.el,\n    );\n  }\n\n  private get panels(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-tab-panel')).filter(\n      (panel) => panel.parentElement === this.el,\n    );\n  }\n\n  private get descriptors(): TabDescriptor[] {\n    return this.tabs.map((el, index) => ({\n      el,\n      index,\n      value: readValue(el),\n      disabled: readDisabled(el),\n    }));\n  }\n\n  /**\n   * The value actually on show: core's rule, so the React `Tabs` falls back to\n   * the same tab for a value no tab carries or one that is disabled.\n   */\n  private get selectedValue(): string {\n    return resolveSelectedTab(this.descriptors, this.value)?.value ?? '';\n  }\n\n  /**\n   * Pushes the group's state down onto the children: which tab is selected,\n   * which panel is shown, the id wiring between the two, and one tab stop.\n   *\n   * The ids go on light-DOM children, which is why they can be referenced at\n   * all: tab and panel share the consumer's tree, so `aria-controls` and\n   * `aria-labelledby` resolve. The pair an overlay cannot have — a trigger\n   * outside pointing at a panel in a shadow root — is the opposite case, and\n   * is why `pf-tooltip` copies its text instead.\n   */\n  private sync() {\n    const descriptors = this.descriptors;\n    const panels = this.panels;\n    const selected = this.selectedValue;\n\n    for (const { el, index, value, disabled } of descriptors) {\n      const tabId = ensureId(el, `pf-tabs-${this.uid}-tab-${index}`);\n      const panel = panels.find((candidate) => readValue(candidate) === value);\n      if (panel) {\n        const panelId = ensureId(panel, `pf-tabs-${this.uid}-panel-${index}`);\n        el.setAttribute('aria-controls', panelId);\n        panel.setAttribute('aria-labelledby', tabId);\n      }\n\n      const tab = el as HTMLElement & {\n        selected: boolean;\n        variant: PfTabsVariant;\n        size: PfTabsSize;\n        fullWidth: boolean;\n      };\n      tab.selected = value === selected && !disabled;\n      /*\n       * Pushed down rather than selected on from above: `:host-context()` is\n       * the only selector that would let a tab see its group's variant, and it\n       * is in neither Firefox nor Safari. Same reason `pf-toolbar` writes its\n       * orientation onto its separators.\n       */\n      tab.variant = this.variant;\n      tab.size = this.size;\n      tab.fullWidth = this.fullWidth;\n    }\n\n    for (const panel of panels) {\n      (panel as HTMLElement & { active: boolean }).active = readValue(panel) === selected;\n    }\n\n    this.syncTabIndex(descriptors, selected);\n  }\n\n  /**\n   * One tab stop for the whole strip, on the selected tab.\n   *\n   * The ARIA tabs pattern puts it there rather than on whichever tab was\n   * focused last, so tabbing in lands on the panel being shown. The React\n   * `Tabs` instead leaves every tab tabbable, which is a gap recorded in\n   * `todo.md` — the arrows already move selection in both.\n   */\n  private syncTabIndex(descriptors: TabDescriptor[], selected: string) {\n    const enabled = descriptors.filter((descriptor) => !descriptor.disabled);\n    if (enabled.length === 0) return;\n\n    const current = enabled.find((descriptor) => descriptor.value === selected);\n    syncRovingTabIndex(\n      enabled.map((descriptor) => descriptor.el),\n      (current ?? enabled[0]).el,\n    );\n    for (const { el, disabled } of descriptors) {\n      if (disabled) el.tabIndex = -1;\n    }\n  }\n\n  /**\n   * Puts the indicator under (or behind) the selected tab.\n   *\n   * Measured with rects rather than `offsetLeft`, which the React component\n   * can use and this one cannot: a slotted element's `offsetParent` is\n   * resolved in its *own* node tree, so it is the nearest positioned ancestor\n   * in the consumer's document and never the shadow box the element is\n   * actually laid out in. Measured twice. Inside a `position: relative`\n   * wrapper the selected tab reported `offsetParent: #wrapper` and\n   * `offsetLeft: 196` where its offset within the strip was 186 — the\n   * wrapper's own padding folded in. And with this placed from `offsetLeft`\n   * in a real build, the indicator painted at 64 against a tab starting at\n   * 32, which is what `scripts/smoke-consumer.mjs` now catches.\n   *\n   * Adding back `scrollLeft` is what makes the result scroll-invariant: the\n   * indicator is a child of the scrolling strip, so it has to be placed in the\n   * strip's scroll coordinates, and both rects move together when it scrolls.\n   */\n  private placeIndicator() {\n    const list = this.listEl;\n    const indicator = this.indicatorEl;\n    if (!list || !indicator) return;\n\n    const selected = this.selectedValue;\n    const tab = this.descriptors.find((descriptor) => descriptor.value === selected)?.el;\n    if (!tab) {\n      indicator.setAttribute('hidden', '');\n      return;\n    }\n    indicator.removeAttribute('hidden');\n\n    const listRect = list.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    indicator.style.left = `${tabRect.left - listRect.left + list.scrollLeft}px`;\n    indicator.style.width = `${tabRect.width}px`;\n\n    if (this.variant === 'pills') {\n      indicator.style.top = `${tabRect.top - listRect.top + list.scrollTop}px`;\n      indicator.style.height = `${tabRect.height}px`;\n    } else {\n      // The underline's own box comes from the stylesheet; an inline value set\n      // by the pills variant would outrank it for good.\n      indicator.style.top = '';\n      indicator.style.height = '';\n    }\n  }\n\n  /**\n   * Re-measures when the strip or the selected tab changes size.\n   *\n   * `document.fonts.ready` as well, because a web font loading can change a\n   * *sibling* tab's width and so move the selected one without resizing it —\n   * which a ResizeObserver on the two of them alone would miss.\n   */\n  private observe() {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const selected = this.selectedValue;\n    const tab = this.descriptors.find((descriptor) => descriptor.value === selected)?.el;\n    const next = [this.listEl, tab].filter((node): node is HTMLElement => Boolean(node));\n    const unchanged =\n      next.length === this.observed.length && next.every((node, i) => node === this.observed[i]);\n    if (this.observer && unchanged) return;\n\n    this.observer?.disconnect();\n    this.observer = new ResizeObserver(() => this.placeIndicator());\n    for (const node of next) this.observer.observe(node);\n    this.observed = next;\n\n    document.fonts?.ready.then(() => this.placeIndicator());\n  }\n\n  private select(next: string, { focus = false } = {}) {\n    const descriptor = this.descriptors.find((candidate) => candidate.value === next);\n    if (!descriptor || descriptor.disabled) return;\n\n    /*\n     * Against the tab actually on show, not against `value`: with `value`\n     * unset the first enabled tab is already selected, and clicking it would\n     * otherwise report a change from '' to its value — a `pfChange` for a\n     * selection that never moved. `value` is still written, so a consumer\n     * reading it back sees what the user picked.\n     *\n     * The React `Tabs` has no such guard and calls `onValueChange` for a\n     * re-click of the selected tab; recorded in `todo.md`.\n     */\n    const changed = next !== this.selectedValue;\n    this.value = next;\n    this.sync();\n    this.placeIndicator();\n    if (focus) descriptor.el.focus();\n    if (changed) this.pfChange.emit({ value: next });\n  }\n\n  /**\n   * A tab asking to be selected — by click, or by Enter or Space on itself.\n   * The group decides, exactly as `pf-radio-group` does for its radios.\n   */\n  @Listen('pfTabSelect')\n  handleTabSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.select(event.detail.value);\n  }\n\n  /**\n   * The arrows move *and* select, which the ARIA tabs pattern calls automatic\n   * activation and allows when the panels are already rendered. Home and End\n   * jump to the first and last enabled tab; a disabled tab is skipped rather\n   * than focused, because unlike a calendar's blocked day there is nothing\n   * behind it to reach.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, 'horizontal');\n    if (!action) return;\n\n    const enabled = this.descriptors.filter((descriptor) => !descriptor.disabled);\n    if (enabled.length === 0) return;\n\n    // `activeElement` reports the shallowest host, which is the tab itself.\n    const currentIndex = enabled.findIndex(\n      (descriptor) => descriptor.el === (document.activeElement as HTMLElement),\n    );\n    if (currentIndex === -1) return;\n\n    const nextIndex = resolveListMove(\n      action,\n      enabled.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    this.select(enabled[nextIndex].value, { focus: true });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"list\"\n          part=\"list\"\n          role=\"tablist\"\n          aria-orientation=\"horizontal\"\n          ref={(el) => (this.listEl = el)}\n        >\n          <span\n            class=\"indicator\"\n            part=\"indicator\"\n            aria-hidden=\"true\"\n            ref={(el) => (this.indicatorEl = el)}\n          />\n          <slot name=\"tab\" onSlotchange={() => this.refresh()} />\n        </div>\n        <div class=\"panels\" part=\"panels\">\n          <slot onSlotchange={() => this.refresh()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-3cd7d421.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as e,H as s}from"./p-Bm6UxEit.js";const t=()=>`:host{display:block}:host([hidden]){display:none}.label{color:var(--pf-command-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.04em;margin:0;padding:var(--space-2) var(--space-3) var(--space-1);text-transform:uppercase}`;const r=class{constructor(e){a(this,e)}label;render(){return e(s,{key:"8d93af230bca00a826b5a9f1f4dff8ec19b5f7c3",role:"group","aria-label":this.label},this.label&&e("p",{key:"842b8ebd4eda7cbf5f28b1087df5fb4fdaa4cbae",class:"label",part:"label"},this.label),e("slot",{key:"a77cc0bb2715fbddbe0d5809916405d22c892acc"}))}};r.style=t();export{r as pf_command_group};
+//# sourceMappingURL=p-3cd7d421.entry.js.map

package/dist/pitchfork/p-3cd7d421.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCommandGroupCss","PfCommandGroup","label","render","h","Host","key","role","this","class","part"],"sources":["src/components/pf-command-group/pf-command-group.css?tag=pf-command-group&encapsulation=shadow","src/components/pf-command-group/pf-command-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n/* The palette hides a group whose every item a query filtered out. */\n:host([hidden]) {\n  display: none;\n}\n\n.label {\n  color: var(--pf-command-text-muted);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.04em;\n  margin: 0;\n  padding: var(--space-2) var(--space-3) var(--space-1);\n  text-transform: uppercase;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A labelled section of a `pf-command-palette`.\n *\n * Grouping is structural here, where the React component takes a `group` name\n * on each item and buckets them itself. That is not a stylistic choice: the\n * items are slotted light-DOM children, and a shadow root cannot wrap a subset\n * of its slotted children in a box — one `<slot>` renders them all, in source\n * order. So the consumer expresses a group by nesting, which is also what\n * §2.1 asks for everywhere else.\n *\n * @slot - `pf-command-item` children.\n * @part label - the section heading.\n */\n@Component({\n  tag: 'pf-command-group',\n  styleUrl: 'pf-command-group.css',\n  shadow: true,\n})\nexport class PfCommandGroup {\n  /** The section heading. Searched along with each item's own text. */\n  @Prop() label?: string;\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.label}>\n        {this.label && (\n          <p class=\"label\" part=\"label\">\n            {this.label}\n          </p>\n        )}\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,IAAM,iR,MCoBnBC,EAAc,M,yBAEjBC,MAER,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,QAAO,aAAaC,KAAKN,OACjCM,KAAKN,OACJE,EAAA,KAAAE,IAAA,2CAAGG,MAAM,QAAQC,KAAK,SACnBF,KAAKN,OAGVE,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/pitchfork/p-3fd3444b.entry.js

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

package/dist/pitchfork/p-3fd3444b.entry.js.map

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

package/dist/pitchfork/p-41d997d9.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as r}from"./p-Bm6UxEit.js";const a=()=>`:host{background:var(--pf-toolbar-separator);flex-shrink:0;margin:var(--space-1)}:host([hidden]){display:none}:host([orientation='horizontal']){align-self:stretch;width:1px}:host([orientation='vertical']){height:1px}`;const e=class{constructor(o){t(this,o)}orientation="horizontal";render(){return o(r,{key:"b6a69e325252e5807d813d6b7d95a4d0cd915148",role:"separator","aria-orientation":this.orientation})}};e.style=a();export{e as pf_toolbar_separator};
+//# sourceMappingURL=p-41d997d9.entry.js.map

package/dist/pitchfork/p-41d997d9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfToolbarSeparatorCss","PfToolbarSeparator","orientation","render","h","Host","key","role","this"],"sources":["src/components/pf-toolbar-separator/pf-toolbar-separator.css?tag=pf-toolbar-separator&encapsulation=shadow","src/components/pf-toolbar-separator/pf-toolbar-separator.tsx"],"sourcesContent":[":host {\n  background: var(--pf-toolbar-separator);\n  flex-shrink: 0;\n  margin: var(--space-1);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* A horizontal toolbar is divided by a vertical hairline, and vice versa. */\n:host([orientation='horizontal']) {\n  align-self: stretch;\n  width: 1px;\n}\n\n:host([orientation='vertical']) {\n  height: 1px;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfToolbarSeparatorOrientation = 'horizontal' | 'vertical';\n\n/**\n * A rule between groups of toolbar controls.\n *\n * `orientation` describes the toolbar it sits in, not the rule's own shape: a\n * horizontal toolbar gets a vertical hairline. `pf-toolbar` sets it on every\n * separator it contains, so a consumer does not have to — and cannot leave one\n * pointing the wrong way.\n */\n@Component({\n  tag: 'pf-toolbar-separator',\n  styleUrl: 'pf-toolbar-separator.css',\n  shadow: true,\n})\nexport class PfToolbarSeparator {\n  /** The axis of the toolbar this sits in. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) orientation: PfToolbarSeparatorOrientation = 'horizontal';\n\n  render() {\n    return <Host role=\"separator\" aria-orientation={this.orientation} />;\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAwB,IAAM,2N,MCiBvBC,EAAkB,M,yBAEJC,YAA6C,aAEtE,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YAAW,mBAAmBC,KAAKN,a","ignoreList":[]}

package/dist/pitchfork/p-4217a92a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,a,h as t,H as i}from"./p-Bm6UxEit.js";const s=()=>`: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 c=class{constructor(a){e(this,a)}get el(){return a(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 t(i,{key:"f0080f6c50f8b6f305f7ba95ee141d44bb3525eb"},t("div",{key:"cf60ec686ecb6a0332333c0be121ec25c74f2c33",class:"header",part:"header"},t("div",{key:"f7ec949ba8c658cda28be64f2621a367a0940c69",class:"heading-wrap"},t("p",{key:"36fb4bac641a685fc4ccb14f0149c64b4ca39086",class:"heading",part:"heading"},t("slot",{key:"07d7e7fe3e280d81b5355054dc68897e32d79208",name:"heading"})),t("span",{key:"47ab4af87d3579281de4b03d9342d8a103a6347b",class:{icon:true,empty:!e},part:"icon","aria-hidden":"true"},this.icon&&!this.hasIcon&&t("pf-icon",{key:"0405bc2d5771976075019cbd771f6c9d5e292756",name:this.icon}),t("slot",{key:"f40c6534905851d680e35ec2787571cc23d955b7",name:"icon",onSlotchange:this.read}))),t("span",{key:"d562acc9b5ed5797c07d1240fb3e68c25166e8df",class:{action:true,empty:!this.hasAction},part:"action"},t("slot",{key:"036b278bd1f5d4a6aa8592dbdf801f4cee1f2e69",name:"action",onSlotchange:this.read}))),t("div",{key:"54725ad239175914a1c2dc5da6c240a3591f3d05",class:"body",part:"body"},t("p",{key:"dad5ea0763235663ec0dab48739d4773a2442bd8",class:"value",part:"value"},t("slot",{key:"b5cf390faf708ec25772c6734cd3296328b56849"})),t("span",{key:"f52b7bd58efbcb33324ec6df991cc4174263fbe3",class:{trend:true,empty:!this.hasTrend},part:"trend"},t("span",{key:"9db49c651c30c5ca89832a3a7577cb1f97f10a85",class:"trend-symbol","aria-hidden":"true"},r[this.trend]??r.neutral),t("slot",{key:"9f7efb7e27d855a6d5e8c721a808f0aa005c2170",name:"trend",onSlotchange:this.read}))),t("slot",{key:"77e4e3c62b902087d674fb32edd9bdad7004524d",name:"description"}))}};c.style=s();export{c as pf_metric_card};
+//# sourceMappingURL=p-4217a92a.entry.js.map

package/dist/pitchfork/p-4217a92a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfMetricCardCss","TREND_SYMBOL","positive","negative","neutral","PfMetricCard","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":"oDAAA,MAAMA,EAAkB,IAAM,yxDCK9B,MAAMC,EAA8C,CAClDC,SAAU,IACVC,SAAU,IACVC,QAAS,K,MA0BEC,EAAY,M,iDAIEC,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,QACpC5B,EAAaW,KAAKN,QAAUL,EAAaG,SAE5CsB,EAAA,QAAAE,IAAA,2CAAMb,KAAK,QAAQiB,aAAcpB,KAAKC,SAI1Ca,EAAA,QAAAE,IAAA,2CAAMb,KAAK,gB","ignoreList":[]}

package/dist/pitchfork/p-43c103bb.entry.js

@@ -0,0 +1,2 @@
+import{r as e,a as t,h as a,H as i}from"./p-Bm6UxEit.js";const n=()=>`:host{align-items:center;color:var(--pf-content-divider-text);display:flex;gap:var(--space-3);width:100%}:host([hidden]){display:none}:host([inset]){padding-inline-end:var(--space-2);padding-inline-start:var(--space-2)}.line{background:var(--pf-content-divider-line);display:block;flex:1;height:1px}.label{color:var(--pf-content-divider-text);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;text-transform:uppercase;white-space:nowrap}.label--empty,.line--hidden{display:none}:host([orientation='vertical']){align-self:stretch;background:var(--pf-content-divider-line);display:inline-block;flex:0 0 auto;height:auto;min-height:100%;width:1px}:host([orientation='vertical']) .line,:host([orientation='vertical']) .label{display:none}`;const r=class{constructor(t){e(this,t)}get el(){return t(this)}orientation="horizontal";inset=false;hasLabel=false;componentWillLoad(){this.syncLabel()}syncLabel=()=>{this.hasLabel=Array.from(this.el.childNodes).some((e=>{if(e.nodeType===Node.TEXT_NODE)return Boolean(e.textContent?.trim());if(e.nodeType!==Node.ELEMENT_NODE)return false;return!e.getAttribute("slot")}))};render(){return a(i,{key:"dc7c5a43b2f356b553628a4de6a987ecc217fc5e",role:"separator","aria-orientation":this.orientation},a("span",{key:"cdab9e57ebf9d2e00952b519f0767e45c3898db9",part:"line",class:"line","aria-hidden":"true"}),a("span",{key:"23ff0f23cb3534d200d8f5a3da8651bd3fd0a7c1",part:"label",class:{label:true,"label--empty":!this.hasLabel}},a("slot",{key:"8d3cdb5015572a426c999b09478a5ba38fc1a6f9",onSlotchange:this.syncLabel})),a("span",{key:"3d1984591ba428163514b1f85a1ed3637cc9534a",part:"line",class:{line:true,"line--hidden":!this.hasLabel},"aria-hidden":"true"}))}};r.style=n();export{r as pf_content_divider};
+//# sourceMappingURL=p-43c103bb.entry.js.map

package/dist/pitchfork/p-43c103bb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfContentDividerCss","PfContentDivider","orientation","inset","hasLabel","componentWillLoad","this","syncLabel","Array","from","el","childNodes","some","node","nodeType","Node","TEXT_NODE","Boolean","textContent","trim","ELEMENT_NODE","getAttribute","render","h","Host","key","role","part","class","label","onSlotchange","line"],"sources":["src/components/pf-content-divider/pf-content-divider.css?tag=pf-content-divider&encapsulation=shadow","src/components/pf-content-divider/pf-content-divider.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  color: var(--pf-content-divider-text);\n  display: flex;\n  gap: var(--space-3);\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([inset]) {\n  padding-inline-end: var(--space-2);\n  padding-inline-start: var(--space-2);\n}\n\n.line {\n  background: var(--pf-content-divider-line);\n  display: block;\n  flex: 1;\n  height: 1px;\n}\n\n.label {\n  color: var(--pf-content-divider-text);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n/*\n * `display: none` rather than omitting the nodes: the slot has to stay in the\n * shadow tree for `slotchange` to fire at all, and the trailing rule would\n * otherwise double the gap around a zero-width label.\n */\n.label--empty,\n.line--hidden {\n  display: none;\n}\n\n/*\n * Vertical is a different shape, not a variant of the horizontal one: the host\n * itself is the rule, so its own children have no part to play.\n */\n:host([orientation='vertical']) {\n  align-self: stretch;\n  background: var(--pf-content-divider-line);\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  min-height: 100%;\n  width: 1px;\n}\n\n:host([orientation='vertical']) .line,\n:host([orientation='vertical']) .label {\n  display: none;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfContentDividerOrientation = 'horizontal' | 'vertical';\n\n/**\n * A rule that separates content, optionally labelled.\n *\n * @slot - the divider's label. Leave it empty for a plain rule; the element\n * notices either way and lays the rule out accordingly. Ignored when\n * `orientation` is `vertical`, which has nowhere to put a label.\n *\n * @part line - each of the two rule segments either side of the label, or the\n * single segment when there is no label.\n * @part label - the wrapper around the slotted label.\n */\n@Component({\n  tag: 'pf-content-divider',\n  styleUrl: 'pf-content-divider.css',\n  shadow: true,\n})\nexport class PfContentDivider {\n  @Element() el!: HTMLElement;\n\n  /** Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfContentDividerOrientation = 'horizontal';\n\n  /** Pad the divider horizontally. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) inset = false;\n\n  /**\n   * Whether anything is slotted. Drives the layout: a labelled divider is\n   * rule-label-rule, an unlabelled one is a single rule. It cannot be a `@Prop`\n   * because the consumer never states it — the presence of slotted content is\n   * the statement, and that can change after first render.\n   */\n  @State() hasLabel = false;\n\n  componentWillLoad() {\n    this.syncLabel();\n  }\n\n  /**\n   * Reads the light DOM rather than the slot's `assignedNodes()`. Both give the\n   * same answer for a single default slot, but the light DOM can be read before\n   * first render, so the divider lays out correctly on its first paint instead\n   * of flickering from unlabelled to labelled once `slotchange` lands. It is\n   * also the only one of the two that Stencil's mock DOM implements.\n   *\n   * A whitespace-only text node is what a formatter leaves behind in\n   * `<pf-content-divider>\\n</pf-content-divider>`, and it is not a label.\n   */\n  private syncLabel = () => {\n    this.hasLabel = Array.from(this.el.childNodes).some((node) => {\n      if (node.nodeType === Node.TEXT_NODE) return Boolean(node.textContent?.trim());\n      if (node.nodeType !== Node.ELEMENT_NODE) return false;\n      // Anything aimed at a named slot this element does not have is not a label.\n      return !(node as Element).getAttribute('slot');\n    });\n  };\n\n  render() {\n    return (\n      <Host role=\"separator\" aria-orientation={this.orientation}>\n        <span part=\"line\" class=\"line\" aria-hidden=\"true\" />\n        <span part=\"label\" class={{ label: true, 'label--empty': !this.hasLabel }}>\n          <slot onSlotchange={this.syncLabel} />\n        </span>\n        <span\n          part=\"line\"\n          class={{ line: true, 'line--hidden': !this.hasLabel }}\n          aria-hidden=\"true\"\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAsB,IAAM,iwB,MCoBrBC,EAAgB,M,iDAIFC,YAA2C,aAG3CC,MAAQ,MAQxBC,SAAW,MAEpB,iBAAAC,GACEC,KAAKC,W,CAaCA,UAAY,KAClBD,KAAKF,SAAWI,MAAMC,KAAKH,KAAKI,GAAGC,YAAYC,MAAMC,IACnD,GAAIA,EAAKC,WAAaC,KAAKC,UAAW,OAAOC,QAAQJ,EAAKK,aAAaC,QACvE,GAAIN,EAAKC,WAAaC,KAAKK,aAAc,OAAO,MAEhD,OAASP,EAAiBQ,aAAa,OAAO,GAC9C,EAGJ,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YAAW,mBAAmBpB,KAAKJ,aAC5CqB,EAAA,QAAAE,IAAA,2CAAME,KAAK,OAAOC,MAAM,OAAM,cAAa,SAC3CL,EAAA,QAAAE,IAAA,2CAAME,KAAK,QAAQC,MAAO,CAAEC,MAAO,KAAM,gBAAiBvB,KAAKF,WAC7DmB,EAAA,QAAAE,IAAA,2CAAMK,aAAcxB,KAAKC,aAE3BgB,EAAA,QAAAE,IAAA,2CACEE,KAAK,OACLC,MAAO,CAAEG,KAAM,KAAM,gBAAiBzB,KAAKF,UAAU,cACzC,S","ignoreList":[]}

package/dist/pitchfork/p-47cabc33.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,a as i,h as o,H as s}from"./p-Bm6UxEit.js";import{o as r,p as a}from"./p-CC7AyfOt.js";import{c as n}from"./p-DfpCerXM.js";import{q as c,m as h}from"./p-Dkd7BUB5.js";import{K as l}from"./p-g4FlTDZx.js";import{g as d,r as p}from"./p-CAz7-p8y.js";import{a as f}from"./p-Cr6IXrUk.js";const b=()=>`:host{display:block;--pf-option-text:var(--pf-combobox-text);--pf-option-text-disabled:var(--pf-combobox-placeholder);--pf-option-active-bg:var(--pf-combobox-option-active-bg);--pf-option-active-text:var(--pf-combobox-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-combobox-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-combobox-invalid-border);margin-inline-start:var(--space-1)}.control{align-items:center;background:var(--pf-combobox-bg);border:1px solid var(--pf-combobox-border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding-inline-end:var(--space-2)}.control:focus-within{border-color:var(--pf-combobox-focus-border);box-shadow:var(--pf-focus-ring)}.control--invalid{border-color:var(--pf-combobox-invalid-border)}.input{background:none;border:0;color:var(--pf-combobox-text);flex:1;font-family:inherit;font-size:var(--font-size-sm);min-width:0;outline:none;padding:var(--space-2) var(--space-3)}.input::placeholder{color:var(--pf-combobox-placeholder)}.input:disabled{cursor:not-allowed;opacity:0.6}.clear,.chevron{align-items:center;color:var(--pf-combobox-placeholder);display:inline-flex;flex-shrink:0;justify-content:center}.clear{background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;padding:var(--space-1)}.clear:hover{color:var(--pf-combobox-text)}.chevron{transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-combobox-placeholder);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-combobox-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-combobox-menu-bg);border:1px solid var(--pf-combobox-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 320px);overflow-y:auto;padding:var(--space-1)}.listbox:popover-open{animation:pf-combobox-in var(--pf-transition-enter)}@keyframes pf-combobox-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}.empty{color:var(--pf-combobox-placeholder);font-size:var(--font-size-sm);margin:0;padding:var(--space-3);text-align:center}`;const u={[l.ArrowDown]:"next",[l.ArrowUp]:"previous",[l.Home]:"first",[l.End]:"last"};const m=class{constructor(i){t(this,i);this.pfChange=e(this,"pfChange");this.pfOpenChange=e(this,"pfOpenChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";open=false;label;description;error;placeholder="Search…";emptyMessage="No matches";required=false;disabled=false;clearable=true;clearLabel="Clear";pfChange;pfOpenChange;query="";matchCount=0;initialValue="";stopObserving;activeOption=null;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.query=this.selectedLabel();this.applyQuery()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){this.internals.setFormValue(this.value||null);f(this.internals,Boolean(this.value),this.required,this.error)}syncSelection(){for(const t of this.options()){t.selected=this.optionValue(t)===this.value&&this.value!==""}this.query=this.selectedLabel();this.applyQuery()}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;this.query=this.selectedLabel();this.applyQuery()}async refresh(){this.syncSelection()}onSlotChange=()=>{this.syncSelection()};options(){return Array.from(this.el.querySelectorAll("pf-option"))}visible(){return this.options().filter((t=>!t.hasAttribute("hidden")))}optionValue(t){return t.value??t.getAttribute("value")??""}selectedLabel(){const t=this.options().find((t=>this.optionValue(t)===this.value));return this.value&&t?t.textContent?.trim()??"":""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get input(){return this.el.shadowRoot?.querySelector('[part="input"]')??null}get control(){return this.el.shadowRoot?.querySelector('[part="control"]')??null}applyQuery(){const t=c(this.query,this.selectedLabel());const e=this.options();for(const i of e){const e=t||h({label:i.textContent?.trim()??""},this.query);if(e)i.removeAttribute("hidden");else i.setAttribute("hidden","")}const i=this.visible();this.matchCount=i.length;const o=i.find((t=>!t.hasAttribute("disabled")))??null;if(!this.activeOption||this.activeOption.hasAttribute("hidden"))this.setActive(o)}showListbox(){const t=this.listbox;if(this.disabled||!t||t.matches(":popover-open"))return;t.showPopover();this.stopObserving?.();this.stopObserving=r({getAnchor:()=>this.control,getFloating:()=>t,matchAnchorWidth:true,flip:true,onChange:({left:e,top:i,width:o,minWidth:s})=>{a(t,e,i);if(o!==undefined)t.style.width=`${o}px`;if(s!==undefined)t.style.minWidth=`${s}px`}});this.applyQuery()}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.query=this.selectedLabel();this.applyQuery();this.input?.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.input;if(!t||!("ariaActiveDescendantElement"in t))return;t.ariaActiveDescendantElement=this.open?this.activeOption:null}commit(t){if(t.hasAttribute("disabled"))return;const e=this.optionValue(t);this.open=false;if(e!==this.value){this.value=e;this.pfChange.emit({value:e})}this.query=this.selectedLabel();this.applyQuery();this.input?.focus()}handleOptionSelect(t){t.stopPropagation();if(this.disabled)return;const e=this.options().find((e=>this.optionValue(e)===t.detail.value));if(e)this.commit(e)}move(t){const e=this.visible();const i=d(e,(t=>t.hasAttribute("disabled")));const o=this.activeOption?e.indexOf(this.activeOption):-1;const s=p(t,i,o);if(s!==-1)this.setActive(e[s]??null)}onInput=t=>{this.query=t.target.value;this.applyQuery();if(!this.open)this.open=true};clear=()=>{this.query="";if(this.value!==""){this.value="";this.pfChange.emit({value:""})}this.applyQuery();this.open=true;this.input?.focus()};onKeyDown=t=>{if(this.disabled)return;const e=u[t.key];if(e){t.preventDefault();if(!this.open)this.open=true;else this.move(e);return}if(t.key===l.Enter&&this.open&&this.activeOption){t.preventDefault();this.commit(this.activeOption)}};render(){const t=n(this.description&&"description",this.error&&"error");const e=this.clearable&&!this.disabled&&(this.query!==""||this.value!=="");return o(s,{key:"a8de74e291d2b9b200ecd25aa173a0b5d3b7b626"},o("div",{key:"90e0c5924b6bf0bc06cae69fa69d03d8a7839991",class:"field",part:"field"},this.label&&o("label",{key:"40c0f27b7320895673dfe5a222e5c9a9c177342e",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&o("span",{key:"dd07ad670d93b1aff47c4ad879d021e5c01b4744",class:"required","aria-hidden":"true"},"*")),o("div",{key:"125a49726f50d094cd5b07055dac55a18ac5f730",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},o("input",{key:"f5af0e210b95aaf50f6aa26fea9923ecce23a9d9",id:"input",part:"input",class:"input",type:"text",role:"combobox",autocomplete:"off",disabled:this.disabled,required:this.required,placeholder:this.placeholder,value:this.query,"aria-autocomplete":"list","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-describedby":t,onInput:this.onInput,onKeyDown:this.onKeyDown,onClick:()=>{if(!this.disabled)this.open=true}}),e&&o("button",{key:"3de0deb6fa499c4f09a8135e8f437a0b8d800e2b",class:"clear",part:"clear",type:"button","aria-label":this.clearLabel,tabindex:-1,onMouseDown:t=>t.preventDefault(),onClick:this.clear},o("pf-icon",{key:"4690b5b9889c4fa42d9a517c44881dcc39a3ce6a",name:"circle-xmark"})),o("span",{key:"91d963abe51964b40952c20662cda34fe6bc8422",class:"chevron","aria-hidden":"true"},o("pf-icon",{key:"26d800a4907e4c043771cf88939a452140656cc2",name:"chevron-down"}))),this.description&&o("p",{key:"25aa3122181742855db9407918564609e5229b9d",class:"description",part:"description",id:"description"},this.description),this.error&&o("p",{key:"383cea1cb15a3d5007fffae49fa9ebe713d4c46e",class:"error",part:"error",id:"error"},this.error)),o("div",{key:"56960b3bba88d5699a8dc813050bdb726bafa905",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-label":this.label??this.placeholder,onToggle:this.onToggle},o("slot",{key:"746f17fc39239ee6d577fb1bd1a0e0ac8165081d",onSlotchange:this.onSlotChange}),this.matchCount===0&&o("p",{key:"58b33af6e2edd8f4b64d0f9ee7fc62004f219cf4",class:"empty",part:"empty"},this.emptyMessage)))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0},{syncSelection:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};m.style=b();export{m as pf_combobox};
+//# sourceMappingURL=p-47cabc33.entry.js.map

package/dist/pitchfork/p-47cabc33.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfComboboxCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfCombobox","internals","name","value","open","label","description","error","placeholder","emptyMessage","required","disabled","clearable","clearLabel","pfChange","pfOpenChange","query","matchCount","initialValue","stopObserving","activeOption","componentWillLoad","this","syncFormState","selectedLabel","applyQuery","componentDidRender","syncActiveDescendant","disconnectedCallback","setFormValue","applyControlValidity","Boolean","syncSelection","option","options","selected","optionValue","syncOpen","next","previous","showListbox","hideListbox","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","refresh","onSlotChange","Array","from","el","querySelectorAll","visible","filter","hasAttribute","getAttribute","chosen","find","textContent","trim","listbox","shadowRoot","querySelector","input","control","echoed","queryIsEchoedSelection","matches","matchesCommandQuery","removeAttribute","setAttribute","length","first","setActive","panel","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","width","minWidth","placePopover","undefined","style","hidePopover","onToggle","event","nowOpen","newState","focus","other","active","scrollIntoView","block","ariaActiveDescendantElement","commit","handleOptionSelect","stopPropagation","candidate","detail","move","action","enabledIndexes","getEnabledIndexes","current","indexOf","resolveListMove","onInput","target","clear","onKeyDown","key","preventDefault","Enter","render","describedBy","composeDescribedBy","showClear","h","Host","class","part","htmlFor","id","type","role","autocomplete","onClick","tabindex","onMouseDown","popover","onSlotchange"],"sources":["src/components/pf-combobox/pf-combobox.css?tag=pf-combobox&encapsulation=shadow","src/components/pf-combobox/pf-combobox.tsx"],"sourcesContent":["/*\n * The generic set pf-option reads, mapped to this control's own family — see\n * pf-option.css. The same option element is themed by whichever listbox it is\n * slotted into.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-combobox-text);\n  --pf-option-text-disabled: var(--pf-combobox-placeholder);\n  --pf-option-active-bg: var(--pf-combobox-option-active-bg);\n  --pf-option-active-text: var(--pf-combobox-option-active-text);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-combobox-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-combobox-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.control {\n  align-items: center;\n  background: var(--pf-combobox-bg);\n  border: 1px solid var(--pf-combobox-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  gap: var(--space-1);\n  padding-inline-end: var(--space-2);\n}\n\n.control:focus-within {\n  border-color: var(--pf-combobox-focus-border);\n  box-shadow: var(--pf-focus-ring);\n}\n\n.control--invalid {\n  border-color: var(--pf-combobox-invalid-border);\n}\n\n.input {\n  background: none;\n  border: 0;\n  color: var(--pf-combobox-text);\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  min-width: 0;\n  outline: none;\n  padding: var(--space-2) var(--space-3);\n}\n\n.input::placeholder {\n  color: var(--pf-combobox-placeholder);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.clear,\n.chevron {\n  align-items: center;\n  color: var(--pf-combobox-placeholder);\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n}\n\n.clear {\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  padding: var(--space-1);\n}\n\n.clear:hover {\n  color: var(--pf-combobox-text);\n}\n\n.chevron {\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n  transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n\n.description {\n  color: var(--pf-combobox-placeholder);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-combobox-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/* See src/place-popover.ts: the UA stylesheet centres a popover otherwise. */\n.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-combobox-menu-bg);\n  border: 1px solid var(--pf-combobox-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  max-height: min(60vh, 320px);\n  overflow-y: auto;\n  padding: var(--space-1);\n}\n\n.listbox:popover-open {\n  animation: pf-combobox-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-combobox-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .listbox:popover-open {\n    animation: none;\n  }\n}\n\n.empty {\n  color: var(--pf-combobox-placeholder);\n  font-size: var(--font-size-sm);\n  margin: 0;\n  padding: var(--space-3);\n  text-align: center;\n}\n","import {\n  composeDescribedBy,\n  getEnabledIndexes,\n  Keys,\n  matchesCommandQuery,\n  observeAnchoredPosition,\n  queryIsEchoedSelection,\n  resolveListMove,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n  [Keys.ArrowDown]: 'next',\n  [Keys.ArrowUp]: 'previous',\n  [Keys.Home]: 'first',\n  [Keys.End]: 'last',\n};\n\n/**\n * A form-associated combobox: an editable field that filters `pf-option`\n * children.\n *\n * It shares `pf-option` with `pf-select`, which is why the option reads a\n * generic `--pf-option-*` set that each container maps to its own family —\n * the same arrangement as `pf-menu-item` between the two menus.\n *\n * Filtering is core's `matchesCommandQuery`, and so is the rule that a query\n * which is only the chosen label echoed back does not filter: without it,\n * reopening the list to change your mind would show the one answer you already\n * had. Both shared with the React component, which is now rewired to them.\n *\n * Two things the React `Combobox` does not do, both gaps rather than choices:\n * Home and End, and arrows that wrap rather than stop at the ends — which is\n * what `pf-select` does, and one design system should not have two arrow\n * behaviours in neighbouring controls.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the input, clear button and chevron.\n * @part input - the editable field.\n * @part clear - the clear button.\n * @part listbox - the floating listbox the options are slotted into.\n * @part empty - the message shown when nothing matches.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-combobox',\n  styleUrl: 'pf-combobox.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfCombobox {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen option's value, or empty. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Search…';\n\n  /** Shown when the query matches nothing. */\n  @Prop() emptyMessage = 'No matches';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Offer a button that empties the field. */\n  @Prop() clearable = true;\n\n  /** Accessible name for that button. */\n  @Prop() clearLabel = 'Clear';\n\n  /** Fires when the chosen value changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** What the field holds, which is not the value until an option is chosen. */\n  @State() query = '';\n\n  @State() matchCount = 0;\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n    this.query = this.selectedLabel();\n    this.applyQuery();\n  }\n\n  componentDidRender() {\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** A value set from outside puts its label in the field and marks the option. */\n  @Watch('value')\n  syncSelection() {\n    for (const option of this.options()) {\n      (option as HTMLElement & { selected: boolean }).selected =\n        this.optionValue(option) === this.value && this.value !== '';\n    }\n    this.query = this.selectedLabel();\n    this.applyQuery();\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showListbox();\n    else this.hideListbox();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.query = this.selectedLabel();\n    this.applyQuery();\n  }\n\n  /** Re-reads the options, for a label edited in place (no `slotchange` fires). */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncSelection();\n  }\n\n  private onSlotChange = () => {\n    this.syncSelection();\n  };\n\n  private options(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n  }\n\n  private visible(): HTMLElement[] {\n    return this.options().filter((option) => !option.hasAttribute('hidden'));\n  }\n\n  /** The property, never the attribute: a binding may only have set the former. */\n  private optionValue(option: HTMLElement): string {\n    return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n  }\n\n  private selectedLabel(): string {\n    const chosen = this.options().find((option) => this.optionValue(option) === this.value);\n    return this.value && chosen ? (chosen.textContent?.trim() ?? '') : '';\n  }\n\n  private get listbox() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector<HTMLInputElement>('[part=\"input\"]') ?? null;\n  }\n\n  private get control() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"control\"]') ?? null;\n  }\n\n  /**\n   * Hides the options the query excludes.\n   *\n   * `hidden` plus `:host([hidden]) { display: none }` on the option, because\n   * the attribute alone loses to the option's own `display: block`.\n   */\n  private applyQuery() {\n    const echoed = queryIsEchoedSelection(this.query, this.selectedLabel());\n    const options = this.options();\n\n    for (const option of options) {\n      const matches =\n        echoed || matchesCommandQuery({ label: option.textContent?.trim() ?? '' }, this.query);\n      if (matches) option.removeAttribute('hidden');\n      else option.setAttribute('hidden', '');\n    }\n\n    const visible = this.visible();\n    this.matchCount = visible.length;\n\n    // A new query starts at the top of what is left.\n    const first = visible.find((option) => !option.hasAttribute('disabled')) ?? null;\n    if (!this.activeOption || this.activeOption.hasAttribute('hidden')) this.setActive(first);\n  }\n\n  private showListbox() {\n    const panel = this.listbox;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.control,\n      getFloating: () => panel,\n      matchAnchorWidth: true,\n      flip: true,\n      onChange: ({ left, top, width, minWidth }) => {\n        placePopover(panel, left, top);\n        if (width !== undefined) panel.style.width = `${width}px`;\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    this.applyQuery();\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.listbox;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /**\n   * A browser-driven close — light dismiss or Escape — reverts the field to\n   * the chosen label, so a half-typed query never lingers over a different\n   * value. Focus goes back to the input rather than the trigger, because here\n   * the input *is* the control.\n   */\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) {\n      this.query = this.selectedLabel();\n      this.applyQuery();\n      this.input?.focus();\n    }\n  };\n\n  private setActive(option: HTMLElement | null) {\n    for (const other of this.options()) {\n      if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n    }\n    if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n    this.activeOption = option;\n    this.syncActiveDescendant();\n    if (option && typeof option.scrollIntoView === 'function') {\n      option.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /**\n   * Set as an element, not an IDREF: the input is in this shadow root and the\n   * options are slotted light DOM, and a cross-root IDREF is absent from the\n   * accessibility tree — measured. Feature-detected, because where element\n   * reflection is missing there is no cross-root equivalent.\n   */\n  private syncActiveDescendant() {\n    const input = this.input;\n    if (!input || !('ariaActiveDescendantElement' in input)) return;\n    (\n      input as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n  }\n\n  private commit(option: HTMLElement) {\n    if (option.hasAttribute('disabled')) return;\n\n    const next = this.optionValue(option);\n    this.open = false;\n\n    if (next !== this.value) {\n      this.value = next;\n      this.pfChange.emit({ value: next });\n    }\n\n    // Set after the value, so it is the chosen label rather than the query.\n    this.query = this.selectedLabel();\n    this.applyQuery();\n    this.input?.focus();\n  }\n\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.commit(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const visible = this.visible();\n    const enabledIndexes = getEnabledIndexes(visible, (option) => option.hasAttribute('disabled'));\n    const current = this.activeOption ? visible.indexOf(this.activeOption) : -1;\n    const next = resolveListMove(action, enabledIndexes, current);\n    if (next !== -1) this.setActive(visible[next] ?? null);\n  }\n\n  private onInput = (event: Event) => {\n    this.query = (event.target as HTMLInputElement).value;\n    this.applyQuery();\n    if (!this.open) this.open = true;\n  };\n\n  private clear = () => {\n    this.query = '';\n    if (this.value !== '') {\n      this.value = '';\n      this.pfChange.emit({ value: '' });\n    }\n    this.applyQuery();\n    this.open = true;\n    this.input?.focus();\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const move = MOVES[event.key];\n    if (move) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else this.move(move);\n      return;\n    }\n\n    /*\n     * Enter only commits while the listbox is open. Closed, it is left alone\n     * so a combobox inside a form still submits it.\n     */\n    if (event.key === Keys.Enter && this.open && this.activeOption) {\n      event.preventDefault();\n      this.commit(this.activeOption);\n    }\n\n    // Escape is the browser's: `popover=\"auto\"` closes, and `onToggle` reverts.\n  };\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const showClear = this.clearable && !this.disabled && (this.query !== '' || this.value !== '');\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\n          <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n            <input\n              id=\"input\"\n              part=\"input\"\n              class=\"input\"\n              type=\"text\"\n              role=\"combobox\"\n              autocomplete=\"off\"\n              disabled={this.disabled}\n              required={this.required}\n              placeholder={this.placeholder}\n              value={this.query}\n              aria-autocomplete=\"list\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              /* Same shadow root as the listbox, so this IDREF resolves. */\n              aria-controls=\"listbox\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              onInput={this.onInput}\n              onKeyDown={this.onKeyDown}\n              onClick={() => {\n                if (!this.disabled) this.open = true;\n              }}\n            />\n\n            {showClear && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label={this.clearLabel}\n                /* Out of the tab order, so it never interrupts the keyboard flow. */\n                tabindex={-1}\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={this.clear}\n              >\n                <pf-icon name=\"circle-xmark\"></pf-icon>\n              </button>\n            )}\n\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"listbox\"\n          part=\"listbox\"\n          class=\"listbox\"\n          popover=\"auto\"\n          role=\"listbox\"\n          aria-label={this.label ?? this.placeholder}\n          onToggle={this.onToggle}\n        >\n          <slot onSlotchange={this.onSlotChange} />\n          {this.matchCount === 0 && (\n            <p class=\"empty\" part=\"empty\">\n              {this.emptyMessage}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-48b2d3f7.entry.js

@@ -0,0 +1,2 @@
+import{r,c as e,h as i,H as s}from"./p-Bm6UxEit.js";import{c as a}from"./p-DfpCerXM.js";import{n as t,a as d,b as l}from"./p-BA6CMosJ.js";import{a as o}from"./p-Cr6IXrUk.js";const n=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-slider-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-slider-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-slider-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.header{align-items:center;display:flex;justify-content:space-between}.value{color:var(--pf-slider-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.slider{appearance:none;background:linear-gradient(     to right,     var(--pf-slider-action) 0,     var(--pf-slider-action) var(--pf-slider-progress, 0%),     var(--pf-slider-border) var(--pf-slider-progress, 0%),     var(--pf-slider-border) 100%   );border-radius:var(--radius-full);cursor:pointer;height:var(--pf-slider-track-height);width:100%}.slider:focus{outline:none}.slider:focus-visible{box-shadow:var(--pf-slider-focus-ring, var(--pf-focus-ring))}.slider::-webkit-slider-thumb{appearance:none;background:var(--pf-slider-bg);border:2px solid var(--pf-slider-action);border-radius:50%;box-shadow:var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));height:var(--pf-slider-thumb-size);margin-top:calc((var(--pf-slider-track-height) - var(--pf-slider-thumb-size)) / 2);width:var(--pf-slider-thumb-size)}.slider::-moz-range-thumb{background:var(--pf-slider-bg);border:2px solid var(--pf-slider-action);border-radius:50%;box-shadow:var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));height:var(--pf-slider-thumb-size);width:var(--pf-slider-thumb-size)}.slider::-moz-range-track{background:transparent;border-radius:var(--radius-full);height:var(--pf-slider-track-height)}.slider:disabled{cursor:not-allowed;opacity:0.55}.slider--invalid{background:linear-gradient(     to right,     var(--pf-slider-danger-fill) 0,     var(--pf-slider-danger-fill) var(--pf-slider-progress, 0%),     var(--pf-slider-border) var(--pf-slider-progress, 0%),     var(--pf-slider-border) 100%   )}.slider--invalid::-webkit-slider-thumb{border-color:var(--pf-slider-danger-fill)}.slider--invalid::-moz-range-thumb{border-color:var(--pf-slider-danger-fill)}`;const p=class{constructor(i){r(this,i);this.pfInput=e(this,"pfInput");this.pfChange=e(this,"pfChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}internals;name;value=0;min=0;max=100;step=1;label;description;error;showValue=true;disabled=false;pfInput;pfChange;initialValue=0;componentWillLoad(){this.initialValue=this.value;this.syncFormState()}syncFormState(){this.internals.setFormValue(`${this.current}`);o(this.internals,true,false,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}get range(){return t(Number(this.min),Number(this.max),Number(this.step))}get current(){const{min:r,max:e}=this.range;return d(Number(this.value),r,e)}onInput=r=>{this.value=Number(r.target.value);this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.current})};render(){const{min:r,max:e,step:t}=this.range;const d=this.current;const o=a(this.description&&"description",this.error&&"error");return i(s,{key:"aa9f73bc61fc164df6b960827337c57c89f3e041"},i("div",{key:"6de203487f260a1025c2a49abeef29f3a9a1e250",class:"field",part:"field"},(this.label||this.showValue)&&i("div",{key:"c02c8be4fff2bb3eafbb45c8d19c777d79f984a4",class:"header",part:"header"},this.label?i("label",{class:"label",part:"label",htmlFor:"input"},this.label):i("span",null),this.showValue&&i("span",{key:"6638b3e9b626493e92c4dd76428a0ba2637956d6",class:"value",part:"value","aria-hidden":"true"},Math.round(d))),i("input",{key:"03a97800d5dabc7d17e6f1cd91b9884485cafb42",id:"input",part:"input",class:{slider:true,"slider--invalid":Boolean(this.error)},type:"range",name:this.name,value:`${d}`,min:`${r}`,max:`${e}`,step:`${t}`,disabled:this.disabled,"aria-invalid":this.error?"true":null,"aria-describedby":o,onInput:this.onInput,onChange:this.onChange,style:{"--pf-slider-progress":`${l(d,r,e)}%`}}),this.description&&i("p",{key:"0338224959bff19c234bfe07b8bf83027d85b17d",class:"description",part:"description",id:"description"},this.description),this.error&&i("p",{key:"f469ebcbb86d81d933c0b66f578f8990d2a4b9a5",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}],min:[{syncFormState:0}],max:[{syncFormState:0}]}}};p.style=n();export{p as pf_slider};
+//# sourceMappingURL=p-48b2d3f7.entry.js.map

package/dist/pitchfork/p-48b2d3f7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfSliderCss","PfSlider","internals","name","value","min","max","step","label","description","error","showValue","disabled","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","current","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","range","normalizeRange","Number","clampToRange","onInput","event","target","emit","onChange","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","Math","round","id","slider","Boolean","type","style","getRangePercent"],"sources":["src/components/pf-slider/pf-slider.css?tag=pf-slider&encapsulation=shadow","src/components/pf-slider/pf-slider.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-slider-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-slider-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-slider-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n}\n\n.value {\n  color: var(--pf-slider-text-muted);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.slider {\n  appearance: none;\n  background: linear-gradient(\n    to right,\n    var(--pf-slider-action) 0,\n    var(--pf-slider-action) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) 100%\n  );\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  height: var(--pf-slider-track-height);\n  width: 100%;\n}\n\n.slider:focus {\n  outline: none;\n}\n\n.slider:focus-visible {\n  box-shadow: var(--pf-slider-focus-ring, var(--pf-focus-ring));\n}\n\n.slider::-webkit-slider-thumb {\n  appearance: none;\n  background: var(--pf-slider-bg);\n  border: 2px solid var(--pf-slider-action);\n  border-radius: 50%;\n  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));\n  height: var(--pf-slider-thumb-size);\n  margin-top: calc((var(--pf-slider-track-height) - var(--pf-slider-thumb-size)) / 2);\n  width: var(--pf-slider-thumb-size);\n}\n\n.slider::-moz-range-thumb {\n  background: var(--pf-slider-bg);\n  border: 2px solid var(--pf-slider-action);\n  border-radius: 50%;\n  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));\n  height: var(--pf-slider-thumb-size);\n  width: var(--pf-slider-thumb-size);\n}\n\n.slider::-moz-range-track {\n  background: transparent;\n  border-radius: var(--radius-full);\n  height: var(--pf-slider-track-height);\n}\n\n.slider:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.slider--invalid {\n  background: linear-gradient(\n    to right,\n    var(--pf-slider-danger-fill) 0,\n    var(--pf-slider-danger-fill) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) 100%\n  );\n}\n\n.slider--invalid::-webkit-slider-thumb {\n  border-color: var(--pf-slider-danger-fill);\n}\n\n.slider--invalid::-moz-range-thumb {\n  border-color: var(--pf-slider-danger-fill);\n}\n","import {\n  clampToRange,\n  composeDescribedBy,\n  getRangePercent,\n  normalizeRange,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated range slider.\n *\n * A native `<input type=\"range\">`, as the React component is — the drag, the\n * keyboard stepping and the touch handling are all the browser's, and nothing\n * here reimplements them.\n *\n * @part field - the wrapper around header, control and messages.\n * @part header - the row holding the label and the readout.\n * @part label - the label element.\n * @part value - the numeric readout.\n * @part input - the native range 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-slider',\n  styleUrl: 'pf-slider.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfSlider {\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because a form-associated element\n   * takes its submission name from the attribute, not this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = 0;\n\n  @Prop() min = 0;\n\n  @Prop() max = 100;\n\n  @Prop() step = 1;\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\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  /** Show the current value beside the label. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires as the user drags, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: number }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: number }>;\n\n  /** The value a form reset restores, which is the initial attribute. */\n  private initialValue = 0;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('min')\n  @Watch('max')\n  syncFormState() {\n    this.internals.setFormValue(`${this.current}`);\n    /*\n     * A slider always has a value — it cannot be empty the way a text field\n     * can — so `required` would never fail and the element does not offer it.\n     * Only an explicit error can make this control invalid.\n     */\n    applyControlValidity(this.internals, true, false, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the control started with. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** The bounds, with a non-finite or inverted range made drawable. */\n  private get range() {\n    return normalizeRange(Number(this.min), Number(this.max), Number(this.step));\n  }\n\n  /** The value as rendered: always inside the bounds. */\n  private get current() {\n    const { min, max } = this.range;\n    return clampToRange(Number(this.value), min, max);\n  }\n\n  private onInput = (event: Event) => {\n    this.value = Number((event.target as HTMLInputElement).value);\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.current });\n  };\n\n  render() {\n    const { min, max, step } = this.range;\n    const current = this.current;\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 || this.showValue) && (\n            <div class=\"header\" part=\"header\">\n              {this.label ? (\n                <label class=\"label\" part=\"label\" htmlFor=\"input\">\n                  {this.label}\n                </label>\n              ) : (\n                <span />\n              )}\n              {this.showValue && (\n                // aria-hidden: the input already reports its value to\n                // assistive technology through the range role.\n                <span class=\"value\" part=\"value\" aria-hidden=\"true\">\n                  {Math.round(current)}\n                </span>\n              )}\n            </div>\n          )}\n\n          <input\n            id=\"input\"\n            part=\"input\"\n            class={{ slider: true, 'slider--invalid': Boolean(this.error) }}\n            type=\"range\"\n            name={this.name}\n            value={`${current}`}\n            min={`${min}`}\n            max={`${max}`}\n            step={`${step}`}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n            style={{ '--pf-slider-progress': `${getRangePercent(current, min, max)}%` }}\n          />\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,EAAc,IAAM,22E,MCyCbC,EAAQ,M,0PACAC,UAMMC,KAGAC,MAAQ,EAEzBC,IAAM,EAENC,IAAM,IAENC,KAAO,EAGPC,MAGAC,YAGAC,MAGiBC,UAAY,KAEZC,SAAW,MAG3BC,QAGAC,SAGDC,aAAe,EAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,MACzBa,KAAKC,e,CAOP,aAAAA,GACED,KAAKf,UAAUiB,aAAa,GAAGF,KAAKG,WAMpCC,EAAqBJ,KAAKf,UAAW,KAAM,MAAOe,KAAKP,M,CAKzD,mBAAMY,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CAIxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAIpB,SAAYY,GACV,OAAOC,EAAeC,OAAOZ,KAAKZ,KAAMwB,OAAOZ,KAAKX,KAAMuB,OAAOZ,KAAKV,M,CAIxE,WAAYa,GACV,MAAMf,IAAEA,EAAGC,IAAEA,GAAQW,KAAKU,MAC1B,OAAOG,EAAaD,OAAOZ,KAAKb,OAAQC,EAAKC,E,CAGvCyB,QAAWC,IACjBf,KAAKb,MAAQyB,OAAQG,EAAMC,OAA4B7B,OACvDa,KAAKJ,QAAQqB,KAAK,CAAE9B,MAAOa,KAAKb,OAAQ,EAGlC+B,SAAW,KACjBlB,KAAKH,SAASoB,KAAK,CAAE9B,MAAOa,KAAKG,SAAU,EAG7C,MAAAgB,GACE,MAAM/B,IAAEA,EAAGC,IAAEA,EAAGC,KAAEA,GAASU,KAAKU,MAChC,MAAMP,EAAUH,KAAKG,QACrB,MAAMiB,EAAcC,EAClBrB,KAAKR,aAAe,cACpBQ,KAAKP,OAAS,SAGhB,OACE6B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,UACpB1B,KAAKT,OAASS,KAAKN,YACnB4B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASC,KAAK,UACtB1B,KAAKT,MACJ+B,EAAA,SAAOG,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvC3B,KAAKT,OAGR+B,EAAA,aAEDtB,KAAKN,WAGJ4B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,QAAO,cAAa,QAC1CE,KAAKC,MAAM1B,KAMpBmB,EAAA,SAAAE,IAAA,2CACEM,GAAG,QACHJ,KAAK,QACLD,MAAO,CAAEM,OAAQ,KAAM,kBAAmBC,QAAQhC,KAAKP,QACvDwC,KAAK,QACL/C,KAAMc,KAAKd,KACXC,MAAO,GAAGgB,IACVf,IAAK,GAAGA,IACRC,IAAK,GAAGA,IACRC,KAAM,GAAGA,IACTK,SAAUK,KAAKL,SAAQ,eACTK,KAAKP,MAAQ,OAAS,KAAI,mBACtB2B,EAClBN,QAASd,KAAKc,QACdI,SAAUlB,KAAKkB,SACfgB,MAAO,CAAE,uBAAwB,GAAGC,EAAgBhC,EAASf,EAAKC,SAGnEW,KAAKR,aACJ8B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcI,GAAG,eAC1C9B,KAAKR,aAGTQ,KAAKP,OACJ6B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQI,GAAG,SAC9B9B,KAAKP,Q","ignoreList":[]}

package/dist/pitchfork/p-4959a556.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as i,H as o}from"./p-Bm6UxEit.js";import{l as s}from"./p-C-VLyxRR.js";const r=()=>`:host{display:contents}.dialog{background:none;border:0;display:none;height:100%;max-height:100%;max-width:100%;padding:0;width:100%}.dialog[open]{display:flex}:host([placement='right']) .dialog{justify-content:flex-end}:host([placement='left']) .dialog{justify-content:flex-start}.dialog::backdrop{background:var(--pf-slideoutmenu-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-slideout-bg);border-color:var(--pf-slideout-border);border-style:solid;border-width:0;box-shadow:var(--pf-slideoutmenu-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));color:var(--pf-slideout-text);display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;max-width:100%}:host([placement='right']) .panel{border-left-width:1px}:host([placement='left']) .panel{border-right-width:1px}:host([size='sm']) .panel{width:min(420px, 100vw)}:host([size='md']) .panel{width:min(520px, 100vw)}:host([size='lg']) .panel{width:min(680px, 100vw)}:host([placement='right']) .dialog[open] .panel{animation:pf-slideout-in-right var(--pf-transition-slow)}:host([placement='left']) .dialog[open] .panel{animation:pf-slideout-in-left var(--pf-transition-slow)}@keyframes pf-slideout-in-right{from{transform:translateX(100%)}}@keyframes pf-slideout-in-left{from{transform:translateX(-100%)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}.header,.footer{align-items:flex-start;display:flex;gap:var(--space-3);justify-content:space-between;padding:var(--space-3)}.footer[hidden]{display:none}.header{border-bottom:1px solid var(--pf-slideout-border)}.footer{border-top:1px solid var(--pf-slideout-border);justify-content:flex-end}.body{overflow-y:auto;padding:var(--space-3)}@media (min-width: 768px){.header,.body,.footer{padding:var(--space-4)}}.headings{display:grid;gap:var(--space-1);min-width:0}.title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:1.2;margin:0}.description{color:var(--pf-slideout-text-muted);font-size:var(--font-size-sm);line-height:1.45;margin:0}.close{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-slideout-text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:var(--space-8);justify-content:center;width:var(--space-8)}.close:hover{background:var(--pf-slideout-bg-subtle);color:var(--pf-slideout-text)}.close:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}`;const d=class{constructor(a){e(this,a);this.pfOpenChange=t(this,"pfOpenChange")}get el(){return a(this)}open=false;placement="right";size="md";heading;description;label;dismissable=true;showCloseButton=true;pfOpenChange;hasFooter=false;releaseScroll=null;componentWillLoad(){this.readFooter()}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})}readFooter(){this.hasFooter=Array.from(this.el.children).some((e=>e.getAttribute("slot")==="footer"))}get dialog(){return this.el.shadowRoot?.querySelector("dialog")??null}lockScroll(){if(this.releaseScroll)return;this.releaseScroll=s()}unlockScroll(){this.releaseScroll?.();this.releaseScroll=null}showDialog(){const e=this.dialog;if(!e||e.open)return;e.showModal();this.lockScroll()}closeDialog(){const e=this.dialog;this.unlockScroll();if(e?.open)e.close()}onCancel=e=>{if(!this.dismissable)e.preventDefault()};onClose=()=>{this.unlockScroll();if(this.open)this.open=false};onDialogClick=e=>{if(!this.dismissable||e.target!==this.dialog)return;this.open=false};render(){const e=Boolean(this.heading||this.description||this.showCloseButton);return i(o,{key:"1818b5812da54d3fd832824588a674c3cddc542a"},i("dialog",{key:"34e55f45a666da9c9da86f026f717122f2d8106a",part:"dialog",class:"dialog","aria-label":this.heading?undefined:this.label,"aria-labelledby":this.heading?"title":undefined,"aria-describedby":this.description?"description":undefined,onCancel:this.onCancel,onClose:this.onClose,onClick:this.onDialogClick},i("div",{key:"537eb70dd6bbb7c88dc8ec2e2403bf753d2b23e4",class:"panel",part:"panel"},e&&i("header",{key:"99d780e46350c08f9f47301105fa59a5ef0ea01f",class:"header",part:"header"},i("div",{key:"2e9619701ec5045edb9db1193b21c554bc48b545",class:"headings"},this.heading&&i("h2",{key:"3d78f7c7a157b0ab462cef6aa33ba603feb80539",class:"title",part:"title",id:"title"},this.heading),this.description&&i("p",{key:"dc947237348920e95daf0dd7766ef8f5555e10e1",class:"description",part:"description",id:"description"},this.description)),this.showCloseButton&&i("button",{key:"11a0b9306d9c9a8ff93f54c464ae29c28c5fdc4b",class:"close",part:"close",type:"button","aria-label":"Close",onClick:()=>this.hide()},i("svg",{key:"a4f0e7897b9610dc1afc52fcdc848cf3c4e8995c",viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",focusable:"false"},i("path",{key:"28aff0cc434f02d2d94352192255a25ce0c2bf18",d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.6","stroke-linecap":"round",fill:"none"})))),i("div",{key:"865a0cb08a8f9a67480adfeaff37315d410f0369",class:"body",part:"body"},i("slot",{key:"96288f62c6e01624c8f2a091d2c6580a1939e9f5"})),i("footer",{key:"a9279652bce34ab82016ecb5d8381148c8ac53b1",class:"footer",part:"footer",hidden:!this.hasFooter},i("slot",{key:"34f493c7ed5b3c094e3c11843461ee1dc4295c4e",name:"footer",onSlotchange:()=>this.readFooter()})))))}static get watchers(){return{open:[{syncOpen:0}]}}};d.style=r();export{d as pf_slideout_menu};
+//# sourceMappingURL=p-4959a556.entry.js.map

package/dist/pitchfork/p-4959a556.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfSlideoutMenuCss","PfSlideoutMenu","open","placement","size","heading","description","label","dismissable","showCloseButton","pfOpenChange","hasFooter","releaseScroll","componentWillLoad","this","readFooter","componentDidLoad","showDialog","disconnectedCallback","unlockScroll","show","hide","syncOpen","next","previous","closeDialog","emit","Array","from","el","children","some","child","getAttribute","dialog","shadowRoot","querySelector","lockScroll","lockPageScroll","showModal","close","onCancel","event","preventDefault","onClose","onDialogClick","target","render","hasHeader","Boolean","h","Host","key","part","class","undefined","onClick","id","type","viewBox","width","height","focusable","d","stroke","fill","hidden","name","onSlotchange"],"sources":["src/components/pf-slideout-menu/pf-slideout-menu.css?tag=pf-slideout-menu&encapsulation=shadow","src/components/pf-slideout-menu/pf-slideout-menu.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/*\n * The dialog is the overlay: it fills the viewport and pins the panel to one\n * edge, so a click that lands on it rather than on the panel is an overlay\n * click. The explicit sizing is what overrides the UA's `margin: auto` and\n * `width: fit-content` for a `<dialog>`.\n */\n.dialog {\n  background: none;\n  border: 0;\n  display: none;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  padding: 0;\n  width: 100%;\n}\n\n.dialog[open] {\n  display: flex;\n}\n\n:host([placement='right']) .dialog {\n  justify-content: flex-end;\n}\n\n:host([placement='left']) .dialog {\n  justify-content: flex-start;\n}\n\n.dialog::backdrop {\n  background: var(--pf-slideoutmenu-overlay-backdrop, var(--pf-overlay-backdrop));\n}\n\n.panel {\n  background: var(--pf-slideout-bg);\n  border-color: var(--pf-slideout-border);\n  border-style: solid;\n  border-width: 0;\n  box-shadow: var(--pf-slideoutmenu-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));\n  color: var(--pf-slideout-text);\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  max-width: 100%;\n}\n\n:host([placement='right']) .panel {\n  border-left-width: 1px;\n}\n\n:host([placement='left']) .panel {\n  border-right-width: 1px;\n}\n\n:host([size='sm']) .panel {\n  width: min(420px, 100vw);\n}\n\n:host([size='md']) .panel {\n  width: min(520px, 100vw);\n}\n\n:host([size='lg']) .panel {\n  width: min(680px, 100vw);\n}\n\n/*\n * Its own copy of each: @keyframes do not cross a shadow boundary, so the\n * global sheet's definitions are invisible in here.\n */\n:host([placement='right']) .dialog[open] .panel {\n  animation: pf-slideout-in-right var(--pf-transition-slow);\n}\n\n:host([placement='left']) .dialog[open] .panel {\n  animation: pf-slideout-in-left var(--pf-transition-slow);\n}\n\n@keyframes pf-slideout-in-right {\n  from {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes pf-slideout-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialog[open] .panel {\n    animation: none;\n  }\n}\n\n.header,\n.footer {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--space-3);\n  justify-content: space-between;\n  padding: var(--space-3);\n}\n\n/* `hidden` has to beat the `display: flex` above, or an empty footer shows. */\n.footer[hidden] {\n  display: none;\n}\n\n.header {\n  border-bottom: 1px solid var(--pf-slideout-border);\n}\n\n.footer {\n  border-top: 1px solid var(--pf-slideout-border);\n  justify-content: flex-end;\n}\n\n.body {\n  overflow-y: auto;\n  padding: var(--space-3);\n}\n\n@media (--md) {\n  .header,\n  .body,\n  .footer {\n    padding: var(--space-4);\n  }\n}\n\n.headings {\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.title {\n  font-size: var(--font-size-lg);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.2;\n  margin: 0;\n}\n\n.description {\n  color: var(--pf-slideout-text-muted);\n  font-size: var(--font-size-sm);\n  line-height: 1.45;\n  margin: 0;\n}\n\n.close {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-slideout-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n  height: var(--space-8);\n  justify-content: center;\n  width: var(--space-8);\n}\n\n.close:hover {\n  background: var(--pf-slideout-bg-subtle);\n  color: var(--pf-slideout-text);\n}\n\n.close:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n","import { lockPageScroll } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type PfSlideoutMenuPlacement = 'left' | 'right';\nexport type PfSlideoutMenuSize = 'sm' | 'md' | 'lg';\n\n/**\n * A panel that slides in from the edge of the screen — a modal dialog that\n * happens to be anchored to a side rather than centred.\n *\n * Which is why this is a native `<dialog>` opened with `showModal()`, exactly\n * as `pf-modal` is. The React component hand-rolls the whole modal contract:\n * a focus trap over `getFocusableElements`, a `focusin` listener to pull focus\n * back, Escape handling, an overlay element, and focus restoration on close —\n * about ninety lines. `showModal()` gives all of it, and the element needs\n * none of core's `trapFocus`.\n *\n * The one thing it does not give is a page-scroll lock, so that comes from\n * core's reference-counted `lockPageScroll`.\n *\n * @slot - the panel's body.\n * @slot footer - actions pinned below the body.\n * @part dialog - the native dialog, which is also the overlay.\n * @part panel - the sliding panel.\n * @part header - the header row, present only when there is a heading.\n * @part title - the heading.\n * @part description - the supporting line under the heading.\n * @part body - the scrolling region the default slot renders into.\n * @part footer - the footer region.\n * @part close - the close button.\n */\n@Component({\n  tag: 'pf-slideout-menu',\n  styleUrl: 'pf-slideout-menu.css',\n  shadow: true,\n})\nexport class PfSlideoutMenu {\n  @Element() el!: HTMLElement;\n\n  /** Whether the panel is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge it slides in from. Reflected; the stylesheet positions on it. */\n  @Prop({ reflect: true }) placement: PfSlideoutMenuPlacement = 'right';\n\n  /** Panel width. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfSlideoutMenuSize = 'md';\n\n  /** The heading shown in the header. */\n  @Prop() heading?: string;\n\n  /** A supporting line under the heading. */\n  @Prop() description?: string;\n\n  /**\n   * Accessible name, for when there is no `heading` to name it.\n   *\n   * With a heading, `aria-labelledby` is used instead and points at the\n   * heading's id. That works here and not in `pf-modal` because this heading\n   * is a prop rendered into this element's own shadow root, so the IDREF never\n   * crosses a boundary — `pf-modal`'s header is slotted light DOM, which is\n   * why it has to fall back to copying text into `aria-label`.\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 panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /**\n   * Whether anything is slotted into the footer.\n   *\n   * Asked in JS rather than selected in CSS because a wrapper holding a\n   * `<slot>` cannot be collapsed by a `:not(:has(*))` rule — the slot element\n   * is itself a child, so the rule never matches, measured. An empty footer\n   * carries a border and padding, so it has to actually not render.\n   */\n  @State() hasFooter = false;\n\n  private releaseScroll: (() => void) | null = null;\n\n  /*\n   * Read on the way in as well as on `slotchange`, so the first paint is\n   * right: the mock DOM never fires `slotchange`, and nor does the browser\n   * before the first assignment.\n   */\n  componentWillLoad() {\n    this.readFooter();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  disconnectedCallback() {\n    // Removed while open, the page would otherwise stay unscrollable.\n    this.unlockScroll();\n  }\n\n  /** Opens the panel. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the panel. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place a state change is announced, whatever caused it. Emitting\n   * from the `close` handler instead fires for the browser-driven path and for\n   * none of the user-driven ones, because by then the element has already\n   * moved its own `open` and the guard sees no change.\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  /**\n   * Counts element children rather than `assignedNodes`, because this runs in\n   * `componentWillLoad` too, before there is a shadow root to ask.\n   */\n  private readFooter() {\n    this.hasFooter = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'footer',\n    );\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  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\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 panel stays put. */\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) event.preventDefault();\n  };\n\n  /** Mirrors a browser-driven close back into `open`, which announces it. */\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /**\n   * A click on the dialog itself is a click on the overlay: the panel is an\n   * 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  render() {\n    const hasHeader = Boolean(this.heading || this.description || this.showCloseButton);\n\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.heading ? undefined : this.label}\n          aria-labelledby={this.heading ? 'title' : undefined}\n          aria-describedby={this.description ? 'description' : undefined}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\">\n            {hasHeader && (\n              <header class=\"header\" part=\"header\">\n                <div class=\"headings\">\n                  {this.heading && (\n                    <h2 class=\"title\" part=\"title\" id=\"title\">\n                      {this.heading}\n                    </h2>\n                  )}\n                  {this.description && (\n                    <p class=\"description\" part=\"description\" id=\"description\">\n                      {this.description}\n                    </p>\n                  )}\n                </div>\n\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              </header>\n            )}\n\n            <div class=\"body\" part=\"body\">\n              <slot />\n            </div>\n\n            {/*\n              Always rendered, hidden when empty rather than omitted: a slot\n              that is not in the tree never fires `slotchange`, so omitting it\n              would make a footer added later stay invisible for good.\n            */}\n            <footer class=\"footer\" part=\"footer\" hidden={!this.hasFooter}>\n              <slot name=\"footer\" onSlotchange={() => this.readFooter()} />\n            </footer>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-4b05851a.entry.js

@@ -0,0 +1,2 @@
+import{r as t,a as o,h as r,H as i}from"./p-Bm6UxEit.js";import{r as a}from"./p-CAz7-p8y.js";import{s as e,g as s,r as n}from"./p-Fiuz9ck7.js";import"./p-g4FlTDZx.js";const c=()=>`:host{align-items:center;background:var(--pf-toolbar-bg);border:1px solid var(--pf-toolbar-border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding:var(--space-1)}:host([hidden]){display:none}:host([orientation='horizontal']){flex-direction:row}:host([orientation='vertical']){align-items:stretch;flex-direction:column;width:fit-content}`;const d=class{constructor(o){t(this,o)}get el(){return o(this)}orientation="horizontal";componentDidLoad(){this.sync()}sync(){e(s(this.el));for(const t of Array.from(this.el.querySelectorAll("pf-toolbar-separator"))){t.setAttribute("orientation",this.orientation)}}handleFocusIn(t){e(s(this.el),t.target)}handleKeyDown(t){if(t.defaultPrevented)return;const o=n(t.key,this.orientation);if(!o)return;const r=s(this.el);const i=r.indexOf(document.activeElement);if(i===-1)return;const e=a(o,r.map(((t,o)=>o)),i);if(e>=0){t.preventDefault();r[e].focus()}}render(){return r(i,{key:"f0a26b6f3d74719af7dbefc0eb21a957502427f6",role:"toolbar","aria-orientation":this.orientation},r("slot",{key:"0e557bef8da2b0e344541975284be29d647dec34",onSlotchange:()=>this.sync()}))}static get watchers(){return{orientation:[{sync:0}]}}};d.style=c();export{d as pf_toolbar};
+//# sourceMappingURL=p-4b05851a.entry.js.map

package/dist/pitchfork/p-4b05851a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfToolbarCss","PfToolbar","orientation","componentDidLoad","this","sync","syncRovingTabIndex","getRovingItems","el","separator","Array","from","querySelectorAll","setAttribute","handleFocusIn","event","target","handleKeyDown","defaultPrevented","action","resolveRovingKey","key","items","currentIndex","indexOf","document","activeElement","nextIndex","resolveListMove","map","_","index","preventDefault","focus","render","h","Host","role","onSlotchange"],"sources":["src/components/pf-toolbar/pf-toolbar.css?tag=pf-toolbar&encapsulation=shadow","src/components/pf-toolbar/pf-toolbar.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  background: var(--pf-toolbar-bg);\n  border: 1px solid var(--pf-toolbar-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex-direction: row;\n}\n\n:host([orientation='vertical']) {\n  align-items: stretch;\n  flex-direction: column;\n  width: fit-content;\n}\n","import {\n  getRovingItems,\n  resolveListMove,\n  resolveRovingKey,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\nexport type PfToolbarOrientation = 'horizontal' | 'vertical';\n\n/**\n * A group of controls that is one tab stop from outside and navigated\n * internally with the arrow keys.\n *\n * Items are matched in the light DOM, so a native `button`, `a[href]` or form\n * control works with no ceremony. A custom element is not a native control and\n * has to opt in with `data-toolbar-item` — `<pf-button data-toolbar-item>`.\n * Focusing it still reaches the real button inside, because `pf-button`\n * delegates focus.\n *\n * @slot - the toolbar's controls, and any `pf-toolbar-separator` between them.\n */\n@Component({\n  tag: 'pf-toolbar',\n  styleUrl: 'pf-toolbar.css',\n  shadow: true,\n})\nexport class PfToolbar {\n  @Element() el!: HTMLElement;\n\n  /** Layout and arrow-key axis. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfToolbarOrientation = 'horizontal';\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * A separator cannot see which way its toolbar runs: `:host-context()` is the\n   * only selector that would reach out of its shadow root, and it is not\n   * supported in Firefox or Safari. So the toolbar pushes its own orientation\n   * down instead, which also means a consumer never has to set it twice.\n   */\n  @Watch('orientation')\n  sync() {\n    syncRovingTabIndex(getRovingItems(this.el));\n\n    for (const separator of Array.from(this.el.querySelectorAll('pf-toolbar-separator'))) {\n      separator.setAttribute('orientation', this.orientation);\n    }\n  }\n\n  /**\n   * Keeps the tab stop on whatever the user actually focused, however they got\n   * there — a click, a Tab from outside, or a script.\n   *\n   * `focusin` rather than `focus` because it bubbles, and it crosses a shadow\n   * boundary with its target retargeted to the host, which is exactly the\n   * element in the item list.\n   */\n  @Listen('focusin')\n  handleFocusIn(event: FocusEvent) {\n    syncRovingTabIndex(getRovingItems(this.el), event.target as HTMLElement);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, this.orientation);\n    if (!action) return;\n\n    const items = getRovingItems(this.el);\n    // activeElement reports the shallowest host, which is the item itself even\n    // when focus has been delegated into its shadow root.\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    if (currentIndex === -1) return;\n\n    const nextIndex = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex >= 0) {\n      event.preventDefault();\n      items[nextIndex].focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"toolbar\" aria-orientation={this.orientation}>\n        <slot onSlotchange={() => this.sync()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAe,IAAM,0W,MC2BdC,EAAS,M,iDAIKC,YAAoC,aAE7D,gBAAAC,GACEC,KAAKC,M,CAUP,IAAAA,GACEC,EAAmBC,EAAeH,KAAKI,KAEvC,IAAK,MAAMC,KAAaC,MAAMC,KAAKP,KAAKI,GAAGI,iBAAiB,yBAA0B,CACpFH,EAAUI,aAAa,cAAeT,KAAKF,Y,EAa/C,aAAAY,CAAcC,GACZT,EAAmBC,EAAeH,KAAKI,IAAKO,EAAMC,O,CAIpD,aAAAC,CAAcF,GACZ,GAAIA,EAAMG,iBAAkB,OAE5B,MAAMC,EAASC,EAAiBL,EAAMM,IAAKjB,KAAKF,aAChD,IAAKiB,EAAQ,OAEb,MAAMG,EAAQf,EAAeH,KAAKI,IAGlC,MAAMe,EAAeD,EAAME,QAAQC,SAASC,eAC5C,GAAIH,KAAiB,EAAI,OAEzB,MAAMI,EAAYC,EAChBT,EACAG,EAAMO,KAAI,CAACC,EAAGC,IAAUA,IACxBR,GAEF,GAAII,GAAa,EAAG,CAClBZ,EAAMiB,iBACNV,EAAMK,GAAWM,O,EAIrB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAf,IAAA,2CAACgB,KAAK,UAAS,mBAAmBjC,KAAKF,aAC1CiC,EAAA,QAAAd,IAAA,2CAAMiB,aAAc,IAAMlC,KAAKC,S","ignoreList":[]}

package/dist/pitchfork/p-4b16ef92.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as i,H as s}from"./p-Bm6UxEit.js";import{m as n}from"./p-Dkd7BUB5.js";import{K as o}from"./p-g4FlTDZx.js";import{g as r,r as l}from"./p-CAz7-p8y.js";import{l as d}from"./p-C-VLyxRR.js";const c=()=>`:host{display:contents}.dialog{align-items:flex-start;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}@media (min-width: 768px){.dialog{padding-top:10vh}}.dialog::backdrop{background:var(--pf-commandpalette-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-command-bg);border:1px solid var(--pf-command-border);border-radius:var(--radius-lg);box-shadow:var(--pf-commandpalette-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));color:var(--pf-command-text);display:grid;grid-template-rows:auto minmax(0, 1fr);max-height:100%;overflow:hidden;width:min(560px, 100%)}.dialog[open] .panel{animation:pf-command-panel-in var(--pf-transition-enter)}@keyframes pf-command-panel-in{from{opacity:0;transform:translateY(-8px) scale(0.98)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}.search{align-items:center;border-bottom:1px solid var(--pf-command-border);display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.search-icon{color:var(--pf-command-text-muted);flex-shrink:0}.input{background:none;border:0;color:var(--pf-command-text);flex:1;font-family:inherit;font-size:var(--font-size-md);min-width:0;outline:none;padding:0}.input::placeholder{color:var(--pf-command-text-muted)}.hint{flex-shrink:0}.list{overflow-y:auto;padding:var(--space-2)}.empty{color:var(--pf-command-text-muted);font-size:var(--font-size-sm);margin:0;padding:var(--space-4) var(--space-3);text-align:center}`;const p=(e,t)=>{if(t)e.setAttribute("hidden","");else e.removeAttribute("hidden")};const h=class{constructor(a){e(this,a);this.pfOpenChange=t(this,"pfOpenChange");this.pfSelect=t(this,"pfSelect")}get el(){return a(this)}open=false;placeholder="Search commands…";emptyMessage="No results found.";label="Command palette";dismissable=true;pfOpenChange;pfSelect;query="";matchCount=0;releaseScroll=null;activeItem=null;componentWillLoad(){this.applyQuery()}componentDidLoad(){if(this.open)this.showDialog()}componentDidRender(){this.syncActiveDescendant()}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})}handleCommandSelect(e){e.stopPropagation();this.pfSelect.emit({value:e.detail.value});this.open=false}onSlotChange=()=>{this.applyQuery()};async refresh(){this.applyQuery()}get dialog(){return this.el.shadowRoot?.querySelector("dialog")??null}get input(){return this.el.shadowRoot?.querySelector("input")??null}items(){return Array.from(this.el.querySelectorAll("pf-command-item"))}visibleItems(){return this.items().filter((e=>!e.hasAttribute("hidden")))}lockScroll(){if(this.releaseScroll)return;this.releaseScroll=d()}unlockScroll(){this.releaseScroll?.();this.releaseScroll=null}showDialog(){const e=this.dialog;if(!e||e.open)return;e.showModal();this.lockScroll();this.query="";this.applyQuery();requestAnimationFrame((()=>this.input?.focus()))}closeDialog(){const e=this.dialog;this.unlockScroll();if(e?.open)e.close()}onCancel=e=>{if(!this.dismissable)e.preventDefault()};onClose=()=>{this.unlockScroll();if(this.open)this.open=false};onDialogClick=e=>{if(!this.dismissable||e.target!==this.dialog)return;this.open=false};onInput=e=>{this.query=e.target.value;this.applyQuery()};applyQuery(){const e=this.query;for(const t of this.items()){const a=t.closest("pf-command-group");const i=n({label:t.textContent?.trim()??"",description:t.getAttribute("description"),group:a?.getAttribute("label")??null},e);p(t,!i)}for(const e of Array.from(this.el.querySelectorAll("pf-command-group"))){const t=e.querySelectorAll("pf-command-item:not([hidden])").length;p(e,t===0)}const t=this.visibleItems();this.matchCount=t.length;this.setActive(t.find((e=>!e.hasAttribute("disabled")))??null)}setActive(e){if(this.activeItem&&this.activeItem!==e){this.activeItem.removeAttribute("aria-selected")}this.activeItem=e;e?.setAttribute("aria-selected","true");this.syncActiveDescendant();if(e&&typeof e.scrollIntoView==="function"){e.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const e=this.input;if(!e||!("ariaActiveDescendantElement"in e))return;e.ariaActiveDescendantElement=this.activeItem}move(e){const t=this.visibleItems();const a=r(t,(e=>e.hasAttribute("disabled")));const i=this.activeItem?t.indexOf(this.activeItem):-1;const s=l(e,a,i);if(s!==-1)this.setActive(t[s]??null)}runActive(){const e=this.activeItem;if(!e||e.hasAttribute("disabled"))return;const t=e.value;this.pfSelect.emit({value:t??e.getAttribute("value")??""});this.open=false}onKeyDown=e=>{const t={[o.ArrowDown]:"next",[o.ArrowUp]:"previous",[o.Home]:"first",[o.End]:"last"};const a=t[e.key];if(a){e.preventDefault();this.move(a);return}if(e.key===o.Enter){e.preventDefault();this.runActive()}};render(){const e=this.matchCount===0;return i(s,{key:"14df0ee38242c1ba49d494ee1147d86cd64e4de7"},i("dialog",{key:"027c426b6cd73ad22cddba96c28333d69b105278",part:"dialog",class:"dialog","aria-label":this.label,onCancel:this.onCancel,onClose:this.onClose,onClick:this.onDialogClick},i("div",{key:"1b4356fa25736a00d91bf5166d22443338be1030",class:"panel",part:"panel",onKeyDown:this.onKeyDown},i("div",{key:"4676d0175b1669e7d2ae9e8f27f2cecb964d3add",class:"search"},i("pf-icon",{key:"1e5d5c8a7b19468e46941eca84a622144d0475b5",name:"magnifying-glass",class:"search-icon"}),i("input",{key:"6dba34b19089a31e17ae4b5516362e5b11c8dd28",part:"input",class:"input",type:"text",role:"combobox",autocomplete:"off",spellcheck:false,"aria-autocomplete":"list","aria-expanded":"true","aria-label":this.placeholder,placeholder:this.placeholder,value:this.query,onInput:this.onInput}),i("pf-kbd",{key:"95147d6a01d46da45fac53795d64adaebcf88b87",class:"hint"},"esc")),i("div",{key:"5472730ca3196d9cbb1459da99e199ffdd601db7",class:"list",part:"list",role:"listbox","aria-label":this.label},i("slot",{key:"bd5a204461aafd49f4e1af9864daac3cdfe12d33",onSlotchange:this.onSlotChange}),e&&i("p",{key:"7c092f8c728c0b716c28b8b0a94407f979874e5b",class:"empty",part:"empty"},this.emptyMessage)))))}static get watchers(){return{open:[{syncOpen:0}]}}};h.style=c();export{h as pf_command_palette};
+//# sourceMappingURL=p-4b16ef92.entry.js.map