@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,c as r,h as n,a as i}from"./index.js";const o=()=>`:host{display:block}:host([hidden]){display:none}:host([orientation='horizontal']){flex:0 0 auto}.link{align-items:center;background:transparent;border:0;border-radius:var(--pf-nav-item-radius, var(--radius-sm));color:var(--pf-nav-item-text);cursor:pointer;display:flex;font:inherit;gap:var(--pf-nav-item-gap, var(--space-2));min-height:var(--pf-nav-item-min-height, 32px);padding:var(--pf-nav-item-padding, 0 var(--space-2));text-decoration:none;white-space:nowrap}:host([orientation='vertical']) .link{min-height:var(--pf-nav-item-vertical-min-height, 36px);padding:var(--pf-nav-item-vertical-padding, 0 var(--space-3));width:100%}.link:hover{background:var(--pf-nav-item-hover-bg);color:var(--pf-nav-item-hover-text)}a.link:focus-visible{box-shadow:var(--pf-nav-item-focus-ring, var(--pf-focus-ring));outline:none}:host([current-page]) .link{background:var(--pf-nav-item-current-bg);color:var(--pf-nav-item-current-text);font-weight:var(--font-weight-semibold)}:host([disabled]) .link{cursor:not-allowed;opacity:var(--pf-nav-item-disabled-opacity, 0.5)}:host([disabled]) .link:hover{background:transparent;color:var(--pf-nav-item-text)}.label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}:host([orientation='horizontal']) .label{flex:0 0 auto}::slotted([slot='icon']){color:inherit;flex:0 0 auto}::slotted([slot='badge']){flex:0 0 auto}::slotted(a),::slotted(button){align-items:center;align-self:stretch;background:none;border:0;color:inherit;cursor:inherit;display:flex;flex:1 1 auto;font:inherit;margin:0;padding:0;text-decoration:none}`;const s=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfNavStructure=r(this,"pfNavStructure")}href;target;rel;current=false;pfNavStructure;handleCurrentChange(){this.pfNavStructure.emit()}currentPage=false;disabled=false;orientation="horizontal";render(){const e=[n("slot",{key:"b478a66b7ae6c6d00b18f762600435dbac37996d",name:"icon"}),n("span",{key:"4b1ddbe87804c604d492b00bbc743299c54f7240",class:"label",part:"label"},n("slot",{key:"86778db42fef8af44096211cd8a743155dca3fb0"})),n("slot",{key:"02fef2701ef217701ce18e71e9ff873dc3bd3a44",name:"badge"})];return n(i,{key:"c4ee7f6245eedd2bf0546ebcb987120212ea18e3",role:"listitem"},this.href&&!this.disabled?n("a",{class:"link",part:"link",href:this.href,target:this.target,rel:this.rel,"aria-current":this.currentPage?"page":null},e):n("span",{class:"link",part:"link","aria-current":this.currentPage?"page":null,"aria-disabled":this.disabled?"true":null},e))}static get watchers(){return{current:[{handleCurrentChange:0}]}}static get style(){return o()}},[769,"pf-nav-item",{href:[513],target:[1],rel:[1],current:[516],currentPage:[1540,"current-page"],disabled:[516],orientation:[1537]},undefined,{current:[{handleCurrentChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-nav-item"];t.forEach((t=>{switch(t){case"pf-nav-item":if(!customElements.get(e(t))){customElements.define(e(t),s)}break}}))}l();const c=s;const d=l;export{c as PfNavItem,d as defineCustomElement};
+//# sourceMappingURL=pf-nav-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfNavItemCss","PfNavItem","__stencil_proxyCustomElement","HTMLElement","href","target","rel","current","pfNavStructure","handleCurrentChange","this","emit","currentPage","disabled","orientation","render","content","h","key","name","class","part","Host","role"],"sources":["src/components/pf-nav-item/pf-nav-item.css?tag=pf-nav-item&encapsulation=shadow","src/components/pf-nav-item/pf-nav-item.tsx"],"sourcesContent":["/*\n * This element is shared by pf-header-navigation and pf-sidebar-navigation,\n * whose React counterparts have separate alias families with their own\n * values. Rather than pick one and diverge from the other, the item reads a\n * generic `--pf-nav-item-*` set that each navigation defines on itself --\n * custom properties inherit through the shadow boundary, so a slotted item\n * picks up whichever navigation it is inside, which no selector can do\n * (`:host-context` is not in Firefox). Exactly the pf-option arrangement, for\n * the same reason. There is deliberately no `:root` default: without one the\n * bridge is load-bearing, and a missing one shows up as an item with no\n * colours at all rather than as one that quietly looks right.\n */\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex: 0 0 auto;\n}\n\n.link {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pf-nav-item-radius, var(--radius-sm));\n  color: var(--pf-nav-item-text);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  gap: var(--pf-nav-item-gap, var(--space-2));\n  min-height: var(--pf-nav-item-min-height, 32px);\n  padding: var(--pf-nav-item-padding, 0 var(--space-2));\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n:host([orientation='vertical']) .link {\n  min-height: var(--pf-nav-item-vertical-min-height, 36px);\n  padding: var(--pf-nav-item-vertical-padding, 0 var(--space-3));\n  width: 100%;\n}\n\n.link:hover {\n  background: var(--pf-nav-item-hover-bg);\n  color: var(--pf-nav-item-hover-text);\n}\n\na.link:focus-visible {\n  box-shadow: var(--pf-nav-item-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n/*\n * `current-page` is the group's answer, not the consumer's `current` ask: the\n * highlight and the announcement are the same decision, so they read the same\n * attribute.\n */\n:host([current-page]) .link {\n  background: var(--pf-nav-item-current-bg);\n  color: var(--pf-nav-item-current-text);\n  font-weight: var(--font-weight-semibold);\n}\n\n:host([disabled]) .link {\n  cursor: not-allowed;\n  opacity: var(--pf-nav-item-disabled-opacity, 0.5);\n}\n\n:host([disabled]) .link:hover {\n  background: transparent;\n  color: var(--pf-nav-item-text);\n}\n\n/* The label takes the slack so a badge sits at the far edge of a sidebar. */\n.label {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([orientation='horizontal']) .label {\n  flex: 0 0 auto;\n}\n\n/*\n * No wrapper around the icon and badge slots: an unassigned slot is\n * `display: contents` and generates nothing, while a wrapper around one\n * cannot be collapsed from CSS and would cost a gap in front of every label\n * with no icon.\n */\n::slotted([slot='icon']) {\n  color: inherit;\n  flex: 0 0 auto;\n}\n\n::slotted([slot='badge']) {\n  flex: 0 0 auto;\n}\n\n/*\n * A consumer's own router link, slotted in with no `href` of ours. It fills\n * the box's content area rather than being a word inside it, and it inherits\n * every colour the box resolved, so hover and the current page look the same\n * whichever of the two is the control.\n */\n::slotted(a),\n::slotted(button) {\n  align-items: center;\n  align-self: stretch;\n  background: none;\n  border: 0;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  flex: 1 1 auto;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.\n *\n * Shared by both, because the React library's `HeaderNavigationItem` and\n * `SidebarNavigationItem` are the same shape — one element rather than two\n * that would drift. What differs is the layout, and that is the group's to\n * say: it pushes `orientation` down, which is the only thing an item cannot\n * work out for itself.\n *\n * With an `href` it renders a link; without one it renders a plain box, which\n * is how a framework's own router is used — slot an `<a routerLink>` or a\n * `<Link>` in and leave `href` unset.\n *\n * `currentPage` and `orientation` are the group's to set. A consumer asks by\n * setting `current`; the group resolves every item with core's rule and\n * writes the answer to `currentPage`. Changing the ask tells the group, so\n * the answer follows a framework's re-render without the consumer calling\n * anything.\n *\n * @slot - the item's label.\n * @slot icon - a leading icon.\n * @slot badge - a trailing badge or count.\n * @part link - the link, or the box standing in for one.\n */\n@Component({\n  tag: 'pf-nav-item',\n  styleUrl: 'pf-nav-item.css',\n  shadow: true,\n})\nexport class PfNavItem {\n  /** Where the item goes. Reflected; a consumer's stylesheet reads it. */\n  @Prop({ reflect: true }) href?: string;\n\n  /** Opens elsewhere, as on a plain anchor. Ignored without an `href`. */\n  @Prop() target?: string;\n\n  /** Goes on the anchor as-is. Ignored without an `href`. */\n  @Prop() rel?: string;\n\n  /**\n   * Set it to mark this item as the current page.\n   *\n   * The *asking* half, which the group never writes — `currentPage` below is\n   * the answer. The two are kept apart for the reason `pf-breadcrumb` keeps\n   * them apart: a group that wrote its answer back would leave the mark\n   * behind on an item the consumer had not marked.\n   */\n  @Prop({ reflect: true }) current = false;\n\n  /**\n   * Tells the group the ask changed, so it can resolve again.\n   *\n   * The same event `pf-nav-section` emits when its items move, because the\n   * groups do the same thing with both: re-read every item and resolve the\n   * one current page. Without this a navigation resolves at load and never\n   * again for a consumer who marks items through the *property*, which is\n   * every framework consumer — the generated bindings set props as\n   * properties, so there is no attribute change and no `slotchange` either.\n   * The symptom is a navigation whose highlight never moves while the router\n   * works perfectly, which is what porting `apps/demo` ran into.\n   *\n   * `current` only. Watching `currentPage` would loop, since that is what the\n   * group writes back.\n   */\n  @Event() pfNavStructure!: EventEmitter<void>;\n\n  @Watch('current')\n  handleCurrentChange() {\n    this.pfNavStructure.emit();\n  }\n\n  /**\n   * Set by the group: the resolved current page, which is the one thing that\n   * renders `aria-current=\"page\"`. At most one item in a navigation carries\n   * it, and the highlight follows it rather than `current` — a second\n   * highlighted item with no `aria-current` would be a sighted-only lie.\n   */\n  @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n  /**\n   * Takes the item out of the navigation without removing it.\n   *\n   * A disabled item renders **no anchor at all**, because an anchor has no\n   * disabled state: `aria-disabled` alone leaves it focusable and clickable,\n   * and dropping the `href` is the only thing that really takes it out of the\n   * tab order.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the group, which is the only one that knows which it is. */\n  @Prop({ mutable: true, reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    const content = [\n      <slot name=\"icon\" />,\n      <span class=\"label\" part=\"label\">\n        <slot />\n      </span>,\n      <slot name=\"badge\" />,\n    ];\n\n    return (\n      <Host role=\"listitem\">\n        {this.href && !this.disabled ? (\n          <a\n            class=\"link\"\n            part=\"link\"\n            href={this.href}\n            target={this.target}\n            rel={this.rel}\n            aria-current={this.currentPage ? 'page' : null}\n          >\n            {content}\n          </a>\n        ) : (\n          <span\n            class=\"link\"\n            part=\"link\"\n            aria-current={this.currentPage ? 'page' : null}\n            aria-disabled={this.disabled ? 'true' : null}\n          >\n            {content}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAe,IAAM,6hD,MC+BdC,EAASC,EAAA,MAAAD,UAAAE,E,8HAEKC,KAGjBC,OAGAC,IAUiBC,QAAU,MAiB1BC,eAGT,mBAAAC,GACEC,KAAKF,eAAeG,M,CASkBC,YAAc,MAU7BC,SAAW,MAGIC,YAAyC,aAEjF,MAAAC,GACE,MAAMC,EAAU,CACdC,EAAA,QAAAC,IAAA,2CAAMC,KAAK,SACXF,EAAA,QAAAC,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACvBJ,EAAA,QAAAC,IAAA,8CAEFD,EAAA,QAAAC,IAAA,2CAAMC,KAAK,WAGb,OACEF,EAACK,EAAI,CAAAJ,IAAA,2CAACK,KAAK,YACRb,KAAKN,OAASM,KAAKG,SAClBI,EAAA,KACEG,MAAM,OACNC,KAAK,OACLjB,KAAMM,KAAKN,KACXC,OAAQK,KAAKL,OACbC,IAAKI,KAAKJ,IAAG,eACCI,KAAKE,YAAc,OAAS,MAEzCI,GAGHC,EAAA,QACEG,MAAM,OACNC,KAAK,OAAM,eACGX,KAAKE,YAAc,OAAS,KAAI,gBAC/BF,KAAKG,SAAW,OAAS,MAEvCG,G","ignoreList":[]}

package/dist/components/pf-nav-section.d.ts

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

package/dist/components/pf-nav-section.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,c as i,h as a,a as n}from"./index.js";const l=()=>`:host{display:grid;gap:var(--space-1)}:host([hidden]){display:none}.title{color:var(--pf-sidebar-nav-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.04em;margin:0;padding:0 var(--space-2);text-transform:uppercase}.title.empty{display:none}.list{display:grid;gap:2px;list-style:none;margin:0;padding:0}.list slot{display:contents}`;const c=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfNavStructure=i(this,"pfNavStructure")}get el(){return this}hasTitle=false;pfNavStructure;componentWillLoad(){this.readTitle()}readTitle(){this.hasTitle=Array.from(this.el.children).some((t=>t.getAttribute("slot")==="title"))}handleSlotChange(){this.readTitle();this.pfNavStructure.emit()}render(){return a(n,{key:"403390422ffe79fd7074cf127380b4c01f06e64c"},a("p",{key:"9da8bd54057acfdbcc8b05e843557ea13792e98c",class:{title:true,empty:!this.hasTitle},part:"title",id:"title"},a("slot",{key:"f5d6f38608e937f8842d0e2e5bf19773f38df1bd",name:"title",onSlotchange:()=>this.handleSlotChange()})),a("ul",{key:"536b579b106d4bc926a2ea309157e50dddc563c1",class:"list",part:"list","aria-labelledby":this.hasTitle?"title":null},a("slot",{key:"f80ef7903620ff32262dc8995f73ecb1c4971c57",onSlotchange:()=>this.handleSlotChange()})))}static get style(){return l()}},[769,"pf-nav-section",{hasTitle:[32]}]);function o(){if(typeof customElements==="undefined"){return}const e=["pf-nav-section"];e.forEach((e=>{switch(e){case"pf-nav-section":if(!customElements.get(t(e))){customElements.define(t(e),c)}break}}))}o();const r=c;const d=o;export{r as PfNavSection,d as defineCustomElement};
+//# sourceMappingURL=pf-nav-section.js.map

