@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

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

package/dist/components/pf-combobox.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as i,c as o,h as s,a as r}from"./index.js";import{o as a,p as n}from"./p-CC7AyfOt.js";import{c}from"./p-DfpCerXM.js";import{q as l,m as h}from"./p-Dkd7BUB5.js";import{K as d}from"./p-g4FlTDZx.js";import{g as p,r as f}from"./p-CAz7-p8y.js";import{a as b}from"./p-Cr6IXrUk.js";import{c as u}from"./p-Cy_kHPeC.js";import{d as m}from"./p-CkFjPRTe.js";const v=()=>`: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 y={[d.ArrowDown]:"next",[d.ArrowUp]:"previous",[d.Home]:"first",[d.End]:"last"};const x=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=o(this,"pfChange");this.pfOpenChange=o(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return 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);b(this.internals,Boolean(this.value),this.required,this.error)}syncSelection(){for(const e of this.options()){e.selected=this.optionValue(e)===this.value&&this.value!==""}this.query=this.selectedLabel();this.applyQuery()}syncOpen(e,t){if(e)this.showListbox();else this.hideListbox();if(e!==t)this.pfOpenChange.emit({open:e})}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((e=>!e.hasAttribute("hidden")))}optionValue(e){return e.value??e.getAttribute("value")??""}selectedLabel(){const e=this.options().find((e=>this.optionValue(e)===this.value));return this.value&&e?e.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 e=l(this.query,this.selectedLabel());const t=this.options();for(const i of t){const t=e||h({label:i.textContent?.trim()??""},this.query);if(t)i.removeAttribute("hidden");else i.setAttribute("hidden","")}const i=this.visible();this.matchCount=i.length;const o=i.find((e=>!e.hasAttribute("disabled")))??null;if(!this.activeOption||this.activeOption.hasAttribute("hidden"))this.setActive(o)}showListbox(){const e=this.listbox;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.control,getFloating:()=>e,matchAnchorWidth:true,flip:true,onChange:({left:t,top:i,width:o,minWidth:s})=>{n(e,t,i);if(o!==undefined)e.style.width=`${o}px`;if(s!==undefined)e.style.minWidth=`${s}px`}});this.applyQuery()}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;const e=this.listbox;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t){this.query=this.selectedLabel();this.applyQuery();this.input?.focus()}};setActive(e){for(const t of this.options()){if(t!==e)t.active=false}if(e)e.active=true;this.activeOption=e;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.open?this.activeOption:null}commit(e){if(e.hasAttribute("disabled"))return;const t=this.optionValue(e);this.open=false;if(t!==this.value){this.value=t;this.pfChange.emit({value:t})}this.query=this.selectedLabel();this.applyQuery();this.input?.focus()}handleOptionSelect(e){e.stopPropagation();if(this.disabled)return;const t=this.options().find((t=>this.optionValue(t)===e.detail.value));if(t)this.commit(t)}move(e){const t=this.visible();const i=p(t,(e=>e.hasAttribute("disabled")));const o=this.activeOption?t.indexOf(this.activeOption):-1;const s=f(e,i,o);if(s!==-1)this.setActive(t[s]??null)}onInput=e=>{this.query=e.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=e=>{if(this.disabled)return;const t=y[e.key];if(t){e.preventDefault();if(!this.open)this.open=true;else this.move(t);return}if(e.key===d.Enter&&this.open&&this.activeOption){e.preventDefault();this.commit(this.activeOption)}};render(){const e=c(this.description&&"description",this.error&&"error");const t=this.clearable&&!this.disabled&&(this.query!==""||this.value!=="");return s(r,{key:"4a948db9316e8174c9c7592afb9912deb59eecdd"},s("div",{key:"ac5e469f9c00ec843fdb7a485cb3cbe9ddc08573",class:"field",part:"field"},this.label&&s("label",{key:"eb610c213cfe510c229f5ffa81e9761bf7303476",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&s("span",{key:"d942137e81be6007aafe2e1dfc43e97e2ab8af59",class:"required","aria-hidden":"true"},"*")),s("div",{key:"b9f4806e7882e5dc2c64abe87f48bb925173d7dc",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},s("input",{key:"9a10cc81ff212f3e279cfcc311886756d7ca76f1",id:"input","aria-label":u(this.el,this.label),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":e,onInput:this.onInput,onKeyDown:this.onKeyDown,onClick:()=>{if(!this.disabled)this.open=true}}),t&&s("button",{key:"bc9f8df667df57cbede3aa00a4119f6591faeb7d",class:"clear",part:"clear",type:"button","aria-label":this.clearLabel,tabindex:-1,onMouseDown:e=>e.preventDefault(),onClick:this.clear},s("pf-icon",{key:"580dab29c2631f79b7a611f7dd95a81fc5cffda2",name:"circle-xmark"})),s("span",{key:"06d06d1fcbae5937632cf2451ab97d42d1410c91",class:"chevron","aria-hidden":"true"},s("pf-icon",{key:"d30dd0a5d008cec99c1ec8fd25acc7fdfbdd68db",name:"chevron-down"}))),this.description&&s("p",{key:"09873008049536bb2eab61825ae95a2d92e3952a",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"ee43b1e024ff0e6e052054278680e04651b55421",class:"error",part:"error",id:"error"},this.error)),s("div",{key:"5b221c6566bc6dd29dc3a5d9ee5268ec65fa296e",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-label":this.label??this.placeholder,onToggle:this.onToggle},s("slot",{key:"645c56c8dd776ddd013be68c2bfc544f35c05b35",onSlotchange:this.onSlotChange}),this.matchCount===0&&s("p",{key:"9a3aac572c41177b41be06f9986d0718756c7de3",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}]}}static get style(){return v()}},[833,"pf-combobox",{name:[513],value:[1537],open:[1540],label:[1],description:[1],error:[1],placeholder:[1],emptyMessage:[1,"empty-message"],required:[516],disabled:[516],clearable:[4],clearLabel:[1,"clear-label"],query:[32],matchCount:[32],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],refresh:[64]},[[0,"pfOptionSelect","handleOptionSelect"]],{value:[{syncFormState:0},{syncSelection:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function g(){if(typeof customElements==="undefined"){return}const t=["pf-combobox","pf-icon"];t.forEach((t=>{switch(t){case"pf-combobox":if(!customElements.get(e(t))){customElements.define(e(t),x)}break;case"pf-icon":if(!customElements.get(e(t))){m()}break}}))}g();const k=x;const C=g;export{k as PfCombobox,C as defineCustomElement};
+//# sourceMappingURL=pf-combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfComboboxCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfCombobox","__stencil_proxyCustomElement","HTMLElement","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","controlAriaLabel","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 { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n  [Keys.ArrowDown]: 'next',\n  [Keys.ArrowUp]: 'previous',\n  [Keys.Home]: 'first',\n  [Keys.End]: 'last',\n};\n\n/**\n * A form-associated 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              aria-label={controlAriaLabel(this.el, this.label)}\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/components/pf-command-group.d.ts

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,h as s,a as c}from"./index.js";const o=()=>`: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 n=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}label;render(){return s(c,{key:"8d93af230bca00a826b5a9f1f4dff8ec19b5f7c3",role:"group","aria-label":this.label},this.label&&s("p",{key:"842b8ebd4eda7cbf5f28b1087df5fb4fdaa4cbae",class:"label",part:"label"},this.label),s("slot",{key:"a77cc0bb2715fbddbe0d5809916405d22c892acc"}))}static get style(){return o()}},[769,"pf-command-group",{label:[1]}]);function r(){if(typeof customElements==="undefined"){return}const t=["pf-command-group"];t.forEach((t=>{switch(t){case"pf-command-group":if(!customElements.get(e(t))){customElements.define(e(t),n)}break}}))}r();const f=n;const d=r;export{f as PfCommandGroup,d as defineCustomElement};
+//# sourceMappingURL=pf-command-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfCommandGroupCss","PfCommandGroup","__stencil_proxyCustomElement","HTMLElement","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":"2DAAA,MAAMA,EAAoB,IAAM,iR,MCoBnBC,EAAcC,EAAA,MAAAD,UAAAE,E,iFAEjBC,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/components/pf-command-item.d.ts

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,c as a,h as i,a as o}from"./index.js";const c=()=>`:host{align-items:center;border-radius:var(--radius-sm);color:var(--pf-command-text);cursor:pointer;display:flex;gap:var(--space-3);padding:var(--space-2) var(--space-3);user-select:none}:host([hidden]){display:none}:host([aria-selected='true']){background:var(--pf-command-item-active-bg)}:host([aria-selected='true']) .label,:host([aria-selected='true']) slot[name='icon']::slotted(*){color:var(--pf-command-item-active-text)}:host([aria-selected='true']) .description{color:var(--pf-command-item-active-text);opacity:0.85}:host([disabled]){cursor:not-allowed;opacity:0.5}slot[name='icon']::slotted(*){color:var(--pf-command-text-muted);flex-shrink:0}.content{display:grid;gap:2px;min-width:0}.label{font-size:var(--font-size-sm);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.description{color:var(--pf-command-text-muted);font-size:var(--font-size-xs);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;const n=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfCommandSelect=a(this,"pfCommandSelect")}get el(){return this}value="";description;disabled=false;pfCommandSelect;onClick=e=>{if(this.disabled){e.stopPropagation();return}this.pfCommandSelect.emit({value:this.value})};render(){return i(o,{key:"ed43f8f61f0e9ef853bcdb1df173e5a8b82a6cd5",role:"option","aria-disabled":this.disabled?"true":null,onClick:this.onClick},i("slot",{key:"0e50176162775ea6ed383ffdb5baf90ece6c8f1f",name:"icon"}),i("span",{key:"b994b5985bcbac11b90fd000495c48695315a65d",class:"content"},i("span",{key:"e9693e2a23e8c46980dafaf89b69b3d466c31d70",class:"label",part:"label"},i("slot",{key:"668db89e046a65cf0e8ee75098f46979d87d4089"})),this.description&&i("span",{key:"dd1fd1004f5400b968069177eb74d9bb08a34dc1",class:"description",part:"description"},this.description)))}static get style(){return c()}},[769,"pf-command-item",{value:[513],description:[1],disabled:[516]}]);function d(){if(typeof customElements==="undefined"){return}const t=["pf-command-item"];t.forEach((t=>{switch(t){case"pf-command-item":if(!customElements.get(e(t))){customElements.define(e(t),n)}break}}))}d();const r=n;const l=d;export{r as PfCommandItem,l as defineCustomElement};
+//# sourceMappingURL=pf-command-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfCommandItemCss","PfCommandItem","__stencil_proxyCustomElement","HTMLElement","value","description","disabled","pfCommandSelect","onClick","event","this","stopPropagation","emit","render","h","Host","key","role","name","class","part"],"sources":["src/components/pf-command-item/pf-command-item.css?tag=pf-command-item&encapsulation=shadow","src/components/pf-command-item/pf-command-item.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  border-radius: var(--radius-sm);\n  color: var(--pf-command-text);\n  cursor: pointer;\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-2) var(--space-3);\n  user-select: none;\n}\n\n/* The palette sets `hidden` on the items a query filters out. */\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The active option, which the palette marks. Not `:hover` alone: the keyboard\n * and the mouse share one active item, and the palette is what decides it.\n */\n:host([aria-selected='true']) {\n  background: var(--pf-command-item-active-bg);\n}\n\n/*\n * The active background is the primary action colour, so everything on top of\n * it needs the matching foreground -- including the description, which is\n * muted against the panel and would be unreadable against this.\n */\n:host([aria-selected='true']) .label,\n:host([aria-selected='true']) slot[name='icon']::slotted(*) {\n  color: var(--pf-command-item-active-text);\n}\n\n:host([aria-selected='true']) .description {\n  color: var(--pf-command-item-active-text);\n  opacity: 0.85;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/*\n * No wrapper box around the icon slot: an unassigned slot is\n * `display: contents` and generates nothing, so the row's `gap` does not open\n * in front of an item with no icon.\n */\nslot[name='icon']::slotted(*) {\n  color: var(--pf-command-text-muted);\n  flex-shrink: 0;\n}\n\n.content {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n}\n\n.label {\n  font-size: var(--font-size-sm);\n  line-height: 1.3;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.description {\n  color: var(--pf-command-text-muted);\n  font-size: var(--font-size-xs);\n  line-height: 1.3;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * One command in a `pf-command-palette`.\n *\n * It only reports that it was chosen; the palette owns filtering, the active\n * option and closing, exactly as `pf-radio-group` owns selection for its\n * radios and `pf-dropdown` owns it for its menu items.\n *\n * @slot - the command's label, which is also what the palette searches.\n * @slot icon - a leading icon.\n * @part label - the label's box.\n * @part description - the supporting line.\n */\n@Component({\n  tag: 'pf-command-item',\n  styleUrl: 'pf-command-item.css',\n  shadow: true,\n})\nexport class PfCommandItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Identifies the command in the palette's select event.\n   *\n   * Reflected, and not only for tidiness: the generated React and Angular\n   * bindings set props as *properties*, so without this there is no `value`\n   * attribute and anything selecting on one — the palette's own item query\n   * included — finds nothing. The same defect as an unreflected `name` on a\n   * form control, and caught the same way, by the consumer apps.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** A supporting line under the label. Searched along with the label. */\n  @Prop() description?: string;\n\n  /** Reflected so the stylesheet and the palette's item query can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Asks the palette to run this command. The palette decides and closes. */\n  @Event() pfCommandSelect!: EventEmitter<{ value: string }>;\n\n  /**\n   * Mouse only. The palette keeps keyboard focus in its input and tracks the\n   * active option with `aria-activedescendant`, so Enter is the palette's to\n   * handle — an item never has focus to receive a key on.\n   */\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    this.pfCommandSelect.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host role=\"option\" aria-disabled={this.disabled ? 'true' : null} onClick={this.onClick}>\n        <slot name=\"icon\" />\n        <span class=\"content\">\n          <span class=\"label\" part=\"label\">\n            <slot />\n          </span>\n          {this.description && (\n            <span class=\"description\" part=\"description\">\n              {this.description}\n            </span>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAmB,IAAM,i8B,MCmBlBC,EAAaC,EAAA,MAAAD,UAAAE,E,qJAYCC,MAAQ,GAGzBC,YAGiBC,SAAW,MAG3BC,gBAODC,QAAWC,IACjB,GAAIC,KAAKJ,SAAU,CACjBG,EAAME,kBACN,M,CAEFD,KAAKH,gBAAgBK,KAAK,CAAER,MAAOM,KAAKN,OAAQ,EAGlD,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,gBAAgBP,KAAKJ,SAAW,OAAS,KAAME,QAASE,KAAKF,SAC9EM,EAAA,QAAAE,IAAA,2CAAME,KAAK,SACXJ,EAAA,QAAAE,IAAA,2CAAMG,MAAM,WACVL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QAAQC,KAAK,SACvBN,EAAA,QAAAE,IAAA,8CAEDN,KAAKL,aACJS,EAAA,QAAAE,IAAA,2CAAMG,MAAM,cAAcC,KAAK,eAC5BV,KAAKL,c","ignoreList":[]}

package/dist/components/pf-command-palette.d.ts

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

package/dist/components/pf-command-palette.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,c as s,h as i,a as n}from"./index.js";import{m as o}from"./p-Dkd7BUB5.js";import{K as r}from"./p-g4FlTDZx.js";import{g as l,r as c}from"./p-CAz7-p8y.js";import{l as d}from"./p-C-VLyxRR.js";import{d as p}from"./p-CkFjPRTe.js";import{d as h}from"./p-C4aE66tt.js";const m=()=>`: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 f=(e,t)=>{if(t)e.setAttribute("hidden","");else e.removeAttribute("hidden")};const u=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOpenChange=s(this,"pfOpenChange");this.pfSelect=s(this,"pfSelect")}get el(){return 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 s=o({label:t.textContent?.trim()??"",description:t.getAttribute("description"),group:a?.getAttribute("label")??null},e);f(t,!s)}for(const e of Array.from(this.el.querySelectorAll("pf-command-group"))){const t=e.querySelectorAll("pf-command-item:not([hidden])").length;f(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=l(t,(e=>e.hasAttribute("disabled")));const s=this.activeItem?t.indexOf(this.activeItem):-1;const i=c(e,a,s);if(i!==-1)this.setActive(t[i]??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={[r.ArrowDown]:"next",[r.ArrowUp]:"previous",[r.Home]:"first",[r.End]:"last"};const a=t[e.key];if(a){e.preventDefault();this.move(a);return}if(e.key===r.Enter){e.preventDefault();this.runActive()}};render(){const e=this.matchCount===0;return i(n,{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}]}}static get style(){return m()}},[769,"pf-command-palette",{open:[1540],placeholder:[1],emptyMessage:[1,"empty-message"],label:[1],dismissable:[4],query:[32],matchCount:[32],show:[64],hide:[64],refresh:[64]},[[0,"pfCommandSelect","handleCommandSelect"]],{open:[{syncOpen:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["pf-command-palette","pf-icon","pf-kbd"];t.forEach((t=>{switch(t){case"pf-command-palette":if(!customElements.get(e(t))){customElements.define(e(t),u)}break;case"pf-icon":if(!customElements.get(e(t))){p()}break;case"pf-kbd":if(!customElements.get(e(t))){h()}break}}))}b();const g=u;const y=b;export{g as PfCommandPalette,y as defineCustomElement};
+//# sourceMappingURL=pf-command-palette.js.map

package/dist/components/pf-command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCommandPaletteCss","setHidden","element","hidden","setAttribute","removeAttribute","PfCommandPalette","__stencil_proxyCustomElement","HTMLElement","open","placeholder","emptyMessage","label","dismissable","pfOpenChange","pfSelect","query","matchCount","releaseScroll","activeItem","componentWillLoad","this","applyQuery","componentDidLoad","showDialog","componentDidRender","syncActiveDescendant","disconnectedCallback","unlockScroll","show","hide","syncOpen","next","previous","closeDialog","emit","handleCommandSelect","event","stopPropagation","value","detail","onSlotChange","refresh","dialog","el","shadowRoot","querySelector","input","items","Array","from","querySelectorAll","visibleItems","filter","item","hasAttribute","lockScroll","lockPageScroll","showModal","requestAnimationFrame","focus","close","onCancel","preventDefault","onClose","onDialogClick","target","onInput","group","closest","matches","matchesCommandQuery","textContent","trim","description","getAttribute","showing","length","visible","setActive","find","scrollIntoView","block","ariaActiveDescendantElement","move","action","enabled","getEnabledIndexes","current","indexOf","resolveListMove","runActive","onKeyDown","actions","Keys","ArrowDown","ArrowUp","Home","End","key","Enter","render","empty","h","Host","part","class","onClick","name","type","role","autocomplete","spellcheck","onSlotchange"],"sources":["src/components/pf-command-palette/pf-command-palette.css?tag=pf-command-palette&encapsulation=shadow","src/components/pf-command-palette/pf-command-palette.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/*\n * The dialog is the backdrop: it fills the viewport and aligns the panel near\n * the top, so a click landing on it rather than on the panel is a backdrop\n * click. The explicit sizing overrides the UA's `margin: auto` and\n * `width: fit-content` for a `<dialog>`.\n */\n.dialog {\n  align-items: flex-start;\n  background: none;\n  border: 0;\n  display: none;\n  height: 100%;\n  justify-content: center;\n  max-height: 100%;\n  max-width: 100%;\n  padding: var(--space-4);\n  width: 100%;\n}\n\n.dialog[open] {\n  display: flex;\n}\n\n@media (--md) {\n  .dialog {\n    padding-top: 10vh;\n  }\n}\n\n.dialog::backdrop {\n  background: var(--pf-commandpalette-overlay-backdrop, var(--pf-overlay-backdrop));\n}\n\n.panel {\n  background: var(--pf-command-bg);\n  border: 1px solid var(--pf-command-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--pf-commandpalette-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));\n  color: var(--pf-command-text);\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  max-height: 100%;\n  overflow: hidden;\n  width: min(560px, 100%);\n}\n\n.dialog[open] .panel {\n  animation: pf-command-panel-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-command-panel-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8px) scale(0.98);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialog[open] .panel {\n    animation: none;\n  }\n}\n\n.search {\n  align-items: center;\n  border-bottom: 1px solid var(--pf-command-border);\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n}\n\n.search-icon {\n  color: var(--pf-command-text-muted);\n  flex-shrink: 0;\n}\n\n.input {\n  background: none;\n  border: 0;\n  color: var(--pf-command-text);\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-md);\n  min-width: 0;\n  outline: none;\n  padding: 0;\n}\n\n.input::placeholder {\n  color: var(--pf-command-text-muted);\n}\n\n.hint {\n  flex-shrink: 0;\n}\n\n.list {\n  overflow-y: auto;\n  padding: var(--space-2);\n}\n\n.empty {\n  color: var(--pf-command-text-muted);\n  font-size: var(--font-size-sm);\n  margin: 0;\n  padding: var(--space-4) var(--space-3);\n  text-align: center;\n}\n","import {\n  getEnabledIndexes,\n  Keys,\n  lockPageScroll,\n  matchesCommandQuery,\n  resolveListMove,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport {\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\n/*\n * `toggleAttribute` does not exist on Stencil's mock DOM -- measured, and\n * worth knowing how it fails: Stencil's `safeCall` swallows the TypeError, so\n * the filter silently did nothing and the palette rendered \"No results found\"\n * over a full list. Not exported, so this file still has one export.\n */\nconst setHidden = (element: Element, hidden: boolean) => {\n  if (hidden) element.setAttribute('hidden', '');\n  else element.removeAttribute('hidden');\n};\n\n/**\n * A searchable command list in a modal dialog.\n *\n * A native `<dialog>` opened with `showModal()`, like `pf-modal` and\n * `pf-slideout-menu`: the focus trap, Escape and the backdrop come free, and\n * the React component's `useFocusTrap` has no equivalent here. Page scroll is\n * the one part the dialog does not do, so that is core's reference-counted\n * lock.\n *\n * **The active option is set as an element, not an IDREF.** The input lives in\n * this shadow root and the options are slotted light-DOM children, and\n * `aria-activedescendant` does not cross a shadow boundary — measured against\n * Chromium's accessibility tree, where a cross-root IDREF is simply absent\n * from it. `ariaActiveDescendantElement` does resolve, because the option sits\n * in an ancestor scope of the input's tree, which is the direction element\n * reflection allows. (`pf-tooltip` needed the opposite direction — a trigger\n * referencing something inside a shadow root it does not own — and that one\n * reads back empty, which is why it copies text into `aria-description`\n * instead.)\n *\n * @slot - `pf-command-item` and `pf-command-group` children.\n * @part dialog - the native dialog, which is also the backdrop.\n * @part panel - the floating panel.\n * @part input - the search input.\n * @part list - the listbox the items are slotted into.\n * @part empty - the message shown when nothing matches.\n */\n@Component({\n  tag: 'pf-command-palette',\n  styleUrl: 'pf-command-palette.css',\n  shadow: true,\n})\nexport class PfCommandPalette {\n  @Element() el!: HTMLElement;\n\n  /** Whether the palette is showing. Reflected so the stylesheet selects on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Placeholder for the search input. */\n  @Prop() placeholder = 'Search commands…';\n\n  /** Shown when the query matches nothing. */\n  @Prop() emptyMessage = 'No results found.';\n\n  /** Accessible name for the dialog. */\n  @Prop() label = 'Command palette';\n\n  /** Close on Escape or a click on the backdrop. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Fires whenever the palette opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Fires with the chosen item's `value`. The palette then closes. */\n  @Event() pfSelect!: EventEmitter<{ value: string }>;\n\n  @State() query = '';\n  @State() matchCount = 0;\n\n  private releaseScroll: (() => void) | null = null;\n  private activeItem: HTMLElement | null = null;\n\n  /*\n   * Read the light DOM on the way in, not after mounting, so the first paint\n   * is right: filtering from `componentDidLoad` leaves `matchCount` at 0 for\n   * that first render and flashes \"No results found\" over a full list.\n   */\n  componentWillLoad() {\n    this.applyQuery();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  componentDidRender() {\n    /*\n     * Re-applied after every render because the active option is held as a\n     * *property* on the input, and Stencil's re-render replaces nothing of the\n     * light DOM but does reset nothing of this either — the property survives,\n     * but the matching set may have changed under it, so the one place that is\n     * always right is after the render that changed it.\n     */\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.unlockScroll();\n  }\n\n  /** Opens the palette. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the palette. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\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  /** A child asking to be run. The palette decides, reports and closes. */\n  @Listen('pfCommandSelect')\n  handleCommandSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.pfSelect.emit({ value: event.detail.value });\n    this.open = false;\n  }\n\n  /*\n   * Items may be added, removed or relabelled while the palette is open, so\n   * the filter is re-applied when the assignment changes. Text edited inside\n   * an already-assigned node does not fire this — the same caveat pf-tooltip\n   * documents — which is why `refresh()` exists.\n   */\n  private onSlotChange = () => {\n    this.applyQuery();\n  };\n\n  /** Re-reads the children and re-applies the current query. */\n  @Method()\n  async refresh(): Promise<void> {\n    this.applyQuery();\n  }\n\n  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector('input') ?? null;\n  }\n\n  private items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-command-item'));\n  }\n\n  /** The items a query left showing, which is what the arrows move through. */\n  private visibleItems(): HTMLElement[] {\n    return this.items().filter((item) => !item.hasAttribute('hidden'));\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    // A fresh query each time it opens, matching the React component.\n    this.query = '';\n    this.applyQuery();\n    requestAnimationFrame(() => this.input?.focus());\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) event.preventDefault();\n  };\n\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /** A click on the dialog itself landed on the backdrop, not the panel. */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  private onInput = (event: Event) => {\n    this.query = (event.target as HTMLInputElement).value;\n    this.applyQuery();\n  };\n\n  /**\n   * Hides the items a query excludes, and any group left with none showing.\n   *\n   * The group's own label counts towards each of its items, so typing a\n   * section name narrows to that section — which is what the React component\n   * does with its `group` field.\n   */\n  private applyQuery() {\n    const query = this.query;\n\n    for (const item of this.items()) {\n      const group = item.closest('pf-command-group');\n      const matches = matchesCommandQuery(\n        {\n          label: item.textContent?.trim() ?? '',\n          description: item.getAttribute('description'),\n          group: group?.getAttribute('label') ?? null,\n        },\n        query,\n      );\n      setHidden(item, !matches);\n    }\n\n    for (const group of Array.from(this.el.querySelectorAll<HTMLElement>('pf-command-group'))) {\n      const showing = group.querySelectorAll('pf-command-item:not([hidden])').length;\n      setHidden(group, showing === 0);\n    }\n\n    const visible = this.visibleItems();\n    this.matchCount = visible.length;\n\n    // A new query starts at the top, as the React component does.\n    this.setActive(visible.find((item) => !item.hasAttribute('disabled')) ?? null);\n  }\n\n  private setActive(item: HTMLElement | null) {\n    if (this.activeItem && this.activeItem !== item) {\n      this.activeItem.removeAttribute('aria-selected');\n    }\n    this.activeItem = item;\n    item?.setAttribute('aria-selected', 'true');\n    this.syncActiveDescendant();\n    // Guarded: this also runs from componentWillLoad, and the mock DOM has no\n    // scrollIntoView at all.\n    if (item && typeof item.scrollIntoView === 'function') {\n      item.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /**\n   * Feature-detected: where ARIA element reflection is missing there is no\n   * cross-root equivalent, so the active option stops being *announced* while\n   * the arrows, the highlight and Enter all still work. Recorded in `todo.md`.\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.activeItem;\n  }\n\n  private move(action: ListNavigationAction) {\n    const visible = this.visibleItems();\n    const enabled = getEnabledIndexes(visible, (item) => item.hasAttribute('disabled'));\n    const current = this.activeItem ? visible.indexOf(this.activeItem) : -1;\n    const next = resolveListMove(action, enabled, current);\n    if (next !== -1) this.setActive(visible[next] ?? null);\n  }\n\n  private runActive() {\n    const item = this.activeItem;\n    if (!item || item.hasAttribute('disabled')) return;\n    // The property, not the attribute: a binding that sets props would leave\n    // the attribute absent, and the reported value silently empty.\n    const value = (item as HTMLElement & { value?: string }).value;\n    this.pfSelect.emit({ value: value ?? item.getAttribute('value') ?? '' });\n    this.open = false;\n  }\n\n  /*\n   * On the panel rather than the input, so a pointer that has moved focus\n   * elsewhere inside the dialog still drives the list. Escape is left to the\n   * dialog, which handles it natively.\n   */\n  private onKeyDown = (event: KeyboardEvent) => {\n    const actions: Record<string, ListNavigationAction> = {\n      [Keys.ArrowDown]: 'next',\n      [Keys.ArrowUp]: 'previous',\n      [Keys.Home]: 'first',\n      [Keys.End]: 'last',\n    };\n\n    const action = actions[event.key];\n    if (action) {\n      event.preventDefault();\n      this.move(action);\n      return;\n    }\n\n    if (event.key === Keys.Enter) {\n      event.preventDefault();\n      this.runActive();\n    }\n  };\n\n  render() {\n    const empty = this.matchCount === 0;\n\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.label}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\" onKeyDown={this.onKeyDown}>\n            <div class=\"search\">\n              <pf-icon name=\"magnifying-glass\" class=\"search-icon\"></pf-icon>\n              <input\n                part=\"input\"\n                class=\"input\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                spellcheck={false}\n                aria-autocomplete=\"list\"\n                aria-expanded=\"true\"\n                aria-label={this.placeholder}\n                placeholder={this.placeholder}\n                value={this.query}\n                onInput={this.onInput}\n              />\n              <pf-kbd class=\"hint\">esc</pf-kbd>\n            </div>\n\n            <div class=\"list\" part=\"list\" role=\"listbox\" aria-label={this.label}>\n              <slot onSlotchange={this.onSlotChange} />\n              {empty && (\n                <p class=\"empty\" part=\"empty\">\n                  {this.emptyMessage}\n                </p>\n              )}\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-content-divider.d.ts

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

package/dist/components/pf-content-divider.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as n,h as i,a}from"./index.js";const s=()=>`: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=t(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return 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 i(a,{key:"dc7c5a43b2f356b553628a4de6a987ecc217fc5e",role:"separator","aria-orientation":this.orientation},i("span",{key:"cdab9e57ebf9d2e00952b519f0767e45c3898db9",part:"line",class:"line","aria-hidden":"true"}),i("span",{key:"23ff0f23cb3534d200d8f5a3da8651bd3fd0a7c1",part:"label",class:{label:true,"label--empty":!this.hasLabel}},i("slot",{key:"8d3cdb5015572a426c999b09478a5ba38fc1a6f9",onSlotchange:this.syncLabel})),i("span",{key:"3d1984591ba428163514b1f85a1ed3637cc9534a",part:"line",class:{line:true,"line--hidden":!this.hasLabel},"aria-hidden":"true"}))}static get style(){return s()}},[769,"pf-content-divider",{orientation:[513],inset:[516],hasLabel:[32]}]);function o(){if(typeof customElements==="undefined"){return}const t=["pf-content-divider"];t.forEach((t=>{switch(t){case"pf-content-divider":if(!customElements.get(e(t))){customElements.define(e(t),r)}break}}))}o();const l=r;const d=o;export{l as PfContentDivider,d as defineCustomElement};
+//# sourceMappingURL=pf-content-divider.js.map

package/dist/components/pf-content-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfContentDividerCss","PfContentDivider","__stencil_proxyCustomElement","HTMLElement","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":"sDAAA,MAAMA,EAAsB,IAAM,iwB,MCoBrBC,EAAgBC,EAAA,MAAAD,UAAAE,E,sGAIFC,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/components/pf-context-menu.d.ts

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as n,c as s,h as o,a as i}from"./index.js";import{c as r,p as a}from"./p-CC7AyfOt.js";import{K as p}from"./p-g4FlTDZx.js";import{r as u}from"./p-CAz7-p8y.js";import{s as f,r as c}from"./p-Fiuz9ck7.js";const h=()=>`:host{display:block}:host([hidden]){display:none}:host{--pf-menu-text:var(--pf-contextmenu-text);--pf-menu-text-muted:var(--pf-contextmenu-text-muted);--pf-menu-text-danger:var(--pf-contextmenu-text-danger);--pf-menu-item-active-bg:var(--pf-contextmenu-item-active-bg);--pf-menu-separator:var(--pf-contextmenu-separator)}.menu{inset:auto;margin:0;background:var(--pf-contextmenu-bg);border:1px solid var(--pf-contextmenu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 420px);min-width:180px;overflow:auto;padding:var(--space-1)}.menu:popover-open{animation:pf-context-menu-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-context-menu-in{from{opacity:0;transform:scale(0.98)}}@media (prefers-reduced-motion: reduce){.menu:popover-open{animation:none}}`;const d=t(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOpenChange=s(this,"pfOpenChange");this.pfSelect=s(this,"pfSelect")}get el(){return this}open=false;label="Context menu";disabled=false;pfOpenChange;pfSelect;point={x:0,y:0};syncOpen(e,t){if(e)this.showMenu();else this.hideMenu();if(e!==t)this.pfOpenChange.emit({open:e})}async showAt(e,t){if(this.disabled)return;this.point={x:e,y:t};this.open=true}async hide(){this.open=false}get panel(){return this.el.shadowRoot?.querySelector('[part="menu"]')??null}get items(){return Array.from(this.el.querySelectorAll("pf-menu-item"))}get enabledItems(){return this.items.filter((e=>!e.hasAttribute("disabled")))}showMenu(){const e=this.panel;if(!e||e.matches(":popover-open"))return;e.showPopover();const{x:t,y:n}=r(this.point,e.getBoundingClientRect(),{width:window.innerWidth,height:window.innerHeight});a(e,t,n);const s=this.enabledItems[0];f(this.enabledItems,s);s?.focus()}hideMenu(){const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}handleContextMenu(e){if(this.disabled||e.defaultPrevented)return;const t=this.panel;if(t&&e.composedPath().includes(t))return;e.preventDefault();this.point={x:e.clientX,y:e.clientY};if(this.open){this.showMenuAtNewPoint();return}this.open=true}showMenuAtNewPoint(){const e=this.panel;if(!e)return;const{x:t,y:n}=r(this.point,e.getBoundingClientRect(),{width:window.innerWidth,height:window.innerHeight});a(e,t,n)}handleMenuSelect(e){e.stopPropagation();this.pfSelect.emit({value:e.detail.value});this.open=false}handleKeyDown(e){if(!this.open||e.defaultPrevented)return;if(e.key===p.Escape){e.stopPropagation();this.open=false;return}const t=c(e.key,"vertical");if(!t)return;const n=this.enabledItems;if(n.length===0)return;const s=n.indexOf(document.activeElement);const o=u(t,n.map(((e,t)=>t)),s);if(o<0)return;e.preventDefault();f(n,n[o]);n[o].focus()}onToggle=e=>{const t=e.newState==="open";if(t!==this.open)this.open=t};render(){return o(i,{key:"b515df27fd68d157ed44b099c35a8e923054a270"},o("slot",{key:"c406f292f30ab4db1aa9708b11b0f6be8378519f"}),o("div",{key:"dd1838ec80b5702137e15f5e3a65404d83f893e3",class:"menu",part:"menu",popover:"auto",role:"menu","aria-label":this.label,onToggle:this.onToggle},o("slot",{key:"92fd279e9a59db8042b5e7f9d18df213c3b022fa",name:"menu"})))}static get watchers(){return{open:[{syncOpen:0}]}}static get style(){return h()}},[769,"pf-context-menu",{open:[1540],label:[1],disabled:[516],showAt:[64],hide:[64]},[[0,"contextmenu","handleContextMenu"],[0,"pfMenuSelect","handleMenuSelect"],[0,"keydown","handleKeyDown"]],{open:[{syncOpen:0}]}]);function m(){if(typeof customElements==="undefined"){return}const t=["pf-context-menu"];t.forEach((t=>{switch(t){case"pf-context-menu":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}m();const l=d;const x=m;export{l as PfContextMenu,x as defineCustomElement};
+//# sourceMappingURL=pf-context-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfContextMenuCss","PfContextMenu","__stencil_proxyCustomElement","HTMLElement","open","label","disabled","pfOpenChange","pfSelect","point","x","y","syncOpen","next","previous","this","showMenu","hideMenu","emit","showAt","hide","panel","el","shadowRoot","querySelector","items","Array","from","querySelectorAll","enabledItems","filter","item","hasAttribute","matches","showPopover","clampToViewport","getBoundingClientRect","width","window","innerWidth","height","innerHeight","placePopover","first","syncRovingTabIndex","focus","hidePopover","handleContextMenu","event","defaultPrevented","composedPath","includes","preventDefault","clientX","clientY","showMenuAtNewPoint","handleMenuSelect","stopPropagation","value","detail","handleKeyDown","key","Keys","Escape","action","resolveRovingKey","length","currentIndex","indexOf","document","activeElement","nextIndex","resolveListMove","map","_","index","onToggle","newState","render","h","Host","class","part","popover","role","name"],"sources":["src/components/pf-context-menu/pf-context-menu.css?tag=pf-context-menu&encapsulation=shadow","src/components/pf-context-menu/pf-context-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The generic set pf-menu-item and pf-menu-separator read, mapped to this\n * menu's own alias family — see pf-menu-item.css. The same item element is\n * themed by whichever container it is slotted into.\n */\n:host {\n  --pf-menu-text: var(--pf-contextmenu-text);\n  --pf-menu-text-muted: var(--pf-contextmenu-text-muted);\n  --pf-menu-text-danger: var(--pf-contextmenu-text-danger);\n  --pf-menu-item-active-bg: var(--pf-contextmenu-item-active-bg);\n  --pf-menu-separator: var(--pf-contextmenu-separator);\n}\n\n/*\n * `inset: auto` and `margin: 0` are essential, not tidying -- see\n * `src/place-popover.ts`, which sets the same two inline and explains the\n * measurement. They are declared in both places deliberately: here so the\n * cascade carries them for the whole life of the panel, and inline so a panel\n * is still positioned where this stylesheet has not been applied.\n */\n.menu {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-contextmenu-bg);\n  border: 1px solid var(--pf-contextmenu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  max-height: min(60vh, 420px);\n  min-width: 180px;\n  overflow: auto;\n  padding: var(--space-1);\n}\n\n.menu:popover-open {\n  animation: pf-context-menu-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-context-menu-in {\n  from {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .menu:popover-open {\n    animation: none;\n  }\n}\n","import {\n  clampToViewport,\n  Keys,\n  resolveListMove,\n  resolveRovingKey,\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\nimport { placePopover } from '../../place-popover';\n\n/**\n * A menu opened by right-clicking the region it wraps.\n *\n * Unlike `pf-dropdown` there is no anchor element — the menu opens at the\n * pointer — so it is placed with core's `clampToViewport` rather than the\n * anchoring observer. The same `pf-menu-item` children serve both.\n *\n * @slot - the region that responds to a right-click.\n * @slot menu - `pf-menu-item` and `pf-menu-separator` children.\n * @part menu - the floating menu panel.\n */\n@Component({\n  tag: 'pf-context-menu',\n  styleUrl: 'pf-context-menu.css',\n  shadow: true,\n})\nexport class PfContextMenu {\n  @Element() el!: HTMLElement;\n\n  /** Whether the menu is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Accessible name for the menu. */\n  @Prop() label = 'Context menu';\n\n  /**\n   * Let the browser's own context menu through instead. Reflected so the\n   * stylesheet can select on it.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires whenever the menu opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Fires with the chosen item's value. The menu closes itself afterwards. */\n  @Event() pfSelect!: EventEmitter<{ value: string }>;\n\n  /** Where the menu was asked to appear, in client coordinates. */\n  private point = { x: 0, y: 0 };\n\n  /** See pf-popover: the watch is the one place every path passes through. */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showMenu();\n    else this.hideMenu();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** Opens the menu at a point in client coordinates. */\n  @Method()\n  async showAt(x: number, y: number): Promise<void> {\n    if (this.disabled) return;\n    this.point = { x, y };\n    this.open = true;\n  }\n\n  /** Closes the menu. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"menu\"]') ?? null;\n  }\n\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-menu-item'));\n  }\n\n  private get enabledItems(): HTMLElement[] {\n    return this.items.filter((item) => !item.hasAttribute('disabled'));\n  }\n\n  private showMenu() {\n    const panel = this.panel;\n    if (!panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    /*\n     * Measured after showing, because a closed popover has no size and the\n     * clamp needs one. Pinned rather than flipped: the pointer is already\n     * where the user is looking.\n     */\n    const { x, y } = clampToViewport(this.point, panel.getBoundingClientRect(), {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n    placePopover(panel, x, y);\n\n    const first = this.enabledItems[0];\n    syncRovingTabIndex(this.enabledItems, first);\n    first?.focus();\n  }\n\n  private hideMenu() {\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  @Listen('contextmenu')\n  handleContextMenu(event: MouseEvent) {\n    if (this.disabled || event.defaultPrevented) return;\n    // Only inside the region, not over the menu itself once it is showing.\n    const panel = this.panel;\n    if (panel && event.composedPath().includes(panel)) return;\n\n    event.preventDefault();\n    this.point = { x: event.clientX, y: event.clientY };\n    if (this.open) {\n      // Already showing: move it to the new point rather than ignoring.\n      this.showMenuAtNewPoint();\n      return;\n    }\n    this.open = true;\n  }\n\n  /** A second right-click moves the open menu, which `showMenu` would skip. */\n  private showMenuAtNewPoint() {\n    const panel = this.panel;\n    if (!panel) return;\n    const { x, y } = clampToViewport(this.point, panel.getBoundingClientRect(), {\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n    placePopover(panel, x, y);\n  }\n\n  @Listen('pfMenuSelect')\n  handleMenuSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.pfSelect.emit({ value: event.detail.value });\n    this.open = false;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.defaultPrevented) return;\n\n    if (event.key === Keys.Escape) {\n      event.stopPropagation();\n      this.open = false;\n      return;\n    }\n\n    const action = resolveRovingKey(event.key, 'vertical');\n    if (!action) return;\n\n    const items = this.enabledItems;\n    if (items.length === 0) return;\n\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    const nextIndex = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    syncRovingTabIndex(items, items[nextIndex]);\n    items[nextIndex].focus();\n  }\n\n  private onToggle = (event: Event) => {\n    const next = (event as ToggleEvent).newState === 'open';\n    if (next !== this.open) this.open = next;\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        <div\n          class=\"menu\"\n          part=\"menu\"\n          popover=\"auto\"\n          role=\"menu\"\n          aria-label={this.label}\n          onToggle={this.onToggle}\n        >\n          <slot name=\"menu\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

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

package/dist/components/pf-date-picker.d.ts

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

package/dist/components/pf-date-picker.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,c as r,h as i,a as s}from"./index.js";import{o as n,p as o}from"./p-CC7AyfOt.js";import{c as l}from"./p-DfpCerXM.js";import{p as d}from"./p-C9jNMqLs.js";import{K as c}from"./p-g4FlTDZx.js";import{a as p}from"./p-Cr6IXrUk.js";import{c as f}from"./p-Cy_kHPeC.js";import{d as h}from"./p-DkBJMi_M.js";import{d as u}from"./p-CkFjPRTe.js";const b=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-field-label-text, var(--pf-input-label-text));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-input-invalid-border);margin-inline-start:var(--space-1)}.row{align-items:center;display:flex;gap:var(--space-2)}.trigger{align-items:center;background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);cursor:pointer;display:flex;flex:1;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;min-width:0;padding:var(--space-2) var(--space-3);text-align:start}.trigger:hover:not(:disabled){border-color:var(--pf-input-border-hover)}.trigger:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-input-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-input-placeholder-text)}.clear{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-input-text-muted, var(--pf-input-placeholder-text));cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:var(--space-1)}.clear:hover:not(:disabled){color:var(--pf-input-text)}.clear:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.description{color:var(--pf-input-description-text);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-input-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:none;border:0;overflow:visible;padding:0}.panel:popover-open{animation:pf-date-picker-in var(--pf-transition-enter)}@keyframes pf-date-picker-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}`;const g=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=r(this,"pfChange");this.pfOpenChange=r(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";open=false;label;description;error;placeholder="Select a date";required=false;disabled=false;allowClear=false;min;max;startYear;endYear;showOutsideDays=true;isDateDisabled;pfChange;pfOpenChange;initialValue="";stopObserving;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){this.internals.setFormValue(this.value||null);p(this.internals,Boolean(this.value),this.required,this.error)}syncOpen(e,t){if(e)this.showPanel();else this.hidePanel();if(e!==t)this.pfOpenChange.emit({open:e})}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}get panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}get calendar(){return this.el.shadowRoot?.querySelector("pf-calendar")??null}showPanel(){const e=this.panel;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=n({getAnchor:()=>this.trigger,getFloating:()=>e,align:"start",matchAnchorWidth:false,flip:true,onChange:({left:t,top:a})=>o(e,t,a)});void this.calendar?.focusSelectedDay()}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t)this.trigger?.focus()};bindCalendar=e=>{if(!e||e===this.boundCalendar)return;this.boundCalendar=e;e.addEventListener("pfChange",this.onCalendarChange)};boundCalendar;onCalendarChange=e=>{e.stopPropagation();this.value=e.detail.value;this.pfChange.emit({value:this.value});this.open=false;this.trigger?.focus()};clear=e=>{e.stopPropagation();if(!this.value)return;this.value="";this.pfChange.emit({value:""})};onTriggerKeyDown=e=>{if(this.open||this.disabled)return;if(e.key===c.ArrowDown||e.key===c.Enter||e.key===c.Space){if(e.key===c.ArrowDown){e.preventDefault();this.open=true}}};formatted(){const e=d(this.value);if(!e)return"";return new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"}).format(e)}render(){const e=l(this.description&&"description",this.error&&"error");const t=this.formatted();return i(s,{key:"e12dc3b1467bfa1b6b47ad6ecde5ff3740f84191"},i("div",{key:"da81455cc8034d76ee9a5632bf3d7bba8a59ca36",class:"field",part:"field"},this.label&&i("label",{key:"7d5e93bbb12ebaec62e541e1e7ff7051ffd1d9ba",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&i("span",{key:"96da5bb4885737801b0934459809761016eff84b",class:"required","aria-hidden":"true"},"*")),i("div",{key:"7d4bb358df9ec3477847a7456aea8aaede3c6bd1",class:"row"},i("button",{key:"6f0c8095438a87284f339c58cf2bd37ac6d6e8c3",id:"trigger","aria-label":f(this.el,this.label),part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",disabled:this.disabled,"aria-haspopup":"dialog","aria-expanded":this.open?"true":"false","aria-controls":"panel","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":e,onClick:()=>{if(!this.disabled)this.open=!this.open},onKeyDown:this.onTriggerKeyDown},i("span",{key:"7d163538c024cb22bf62556ac45fe2c6412df31b",class:{value:true,"value--placeholder":!t}},t||this.placeholder),i("pf-icon",{key:"0453fc920b7ae38e155a09e355b7a3d574604d14",name:"calendar"})),this.allowClear&&this.value&&i("button",{key:"2e933393553ad120ee949673477b7106e94915cb",class:"clear",part:"clear",type:"button","aria-label":"Clear selected date",disabled:this.disabled,onClick:this.clear},i("pf-icon",{key:"dc784a97f467297a6cb0cb691c52006fa1e32c24",name:"circle-xmark"}))),this.description&&i("p",{key:"087d6e84fc1a653b8e5b92a2bf4c8148f4d16f39",class:"description",part:"description",id:"description"},this.description),this.error&&i("p",{key:"292095f16e9328828a7f821b42d47827ce0d5335",class:"error",part:"error",id:"error"},this.error)),i("div",{key:"a3f5435249a41d602f160e195a8a551d7f40e23a",id:"panel",part:"panel",class:"panel",popover:"auto",role:"dialog","aria-label":"Choose a date",onToggle:this.onToggle},i("pf-calendar",{key:"8db356ae8180b9eaae81df8c560a0f8db68664f8",ref:this.bindCalendar,part:"calendar",value:this.value||undefined,min:this.min,max:this.max,startYear:this.startYear,endYear:this.endYear,showOutsideDays:this.showOutsideDays,isDateDisabled:this.isDateDisabled})))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}static get style(){return b()}},[577,"pf-date-picker",{name:[513],value:[1025],open:[1540],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],allowClear:[4,"allow-clear"],min:[1],max:[1],startYear:[2,"start-year"],endYear:[2,"end-year"],showOutsideDays:[4,"show-outside-days"],isDateDisabled:[16],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function m(){if(typeof customElements==="undefined"){return}const t=["pf-date-picker","pf-calendar","pf-icon"];t.forEach((t=>{switch(t){case"pf-date-picker":if(!customElements.get(e(t))){customElements.define(e(t),g)}break;case"pf-calendar":if(!customElements.get(e(t))){h()}break;case"pf-icon":if(!customElements.get(e(t))){u()}break}}))}m();const v=g;const y=m;export{v as PfDatePicker,y as defineCustomElement};
+//# sourceMappingURL=pf-date-picker.js.map

package/dist/components/pf-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfDatePickerCss","PfDatePicker","__stencil_proxyCustomElement","HTMLElement","internals","name","value","open","label","description","error","placeholder","required","disabled","allowClear","min","max","startYear","endYear","showOutsideDays","isDateDisabled","pfChange","pfOpenChange","initialValue","stopObserving","componentWillLoad","this","syncFormState","disconnectedCallback","setFormValue","applyControlValidity","Boolean","syncOpen","next","previous","showPanel","hidePanel","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","panel","el","shadowRoot","querySelector","trigger","calendar","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","align","matchAnchorWidth","flip","onChange","left","top","placePopover","focusSelectedDay","undefined","hidePopover","onToggle","event","nowOpen","newState","focus","bindCalendar","element","boundCalendar","addEventListener","onCalendarChange","stopPropagation","detail","clear","onTriggerKeyDown","key","Keys","ArrowDown","Enter","Space","preventDefault","formatted","date","parseISODate","Intl","DateTimeFormat","month","day","year","format","render","describedBy","composeDescribedBy","text","h","Host","class","part","htmlFor","id","controlAriaLabel","type","onClick","onKeyDown","popover","role","ref"],"sources":["src/components/pf-date-picker/pf-date-picker.css?tag=pf-date-picker&encapsulation=shadow","src/components/pf-date-picker/pf-date-picker.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-1);\n}\n\n.label {\n  color: var(--pf-field-label-text, var(--pf-input-label-text));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-input-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.row {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-text);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  min-width: 0;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n}\n\n.trigger:hover:not(:disabled) {\n  border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-input-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-input-placeholder-text);\n}\n\n.clear {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-input-text-muted, var(--pf-input-placeholder-text));\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.clear:hover:not(:disabled) {\n  color: var(--pf-input-text);\n}\n\n.clear:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.description {\n  color: var(--pf-input-description-text);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-input-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n * Declared here and set inline, because no test project applies this file.\n */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: none;\n  border: 0;\n  overflow: visible;\n  padding: 0;\n}\n\n.panel:popover-open {\n  animation: pf-date-picker-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-date-picker-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n","import {\n  composeDescribedBy,\n  Keys,\n  observeAnchoredPosition,\n  parseISODate,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated date field: a trigger that opens `pf-calendar` in a\n * popover.\n *\n * Form-associated, which the React `DatePicker` is not — it is a button and a\n * portal, so its value reaches a surrounding `<form>` only if the consumer\n * wires it there themselves. Here the value is submitted as `YYYY-MM-DD`,\n * constraint validation works, and Angular's generated accessor has something\n * to bind to.\n *\n * The panel is a `popover`, so light dismiss and Escape are the browser's.\n * Unlike `pf-dropdown`, the trigger and the panel are both in *this* shadow\n * root, so `aria-controls` resolves and is worth setting — a same-root IDREF\n * is the one case that works, measured.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the calendar.\n * @part clear - the clear button.\n * @part panel - the floating panel holding the calendar.\n * @part calendar - the calendar itself.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-date-picker',\n  styleUrl: 'pf-date-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfDatePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because the submission name comes\n   * from the content attribute and the generated bindings set properties.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The selected date as `YYYY-MM-DD`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the calendar is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Visible label. In the same root as the trigger, 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 = 'Select a date';\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() allowClear = false;\n\n  /** Earliest selectable date, as `YYYY-MM-DD`. */\n  @Prop() min?: string;\n\n  /** Latest selectable date, as `YYYY-MM-DD`. */\n  @Prop() max?: string;\n\n  @Prop() startYear?: number;\n\n  @Prop() endYear?: number;\n\n  @Prop() showOutsideDays = true;\n\n  /** A predicate for days that cannot be chosen; see `pf-calendar`. */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires when a date is chosen or cleared. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the calendar opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** What a form reset restores; `value` has been overwritten by then. */\n  private initialValue = '';\n\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\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  /** The one place an open or close is announced, whatever caused it. */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** Opens the calendar. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the calendar. */\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  /** A reset restores the value the field started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private get calendar() {\n    return (\n      this.el.shadowRoot?.querySelector<HTMLElement & { focusSelectedDay(): Promise<void> }>(\n        'pf-calendar',\n      ) ?? null\n    );\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    // Focus the grid, not the panel: the calendar owns its own tab stop, and\n    // it asks for focus through a method rather than having it reached for.\n    void this.calendar?.focusSelectedDay();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /**\n   * Mirrors a browser-driven close — a light dismiss or Escape — back into\n   * `open`, which is what then announces it.\n   */\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  /**\n   * Listens on the calendar element itself, not on the host.\n   *\n   * Both were tried. A `@Listen('pfChange')` on the host sees the calendar's\n   * event *and* this element's own — a Stencil event is composed, so by then\n   * both have been retargeted to the host and `event.target` cannot tell them\n   * apart. Worse, `stopPropagation()` there does not help: the consumer's\n   * listener is on that same node, and stopping propagation never stops\n   * same-node listeners, so every pick reported twice. Caught by a test that\n   * counted them.\n   *\n   * On the calendar, the event is stopped before it reaches the host at all,\n   * which does not depend on listener registration order the way\n   * `stopImmediatePropagation` would.\n   */\n  private bindCalendar = (element?: HTMLElement) => {\n    if (!element || element === this.boundCalendar) return;\n    this.boundCalendar = element;\n    element.addEventListener('pfChange', this.onCalendarChange as EventListener);\n  };\n\n  private boundCalendar?: HTMLElement;\n\n  private onCalendarChange = (event: CustomEvent<{ value: string }>) => {\n    event.stopPropagation();\n\n    this.value = event.detail.value;\n    this.pfChange.emit({ value: this.value });\n    this.open = false;\n    this.trigger?.focus();\n  };\n\n  private clear = (event: MouseEvent) => {\n    event.stopPropagation();\n    if (!this.value) return;\n    this.value = '';\n    this.pfChange.emit({ value: '' });\n  };\n\n  /**\n   * Down opens the calendar from a closed trigger, as a popup button should.\n   * Escape is the browser's while the panel is open — `popover=\"auto\"` handles\n   * it — so there is nothing to do here for it.\n   */\n  private onTriggerKeyDown = (event: KeyboardEvent) => {\n    if (this.open || this.disabled) return;\n    if (event.key === Keys.ArrowDown || event.key === Keys.Enter || event.key === Keys.Space) {\n      if (event.key === Keys.ArrowDown) {\n        event.preventDefault();\n        this.open = true;\n      }\n    }\n  };\n\n  /** `MMM D, YYYY`, matching the React component's trigger text. */\n  private formatted(): string {\n    const date = parseISODate(this.value);\n    if (!date) return '';\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    }).format(date);\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const text = this.formatted();\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class=\"row\">\n            <button\n              id=\"trigger\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"trigger\"\n              class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n              type=\"button\"\n              disabled={this.disabled}\n              aria-haspopup=\"dialog\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              /* Same shadow root as the panel, so this IDREF resolves. */\n              aria-controls=\"panel\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-describedby={describedBy}\n              onClick={() => {\n                if (!this.disabled) this.open = !this.open;\n              }}\n              onKeyDown={this.onTriggerKeyDown}\n            >\n              <span class={{ value: true, 'value--placeholder': !text }}>\n                {text || this.placeholder}\n              </span>\n              <pf-icon name=\"calendar\"></pf-icon>\n            </button>\n\n            {this.allowClear && this.value && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label=\"Clear selected date\"\n                disabled={this.disabled}\n                onClick={this.clear}\n              >\n                <pf-icon name=\"circle-xmark\"></pf-icon>\n              </button>\n            )}\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=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a date\"\n          onToggle={this.onToggle}\n        >\n          <pf-calendar\n            ref={this.bindCalendar}\n            part=\"calendar\"\n            value={this.value || undefined}\n            min={this.min}\n            max={this.max}\n            startYear={this.startYear}\n            endYear={this.endYear}\n            showOutsideDays={this.showOutsideDays}\n            isDateDisabled={this.isDateDisabled}\n          ></pf-calendar>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-date-range-picker.d.ts

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

package/dist/components/pf-date-range-picker.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,c as r,h as s,a as n}from"./index.js";import{o as i,p as o}from"./p-CC7AyfOt.js";import{c as d}from"./p-DfpCerXM.js";import{t as l,d as c,s as h,f as p,c as f,i as u,p as g,m as b,a as m,e as y,b as v,W as w,C as k}from"./p-C9jNMqLs.js";import{K as x}from"./p-g4FlTDZx.js";import{a as C}from"./p-Cr6IXrUk.js";import{c as D}from"./p-Cy_kHPeC.js";import{d as F}from"./p-CkFjPRTe.js";function S(e,t){const a=l(t);if(!e.awaitingEnd||!e.range.start)return{range:{start:a,end:null},awaitingEnd:true};const r=e.range.start;if(c(r,a))return{range:{start:a,end:null},awaitingEnd:true};return{range:a.getTime()<r.getTime()?{start:a,end:r}:{start:r,end:a},awaitingEnd:false}}function j(e,t,a=null){const{start:r}=t;const s=t.end??(r&&a?a:null);const n=Boolean(r&&c(e,r));const i=Boolean(s&&c(e,s));if(!r||!s)return{isStart:n,isEnd:i,isInside:false};const[o,d]=r.getTime()<=s.getTime()?[r,s]:[s,r];const l=e.getTime();return{isStart:n,isEnd:i,isInside:l>o.getTime()&&l<d.getTime()}}function z(e,t){if(!e.start||!e.end)return"";return`${t(e.start)}/${t(e.end)}`}function M(e,t){const[a,r]=(e??"").split("/");const s=t(a??"");const n=t(r??"");if(!s||!n)return{start:null,end:null};return s.getTime()<=n.getTime()?{start:s,end:n}:{start:n,end:s}}const E=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-daterange-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-daterange-invalid-border);margin-inline-start:var(--space-1)}.row-controls{align-items:center;display:flex;gap:var(--space-2)}.trigger{align-items:center;background:var(--pf-daterange-bg);border:1px solid var(--pf-daterange-border);border-radius:var(--radius-md);color:var(--pf-daterange-text);cursor:pointer;display:flex;flex:1;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;min-width:0;padding:var(--space-2) var(--space-3);text-align:start}.trigger:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-daterange-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-daterange-text-muted)}.clear{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-daterange-text-muted);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:var(--space-1)}.clear:hover:not(:disabled){color:var(--pf-daterange-text)}.clear:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.description{color:var(--pf-daterange-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-daterange-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:var(--pf-daterange-menu-bg);border:1px solid var(--pf-daterange-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);color:var(--pf-daterange-text);padding:var(--space-3)}.panel:popover-open{animation:pf-date-range-in var(--pf-transition-enter)}@keyframes pf-date-range-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}.nav{display:flex;justify-content:space-between;margin-bottom:var(--space-2)}.step{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-daterange-text-muted);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1)}.step:hover{background:var(--pf-daterange-bg-subtle);color:var(--pf-daterange-text)}.step:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.months{display:grid;gap:var(--space-4)}@media (min-width: 768px){.months{grid-template-columns:1fr 1fr}}.month-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-2);text-align:center}.grid{display:grid;gap:2px;grid-template-columns:repeat(7, 1fr)}.row{display:contents}.weekday{color:var(--pf-daterange-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--space-1) 0;text-align:center}.day,.empty{aspect-ratio:1;display:flex;min-width:var(--space-7)}.day{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-daterange-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);justify-content:center}.day:hover:not([aria-disabled='true']){background:var(--pf-daterange-bg-subtle)}.day:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.day--today{border-color:var(--pf-calendar-today-border)}.day--inside{background:var(--pf-daterange-range-bg);border-radius:0;color:var(--pf-daterange-range-text)}.day--endpoint{background:var(--pf-calendar-selected-bg);border-color:var(--pf-calendar-selected-bg);color:var(--pf-calendar-selected-text)}.day--start:not(.day--end){border-end-end-radius:0;border-start-end-radius:0}.day--end:not(.day--start){border-end-start-radius:0;border-start-start-radius:0}.day[aria-disabled='true']{cursor:not-allowed;opacity:0.4}`;const q={[x.ArrowRight]:"day-next",[x.ArrowLeft]:"day-previous",[x.ArrowDown]:"week-next",[x.ArrowUp]:"week-previous",[x.Home]:"week-start",[x.End]:"week-end",PageDown:"month-next",PageUp:"month-previous"};const O=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=r(this,"pfChange");this.pfOpenChange=r(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";open=false;label;description;error;placeholder="Select dates";required=false;disabled=false;allowClear=false;min;max;startYear;endYear;isDateDisabled;pfChange;pfOpenChange;leftMonth=h(new Date);focusedDate=l(new Date);hovered=null;awaitingEnd=false;initialValue="";pendingStart=null;stopObserving;shouldRestoreFocus=false;componentWillLoad(){this.initialValue=this.value??"";const{start:e}=this.range();const t=e??l(new Date);this.focusedDate=t;this.leftMonth=this.clamp(h(t));this.syncFormState()}componentDidRender(){if(!this.shouldRestoreFocus)return;this.shouldRestoreFocus=false;this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus()}disconnectedCallback(){this.stopObserving?.()}syncDisplayedMonths(){const{start:e,end:t}=this.range();if(!e||!t)return;this.pendingStart=null;this.awaitingEnd=false;this.focusedDate=e;this.leftMonth=this.clamp(h(e))}syncFormState(){const{start:e,end:t}=this.range();if(!e||!t||!this.name){this.internals.setFormValue(null)}else{const a=new FormData;a.append(`${this.name}-start`,p(e));a.append(`${this.name}-end`,p(t));this.internals.setFormValue(a)}C(this.internals,Boolean(e&&t),this.required,this.error)}syncOpen(e,t){if(e)this.showPanel();else this.hidePanel();if(e!==t)this.pfOpenChange.emit({open:e})}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.awaitingEnd=false;this.hovered=null}range(){return M(this.value,g)}get years(){const e=(new Date).getFullYear();const t=this.startYear??e-50;const a=this.endYear??e+50;return{start:Math.min(t,a),end:Math.max(t,a)}}clamp(e){const{start:t,end:a}=this.years;return f(e,t,a)}get panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}isDisabled(e){if(u(e,g(this.min),g(this.max)))return true;return this.isDateDisabled?.(e)??false}showPanel(){const e=this.panel;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=i({getAnchor:()=>this.trigger,getFloating:()=>e,align:"start",matchAnchorWidth:false,flip:true,onChange:({left:t,top:a})=>o(e,t,a)});this.shouldRestoreFocus=true}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;this.hovered=null;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t)this.trigger?.focus()};pick(e){if(this.isDisabled(e))return;const t=S({range:this.displayRange(),awaitingEnd:this.awaitingEnd},e);this.awaitingEnd=t.awaitingEnd;this.focusedDate=l(e);if(t.awaitingEnd){this.value="";this.pendingStart=t.range.start;return}this.pendingStart=null;this.hovered=null;this.value=z(t.range,p);this.pfChange.emit({value:this.value,start:t.range.start?p(t.range.start):"",end:t.range.end?p(t.range.end):""});this.open=false}displayRange(){const e=this.range();if(e.start&&e.end)return e;return{start:this.pendingStart,end:null}}moveFocus(e){const t=b(this.focusedDate,e);const{start:a,end:r}=this.years;if(t.getFullYear()<a||t.getFullYear()>r)return;this.focusedDate=t;this.shouldRestoreFocus=true;const s=m(this.leftMonth,1);if(!y(t,this.leftMonth)&&!y(t,s)){this.leftMonth=this.clamp(h(t))}}onKeyDown=e=>{const t=q[e.key];if(t){e.preventDefault();this.moveFocus(t);return}if(e.key===x.Enter||e.key===x.Space){e.preventDefault();this.pick(this.focusedDate);this.shouldRestoreFocus=true}};clear=e=>{e.stopPropagation();if(!this.value&&!this.pendingStart)return;this.value="";this.pendingStart=null;this.awaitingEnd=false;this.hovered=null;this.pfChange.emit({value:"",start:"",end:""})};formatted(){const{start:e,end:t}=this.range();if(!e||!t)return"";const a=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"});return`${a.format(e)} – ${a.format(t)}`}renderGrid(e){const t=v(e);const a=this.displayRange();const r=l(new Date);const n=new Intl.DateTimeFormat("en-US",{month:"long",year:"numeric"}).format(e);return s("div",{class:"month"},s("p",{class:"month-label"},n),s("div",{class:"grid",part:"grid",role:"grid","aria-label":n},s("div",{class:"row",role:"row"},w.map((e=>s("span",{key:e,class:"weekday",role:"columnheader","aria-label":e},e)))),Array.from({length:k/7},((e,n)=>s("div",{key:n,class:"row",role:"row"},t.slice(n*7,n*7+7).map((({date:e,inCurrentMonth:t})=>{if(!t){return s("span",{key:p(e),class:"empty",role:"gridcell"})}const n=j(e,a,this.hovered);const i=n.isStart||n.isEnd;const o=this.isDisabled(e);return s("button",{key:p(e),type:"button",role:"gridcell","data-day":p(e),part:"day",class:{day:true,"day--today":c(r,e),"day--endpoint":i,"day--start":n.isStart,"day--end":n.isEnd,"day--inside":n.isInside},tabindex:c(this.focusedDate,e)?0:-1,"aria-selected":i||n.isInside?"true":"false","aria-current":c(r,e)?"date":null,"aria-disabled":o?"true":null,"aria-label":new Intl.DateTimeFormat("en-US",{weekday:"long",month:"long",day:"numeric",year:"numeric"}).format(e),onClick:()=>{this.pick(e);this.shouldRestoreFocus=true},onMouseEnter:()=>{if(this.awaitingEnd&&!o)this.hovered=e}},e.getDate())})))))))}render(){const e=d(this.description&&"description",this.error&&"error");const t=this.formatted();const a=m(this.leftMonth,1);return s(n,{key:"e581ed7c3a2449e96b594a4d650d7d16225c502b"},s("div",{key:"42af6feb4a669c989f734bf179e0f60c24a47401",class:"field",part:"field"},this.label&&s("label",{key:"5a6b9ea4e2bcdb7c07801c474a901ae4019d397f",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&s("span",{key:"6e90bc09ed442464ea424d47e60a64951df45eea",class:"required","aria-hidden":"true"},"*")),s("div",{key:"b0b66d4bf30cc7228e7e2153e9be05d71401ec20",class:"row-controls"},s("button",{key:"46cfbfeb5e679bb00dd48e7b718350db4530e82e",id:"trigger","aria-label":D(this.el,this.label),part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",disabled:this.disabled,"aria-haspopup":"dialog","aria-expanded":this.open?"true":"false","aria-controls":"panel","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":e,onClick:()=>{if(!this.disabled)this.open=!this.open}},s("span",{key:"4bcf49fdfed1cef4f458c5019315ea833d8575e0",class:{value:true,"value--placeholder":!t}},t||this.placeholder),s("pf-icon",{key:"da03fb4ccb5aef720f042adae79d701148ade479",name:"calendar"})),this.allowClear&&(this.value||this.pendingStart)&&s("button",{key:"f6b36144e765a28a15e7addf3d10d4aff1d25a00",class:"clear",part:"clear",type:"button","aria-label":"Clear selected dates",disabled:this.disabled,onClick:this.clear},s("pf-icon",{key:"f4fb9769008137437b26c14c54d4d73909729da9",name:"circle-xmark"}))),this.description&&s("p",{key:"084a2a397d5277d237310cd9c202dce0028fcf78",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"9fa6a9400ded59e6c0263012ce4d4be1d04c9352",class:"error",part:"error",id:"error"},this.error)),s("div",{key:"f8b15d11302ae13a7d9d21fea5ce5db3d0c407cc",id:"panel",part:"panel",class:"panel",popover:"auto",role:"dialog","aria-label":"Choose a date range",onToggle:this.onToggle,onKeyDown:this.onKeyDown,onMouseLeave:()=>{this.hovered=null}},s("div",{key:"39a29079e9e97d19272ef9d5ec9fa02c2c368f6a",class:"nav"},s("button",{key:"8e0fb9c8e800e53a88dfa98c928966a919f4dee0",type:"button",class:"step","aria-label":"Previous month",onClick:()=>{this.leftMonth=this.clamp(m(this.leftMonth,-1))}},s("pf-icon",{key:"df4f5aa6dfc5b387a9d73c674f25e5f445ad4778",name:"square-caret-left"})),s("button",{key:"c48a949065acfb0e16fce8b732399f6fa9d8204c",type:"button",class:"step","aria-label":"Next month",onClick:()=>{this.leftMonth=this.clamp(m(this.leftMonth,1))}},s("pf-icon",{key:"10ae6ca6d30cbfdbd538d1a5247a6c83b299fd7a",name:"square-caret-right"}))),s("div",{key:"46610cb99d27eda167a28c281a5c1462fd5ab19c",class:"months"},this.renderGrid(this.leftMonth),this.renderGrid(a))))}static get formAssociated(){return true}static get watchers(){return{value:[{syncDisplayedMonths:0},{syncFormState:0}],name:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}static get style(){return E()}},[577,"pf-date-range-picker",{name:[513],value:[1025],open:[1540],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],allowClear:[4,"allow-clear"],min:[1],max:[1],startYear:[2,"start-year"],endYear:[2,"end-year"],isDateDisabled:[16],leftMonth:[32],focusedDate:[32],hovered:[32],awaitingEnd:[32],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{value:[{syncDisplayedMonths:0},{syncFormState:0}],name:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function P(){if(typeof customElements==="undefined"){return}const t=["pf-date-range-picker","pf-icon"];t.forEach((t=>{switch(t){case"pf-date-range-picker":if(!customElements.get(e(t))){customElements.define(e(t),O)}break;case"pf-icon":if(!customElements.get(e(t))){F()}break}}))}P();const V=O;const I=P;export{V as PfDateRangePicker,I as defineCustomElement};
+//# sourceMappingURL=pf-date-range-picker.js.map