@pitchfork-ui/elements 0.0.0-stage → 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":"2PAKA,IAAIA,EAAeC,GAAUC,OAAOD,GAAOE,SAAS,EAAG,KAOvD,SAASC,EAAeH,GACvB,MAAMI,EAAQ,sBAAsBC,MAAML,GAAS,IAAIM,QACvD,IAAKF,EAAO,MAAO,CAClBG,KAAM,KACNC,OAAQ,MAET,MAAMD,EAAOE,OAAOL,EAAM,IAC1B,MAAMI,EAASC,OAAOL,EAAM,IAC5B,GAAIG,EAAO,IAAMC,EAAS,GAAI,MAAO,CACpCD,KAAM,KACNC,OAAQ,MAET,MAAO,CACND,OACAC,SAEF,CAEA,SAASE,EAAgBC,GACxB,GAAIA,EAAMJ,OAAS,MAAQI,EAAMH,SAAW,KAAM,MAAO,GACzD,MAAO,GAAGT,EAAYY,EAAMJ,SAASR,EAAYY,EAAMH,SACxD,CAEA,SAASI,EAAkBD,EAAOE,GACjC,GAAIF,EAAMJ,OAAS,MAAQI,EAAMH,SAAW,KAAM,MAAO,GACzD,GAAIK,IAAc,GAAI,MAAO,GAAGd,EAAYY,EAAMJ,SAASR,EAAYY,EAAMH,UAC7E,MAAO,GAAGM,EAASH,EAAMJ,SAASR,EAAYY,EAAMH,WAAWO,EAAWJ,EAAMJ,OACjF,CAEA,SAASQ,EAAWC,GACnB,OAAOA,EAAS,GAAK,KAAO,IAC7B,CAKA,SAASF,EAASE,GACjB,MAAMC,EAAOD,EAAS,GACtB,OAAOC,IAAS,EAAI,GAAKA,CAC1B,CAEA,SAASC,EAASC,EAAQC,GACzB,MAAMC,EAAOF,EAAS,GACtB,OAAOC,IAAa,KAAOC,EAAO,GAAKA,CACxC,CAQA,SAASC,EAAUC,EAAQC,EAAO,GACjC,MAAMC,EAAWC,KAAKC,IAAI,EAAGD,KAAKE,MAAMJ,IACxC,MAAMK,EAAQH,KAAKI,KAAKP,EAASE,GACjC,OAAOM,MAAMC,KAAK,CAAET,OAAQM,IAAS,CAACI,EAAGC,IAAUA,EAAQT,GAC5D,CAEA,SAASU,EAAYtB,GACpB,OAAOA,IAAc,GAAKS,EAAU,IAAMA,EAAU,IAAIc,KAAK7B,GAASA,EAAO,GAC9E,CCxEA,MAAM8B,EAAkB,IAAM,+uE,MC0DjBC,EAAY,M,4RAEJC,UAGMC,KAGAxC,MAAQ,GAGOyC,KAAO,MAcvC5B,UAAuB,GAGvB6B,WAAa,EAEbC,MAEAC,YAEAC,MAEAC,YAAc,cAEGC,SAAW,MAEXC,SAAW,MAG3BC,SAGAC,aAEDC,aAAe,GACfC,cAER,iBAAAC,GACEC,KAAKH,aAAeG,KAAKtD,OAAS,GAClCsD,KAAKC,e,CAGP,kBAAAC,GACE,GAAIF,KAAKb,KAAMa,KAAKG,wB,CAGtB,oBAAAC,GACEJ,KAAKF,iB,CAMP,aAAAG,GACED,KAAKf,UAAUoB,aAAaL,KAAKtD,OAAS,MAC1C4D,EAAqBN,KAAKf,UAAWsB,QAAQP,KAAKtD,OAAQsD,KAAKP,SAAUO,KAAKT,M,CAIhF,QAAAiB,CAASC,EAAeC,GACtB,GAAID,EAAMT,KAAKW,iBACVX,KAAKY,YACV,GAAIH,IAASC,EAAUV,KAAKJ,aAAaiB,KAAK,CAAE1B,KAAMsB,G,CAIxD,UAAMK,GACJ,IAAKd,KAAKN,SAAUM,KAAKb,KAAO,I,CAIlC,UAAM4B,GACJf,KAAKb,KAAO,K,CAId,mBAAM6B,GACJ,OAAOhB,KAAKf,UAAU+B,e,CAIxB,oBAAMC,GACJ,OAAOjB,KAAKf,UAAUgC,gB,CAIxB,0BAAMC,GACJ,OAAOlB,KAAKf,UAAUkC,iB,CAIxB,iBAAAC,GACEpB,KAAKtD,MAAQsD,KAAKH,Y,CAIpB,SAAYwB,GACV,OAAOlE,OAAO6C,KAAKzC,aAAe,GAAK,GAAK,E,CAG9C,SAAY+D,GACV,OAAOtB,KAAKuB,GAAGC,YAAYC,cAA2B,mBAAqB,I,CAG7E,WAAYC,GACV,OAAO1B,KAAKuB,GAAGC,YAAYC,cAAiC,qBAAuB,I,CAGrF,SAAYpE,GACV,OAAOR,EAAemD,KAAKtD,M,CAGrB,SAAAiE,GACN,MAAMW,EAAQtB,KAAKsB,MACnB,GAAItB,KAAKN,WAAa4B,GAASA,EAAMK,QAAQ,iBAAkB,OAE/DL,EAAMM,cACN5B,KAAKF,kBACLE,KAAKF,cAAgB+B,EAAwB,CAC3CC,UAAW,IAAM9B,KAAK0B,QACtBK,YAAa,IAAMT,EACnBU,MAAO,QACPC,iBAAkB,MAClBC,KAAM,KACNC,SAAU,EAAGC,OAAMC,SAAUC,EAAahB,EAAOc,EAAMC,KAGzDrC,KAAKG,yBAELmB,EAAMG,cAAiC,2BAA2Bc,O,CAG5D,SAAA3B,GACNZ,KAAKF,kBACLE,KAAKF,cAAgB0C,UACrB,MAAMlB,EAAQtB,KAAKsB,MACnB,GAAIA,GAAOK,QAAQ,iBAAkBL,EAAMmB,a,CASrC,sBAAAtC,GACN,IAAK,MAAMuC,KAAUjE,MAAMC,KACzBsB,KAAKsB,OAAOqB,iBAA8B,2BAA6B,IACtE,CACD,UAAWD,EAAOE,iBAAmB,WAAY,CAC/CF,EAAOE,eAAe,CAAEC,MAAO,U,GAK7BC,SAAYC,IAClB,MAAMC,EAAUD,EAAME,WAAa,OACnC,GAAIjD,KAAKb,OAAS6D,EAAShD,KAAKb,KAAO6D,EACvC,IAAKA,EAAShD,KAAK0B,SAASa,OAAO,EAG7B,MAAAW,CAAOzC,GACb,MAAM/D,EAAQU,EAAgBqD,GAC9B,IAAK/D,GAASA,IAAUsD,KAAKtD,MAAO,OACpCsD,KAAKtD,MAAQA,EACbsD,KAAKL,SAASkB,KAAK,CAAEnE,S,CAGf,UAAAyG,CAAWlG,GACjB,MAAMS,EAASsC,KAAKqB,QAAU,GAAKpE,EAAOW,EAASX,EAAM+C,KAAKoD,oBAAsB,MACpFpD,KAAKkD,OAAO,CAAEjG,KAAMS,EAAQR,OAAQ8C,KAAK3C,MAAMH,QAAU,G,CAGnD,YAAAmG,CAAanG,GACnB8C,KAAKkD,OAAO,CAAEjG,KAAM+C,KAAK3C,MAAMJ,MAAQ,EAAGC,U,CAGpC,cAAAoG,CAAexF,GACrB,MAAMb,KAAEA,EAAIC,OAAEA,GAAW8C,KAAK3C,MAC9B2C,KAAKkD,OAAO,CAAEjG,KAAMW,EAASJ,EAASP,GAAQ,GAAIa,GAAWZ,OAAQA,GAAU,G,CAGzE,gBAAAkG,GACN,MAAMnG,KAAEA,GAAS+C,KAAK3C,MACtB,OAAOJ,IAAS,KAAO,KAAOQ,EAAWR,E,CAYnCsG,gBAAmBR,IACzB,GAAIA,EAAMS,MAAQC,EAAKC,WAAaX,EAAMS,MAAQC,EAAKE,QAAS,OAEhE,MAAMC,EAASb,EAAMc,cACrB,MAAMC,EAAUrF,MAAMC,KAAKkF,EAAOjB,iBAAoC,WACtE,MAAM/D,EAAQkF,EAAQC,QAAQ/D,KAAKuB,GAAGC,YAAYwC,eAClD,GAAIpF,KAAU,EAAI,OAElBmE,EAAMkB,iBACN,MAAMxD,EAAOsC,EAAMS,MAAQC,EAAKC,UAAY9E,EAAQ,EAAIA,EAAQ,EAChEkF,EAAQ1F,KAAK8F,IAAI9F,KAAKC,IAAIoC,EAAM,GAAIqD,EAAQ7F,OAAS,KAAKsE,OAAO,EAG3D,YAAA4B,CACNjF,EACA4E,GAEA,OACEM,EAAA,OACEC,MAAM,SACNC,KAAK,SACLC,KAAK,UAAS,aACFrF,EACZsF,UAAU,EACVC,UAAWzE,KAAKuD,iBAEfO,EAAQhF,KAAK4D,GACZ0B,EAAA,UACEZ,IAAKd,EAAOc,IACZkB,KAAK,SACLJ,KAAK,SACLD,MAAO,CAAE3B,OAAQ,KAAM,mBAAoBA,EAAOiC,UAClDJ,KAAK,SAAQ,gBACE7B,EAAOiC,SAAW,OAAS,QAAO,gBAClCjC,EAAOiC,SAAW,OAAS,QAC1CC,QAASlC,EAAOmC,UAEfnC,EAAOrD,S,CAOlB,MAAAyF,GACE,MAAMC,EAAcC,EAClBhF,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAEhB,MAAMtC,KAAEA,EAAIC,OAAEA,GAAW8C,KAAK3C,MAC9B,MAAM4H,EAAU3H,EAAkB0C,KAAK3C,MAAO2C,KAAKqB,OACnD,MAAM6D,EAAYjI,IAAS,KAAO,KAAO+C,KAAKqB,QAAU,GAAKpE,EAAOO,EAASP,GAC7E,MAAMa,EAAWkC,KAAKoD,mBAEtB,OACEgB,EAACe,EAAI,CAAA3B,IAAA,4CACHY,EAAA,OAAAZ,IAAA,2CAAKa,MAAM,QAAQC,KAAK,SACrBtE,KAAKX,OACJ+E,EAAA,SAAAZ,IAAA,2CAAOa,MAAM,QAAQC,KAAK,QAAQc,QAAQ,WACvCpF,KAAKX,MACLW,KAAKP,UACJ2E,EAAA,QAAAZ,IAAA,2CAAMa,MAAM,WAAU,cAAa,QAAM,MAO/CD,EAAA,UAAAZ,IAAA,2CACE6B,GAAG,UAAS,aACAC,EAAiBtF,KAAKuB,GAAIvB,KAAKX,OAC3CiF,KAAK,UACLD,MAAO,CAAE3C,QAAS,KAAM,mBAAoBnB,QAAQP,KAAKT,QACzDmF,KAAK,SACLhF,SAAUM,KAAKN,SAAQ,gBACT,SAAQ,gBACPM,KAAKb,KAAO,OAAS,QAAO,gBAE7B,QAAO,eACPa,KAAKT,MAAQ,OAAS,KAAI,gBACzBS,KAAKP,SAAW,OAAS,KAAI,mBAC1BsF,EAClBH,QAAS,KACP,IAAK5E,KAAKN,SAAUM,KAAKb,MAAQa,KAAKb,IAAI,GAG5CiF,EAAA,QAAAZ,IAAA,2CAAMa,MAAO,CAAE3H,MAAO,KAAM,sBAAuBuI,IAChDA,GAAWjF,KAAKR,aAEnB4E,EAAA,WAAAZ,IAAA,2CAAStE,KAAK,WAGfc,KAAKV,aACJ8E,EAAA,KAAAZ,IAAA,2CAAGa,MAAM,cAAcC,KAAK,cAAce,GAAG,eAC1CrF,KAAKV,aAGTU,KAAKT,OACJ6E,EAAA,KAAAZ,IAAA,2CAAGa,MAAM,QAAQC,KAAK,QAAQe,GAAG,SAC9BrF,KAAKT,QAKZ6E,EAAA,OAAAZ,IAAA,2CACE6B,GAAG,QACHf,KAAK,QACLD,MAAM,QACNkB,QAAQ,OACRhB,KAAK,SAAQ,aACF,gBACXzB,SAAU9C,KAAK8C,UAEd9C,KAAKmE,aACJ,OACAtF,EAAYmB,KAAKqB,OAAOvC,KAAK4D,IAAM,CACjCc,IAAK,KAAKd,IACVrD,MAAO5C,EAAYiG,GACnBiC,SAAUO,IAAcxC,EACxBmC,SAAU,IAAM7E,KAAKmD,WAAWT,QAInC1C,KAAKmE,aACJ,SACAnG,EAAU,GAAIgC,KAAKZ,YAAYN,KAAK4D,IAAM,CACxCc,IAAK,KAAKd,IACVrD,MAAO5C,EAAYiG,GACnBiC,SAAUzH,IAAWwF,EACrBmC,SAAU,IAAM7E,KAAKqD,aAAaX,QAIrC1C,KAAKqB,QAAU,IACdrB,KAAKmE,aACH,WACC,CAAC,KAAM,MAAqBrF,KAAK4D,IAAM,CACtCc,IAAKd,EACLrD,MAAOqD,EACPiC,SAAU7G,IAAa4E,EACvBmC,SAAU,IAAM7E,KAAKsD,eAAeZ,S","ignoreList":[]}

