@pitchfork-ui/elements 0.1.0 → 0.2.1

package/dist/pitchfork/p-2add2e98.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["padTimePart","value","String","padStart","parseTimeValue","match","exec","trim","hour","minute","Number","formatTimeValue","parts","formatTimeDisplay","hourCycle","toHour12","meridiemOf","hour24","face","toHour24","hour12","meridiem","base","timeRange","length","step","safeStep","Math","max","floor","count","ceil","Array","from","_","index","hourOptions","map","pfTimePickerCss","PfTimePicker","internals","name","open","minuteStep","label","description","error","placeholder","required","disabled","pfChange","pfOpenChange","initialValue","stopObserving","componentWillLoad","this","syncFormState","componentDidRender","scrollSelectedIntoView","disconnectedCallback","setFormValue","applyControlValidity","Boolean","syncOpen","next","previous","showPanel","hidePanel","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","cycle","panel","el","shadowRoot","querySelector","trigger","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","align","matchAnchorWidth","flip","onChange","left","top","placePopover","focus","undefined","hidePopover","option","querySelectorAll","scrollIntoView","block","onToggle","event","nowOpen","newState","commit","selectHour","selectedMeridiem","selectMinute","selectMeridiem","onColumnKeyDown","key","Keys","ArrowDown","ArrowUp","column","currentTarget","options","indexOf","activeElement","preventDefault","min","renderColumn","h","class","part","role","tabindex","onKeyDown","type","selected","onClick","onSelect","render","describedBy","composeDescribedBy","display","shownHour","Host","htmlFor","id","controlAriaLabel","popover"],"sources":["../core/dist/time.js","src/components/pf-time-picker/pf-time-picker.css?tag=pf-time-picker&encapsulation=shadow","src/components/pf-time-picker/pf-time-picker.tsx"],"sourcesContent":["//#region src/time.ts\n/**\n* Two digits, which both layers need for the column labels as well as for the\n* canonical value — so it is exported rather than private.\n*/\nvar padTimePart = (value) => String(value).padStart(2, \"0\");\n/**\n* Parses `HH:mm` (or `H:mm`) into hour and minute, or nulls.\n*\n* Out-of-range parts are rejected rather than wrapped: `25:00` is not 1am, it\n* is a mistake, and silently turning it into one hides the mistake.\n*/\nfunction parseTimeValue(value) {\n\tconst match = /^(\\d{1,2}):(\\d{2})$/.exec((value ?? \"\").trim());\n\tif (!match) return {\n\t\thour: null,\n\t\tminute: null\n\t};\n\tconst hour = Number(match[1]);\n\tconst minute = Number(match[2]);\n\tif (hour > 23 || minute > 59) return {\n\t\thour: null,\n\t\tminute: null\n\t};\n\treturn {\n\t\thour,\n\t\tminute\n\t};\n}\n/** The canonical 24-hour `HH:mm`, or `''` when either part is missing. */\nfunction formatTimeValue(parts) {\n\tif (parts.hour === null || parts.minute === null) return \"\";\n\treturn `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;\n}\n/** What the trigger shows: `14:30`, or `2:30 PM` on a 12-hour cycle. */\nfunction formatTimeDisplay(parts, hourCycle) {\n\tif (parts.hour === null || parts.minute === null) return \"\";\n\tif (hourCycle === 24) return `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;\n\treturn `${toHour12(parts.hour)}:${padTimePart(parts.minute)} ${meridiemOf(parts.hour)}`;\n}\n/** Which half of the day an hour falls in. */\nfunction meridiemOf(hour24) {\n\treturn hour24 < 12 ? \"AM\" : \"PM\";\n}\n/**\n* The 12-hour face of a 24-hour hour: midnight and midday both read as 12,\n* not 0, which is the one case `hour % 12` gets wrong.\n*/\nfunction toHour12(hour24) {\n\tconst face = hour24 % 12;\n\treturn face === 0 ? 12 : face;\n}\n/** The 24-hour hour for a clock face plus a meridiem. 12 AM is 0, 12 PM is 12. */\nfunction toHour24(hour12, meridiem) {\n\tconst base = hour12 % 12;\n\treturn meridiem === \"PM\" ? base + 12 : base;\n}\n/**\n* The options a column offers: `0, step, 2*step, …` below `length`.\n*\n* A step that does not divide the range leaves a short last stride rather\n* than overshooting — `timeRange(60, 25)` is `[0, 25, 50]`, and 50 is a real\n* minute where 75 is not.\n*/\nfunction timeRange(length, step = 1) {\n\tconst safeStep = Math.max(1, Math.floor(step));\n\tconst count = Math.ceil(length / safeStep);\n\treturn Array.from({ length: count }, (_, index) => index * safeStep);\n}\n/** The hours a column offers: 0–23, or the 1–12 clock face. */\nfunction hourOptions(hourCycle) {\n\treturn hourCycle === 24 ? timeRange(24) : timeRange(12).map((hour) => hour + 1);\n}\n//#endregion\nexport { formatTimeDisplay, formatTimeValue, hourOptions, meridiemOf, padTimePart, parseTimeValue, timeRange, toHour12, toHour24 };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-timepicker-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-timepicker-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-timepicker-bg);\n  border: 1px solid var(--pf-timepicker-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-timepicker-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-timepicker-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-timepicker-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-timepicker-placeholder);\n}\n\n.description {\n  color: var(--pf-timepicker-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-timepicker-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-timepicker-menu-bg);\n  border: 1px solid var(--pf-timepicker-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  display: flex;\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n.panel:popover-open {\n  animation: pf-time-picker-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-time-picker-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  max-height: 220px;\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n.column:focus-visible {\n  outline: none;\n}\n\n.option {\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-timepicker-text);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n  padding: var(--space-1) var(--space-3);\n  text-align: center;\n}\n\n.option:hover {\n  background: var(--pf-timepicker-option-hover-bg);\n}\n\n.option:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.option--selected {\n  background: var(--pf-timepicker-option-active-bg);\n  color: var(--pf-timepicker-option-active-text);\n}\n","import {\n  composeDescribedBy,\n  formatTimeDisplay,\n  formatTimeValue,\n  hourOptions,\n  Keys,\n  meridiemOf,\n  observeAnchoredPosition,\n  padTimePart,\n  parseTimeValue,\n  timeRange,\n  toHour12,\n  toHour24,\n  type HourCycle,\n  type Meridiem,\n  type TimeParts,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated time field: a trigger that opens hour, minute and (on a\n * 12-hour cycle) meridiem columns in a popover.\n *\n * The submitted value is always canonical 24-hour `HH:mm`, whatever\n * `hour-cycle` displays. A control whose submitted value changed with its\n * display would be unusable on a server, so the cycle is a rendering choice\n * and nothing more — all of that arithmetic is core's.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the columns.\n * @part panel - the floating panel.\n * @part column - each of the scrolling columns.\n * @part option - every option 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-time-picker',\n  styleUrl: 'pf-time-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfTimePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Canonical 24-hour `HH:mm`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the panel is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * 12- or 24-hour display. The value stays 24-hour either way.\n   *\n   * Read through `cycle` below, never directly: Stencil coerces an attribute\n   * using the prop's type as *written*, and it cannot resolve a name it had\n   * to import. Measured: with `HourCycle` imported from core,\n   * `hour-cycle=\"12\"` arrives as the **string** `\"12\"`, so `=== 12` is\n   * false, while `minute-step=\"15\"` — declared `number` — arrives as `15`.\n   * Writing `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`\n   * shows; the alias is kept here because it is the shared type, and the\n   * getter costs nothing.\n   */\n  @Prop() hourCycle: HourCycle = 24;\n\n  /** Granularity of the minutes column. */\n  @Prop() minuteStep = 1;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select time';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the time changes, with the canonical `HH:mm`. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  componentDidRender() {\n    if (this.open) this.scrollSelectedIntoView();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @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  /** A reset restores the value the field started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** `hourCycle` with the attribute case coerced; see the prop's comment. */\n  private get cycle(): HourCycle {\n    return Number(this.hourCycle) === 12 ? 12 : 24;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private get parts(): TimeParts {\n    return parseTimeValue(this.value);\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    this.scrollSelectedIntoView();\n    // Focus the first column's selected option, so the arrows work at once.\n    panel.querySelector<HTMLButtonElement>('[data-selected=\"true\"]')?.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  /**\n   * Centres each column on its chosen option.\n   *\n   * `block: 'nearest'` would leave a column that is already scrolled roughly\n   * right alone, which reads as the wrong hour being selected.\n   */\n  private scrollSelectedIntoView() {\n    for (const option of Array.from(\n      this.panel?.querySelectorAll<HTMLElement>('[data-selected=\"true\"]') ?? [],\n    )) {\n      if (typeof option.scrollIntoView === 'function') {\n        option.scrollIntoView({ block: 'center' });\n      }\n    }\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 commit(next: TimeParts) {\n    const value = formatTimeValue(next);\n    if (!value || value === this.value) return;\n    this.value = value;\n    this.pfChange.emit({ value });\n  }\n\n  private selectHour(hour: number) {\n    const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');\n    this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });\n  }\n\n  private selectMinute(minute: number) {\n    this.commit({ hour: this.parts.hour ?? 0, minute });\n  }\n\n  private selectMeridiem(meridiem: Meridiem) {\n    const { hour, minute } = this.parts;\n    this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });\n  }\n\n  private selectedMeridiem(): Meridiem | null {\n    const { hour } = this.parts;\n    return hour === null ? null : meridiemOf(hour);\n  }\n\n  /**\n   * Up and down move within a column, and stop at its ends rather than\n   * wrapping — a wrap in a scrolling column of 60 minutes reads as the list\n   * having jumped rather than moved.\n   *\n   * The focused option is read from `shadowRoot.activeElement`, because\n   * `document.activeElement` is this host: focus inside a shadow root is\n   * reported as the host from the outside.\n   */\n  private onColumnKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;\n\n    const column = event.currentTarget as HTMLElement;\n    const options = Array.from(column.querySelectorAll<HTMLButtonElement>('button'));\n    const index = options.indexOf(this.el.shadowRoot?.activeElement as HTMLButtonElement);\n    if (index === -1) return;\n\n    event.preventDefault();\n    const next = event.key === Keys.ArrowDown ? index + 1 : index - 1;\n    options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();\n  };\n\n  private renderColumn(\n    name: string,\n    options: Array<{ key: string; label: string; selected: boolean; onSelect: () => void }>,\n  ) {\n    return (\n      <div\n        class=\"column\"\n        part=\"column\"\n        role=\"listbox\"\n        aria-label={name}\n        tabindex={-1}\n        onKeyDown={this.onColumnKeyDown}\n      >\n        {options.map((option) => (\n          <button\n            key={option.key}\n            type=\"button\"\n            part=\"option\"\n            class={{ option: true, 'option--selected': option.selected }}\n            role=\"option\"\n            aria-selected={option.selected ? 'true' : 'false'}\n            data-selected={option.selected ? 'true' : 'false'}\n            onClick={option.onSelect}\n          >\n            {option.label}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const { hour, minute } = this.parts;\n    const display = formatTimeDisplay(this.parts, this.cycle);\n    const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);\n    const meridiem = this.selectedMeridiem();\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            disabled={this.disabled}\n            aria-haspopup=\"dialog\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the panel, so this IDREF resolves. */\n            aria-controls=\"panel\"\n            aria-invalid={this.error ? 'true' : null}\n            aria-required={this.required ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => {\n              if (!this.disabled) this.open = !this.open;\n            }}\n          >\n            <span class={{ value: true, 'value--placeholder': !display }}>\n              {display || this.placeholder}\n            </span>\n            <pf-icon name=\"clock\"></pf-icon>\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=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a time\"\n          onToggle={this.onToggle}\n        >\n          {this.renderColumn(\n            'Hour',\n            hourOptions(this.cycle).map((option) => ({\n              key: `h-${option}`,\n              label: padTimePart(option),\n              selected: shownHour === option,\n              onSelect: () => this.selectHour(option),\n            })),\n          )}\n\n          {this.renderColumn(\n            'Minute',\n            timeRange(60, this.minuteStep).map((option) => ({\n              key: `m-${option}`,\n              label: padTimePart(option),\n              selected: minute === option,\n              onSelect: () => this.selectMinute(option),\n            })),\n          )}\n\n          {this.cycle === 12 &&\n            this.renderColumn(\n              'AM or PM',\n              (['AM', 'PM'] as Meridiem[]).map((option) => ({\n                key: option,\n                label: option,\n                selected: meridiem === option,\n                onSelect: () => this.selectMeridiem(option),\n              })),\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-45039de3.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,a as e,h as s,H as a}from"./p-Bm6UxEit.js";import{c as r}from"./p-DfpCerXM.js";import{K as o}from"./p-g4FlTDZx.js";import{p as n,f as c,c as l,r as d,s as p}from"./p-BmcsJLdy.js";import{a as h}from"./p-Cr6IXrUk.js";import{c as f}from"./p-Cy_kHPeC.js";const u=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-taginput-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-taginput-invalid-border);margin-inline-start:var(--space-1)}.control{align-items:center;background:var(--pf-taginput-bg);border:1px solid var(--pf-taginput-border);border-radius:var(--radius-md);display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-1) var(--space-2)}.control:focus-within{border-color:var(--pf-taginput-focus-border);box-shadow:var(--pf-focus-ring)}.control--invalid{border-color:var(--pf-taginput-invalid-border)}.input{background:none;border:0;color:var(--pf-taginput-text);flex:1 1 6ch;font-family:inherit;font-size:var(--font-size-sm);min-width:6ch;outline:none;padding:var(--space-1)}.input::placeholder{color:var(--pf-taginput-placeholder)}.input:disabled{cursor:not-allowed}.description{color:var(--pf-taginput-placeholder);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-taginput-invalid-border);font-size:var(--font-size-xs);margin:0}`;const b=class{constructor(e){t(this,e);this.pfChange=i(this,"pfChange");if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}}get el(){return e(this)}internals;name;value="";label;description;error;placeholder="Add a tag…";max;allowDuplicates=false;tagVariant="neutral";required=false;disabled=false;validate;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){const t=this.tags();if(t.length===0||!this.name){this.internals.setFormValue(null)}else{const i=new FormData;for(const e of t)i.append(this.name,e);this.internals.setFormValue(i)}h(this.internals,t.length>0,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;const t=this.input;if(t)t.value=""}tags(){return n(this.value)}get input(){return this.el.shadowRoot?.querySelector('[part="input"]')??null}get options(){return{max:this.max,allowDuplicates:this.allowDuplicates,validate:this.validate}}commit(t){this.value=c(t);this.pfChange.emit({value:this.value,values:t})}addDraft(t){const i=l(this.tags(),t,this.options);const e=this.input;if(i.added){this.commit(i.tags);if(e)e.value="";return}if(i.refusal==="duplicate"&&e)e.value=""}remove(t){if(this.disabled)return;this.commit(d(this.tags(),t));this.input?.focus()}onKeyDown=t=>{if(this.disabled)return;const i=t.target;if(t.key===o.Enter||t.key===","){if(i.value.trim()){t.preventDefault();this.addDraft(i.value)}else if(t.key!==o.Enter){t.preventDefault()}return}if(t.key==="Backspace"&&i.value===""&&this.tags().length>0){t.preventDefault();this.remove(this.tags().length-1)}};onPaste=t=>{if(this.disabled)return;const i=p(t.clipboardData?.getData("text")??"");if(i.length===0)return;t.preventDefault();let e=this.tags();for(const t of i)e=l(e,t,this.options).tags;this.commit(e);const s=this.input;if(s)s.value=""};render(){const t=r(this.description&&"description",this.error&&"error");const i=this.tags();const e=this.max!==undefined&&i.length>=this.max;return s(a,{key:"fcd65f00fd3c83168d4aa60792eb082f2f34846b"},s("div",{key:"9d2660af1fd754840ec49eb1a8d4882e5fd1fc34",class:"field",part:"field"},this.label&&s("label",{key:"4bce4bfd9258b72f95dc038be8ad8a34f0684c0c",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&s("span",{key:"9c82d014c88b2d5fd4cbd8be60c1a98834baa8a9",class:"required","aria-hidden":"true"},"*")),s("div",{key:"df92aae8117828f5bd11b7f09aaf64b4c19cefa5",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},i.map(((t,i)=>s("pf-tag",{key:t,part:"tag",variant:this.tagVariant,dismissible:!this.disabled,dismissLabel:`Remove ${t}`,onPfDismiss:()=>this.remove(i)},t))),s("input",{key:"e606fa3fd879dcef2e878e5311b601c4e46860c3",id:"input","aria-label":f(this.el,this.label),part:"input",class:"input",type:"text",autocomplete:"off",disabled:this.disabled||e,required:this.required&&i.length===0,placeholder:e?"":this.placeholder,"aria-invalid":this.error?"true":null,"aria-describedby":t,onKeyDown:this.onKeyDown,onPaste:this.onPaste,onBlur:t=>{const i=t.target;if(i.value.trim())this.addDraft(i.value)}})),this.description&&s("p",{key:"099590e7e19084d8aaaf595bb280ac61118c5a6e",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"0ab0b8ebc4e94ce1eed0ea57747c3c0b21d7d174",class:"error",part:"error",id:"error"},this.error)))}static get formAssociated(){return true}static get watchers(){return{name:[{syncFormState:0}],value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}};b.style=u();export{b as pf_tag_input};
+//# sourceMappingURL=p-45039de3.entry.js.map

package/dist/pitchfork/p-45039de3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTagInputCss","PfTagInput","internals","name","value","label","description","error","placeholder","max","allowDuplicates","tagVariant","required","disabled","validate","pfChange","initialValue","componentWillLoad","this","syncFormState","tags","length","setFormValue","data","FormData","tag","append","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","field","input","parseValueList","el","shadowRoot","querySelector","options","commit","formatValueList","emit","values","addDraft","raw","result","addTag","added","refusal","remove","index","removeTagAt","focus","onKeyDown","event","target","key","Keys","Enter","trim","preventDefault","onPaste","pasted","splitPastedTags","clipboardData","getData","next","candidate","render","describedBy","composeDescribedBy","atMax","undefined","h","Host","class","part","htmlFor","control","Boolean","map","variant","dismissible","dismissLabel","onPfDismiss","id","controlAriaLabel","type","autocomplete","onBlur"],"sources":["src/components/pf-tag-input/pf-tag-input.css?tag=pf-tag-input&encapsulation=shadow","src/components/pf-tag-input/pf-tag-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-1);\n}\n\n.label {\n  color: var(--pf-taginput-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-taginput-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n/*\n * The chips and the draft field share one box that looks like a single input,\n * so clicking anywhere in it lands on the field.\n */\n.control {\n  align-items: center;\n  background: var(--pf-taginput-bg);\n  border: 1px solid var(--pf-taginput-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-2);\n}\n\n.control:focus-within {\n  border-color: var(--pf-taginput-focus-border);\n  box-shadow: var(--pf-focus-ring);\n}\n\n.control--invalid {\n  border-color: var(--pf-taginput-invalid-border);\n}\n\n.input {\n  background: none;\n  border: 0;\n  color: var(--pf-taginput-text);\n  /* Grows to fill the row's remainder, but never forces the box wider. */\n  flex: 1 1 6ch;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  min-width: 6ch;\n  outline: none;\n  padding: var(--space-1);\n}\n\n.input::placeholder {\n  color: var(--pf-taginput-placeholder);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n.description {\n  color: var(--pf-taginput-placeholder);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-taginput-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n","import {\n  addTag,\n  composeDescribedBy,\n  formatValueList,\n  Keys,\n  parseValueList,\n  removeTagAt,\n  splitPastedTags,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport type { PfTagVariant } from '../pf-tag/pf-tag';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated field that collects free-text tags.\n *\n * Unlike the other multi-value controls here the tags are not chosen from a\n * list, so there are no `pf-option` children — the chips are `pf-tag`\n * elements this component renders, and `pf-tag` already has the dismiss\n * button and the event for it.\n *\n * The rules are core's: trimming, the case-insensitive dedup (`React` and\n * `react` are one tag), the maximum, and `validate`. So is the paste split.\n * What stays here is what to do with the draft, which differs per refusal — a\n * duplicate clears it, because the tag asked for is already there, while\n * hitting the maximum leaves it so nothing is lost.\n *\n * Submits one entry per tag under one name, the same way `pf-multi-select`\n * does.\n *\n * @slot - nothing; the chips are rendered from `value`.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the chips and the draft input.\n * @part tag - each chip.\n * @part input - the draft input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-tag-input',\n  styleUrl: 'pf-tag-input.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfTagInput {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name, once per tag. Reflected. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The tags, comma-separated. Reflected, so HTML can set it. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Add a tag…';\n\n  /** Stop accepting tags once there are this many. */\n  @Prop() max?: number;\n\n  /** Accept the same tag twice. The comparison is case-insensitive. */\n  @Prop() allowDuplicates = false;\n\n  /**\n   * Visual variant for the chips, passed through to `pf-tag`.\n   *\n   * The type is imported from `pf-tag` rather than restated, so the two\n   * cannot drift apart — a second copy of the union would compile happily\n   * while offering a variant `pf-tag` has never heard of.\n   */\n  @Prop() tagVariant: PfTagVariant = 'neutral';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Refuse a candidate tag. A property rather than an attribute, because a\n   * function cannot be written in HTML — the generated bindings set props as\n   * properties, so a framework consumer passes it like any other.\n   */\n  @Prop() validate?: (tag: string) => boolean;\n\n  /** Fires when the tags change, with both representations. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  /** See pf-multi-select: the name is built into the FormData, so watch it. */\n  @Watch('name')\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const tags = this.tags();\n\n    if (tags.length === 0 || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      const data = new FormData();\n      for (const tag of tags) data.append(this.name, tag);\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, tags.length > 0, this.required, this.error);\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    const field = this.input;\n    if (field) field.value = '';\n  }\n\n  private tags(): string[] {\n    return parseValueList(this.value);\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector<HTMLInputElement>('[part=\"input\"]') ?? null;\n  }\n\n  private get options() {\n    return { max: this.max, allowDuplicates: this.allowDuplicates, validate: this.validate };\n  }\n\n  private commit(tags: string[]) {\n    this.value = formatValueList(tags);\n    this.pfChange.emit({ value: this.value, values: tags });\n  }\n\n  /** Takes the draft as a tag, and decides what to do with the draft itself. */\n  private addDraft(raw: string) {\n    const result = addTag(this.tags(), raw, this.options);\n    const field = this.input;\n\n    if (result.added) {\n      this.commit(result.tags);\n      if (field) field.value = '';\n      return;\n    }\n\n    // Only a duplicate consumes the draft; `max` leaves it so nothing is lost.\n    if (result.refusal === 'duplicate' && field) field.value = '';\n  }\n\n  private remove(index: number) {\n    if (this.disabled) return;\n    this.commit(removeTagAt(this.tags(), index));\n    this.input?.focus();\n  }\n\n  /**\n   * Enter and comma commit; Backspace on an empty draft removes the last tag,\n   * which is the gesture every tag field has.\n   */\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    const field = event.target as HTMLInputElement;\n\n    if (event.key === Keys.Enter || event.key === ',') {\n      // A bare comma with nothing typed is swallowed rather than committing an\n      // empty tag; Enter is left alone so a form can still be submitted.\n      if (field.value.trim()) {\n        event.preventDefault();\n        this.addDraft(field.value);\n      } else if (event.key !== Keys.Enter) {\n        event.preventDefault();\n      }\n      return;\n    }\n\n    if (event.key === 'Backspace' && field.value === '' && this.tags().length > 0) {\n      event.preventDefault();\n      this.remove(this.tags().length - 1);\n    }\n  };\n\n  /**\n   * A pasted list is folded, not added one at a time, so the maximum and the\n   * dedup see each addition. The React component added them in a loop over\n   * stale state and kept only the last — fixed there too, in the same change.\n   */\n  private onPaste = (event: ClipboardEvent) => {\n    if (this.disabled) return;\n    const pasted = splitPastedTags(event.clipboardData?.getData('text') ?? '');\n    if (pasted.length === 0) return;\n\n    event.preventDefault();\n    let next = this.tags();\n    for (const candidate of pasted) next = addTag(next, candidate, this.options).tags;\n\n    this.commit(next);\n    const field = this.input;\n    if (field) field.value = '';\n  };\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const tags = this.tags();\n    const atMax = this.max !== undefined && tags.length >= this.max;\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            {tags.map((tag, index) => (\n              <pf-tag\n                key={tag}\n                part=\"tag\"\n                variant={this.tagVariant}\n                dismissible={!this.disabled}\n                dismissLabel={`Remove ${tag}`}\n                onPfDismiss={() => this.remove(index)}\n              >\n                {tag}\n              </pf-tag>\n            ))}\n\n            <input\n              id=\"input\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"input\"\n              class=\"input\"\n              type=\"text\"\n              autocomplete=\"off\"\n              disabled={this.disabled || atMax}\n              required={this.required && tags.length === 0}\n              placeholder={atMax ? '' : this.placeholder}\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              onKeyDown={this.onKeyDown}\n              onPaste={this.onPaste}\n              onBlur={(event) => {\n                // Commit on blur, so a typed tag is not lost by clicking away.\n                const field = event.target as HTMLInputElement;\n                if (field.value.trim()) this.addDraft(field.value);\n              }}\n            />\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,a as i,h as r,H as a}from"./p-Bm6UxEit.js";import{a as s}from"./p-Cr6IXrUk.js";import{c as n}from"./p-Cy_kHPeC.js";const o=()=>`:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-switch-track-bg);border-radius:var(--radius-full);cursor:pointer;height:24px;margin:0;position:relative;transition:background-color 120ms ease;width:44px}.input::after{background:var(--pf-switch-thumb-bg);border-radius:50%;content:'';height:20px;left:2px;position:absolute;top:2px;transition:transform 120ms ease;width:20px}.input:checked{background:var(--pf-switch-track-checked-bg)}.input:checked::after{transform:translateX(20px)}.input:focus-visible{box-shadow:var(--pf-switch-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-switch-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-switch-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}@media (prefers-reduced-motion: reduce){.input,.input::after{transition:none}}`;const c=class{constructor(i){e(this,i);this.pfChange=t(this,"pfChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;checked=false;value="on";label;error;required=false;disabled=false;pfChange;initialChecked=false;componentWillLoad(){this.initialChecked=this.checked;this.syncFormState()}syncFormState(){this.internals.setFormValue(this.checked?this.value:null);s(this.internals,this.checked,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.checked=this.initialChecked}onChange=e=>{this.checked=e.target.checked;this.pfChange.emit({checked:this.checked,value:this.value})};render(){return r(a,{key:"4c521d4d2e26f0adf9542c8eb490fedf78b6361a"},r("div",{key:"3d7dcdfd665db7435e49b1ad93518b380d63c52e",class:"field",part:"field"},r("input",{key:"936c2972a1249d1bfd5aeac3fc4e590e51360487",id:"input","aria-label":n(this.el,this.label),part:"input",class:"input",type:"checkbox",role:"switch",name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,"aria-invalid":this.error?"true":null,"aria-describedby":this.error?"error":null,onChange:this.onChange}),this.label&&r("label",{key:"90aad05c07c0a81c785de9aad998c876b3f4ae21",class:"label",part:"label",htmlFor:"input"},this.label)),this.error&&r("p",{key:"d2904bfb254bb2ae9699c50e6ab4fe150beb98e8",class:"error",part:"error",id:"error"},this.error))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}}};c.style=o();export{c as pf_switch};
+//# sourceMappingURL=p-4dfe7e8a.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfSwitchCss","PfSwitch","internals","name","checked","value","label","error","required","disabled","pfChange","initialChecked","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onChange","event","target","emit","render","h","Host","key","class","part","id","controlAriaLabel","el","type","role","htmlFor"],"sources":["src/components/pf-switch/pf-switch.css?tag=pf-switch&encapsulation=shadow","src/components/pf-switch/pf-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.input {\n  appearance: none;\n  background: var(--pf-switch-track-bg);\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  height: 24px;\n  margin: 0;\n  position: relative;\n  transition: background-color 120ms ease;\n  width: 44px;\n}\n\n/* The thumb. */\n.input::after {\n  background: var(--pf-switch-thumb-bg);\n  border-radius: 50%;\n  content: '';\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  transition: transform 120ms ease;\n  width: 20px;\n}\n\n.input:checked {\n  background: var(--pf-switch-track-checked-bg);\n}\n\n.input:checked::after {\n  transform: translateX(20px);\n}\n\n.input:focus-visible {\n  box-shadow: var(--pf-switch-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.input:disabled + .label {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.label {\n  color: var(--pf-switch-label-text);\n  font-size: var(--font-size-md);\n}\n\n.error {\n  color: var(--pf-switch-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: var(--space-1) 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .input,\n  .input::after {\n    transition: none;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/**\n * A form-associated on/off switch.\n *\n * Built on a native checkbox with `role=\"switch\"`, exactly as the React\n * component is: a switch is a checkbox whose two states are \"on\" and \"off\"\n * rather than \"selected\" and \"not selected\", and the role is the only\n * difference assistive technology needs.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox carrying role=\"switch\".\n * @part label - the label element.\n */\n@Component({\n  tag: 'pf-switch',\n  styleUrl: 'pf-switch.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfSwitch {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Whether the switch is on. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * What is submitted when on. Mirrors the native attribute, whose default is\n   * also `on` — a checkbox with no value still submits something.\n   */\n  @Prop() value = 'on';\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the user turns the switch on or off. */\n  @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n  /** The state a form reset restores, which is the initial attribute. */\n  private initialChecked = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormState();\n  }\n\n  @Watch('checked')\n  @Watch('error')\n  @Watch('required')\n  @Watch('value')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, when off: an unchecked checkbox is\n     * absent from the submission entirely, rather than present and empty.\n     * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n     * on, and it is what a native checkbox does.\n     */\n    this.internals.setFormValue(this.checked ? this.value : null);\n    applyControlValidity(this.internals, this.checked, 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  /**\n   * A reset restores the initial state, not `false` — a native\n   * `<input type=checkbox checked>` comes back on.\n   */\n  formResetCallback() {\n    this.checked = this.initialChecked;\n  }\n\n  private onChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this.pfChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          <input\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"input\"\n            class=\"input\"\n            type=\"checkbox\"\n            role=\"switch\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={this.error ? 'error' : null}\n            onChange={this.onChange}\n          />\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n            </label>\n          )}\n        </div>\n        {this.error && (\n          <p class=\"error\" part=\"error\" id=\"error\">\n            {this.error}\n          </p>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAc,IAAM,4iC,MCkCbC,EAAQ,M,mPAGAC,UAWMC,KAGeC,QAAU,MAM1CC,MAAQ,KAGRC,MAGAC,MAEiBC,SAAW,MAEXC,SAAW,MAG3BC,SAGDC,eAAiB,MAEzB,iBAAAC,GACEC,KAAKF,eAAiBE,KAAKT,QAC3BS,KAAKC,e,CAOP,aAAAA,GAOED,KAAKX,UAAUa,aAAaF,KAAKT,QAAUS,KAAKR,MAAQ,MACxDW,EAAqBH,KAAKX,UAAWW,KAAKT,QAASS,KAAKL,SAAUK,KAAKN,M,CAKzE,mBAAMU,GACJ,OAAOJ,KAAKX,UAAUe,e,CAKxB,oBAAMC,GACJ,OAAOL,KAAKX,UAAUgB,gB,CAKxB,0BAAMC,GACJ,OAAON,KAAKX,UAAUkB,iB,CAOxB,iBAAAC,GACER,KAAKT,QAAUS,KAAKF,c,CAGdW,SAAYC,IAClBV,KAAKT,QAAWmB,EAAMC,OAA4BpB,QAClDS,KAAKH,SAASe,KAAK,CAAErB,QAASS,KAAKT,QAASC,MAAOQ,KAAKR,OAAQ,EAGlE,MAAAqB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACtBJ,EAAA,SAAAE,IAAA,2CACEG,GAAG,QAAO,aACEC,EAAiBpB,KAAKqB,GAAIrB,KAAKP,OAC3CyB,KAAK,QACLD,MAAM,QACNK,KAAK,WACLC,KAAK,SACLjC,KAAMU,KAAKV,KACXE,MAAOQ,KAAKR,MACZD,QAASS,KAAKT,QACdI,SAAUK,KAAKL,SACfC,SAAUI,KAAKJ,SAAQ,eACTI,KAAKN,MAAQ,OAAS,KAAI,mBACtBM,KAAKN,MAAQ,QAAU,KACzCe,SAAUT,KAAKS,WAEhBT,KAAKP,OACJqB,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQM,QAAQ,SACvCxB,KAAKP,QAIXO,KAAKN,OACJoB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BnB,KAAKN,O","ignoreList":[]}

package/dist/pitchfork/p-51353d53.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,a as i,h as s,H as r}from"./p-Bm6UxEit.js";import{o as a,p as o}from"./p-CC7AyfOt.js";import{c as n}from"./p-DfpCerXM.js";import{i as l,K as c}from"./p-g4FlTDZx.js";import{g as h,r as d}from"./p-CAz7-p8y.js";import{a as p}from"./p-Cr6IXrUk.js";import{c as f}from"./p-Cy_kHPeC.js";var u=500;function b(t){return t.length===1&&t!==" "}function v(t,e){if(!b(e))return t;return t+e.toLowerCase()}function g(t){return t.length>0&&[...t].every((e=>e===t[0]))}function m(t,e,i=-1,s=()=>false){if(!e||t.length===0)return-1;const r=g(e);const a=r?e[0]:e;const o=i<0?0:r?i+1:i;for(let e=0;e<t.length;e+=1){const i=(o+e)%t.length;if(s(i))continue;if(t[i]?.trim().toLowerCase().startsWith(a))return i}return-1}const y=()=>`:host{display:block;--pf-option-text:var(--pf-select-input-text, var(--pf-input-text));--pf-option-text-disabled:var(--pf-select-input-placeholder, var(--pf-input-placeholder));--pf-option-active-bg:var(--pf-select-option-active-bg);--pf-option-active-text:var(--pf-select-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-input-label-text, var(--pf-input-text));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-select-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:hover:not(:disabled){border-color:var(--pf-input-border-hover)}.trigger:focus-visible{border-color:var(--pf-select-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-select-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-input-placeholder)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.listbox{inset:auto;margin:0;background:var(--pf-select-menu-bg);border:1px solid var(--pf-select-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-select-in var(--pf-transition-enter)}@keyframes pf-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;const x={[c.ArrowDown]:"next",[c.ArrowUp]:"previous",[c.Home]:"first",[c.End]:"last"};const k=class{constructor(i){t(this,i);this.pfChange=e(this,"pfChange");this.pfOpenChange=e(this,"pfOpenChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";open=false;label;description;error;placeholder="Select an option";required=false;disabled=false;maxVisibleOptions;pfChange;pfOpenChange;selectedLabel="";initialValue="";stopObserving;activeOption=null;typeahead="";typeaheadTimer;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.syncOptions()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}syncFormState(){this.internals.setFormValue(this.value||null);p(this.internals,Boolean(this.value),this.required,this.error)}syncOptions(){const t=this.options();let e="";for(const i of t){const t=this.optionValue(i)===this.value&&this.value!=="";i.selected=t;if(t)e=i.textContent?.trim()??""}this.selectedLabel=e}syncOpen(t,e){if(t)this.showListbox();else this.hideListbox();if(t!==e)this.pfOpenChange.emit({open:t})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onSlotChange=()=>{this.syncOptions()};async refresh(){this.syncOptions()}options(){return Array.from(this.el.querySelectorAll("pf-option"))}enabled(){return this.options().filter((t=>!t.hasAttribute("disabled")))}optionValue(t){return t.value??t.getAttribute("value")??""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}showListbox(){const t=this.listbox;if(this.disabled||!t||t.matches(":popover-open"))return;t.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.trigger,getFloating:()=>t,matchAnchorWidth:true,flip:true,onChange:({left:e,top:i,width:s,minWidth:r})=>{o(t,e,i);if(s!==undefined)t.style.width=`${s}px`;if(r!==undefined)t.style.minWidth=`${r}px`}});const e=this.options();const i=e.find((t=>this.optionValue(t)===this.value));this.setActive(i&&!i.hasAttribute("disabled")?i:this.enabled()[0]??null)}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;this.clearTypeahead();const t=this.listbox;if(t?.matches(":popover-open"))t.hidePopover()}onToggle=t=>{const e=t.newState==="open";if(this.open!==e)this.open=e;if(!e)this.trigger?.focus()};setActive(t){for(const e of this.options()){if(e!==t)e.active=false}if(t)t.active=true;this.activeOption=t;this.syncActiveDescendant();if(t&&typeof t.scrollIntoView==="function"){t.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const t=this.trigger;if(!t||!("ariaActiveDescendantElement"in t))return;t.ariaActiveDescendantElement=this.open?this.activeOption:null}commit(t){if(t.hasAttribute("disabled"))return;const e=this.optionValue(t);this.open=false;this.trigger?.focus();if(e===this.value)return;this.value=e;this.pfChange.emit({value:e})}handleOptionSelect(t){t.stopPropagation();if(this.disabled)return;const e=this.options().find((e=>this.optionValue(e)===t.detail.value));if(e)this.commit(e)}move(t){const e=this.options();const i=h(e,(t=>t.hasAttribute("disabled")));const s=this.activeOption?e.indexOf(this.activeOption):-1;const r=d(t,i,s);if(r!==-1)this.setActive(e[r]??null)}clearTypeahead(){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.typeaheadTimer=undefined;this.typeahead=""}handleTypeahead(t){this.typeahead=v(this.typeahead,t);if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.typeaheadTimer=setTimeout((()=>this.clearTypeahead()),u);const e=this.options();const i=e.map((t=>t.textContent??""));const s=this.activeOption?e.indexOf(this.activeOption):-1;const r=m(i,this.typeahead,s,(t=>e[t].hasAttribute("disabled")));if(r===-1)return;if(this.open)this.setActive(e[r]);else this.commit(e[r])}handleKeyDown(t){if(this.disabled||t.defaultPrevented)return;const e=x[t.key];if(e){t.preventDefault();if(!this.open)this.open=true;else this.move(e);return}if(l(t.key)){t.preventDefault();if(!this.open){this.open=true}else if(this.activeOption){this.commit(this.activeOption)}return}if(b(t.key)){t.preventDefault();this.handleTypeahead(t.key)}}render(){const t=n(this.description&&"description",this.error&&"error");return s(r,{key:"ccb96054293516751523dc6b89d3fd3bb3e08902"},s("div",{key:"65d6ca23015f8371f02715f1b3cf862122c94932",class:"field",part:"field"},this.label&&s("label",{key:"580a891de1e1c60481a494ab5f915e0c8528d511",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&s("span",{key:"dd0e347bcfafdca6eba7dc06f596215b47331e8f",class:"required","aria-hidden":"true"},"*")),s("button",{key:"7c6b543a99a06b9d18a6339e0aa3c6ad3d2eb260",id:"trigger","aria-label":f(this.el,this.label),part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",role:"combobox",disabled:this.disabled,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":t,onClick:()=>{if(!this.disabled)this.open=!this.open}},s("span",{key:"032fb5d8de622dde393a5100ce69d08944916bb9",class:{value:true,"value--placeholder":!this.selectedLabel}},this.selectedLabel||this.placeholder),s("span",{key:"eae5f550a6b4f16a27a044220db57236aebd31b8",class:"chevron","aria-hidden":"true"},s("pf-icon",{key:"7983ac569e121be6a98822cdbec4c46ae43dc99e",name:"chevron-down"}))),this.description&&s("p",{key:"c27fc89569900855af8966fcec3246f7f12c1d20",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"6d805181ffb58622ed41e688195bdf58511e7efa",class:"error",part:"error",id:"error"},this.error)),s("div",{key:"2dbc1adeaf68449ffaf32fc07d694d4c66860e90",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-label":this.label??this.placeholder,style:this.maxVisibleOptions?{maxHeight:`calc(${this.maxVisibleOptions} * 36px)`,overflowY:"auto"}:undefined,onToggle:this.onToggle},s("slot",{key:"02373173990a5e9ecad005b21f1a4b11d2cef032",onSlotchange:this.onSlotChange})))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};k.style=y();export{k as pf_select};
+//# sourceMappingURL=p-51353d53.entry.js.map

package/dist/pitchfork/p-51353d53.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TYPEAHEAD_TIMEOUT_MS","isTypeaheadKey","key","length","nextTypeaheadBuffer","buffer","toLowerCase","isCycling","every","char","findTypeaheadMatch","labels","fromIndex","isDisabled","cycling","needle","start","step","index","trim","startsWith","pfSelectCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfSelect","internals","name","value","open","label","description","error","placeholder","required","disabled","maxVisibleOptions","pfChange","pfOpenChange","selectedLabel","initialValue","stopObserving","activeOption","typeahead","typeaheadTimer","componentWillLoad","this","syncFormState","syncOptions","componentDidRender","syncActiveDescendant","disconnectedCallback","clearTimeout","setFormValue","applyControlValidity","Boolean","options","option","selected","optionValue","textContent","syncOpen","next","previous","showListbox","hideListbox","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onSlotChange","refresh","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","chosen","find","setActive","clearTypeahead","hidePopover","onToggle","event","nowOpen","newState","focus","other","active","scrollIntoView","block","ariaActiveDescendantElement","commit","handleOptionSelect","stopPropagation","candidate","detail","move","action","enabledIndexes","getEnabledIndexes","current","indexOf","resolveListMove","handleTypeahead","setTimeout","map","match","handleKeyDown","defaultPrevented","preventDefault","isActivationKey","render","describedBy","composeDescribedBy","h","Host","class","part","htmlFor","id","controlAriaLabel","type","role","onClick","popover","maxHeight","overflowY","onSlotchange"],"sources":["../core/dist/typeahead.js","src/components/pf-select/pf-select.css?tag=pf-select&encapsulation=shadow","src/components/pf-select/pf-select.tsx"],"sourcesContent":["//#region src/typeahead.ts\n/**\n* Printable-character typeahead for a listbox, menu or tree.\n*\n* The ARIA listbox pattern expects it: typing `b` jumps to the next option\n* beginning with `b`, and typing `br` narrows to `br`. The React `Select` has\n* none of this — `todo.md` has the fix — so the rules live here, where\n* `<pf-select>` and every later `pf-combobox` / `pf-multi-select` /\n* `pf-tree-view` read the same ones.\n*\n* Core owns the matching; the rendering layer owns the buffer and its timer,\n* because a timer is state and core is never a state container.\n*/\n/** How long a quiet gap ends one typeahead word, in milliseconds. */\nvar TYPEAHEAD_TIMEOUT_MS = 500;\n/**\n* Whether a key should go into the buffer at all.\n*\n* One character, so `Enter`, `ArrowDown` and `Escape` are excluded by length\n* rather than by a list that would need keeping up to date. A space is\n* deliberately *not* typeahead: in a listbox it selects.\n*/\nfunction isTypeaheadKey(key) {\n\treturn key.length === 1 && key !== \" \";\n}\n/**\n* The buffer after `key`: lower-cased and appended, nothing more.\n*\n* A repeat is *not* special-cased here. Pressing `b` four times means \"the\n* fourth option starting with b\" rather than \"an option starting with bbbb\",\n* but that is a matching question, so `findTypeaheadMatch` reads it off the\n* buffer's shape instead — which keeps this function a plain append and lets\n* the caller hold one string.\n*/\nfunction nextTypeaheadBuffer(buffer, key) {\n\tif (!isTypeaheadKey(key)) return buffer;\n\treturn buffer + key.toLowerCase();\n}\n/**\n* True when the buffer is one character repeated — including just once.\n*\n* The single-character case is the important one, and requiring two got it\n* wrong: pressing `b` while already on Banana has to move to Blackberry, the\n* way a native `<select>` does, not sit still because Banana also starts with\n* `b`. Found by a browser test on `pf-select`.\n*/\nfunction isCycling(buffer) {\n\treturn buffer.length > 0 && [...buffer].every((char) => char === buffer[0]);\n}\n/**\n* The index of the option the buffer points at, or -1.\n*\n* Searches from `fromIndex` and wraps, so a match behind the current option is\n* still found. Two modes:\n*\n* - **Narrowing** (`br`): the current option is included, because typing more\n*   of the label you are already on should keep you there rather than skip to\n*   the next `br`.\n* - **Cycling** (`b`, `bb`, `bbb`): one character repeated, searched from\n*   *after* the current option — so pressing one letter walks through the\n*   options beginning with it, which is what a native `<select>` does.\n*\n* A disabled option is never matched: the keyboard would land somewhere it\n* cannot act, which is worse than not moving.\n*/\nfunction findTypeaheadMatch(labels, buffer, fromIndex = -1, isDisabled = () => false) {\n\tif (!buffer || labels.length === 0) return -1;\n\tconst cycling = isCycling(buffer);\n\tconst needle = cycling ? buffer[0] : buffer;\n\tconst start = fromIndex < 0 ? 0 : cycling ? fromIndex + 1 : fromIndex;\n\tfor (let step = 0; step < labels.length; step += 1) {\n\t\tconst index = (start + step) % labels.length;\n\t\tif (isDisabled(index)) continue;\n\t\tif (labels[index]?.trim().toLowerCase().startsWith(needle)) return index;\n\t}\n\treturn -1;\n}\n//#endregion\nexport { TYPEAHEAD_TIMEOUT_MS, findTypeaheadMatch, isTypeaheadKey, nextTypeaheadBuffer };\n","/*\n * The generic set pf-option reads, mapped to this control's own family. They\n * inherit through the shadow boundary, so a slotted option is themed by the\n * listbox it sits in without knowing which that is.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-select-input-text, var(--pf-input-text));\n  --pf-option-text-disabled: var(--pf-select-input-placeholder, var(--pf-input-placeholder));\n  --pf-option-active-bg: var(--pf-select-option-active-bg);\n  --pf-option-active-text: var(--pf-select-option-active-text);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-input-label-text, var(--pf-input-text));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-select-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-text);\n  cursor: pointer;\n  display: flex;\n  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:hover:not(:disabled) {\n  border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\n  border-color: var(--pf-select-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-select-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-input-placeholder);\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/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-select-menu-bg);\n  border: 1px solid var(--pf-select-menu-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-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-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  findTypeaheadMatch,\n  getEnabledIndexes,\n  isActivationKey,\n  Keys,\n  nextTypeaheadBuffer,\n  observeAnchoredPosition,\n  resolveListMove,\n  TYPEAHEAD_TIMEOUT_MS,\n  isTypeaheadKey,\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 single-choice select over `pf-option` children.\n *\n * The first of Wave 5, and the worked example for §2.1: the options are child\n * elements, so a label is a slot and can hold anything, where the React\n * `Select`'s `options` array can only hold a string.\n *\n * **It has typeahead, which the React component does not.** Typing `b` jumps\n * to the next option beginning with `b`, `br` narrows, and `bbb` cycles — the\n * ARIA listbox pattern, and the matching is core's so a later `pf-combobox`\n * answers the same keystrokes. `todo.md` has the React fix.\n *\n * Form-associated, so the value submits by itself. The React component fakes\n * that with a hidden `<input>` beside the trigger.\n *\n * The active option is set as an *element*, not an IDREF: the trigger is in\n * this shadow root and the options are slotted light DOM, and a cross-root\n * IDREF is absent from the accessibility tree — measured. `aria-controls` does\n * work, because the listbox itself is in this same root.\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 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-select',\n  styleUrl: 'pf-select.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfSelect {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen option's value, or empty. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select an option';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Options to show before the listbox scrolls. Unset means it fits them all. */\n  @Prop() maxVisibleOptions?: number;\n\n  /** Fires when the chosen value changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The label of the chosen option, for the trigger to show. */\n  @State() selectedLabel = '';\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n  private typeahead = '';\n  private typeaheadTimer?: ReturnType<typeof setTimeout>;\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    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** The value changed, so the children's `selected` and the trigger follow. */\n  @Watch('value')\n  syncOptions() {\n    const options = this.options();\n    let label = '';\n\n    for (const option of options) {\n      const selected = this.optionValue(option) === this.value && this.value !== '';\n      (option as HTMLElement & { selected: boolean }).selected = selected;\n      if (selected) label = option.textContent?.trim() ?? '';\n    }\n\n    this.selectedLabel = label;\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  /** A reset restores the value the control started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** An option added or removed while mounted; re-mark the children. */\n  private onSlotChange = () => {\n    this.syncOptions();\n  };\n\n  /** Re-reads the options, for a label edited in place (which fires no slotchange). */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncOptions();\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      // The listbox matches the trigger's width, as the React component does.\n      matchAnchorWidth: true,\n      flip: true,\n      /*\n       * `width` *and* `minWidth`: core reports whichever the mode calls for\n       * and leaves the other undefined — `matchAnchorWidth: true` gives a\n       * `width`, false gives a `minWidth`. Reading only `minWidth`, which is\n       * what pf-dropdown needs, left the listbox at its intrinsic 156px beside\n       * a 1216px trigger. The smoke test against a real build caught it.\n       */\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    /*\n     * Opens on the chosen option, or the first selectable one. Landing\n     * anywhere else would make the arrows start from somewhere the user has\n     * no reason to expect.\n     */\n    const options = this.options();\n    const chosen = options.find((option) => this.optionValue(option) === this.value);\n    this.setActive(\n      chosen && !chosen.hasAttribute('disabled') ? chosen : (this.enabled()[0] ?? null),\n    );\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    this.clearTypeahead();\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  /**\n   * Feature-detected. Where ARIA element reflection is missing there is no\n   * cross-root equivalent, so the active option stops being *announced* while\n   * the arrows and Enter still work — recorded in `todo.md`.\n   */\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  private commit(option: HTMLElement) {\n    if (option.hasAttribute('disabled')) return;\n\n    const next = this.optionValue(option);\n    this.open = false;\n    this.trigger?.focus();\n\n    if (next === this.value) return;\n    this.value = next;\n    this.pfChange.emit({ value: next });\n  }\n\n  /** An option asked to be taken. The select decides, reports and closes. */\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.commit(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const 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  private clearTypeahead() {\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.typeaheadTimer = undefined;\n    this.typeahead = '';\n  }\n\n  /**\n   * Typeahead. The buffer and its timer live here, because a timer is state\n   * and core is never a state container; the matching is core's.\n   */\n  private handleTypeahead(key: string) {\n    this.typeahead = nextTypeaheadBuffer(this.typeahead, key);\n\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.typeaheadTimer = setTimeout(() => this.clearTypeahead(), TYPEAHEAD_TIMEOUT_MS);\n\n    const options = this.options();\n    const labels = options.map((option) => option.textContent ?? '');\n    const from = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const match = findTypeaheadMatch(labels, this.typeahead, from, (index) =>\n      options[index].hasAttribute('disabled'),\n    );\n\n    if (match === -1) return;\n\n    /*\n     * Closed, typeahead *chooses* rather than merely highlighting: that is\n     * what a native `<select>` does, and with no listbox on screen a\n     * highlight nobody can see would be no feedback at all.\n     */\n    if (this.open) this.setActive(options[match]);\n    else this.commit(options[match]);\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      // Down or Up on a closed select opens it, as a combobox should.\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) {\n        this.open = true;\n      } else if (this.activeOption) {\n        this.commit(this.activeOption);\n      }\n      return;\n    }\n\n    // Escape is the browser's while the listbox is a `popover=\"auto\"`.\n    if (isTypeaheadKey(event.key)) {\n      event.preventDefault();\n      this.handleTypeahead(event.key);\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            <span class={{ value: true, 'value--placeholder': !this.selectedLabel }}>\n              {this.selectedLabel || this.placeholder}\n            </span>\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          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/pitchfork/p-5b98848c.entry.js

@@ -0,0 +1,2 @@
+import{r as a,a as e,h as t,H as r}from"./p-Bm6UxEit.js";import{r as s}from"./p-DToIJg5W.js";const i=()=>`:host{background:var(--pf-sidebar-nav-bg);border:1px solid var(--pf-sidebar-nav-border);border-radius:var(--pf-sidebar-nav-radius, var(--radius-md));display:flex;flex-direction:column;min-height:0;width:100%;--pf-nav-item-text:var(--pf-sidebar-nav-text-muted);--pf-nav-item-hover-text:var(--pf-sidebar-nav-text);--pf-nav-item-hover-bg:var(--pf-sidebar-nav-bg-subtle);--pf-nav-item-current-text:var(--pf-sidebar-nav-text);--pf-nav-item-current-bg:var(--pf-sidebar-nav-bg-subtle)}:host([hidden]){display:none}@media (min-width: 768px){:host{min-height:var(--pf-sidebar-nav-min-height, 360px);width:min(100%, var(--pf-sidebar-nav-width, 280px))}}.header,.footer{padding:var(--space-3)}.header{border-bottom:1px solid var(--pf-sidebar-nav-border)}.footer{border-top:1px solid var(--pf-sidebar-nav-border);margin-top:auto}.header.empty,.footer.empty{display:none}.nav{display:grid;gap:var(--space-3);padding:var(--space-3)}.nav slot{display:contents}`;const n=class{constructor(e){a(this,e)}get el(){return e(this)}label="Sidebar navigation";hasHeader=false;hasFooter=false;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleStructureChange(a){a.stopPropagation();this.sync()}async refresh(){this.sync()}get items(){const a=a=>{for(let e=a.parentElement;e;e=e.parentElement){const a=e.tagName.toLowerCase();if(a==="pf-sidebar-navigation"||a==="pf-header-navigation"){return e===this.el}}return false};return Array.from(this.el.querySelectorAll("pf-nav-item")).filter(a)}isCurrent(a){return a.current??a.hasAttribute("current")}sync(){const a=a=>Array.from(this.el.children).some((e=>e.getAttribute("slot")===a));this.hasHeader=a("header");this.hasFooter=a("footer");const e=this.items;const t=s(e.map((a=>({current:this.isCurrent(a)}))));for(const[a,r]of e.entries()){const e=r;e.currentPage=a===t;e.orientation="vertical"}}render(){return t(r,{key:"32d3374c206ae575f3b572e249203d9b5e1b5c66"},t("div",{key:"18ddded266a900836c09b26b3716bb4e4d17a027",class:{header:true,empty:!this.hasHeader},part:"header"},t("slot",{key:"8a74ca32bb1574d64bf6bfca53b799580fae5980",name:"header",onSlotchange:()=>this.refresh()})),t("nav",{key:"b4168ab94367d2e7086ec82aa08d81e92540d1f3",class:"nav",part:"nav","aria-label":this.label},t("slot",{key:"afa43f3d6f1b247e527a3d1e6a11ac585dd8fdd9",onSlotchange:()=>this.refresh()})),t("div",{key:"00afd1800a0aff350f73422823431287457ad2a9",class:{footer:true,empty:!this.hasFooter},part:"footer"},t("slot",{key:"cf899e9e6cab4199f7ed5846ea2fdb4011e71672",name:"footer",onSlotchange:()=>this.refresh()})))}};n.style=i();export{n as pf_sidebar_navigation};
+//# sourceMappingURL=p-5b98848c.entry.js.map

package/dist/pitchfork/{p-fd5a5ea1.entry.js.map → p-5b98848c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pfSidebarNavigationCss","PfSidebarNavigation","label","hasHeader","hasFooter","componentWillLoad","this","sync","componentDidLoad","handleStructureChange","event","stopPropagation","refresh","items","ownedByThis","item","node","parentElement","tag","tagName","toLowerCase","el","Array","from","querySelectorAll","filter","isCurrent","current","hasAttribute","slotted","name","children","some","child","getAttribute","currentIndex","resolveCurrentNavItem","map","index","entries","currentPage","orientation","render","h","Host","key","class","header","empty","part","onSlotchange","footer"],"sources":["src/components/pf-sidebar-navigation/pf-sidebar-navigation.css?tag=pf-sidebar-navigation&encapsulation=shadow","src/components/pf-sidebar-navigation/pf-sidebar-navigation.tsx"],"sourcesContent":[":host {\n  background: var(--pf-sidebar-nav-bg);\n  border: 1px solid var(--pf-sidebar-nav-border);\n  border-radius: var(--pf-sidebar-nav-radius, var(--radius-md));\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  width: 100%;\n\n  /*\n   * The bridge to the shared item. `pf-header-navigation` defines the same\n   * five from its own aliases; custom properties inherit through the shadow\n   * boundary, which is how one item element takes its colours from whichever\n   * navigation it is slotted into.\n   */\n  --pf-nav-item-text: var(--pf-sidebar-nav-text-muted);\n  --pf-nav-item-hover-text: var(--pf-sidebar-nav-text);\n  --pf-nav-item-hover-bg: var(--pf-sidebar-nav-bg-subtle);\n  --pf-nav-item-current-text: var(--pf-sidebar-nav-text);\n  --pf-nav-item-current-bg: var(--pf-sidebar-nav-bg-subtle);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Mobile first: full width, growing to a fixed column on a wider screen. */\n@media (--md) {\n  :host {\n    min-height: var(--pf-sidebar-nav-min-height, 360px);\n    width: min(100%, var(--pf-sidebar-nav-width, 280px));\n  }\n}\n\n.header,\n.footer {\n  padding: var(--space-3);\n}\n\n.header {\n  border-bottom: 1px solid var(--pf-sidebar-nav-border);\n}\n\n.footer {\n  border-top: 1px solid var(--pf-sidebar-nav-border);\n  /* Pushed to the bottom, so a short navigation still has it at the foot. */\n  margin-top: auto;\n}\n\n/*\n * Both classes rather than a bare `.empty`: an empty box here would draw a\n * rule across the sidebar, which is the most visible version of the\n * can't-collapse-a-slot-wrapper problem.\n */\n.header.empty,\n.footer.empty {\n  display: none;\n}\n\n.nav {\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n/* The sections are grid children of the nav, not of a box inside it. */\n.nav slot {\n  display: contents;\n}\n","import { resolveCurrentNavItem } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\n\n/**\n * A sidebar navigation over `pf-nav-item` children, optionally grouped into\n * `pf-nav-section`s.\n *\n * The group owns the one thing an item cannot know: which item is the current\n * page. Core's rule decides, so the React `SidebarNavigation` marks the same\n * one — and the resolution runs across every section rather than within one,\n * because `aria-current=\"page\"` names the one page the reader is on and a\n * sidebar with two marked sections would claim two.\n *\n * As with `pf-header-navigation`, the host is not a landmark of its own: the\n * React component renders an `<aside>`, and an element cannot know whether it\n * is the page's complementary region. Only the `<nav>` is rendered.\n *\n * Items are grouped: the default slot takes `pf-nav-section` children, each\n * of which owns its own `<ul>`. A navigation with no section titles is one\n * untitled section, which is exactly what the React `sections` array is — and\n * it is also the only arrangement that keeps the list semantics honest, since\n * a `<ul>` here would be a list whose children were sections rather than\n * items.\n *\n * @slot - the `pf-nav-section` children.\n * @slot header - a box above the navigation, such as a product switcher.\n * @slot footer - a box below it, pushed to the bottom.\n * @part header - the header's box.\n * @part nav - the navigation landmark.\n * @part footer - the footer's box.\n */\n@Component({\n  tag: 'pf-sidebar-navigation',\n  styleUrl: 'pf-sidebar-navigation.css',\n  shadow: true,\n})\nexport class PfSidebarNavigation {\n  @Element() el!: HTMLElement;\n\n  /** The navigation's accessible name. */\n  @Prop() label = 'Sidebar navigation';\n\n  /**\n   * Whether anything was slotted into `header` and `footer`.\n   *\n   * Asked in JS: both boxes carry a border and padding, so an empty one draws\n   * a rule across the sidebar for no reason, and a wrapper around a slot\n   * cannot be collapsed from CSS. The same arrangement as\n   * `pf-slideout-menu`'s footer.\n   */\n  @State() hasHeader = false;\n  @State() hasFooter = 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   * A section's own slot changed, so the items below it have moved.\n   *\n   * `slotchange` is not composed, so this is the only way the navigation\n   * hears about an item appended inside a section. The event comes from a\n   * slotted child in the navigation's own tree, so `event.target` is the\n   * section rather than the host — nothing is retargeted, which is what makes\n   * a host listener safe here and not on a child in the shadow root.\n   */\n  @Listen('pfNavStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  /**\n   * Re-reads the items, for a consumer who marked one current through its\n   * *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /**\n   * Every item this navigation owns, in document order, however deeply a\n   * section nests it — but not one belonging to a navigation nested inside\n   * this one.\n   */\n  private get items(): HTMLElement[] {\n    /*\n     * The walk up is written out rather than done with `closest`, which would\n     * need a comma selector the mock DOM may not take. The first navigation\n     * above an item is the one that owns it, so a navigation nested inside\n     * this one keeps its own.\n     */\n    const ownedByThis = (item: HTMLElement) => {\n      for (let node = item.parentElement; node; node = node.parentElement) {\n        const tag = node.tagName.toLowerCase();\n        if (tag === 'pf-sidebar-navigation' || tag === 'pf-header-navigation') {\n          return node === this.el;\n        }\n      }\n      return false;\n    };\n\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-nav-item')).filter(ownedByThis);\n  }\n\n  /**\n   * The property if the item has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(item: HTMLElement) {\n    return (item as HTMLElement & { current?: boolean }).current ?? item.hasAttribute('current');\n  }\n\n  private sync() {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasHeader = slotted('header');\n    this.hasFooter = slotted('footer');\n\n    const items = this.items;\n    const currentIndex = resolveCurrentNavItem(\n      items.map((item) => ({ current: this.isCurrent(item) })),\n    );\n\n    for (const [index, item] of items.entries()) {\n      const node = item as HTMLElement & { currentPage: boolean; orientation: string };\n      node.currentPage = index === currentIndex;\n      node.orientation = 'vertical';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ header: true, empty: !this.hasHeader }} part=\"header\">\n          <slot name=\"header\" onSlotchange={() => this.refresh()} />\n        </div>\n\n        <nav class=\"nav\" part=\"nav\" aria-label={this.label}>\n          <slot onSlotchange={() => this.refresh()} />\n        </nav>\n\n        <div class={{ footer: true, empty: !this.hasFooter }} part=\"footer\">\n          <slot name=\"footer\" onSlotchange={() => this.refresh()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAyB,IAAM,o7B,MCoCxBC,EAAmB,M,iDAItBC,MAAQ,qBAUPC,UAAY,MACZC,UAAY,MAGrB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAaP,qBAAAE,CAAsBC,GACpBA,EAAMC,kBACNL,KAAKC,M,CAQP,aAAMK,GACJN,KAAKC,M,CAQP,SAAYM,GAOV,MAAMC,EAAeC,IACnB,IAAK,IAAIC,EAAOD,EAAKE,cAAeD,EAAMA,EAAOA,EAAKC,cAAe,CACnE,MAAMC,EAAMF,EAAKG,QAAQC,cACzB,GAAIF,IAAQ,yBAA2BA,IAAQ,uBAAwB,CACrE,OAAOF,IAASV,KAAKe,E,EAGzB,OAAO,KAAK,EAGd,OAAOC,MAAMC,KAAKjB,KAAKe,GAAGG,iBAA8B,gBAAgBC,OAAOX,E,CAOzE,SAAAY,CAAUX,GAChB,OAAQA,EAA6CY,SAAWZ,EAAKa,aAAa,U,CAG5E,IAAArB,GACN,MAAMsB,EAAWC,GACfR,MAAMC,KAAKjB,KAAKe,GAAGU,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYJ,IAE9ExB,KAAKH,UAAY0B,EAAQ,UACzBvB,KAAKF,UAAYyB,EAAQ,UAEzB,MAAMhB,EAAQP,KAAKO,MACnB,MAAMsB,EAAeC,EACnBvB,EAAMwB,KAAKtB,IAAI,CAAQY,QAASrB,KAAKoB,UAAUX,QAGjD,IAAK,MAAOuB,EAAOvB,KAASF,EAAM0B,UAAW,CAC3C,MAAMvB,EAAOD,EACbC,EAAKwB,YAAcF,IAAUH,EAC7BnB,EAAKyB,YAAc,U,EAIvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEC,OAAQ,KAAMC,OAAQ1C,KAAKH,WAAa8C,KAAK,UACzDN,EAAA,QAAAE,IAAA,2CAAMf,KAAK,SAASoB,aAAc,IAAM5C,KAAKM,aAG/C+B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,MAAMG,KAAK,MAAK,aAAa3C,KAAKJ,OAC3CyC,EAAA,QAAAE,IAAA,2CAAMK,aAAc,IAAM5C,KAAKM,aAGjC+B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEK,OAAQ,KAAMH,OAAQ1C,KAAKF,WAAa6C,KAAK,UACzDN,EAAA,QAAAE,IAAA,2CAAMf,KAAK,SAASoB,aAAc,IAAM5C,KAAKM,a","ignoreList":[]}
+{"version":3,"names":["pfSidebarNavigationCss","PfSidebarNavigation","label","hasHeader","hasFooter","componentWillLoad","this","sync","componentDidLoad","handleStructureChange","event","stopPropagation","refresh","items","ownedByThis","item","node","parentElement","tag","tagName","toLowerCase","el","Array","from","querySelectorAll","filter","isCurrent","current","hasAttribute","slotted","name","children","some","child","getAttribute","currentIndex","resolveCurrentNavItem","map","index","entries","currentPage","orientation","render","h","Host","key","class","header","empty","part","onSlotchange","footer"],"sources":["src/components/pf-sidebar-navigation/pf-sidebar-navigation.css?tag=pf-sidebar-navigation&encapsulation=shadow","src/components/pf-sidebar-navigation/pf-sidebar-navigation.tsx"],"sourcesContent":[":host {\n  background: var(--pf-sidebar-nav-bg);\n  border: 1px solid var(--pf-sidebar-nav-border);\n  border-radius: var(--pf-sidebar-nav-radius, var(--radius-md));\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  width: 100%;\n\n  /*\n   * The bridge to the shared item. `pf-header-navigation` defines the same\n   * five from its own aliases; custom properties inherit through the shadow\n   * boundary, which is how one item element takes its colours from whichever\n   * navigation it is slotted into.\n   */\n  --pf-nav-item-text: var(--pf-sidebar-nav-text-muted);\n  --pf-nav-item-hover-text: var(--pf-sidebar-nav-text);\n  --pf-nav-item-hover-bg: var(--pf-sidebar-nav-bg-subtle);\n  --pf-nav-item-current-text: var(--pf-sidebar-nav-text);\n  --pf-nav-item-current-bg: var(--pf-sidebar-nav-bg-subtle);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Mobile first: full width, growing to a fixed column on a wider screen. */\n@media (--md) {\n  :host {\n    min-height: var(--pf-sidebar-nav-min-height, 360px);\n    width: min(100%, var(--pf-sidebar-nav-width, 280px));\n  }\n}\n\n.header,\n.footer {\n  padding: var(--space-3);\n}\n\n.header {\n  border-bottom: 1px solid var(--pf-sidebar-nav-border);\n}\n\n.footer {\n  border-top: 1px solid var(--pf-sidebar-nav-border);\n  /* Pushed to the bottom, so a short navigation still has it at the foot. */\n  margin-top: auto;\n}\n\n/*\n * Both classes rather than a bare `.empty`: an empty box here would draw a\n * rule across the sidebar, which is the most visible version of the\n * can't-collapse-a-slot-wrapper problem.\n */\n.header.empty,\n.footer.empty {\n  display: none;\n}\n\n.nav {\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n/* The sections are grid children of the nav, not of a box inside it. */\n.nav slot {\n  display: contents;\n}\n","import { resolveCurrentNavItem } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\n\n/**\n * A sidebar navigation over `pf-nav-item` children, optionally grouped into\n * `pf-nav-section`s.\n *\n * The group owns the one thing an item cannot know: which item is the current\n * page. Core's rule decides, so the React `SidebarNavigation` marks the same\n * one — and the resolution runs across every section rather than within one,\n * because `aria-current=\"page\"` names the one page the reader is on and a\n * sidebar with two marked sections would claim two.\n *\n * As with `pf-header-navigation`, the host is not a landmark of its own: the\n * React component renders an `<aside>`, and an element cannot know whether it\n * is the page's complementary region. Only the `<nav>` is rendered.\n *\n * Items are grouped: the default slot takes `pf-nav-section` children, each\n * of which owns its own `<ul>`. A navigation with no section titles is one\n * untitled section, which is exactly what the React `sections` array is — and\n * it is also the only arrangement that keeps the list semantics honest, since\n * a `<ul>` here would be a list whose children were sections rather than\n * items.\n *\n * @slot - the `pf-nav-section` children.\n * @slot header - a box above the navigation, such as a product switcher.\n * @slot footer - a box below it, pushed to the bottom.\n * @part header - the header's box.\n * @part nav - the navigation landmark.\n * @part footer - the footer's box.\n */\n@Component({\n  tag: 'pf-sidebar-navigation',\n  styleUrl: 'pf-sidebar-navigation.css',\n  shadow: true,\n})\nexport class PfSidebarNavigation {\n  @Element() el!: HTMLElement;\n\n  /** The navigation's accessible name. */\n  @Prop() label = 'Sidebar navigation';\n\n  /**\n   * Whether anything was slotted into `header` and `footer`.\n   *\n   * Asked in JS: both boxes carry a border and padding, so an empty one draws\n   * a rule across the sidebar for no reason, and a wrapper around a slot\n   * cannot be collapsed from CSS. The same arrangement as\n   * `pf-slideout-menu`'s footer.\n   */\n  @State() hasHeader = false;\n  @State() hasFooter = 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   * A section's items moved, or an item's `current` changed. Either way the\n   * resolution has to run again.\n   *\n   * `slotchange` is not composed, so this is the only way the navigation\n   * hears about an item appended inside a section — and an item's `current`\n   * arriving as a *property* fires no DOM event at all, which is why the item\n   * emits this too. The event comes from a slotted child in the navigation's\n   * own tree, so `event.target` is the section or the item rather than the\n   * host — nothing is retargeted, which is what makes a host listener safe\n   * here and not on a child in the shadow root.\n   */\n  @Listen('pfNavStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  /**\n   * Re-reads the items, for a consumer who changed something the group reads\n   * and has no event for.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /**\n   * Every item this navigation owns, in document order, however deeply a\n   * section nests it — but not one belonging to a navigation nested inside\n   * this one.\n   */\n  private get items(): HTMLElement[] {\n    /*\n     * The walk up is written out rather than done with `closest`, which would\n     * need a comma selector the mock DOM may not take. The first navigation\n     * above an item is the one that owns it, so a navigation nested inside\n     * this one keeps its own.\n     */\n    const ownedByThis = (item: HTMLElement) => {\n      for (let node = item.parentElement; node; node = node.parentElement) {\n        const tag = node.tagName.toLowerCase();\n        if (tag === 'pf-sidebar-navigation' || tag === 'pf-header-navigation') {\n          return node === this.el;\n        }\n      }\n      return false;\n    };\n\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-nav-item')).filter(ownedByThis);\n  }\n\n  /**\n   * The property if the item has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(item: HTMLElement) {\n    return (item as HTMLElement & { current?: boolean }).current ?? item.hasAttribute('current');\n  }\n\n  private sync() {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasHeader = slotted('header');\n    this.hasFooter = slotted('footer');\n\n    const items = this.items;\n    const currentIndex = resolveCurrentNavItem(\n      items.map((item) => ({ current: this.isCurrent(item) })),\n    );\n\n    for (const [index, item] of items.entries()) {\n      const node = item as HTMLElement & { currentPage: boolean; orientation: string };\n      node.currentPage = index === currentIndex;\n      node.orientation = 'vertical';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ header: true, empty: !this.hasHeader }} part=\"header\">\n          <slot name=\"header\" onSlotchange={() => this.refresh()} />\n        </div>\n\n        <nav class=\"nav\" part=\"nav\" aria-label={this.label}>\n          <slot onSlotchange={() => this.refresh()} />\n        </nav>\n\n        <div class={{ footer: true, empty: !this.hasFooter }} part=\"footer\">\n          <slot name=\"footer\" onSlotchange={() => this.refresh()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAyB,IAAM,o7B,MCoCxBC,EAAmB,M,iDAItBC,MAAQ,qBAUPC,UAAY,MACZC,UAAY,MAGrB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAgBP,qBAAAE,CAAsBC,GACpBA,EAAMC,kBACNL,KAAKC,M,CAQP,aAAMK,GACJN,KAAKC,M,CAQP,SAAYM,GAOV,MAAMC,EAAeC,IACnB,IAAK,IAAIC,EAAOD,EAAKE,cAAeD,EAAMA,EAAOA,EAAKC,cAAe,CACnE,MAAMC,EAAMF,EAAKG,QAAQC,cACzB,GAAIF,IAAQ,yBAA2BA,IAAQ,uBAAwB,CACrE,OAAOF,IAASV,KAAKe,E,EAGzB,OAAO,KAAK,EAGd,OAAOC,MAAMC,KAAKjB,KAAKe,GAAGG,iBAA8B,gBAAgBC,OAAOX,E,CAOzE,SAAAY,CAAUX,GAChB,OAAQA,EAA6CY,SAAWZ,EAAKa,aAAa,U,CAG5E,IAAArB,GACN,MAAMsB,EAAWC,GACfR,MAAMC,KAAKjB,KAAKe,GAAGU,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYJ,IAE9ExB,KAAKH,UAAY0B,EAAQ,UACzBvB,KAAKF,UAAYyB,EAAQ,UAEzB,MAAMhB,EAAQP,KAAKO,MACnB,MAAMsB,EAAeC,EACnBvB,EAAMwB,KAAKtB,IAAI,CAAQY,QAASrB,KAAKoB,UAAUX,QAGjD,IAAK,MAAOuB,EAAOvB,KAASF,EAAM0B,UAAW,CAC3C,MAAMvB,EAAOD,EACbC,EAAKwB,YAAcF,IAAUH,EAC7BnB,EAAKyB,YAAc,U,EAIvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEC,OAAQ,KAAMC,OAAQ1C,KAAKH,WAAa8C,KAAK,UACzDN,EAAA,QAAAE,IAAA,2CAAMf,KAAK,SAASoB,aAAc,IAAM5C,KAAKM,aAG/C+B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,MAAMG,KAAK,MAAK,aAAa3C,KAAKJ,OAC3CyC,EAAA,QAAAE,IAAA,2CAAMK,aAAc,IAAM5C,KAAKM,aAGjC+B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEK,OAAQ,KAAMH,OAAQ1C,KAAKF,WAAa6C,KAAK,UACzDN,EAAA,QAAAE,IAAA,2CAAMf,KAAK,SAASoB,aAAc,IAAM5C,KAAKM,a","ignoreList":[]}

package/dist/pitchfork/p-7197ef71.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a as i,h as r,H as n}from"./p-Bm6UxEit.js";import{c as s}from"./p-DfpCerXM.js";import{K as a}from"./p-g4FlTDZx.js";import{p as o,r as l,s as d,f as c,c as p}from"./p-DSXauhXX.js";import{a as u}from"./p-Cr6IXrUk.js";import{c as f}from"./p-Cy_kHPeC.js";const h=()=>`: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 b=class{constructor(i){e(this,i);this.pfChange=t(this,"pfChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";min;max;step=1;label;description;error;placeholder;required=false;disabled=false;decrementLabel="Decrease";incrementLabel="Increase";pfChange;draft=null;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");u(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.draft=null}async stepBy(e){this.step_(e)}get bounds(){return{min:this.min===undefined?-Infinity:Number(this.min),max:this.max===undefined?Infinity:Number(this.max),step:Number(this.step)||1}}get current(){return o(this.value)}get atMin(){const{min:e}=this.bounds;return this.current!==null&&this.current<=e}get atMax(){const{max:e}=this.bounds;return this.current!==null&&this.current>=e}commit(e){const{min:t,max:i,step:r}=this.bounds;const n=e===null?"":String(l(p(e,t,i),r));if(n===this.value)return;this.value=n;this.pfChange.emit({value:n,number:o(n)})}step_(e){if(this.disabled)return;this.draft=null;this.commit(d(this.current,e,this.bounds))}onInput=e=>{const t=e.target.value;this.draft=t;const i=o(t);if(t.trim()===""){this.commit(null);return}if(i!==null)this.commit(i)};onBlur=()=>{this.draft=null};onKeyDown=e=>{if(this.disabled)return;const{min:t,max:i}=this.bounds;if(e.key===a.ArrowUp){e.preventDefault();this.step_(1)}else if(e.key===a.ArrowDown){e.preventDefault();this.step_(-1)}else if(e.key===a.Home&&Number.isFinite(t)){e.preventDefault();this.draft=null;this.commit(t)}else if(e.key===a.End&&Number.isFinite(i)){e.preventDefault();this.draft=null;this.commit(i)}};render(){const e=s(this.description&&"description",this.error&&"error");const{min:t,max:i}=this.bounds;const a=this.draft??c(this.current);return r(n,{key:"27f7f45a2732cbca6d252f4b9128901ed7868663"},r("div",{key:"75bfab2f72a83b830fd960e5fae19b9941eeae6c",class:"field",part:"field"},this.label&&r("label",{key:"f2e60206f153933cde6b36a23c510225bd5fb2ab",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&r("span",{key:"3925b4690d5b560190aaa04e7e7cf83453c7c49e",class:"required","aria-hidden":"true"},"*")),r("div",{key:"dcf1949c7fd8626c5a334fd3d72d8c4544369b41",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},r("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)},r("pf-icon",{key:"157e45ebe127230052c34215c3f88d487dacd41a",name:"minus","aria-hidden":"true"})),r("input",{key:"6fb05cb46de22b37387a16869f93b31b2ea6cc0a",id:"input","aria-label":f(this.el,this.label),part:"input",class:"input",type:"text",inputMode:"decimal",role:"spinbutton",name:this.name,value:a,placeholder:this.placeholder,required:this.required,disabled:this.disabled,autocomplete:"off","aria-invalid":this.error?"true":null,"aria-describedby":e,"aria-valuenow":this.current??null,"aria-valuemin":Number.isFinite(t)?t:null,"aria-valuemax":Number.isFinite(i)?i:null,onInput:this.onInput,onBlur:this.onBlur,onKeyDown:this.onKeyDown}),r("button",{key:"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)},r("pf-icon",{key:"2a97e66ca7bf42c6d10a872c4b8eec52316d0784",name:"plus","aria-hidden":"true"}))),this.description&&r("p",{key:"3943b0c1ec5ad58d749b0e6d1fb5f60a17eb917e",class:"description",part:"description",id:"description"},this.description),this.error&&r("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}]}}};b.style=h();export{b as pf_number_input};
+//# sourceMappingURL=p-7197ef71.entry.js.map

package/dist/pitchfork/p-7197ef71.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfNumberInputCss","PfNumberInput","internals","name","value","min","max","step","label","description","error","placeholder","required","disabled","decrementLabel","incrementLabel","pfChange","draft","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","stepBy","direction","step_","bounds","undefined","Infinity","Number","current","parseNumberValue","atMin","atMax","commit","next","String","roundToStep","clampNumber","emit","number","stepNumber","onInput","event","raw","target","parsed","trim","onBlur","onKeyDown","key","Keys","ArrowUp","preventDefault","ArrowDown","Home","isFinite","End","render","describedBy","composeDescribedBy","shown","formatNumberValue","h","Host","class","part","htmlFor","control","type","tabindex","onMouseDown","onClick","id","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":"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","ignoreList":[]}

package/dist/pitchfork/p-Cy_kHPeC.js

@@ -0,0 +1,2 @@
+function n(n,l){if(l)return null;const r=n.getAttribute("aria-label");return r&&r.trim().length>0?r:null}export{n as c};
+//# sourceMappingURL=p-Cy_kHPeC.js.map

package/dist/pitchfork/p-Cy_kHPeC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-Cy_kHPeC.js","sources":["src/control-label.ts"],"sourcesContent":["/**\n * How a form control here gets an accessible name when it has no visible one.\n *\n * Not in `@pitchfork-ui/core`: it is about the shadow boundary, which only\n * this layer has.\n *\n * The React components extend `InputHTMLAttributes`, so\n * `<Input aria-label=\"Search\" />` lands the attribute on the real `<input>`\n * and names it. An element cannot do that. `aria-label` on the host names the\n * **host**, and the host is not the control -- the `<input>` lives in the\n * shadow root with nothing pointing at it, so a consumer who writes the same\n * thing gets a control with no accessible name at all and no warning. Measured\n * against Chromium's accessibility tree: the host reports the name and the\n * textbox inside it reports none.\n *\n * `aria-labelledby` has no answer either, for the rule this library keeps\n * running into: an IDREF cannot point into a shadow root. So the text is\n * copied across, which is what `pf-tooltip` does for its trigger's\n * description and for the same reason.\n *\n * A visible `label` wins, because it is both the name and a `for` target in\n * the control's own root -- the kind of reference that does resolve.\n */\nexport function controlAriaLabel(host: HTMLElement, label: string | undefined): string | null {\n  if (label) return null;\n  const copied = host.getAttribute('aria-label');\n  return copied && copied.trim().length > 0 ? copied : null;\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACG,SAAU,gBAAgB,CAAC,IAAiB,EAAE,KAAyB,EAAA;AAC3E,IAAA,IAAI,KAAK;AAAE,QAAA,OAAO,IAAI;IACtB,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;AAC9C,IAAA,OAAO,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI;AAC3D;;;;"}

package/dist/pitchfork/p-ab6c09e7.entry.js

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

package/dist/pitchfork/p-ab6c09e7.entry.js.map

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

package/dist/pitchfork/p-d7ca4026.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as r,H as i}from"./p-Bm6UxEit.js";import{c as s}from"./p-DfpCerXM.js";import{a as o}from"./p-Cr6IXrUk.js";import{c as d}from"./p-Cy_kHPeC.js";const l=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-textarea-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-textarea-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-textarea-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.textarea{background:var(--pf-textarea-bg);border:1px solid var(--pf-textarea-border);border-radius:var(--radius-md);color:var(--pf-textarea-text);font:inherit;line-height:1.45;min-height:96px;padding:var(--space-2) var(--space-3);resize:vertical;width:100%}.textarea:focus{outline:none}.textarea:focus-visible{border-color:var(--pf-textarea-focus-border);box-shadow:var(--pf-textarea-focus-ring, var(--pf-focus-ring))}.textarea::placeholder{color:var(--pf-textarea-text-muted)}.textarea--invalid{border-color:var(--pf-textarea-invalid-border)}.textarea:disabled{cursor:not-allowed;opacity:0.6}`;const n=class{constructor(a){e(this,a);this.pfInput=t(this,"pfInput");this.pfChange=t(this,"pfChange");if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}}get el(){return a(this)}internals;name;value="";rows=4;label;description;error;placeholder;required=false;disabled=false;readonly=false;pfInput;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");o(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onInput=e=>{this.value=e.target.value;this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.value})};componentDidRender(){const e=this.el.shadowRoot?.querySelector("textarea");if(e&&e.value!==(this.value??"")){e.value=this.value??""}}render(){const e=s(this.description&&"description",this.error&&"error");return r(i,{key:"80a5c7f53163f8336121fb8f37b9523e6bed32ab"},r("div",{key:"fa50dbbd2d5f9320d21abf12ee83edce19aee843",class:"field",part:"field"},this.label&&r("label",{key:"f38ae2638abf5eb7f646dac050fa4a8888c03c31",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&r("span",{key:"e7dbd26e3c88a3ab31eb0f2a578d07354c413efe",class:"required","aria-hidden":"true"},"*")),r("textarea",{key:"88c3b5be8039120c49e76a8099be97f2755f73b7",id:"input","aria-label":d(this.el,this.label),part:"textarea",class:{textarea:true,"textarea--invalid":Boolean(this.error)},name:this.name,rows:this.rows,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readOnly:this.readonly,"aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onChange:this.onChange}),this.description&&r("p",{key:"4157ccc35337f16ca15b26e4442e260aa7f47019",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"04a8583bdde73b69402113a4659e00a316b330fc",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}]}}};n.style=l();export{n as pf_textarea};
+//# sourceMappingURL=p-d7ca4026.entry.js.map

package/dist/pitchfork/p-d7ca4026.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTextareaCss","PfTextarea","internals","name","value","rows","label","description","error","placeholder","required","disabled","readonly","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onInput","event","target","emit","onChange","componentDidRender","control","el","shadowRoot","querySelector","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","id","controlAriaLabel","textarea","readOnly"],"sources":["src/components/pf-textarea/pf-textarea.css?tag=pf-textarea&encapsulation=shadow","src/components/pf-textarea/pf-textarea.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-textarea-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-textarea-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-textarea-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.textarea {\n  background: var(--pf-textarea-bg);\n  border: 1px solid var(--pf-textarea-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-textarea-text);\n  font: inherit;\n  line-height: 1.45;\n  min-height: 96px;\n  padding: var(--space-2) var(--space-3);\n  resize: vertical;\n  width: 100%;\n}\n\n.textarea:focus {\n  outline: none;\n}\n\n.textarea:focus-visible {\n  border-color: var(--pf-textarea-focus-border);\n  box-shadow: var(--pf-textarea-focus-ring, var(--pf-focus-ring));\n}\n\n.textarea::placeholder {\n  color: var(--pf-textarea-text-muted);\n}\n\n.textarea--invalid {\n  border-color: var(--pf-textarea-invalid-border);\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated multi-line text control.\n *\n * Shares `pf-input`'s field anatomy and form wiring; the control is a\n * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part textarea - the native textarea.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-textarea',\n  styleUrl: 'pf-textarea.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfTextarea {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Visible rows. Mirrors the native attribute. */\n  @Prop() rows = 4;\n\n  /** Visible label. Rendered in the same root as the input, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Fires on every keystroke, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: string }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The value the control had when it was created, which is what a form reset\n   * restores. Captured here because `value` has been overwritten by then.\n   */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /**\n   * Whether the control currently satisfies its constraints.\n   *\n   * A form-associated custom element does not inherit `checkValidity` from\n   * anywhere -- the spec puts it on ElementInternals, so the element has to\n   * forward it or consumers cannot ask.\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * verified against a native `<input value=\"initial\">`, which comes back to\n   * \"initial\" rather than to \"\". Clearing it was a real defect: a\n   * `<pf-textarea value=\"…\">` in a form lost its value on any reset.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private onInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\n  };\n\n  /**\n   * A textarea's value is its text content, not an attribute, so it cannot be\n   * rendered as a JSX child without Stencil replacing that text node on every\n   * keystroke. It is written through the DOM property instead, which is what\n   * the browser itself does.\n   *\n   * Guarded on inequality: assigning the same string still moves the caret to\n   * the end in some engines, which would make typing into the middle of a\n   * paragraph jump the cursor away on every character.\n   */\n  componentDidRender() {\n    const control = this.el.shadowRoot?.querySelector('textarea');\n    if (control && control.value !== (this.value ?? '')) {\n      control.value = this.value ?? '';\n    }\n  }\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal -- the useId()\n    // the React component needs has no counterpart here.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <textarea\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"textarea\"\n            class={{ textarea: true, 'textarea--invalid': Boolean(this.error) }}\n            name={this.name}\n            rows={this.rows}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n          />\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAgB,IAAM,smC,MCkCfC,EAAU,M,kRAGFC,UAWMC,KAGAC,MAAQ,GAGzBC,KAAO,EAGPC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAEXC,SAAW,MAG3BC,QAGAC,SAMDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,OAAS,GAClCa,KAAKC,e,CAMP,aAAAA,GACED,KAAKf,UAAUiB,aAAaF,KAAKb,OAAS,IAC1CgB,EAAqBH,KAAKf,UAAWmB,QAAQJ,KAAKb,OAAQa,KAAKP,SAAUO,KAAKT,M,CAWhF,mBAAMc,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CASxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAGZY,QAAWC,IACjBX,KAAKb,MAASwB,EAAMC,OAA+BzB,MACnDa,KAAKJ,QAAQiB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAGlC2B,SAAW,KACjBd,KAAKH,SAASgB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAa3C,kBAAA4B,GACE,MAAMC,EAAUhB,KAAKiB,GAAGC,YAAYC,cAAc,YAClD,GAAIH,GAAWA,EAAQ7B,SAAWa,KAAKb,OAAS,IAAK,CACnD6B,EAAQ7B,MAAQa,KAAKb,OAAS,E,EAIlC,MAAAiC,GAGE,MAAMC,EAAcC,EAClBtB,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAGhB,OACEgC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrB3B,KAAKX,OACJkC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvC5B,KAAKX,MACLW,KAAKP,UACJ8B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAU,cAAa,QAAM,MAM/CH,EAAA,YAAAE,IAAA,2CACEI,GAAG,QAAO,aACEC,EAAiB9B,KAAKiB,GAAIjB,KAAKX,OAC3CsC,KAAK,WACLD,MAAO,CAAEK,SAAU,KAAM,oBAAqB3B,QAAQJ,KAAKT,QAC3DL,KAAMc,KAAKd,KACXE,KAAMY,KAAKZ,KACXI,YAAaQ,KAAKR,YAClBC,SAAUO,KAAKP,SACfC,SAAUM,KAAKN,SACfsC,SAAUhC,KAAKL,SAAQ,eACTK,KAAKT,MAAQ,OAAS,KAAI,mBACtB8B,EAClBX,QAASV,KAAKU,QACdI,SAAUd,KAAKc,WAEhBd,KAAKV,aACJiC,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcE,GAAG,eAC1C7B,KAAKV,aAGTU,KAAKT,OACJgC,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQE,GAAG,SAC9B7B,KAAKT,Q","ignoreList":[]}

package/dist/pitchfork/p-dd48d94d.entry.js

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