package/dist/components/pf-nav-section.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfNavSectionCss","PfNavSection","__stencil_proxyCustomElement","HTMLElement","hasTitle","pfNavStructure","componentWillLoad","this","readTitle","Array","from","el","children","some","child","getAttribute","handleSlotChange","emit","render","h","Host","key","class","title","empty","part","id","name","onSlotchange"],"sources":["src/components/pf-nav-section/pf-nav-section.css?tag=pf-nav-section&encapsulation=shadow","src/components/pf-nav-section/pf-nav-section.tsx"],"sourcesContent":[":host {\n  display: grid;\n  gap: var(--space-1);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.title {\n  color: var(--pf-sidebar-nav-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: 0 var(--space-2);\n  text-transform: uppercase;\n}\n\n/*\n * Both classes rather than a bare `.empty`, so the rule does not depend on\n * sitting below the `display` the box sets on itself.\n */\n.title.empty {\n  display: none;\n}\n\n.list {\n  display: grid;\n  gap: 2px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* The items are grid children of the list, not of a box inside it. */\n.list slot {\n  display: contents;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, State } from '@stencil/core';\n\n/**\n * A titled group of `pf-nav-item` children inside a `pf-sidebar-navigation`.\n *\n * The React `SidebarNavigation` takes a `sections` array of `{ title, items }`.\n * Grouping slotted children has to be structural — one `<slot>` renders every\n * assigned child in source order, and a shadow root cannot wrap a subset of\n * them in a box — so the consumer nests, which is the §2.1 idiom and the same\n * answer `pf-command-group` gives.\n *\n * The title names the list with a **same-root** IDREF: both the title and the\n * `<ul>` are in this shadow root, so the reference resolves. An\n * `aria-labelledby` from the host could not point at either of them.\n *\n * @slot - the `pf-nav-item` children.\n * @slot title - the section's title.\n * @part title - the title's box.\n * @part list - the list the items are slotted into.\n */\n@Component({\n  tag: 'pf-nav-section',\n  styleUrl: 'pf-nav-section.css',\n  shadow: true,\n})\nexport class PfNavSection {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Whether anything was slotted into `title`.\n   *\n   * Asked in JS because the box carries padding and a size of its own, and\n   * because an `aria-labelledby` pointing at an empty element names the list\n   * with an empty string rather than falling back to nothing.\n   */\n  @State() hasTitle = false;\n\n  /**\n   * Tells the navigation its items have moved.\n   *\n   * `slotchange` is not composed, so the navigation never hears this\n   * section's own slot change — exactly the reason `pf-tree-item` emits\n   * `pfTreeStructure`. Without it an item appended to a section is never\n   * given an orientation or a place in the one-current resolution.\n   */\n  @Event() pfNavStructure!: EventEmitter<void>;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.readTitle();\n  }\n\n  private readTitle() {\n    /*\n     * `el.children` rather than a `:scope >` selector, which Stencil's mock\n     * DOM throws on.\n     */\n    this.hasTitle = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'title',\n    );\n  }\n\n  private handleSlotChange() {\n    this.readTitle();\n    this.pfNavStructure.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        {/*\n          The slot stays in the tree whether or not it holds anything: a slot\n          that is not rendered never fires `slotchange`, so a title added\n          later would stay invisible for good.\n        */}\n        <p class={{ title: true, empty: !this.hasTitle }} part=\"title\" id=\"title\">\n          <slot name=\"title\" onSlotchange={() => this.handleSlotChange()} />\n        </p>\n\n        <ul class=\"list\" part=\"list\" aria-labelledby={this.hasTitle ? 'title' : null}>\n          <slot onSlotchange={() => this.handleSlotChange()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAkB,IAAM,+X,MCyBjBC,EAAYC,EAAA,MAAAD,UAAAE,E,mJAUdC,SAAW,MAUXC,eAGT,iBAAAC,GACEC,KAAKC,W,CAGC,SAAAA,GAKND,KAAKH,SAAWK,MAAMC,KAAKH,KAAKI,GAAGC,UAAUC,MAC1CC,GAAUA,EAAMC,aAAa,UAAY,S,CAItC,gBAAAC,GACNT,KAAKC,YACLD,KAAKF,eAAeY,M,CAGtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CAMHF,EAAA,KAAAE,IAAA,2CAAGC,MAAO,CAAEC,MAAO,KAAMC,OAAQjB,KAAKH,UAAYqB,KAAK,QAAQC,GAAG,SAChEP,EAAA,QAAAE,IAAA,2CAAMM,KAAK,QAAQC,aAAc,IAAMrB,KAAKS,sBAG9CG,EAAA,MAAAE,IAAA,2CAAIC,MAAM,OAAOG,KAAK,OAAM,kBAAkBlB,KAAKH,SAAW,QAAU,MACtEe,EAAA,QAAAE,IAAA,2CAAMO,aAAc,IAAMrB,KAAKS,sB","ignoreList":[]}

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

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

package/dist/components/pf-notification.js

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as r,c as i,h as n,a as s}from"./index.js";import{c as a}from"./p-DfpCerXM.js";import{K as o}from"./p-g4FlTDZx.js";import{p as l,r as c,s as d,f as p,c as u}from"./p-DSXauhXX.js";import{a as f}from"./p-Cr6IXrUk.js";import{c as b}from"./p-Cy_kHPeC.js";import{d as h}from"./p-CkFjPRTe.js";const m=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-numberinput-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.control{align-items:stretch;background:var(--pf-numberinput-bg);border:1px solid var(--pf-numberinput-border);border-radius:var(--radius-md);display:inline-flex;min-height:40px;overflow:hidden;transition:border var(--pf-transition-fast),     box-shadow var(--pf-transition-fast);width:100%}.control:focus-within{border-color:var(--pf-numberinput-focus-border);box-shadow:var(--pf-numberinput-focus-ring, var(--pf-focus-ring))}.control--invalid{border-color:var(--pf-numberinput-invalid-border)}:host([disabled]) .control{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);opacity:0.6}.input{background:transparent;border:none;color:var(--pf-numberinput-text);flex:1;font:inherit;min-width:0;outline:none;padding:0 var(--space-3);text-align:center;width:100%}.input::placeholder{color:var(--pf-numberinput-placeholder)}.input:disabled{cursor:not-allowed}.step{align-items:center;align-self:stretch;background:var(--pf-numberinput-step-bg);border:none;color:var(--pf-numberinput-step-text);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:0;transition:background var(--pf-transition-fast),     color var(--pf-transition-fast);width:40px}.step:hover:not(:disabled){background:var(--pf-numberinput-step-hover-bg);color:var(--pf-numberinput-step-hover-text)}.step:disabled{cursor:not-allowed;opacity:0.45}[part='decrement']{border-inline-end:1px solid var(--pf-numberinput-border)}[part='increment']{border-inline-start:1px solid var(--pf-numberinput-border)}.step pf-icon{font-size:16px}.description{color:var(--pf-numberinput-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-field-error);font-size:var(--font-size-sm);margin:0}@media (prefers-reduced-motion: reduce){.control,.step{transition:none}}`;const v=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";min;max;step=1;label;description;error;placeholder;required=false;disabled=false;decrementLabel="Decrease";incrementLabel="Increase";pfChange;draft=null;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");f(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.draft=null}async stepBy(e){this.step_(e)}get bounds(){return{min:this.min===undefined?-Infinity:Number(this.min),max:this.max===undefined?Infinity:Number(this.max),step:Number(this.step)||1}}get current(){return l(this.value)}get atMin(){const{min:e}=this.bounds;return this.current!==null&&this.current<=e}get atMax(){const{max:e}=this.bounds;return this.current!==null&&this.current>=e}commit(e){const{min:t,max:r,step:i}=this.bounds;const n=e===null?"":String(c(u(e,t,r),i));if(n===this.value)return;this.value=n;this.pfChange.emit({value:n,number:l(n)})}step_(e){if(this.disabled)return;this.draft=null;this.commit(d(this.current,e,this.bounds))}onInput=e=>{const t=e.target.value;this.draft=t;const r=l(t);if(t.trim()===""){this.commit(null);return}if(r!==null)this.commit(r)};onBlur=()=>{this.draft=null};onKeyDown=e=>{if(this.disabled)return;const{min:t,max:r}=this.bounds;if(e.key===o.ArrowUp){e.preventDefault();this.step_(1)}else if(e.key===o.ArrowDown){e.preventDefault();this.step_(-1)}else if(e.key===o.Home&&Number.isFinite(t)){e.preventDefault();this.draft=null;this.commit(t)}else if(e.key===o.End&&Number.isFinite(r)){e.preventDefault();this.draft=null;this.commit(r)}};render(){const e=a(this.description&&"description",this.error&&"error");const{min:t,max:r}=this.bounds;const i=this.draft??p(this.current);return n(s,{key:"27f7f45a2732cbca6d252f4b9128901ed7868663"},n("div",{key:"75bfab2f72a83b830fd960e5fae19b9941eeae6c",class:"field",part:"field"},this.label&&n("label",{key:"f2e60206f153933cde6b36a23c510225bd5fb2ab",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&n("span",{key:"3925b4690d5b560190aaa04e7e7cf83453c7c49e",class:"required","aria-hidden":"true"},"*")),n("div",{key:"dcf1949c7fd8626c5a334fd3d72d8c4544369b41",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},n("button",{key:"03e3592fa8ff57a23e3675c475e7a66908af6cc3",type:"button",class:"step",part:"decrement","aria-label":this.decrementLabel,disabled:this.disabled||this.atMin,tabindex:"-1",onMouseDown:e=>e.preventDefault(),onClick:()=>this.step_(-1)},n("pf-icon",{key:"157e45ebe127230052c34215c3f88d487dacd41a",name:"minus","aria-hidden":"true"})),n("input",{key:"6fb05cb46de22b37387a16869f93b31b2ea6cc0a",id:"input","aria-label":b(this.el,this.label),part:"input",class:"input",type:"text",inputMode:"decimal",role:"spinbutton",name:this.name,value:i,placeholder:this.placeholder,required:this.required,disabled:this.disabled,autocomplete:"off","aria-invalid":this.error?"true":null,"aria-describedby":e,"aria-valuenow":this.current??null,"aria-valuemin":Number.isFinite(t)?t:null,"aria-valuemax":Number.isFinite(r)?r:null,onInput:this.onInput,onBlur:this.onBlur,onKeyDown:this.onKeyDown}),n("button",{key:"9b6eeddb4884a2961ac5a5cfe6a406111635cf79",type:"button",class:"step",part:"increment","aria-label":this.incrementLabel,disabled:this.disabled||this.atMax,tabindex:"-1",onMouseDown:e=>e.preventDefault(),onClick:()=>this.step_(1)},n("pf-icon",{key:"2a97e66ca7bf42c6d10a872c4b8eec52316d0784",name:"plus","aria-hidden":"true"}))),this.description&&n("p",{key:"3943b0c1ec5ad58d749b0e6d1fb5f60a17eb917e",class:"description",part:"description",id:"description"},this.description),this.error&&n("p",{key:"5aafabcd042976f000f906e6c16fc3eb45d57bf6",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}static get style(){return m()}},[593,"pf-number-input",{name:[513],value:[1025],min:[2],max:[2],step:[2],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],decrementLabel:[1,"decrement-label"],incrementLabel:[1,"increment-label"],draft:[32],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],stepBy:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["pf-number-input","pf-icon"];t.forEach((t=>{switch(t){case"pf-number-input":if(!customElements.get(e(t))){customElements.define(e(t),v)}break;case"pf-icon":if(!customElements.get(e(t))){h()}break}}))}y();const g=v;const x=y;export{g as PfNumberInput,x as defineCustomElement};
+//# sourceMappingURL=pf-number-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfNumberInputCss","PfNumberInput","__stencil_proxyCustomElement","HTMLElement","internals","name","value","min","max","step","label","description","error","placeholder","required","disabled","decrementLabel","incrementLabel","pfChange","draft","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","stepBy","direction","step_","bounds","undefined","Infinity","Number","current","parseNumberValue","atMin","atMax","commit","next","String","roundToStep","clampNumber","emit","number","stepNumber","onInput","event","raw","target","parsed","trim","onBlur","onKeyDown","key","Keys","ArrowUp","preventDefault","ArrowDown","Home","isFinite","End","render","describedBy","composeDescribedBy","shown","formatNumberValue","h","Host","class","part","htmlFor","control","type","tabindex","onMouseDown","onClick","id","controlAriaLabel","el","inputMode","role","autocomplete"],"sources":["src/components/pf-number-input/pf-number-input.css?tag=pf-number-input&encapsulation=shadow","src/components/pf-number-input/pf-number-input.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-numberinput-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.control {\n  align-items: stretch;\n  background: var(--pf-numberinput-bg);\n  border: 1px solid var(--pf-numberinput-border);\n  border-radius: var(--radius-md);\n  display: inline-flex;\n  min-height: 40px;\n  overflow: hidden;\n  transition:\n    border var(--pf-transition-fast),\n    box-shadow var(--pf-transition-fast);\n  width: 100%;\n}\n\n.control:focus-within {\n  border-color: var(--pf-numberinput-focus-border);\n  box-shadow: var(--pf-numberinput-focus-ring, var(--pf-focus-ring));\n}\n\n.control--invalid {\n  border-color: var(--pf-numberinput-invalid-border);\n}\n\n/*\n * `:host([disabled])` rather than the React component's\n * `:has(.input:disabled)`: the host carries the reflected attribute, which is\n * both simpler and the thing a consumer's own stylesheet can see.\n */\n:host([disabled]) .control {\n  background: var(--pf-control-bg-disabled);\n  border-color: var(--pf-control-border-disabled);\n  color: var(--pf-control-text-disabled);\n  opacity: 0.6;\n}\n\n.input {\n  background: transparent;\n  border: none;\n  color: var(--pf-numberinput-text);\n  flex: 1;\n  font: inherit;\n  min-width: 0;\n  outline: none;\n  padding: 0 var(--space-3);\n  text-align: center;\n  width: 100%;\n}\n\n.input::placeholder {\n  color: var(--pf-numberinput-placeholder);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n.step {\n  align-items: center;\n  align-self: stretch;\n  background: var(--pf-numberinput-step-bg);\n  border: none;\n  color: var(--pf-numberinput-step-text);\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: 0;\n  transition:\n    background var(--pf-transition-fast),\n    color var(--pf-transition-fast);\n  width: 40px;\n}\n\n.step:hover:not(:disabled) {\n  background: var(--pf-numberinput-step-hover-bg);\n  color: var(--pf-numberinput-step-hover-text);\n}\n\n.step:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n[part='decrement'] {\n  border-inline-end: 1px solid var(--pf-numberinput-border);\n}\n\n[part='increment'] {\n  border-inline-start: 1px solid var(--pf-numberinput-border);\n}\n\n.step pf-icon {\n  font-size: 16px;\n}\n\n.description {\n  color: var(--pf-numberinput-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-field-error);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .control,\n  .step {\n    transition: none;\n  }\n}\n","import {\n  clampNumber,\n  composeDescribedBy,\n  formatNumberValue,\n  Keys,\n  parseNumberValue,\n  roundToStep,\n  stepNumber,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/**\n * A form-associated stepper field.\n *\n * The value is a **string** rather than a number, because that is what an\n * attribute can carry and what a form submits; `pfChange` reports the parsed\n * number beside it, which is what a framework consumer wants. An empty string\n * is an empty field — not zero, which is a value someone chose.\n *\n * All of the arithmetic is core's, so this and the React `NumberInput` step,\n * round and clamp identically: ten steps of `0.1` reach exactly 1 in both.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the steppers and the input.\n * @part decrement - the step-down button.\n * @part input - the native input.\n * @part increment - the step-up button.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-number-input',\n  styleUrl: 'pf-number-input.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfNumberInput {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because a form-associated element\n   * takes its submission name from the attribute, not this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The value, as a string. Empty means an empty field. */\n  @Prop({ mutable: true }) value = '';\n\n  /** The lowest value the field accepts. */\n  @Prop() min?: number;\n\n  /** The highest value the field accepts. */\n  @Prop() max?: number;\n\n  /** How far one step moves, and what the result is rounded to. */\n  @Prop() step = 1;\n\n  /** Visible label. Rendered in the same root as the input, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The step-down button's accessible name. */\n  @Prop() decrementLabel = 'Decrease';\n\n  /** The step-up button's accessible name. */\n  @Prop() incrementLabel = 'Increase';\n\n  /** Fires when the value changes, with the parsed number beside the string. */\n  @Event() pfChange!: EventEmitter<{ value: string; number: number | null }>;\n\n  /**\n   * What the input shows while it is being edited, which is not always the\n   * value: a half-typed \"-\" or \"1.\" is neither a number nor a reason to throw\n   * the keystroke away.\n   */\n  @State() draft: string | null = null;\n\n  /** The value a form reset restores, which is the initial attribute. */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the field started with. */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.draft = null;\n  }\n\n  /** Steps the value up or down, as the buttons and the arrows do. */\n  @Method()\n  async stepBy(direction: 1 | -1): Promise<void> {\n    this.step_(direction);\n  }\n\n  private get bounds() {\n    return {\n      min: this.min === undefined ? -Infinity : Number(this.min),\n      max: this.max === undefined ? Infinity : Number(this.max),\n      step: Number(this.step) || 1,\n    };\n  }\n\n  private get current(): number | null {\n    return parseNumberValue(this.value);\n  }\n\n  private get atMin(): boolean {\n    const { min } = this.bounds;\n    return this.current !== null && this.current <= min;\n  }\n\n  private get atMax(): boolean {\n    const { max } = this.bounds;\n    return this.current !== null && this.current >= max;\n  }\n\n  private commit(next: number | null) {\n    const { min, max, step } = this.bounds;\n    const value = next === null ? '' : String(roundToStep(clampNumber(next, min, max), step));\n    if (value === this.value) return;\n\n    this.value = value;\n    this.pfChange.emit({ value, number: parseNumberValue(value) });\n  }\n\n  private step_(direction: 1 | -1) {\n    if (this.disabled) return;\n    this.draft = null;\n    this.commit(stepNumber(this.current, direction, this.bounds));\n  }\n\n  private onInput = (event: Event) => {\n    const raw = (event.target as HTMLInputElement).value;\n    /*\n     * The draft is kept as typed and the value follows it, rather than the\n     * input being rewritten from the value: clamping mid-keystroke would make\n     * \"5\" unreachable in a field whose minimum is 50, and rounding would eat\n     * the \".\" of \"1.5\" as it was typed.\n     */\n    this.draft = raw;\n    const parsed = parseNumberValue(raw);\n    if (raw.trim() === '') {\n      this.commit(null);\n      return;\n    }\n    if (parsed !== null) this.commit(parsed);\n  };\n\n  /** On blur the draft is given up, so the field shows its real value. */\n  private onBlur = () => {\n    this.draft = null;\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    const { min, max } = this.bounds;\n\n    if (event.key === Keys.ArrowUp) {\n      event.preventDefault();\n      this.step_(1);\n    } else if (event.key === Keys.ArrowDown) {\n      event.preventDefault();\n      this.step_(-1);\n    } else if (event.key === Keys.Home && Number.isFinite(min)) {\n      event.preventDefault();\n      this.draft = null;\n      this.commit(min);\n    } else if (event.key === Keys.End && Number.isFinite(max)) {\n      event.preventDefault();\n      this.draft = null;\n      this.commit(max);\n    }\n  };\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const { min, max } = this.bounds;\n    const shown = this.draft ?? formatNumberValue(this.current);\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n            {/*\n              The steppers are out of the tab order and the arrows are on the\n              input, which is the spinbutton pattern: a keyboard user steps\n              without leaving the field. `mousedown` is prevented so a click\n              does not take focus off it either.\n            */}\n            <button\n              type=\"button\"\n              class=\"step\"\n              part=\"decrement\"\n              aria-label={this.decrementLabel}\n              disabled={this.disabled || this.atMin}\n              tabindex=\"-1\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.step_(-1)}\n            >\n              <pf-icon name=\"minus\" aria-hidden=\"true\"></pf-icon>\n            </button>\n\n            <input\n              id=\"input\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"input\"\n              class=\"input\"\n              type=\"text\"\n              inputMode=\"decimal\"\n              role=\"spinbutton\"\n              name={this.name}\n              value={shown}\n              placeholder={this.placeholder}\n              required={this.required}\n              disabled={this.disabled}\n              autocomplete=\"off\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              aria-valuenow={this.current ?? null}\n              aria-valuemin={Number.isFinite(min) ? min : null}\n              aria-valuemax={Number.isFinite(max) ? max : null}\n              onInput={this.onInput}\n              onBlur={this.onBlur}\n              onKeyDown={this.onKeyDown}\n            />\n\n            <button\n              type=\"button\"\n              class=\"step\"\n              part=\"increment\"\n              aria-label={this.incrementLabel}\n              disabled={this.disabled || this.atMax}\n              tabindex=\"-1\"\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.step_(1)}\n            >\n              <pf-icon name=\"plus\" aria-hidden=\"true\"></pf-icon>\n            </button>\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sTAAA,MAAMA,EAAmB,IAAM,wnE,MCoDlBC,EAAaC,EAAA,MAAAD,UAAAE,E,6KAGLC,UAMMC,KAGAC,MAAQ,GAGzBC,IAGAC,IAGAC,KAAO,EAGPC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAG5BC,eAAiB,WAGjBC,eAAiB,WAGhBC,SAOAC,MAAuB,KAGxBC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKhB,OAAS,GAClCgB,KAAKC,e,CAMP,aAAAA,GACED,KAAKlB,UAAUoB,aAAaF,KAAKhB,OAAS,IAC1CmB,EAAqBH,KAAKlB,UAAWsB,QAAQJ,KAAKhB,OAAQgB,KAAKR,SAAUQ,KAAKV,M,CAKhF,mBAAMe,GACJ,OAAOL,KAAKlB,UAAUuB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKlB,UAAUwB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKlB,UAAU0B,iB,CAIxB,iBAAAC,GACET,KAAKhB,MAAQgB,KAAKF,aAClBE,KAAKH,MAAQ,I,CAKf,YAAMa,CAAOC,GACXX,KAAKY,MAAMD,E,CAGb,UAAYE,GACV,MAAO,CACL5B,IAAKe,KAAKf,MAAQ6B,WAAaC,SAAWC,OAAOhB,KAAKf,KACtDC,IAAKc,KAAKd,MAAQ4B,UAAYC,SAAWC,OAAOhB,KAAKd,KACrDC,KAAM6B,OAAOhB,KAAKb,OAAS,E,CAI/B,WAAY8B,GACV,OAAOC,EAAiBlB,KAAKhB,M,CAG/B,SAAYmC,GACV,MAAMlC,IAAEA,GAAQe,KAAKa,OACrB,OAAOb,KAAKiB,UAAY,MAAQjB,KAAKiB,SAAWhC,C,CAGlD,SAAYmC,GACV,MAAMlC,IAAEA,GAAQc,KAAKa,OACrB,OAAOb,KAAKiB,UAAY,MAAQjB,KAAKiB,SAAW/B,C,CAG1C,MAAAmC,CAAOC,GACb,MAAMrC,IAAEA,EAAGC,IAAEA,EAAGC,KAAEA,GAASa,KAAKa,OAChC,MAAM7B,EAAQsC,IAAS,KAAO,GAAKC,OAAOC,EAAYC,EAAYH,EAAMrC,EAAKC,GAAMC,IACnF,GAAIH,IAAUgB,KAAKhB,MAAO,OAE1BgB,KAAKhB,MAAQA,EACbgB,KAAKJ,SAAS8B,KAAK,CAAE1C,QAAO2C,OAAQT,EAAiBlC,I,CAG/C,KAAA4B,CAAMD,GACZ,GAAIX,KAAKP,SAAU,OACnBO,KAAKH,MAAQ,KACbG,KAAKqB,OAAOO,EAAW5B,KAAKiB,QAASN,EAAWX,KAAKa,Q,CAG/CgB,QAAWC,IACjB,MAAMC,EAAOD,EAAME,OAA4BhD,MAO/CgB,KAAKH,MAAQkC,EACb,MAAME,EAASf,EAAiBa,GAChC,GAAIA,EAAIG,SAAW,GAAI,CACrBlC,KAAKqB,OAAO,MACZ,M,CAEF,GAAIY,IAAW,KAAMjC,KAAKqB,OAAOY,EAAO,EAIlCE,OAAS,KACfnC,KAAKH,MAAQ,IAAI,EAGXuC,UAAaN,IACnB,GAAI9B,KAAKP,SAAU,OACnB,MAAMR,IAAEA,EAAGC,IAAEA,GAAQc,KAAKa,OAE1B,GAAIiB,EAAMO,MAAQC,EAAKC,QAAS,CAC9BT,EAAMU,iBACNxC,KAAKY,MAAM,E,MACN,GAAIkB,EAAMO,MAAQC,EAAKG,UAAW,CACvCX,EAAMU,iBACNxC,KAAKY,OAAM,E,MACN,GAAIkB,EAAMO,MAAQC,EAAKI,MAAQ1B,OAAO2B,SAAS1D,GAAM,CAC1D6C,EAAMU,iBACNxC,KAAKH,MAAQ,KACbG,KAAKqB,OAAOpC,E,MACP,GAAI6C,EAAMO,MAAQC,EAAKM,KAAO5B,OAAO2B,SAASzD,GAAM,CACzD4C,EAAMU,iBACNxC,KAAKH,MAAQ,KACbG,KAAKqB,OAAOnC,E,GAIhB,MAAA2D,GAEE,MAAMC,EAAcC,EAClB/C,KAAKX,aAAe,cACpBW,KAAKV,OAAS,SAEhB,MAAML,IAAEA,EAAGC,IAAEA,GAAQc,KAAKa,OAC1B,MAAMmC,EAAQhD,KAAKH,OAASoD,EAAkBjD,KAAKiB,SAEnD,OACEiC,EAACC,EAAI,CAAAd,IAAA,4CACHa,EAAA,OAAAb,IAAA,2CAAKe,MAAM,QAAQC,KAAK,SACrBrD,KAAKZ,OACJ8D,EAAA,SAAAb,IAAA,2CAAOe,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvCtD,KAAKZ,MACLY,KAAKR,UACJ0D,EAAA,QAAAb,IAAA,2CAAMe,MAAM,WAAU,cAAa,QAAM,MAO/CF,EAAA,OAAAb,IAAA,2CAAKe,MAAO,CAAEG,QAAS,KAAM,mBAAoBnD,QAAQJ,KAAKV,QAAU+D,KAAK,WAO3EH,EAAA,UAAAb,IAAA,2CACEmB,KAAK,SACLJ,MAAM,OACNC,KAAK,YAAW,aACJrD,KAAKN,eACjBD,SAAUO,KAAKP,UAAYO,KAAKmB,MAChCsC,SAAS,KACTC,YAAc5B,GAAUA,EAAMU,iBAC9BmB,QAAS,IAAM3D,KAAKY,OAAM,IAE1BsC,EAAA,WAAAb,IAAA,2CAAStD,KAAK,QAAO,cAAa,UAGpCmE,EAAA,SAAAb,IAAA,2CACEuB,GAAG,QAAO,aACEC,EAAiB7D,KAAK8D,GAAI9D,KAAKZ,OAC3CiE,KAAK,QACLD,MAAM,QACNI,KAAK,OACLO,UAAU,UACVC,KAAK,aACLjF,KAAMiB,KAAKjB,KACXC,MAAOgE,EACPzD,YAAaS,KAAKT,YAClBC,SAAUQ,KAAKR,SACfC,SAAUO,KAAKP,SACfwE,aAAa,MAAK,eACJjE,KAAKV,MAAQ,OAAS,KAAI,mBACtBwD,EAAW,gBACd9C,KAAKiB,SAAW,KAAI,gBACpBD,OAAO2B,SAAS1D,GAAOA,EAAM,KAAI,gBACjC+B,OAAO2B,SAASzD,GAAOA,EAAM,KAC5C2C,QAAS7B,KAAK6B,QACdM,OAAQnC,KAAKmC,OACbC,UAAWpC,KAAKoC,YAGlBc,EAAA,UAAAb,IAAA,2CACEmB,KAAK,SACLJ,MAAM,OACNC,KAAK,YAAW,aACJrD,KAAKL,eACjBF,SAAUO,KAAKP,UAAYO,KAAKoB,MAChCqC,SAAS,KACTC,YAAc5B,GAAUA,EAAMU,iBAC9BmB,QAAS,IAAM3D,KAAKY,MAAM,IAE1BsC,EAAA,WAAAb,IAAA,2CAAStD,KAAK,OAAM,cAAa,WAIpCiB,KAAKX,aACJ6D,EAAA,KAAAb,IAAA,2CAAGe,MAAM,cAAcC,KAAK,cAAcO,GAAG,eAC1C5D,KAAKX,aAGTW,KAAKV,OACJ4D,EAAA,KAAAb,IAAA,2CAAGe,MAAM,QAAQC,KAAK,QAAQO,GAAG,SAC9B5D,KAAKV,Q","ignoreList":[]}

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

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

package/dist/components/pf-option.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,c as o,h as a,a as i}from"./index.js";const r=()=>`:host{border-radius:var(--radius-sm);color:var(--pf-option-text);cursor:pointer;display:block;font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3);user-select:none}:host([hidden]){display:none}:host([active]),:host(:hover:not([disabled])){background:var(--pf-option-active-bg);color:var(--pf-option-active-text)}:host([selected]){font-weight:var(--font-weight-medium)}:host([disabled]){background:transparent;color:var(--pf-option-text-disabled);cursor:not-allowed}:host([disabled]:hover){background:transparent}`;const n=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOptionSelect=o(this,"pfOptionSelect")}get el(){return this}value="";disabled=false;selected=false;active=false;pfOptionSelect;onClick=e=>{if(this.disabled){e.stopPropagation();return}this.pfOptionSelect.emit({value:this.value})};render(){return a(i,{key:"d1dd91cffb3c458ea6b9fb89ddc8a2c91f3b0292",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":null,onClick:this.onClick},a("slot",{key:"0ca5d298f12c9cb85406e65bcc47670d1642613d"}))}static get style(){return r()}},[769,"pf-option",{value:[513],disabled:[516],selected:[1540],active:[1540]}]);function c(){if(typeof customElements==="undefined"){return}const t=["pf-option"];t.forEach((t=>{switch(t){case"pf-option":if(!customElements.get(e(t))){customElements.define(e(t),n)}break}}))}c();const d=n;const l=c;export{d as PfOption,l as defineCustomElement};
+//# sourceMappingURL=pf-option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfOptionCss","PfOption","__stencil_proxyCustomElement","HTMLElement","value","disabled","selected","active","pfOptionSelect","onClick","event","this","stopPropagation","emit","render","h","Host","key","role"],"sources":["src/components/pf-option/pf-option.css?tag=pf-option&encapsulation=shadow","src/components/pf-option/pf-option.tsx"],"sourcesContent":["/*\n * This element is shared by pf-select and pf-combobox, whose React\n * counterparts have separate alias families with their own values. Rather than\n * pick one and diverge from the other, the option reads a generic\n * `--pf-option-*` set that each container defines on itself -- custom\n * properties inherit through the shadow boundary, so a slotted option picks up\n * whichever listbox it is inside. Exactly the pf-menu-item arrangement, for\n * the same reason.\n */\n:host {\n  border-radius: var(--radius-sm);\n  color: var(--pf-option-text);\n  cursor: pointer;\n  display: block;\n  font-size: var(--font-size-sm);\n  padding: var(--space-2) var(--space-3);\n  user-select: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * `active` is the select's, not `:hover` alone: the keyboard and the pointer\n * share one active option, and the select is what decides which.\n */\n:host([active]),\n:host(:hover:not([disabled])) {\n  background: var(--pf-option-active-bg);\n  color: var(--pf-option-active-text);\n}\n\n:host([selected]) {\n  font-weight: var(--font-weight-medium);\n}\n\n:host([disabled]) {\n  background: transparent;\n  color: var(--pf-option-text-disabled);\n  cursor: not-allowed;\n}\n\n:host([disabled]:hover) {\n  background: transparent;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * One choice inside a `pf-select`.\n *\n * It only reports that it was chosen; the select owns the value, the active\n * option and closing — the same division as `pf-radio-group` with its radios\n * and `pf-dropdown` with its menu items. The select writes `selected` and\n * `active` back onto it, so the stylesheet has reflected attributes to select\n * on without the option knowing anything about its container.\n *\n * @slot - the option's label, which is also what typeahead searches.\n */\n@Component({\n  tag: 'pf-option',\n  styleUrl: 'pf-option.css',\n  shadow: true,\n})\nexport class PfOption {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The value the select reports when this option is chosen.\n   *\n   * Reflected, because the generated bindings set props as *properties*: an\n   * unreflected prop leaves no attribute, and anything selecting on one — a\n   * consumer's stylesheet, or a test — finds nothing.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Reflected; the stylesheet and the select's own query both read it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the select. Reflected, so the stylesheet can mark the choice. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** Set by the select: the option the keyboard is on. Reflected likewise. */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  /** Asks the select to take this value. The select decides and closes. */\n  @Event() pfOptionSelect!: EventEmitter<{ value: string }>;\n\n  /**\n   * Mouse only. Keyboard focus stays on the select's trigger and the active\n   * option is tracked with `aria-activedescendant`, so an option never has\n   * focus to receive a key on.\n   */\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    this.pfOptionSelect.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : null}\n        onClick={this.onClick}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAc,IAAM,khB,MCkBbC,EAAQC,EAAA,MAAAD,UAAAE,E,mJAUMC,MAAQ,GAGRC,SAAW,MAGIC,SAAW,MAGXC,OAAS,MAGxCC,eAODC,QAAWC,IACjB,GAAIC,KAAKN,SAAU,CACjBK,EAAME,kBACN,M,CAEFD,KAAKH,eAAeK,KAAK,CAAET,MAAOO,KAAKP,OAAQ,EAGjD,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,SAAQ,gBACEP,KAAKL,SAAW,OAAS,QAAO,gBAChCK,KAAKN,SAAW,OAAS,KACxCI,QAASE,KAAKF,SAEdM,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

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

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

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

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

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

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

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

package/dist/components/pf-pagination.js

@@ -0,0 +1,2 @@
+import{t,p as a,H as e,c as i,h as n,a as s}from"./index.js";function o(t,a){if(!(a>0))return 1;return Math.min(Math.max(t,1),a)}function r(t,a,e,i){const n=Math.max(a,1);const s=o(t,n);const r=Math.max(e,0);const p=Math.max(i,0);const c=new Set;const l=t=>{if(t>=1&&t<=n)c.add(t)};for(let t=1;t<=Math.min(p,n);t+=1)l(t);for(let t=n-p+1;t<=n;t+=1)l(t);for(let t=s-r;t<=s+r;t+=1)l(t);const d=[...c].sort(((t,a)=>t-a));for(let t=0;t<d.length-1;t+=1)if(d[t+1]-d[t]===2)l(d[t]+1);if(d[0]===2)l(1);if(d[d.length-1]===n-1)l(n);const f=[...c].sort(((t,a)=>t-a));const g=[];const h=t=>t<=s?"ellipsis-left":"ellipsis-right";if(f.length>0&&f[0]>1)g.push(h(f[0]));for(let t=0;t<f.length;t+=1){g.push(f[t]);const a=f[t+1];if(a!==void 0&&a-f[t]>1)g.push(h(a))}if(f.length>0&&f[f.length-1]<n)g.push("ellipsis-right");return g.length>0?g:[1]}const p=()=>`:host{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}:host([hidden]){display:none}@media (min-width: 640px){:host{gap:var(--space-3)}}:host([disabled]){opacity:0.65}.list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;list-style:none;margin:0;padding:0}.page,.nav{align-items:center;background:var(--pf-pagination-bg);border:1px solid var(--pf-pagination-border);border-radius:var(--radius-md);color:var(--pf-pagination-text);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;line-height:1;transition:box-shadow 140ms ease}.page{height:var(--pf-pagination-page-size);min-width:var(--pf-pagination-page-size);padding:0 var(--space-2);transition:none}.nav{height:var(--pf-control-height-sm);min-width:var(--pf-control-height-sm);padding:0 var(--space-2)}@media (min-width: 640px){.nav{padding:0 var(--space-3)}}.page:hover,.nav:hover{border-color:var(--pf-pagination-active-border)}.page:focus-visible,.nav:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.page--active{background:var(--pf-pagination-active-bg);border-color:var(--pf-pagination-active-border);color:var(--pf-pagination-active-text)}.page--active:hover{background:var(--pf-pagination-active-hover-bg)}.page:disabled,.nav:disabled{cursor:not-allowed;opacity:0.5}.ellipsis{color:var(--pf-pagination-text-muted);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-width:20px}@media (prefers-reduced-motion: reduce){.page,.nav{transition:none}}`;const c=a(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfPageChange=i(this,"pfPageChange")}page=1;totalPages=1;siblingCount=1;boundaryCount=1;showPrevNext=true;disabled=false;label="Pagination";pfPageChange;goTo(t){if(this.disabled)return;const a=o(t,Math.max(this.totalPages,1));if(a===this.page)return;this.page=a;this.pfPageChange.emit({page:a})}render(){const t=Math.max(this.totalPages,1);const a=o(this.page,t);const e=r(a,t,this.siblingCount,this.boundaryCount);return n(s,{key:"7ddd3d35eb175a4ccedbebdbd75dba3046c94a01",role:"navigation","aria-label":this.label},this.showPrevNext&&n("button",{key:"c6ca9616468f6880fe2122f6f528faa26e43393a",class:"nav",part:"nav previous",type:"button",disabled:this.disabled||a<=1,onClick:()=>this.goTo(a-1)},n("slot",{key:"af06d4de8bc34089517c2aad15b8b08c8822743c",name:"previous"},"Previous")),n("ol",{key:"f82b6a3700a50ea0dad8d4416940428955a06c8f",class:"list",part:"list"},e.map(((t,e)=>typeof t==="number"?n("li",{key:t},n("button",{class:{page:true,"page--active":t===a},part:t===a?"page current":"page",type:"button",disabled:this.disabled,"aria-current":t===a?"page":null,onClick:()=>this.goTo(t)},t)):n("li",{key:`${t}-${e}`,class:"ellipsis",part:"ellipsis","aria-hidden":"true"},"...")))),this.showPrevNext&&n("button",{key:"7d6f1907a2b8ffd6cf8bfab1bc77f044d784bb94",class:"nav",part:"nav next",type:"button",disabled:this.disabled||a>=t,onClick:()=>this.goTo(a+1)},n("slot",{key:"5886d2d27c67b79f399e1bac4359a2cf3876c6c2",name:"next"},"Next")))}static get style(){return p()}},[769,"pf-pagination",{page:[1026],totalPages:[2,"total-pages"],siblingCount:[2,"sibling-count"],boundaryCount:[2,"boundary-count"],showPrevNext:[516,"show-prev-next"],disabled:[516],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const a=["pf-pagination"];a.forEach((a=>{switch(a){case"pf-pagination":if(!customElements.get(t(a))){customElements.define(t(a),c)}break}}))}l();const d=c;const f=l;export{d as PfPagination,f as defineCustomElement};
+//# sourceMappingURL=pf-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["clampPage","page","totalPages","Math","min","max","getPaginationItems","currentPage","siblingCount","boundaryCount","safeTotal","safeCurrent","safeSiblingCount","safeBoundaryCount","shown","Set","add","pages","sort","a","b","index","length","finalPages","items","gapFor","nextPage","push","next","pfPaginationCss","PfPagination","__stencil_proxyCustomElement","HTMLElement","showPrevNext","disabled","label","pfPageChange","goTo","this","clamped","emit","render","total","current","h","Host","key","role","class","part","type","onClick","name","map","item"],"sources":["../core/dist/pagination.js","src/components/pf-pagination/pf-pagination.css?tag=pf-pagination&encapsulation=shadow","src/components/pf-pagination/pf-pagination.tsx"],"sourcesContent":["//#region src/pagination.ts\n/**\n* Keep `page` inside 1..totalPages. A total of zero or less has no page to\n* land on, so it reports page 1 — a pager always shows something.\n*/\nfunction clampPage(page, totalPages) {\n\tif (!(totalPages > 0)) return 1;\n\treturn Math.min(Math.max(page, 1), totalPages);\n}\n/**\n* The run of items to render: `boundaryCount` pages pinned at each end,\n* `siblingCount` pages either side of the current one, and an ellipsis\n* wherever that leaves pages genuinely hidden.\n*\n* Built by collecting the pages to show and then walking them, rather than by\n* placing gaps from the window's indexes. The index version got two cases\n* wrong, both of which this shape cannot express:\n*\n* - **A gap standing for nothing.** At 1 of 6 with `boundaryCount: 3` the two\n*   boundaries meet in the middle, and it still emitted `1 2 3 … 4 5 6` — an\n*   ellipsis between two consecutive pages, because it compared the window\n*   against the boundary edges rather than asking which pages were actually\n*   missing.\n* - **A gap hiding exactly one page.** An ellipsis costs the same room as the\n*   page it stands for and says less, so `1 … 3 4 5 … 7` is strictly worse\n*   than `1 2 3 4 5 6 7`. A single-page hole is filled instead.\n*\n* The `[1]` fallback at the end is insurance, not a path: the window always\n* contains the clamped current page, so `shown` is never empty. It stays\n* because a pager with no buttons would read as broken.\n*/\nfunction getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {\n\tconst safeTotal = Math.max(totalPages, 1);\n\tconst safeCurrent = clampPage(currentPage, safeTotal);\n\tconst safeSiblingCount = Math.max(siblingCount, 0);\n\tconst safeBoundaryCount = Math.max(boundaryCount, 0);\n\tconst shown = /* @__PURE__ */ new Set();\n\tconst add = (page) => {\n\t\tif (page >= 1 && page <= safeTotal) shown.add(page);\n\t};\n\tfor (let page = 1; page <= Math.min(safeBoundaryCount, safeTotal); page += 1) add(page);\n\tfor (let page = safeTotal - safeBoundaryCount + 1; page <= safeTotal; page += 1) add(page);\n\tfor (let page = safeCurrent - safeSiblingCount; page <= safeCurrent + safeSiblingCount; page += 1) add(page);\n\tconst pages = [...shown].sort((a, b) => a - b);\n\tfor (let index = 0; index < pages.length - 1; index += 1) if (pages[index + 1] - pages[index] === 2) add(pages[index] + 1);\n\tif (pages[0] === 2) add(1);\n\tif (pages[pages.length - 1] === safeTotal - 1) add(safeTotal);\n\tconst finalPages = [...shown].sort((a, b) => a - b);\n\tconst items = [];\n\tconst gapFor = (nextPage) => nextPage <= safeCurrent ? \"ellipsis-left\" : \"ellipsis-right\";\n\tif (finalPages.length > 0 && finalPages[0] > 1) items.push(gapFor(finalPages[0]));\n\tfor (let index = 0; index < finalPages.length; index += 1) {\n\t\titems.push(finalPages[index]);\n\t\tconst next = finalPages[index + 1];\n\t\tif (next !== void 0 && next - finalPages[index] > 1) items.push(gapFor(next));\n\t}\n\tif (finalPages.length > 0 && finalPages[finalPages.length - 1] < safeTotal) items.push(\"ellipsis-right\");\n\treturn items.length > 0 ? items : [1];\n}\n//#endregion\nexport { clampPage, getPaginationItems };\n",":host {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    gap: var(--space-3);\n  }\n}\n\n:host([disabled]) {\n  opacity: 0.65;\n}\n\n.list {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.page,\n.nav {\n  align-items: center;\n  background: var(--pf-pagination-bg);\n  border: 1px solid var(--pf-pagination-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-pagination-text);\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  justify-content: center;\n  line-height: 1;\n  transition: box-shadow 140ms ease;\n}\n\n.page {\n  height: var(--pf-pagination-page-size);\n  min-width: var(--pf-pagination-page-size);\n  padding: 0 var(--space-2);\n  transition: none;\n}\n\n.nav {\n  height: var(--pf-control-height-sm);\n  min-width: var(--pf-control-height-sm);\n  padding: 0 var(--space-2);\n}\n\n@media (--sm) {\n  .nav {\n    padding: 0 var(--space-3);\n  }\n}\n\n.page:hover,\n.nav:hover {\n  border-color: var(--pf-pagination-active-border);\n}\n\n.page:focus-visible,\n.nav:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.page--active {\n  background: var(--pf-pagination-active-bg);\n  border-color: var(--pf-pagination-active-border);\n  color: var(--pf-pagination-active-text);\n}\n\n.page--active:hover {\n  background: var(--pf-pagination-active-hover-bg);\n}\n\n.page:disabled,\n.nav:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.ellipsis {\n  color: var(--pf-pagination-text-muted);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  justify-content: center;\n  min-width: 20px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .page,\n  .nav {\n    transition: none;\n  }\n}\n","import { clampPage, getPaginationItems } from '@pitchfork-ui/core';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * A pager: boundary pages pinned at each end, a window around the current\n * page, and an ellipsis wherever that leaves a gap.\n *\n * Controlled or not, like `pf-input`: `page` is mutable, so leaving it alone\n * lets the element advance itself, and setting it on every `pfPageChange`\n * keeps the consumer in charge.\n *\n * @slot previous - the previous button's label. Defaults to \"Previous\".\n * @slot next - the next button's label. Defaults to \"Next\".\n * @part nav - either of the previous/next buttons.\n * @part previous - the previous button.\n * @part next - the next button.\n * @part list - the ordered list of pages.\n * @part page - each page button.\n * @part current - the page button for the current page.\n * @part ellipsis - each gap.\n */\n@Component({\n  tag: 'pf-pagination',\n  styleUrl: 'pf-pagination.css',\n  shadow: true,\n})\nexport class PfPagination {\n  /** The current page, 1-based. Mutable so the element can advance itself. */\n  @Prop({ mutable: true }) page = 1;\n\n  /** How many pages there are in total. */\n  @Prop() totalPages = 1;\n\n  /** Pages to show either side of the current one. */\n  @Prop() siblingCount = 1;\n\n  /** Pages to pin at each end. */\n  @Prop() boundaryCount = 1;\n\n  /** Show the previous/next buttons. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showPrevNext = true;\n\n  /** Disable every button. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the navigation landmark. */\n  @Prop() label = 'Pagination';\n\n  /** Emitted with the page the user asked for, already clamped to the range. */\n  @Event() pfPageChange!: EventEmitter<{ page: number }>;\n\n  private goTo(next: number) {\n    if (this.disabled) return;\n\n    const clamped = clampPage(next, Math.max(this.totalPages, 1));\n    if (clamped === this.page) return;\n\n    this.page = clamped;\n    this.pfPageChange.emit({ page: clamped });\n  }\n\n  render() {\n    const total = Math.max(this.totalPages, 1);\n    // Both layers go through core, so the same inputs offer the same pages.\n    const current = clampPage(this.page, total);\n    const items = getPaginationItems(current, total, this.siblingCount, this.boundaryCount);\n\n    return (\n      <Host role=\"navigation\" aria-label={this.label}>\n        {this.showPrevNext && (\n          <button\n            class=\"nav\"\n            part=\"nav previous\"\n            type=\"button\"\n            disabled={this.disabled || current <= 1}\n            onClick={() => this.goTo(current - 1)}\n          >\n            {/*\n              Slot fallback is the web-component answer to React's\n              `prevLabel = 'Previous'` default: the consumer overrides it by\n              slotting something, and gets the text if they do not.\n            */}\n            <slot name=\"previous\">Previous</slot>\n          </button>\n        )}\n\n        <ol class=\"list\" part=\"list\">\n          {items.map((item, index) =>\n            typeof item === 'number' ? (\n              <li key={item}>\n                <button\n                  class={{ page: true, 'page--active': item === current }}\n                  part={item === current ? 'page current' : 'page'}\n                  type=\"button\"\n                  disabled={this.disabled}\n                  aria-current={item === current ? 'page' : null}\n                  onClick={() => this.goTo(item)}\n                >\n                  {item}\n                </button>\n              </li>\n            ) : (\n              // The gap is decorative: a screen reader walking the list gets\n              // the page numbers, and \"...\" would only interrupt them.\n              <li key={`${item}-${index}`} class=\"ellipsis\" part=\"ellipsis\" aria-hidden=\"true\">\n                ...\n              </li>\n            ),\n          )}\n        </ol>\n\n        {this.showPrevNext && (\n          <button\n            class=\"nav\"\n            part=\"nav next\"\n            type=\"button\"\n            disabled={this.disabled || current >= total}\n            onClick={() => this.goTo(current + 1)}\n          >\n            <slot name=\"next\">Next</slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as i,h as a,a as n}from"./index.js";import{p as s,r,a as d,c as o}from"./p-COAc4ZDB.js";const c=()=>`:host{align-items:flex-start;display:inline-flex;flex-direction:column;gap:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row;gap:var(--space-6)}}.visual{align-items:center;border-radius:var(--radius-full);display:inline-flex;flex:0 0 auto;justify-content:center;position:relative}@property --pf-pie-sweep{syntax:'<percentage>';inherits:false;initial-value:0%}.gradient{--pf-pie-sweep:100%;animation:pf-pie-sweep var(--duration-slow) var(--easing-decelerate);background-image:var(--pf-pie-gradient);border-radius:inherit;inset:0;mask:conic-gradient(#000 var(--pf-pie-sweep), #0000 0);position:absolute}@keyframes pf-pie-sweep{from{--pf-pie-sweep:0%}}@media (prefers-reduced-motion: reduce){.gradient{animation:none}}.visual--empty{outline:1px solid var(--pf-piechart-border-muted)}.center{align-items:center;background:var(--pf-piechart-bg);border-radius:var(--radius-full);color:var(--pf-piechart-text);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);justify-content:center;line-height:1.2;position:relative;text-align:center;z-index:1}.legend{display:grid;gap:var(--space-2);list-style:none;margin:0;min-width:0;padding:0;width:100%}@media (min-width: 640px){.legend{min-width:180px;width:auto}}.legend.legend--hidden{display:none}.legend slot{display:contents}`;const l=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}size=192;cutout=.58;showLegend=true;label="Pie chart";gradient="conic-gradient(var(--pf-piechart-empty) 0% 100%)";hasData=false;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}async refresh(){this.sync()}get slices(){return Array.from(this.el.querySelectorAll("pf-pie-slice")).filter((e=>e.parentElement===this.el))}read(e){const t=e;const i=t.value??Number(e.getAttribute("value"));return{value:Number(i),color:t.color??e.getAttribute("color")??undefined}}sync(){const e=this.slices;const t=s(e.map((e=>this.read(e))));const i=r(t.map((e=>e.percentage)));this.hasData=t.length>0;this.gradient=this.hasData?d(t):"conic-gradient(var(--pf-piechart-empty) 0% 100%)";const a=new Map(t.map(((e,t)=>[e.index,t])));for(const[n,s]of e.entries()){const e=a.get(n);const r=s;r.drawn=e!==undefined;r.swatch=e===undefined?"":t[e].color;r.share=e===undefined?0:i[e]}}render(){const e=Math.max(Number(this.size)||192,120);const t=Math.round(e*o(Number(this.cutout)));return a(n,{key:"022a7813d1656d3dbbfe1da544ba8d141a02b027"},a("div",{key:"7cdca0aa65218b02f82a52eb6b7b56e466a8e88d",class:{visual:true,"visual--empty":!this.hasData},part:"visual",role:"img","aria-label":this.label,style:{width:`${e}px`,height:`${e}px`}},a("div",{key:"a9117ff8be6a7365368b2a137d9be1ac087f9a5e",class:"gradient",part:"gradient","aria-hidden":"true",style:{"--pf-pie-gradient":this.gradient}}),a("div",{key:"0a952bb9a7bdaa508bd3b700f9ca39deaa25fede",class:"center",part:"center",style:{width:`${t}px`,height:`${t}px`}},this.hasData?a("slot",{name:"center"}):a("slot",{name:"empty"},"No data"))),a("ul",{key:"4700e4485029a450f28e8aa18dd1f53b6891b3fe",class:{legend:true,"legend--hidden":!this.showLegend},part:"legend"},a("slot",{key:"dd50658f3539b602ef305d24fd66d3b3c87eb552",onSlotchange:()=>this.refresh()})))}static get watchers(){return{cutout:[{sync:0}]}}static get style(){return c()}},[769,"pf-pie-chart",{size:[2],cutout:[2],showLegend:[516,"show-legend"],label:[1],gradient:[32],hasData:[32],refresh:[64]},undefined,{cutout:[{sync:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["pf-pie-chart"];t.forEach((t=>{switch(t){case"pf-pie-chart":if(!customElements.get(e(t))){customElements.define(e(t),l)}break}}))}p();const f=l;const h=p;export{f as PfPieChart,h as defineCustomElement};
+//# sourceMappingURL=pf-pie-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfPieChartCss","PfPieChart","__stencil_proxyCustomElement","HTMLElement","size","cutout","showLegend","label","gradient","hasData","componentWillLoad","this","sync","componentDidLoad","refresh","slices","Array","from","el","querySelectorAll","filter","slice","parentElement","read","node","value","Number","getAttribute","color","undefined","segments","preparePieSegments","map","shares","roundPercentages","segment","percentage","length","pieConicGradient","bySlice","Map","position","index","entries","get","drawn","swatch","share","render","Math","max","centerSize","round","clampPieCutout","h","Host","key","class","visual","part","role","style","width","height","name","legend","onSlotchange"],"sources":["src/components/pf-pie-chart/pf-pie-chart.css?tag=pf-pie-chart&encapsulation=shadow","src/components/pf-pie-chart/pf-pie-chart.tsx"],"sourcesContent":["/* Mobile first: the legend under the chart, beside it on a wider screen. */\n:host {\n  align-items: flex-start;\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    align-items: center;\n    flex-direction: row;\n    gap: var(--space-6);\n  }\n}\n\n.visual {\n  align-items: center;\n  border-radius: var(--radius-full);\n  display: inline-flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  position: relative;\n}\n\n/*\n * A registered custom property, because an unregistered one cannot be\n * animated: `--pf-pie-sweep` has to interpolate as a percentage for the\n * sweep to happen at all, and without `@property` it would jump from 0% to\n * 100% at the halfway point. Declared here rather than relying on the React\n * library's copy — `@property` registers document-globally, but a consumer\n * who ships only the elements has no other source for it.\n */\n@property --pf-pie-sweep {\n  syntax: '<percentage>';\n  inherits: false;\n  initial-value: 0%;\n}\n\n.gradient {\n  --pf-pie-sweep: 100%;\n\n  animation: pf-pie-sweep var(--duration-slow) var(--easing-decelerate);\n  background-image: var(--pf-pie-gradient);\n  border-radius: inherit;\n  inset: 0;\n  mask: conic-gradient(#000 var(--pf-pie-sweep), #0000 0);\n  position: absolute;\n}\n\n/* Its own copy: `@keyframes` do not cross a shadow boundary. */\n@keyframes pf-pie-sweep {\n  from {\n    --pf-pie-sweep: 0%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .gradient {\n    animation: none;\n  }\n}\n\n.visual--empty {\n  outline: 1px solid var(--pf-piechart-border-muted);\n}\n\n.center {\n  align-items: center;\n  background: var(--pf-piechart-bg);\n  border-radius: var(--radius-full);\n  color: var(--pf-piechart-text);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  justify-content: center;\n  line-height: 1.2;\n  position: relative;\n  text-align: center;\n  z-index: 1;\n}\n\n.legend {\n  display: grid;\n  gap: var(--space-2);\n  list-style: none;\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  width: 100%;\n}\n\n@media (--sm) {\n  .legend {\n    min-width: 180px;\n    width: auto;\n  }\n}\n\n/*\n * Hidden rather than dropped, so the slices stay slotted and `slotchange`\n * still fires. Two classes deep, because the tie breaks on source order.\n */\n.legend.legend--hidden {\n  display: none;\n}\n\n/* The slices are grid children of the list, not of a box inside it. */\n.legend slot {\n  display: contents;\n}\n","import {\n  clampPieCutout,\n  pieConicGradient,\n  preparePieSegments,\n  roundPercentages,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n/**\n * A pie or donut over `pf-pie-slice` children.\n *\n * The chart owns the two things a slice cannot know: its share of the total\n * and its colour. Both go to the slice, which draws its own legend row —\n * a slot renders its assigned content once and in one place, so a legend\n * built in the shadow root could never reach labels that live in the light\n * DOM.\n *\n * All of the arithmetic is core's, so this and the React `PieChart` show the\n * same breakdown, down to the legend's percentages summing to 100.\n *\n * @slot - the `pf-pie-slice` children.\n * @slot center - what goes in the hole.\n * @slot empty - what to show when nothing is drawable.\n * @part visual - the circle.\n * @part gradient - the layer the wedges are painted on.\n * @part center - the hole in the middle.\n * @part legend - the list the slices are slotted into.\n */\n@Component({\n  tag: 'pf-pie-chart',\n  styleUrl: 'pf-pie-chart.css',\n  shadow: true,\n})\nexport class PfPieChart {\n  @Element() el!: HTMLElement;\n\n  /** Diameter, in pixels. Never below 120, where the ring stops reading. */\n  @Prop() size = 192;\n\n  /** The hole in the middle, as a fraction of the diameter. */\n  @Prop() cutout = 0.58;\n\n  /** Show the legend the slices make up. Reflected. */\n  @Prop({ reflect: true }) showLegend = true;\n\n  /** The chart's accessible name. */\n  @Prop() label = 'Pie chart';\n\n  /** The gradient painting the wedges, which only the chart can work out. */\n  @State() gradient = 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';\n\n  /** Whether anything is drawable, which decides between chart and empty state. */\n  @State() hasData = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the slices, for a consumer who changed a value through its\n   * *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested chart owns its own slices. */\n  private get slices(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-pie-slice')).filter(\n      (slice) => slice.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the slice has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private read(slice: HTMLElement) {\n    const node = slice as HTMLElement & { value?: number; color?: string };\n    const value = node.value ?? Number(slice.getAttribute('value'));\n    return {\n      value: Number(value),\n      color: node.color ?? slice.getAttribute('color') ?? undefined,\n    };\n  }\n\n  @Watch('cutout')\n  sync() {\n    const slices = this.slices;\n    const segments = preparePieSegments(slices.map((slice) => this.read(slice)));\n    const shares = roundPercentages(segments.map((segment) => segment.percentage));\n\n    this.hasData = segments.length > 0;\n    this.gradient = this.hasData\n      ? pieConicGradient(segments)\n      : 'conic-gradient(var(--pf-piechart-empty) 0% 100%)';\n\n    /*\n     * `index` is the slice's place in the original children, which is what\n     * carries the answer back to the right slice: `preparePieSegments` drops\n     * the ones that are not drawable, so its own positions no longer line up\n     * with the children.\n     */\n    const bySlice = new Map(segments.map((segment, position) => [segment.index, position]));\n\n    for (const [index, slice] of slices.entries()) {\n      const position = bySlice.get(index);\n      const node = slice as HTMLElement & { swatch: string; share: number; drawn: boolean };\n\n      node.drawn = position !== undefined;\n      node.swatch = position === undefined ? '' : segments[position].color;\n      node.share = position === undefined ? 0 : shares[position];\n    }\n  }\n\n  render() {\n    const size = Math.max(Number(this.size) || 192, 120);\n    const centerSize = Math.round(size * clampPieCutout(Number(this.cutout)));\n\n    return (\n      <Host>\n        <div\n          class={{ visual: true, 'visual--empty': !this.hasData }}\n          part=\"visual\"\n          role=\"img\"\n          aria-label={this.label}\n          style={{ width: `${size}px`, height: `${size}px` }}\n        >\n          {/*\n            The gradient goes on a real child rather than a `::before`, so a\n            contrast checker can see the centre label against it.\n          */}\n          <div\n            class=\"gradient\"\n            part=\"gradient\"\n            aria-hidden=\"true\"\n            style={{ '--pf-pie-gradient': this.gradient }}\n          ></div>\n          <div\n            class=\"center\"\n            part=\"center\"\n            style={{ width: `${centerSize}px`, height: `${centerSize}px` }}\n          >\n            {this.hasData ? <slot name=\"center\" /> : <slot name=\"empty\">No data</slot>}\n          </div>\n        </div>\n\n        {/*\n          The list stays in the tree whether or not the legend is shown: a\n          slot that is not rendered never fires `slotchange`, so slices added\n          later would stay invisible for good — and the slices have to be\n          read even when the legend is hidden, because they are the data.\n        */}\n        <ul class={{ legend: true, 'legend--hidden': !this.showLegend }} part=\"legend\">\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+GAAA,MAAMA,EAAgB,IAAM,21C,MCiCfC,EAAUC,EAAA,MAAAD,UAAAE,E,sGAIbC,KAAO,IAGPC,OAAS,IAGQC,WAAa,KAG9BC,MAAQ,YAGPC,SAAW,mDAGXC,QAAU,MAGnB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAQP,aAAME,GACJH,KAAKC,M,CAIP,UAAYG,GACV,OAAOC,MAAMC,KAAKN,KAAKO,GAAGC,iBAA8B,iBAAiBC,QACtEC,GAAUA,EAAMC,gBAAkBX,KAAKO,I,CAQpC,IAAAK,CAAKF,GACX,MAAMG,EAAOH,EACb,MAAMI,EAAQD,EAAKC,OAASC,OAAOL,EAAMM,aAAa,UACtD,MAAO,CACLF,MAAOC,OAAOD,GACdG,MAAOJ,EAAKI,OAASP,EAAMM,aAAa,UAAYE,U,CAKxD,IAAAjB,GACE,MAAMG,EAASJ,KAAKI,OACpB,MAAMe,EAAWC,EAAmBhB,EAAOiB,KAAKX,GAAUV,KAAKY,KAAKF,MACpE,MAAMY,EAASC,EAAiBJ,EAASE,KAAKG,GAAYA,EAAQC,cAElEzB,KAAKF,QAAUqB,EAASO,OAAS,EACjC1B,KAAKH,SAAWG,KAAKF,QACjB6B,EAAiBR,GACjB,mDAQJ,MAAMS,EAAU,IAAIC,IAAIV,EAASE,KAAI,CAACG,EAASM,IAAa,CAACN,EAAQO,MAAOD,MAE5E,IAAK,MAAOC,EAAOrB,KAAUN,EAAO4B,UAAW,CAC7C,MAAMF,EAAWF,EAAQK,IAAIF,GAC7B,MAAMlB,EAAOH,EAEbG,EAAKqB,MAAQJ,IAAaZ,UAC1BL,EAAKsB,OAASL,IAAaZ,UAAY,GAAKC,EAASW,GAAUb,MAC/DJ,EAAKuB,MAAQN,IAAaZ,UAAY,EAAII,EAAOQ,E,EAIrD,MAAAO,GACE,MAAM5C,EAAO6C,KAAKC,IAAIxB,OAAOf,KAAKP,OAAS,IAAK,KAChD,MAAM+C,EAAaF,KAAKG,MAAMhD,EAAOiD,EAAe3B,OAAOf,KAAKN,UAEhE,OACEiD,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAEC,OAAQ,KAAM,iBAAkB/C,KAAKF,SAC9CkD,KAAK,SACLC,KAAK,MAAK,aACEjD,KAAKJ,MACjBsD,MAAO,CAAEC,MAAO,GAAG1D,MAAU2D,OAAQ,GAAG3D,QAMxCkD,EAAA,OAAAE,IAAA,2CACEC,MAAM,WACNE,KAAK,WAAU,cACH,OACZE,MAAO,CAAE,oBAAqBlD,KAAKH,YAErC8C,EAAA,OAAAE,IAAA,2CACEC,MAAM,SACNE,KAAK,SACLE,MAAO,CAAEC,MAAO,GAAGX,MAAgBY,OAAQ,GAAGZ,QAE7CxC,KAAKF,QAAU6C,EAAA,QAAMU,KAAK,WAAcV,EAAA,QAAMU,KAAK,SAAO,aAU/DV,EAAA,MAAAE,IAAA,2CAAIC,MAAO,CAAEQ,OAAQ,KAAM,kBAAmBtD,KAAKL,YAAcqD,KAAK,UACpEL,EAAA,QAAAE,IAAA,2CAAMU,aAAc,IAAMvD,KAAKG,a","ignoreList":[]}

package/dist/components/pf-pie-slice.d.ts

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

package/dist/components/pf-pie-slice.js

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as t,h as s,a as r}from"./index.js";const c=()=>`:host{align-items:center;display:grid;gap:var(--space-2);grid-template-columns:10px 1fr auto}:host([hidden]){display:none}:host(:not([drawn])){display:none}.dot{border-radius:var(--radius-full);display:inline-block;height:10px;width:10px}.label{color:var(--pf-piechart-text);font-size:var(--font-size-sm);min-width:0}.value{color:var(--pf-piechart-text-muted);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}`;const i=a(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}value=0;color;swatch="";share=0;drawn=false;render(){return s(r,{key:"122c85fbc58816acce27ac06547eb4f2adf63788",role:"listitem"},s("span",{key:"d2d41879c922a4b929b801e4e3b2add7227cd79f",class:"dot",part:"dot","aria-hidden":"true",style:{background:this.swatch}}),s("span",{key:"46ea91d2d36a9269558548f0c2bc446b7d556467",class:"label",part:"label"},s("slot",{key:"d8eb86e569151c9b26de626e6dd6c08feee8da75"})),s("span",{key:"cbf292f34e267cf4ff37bded7da86649d7ea9ed6",class:"value",part:"value"},this.share,"%"))}static get style(){return c()}},[769,"pf-pie-slice",{value:[514],color:[513],swatch:[1025],share:[1026],drawn:[1540]}]);function d(){if(typeof customElements==="undefined"){return}const a=["pf-pie-slice"];a.forEach((a=>{switch(a){case"pf-pie-slice":if(!customElements.get(e(a))){customElements.define(e(a),i)}break}}))}d();const n=i;const l=d;export{n as PfPieSlice,l as defineCustomElement};
+//# sourceMappingURL=pf-pie-slice.js.map