package/dist/pitchfork/p-3133eb1a.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,a as s,h as o,H as a}from"./p-Bm6UxEit.js";const r=()=>`:host{border-radius:var(--radius-sm);color:var(--pf-option-text);cursor:pointer;display:block;font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3);user-select:none}:host([hidden]){display:none}:host([active]),:host(:hover:not([disabled])){background:var(--pf-option-active-bg);color:var(--pf-option-active-text)}:host([selected]){font-weight:var(--font-weight-medium)}:host([disabled]){background:transparent;color:var(--pf-option-text-disabled);cursor:not-allowed}:host([disabled]:hover){background:transparent}`;const i=class{constructor(s){t(this,s);this.pfOptionSelect=e(this,"pfOptionSelect")}get el(){return s(this)}value="";disabled=false;selected=false;active=false;pfOptionSelect;onClick=t=>{if(this.disabled){t.stopPropagation();return}this.pfOptionSelect.emit({value:this.value})};render(){return o(a,{key:"d1dd91cffb3c458ea6b9fb89ddc8a2c91f3b0292",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":null,onClick:this.onClick},o("slot",{key:"0ca5d298f12c9cb85406e65bcc47670d1642613d"}))}};i.style=r();export{i as pf_option};
+//# sourceMappingURL=p-3133eb1a.entry.js.map

package/dist/pitchfork/p-3133eb1a.entry.js.map

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

package/dist/pitchfork/p-31e0fbc7.entry.js

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

package/dist/pitchfork/p-31e0fbc7.entry.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/pitchfork/p-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-4959a556.entry.js

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

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

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

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

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

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

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

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

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