package/dist/components/pf-pie-slice.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfPieSliceCss","PfPieSlice","__stencil_proxyCustomElement","HTMLElement","value","color","swatch","share","drawn","render","h","Host","key","role","class","part","style","background","this"],"sources":["src/components/pf-pie-slice/pf-pie-slice.css?tag=pf-pie-slice&encapsulation=shadow","src/components/pf-pie-slice/pf-pie-slice.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: grid;\n  gap: var(--space-2);\n  grid-template-columns: 10px 1fr auto;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * A slice the chart did not draw is not a legend row either: a legend listing\n * a colour that appears nowhere in the chart is worse than a shorter legend.\n */\n:host(:not([drawn])) {\n  display: none;\n}\n\n.dot {\n  border-radius: var(--radius-full);\n  display: inline-block;\n  height: 10px;\n  width: 10px;\n}\n\n.label {\n  color: var(--pf-piechart-text);\n  font-size: var(--font-size-sm);\n  min-width: 0;\n}\n\n.value {\n  color: var(--pf-piechart-text-muted);\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One slice of a `pf-pie-chart`, and its own row in the legend.\n *\n * The React `PieChart` takes a `data` array of `{ label, value, color }`; a\n * slot renders its assigned content once and in one place, so there is no way\n * for the chart's shadow root to build a legend out of labels that live in the\n * light DOM. The slice renders its own row instead, which is the §2.1 idiom\n * and lets a consumer put anything in a label.\n *\n * `swatch`, `share` and `drawn` are the chart's to set: only it can see the\n * total.\n *\n * @slot - the slice's label.\n * @part dot - the colour swatch.\n * @part label - the label's box.\n * @part value - the share, as a whole percentage.\n */\n@Component({\n  tag: 'pf-pie-slice',\n  styleUrl: 'pf-pie-slice.css',\n  shadow: true,\n})\nexport class PfPieSlice {\n  /** How big the slice is, in whatever unit the chart's slices share. */\n  @Prop({ reflect: true }) value = 0;\n\n  /** Overrides the palette colour the chart would give it. */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Set by the chart: the colour actually used, palette or override. */\n  @Prop({ mutable: true }) swatch = '';\n\n  /** Set by the chart: this slice's share, as a whole percentage. */\n  @Prop({ mutable: true }) share = 0;\n\n  /**\n   * Set by the chart: whether this slice is in the drawing at all.\n   *\n   * A slice of zero is not a wedge, so it is not a legend row either —\n   * otherwise the legend lists colours that appear nowhere in the chart.\n   * Reflected, because that is what the stylesheet hides it with.\n   */\n  @Prop({ mutable: true, reflect: true }) drawn = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" style={{ background: this.swatch }}></span>\n        <span class=\"label\" part=\"label\">\n          <slot />\n        </span>\n        <span class=\"value\" part=\"value\">\n          {this.share}%\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,IAAM,2a,MCwBfC,EAAUC,EAAA,MAAAD,UAAAE,E,iFAEIC,MAAQ,EAGRC,MAGAC,OAAS,GAGTC,MAAQ,EASOC,MAAQ,MAEhD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,2CAAME,MAAM,MAAMC,KAAK,MAAK,cAAa,OAAOC,MAAO,CAAEC,WAAYC,KAAKZ,UAC1EI,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACvBL,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACtBG,KAAKX,MACD,K","ignoreList":[]}

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

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

package/dist/components/pf-popover.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,c as n,h as o,a as i}from"./index.js";import{o as a,p as r}from"./p-CC7AyfOt.js";import{K as p}from"./p-g4FlTDZx.js";const l=()=>`:host{display:inline-flex}:host([hidden]){display:none}.panel{inset:auto;margin:0;background:var(--pf-popover-bg);border:1px solid var(--pf-popover-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--pf-popover-text);max-width:min(320px, calc(100vw - 2 * var(--space-4)));padding:var(--space-3);width:max-content}.panel:focus-visible{outline:none}.panel:popover-open{animation:pf-popover-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-popover-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}`;const c=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOpenChange=n(this,"pfOpenChange")}get el(){return this}open=false;align="start";label;dismissable=true;pfOpenChange;stopObserving;componentDidLoad(){this.syncTrigger();if(this.open)this.showPanel()}disconnectedCallback(){this.stopObserving?.()}async show(){this.open=true}async hide(){this.open=false}syncOpen(e,t){if(e)this.showPanel();else this.hidePanel();this.syncTrigger();if(e!==t)this.pfOpenChange.emit({open:e})}get panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.firstElementChild}syncTrigger(){const e=this.trigger;if(!e)return;e.setAttribute("aria-haspopup","dialog");e.setAttribute("aria-expanded",this.open?"true":"false")}showPanel(){const e=this.panel;if(!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.trigger,getFloating:()=>e,align:this.align,matchAnchorWidth:false,flip:true,onChange:({left:t,top:s})=>r(e,t,s)});e.focus()}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}handleClick(e){const t=this.trigger;if(!t||!e.composedPath().includes(t))return;this.open=!this.open}handleKeyDown(e){if(e.key!==p.Escape||this.dismissable||!this.open)return;e.stopPropagation();this.open=false}onToggle=e=>{const t=e.newState==="open";if(t!==this.open)this.open=t};render(){return o(i,{key:"df31f83d35301ca9e0cee9952b990ed09d9bb1a3"},o("slot",{key:"a302c69a56ff5e286b5d78b7fd17c0592bc5268d",onSlotchange:()=>this.syncTrigger()}),o("div",{key:"e1e7272e02705426eb375e4397cbc8941ccfb995",class:"panel",part:"panel",popover:this.dismissable?"auto":"manual",role:"dialog","aria-label":this.label,tabindex:"-1",onToggle:this.onToggle},o("slot",{key:"56c901b8c16a17dc5725e49c55262e0218262595",name:"content"})))}static get watchers(){return{open:[{syncOpen:0}]}}static get style(){return l()}},[769,"pf-popover",{open:[1540],align:[1],label:[1],dismissable:[4],show:[64],hide:[64]},[[0,"click","handleClick"],[0,"keydown","handleKeyDown"]],{open:[{syncOpen:0}]}]);function h(){if(typeof customElements==="undefined"){return}const t=["pf-popover"];t.forEach((t=>{switch(t){case"pf-popover":if(!customElements.get(e(t))){customElements.define(e(t),c)}break}}))}h();const d=c;const f=h;export{d as PfPopover,f as defineCustomElement};
+//# sourceMappingURL=pf-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfPopoverCss","PfPopover","__stencil_proxyCustomElement","HTMLElement","open","align","label","dismissable","pfOpenChange","stopObserving","componentDidLoad","this","syncTrigger","showPanel","disconnectedCallback","show","hide","syncOpen","next","previous","hidePanel","emit","panel","el","shadowRoot","querySelector","trigger","firstElementChild","setAttribute","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","placePopover","focus","undefined","hidePopover","handleClick","event","composedPath","includes","handleKeyDown","key","Keys","Escape","stopPropagation","onToggle","newState","render","h","Host","onSlotchange","class","part","popover","role","tabindex","name"],"sources":["src/components/pf-popover/pf-popover.css?tag=pf-popover&encapsulation=shadow","src/components/pf-popover/pf-popover.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\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.panel {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-popover-bg);\n  border: 1px solid var(--pf-popover-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-lg);\n  color: var(--pf-popover-text);\n  max-width: min(320px, calc(100vw - 2 * var(--space-4)));\n  padding: var(--space-3);\n  width: max-content;\n}\n\n.panel:focus-visible {\n  outline: none;\n}\n\n.panel:popover-open {\n  animation: pf-popover-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-popover-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 { Keys, observeAnchoredPosition } from '@pitchfork-ui/core';\n\nimport { placePopover } from '../../place-popover';\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\n/**\n * An interactive panel anchored to its trigger.\n *\n * `popover=\"auto\"` rather than `manual`, because the browser then does\n * light-dismiss and Escape itself — measured from inside a shadow root with\n * trusted input: a real outside click and a real Escape both close an `auto`\n * popover while a `manual` one stays open. That is less code than\n * `onOutsideInteraction` and it composes with the top-layer stack, so a\n * popover inside a popover closes in the right order.\n *\n * @slot - the trigger.\n * @slot content - the panel's content.\n * @part panel - the floating panel.\n */\n@Component({\n  tag: 'pf-popover',\n  styleUrl: 'pf-popover.css',\n  shadow: true,\n})\nexport class PfPopover {\n  @Element() el!: HTMLElement;\n\n  /** Whether the panel is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge of the trigger the panel lines up with. */\n  @Prop() align: 'start' | 'end' = 'start';\n\n  /** Accessible name for the panel, which is a dialog. */\n  @Prop() label?: string;\n\n  /**\n   * Close on an outside click or Escape. Defaults to true.\n   *\n   * This is the `auto`/`manual` popover switch: turning it off hands the\n   * consumer responsibility for closing, which is what a popover holding an\n   * unfinished form wants.\n   */\n  @Prop() dismissable = true;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  private stopObserving?: () => void;\n\n  componentDidLoad() {\n    this.syncTrigger();\n    if (this.open) this.showPanel();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /** Opens the panel. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the panel. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place a state change is announced, whatever caused it: a trigger\n   * click, `show()`/`hide()`, a consumer writing the prop, or the browser's own\n   * light-dismiss mirrored in below.\n   *\n   * Emitting from the `toggle` handler instead looked right and fired for none\n   * of the user-driven paths — by the time `toggle` arrives the click handler\n   * has already moved `open`, so the guard there saw no change. A consumer\n   * mirroring this value back sets `open` to what it already is, which Stencil\n   * does not treat as a change, so there is no loop.\n   */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    this.syncTrigger();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\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.firstElementChild as HTMLElement | null;\n  }\n\n  /**\n   * The trigger's disclosure state.\n   *\n   * `aria-controls` is deliberately absent: it is an IDREF, and an IDREF does\n   * not cross a shadow boundary, so pointing it at the panel's id would leave\n   * a dangling reference — worse than none. `aria-expanded` and\n   * `aria-haspopup` carry what a screen reader announces here.\n   */\n  private syncTrigger() {\n    const trigger = this.trigger;\n    if (!trigger) return;\n    trigger.setAttribute('aria-haspopup', 'dialog');\n    trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (!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: this.align,\n      // A popover sizes to its own content rather than to the trigger, and\n      // flips above when there is no room below.\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    // The panel is a dialog, so focus belongs inside it once it is showing.\n    panel.focus();\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  @Listen('click')\n  handleClick(event: MouseEvent) {\n    const trigger = this.trigger;\n    // Only the trigger toggles. A click inside the panel is the content's.\n    if (!trigger || !event.composedPath().includes(trigger)) return;\n    this.open = !this.open;\n  }\n\n  /**\n   * Escape for the `manual` case only. An `auto` popover is dismissed by the\n   * browser, and handling it here as well would fight that.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== Keys.Escape || this.dismissable || !this.open) return;\n    event.stopPropagation();\n    this.open = false;\n  }\n\n  /**\n   * Mirrors a change the browser made — light-dismiss, or being closed because\n   * another popover took the top layer — back into `open`, which then announces\n   * it through the watch above. Without this a consumer's `open` goes stale\n   * after a dismiss they did not initiate.\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 onSlotchange={() => this.syncTrigger()} />\n        <div\n          class=\"panel\"\n          part=\"panel\"\n          popover={this.dismissable ? 'auto' : 'manual'}\n          role=\"dialog\"\n          aria-label={this.label}\n          tabindex=\"-1\"\n          onToggle={this.onToggle}\n        >\n          <slot name=\"content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iJAAA,MAAMA,EAAe,IAAM,mmB,MCmCdC,EAASC,EAAA,MAAAD,UAAAE,E,+IAIoBC,KAAO,MAGvCC,MAAyB,QAGzBC,MASAC,YAAc,KAGbC,aAEDC,cAER,gBAAAC,GACEC,KAAKC,cACL,GAAID,KAAKP,KAAMO,KAAKE,W,CAGtB,oBAAAC,GACEH,KAAKF,iB,CAKP,UAAMM,GACJJ,KAAKP,KAAO,I,CAKd,UAAMY,GACJL,KAAKP,KAAO,K,CAed,QAAAa,CAASC,EAAeC,GACtB,GAAID,EAAMP,KAAKE,iBACVF,KAAKS,YACVT,KAAKC,cACL,GAAIM,IAASC,EAAUR,KAAKH,aAAaa,KAAK,CAAEjB,KAAMc,G,CAGxD,SAAYI,GACV,OAAOX,KAAKY,GAAGC,YAAYC,cAA2B,mBAAqB,I,CAG7E,WAAYC,GACV,OAAOf,KAAKY,GAAGI,iB,CAWT,WAAAf,GACN,MAAMc,EAAUf,KAAKe,QACrB,IAAKA,EAAS,OACdA,EAAQE,aAAa,gBAAiB,UACtCF,EAAQE,aAAa,gBAAiBjB,KAAKP,KAAO,OAAS,Q,CAGrD,SAAAS,GACN,MAAMS,EAAQX,KAAKW,MACnB,IAAKA,GAASA,EAAMO,QAAQ,iBAAkB,OAE9CP,EAAMQ,cACNnB,KAAKF,kBACLE,KAAKF,cAAgBsB,EAAwB,CAC3CC,UAAW,IAAMrB,KAAKe,QACtBO,YAAa,IAAMX,EACnBjB,MAAOM,KAAKN,MAGZ6B,iBAAkB,MAClBC,KAAM,KACNC,SAAU,EAAGC,OAAMC,SAAUC,EAAajB,EAAOe,EAAMC,KAIzDhB,EAAMkB,O,CAGA,SAAApB,GACNT,KAAKF,kBACLE,KAAKF,cAAgBgC,UACrB,MAAMnB,EAAQX,KAAKW,MACnB,GAAIA,GAAOO,QAAQ,iBAAkBP,EAAMoB,a,CAI7C,WAAAC,CAAYC,GACV,MAAMlB,EAAUf,KAAKe,QAErB,IAAKA,IAAYkB,EAAMC,eAAeC,SAASpB,GAAU,OACzDf,KAAKP,MAAQO,KAAKP,I,CAQpB,aAAA2C,CAAcH,GACZ,GAAIA,EAAMI,MAAQC,EAAKC,QAAUvC,KAAKJ,cAAgBI,KAAKP,KAAM,OACjEwC,EAAMO,kBACNxC,KAAKP,KAAO,K,CASNgD,SAAYR,IAClB,MAAM1B,EAAQ0B,EAAsBS,WAAa,OACjD,GAAInC,IAASP,KAAKP,KAAMO,KAAKP,KAAOc,CAAI,EAG1C,MAAAoC,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,4CACHO,EAAA,QAAAP,IAAA,2CAAMS,aAAc,IAAM9C,KAAKC,gBAC/B2C,EAAA,OAAAP,IAAA,2CACEU,MAAM,QACNC,KAAK,QACLC,QAASjD,KAAKJ,YAAc,OAAS,SACrCsD,KAAK,SAAQ,aACDlD,KAAKL,MACjBwD,SAAS,KACTV,SAAUzC,KAAKyC,UAEfG,EAAA,QAAAP,IAAA,2CAAMe,KAAK,a","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as r,H as a,h as s,a as t}from"./index.js";import{c as i,p as o}from"./p-BA6CMosJ.js";const n=()=>`@keyframes pf-progress-bar-in{from{width:0}}:host{align-items:center;display:inline-flex;gap:var(--space-2);min-width:220px}:host([hidden]){display:none}.track{background:var(--pf-progress-track-bg);border-radius:var(--radius-full);flex:1;height:8px;overflow:hidden;pointer-events:none}.fill{animation:pf-progress-bar-in var(--duration-slow) var(--easing-decelerate);background:var(--pf-progress-accent);border-radius:inherit;height:100%;transition:width var(--pf-transition-slow);width:var(--pf-progress-fill, 0%)}.value{color:var(--pf-progress-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}@media (prefers-reduced-motion: reduce){.fill{animation:none;transition:none}}`;const l=r(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}value=0;max=100;showValue=true;label;render(){const e=i(this.value,this.max);return s(t,{key:"09d62e00646da11864dcc3bb4724da8864d223fe",role:"progressbar","aria-label":this.label,"aria-valuemin":"0","aria-valuemax":`${this.max}`,"aria-valuenow":`${o(e,this.max)}`},s("div",{key:"42db85945311bd44d03058c0cd957b6397624cff",class:"track",part:"track"},s("div",{key:"8222865b45a18175308f87f4fd30a313bb5452d5",class:"fill",part:"fill",style:{"--pf-progress-fill":`${e}%`}})),this.showValue&&s("span",{key:"9e7a195ef193fd4e730bdf3eefb2f0170be56ecc",class:"value",part:"value"},Math.round(e),"%"))}static get style(){return n()}},[513,"pf-progress-bar",{value:[2],max:[2],showValue:[516,"show-value"],label:[1]}]);function f(){if(typeof customElements==="undefined"){return}const r=["pf-progress-bar"];r.forEach((r=>{switch(r){case"pf-progress-bar":if(!customElements.get(e(r))){customElements.define(e(r),l)}break}}))}f();const d=l;const p=f;export{d as PfProgressBar,p as defineCustomElement};
+//# sourceMappingURL=pf-progress-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfProgressBarCss","PfProgressBar","__stencil_proxyCustomElement","HTMLElement","value","max","showValue","label","render","percent","clampProgressPercent","this","h","Host","key","role","progressValueNow","class","part","style","Math","round"],"sources":["src/components/pf-progress-bar/pf-progress-bar.css?tag=pf-progress-bar&encapsulation=shadow","src/components/pf-progress-bar/pf-progress-bar.tsx"],"sourcesContent":["/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-progress-bar-in {\n  from {\n    width: 0;\n  }\n}\n\n:host {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n  min-width: 220px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.track {\n  background: var(--pf-progress-track-bg);\n  border-radius: var(--radius-full);\n  flex: 1;\n  height: 8px;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.fill {\n  animation: pf-progress-bar-in var(--duration-slow) var(--easing-decelerate);\n  background: var(--pf-progress-accent);\n  border-radius: inherit;\n  height: 100%;\n  /* Animate in from 0 on mount, and smoothly between values on change. */\n  transition: width var(--pf-transition-slow);\n  width: var(--pf-progress-fill, 0%);\n}\n\n.value {\n  color: var(--pf-progress-text-muted);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    animation: none;\n    transition: none;\n  }\n}\n","import { clampProgressPercent, progressValueNow } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A horizontal determinate progress track.\n *\n * @part track - the unfilled groove.\n * @part fill - the filled portion.\n * @part value - the percentage readout.\n */\n@Component({\n  tag: 'pf-progress-bar',\n  styleUrl: 'pf-progress-bar.css',\n  shadow: true,\n})\nexport class PfProgressBar {\n  /** How far along, on the 0..max scale. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 100;\n\n  /** Show the percentage beside the track. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  /** Accessible name. */\n  @Prop() label?: string;\n\n  render() {\n    // Both layers go through core, so the same value and max always report the\n    // same aria-valuenow and draw the same fill.\n    const percent = clampProgressPercent(this.value, this.max);\n\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-label={this.label}\n        aria-valuemin=\"0\"\n        aria-valuemax={`${this.max}`}\n        aria-valuenow={`${progressValueNow(percent, this.max)}`}\n      >\n        <div class=\"track\" part=\"track\">\n          <div class=\"fill\" part=\"fill\" style={{ '--pf-progress-fill': `${percent}%` }} />\n        </div>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {Math.round(percent)}%\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAmB,IAAM,msB,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,E,iFAEhBC,MAAQ,EAGRC,IAAM,IAGWC,UAAY,KAG7BC,MAER,MAAAC,GAGE,MAAMC,EAAUC,EAAqBC,KAAKP,MAAOO,KAAKN,KAEtD,OACEO,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,cAAa,aACNJ,KAAKJ,MAAK,gBACR,IAAG,gBACF,GAAGI,KAAKN,MAAK,gBACb,GAAGW,EAAiBP,EAASE,KAAKN,QAEjDO,EAAA,OAAAE,IAAA,2CAAKG,MAAM,QAAQC,KAAK,SACtBN,EAAA,OAAAE,IAAA,2CAAKG,MAAM,OAAOC,KAAK,OAAOC,MAAO,CAAE,qBAAsB,GAAGV,SAEjEE,KAAKL,WACJM,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QAAQC,KAAK,SACtBE,KAAKC,MAAMZ,GAAQ,K","ignoreList":[]}

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

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