@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/components/p-DkBJMi_M.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCalendarCss","PfCalendar","__stencil_proxyCustomElement","HTMLElement","value","min","max","startYear","endYear","showOutsideDays","label","isDateDisabled","pfChange","displayMonth","startOfMonth","Date","focusedDate","toMidday","shouldRestoreFocus","componentWillLoad","selected","this","selectedDate","base","clamp","componentDidRender","el","shadowRoot","querySelector","focus","syncValue","goToMonth","date","target","parseISODate","focusSelectedDay","years","now","getFullYear","start","end","Math","clampMonthToYearRange","isDisabled","isOutsideDateRange","select","formatISODate","emit","moveFocus","move","next","moveCalendarDate","onKeyDown","event","resolveCalendarKey","key","preventDefault","Keys","Enter","Space","showMonth","month","lastDay","getMonth","getDate","stepMonth","amount","addMonths","renderHeader","Array","from","length","_","index","months","Intl","DateTimeFormat","format","atFirst","atLast","h","class","part","type","disabled","onClick","name","onChange","Number","map","String","year","render","days","buildCalendarDays","today","monthLabel","Host","role","WEEKDAY_LABELS","day","CALENDAR_CELL_COUNT","week","slice","inCurrentMonth","isSelected","isSameDay","isToday","isFocused","tabindex","weekday"],"sources":["src/components/pf-calendar/pf-calendar.css?tag=pf-calendar&encapsulation=shadow","src/components/pf-calendar/pf-calendar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.calendar {\n  background: var(--pf-calendar-bg);\n  border: 1px solid var(--pf-calendar-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-calendar-text);\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n.header {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n  justify-content: space-between;\n}\n\n.controls {\n  display: flex;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n.select {\n  background: var(--pf-calendar-bg);\n  border: 1px solid var(--pf-calendar-border);\n  border-radius: var(--radius-sm);\n  color: var(--pf-calendar-text);\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  padding: var(--space-1) var(--space-2);\n}\n\n.select:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.nav {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-calendar-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.nav:hover:not(:disabled) {\n  background: var(--pf-calendar-bg-subtle);\n  color: var(--pf-calendar-text);\n}\n\n.nav:disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.nav:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.grid {\n  display: grid;\n  gap: 2px;\n}\n\n/*\n * `display: contents` so each row's seven cells join the grid's own columns\n * rather than forming a nested box. The rows exist for the `role=\"row\"` the\n * grid pattern requires, not for layout.\n */\n.row {\n  display: contents;\n}\n\n.grid {\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.weekday {\n  color: var(--pf-calendar-text-muted);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  padding: var(--space-1) 0;\n  text-align: center;\n}\n\n.day,\n.empty {\n  aspect-ratio: 1;\n  display: flex;\n  min-width: var(--space-8);\n}\n\n.day {\n  align-items: center;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-sm);\n  color: var(--pf-calendar-text);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  justify-content: center;\n}\n\n.day:hover:not([aria-disabled='true']) {\n  background: var(--pf-calendar-bg-subtle);\n}\n\n.day:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.day--outside {\n  color: var(--pf-calendar-text-muted);\n}\n\n.day--today {\n  background: var(--pf-calendar-today-bg);\n  border-color: var(--pf-calendar-today-border);\n}\n\n/* After today, so a selected day that is also today reads as selected. */\n.day--selected {\n  background: var(--pf-calendar-selected-bg);\n  border-color: var(--pf-calendar-selected-bg);\n  color: var(--pf-calendar-selected-text);\n}\n\n.day--selected:hover {\n  background: var(--pf-calendar-selected-bg-hover);\n}\n\n.day[aria-disabled='true'] {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n","import {\n  addMonths,\n  buildCalendarDays,\n  CALENDAR_CELL_COUNT,\n  clampMonthToYearRange,\n  formatISODate,\n  isOutsideDateRange,\n  isSameDay,\n  Keys,\n  moveCalendarDate,\n  parseISODate,\n  resolveCalendarKey,\n  startOfMonth,\n  toMidday,\n  WEEKDAY_LABELS,\n  type CalendarMove,\n} 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\n/**\n * A month grid for picking a date.\n *\n * **It has a keyboard, which the React component does not.** `Calendar`\n * renders 42 buttons and no key handling, so reaching the end of a month means\n * 42 presses of Tab and there is no way to move by week at all. This grid is\n * the ARIA pattern instead: one tab stop, arrows to move a day, up and down a\n * week, Home and End to the ends of the week, PageUp/PageDown a month. The\n * arithmetic is core's `moveCalendarDate`, so the React component can adopt it\n * without the two disagreeing — recorded in `todo.md`.\n *\n * Month and year are native `<select>`s rather than two `pf-dropdown`s. A year\n * range of a century would mean a hundred custom elements rendered into this\n * shadow root for one control, and a `<select>` brings its own keyboard and\n * its platform picker on a phone.\n *\n * @part calendar - the root box.\n * @part header - the month and year controls row.\n * @part grid - the month grid.\n * @part day - every day cell.\n * @part selected - the selected day.\n * @part today - today's cell.\n */\n@Component({\n  tag: 'pf-calendar',\n  styleUrl: 'pf-calendar.css',\n  shadow: true,\n})\nexport class PfCalendar {\n  @Element() el!: HTMLElement;\n\n  /** The selected date, as `YYYY-MM-DD`. Reflected, so a selector can find it. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Earliest selectable date, as `YYYY-MM-DD`. */\n  @Prop() min?: string;\n\n  /** Latest selectable date, as `YYYY-MM-DD`. */\n  @Prop() max?: string;\n\n  /** First year offered in the year picker. Defaults to 50 years back. */\n  @Prop() startYear?: number;\n\n  /** Last year offered in the year picker. Defaults to 50 years on. */\n  @Prop() endYear?: number;\n\n  /** Render the days borrowed from the neighbouring months. */\n  @Prop() showOutsideDays = true;\n\n  /** Accessible name for the grid. */\n  @Prop() label = 'Calendar';\n\n  /**\n   * A predicate for days that cannot be chosen, beyond `min` and `max`.\n   *\n   * A property rather than an attribute, because a function cannot be written\n   * in HTML — the generated bindings set props as properties, so a React or\n   * Angular consumer passes it as they would any other prop, and a plain-HTML\n   * consumer uses `min`/`max` or assigns it in script.\n   */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires with the chosen date, as `YYYY-MM-DD`. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The month on screen. */\n  @State() displayMonth: Date = startOfMonth(new Date());\n\n  /** The day the grid's single tab stop sits on. */\n  @State() focusedDate: Date = toMidday(new Date());\n\n  /** Set once a key or a click has moved focus, so the first paint does not steal it. */\n  private shouldRestoreFocus = false;\n\n  componentWillLoad() {\n    const selected = this.selectedDate();\n    const base = selected ?? toMidday(new Date());\n    this.focusedDate = base;\n    this.displayMonth = this.clamp(startOfMonth(base));\n  }\n\n  componentDidRender() {\n    if (!this.shouldRestoreFocus) return;\n    this.shouldRestoreFocus = false;\n    // The grid has one tab stop, so after a move the new one has to be given\n    // focus explicitly — the old button may not even exist any more.\n    this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n  }\n\n  /** Follows a value set from outside, so the grid shows what it is told. */\n  @Watch('value')\n  syncValue() {\n    const selected = this.selectedDate();\n    if (!selected) return;\n    this.focusedDate = selected;\n    this.displayMonth = this.clamp(startOfMonth(selected));\n  }\n\n  /** Moves the grid to the month holding `date` (a `Date` or `YYYY-MM-DD`). */\n  @Method()\n  async goToMonth(date: string | Date): Promise<void> {\n    const target = typeof date === 'string' ? parseISODate(date) : toMidday(date);\n    if (!target) return;\n    this.displayMonth = this.clamp(startOfMonth(target));\n    this.focusedDate = target;\n  }\n\n  /**\n   * Puts focus on the grid's single tab stop.\n   *\n   * A method rather than something a container does for itself: the tab stop\n   * is inside this shadow root, and reaching into another component's shadow\n   * root to find it is exactly the coupling `::part()` and `@Method()` exist\n   * to avoid. `pf-date-picker` calls this when its popover opens.\n   */\n  @Method()\n  async focusSelectedDay(): Promise<void> {\n    this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n  }\n\n  private selectedDate(): Date | null {\n    return parseISODate(this.value);\n  }\n\n  private get years() {\n    const now = new Date().getFullYear();\n    const start = this.startYear ?? now - 50;\n    const end = this.endYear ?? now + 50;\n    return { start: Math.min(start, end), end: Math.max(start, end) };\n  }\n\n  private clamp(date: Date): Date {\n    const { start, end } = this.years;\n    return clampMonthToYearRange(date, start, end);\n  }\n\n  private isDisabled(date: Date): boolean {\n    const min = parseISODate(this.min);\n    const max = parseISODate(this.max);\n    if (isOutsideDateRange(date, min, max)) return true;\n    return this.isDateDisabled?.(date) ?? false;\n  }\n\n  private select(date: Date) {\n    if (this.isDisabled(date)) return;\n    this.value = formatISODate(date);\n    this.focusedDate = date;\n    this.displayMonth = this.clamp(startOfMonth(date));\n    this.pfChange.emit({ value: this.value });\n  }\n\n  /**\n   * Moves the focused day, bringing the grid with it.\n   *\n   * A disabled day can still be focused — skipping it would make a long\n   * blocked stretch impossible to cross, and the ARIA pattern is that focus\n   * moves freely while activation is refused.\n   */\n  private moveFocus(move: CalendarMove) {\n    const next = moveCalendarDate(this.focusedDate, move);\n    const { start, end } = this.years;\n    if (next.getFullYear() < start || next.getFullYear() > end) return;\n\n    this.focusedDate = next;\n    this.displayMonth = this.clamp(startOfMonth(next));\n    this.shouldRestoreFocus = true;\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    // The key map is core's, so the React `Calendar` cannot disagree with this\n    // grid about what PageUp means.\n    const move = resolveCalendarKey(event.key);\n    if (move) {\n      event.preventDefault();\n      this.moveFocus(move);\n      return;\n    }\n\n    if (event.key === Keys.Enter || event.key === Keys.Space) {\n      event.preventDefault();\n      this.select(this.focusedDate);\n      this.shouldRestoreFocus = true;\n    }\n  };\n\n  /**\n   * Shows a month and brings the tab stop with it.\n   *\n   * Both halves, always. Moving `displayMonth` alone leaves `focusedDate` on a\n   * day that is no longer rendered, so no cell carries `tabindex=\"0\"` and the\n   * grid drops out of the tab order altogether — reachable by mouse and by\n   * nothing else. The year picker did exactly that until a test went looking.\n   */\n  private showMonth(month: Date) {\n    const target = this.clamp(startOfMonth(month));\n    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0, 12).getDate();\n    this.displayMonth = target;\n    this.focusedDate = new Date(\n      target.getFullYear(),\n      target.getMonth(),\n      Math.min(this.focusedDate.getDate(), lastDay),\n      12,\n    );\n  }\n\n  private stepMonth(amount: number) {\n    this.showMonth(addMonths(this.displayMonth, amount));\n  }\n\n  private renderHeader() {\n    const { start, end } = this.years;\n    const years = Array.from({ length: end - start + 1 }, (_, index) => start + index);\n    const months = Array.from({ length: 12 }, (_, month) =>\n      new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date(2024, month, 1)),\n    );\n\n    const atFirst = this.displayMonth.getFullYear() === start && this.displayMonth.getMonth() === 0;\n    const atLast = this.displayMonth.getFullYear() === end && this.displayMonth.getMonth() === 11;\n\n    return (\n      <div class=\"header\" part=\"header\">\n        <button\n          type=\"button\"\n          class=\"nav\"\n          aria-label=\"Previous month\"\n          disabled={atFirst}\n          onClick={() => this.stepMonth(-1)}\n        >\n          <pf-icon name=\"square-caret-left\"></pf-icon>\n        </button>\n\n        <div class=\"controls\">\n          <select\n            class=\"select\"\n            aria-label=\"Month\"\n            onChange={(event) => {\n              const month = Number((event.target as HTMLSelectElement).value);\n              this.showMonth(new Date(this.displayMonth.getFullYear(), month, 1, 12));\n            }}\n          >\n            {months.map((name, month) => (\n              <option\n                key={name}\n                value={String(month)}\n                selected={month === this.displayMonth.getMonth()}\n              >\n                {name}\n              </option>\n            ))}\n          </select>\n\n          <select\n            class=\"select\"\n            aria-label=\"Year\"\n            onChange={(event) => {\n              const year = Number((event.target as HTMLSelectElement).value);\n              this.showMonth(new Date(year, this.displayMonth.getMonth(), 1, 12));\n            }}\n          >\n            {years.map((year) => (\n              <option\n                key={year}\n                value={String(year)}\n                selected={year === this.displayMonth.getFullYear()}\n              >\n                {year}\n              </option>\n            ))}\n          </select>\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"nav\"\n          aria-label=\"Next month\"\n          disabled={atLast}\n          onClick={() => this.stepMonth(1)}\n        >\n          <pf-icon name=\"square-caret-right\"></pf-icon>\n        </button>\n      </div>\n    );\n  }\n\n  render() {\n    const days = buildCalendarDays(this.displayMonth);\n    const selected = this.selectedDate();\n    const today = toMidday(new Date());\n    const monthLabel = new Intl.DateTimeFormat('en-US', {\n      month: 'long',\n      year: 'numeric',\n    }).format(this.displayMonth);\n\n    return (\n      <Host>\n        <div class=\"calendar\" part=\"calendar\">\n          {this.renderHeader()}\n\n          <div\n            class=\"grid\"\n            part=\"grid\"\n            role=\"grid\"\n            aria-label={`${this.label}, ${monthLabel}`}\n            onKeyDown={this.onKeyDown}\n          >\n            <div class=\"row\" role=\"row\">\n              {WEEKDAY_LABELS.map((day) => (\n                <span key={day} class=\"weekday\" role=\"columnheader\" aria-label={day}>\n                  {day}\n                </span>\n              ))}\n            </div>\n\n            {Array.from({ length: CALENDAR_CELL_COUNT / 7 }, (_, week) => (\n              <div key={week} class=\"row\" role=\"row\">\n                {days.slice(week * 7, week * 7 + 7).map(({ date, inCurrentMonth }) => {\n                  if (!this.showOutsideDays && !inCurrentMonth) {\n                    return <span key={formatISODate(date)} class=\"empty\" role=\"gridcell\"></span>;\n                  }\n\n                  const isSelected = selected ? isSameDay(selected, date) : false;\n                  const isToday = isSameDay(today, date);\n                  const isFocused = isSameDay(this.focusedDate, date);\n                  const disabled = this.isDisabled(date);\n\n                  return (\n                    <button\n                      key={formatISODate(date)}\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-day={formatISODate(date)}\n                      part={`day${isSelected ? ' selected' : ''}${isToday ? ' today' : ''}`}\n                      class={{\n                        day: true,\n                        'day--outside': !inCurrentMonth,\n                        'day--today': isToday,\n                        'day--selected': isSelected,\n                      }}\n                      /* One tab stop for the whole grid: the arrows do the rest. */\n                      tabindex={isFocused ? 0 : -1}\n                      aria-selected={isSelected ? 'true' : 'false'}\n                      aria-current={isToday ? 'date' : null}\n                      aria-disabled={disabled ? 'true' : null}\n                      aria-label={new Intl.DateTimeFormat('en-US', {\n                        weekday: 'long',\n                        month: 'long',\n                        day: 'numeric',\n                        year: 'numeric',\n                      }).format(date)}\n                      onClick={() => {\n                        this.select(date);\n                        this.shouldRestoreFocus = true;\n                      }}\n                    >\n                      {date.getDate()}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-Dkd7BUB5.js

@@ -0,0 +1,2 @@
+function n(n){return n.trim().toLowerCase()}function r(r,t){const e=n(t);if(!e)return true;return[r.label,r.description,r.group].some((n=>n?n.toLowerCase().includes(e):false))}function t(n,r){if(!r)return false;return n.trim()===r.trim()}export{r as m,t as q};
+//# sourceMappingURL=p-Dkd7BUB5.js.map

package/dist/components/p-Dkd7BUB5.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["normalizeCommandQuery","query","trim","toLowerCase","matchesCommandQuery","fields","needle","label","description","group","some","field","includes","queryIsEchoedSelection","selectedLabel"],"sources":["../core/dist/command.js"],"sourcesContent":["//#region src/command.ts\n/** Trimmed and lower-cased, so an empty or whitespace query matches everything. */\nfunction normalizeCommandQuery(query) {\n\treturn query.trim().toLowerCase();\n}\n/**\n* Substring, case-insensitive, across all three fields. Not fuzzy: the React\n* component is a plain `includes`, and a fuzzy matcher here would make the\n* elements layer rank results the React one does not.\n*/\nfunction matchesCommandQuery(fields, query) {\n\tconst needle = normalizeCommandQuery(query);\n\tif (!needle) return true;\n\treturn [\n\t\tfields.label,\n\t\tfields.description,\n\t\tfields.group\n\t].some((field) => field ? field.toLowerCase().includes(needle) : false);\n}\n/**\n* Whether a combobox query should filter the list at all.\n*\n* It should not when the query is simply the chosen option's label echoed\n* back, which is what the field holds the moment after a selection. Filtering\n* then would leave exactly one option on screen, so reopening the list to\n* change your mind would show only the answer you already had.\n*\n* Shared because it is a rule rather than a rendering detail, and a layer that\n* forgot it would feel broken in a way its own tests would not notice.\n*/\nfunction queryIsEchoedSelection(query, selectedLabel) {\n\tif (!selectedLabel) return false;\n\treturn query.trim() === selectedLabel.trim();\n}\n//#endregion\nexport { matchesCommandQuery, normalizeCommandQuery, queryIsEchoedSelection };\n"],"mappings":"AAEA,SAASA,EAAsBC,GAC9B,OAAOA,EAAMC,OAAOC,aACrB,CAMA,SAASC,EAAoBC,EAAQJ,GACpC,MAAMK,EAASN,EAAsBC,GACrC,IAAKK,EAAQ,OAAO,KACpB,MAAO,CACND,EAAOE,MACPF,EAAOG,YACPH,EAAOI,OACNC,MAAMC,GAAUA,EAAQA,EAAMR,cAAcS,SAASN,GAAU,OAClE,CAYA,SAASO,EAAuBZ,EAAOa,GACtC,IAAKA,EAAe,OAAO,MAC3B,OAAOb,EAAMC,SAAWY,EAAcZ,MACvC,Q","ignoreList":[]}

package/dist/components/p-E7EWeR1F.js

@@ -0,0 +1,2 @@
+import{t as i,p as t,H as o,c as a,h as n,a as e}from"./index.js";import{l as s}from"./p-DfpCerXM.js";import{d as r,s as c}from"./p-CkFjPRTe.js";import{a as f}from"./p-Cta76kgc.js";const d=()=>`:host{display:block}:host([hidden]){display:none}.notification{align-items:flex-start;background:var(--pf-notification-bg);border:1px solid var(--pf-notification-border);border-radius:var(--radius-md);box-shadow:var(--pf-notification-elevation-floating-shadow, var(--pf-elevation-floating-shadow));color:var(--pf-notification-text);display:grid;gap:var(--space-3);grid-template-columns:auto minmax(0, 1fr) auto;padding:var(--space-3);width:100%;animation:pf-notification-in var(--pf-transition-enter)}@media (min-width: 768px){.notification{padding:var(--space-4)}}@keyframes pf-notification-in{from{opacity:0;transform:translateX(12px)}}:host([exiting]) .notification{animation:pf-notification-out var(--duration-moderate) var(--easing-accelerate) forwards;overflow:hidden;pointer-events:none}@keyframes pf-notification-out{from{opacity:1;transform:translateX(0);max-height:480px}to{opacity:0;transform:translateX(100%);max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}}@media (prefers-reduced-motion: reduce){.notification,:host([exiting]) .notification{animation:none}}:host([variant='info']) .notification{background:color-mix(     in srgb,     var(--pf-notification-info-bg) 45%,     var(--pf-notification-mix-base)   );border-color:var(--pf-notification-info-border)}:host([variant='success']) .notification{background:color-mix(     in srgb,     var(--pf-notification-success-bg) 45%,     var(--pf-notification-mix-base)   );border-color:var(--pf-notification-success-border)}:host([variant='warning']) .notification{background:color-mix(     in srgb,     var(--pf-notification-warning-bg) 45%,     var(--pf-notification-mix-base)   );border-color:var(--pf-notification-warning-border)}:host([variant='danger']) .notification{background:color-mix(     in srgb,     var(--pf-notification-danger-bg) 45%,     var(--pf-notification-mix-base)   );border-color:var(--pf-notification-danger-border)}.icon{align-items:center;display:inline-flex;font-size:var(--font-size-lg);height:1em;justify-content:center;line-height:1;margin-top:2px;width:1em}:host([variant='info']) .icon{color:var(--pf-notification-info-icon)}:host([variant='success']) .icon{color:var(--pf-notification-success-icon)}:host([variant='warning']) .icon{color:var(--pf-notification-warning-icon)}:host([variant='danger']) .icon{color:var(--pf-notification-danger-icon)}.content{display:grid;gap:var(--space-1);min-width:0}.title{color:var(--pf-notification-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.35;margin:0}:host([variant='info']) .title{color:var(--pf-notification-info-title)}.body{color:var(--pf-notification-text-muted);font-size:var(--font-size-sm);line-height:1.45}:host([variant='info']) .body{color:var(--pf-notification-info-icon)}.body[hidden]{display:none}slot[name='action']::slotted(*){margin-top:var(--space-2)}.dismiss{align-items:center;align-self:flex-start;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-notification-text-muted);cursor:pointer;display:inline-flex;height:28px;justify-content:center;width:28px}:host([variant='info']) .dismiss{color:var(--pf-notification-info-icon)}.dismiss:hover,.dismiss:focus-visible{background:var(--pf-notification-bg-subtle);color:var(--pf-notification-text);outline:none}:host([variant='info']) .dismiss:hover,:host([variant='info']) .dismiss:focus-visible{background:var(--pf-notification-info-hover-bg);color:var(--pf-notification-info-hover-icon)}`;const l=t(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.pfDismiss=a(this,"pfDismiss")}get el(){return this}variant="info";heading;description;dismissable=false;exiting=false;pfDismiss;hasSlottedBody=false;componentWillLoad(){this.readBody()}async dismiss(){if(this.exiting)return;this.exiting=true;await this.waitForExit();this.pfDismiss.emit()}async waitForExit(){await f(this.el.shadowRoot?.querySelector(".notification"))}readBody(){this.hasSlottedBody=Array.from(this.el.childNodes).some((i=>i.nodeType===Node.ELEMENT_NODE?!i.getAttribute("slot"):Boolean(i.textContent?.trim())))}render(){return n(e,{key:"9de454e456c98762a879e0f1e108a0a8367dbc2e"},n("div",{key:"60b5e41a64035032f4a3096c0d2fee0ede545753",class:"notification",part:"notification",role:s(this.variant)},n("span",{key:"3294482f4cc196ed29b5378664eb4724f0d41dc2",class:"icon",part:"icon","aria-hidden":"true"},n("slot",{key:"1c2d8970cbd0b7a4e90dc10ec60fa3d9160c690a",name:"icon"},n("pf-icon",{key:"83470033a1b36b3c0fd44db1e6dc0eb14d2d7b6d",name:c(this.variant)}))),n("div",{key:"61f69fbe020dfc1be756e50d1eec26e78a74c117",class:"content"},this.heading&&n("p",{key:"99cb65b4ea18b954a5297d3179cb0e0fa1289f1b",class:"title",part:"title"},this.heading),n("div",{key:"da4e2ff62296f30097110b136f08e0fe48f196ee",class:"body",part:"body",hidden:!this.hasSlottedBody&&!this.description},n("slot",{key:"745fd458de689740eba54922790b2826a59abec7",onSlotchange:()=>this.readBody()},this.description)),n("slot",{key:"af0385dd7accef3853fb861bd796592ecb0abd25",name:"action"})),this.dismissable&&n("button",{key:"ef0abf4e61771983746f9fc8e1ae1cb89e54fd0c",class:"dismiss",part:"dismiss",type:"button","aria-label":"Dismiss notification",onClick:()=>this.dismiss()},n("svg",{key:"5b9685008b5afc7443bc7cbc05d5cc85f8673875",viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",focusable:"false"},n("path",{key:"afb4ecdec4e8cdfc5f6060e7a63b330f87d409a6",d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.6","stroke-linecap":"round",fill:"none"})))))}static get style(){return d()}},[769,"pf-notification",{variant:[513],heading:[1],description:[1],dismissable:[516],exiting:[1540],hasSlottedBody:[32],dismiss:[64]}]);function p(){if(typeof customElements==="undefined"){return}const t=["pf-notification","pf-icon"];t.forEach((t=>{switch(t){case"pf-notification":if(!customElements.get(i(t))){customElements.define(i(t),l)}break;case"pf-icon":if(!customElements.get(i(t))){r()}break}}))}p();export{l as P,p as d};
+//# sourceMappingURL=p-E7EWeR1F.js.map

package/dist/components/p-E7EWeR1F.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfNotificationCss","PfNotification","__stencil_proxyCustomElement","HTMLElement","variant","heading","description","dismissable","exiting","pfDismiss","hasSlottedBody","componentWillLoad","this","readBody","dismiss","waitForExit","emit","animationsFinished","el","shadowRoot","querySelector","Array","from","childNodes","some","node","nodeType","Node","ELEMENT_NODE","getAttribute","Boolean","textContent","trim","render","h","Host","key","class","part","role","liveRegionRole","name","severityIconName","hidden","onSlotchange","type","onClick","viewBox","width","height","focusable","d","stroke","fill"],"sources":["src/components/pf-notification/pf-notification.css?tag=pf-notification&encapsulation=shadow","src/components/pf-notification/pf-notification.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.notification {\n  align-items: flex-start;\n  background: var(--pf-notification-bg);\n  border: 1px solid var(--pf-notification-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-notification-elevation-floating-shadow, var(--pf-elevation-floating-shadow));\n  color: var(--pf-notification-text);\n  display: grid;\n  gap: var(--space-3);\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  padding: var(--space-3);\n  width: 100%;\n  animation: pf-notification-in var(--pf-transition-enter);\n}\n\n@media (--md) {\n  .notification {\n    padding: var(--space-4);\n  }\n}\n\n/*\n * Its own copies: @keyframes do not cross a shadow boundary, so the global\n * sheet's `pf-notification-in` is invisible from in here.\n */\n@keyframes pf-notification-in {\n  from {\n    opacity: 0;\n    transform: translateX(12px);\n  }\n}\n\n/* Slides out and collapses, so the stack above closes the gap behind it. */\n:host([exiting]) .notification {\n  animation: pf-notification-out var(--duration-moderate) var(--easing-accelerate) forwards;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n@keyframes pf-notification-out {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n    max-height: 480px;\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n    max-height: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .notification,\n  :host([exiting]) .notification {\n    animation: none;\n  }\n}\n\n:host([variant='info']) .notification {\n  background: color-mix(\n    in srgb,\n    var(--pf-notification-info-bg) 45%,\n    var(--pf-notification-mix-base)\n  );\n  border-color: var(--pf-notification-info-border);\n}\n\n:host([variant='success']) .notification {\n  background: color-mix(\n    in srgb,\n    var(--pf-notification-success-bg) 45%,\n    var(--pf-notification-mix-base)\n  );\n  border-color: var(--pf-notification-success-border);\n}\n\n:host([variant='warning']) .notification {\n  background: color-mix(\n    in srgb,\n    var(--pf-notification-warning-bg) 45%,\n    var(--pf-notification-mix-base)\n  );\n  border-color: var(--pf-notification-warning-border);\n}\n\n:host([variant='danger']) .notification {\n  background: color-mix(\n    in srgb,\n    var(--pf-notification-danger-bg) 45%,\n    var(--pf-notification-mix-base)\n  );\n  border-color: var(--pf-notification-danger-border);\n}\n\n.icon {\n  align-items: center;\n  display: inline-flex;\n  font-size: var(--font-size-lg);\n  height: 1em;\n  justify-content: center;\n  line-height: 1;\n  margin-top: 2px;\n  width: 1em;\n}\n\n:host([variant='info']) .icon {\n  color: var(--pf-notification-info-icon);\n}\n\n:host([variant='success']) .icon {\n  color: var(--pf-notification-success-icon);\n}\n\n:host([variant='warning']) .icon {\n  color: var(--pf-notification-warning-icon);\n}\n\n:host([variant='danger']) .icon {\n  color: var(--pf-notification-danger-icon);\n}\n\n.content {\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.title {\n  color: var(--pf-notification-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.35;\n  margin: 0;\n}\n\n:host([variant='info']) .title {\n  color: var(--pf-notification-info-title);\n}\n\n.body {\n  color: var(--pf-notification-text-muted);\n  font-size: var(--font-size-sm);\n  line-height: 1.45;\n}\n\n:host([variant='info']) .body {\n  color: var(--pf-notification-info-icon);\n}\n\n.body[hidden] {\n  display: none;\n}\n\nslot[name='action']::slotted(*) {\n  margin-top: var(--space-2);\n}\n\n.dismiss {\n  align-items: center;\n  align-self: flex-start;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-notification-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  height: 28px;\n  justify-content: center;\n  width: 28px;\n}\n\n:host([variant='info']) .dismiss {\n  color: var(--pf-notification-info-icon);\n}\n\n.dismiss:hover,\n.dismiss:focus-visible {\n  background: var(--pf-notification-bg-subtle);\n  color: var(--pf-notification-text);\n  outline: none;\n}\n\n:host([variant='info']) .dismiss:hover,\n:host([variant='info']) .dismiss:focus-visible {\n  background: var(--pf-notification-info-hover-bg);\n  color: var(--pf-notification-info-hover-icon);\n}\n","import {\n  animationsFinished,\n  liveRegionRole,\n  severityIconName,\n  type LiveRegionVariant,\n} 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} from '@stencil/core';\n\nexport type PfNotificationVariant = LiveRegionVariant;\n\n/**\n * A notification: an icon, a heading, a body and an optional dismiss button.\n *\n * The role comes from core's `liveRegionRole`, so `warning` and `danger`\n * announce assertively and `info` and `success` wait their turn. The React\n * component used to be `role=\"status\"` for all four — the rule lived in\n * `Alert` and nowhere else — which is why the mapping is now shared.\n *\n * @slot - the body, used instead of the `description` prop when present.\n * @slot icon - replaces the icon the variant would choose.\n * @slot action - buttons or links under the body.\n * @part notification - the root box.\n * @part icon - the icon's box.\n * @part title - the heading.\n * @part body - the description's box.\n * @part dismiss - the dismiss button.\n */\n@Component({\n  tag: 'pf-notification',\n  styleUrl: 'pf-notification.css',\n  shadow: true,\n})\nexport class PfNotification {\n  @Element() el!: HTMLElement;\n\n  /** Severity. Reflected, because the stylesheet selects on it. */\n  @Prop({ reflect: true }) variant: PfNotificationVariant = 'info';\n\n  /** The bold first line. */\n  @Prop() heading?: string;\n\n  /** The body, when nothing is slotted. */\n  @Prop() description?: string;\n\n  /** Render the dismiss button. */\n  @Prop({ reflect: true }) dismissable = false;\n\n  /** Set while the exit animation plays. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) exiting = false;\n\n  /**\n   * Fires once the notification has finished leaving, which is the point at\n   * which its owner should remove it from the DOM.\n   */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  @State() hasSlottedBody = false;\n\n  componentWillLoad() {\n    this.readBody();\n  }\n\n  /**\n   * Starts the exit animation and resolves when it has finished, having\n   * emitted `pfDismiss`. Calling it twice is harmless.\n   */\n  @Method()\n  async dismiss(): Promise<void> {\n    if (this.exiting) return;\n    this.exiting = true;\n    await this.waitForExit();\n    this.pfDismiss.emit();\n  }\n\n  /**\n   * Waits for the exit animation, or returns straight away when there is not\n   * one. Core's, so `pf-alert` and the React `useExitAnimation` wait the same\n   * way — and none of them waits on a guessed duration.\n   */\n  private async waitForExit(): Promise<void> {\n    await animationsFinished(this.el.shadowRoot?.querySelector('.notification'));\n  }\n\n  private readBody() {\n    this.hasSlottedBody = Array.from(this.el.childNodes).some((node) =>\n      node.nodeType === Node.ELEMENT_NODE\n        ? !(node as Element).getAttribute('slot')\n        : Boolean(node.textContent?.trim()),\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"notification\" part=\"notification\" role={liveRegionRole(this.variant)}>\n          <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <pf-icon name={severityIconName(this.variant)}></pf-icon>\n            </slot>\n          </span>\n\n          <div class=\"content\">\n            {this.heading && (\n              <p class=\"title\" part=\"title\">\n                {this.heading}\n              </p>\n            )}\n\n            <div class=\"body\" part=\"body\" hidden={!this.hasSlottedBody && !this.description}>\n              <slot onSlotchange={() => this.readBody()}>{this.description}</slot>\n            </div>\n\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissable && (\n            <button\n              class=\"dismiss\"\n              part=\"dismiss\"\n              type=\"button\"\n              aria-label=\"Dismiss notification\"\n              onClick={() => this.dismiss()}\n            >\n              <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\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        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qLAAA,MAAMA,EAAoB,IAAM,i6G,MC2CnBC,EAAcC,EAAA,MAAAD,UAAAE,E,yIAIAC,QAAiC,OAGlDC,QAGAC,YAGiBC,YAAc,MAGCC,QAAU,MAMzCC,UAEAC,eAAiB,MAE1B,iBAAAC,GACEC,KAAKC,U,CAQP,aAAMC,GACJ,GAAIF,KAAKJ,QAAS,OAClBI,KAAKJ,QAAU,WACTI,KAAKG,cACXH,KAAKH,UAAUO,M,CAQT,iBAAMD,SACNE,EAAmBL,KAAKM,GAAGC,YAAYC,cAAc,iB,CAGrD,QAAAP,GACND,KAAKF,eAAiBW,MAAMC,KAAKV,KAAKM,GAAGK,YAAYC,MAAMC,GACzDA,EAAKC,WAAaC,KAAKC,cACjBH,EAAiBI,aAAa,QAChCC,QAAQL,EAAKM,aAAaC,S,CAIlC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eAAeC,KAAK,eAAeC,KAAMC,EAAe5B,KAAKR,UACtE8B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,OAAOC,KAAK,OAAM,cAAa,QACzCJ,EAAA,QAAAE,IAAA,2CAAMK,KAAK,QACTP,EAAA,WAAAE,IAAA,2CAASK,KAAMC,EAAiB9B,KAAKR,aAIzC8B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACRzB,KAAKP,SACJ6B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,SACnB1B,KAAKP,SAIV6B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OAAOC,KAAK,OAAOK,QAAS/B,KAAKF,iBAAmBE,KAAKN,aAClE4B,EAAA,QAAAE,IAAA,2CAAMQ,aAAc,IAAMhC,KAAKC,YAAaD,KAAKN,cAGnD4B,EAAA,QAAAE,IAAA,2CAAMK,KAAK,YAGZ7B,KAAKL,aACJ2B,EAAA,UAAAE,IAAA,2CACEC,MAAM,UACNC,KAAK,UACLO,KAAK,SAAQ,aACF,uBACXC,QAAS,IAAMlC,KAAKE,WAEpBoB,EAAA,OAAAE,IAAA,2CAAKW,QAAQ,YAAYC,MAAM,KAAKC,OAAO,KAAI,cAAa,OAAOC,UAAU,SAC3EhB,EAAA,QAAAE,IAAA,2CACEe,EAAE,qBACFC,OAAO,eAAc,eACR,MAAK,iBACH,QACfC,KAAK,Y","ignoreList":[]}

package/dist/components/p-Fiuz9ck7.js

@@ -0,0 +1,2 @@
+import{K as t}from"./p-g4FlTDZx.js";var r='button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [data-toolbar-item]:not([aria-disabled="true"])';function n(t){return Array.from(t.querySelectorAll(r))}function e(t,r){if(t.length===0)return;const n=(r&&t.includes(r)?r:void 0)??t.find((t=>t.getAttribute("tabindex")==="0"));for(const[r,e]of t.entries())e.tabIndex=(n?e===n:r===0)?0:-1}function a(r,n){const e=n==="vertical"?t.ArrowDown:t.ArrowRight;const a=n==="vertical"?t.ArrowUp:t.ArrowLeft;if(r===e)return"next";if(r===a)return"previous";if(r===t.Home)return"first";if(r===t.End)return"last";return null}export{n as g,a as r,e as s};
+//# sourceMappingURL=p-Fiuz9ck7.js.map

package/dist/components/p-Fiuz9ck7.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ROVING_ITEM_SELECTOR","getRovingItems","container","Array","from","querySelectorAll","syncRovingTabIndex","items","preferred","length","current","includes","find","item","getAttribute","index","entries","tabIndex","resolveRovingKey","key","orientation","next","Keys","ArrowDown","ArrowRight","previous","ArrowUp","ArrowLeft","Home","End"],"sources":["../core/dist/roving.js"],"sourcesContent":["import { Keys } from \"./keys.js\";\n//#region src/roving.ts\n/**\n* Roving tabindex: a group of controls that is one tab stop from the outside,\n* navigated internally with the arrow keys. Toolbars, radio groups and\n* segmented controls all work this way.\n*\n* Framework-free because the whole of it is DOM reads and index arithmetic.\n* Both layers must also agree on *which* descendants count as items — two\n* selectors that drift would give a toolbar whose keyboard order differs\n* between React and `<pf-toolbar>` for the same markup.\n*/\n/**\n* Interactive descendants, matched regardless of their current (roving)\n* tabindex. `[data-toolbar-item]` lets a consumer opt a custom element in,\n* since a custom element is not a native control.\n*/\nvar ROVING_ITEM_SELECTOR = \"button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [data-toolbar-item]:not([aria-disabled=\\\"true\\\"])\";\n/**\n* The items inside `container`, in source order.\n*\n* `querySelectorAll` reaches light-DOM descendants, which is where a custom\n* element's items are: they are slotted children, not shadow content.\n*/\nfunction getRovingItems(container) {\n\treturn Array.from(container.querySelectorAll(ROVING_ITEM_SELECTOR));\n}\n/**\n* Leave exactly one item tabbable.\n*\n* `preferred` wins when it is one of the items; otherwise an existing tab stop\n* is kept, so re-running this never moves the user's place. Only as a last\n* resort does the first item become the tab stop.\n*\n* The existing stop is found by reading the `tabindex` *attribute*, not the\n* `tabIndex` property: a native button reports `tabIndex === 0` with no\n* attribute at all, so the property would make every untouched button look\n* like an established tab stop.\n*/\nfunction syncRovingTabIndex(items, preferred) {\n\tif (items.length === 0) return;\n\tconst current = (preferred && items.includes(preferred) ? preferred : void 0) ?? items.find((item) => item.getAttribute(\"tabindex\") === \"0\");\n\tfor (const [index, item] of items.entries()) item.tabIndex = (current ? item === current : index === 0) ? 0 : -1;\n}\n/**\n* The navigation a key means on a given axis, or null if the key is not ours\n* to handle — so a caller can leave every other key to the browser.\n*\n* A vertical group moves on Up/Down and a horizontal one on Left/Right;\n* neither claims the other axis, which leaves those arrows free to scroll or\n* to move a caret.\n*/\nfunction resolveRovingKey(key, orientation) {\n\tconst next = orientation === \"vertical\" ? Keys.ArrowDown : Keys.ArrowRight;\n\tconst previous = orientation === \"vertical\" ? Keys.ArrowUp : Keys.ArrowLeft;\n\tif (key === next) return \"next\";\n\tif (key === previous) return \"previous\";\n\tif (key === Keys.Home) return \"first\";\n\tif (key === Keys.End) return \"last\";\n\treturn null;\n}\n//#endregion\nexport { ROVING_ITEM_SELECTOR, getRovingItems, resolveRovingKey, syncRovingTabIndex };\n"],"mappings":"oCAiBA,IAAIA,EAAuB,wJAO3B,SAASC,EAAeC,GACvB,OAAOC,MAAMC,KAAKF,EAAUG,iBAAiBL,GAC9C,CAaA,SAASM,EAAmBC,EAAOC,GAClC,GAAID,EAAME,SAAW,EAAG,OACxB,MAAMC,GAAWF,GAAaD,EAAMI,SAASH,GAAaA,OAAY,IAAWD,EAAMK,MAAMC,GAASA,EAAKC,aAAa,cAAgB,MACxI,IAAK,MAAOC,EAAOF,KAASN,EAAMS,UAAWH,EAAKI,UAAYP,EAAUG,IAASH,EAAUK,IAAU,GAAK,GAAI,CAC/G,CASA,SAASG,EAAiBC,EAAKC,GAC9B,MAAMC,EAAOD,IAAgB,WAAaE,EAAKC,UAAYD,EAAKE,WAChE,MAAMC,EAAWL,IAAgB,WAAaE,EAAKI,QAAUJ,EAAKK,UAClE,GAAIR,IAAQE,EAAM,MAAO,OACzB,GAAIF,IAAQM,EAAU,MAAO,WAC7B,GAAIN,IAAQG,EAAKM,KAAM,MAAO,QAC9B,GAAIT,IAAQG,EAAKO,IAAK,MAAO,OAC7B,OAAO,IACR,Q","ignoreList":[]}

package/dist/components/p-g4FlTDZx.js

@@ -0,0 +1,2 @@
+var r={ArrowDown:"ArrowDown",ArrowLeft:"ArrowLeft",ArrowRight:"ArrowRight",ArrowUp:"ArrowUp",End:"End",Enter:"Enter",Escape:"Escape",Home:"Home",Space:" "};var o=o=>o===r.Enter||o===r.Space;export{r as K,o as i};
+//# sourceMappingURL=p-g4FlTDZx.js.map

package/dist/components/p-g4FlTDZx.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Keys","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","End","Enter","Escape","Home","Space","isActivationKey","key"],"sources":["../core/dist/keys.js"],"sourcesContent":["//#region src/keys.ts\nvar Keys = {\n\tArrowDown: \"ArrowDown\",\n\tArrowLeft: \"ArrowLeft\",\n\tArrowRight: \"ArrowRight\",\n\tArrowUp: \"ArrowUp\",\n\tEnd: \"End\",\n\tEnter: \"Enter\",\n\tEscape: \"Escape\",\n\tHome: \"Home\",\n\tSpace: \" \",\n\tTab: \"Tab\"\n};\nvar isActivationKey = (key) => key === Keys.Enter || key === Keys.Space;\n//#endregion\nexport { Keys, isActivationKey };\n"],"mappings":"AACG,IAACA,EAAO,CACVC,UAAW,YACXC,UAAW,YACXC,WAAY,aACZC,QAAS,UACTC,IAAK,MACLC,MAAO,QACPC,OAAQ,SACRC,KAAM,OACNC,MAAO,KAGL,IAACC,EAAmBC,GAAQA,IAAQX,EAAKM,OAASK,IAAQX,EAAKS,a","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,c as r,h as i,a as n}from"./index.js";import{d as o}from"./p-CkFjPRTe.js";const c=()=>`:host{border-top:1px solid var(--pf-accordion-border);display:block}:host(:first-child){border-top:0}:host([hidden]){display:none}.heading{font-size:inherit;font-weight:inherit;margin:0}.trigger{align-items:center;background:transparent;border:0;color:var(--pf-accordion-trigger-text);cursor:pointer;display:flex;font:inherit;font-weight:var(--font-weight-medium);gap:var(--space-3);justify-content:space-between;padding:var(--space-3) var(--space-4);text-align:start;width:100%}.trigger:hover:not(:disabled){background:var(--pf-accordion-trigger-bg-hover)}.trigger:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.5}.icon{align-items:center;color:var(--pf-accordion-icon);display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([expanded]) .icon{transform:rotate(180deg)}.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--pf-transition-medium)}:host([expanded]) .panel{grid-template-rows:1fr}.content{color:var(--pf-accordion-content-text);min-height:0;overflow:hidden}.inner{padding:0 var(--space-4) var(--space-4)}@media (prefers-reduced-motion: reduce){.panel,.icon{transition:none}}`;const s=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfAccordionToggle=r(this,"pfAccordionToggle")}value="";disabled=false;expanded=false;headingLevel=3;pfAccordionToggle;get level(){const e=Math.round(Number(this.headingLevel));if(!Number.isFinite(e))return 3;return Math.min(Math.max(e,2),6)}onClick=()=>{if(this.disabled)return;this.pfAccordionToggle.emit({value:this.value})};render(){const e=`h${this.level}`;return i(n,{key:"35e729954b5bd58447dc4d3bc4f9e57e7bf0bdff"},i(e,{key:"455c96a2d76607ee70cc3f6f81a64f43ccc047c8",class:"heading",part:"heading"},i("button",{key:"4fdeae121e827c2cab00c9f583b0282be828c743",type:"button",id:"trigger",class:"trigger",part:"trigger","aria-expanded":this.expanded?"true":"false","aria-controls":"panel",disabled:this.disabled,onClick:this.onClick},i("span",{key:"10cabf948a5cbe16ddaeedd379e2c5485f92b568",class:"title",part:"title"},i("slot",{key:"1d050d2bd6a0ed6f0494cd9b4afa96e9abb21211",name:"title"})),i("span",{key:"f4a3dd3d8f519538f53623cbb9fe24b03b138db6",class:"icon",part:"icon","aria-hidden":"true"},i("pf-icon",{key:"53e79af5f641fc306bb6b80dc8166847d084224f",name:"chevron-down"})))),i("div",{key:"2dc77acf0e8cfe6f9ab01af1adb3cec47de80f2f",class:"panel",part:"panel"},i("div",{key:"e1531908c103894b176438690f08578b0ed964b6",class:"content",part:"content",id:"panel",role:"region","aria-labelledby":"trigger",inert:!this.expanded},i("div",{key:"9f21bf640cd85cd22fc90d1376140f3f74b9a69b",class:"inner",part:"inner"},i("slot",{key:"3e92f2c1f5cea1e8ab89f67633b0659935505161"})))))}static get delegatesFocus(){return true}static get style(){return c()}},[785,"pf-accordion-item",{value:[513],disabled:[516],expanded:[1540],headingLevel:[1026,"heading-level"]}]);function d(){if(typeof customElements==="undefined"){return}const t=["pf-accordion-item","pf-icon"];t.forEach((t=>{switch(t){case"pf-accordion-item":if(!customElements.get(e(t))){customElements.define(e(t),s)}break;case"pf-icon":if(!customElements.get(e(t))){o()}break}}))}d();const f=s;const l=d;export{f as PfAccordionItem,l as defineCustomElement};
+//# sourceMappingURL=pf-accordion-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfAccordionItemCss","PfAccordionItem","__stencil_proxyCustomElement","HTMLElement","value","disabled","expanded","headingLevel","pfAccordionToggle","level","asNumber","Math","round","Number","this","isFinite","min","max","onClick","emit","render","Heading","h","Host","key","class","part","type","id","name","role","inert"],"sources":["src/components/pf-accordion-item/pf-accordion-item.css?tag=pf-accordion-item&encapsulation=shadow","src/components/pf-accordion-item/pf-accordion-item.tsx"],"sourcesContent":["/*\n * The rule between sections lives here rather than in the group's sheet,\n * because `::slotted()` takes a compound selector and no combinator -- there is\n * no way to say `::slotted(item + item)` from outside. `:host(:first-child)`\n * says the same thing from in here, and needs no coordination.\n */\n:host {\n  border-top: 1px solid var(--pf-accordion-border);\n  display: block;\n}\n\n:host(:first-child) {\n  border-top: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.heading {\n  font-size: inherit;\n  font-weight: inherit;\n  margin: 0;\n}\n\n.trigger {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: var(--pf-accordion-trigger-text);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  font-weight: var(--font-weight-medium);\n  gap: var(--space-3);\n  justify-content: space-between;\n  padding: var(--space-3) var(--space-4);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:hover:not(:disabled) {\n  background: var(--pf-accordion-trigger-bg-hover);\n}\n\n.trigger:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.icon {\n  align-items: center;\n  color: var(--pf-accordion-icon);\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([expanded]) .icon {\n  transform: rotate(180deg);\n}\n\n/* The 0fr -> 1fr technique, which animates to the content's own height. */\n.panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--pf-transition-medium);\n}\n\n:host([expanded]) .panel {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  color: var(--pf-accordion-content-text);\n  min-height: 0;\n  overflow: hidden;\n}\n\n.inner {\n  padding: 0 var(--space-4) var(--space-4);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel,\n  .icon {\n    transition: none;\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nimport type { PfAccordionHeadingLevel } from '../pf-accordion/pf-accordion';\n\n/**\n * One section inside a `pf-accordion`.\n *\n * It owns its header, its panel and the open/close animation; the group owns\n * only *which* sections are open, because in `single` mode that depends on\n * what else is. So this element reports that it was clicked and waits to be\n * told, exactly as `pf-radio-button` does.\n *\n * The header is a real `<button>` in the shadow root, which makes it tabbable\n * with no help and gives Enter and Space for free. `delegatesFocus` is what\n * lets the group's arrow keys hand focus to it through the host.\n *\n * Both IDREFs here point inside this one shadow root, which is the case where\n * an IDREF resolves — the header names the panel with `aria-controls` and the\n * panel names the header back with `aria-labelledby`.\n *\n * @slot title - the header's label.\n * @slot - the section's content.\n * @part heading - the heading element wrapping the header button.\n * @part trigger - the header button.\n * @part title - the label's box inside the header.\n * @part icon - the chevron.\n * @part panel - the animating box around the content.\n * @part content - the region holding the content.\n */\n@Component({\n  tag: 'pf-accordion-item',\n  styleUrl: 'pf-accordion-item.css',\n  shadow: { delegatesFocus: true },\n})\nexport class PfAccordionItem {\n  /**\n   * Identifies the section in the group's open set.\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. The group reads the\n   * property.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Reflected; the stylesheet and the group's own filtering both read it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the group. Reflected, so the stylesheet can turn the chevron. */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  /** Set by the group from its own `headingLevel`. */\n  @Prop({ mutable: true }) headingLevel: PfAccordionHeadingLevel = 3;\n\n  /** Asks the group to open or close this section. The group decides. */\n  @Event() pfAccordionToggle!: EventEmitter<{ value: string }>;\n\n  /**\n   * Coerced, because an attribute of a union-literal type arrives as a string:\n   * `heading-level=\"2\"` would otherwise build an `h2` tag out of `\"2\"` by luck\n   * and compare false to `2` everywhere else. Clamped, so a level outside\n   * h2–h6 cannot produce a tag that is not a heading at all.\n   */\n  private get level(): PfAccordionHeadingLevel {\n    const asNumber = Math.round(Number(this.headingLevel));\n    if (!Number.isFinite(asNumber)) return 3;\n    return Math.min(Math.max(asNumber, 2), 6) as PfAccordionHeadingLevel;\n  }\n\n  private onClick = () => {\n    if (this.disabled) return;\n    this.pfAccordionToggle.emit({ value: this.value });\n  };\n\n  render() {\n    /*\n     * A dynamic intrinsic tag, cast to one of the literals: `h('h' + level,\n     * ...)` does not type-check, because Stencil's overload for a plain string\n     * tag types `class` as a className map and rejects the string.\n     */\n    const Heading = `h${this.level}` as 'h3';\n\n    return (\n      <Host>\n        <Heading class=\"heading\" part=\"heading\">\n          <button\n            type=\"button\"\n            id=\"trigger\"\n            class=\"trigger\"\n            part=\"trigger\"\n            aria-expanded={this.expanded ? 'true' : 'false'}\n            aria-controls=\"panel\"\n            disabled={this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"title\" part=\"title\">\n              <slot name=\"title\" />\n            </span>\n            <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          </button>\n        </Heading>\n        <div class=\"panel\" part=\"panel\">\n          {/*\n            `inert` as well as the collapsed height, because a panel animating\n            to zero still has focusable content in it: without this, tabbing\n            from a closed section's header lands inside the box it just closed.\n          */}\n          <div\n            class=\"content\"\n            part=\"content\"\n            id=\"panel\"\n            role=\"region\"\n            aria-labelledby=\"trigger\"\n            inert={!this.expanded}\n          >\n            <div class=\"inner\" part=\"inner\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAqB,IAAM,srC,MCkCpBC,EAAeC,EAAA,MAAAD,UAAAE,E,oIASDC,MAAQ,GAGRC,SAAW,MAGIC,SAAW,MAG1BC,aAAwC,EAGxDC,kBAQT,SAAYC,GACV,MAAMC,EAAWC,KAAKC,MAAMC,OAAOC,KAAKP,eACxC,IAAKM,OAAOE,SAASL,GAAW,OAAO,EACvC,OAAOC,KAAKK,IAAIL,KAAKM,IAAIP,EAAU,GAAI,E,CAGjCQ,QAAU,KAChB,GAAIJ,KAAKT,SAAU,OACnBS,KAAKN,kBAAkBW,KAAK,CAAEf,MAAOU,KAAKV,OAAQ,EAGpD,MAAAgB,GAME,MAAMC,EAAU,IAAIP,KAAKL,QAEzB,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAACD,EAAO,CAAAG,IAAA,2CAACC,MAAM,UAAUC,KAAK,WAC5BJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLC,GAAG,UACHH,MAAM,UACNC,KAAK,UAAS,gBACCZ,KAAKR,SAAW,OAAS,QAAO,gBACjC,QACdD,SAAUS,KAAKT,SACfa,QAASJ,KAAKI,SAEdI,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SACvBJ,EAAA,QAAAE,IAAA,2CAAMK,KAAK,WAEbP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,OAAOC,KAAK,OAAM,cAAa,QACzCJ,EAAA,WAAAE,IAAA,2CAASK,KAAK,oBAIpBP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SAMtBJ,EAAA,OAAAE,IAAA,2CACEC,MAAM,UACNC,KAAK,UACLE,GAAG,QACHE,KAAK,SAAQ,kBACG,UAChBC,OAAQjB,KAAKR,UAEbgB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACtBJ,EAAA,QAAAE,IAAA,gD","ignoreList":[]}

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

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

package/dist/components/pf-accordion.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,c as n,h as a,a as i}from"./index.js";import{r}from"./p-CAz7-p8y.js";import{r as o}from"./p-Fiuz9ck7.js";import{p as h,f as d,t as c}from"./p-BmcsJLdy.js";const l=()=>`:host{border:1px solid var(--pf-accordion-border);border-radius:var(--radius-md);display:block;overflow:hidden}:host([hidden]){display:none}`;const u=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=n(this,"pfChange")}get el(){return this}value="";type="single";headingLevel=3;pfChange;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleStateChange(){this.sync()}async refresh(){this.sync()}get items(){return Array.from(this.el.querySelectorAll("pf-accordion-item")).filter((e=>e.parentElement===this.el))}get expanded(){return h(this.value)}itemValue(e){return e.value??e.getAttribute("value")??""}isDisabled(e){return e.disabled??e.hasAttribute("disabled")}sync(){const e=this.expanded;const t=Number(this.headingLevel);for(const s of this.items){const n=s;n.expanded=e.includes(this.itemValue(s));n.headingLevel=t}}setExpanded(e){this.value=d(e);this.sync();this.pfChange.emit({value:this.value,values:e})}handleToggle(e){e.stopPropagation();const t=this.items.find((t=>this.itemValue(t)===e.detail.value));if(!t||this.isDisabled(t))return;this.setExpanded(c(this.expanded,e.detail.value,{multiple:this.type==="multiple"}))}handleKeyDown(e){if(e.defaultPrevented)return;const t=o(e.key,"vertical");if(!t)return;const s=this.items.filter((e=>!this.isDisabled(e)));if(s.length===0)return;const n=s.indexOf(document.activeElement);if(n===-1)return;const a=r(t,s.map(((e,t)=>t)),n);if(a<0)return;e.preventDefault();s[a].focus()}render(){return a(i,{key:"a9dbb4598a42f30a9d24d361ebedc2ed1e9fa2c9"},a("slot",{key:"e0ec68e8f33a2f6db479a5438e7db9df9c9e9b19",onSlotchange:()=>this.refresh()}))}static get watchers(){return{value:[{handleStateChange:0}],type:[{handleStateChange:0}],headingLevel:[{handleStateChange:0}]}}static get style(){return l()}},[769,"pf-accordion",{value:[1537],type:[513],headingLevel:[2,"heading-level"],refresh:[64]},[[0,"pfAccordionToggle","handleToggle"],[0,"keydown","handleKeyDown"]],{value:[{handleStateChange:0}],type:[{handleStateChange:0}],headingLevel:[{handleStateChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const t=["pf-accordion"];t.forEach((t=>{switch(t){case"pf-accordion":if(!customElements.get(e(t))){customElements.define(e(t),u)}break}}))}f();const p=u;const g=f;export{p as PfAccordion,g as defineCustomElement};
+//# sourceMappingURL=pf-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfAccordionCss","PfAccordion","__stencil_proxyCustomElement","HTMLElement","value","type","headingLevel","pfChange","componentWillLoad","this","sync","componentDidLoad","handleStateChange","refresh","items","Array","from","el","querySelectorAll","filter","item","parentElement","expanded","parseValueList","itemValue","getAttribute","isDisabled","disabled","hasAttribute","level","Number","section","includes","setExpanded","next","formatValueList","emit","values","handleToggle","event","stopPropagation","find","candidate","detail","toggleDisclosureValue","multiple","handleKeyDown","defaultPrevented","action","resolveRovingKey","key","enabled","length","currentIndex","indexOf","document","activeElement","nextIndex","resolveListMove","map","_","index","preventDefault","focus","render","h","Host","onSlotchange"],"sources":["src/components/pf-accordion/pf-accordion.css?tag=pf-accordion&encapsulation=shadow","src/components/pf-accordion/pf-accordion.tsx"],"sourcesContent":[":host {\n  border: 1px solid var(--pf-accordion-border);\n  border-radius: var(--radius-md);\n  display: block;\n  overflow: hidden;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import {\n  formatValueList,\n  parseValueList,\n  resolveListMove,\n  resolveRovingKey,\n  toggleDisclosureValue,\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 PfAccordionType = 'single' | 'multiple';\nexport type PfAccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\n/**\n * A stack of `pf-accordion-item` children, of which either one or several can\n * be open.\n *\n * The group owns which sections are open and the arrow keys; each item owns\n * its own header, panel and animation. Same division as `pf-radio-group` and\n * its radios — and for the same reason, since \"one open at a time\" is not a\n * thing a section can decide for itself.\n *\n * Unlike a tab strip this is **not** a roving tabindex: the ARIA accordion\n * pattern puts every header in the tab sequence, and the arrows are an extra\n * way to move between them rather than the only one. A header is a real\n * `<button>` inside its item's shadow root, so it is tabbable with no help.\n *\n * @slot - the `pf-accordion-item` children.\n */\n@Component({\n  tag: 'pf-accordion',\n  styleUrl: 'pf-accordion.css',\n  shadow: true,\n})\nexport class PfAccordion {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The open sections, as one comma-separated string — which is what an\n   * attribute can carry. `pfChange` also reports the parsed array, which is\n   * what a framework consumer usually wants.\n   */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** `single` closes the others when one opens; `multiple` leaves them. */\n  @Prop({ reflect: true }) type: PfAccordionType = 'single';\n\n  /**\n   * The heading level each item's header is wrapped in.\n   *\n   * A union-literal type defeats Stencil's attribute coercion — measured on\n   * `pf-time-picker`, where `hour-cycle=\"12\"` arrived as the *string* `\"12\"` —\n   * so the value is coerced before it is pushed down rather than compared\n   * here. The union stays because it is the useful type for a framework\n   * consumer who really does set the number.\n   */\n  @Prop() headingLevel: PfAccordionHeadingLevel = 3;\n\n  /** Fires when the open set changes, however it was changed. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('value')\n  @Watch('type')\n  @Watch('headingLevel')\n  handleStateChange() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the children, for a consumer who changed one through its\n   * *property* — `item.disabled = true` leaves no attribute, moves no node and\n   * fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested accordion owns its own sections. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-accordion-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  private get expanded(): string[] {\n    return parseValueList(this.value);\n  }\n\n  /**\n   * The property if the item has been upgraded, the attribute if it has not —\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private itemValue(item: HTMLElement) {\n    return (item as HTMLElement & { value?: string }).value ?? item.getAttribute('value') ?? '';\n  }\n\n  private isDisabled(item: HTMLElement) {\n    return (item as HTMLElement & { disabled?: boolean }).disabled ?? item.hasAttribute('disabled');\n  }\n\n  private sync() {\n    const expanded = this.expanded;\n    const level = Number(this.headingLevel) as PfAccordionHeadingLevel;\n\n    for (const item of this.items) {\n      const section = item as HTMLElement & {\n        expanded: boolean;\n        headingLevel: PfAccordionHeadingLevel;\n      };\n      section.expanded = expanded.includes(this.itemValue(item));\n      section.headingLevel = level;\n    }\n  }\n\n  private setExpanded(next: string[]) {\n    this.value = formatValueList(next);\n    this.sync();\n    this.pfChange.emit({ value: this.value, values: next });\n  }\n\n  /**\n   * A section asking to be opened or closed. The group decides, because in\n   * `single` mode the answer depends on what else is open.\n   */\n  @Listen('pfAccordionToggle')\n  handleToggle(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n\n    const item = this.items.find((candidate) => this.itemValue(candidate) === event.detail.value);\n    if (!item || this.isDisabled(item)) return;\n\n    this.setExpanded(\n      toggleDisclosureValue(this.expanded, event.detail.value, {\n        multiple: this.type === 'multiple',\n      }),\n    );\n  }\n\n  /**\n   * The arrows move focus between the headers and open nothing: an accordion's\n   * sections are opened deliberately, unlike a tab strip's panels. Home and\n   * End jump to the first and last enabled header.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, 'vertical');\n    if (!action) return;\n\n    const enabled = this.items.filter((item) => !this.isDisabled(item));\n    if (enabled.length === 0) return;\n\n    /*\n     * `activeElement` reports the shallowest host, which is the item: the\n     * header button it delegates focus to is inside the item's shadow root.\n     */\n    const currentIndex = enabled.indexOf(document.activeElement as HTMLElement);\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    enabled[nextIndex].focus();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"uLAAA,MAAMA,EAAiB,IAAM,+I,MC4ChBC,EAAWC,EAAA,MAAAD,UAAAE,E,uIAQkBC,MAAQ,GAGvBC,KAAwB,SAWzCC,aAAwC,EAGvCC,SAGT,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAMP,iBAAAE,GACEH,KAAKC,M,CASP,aAAMG,GACJJ,KAAKC,M,CAIP,SAAYI,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,sBAAsBC,QAC3EC,GAASA,EAAKC,gBAAkBZ,KAAKQ,I,CAI1C,YAAYK,GACV,OAAOC,EAAed,KAAKL,M,CAOrB,SAAAoB,CAAUJ,GAChB,OAAQA,EAA0ChB,OAASgB,EAAKK,aAAa,UAAY,E,CAGnF,UAAAC,CAAWN,GACjB,OAAQA,EAA8CO,UAAYP,EAAKQ,aAAa,W,CAG9E,IAAAlB,GACN,MAAMY,EAAWb,KAAKa,SACtB,MAAMO,EAAQC,OAAOrB,KAAKH,cAE1B,IAAK,MAAMc,KAAQX,KAAKK,MAAO,CAC7B,MAAMiB,EAAUX,EAIhBW,EAAQT,SAAWA,EAASU,SAASvB,KAAKe,UAAUJ,IACpDW,EAAQzB,aAAeuB,C,EAInB,WAAAI,CAAYC,GAClBzB,KAAKL,MAAQ+B,EAAgBD,GAC7BzB,KAAKC,OACLD,KAAKF,SAAS6B,KAAK,CAAEhC,MAAOK,KAAKL,MAAOiC,OAAQH,G,CAQlD,YAAAI,CAAaC,GACXA,EAAMC,kBAEN,MAAMpB,EAAOX,KAAKK,MAAM2B,MAAMC,GAAcjC,KAAKe,UAAUkB,KAAeH,EAAMI,OAAOvC,QACvF,IAAKgB,GAAQX,KAAKiB,WAAWN,GAAO,OAEpCX,KAAKwB,YACHW,EAAsBnC,KAAKa,SAAUiB,EAAMI,OAAOvC,MAAO,CACvDyC,SAAUpC,KAAKJ,OAAS,a,CAW9B,aAAAyC,CAAcP,GACZ,GAAIA,EAAMQ,iBAAkB,OAE5B,MAAMC,EAASC,EAAiBV,EAAMW,IAAK,YAC3C,IAAKF,EAAQ,OAEb,MAAMG,EAAU1C,KAAKK,MAAMK,QAAQC,IAAUX,KAAKiB,WAAWN,KAC7D,GAAI+B,EAAQC,SAAW,EAAG,OAM1B,MAAMC,EAAeF,EAAQG,QAAQC,SAASC,eAC9C,GAAIH,KAAiB,EAAI,OAEzB,MAAMI,EAAYC,EAChBV,EACAG,EAAQQ,KAAI,CAACC,EAAGC,IAAUA,IAC1BR,GAEF,GAAII,EAAY,EAAG,OAEnBlB,EAAMuB,iBACNX,EAAQM,GAAWM,O,CAGrB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAhB,IAAA,4CACHe,EAAA,QAAAf,IAAA,2CAAMiB,aAAc,IAAM1D,KAAKI,Y","ignoreList":[]}

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

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

package/dist/components/pf-alert.js

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as r,c as t,h as i,a as s}from"./index.js";import{l as o}from"./p-DfpCerXM.js";import{d as n,s as c}from"./p-CkFjPRTe.js";import{a as d}from"./p-Cta76kgc.js";const f=()=>`:host{display:block}:host([hidden]){display:none}.alert{align-items:flex-start;border:1px solid var(--pf-alert-border);border-radius:var(--radius-md);display:flex;gap:var(--space-3);padding:var(--space-3)}:host([variant='info']) .alert{background:var(--pf-alert-info-background);border-color:var(--pf-alert-info-border);color:var(--pf-alert-info-foreground)}:host([variant='success']) .alert{background:var(--pf-alert-success-background);border-color:var(--pf-alert-success-border);color:var(--pf-alert-success-foreground)}:host([variant='warning']) .alert{background:var(--pf-alert-warning-background);border-color:var(--pf-alert-warning-border);color:var(--pf-alert-warning-foreground)}:host([variant='danger']) .alert{background:var(--pf-alert-danger-background);border-color:var(--pf-alert-danger-border);color:var(--pf-alert-danger-foreground)}.icon{align-items:center;display:inline-flex;font-size:var(--font-size-lg);height:1em;justify-content:center;line-height:1;margin-top:1px;width:1em}.content{display:grid;gap:var(--space-1)}.title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.3;margin:0}.body{font-size:var(--font-size-sm);line-height:1.4}.body.empty{display:none}::slotted(p){margin:0}.dismiss{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:currentcolor;cursor:pointer;display:inline-flex;font-size:var(--font-size-md);justify-content:center;margin-inline-start:auto;padding:0}.dismiss:focus-visible{box-shadow:var(--pf-alert-focus-ring, var(--pf-focus-ring));outline:none}.alert--exiting{animation:pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;overflow:hidden;pointer-events:none}@keyframes pf-alert-out{from{max-height:480px;opacity:1}to{margin-bottom:0;margin-top:0;max-height:0;opacity:0;padding-bottom:0;padding-top:0}}@media (prefers-reduced-motion: reduce){.alert--exiting{animation:none}}`;const l=a(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfDismiss=t(this,"pfDismiss")}get el(){return this}variant="info";heading;description;dismissible=false;dismissLabel="Dismiss alert";pfDismiss;exiting=false;hasSlottedBody=false;componentWillLoad(){this.readBody()}async dismiss(){if(this.exiting)return;this.exiting=true;await d(this.el.shadowRoot?.querySelector(".alert"));this.pfDismiss.emit()}readBody(){this.hasSlottedBody=Array.from(this.el.childNodes).some((e=>e.nodeType===Node.ELEMENT_NODE?!e.getAttribute("slot"):Boolean(e.textContent?.trim())))}render(){const e=this.hasSlottedBody||Boolean(this.description);return i(s,{key:"f3522c8ef72b489525e45dc1fc3c70086af533ac"},i("div",{key:"b5b402130872fdfc94878b4d09329399c4adacb5",class:{alert:true,"alert--exiting":this.exiting},part:"alert",role:o(this.variant)},i("span",{key:"048f80625f800c1835fa6e356dfe15d0fdd7f35c",class:"icon",part:"icon","aria-hidden":"true"},i("slot",{key:"6a42e99211fd2906e0162bfb31586e06af30aaa5",name:"icon"},i("pf-icon",{key:"146ff1c59c4f860ec78a6f84162cab58f3e5e15d",name:c(this.variant)}))),i("div",{key:"a74939fe38d05d8cf8a3de2c75e048f103b9739c",class:"content"},this.heading&&i("p",{key:"a9758f5cfece50320d0eff15c0cbc47a1d7f8a46",class:"title",part:"title"},this.heading),i("div",{key:"e48f83b618e566b3c1884212372607c211557bee",class:{body:true,empty:!e},part:"body"},i("slot",{key:"472cbf494dfcaa7f0f539fc2e243a6eab68b05b9",onSlotchange:()=>this.readBody()},this.description))),this.dismissible&&i("button",{key:"f2cceb0cee8e905cac8d001304ca927245329b1e",type:"button",class:"dismiss",part:"dismiss","aria-label":this.dismissLabel,onClick:()=>this.dismiss()},i("pf-icon",{key:"0190d8ca15d01969f8992e7dfc14c814c4fa29bf",name:"circle-xmark","aria-hidden":"true"}))))}static get style(){return f()}},[769,"pf-alert",{variant:[513],heading:[1],description:[1],dismissible:[516],dismissLabel:[1,"dismiss-label"],exiting:[32],hasSlottedBody:[32],dismiss:[64]}]);function p(){if(typeof customElements==="undefined"){return}const a=["pf-alert","pf-icon"];a.forEach((a=>{switch(a){case"pf-alert":if(!customElements.get(e(a))){customElements.define(e(a),l)}break;case"pf-icon":if(!customElements.get(e(a))){n()}break}}))}p();const m=l;const b=p;export{m as PfAlert,b as defineCustomElement};
+//# sourceMappingURL=pf-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfAlertCss","PfAlert","__stencil_proxyCustomElement","HTMLElement","variant","heading","description","dismissible","dismissLabel","pfDismiss","exiting","hasSlottedBody","componentWillLoad","this","readBody","dismiss","animationsFinished","el","shadowRoot","querySelector","emit","Array","from","childNodes","some","node","nodeType","Node","ELEMENT_NODE","getAttribute","Boolean","textContent","trim","render","hasBody","h","Host","key","class","alert","part","role","liveRegionRole","name","severityIconName","body","empty","onSlotchange","type","onClick"],"sources":["src/components/pf-alert/pf-alert.css?tag=pf-alert&encapsulation=shadow","src/components/pf-alert/pf-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.alert {\n  align-items: flex-start;\n  border: 1px solid var(--pf-alert-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n/*\n * The colours come from the reflected attribute rather than a class: the\n * generated bindings set props as properties, so an unreflected prop would\n * leave no attribute to select on.\n */\n:host([variant='info']) .alert {\n  background: var(--pf-alert-info-background);\n  border-color: var(--pf-alert-info-border);\n  color: var(--pf-alert-info-foreground);\n}\n\n:host([variant='success']) .alert {\n  background: var(--pf-alert-success-background);\n  border-color: var(--pf-alert-success-border);\n  color: var(--pf-alert-success-foreground);\n}\n\n:host([variant='warning']) .alert {\n  background: var(--pf-alert-warning-background);\n  border-color: var(--pf-alert-warning-border);\n  color: var(--pf-alert-warning-foreground);\n}\n\n:host([variant='danger']) .alert {\n  background: var(--pf-alert-danger-background);\n  border-color: var(--pf-alert-danger-border);\n  color: var(--pf-alert-danger-foreground);\n}\n\n.icon {\n  align-items: center;\n  display: inline-flex;\n  font-size: var(--font-size-lg);\n  height: 1em;\n  justify-content: center;\n  line-height: 1;\n  margin-top: 1px;\n  width: 1em;\n}\n\n.content {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.title {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.3;\n  margin: 0;\n}\n\n.body {\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n}\n\n/*\n * Two classes deep, because the ties break on source order. The slot stays\n * rendered inside the hidden box, or content added later never fires\n * `slotchange`.\n */\n.body.empty {\n  display: none;\n}\n\n/* The browser's own paragraphs, if a consumer slots any. */\n::slotted(p) {\n  margin: 0;\n}\n\n.dismiss {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: currentcolor;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-md);\n  justify-content: center;\n  margin-inline-start: auto;\n  padding: 0;\n}\n\n.dismiss:focus-visible {\n  box-shadow: var(--pf-alert-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n/*\n * Fade *and* collapse, so the content below reflows into the space rather\n * than jumping when the alert is removed. This is the difference from\n * `pf-notification`, which slides out of a stack instead.\n */\n.alert--exiting {\n  animation: pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n/* Its own copy: `@keyframes` do not cross a shadow boundary. */\n@keyframes pf-alert-out {\n  from {\n    max-height: 480px;\n    opacity: 1;\n  }\n\n  to {\n    margin-bottom: 0;\n    margin-top: 0;\n    max-height: 0;\n    opacity: 0;\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .alert--exiting {\n    animation: none;\n  }\n}\n","import {\n  animationsFinished,\n  liveRegionRole,\n  severityIconName,\n  type LiveRegionVariant,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type PfAlertVariant = LiveRegionVariant;\n\n/**\n * An inline alert: an icon, a heading, a body and an optional dismiss button.\n *\n * The sibling of `pf-notification`, and deliberately a separate element\n * rather than a variant of it: an alert belongs in the page's flow and\n * collapses its own height when dismissed so the content below reflows, while\n * a notification is one of a stack in a corner and slides out. The two look\n * alike and behave differently, which is exactly when one element serving\n * both goes wrong.\n *\n * The role comes from core's `liveRegionRole`, so `warning` and `danger`\n * announce assertively and `info` and `success` wait their turn.\n *\n * @slot - the body, used instead of the `description` prop when present.\n * @slot icon - replaces the icon the variant would choose.\n * @part alert - the root box.\n * @part icon - the icon's box.\n * @part title - the heading.\n * @part body - the description's box.\n * @part dismiss - the dismiss button.\n */\n@Component({\n  tag: 'pf-alert',\n  styleUrl: 'pf-alert.css',\n  shadow: true,\n})\nexport class PfAlert {\n  @Element() el!: HTMLElement;\n\n  /** Reflected, because the stylesheet selects on it for the colours. */\n  @Prop({ reflect: true }) variant: PfAlertVariant = 'info';\n\n  @Prop() heading?: string;\n\n  /** The body. A slotted body is used instead when there is one. */\n  @Prop() description?: string;\n\n  /** Show the dismiss button. Reflected. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** The dismiss button's accessible name. */\n  @Prop() dismissLabel = 'Dismiss alert';\n\n  /** Fires once the alert has finished leaving. */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  /** Reflected, because that is what the exit animation selects on. */\n  @State() exiting = false;\n\n  /** Whether anything was slotted into the default slot. */\n  @State() hasSlottedBody = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.readBody();\n  }\n\n  /**\n   * Dismisses the alert, waiting for its exit animation first.\n   *\n   * The wait is core's `animationsFinished`, which asks the element what is\n   * actually running rather than sleeping for a duration someone wrote down:\n   * under `prefers-reduced-motion` the stylesheet sets `animation: none`, no\n   * test project applies `styleUrl` CSS at all, and a consumer may not have\n   * loaded the stylesheet — in all three an `animationend` listener would\n   * wait for ever and a timeout would be a fiction.\n   */\n  @Method()\n  async dismiss() {\n    if (this.exiting) return;\n    this.exiting = true;\n\n    await animationsFinished(this.el.shadowRoot?.querySelector('.alert'));\n    this.pfDismiss.emit();\n  }\n\n  private readBody() {\n    this.hasSlottedBody = Array.from(this.el.childNodes).some((node) =>\n      node.nodeType === Node.ELEMENT_NODE\n        ? !(node as Element).getAttribute('slot')\n        : Boolean(node.textContent?.trim()),\n    );\n  }\n\n  render() {\n    const hasBody = this.hasSlottedBody || Boolean(this.description);\n\n    return (\n      <Host>\n        <div\n          class={{ alert: true, 'alert--exiting': this.exiting }}\n          part=\"alert\"\n          role={liveRegionRole(this.variant)}\n        >\n          <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <pf-icon name={severityIconName(this.variant)}></pf-icon>\n            </slot>\n          </span>\n\n          <div class=\"content\">\n            {this.heading && (\n              <p class=\"title\" part=\"title\">\n                {this.heading}\n              </p>\n            )}\n            {/*\n              The slot stays in the tree whether or not it holds anything: a\n              slot that is not rendered never fires `slotchange`, so a body\n              added later would stay invisible for good.\n            */}\n            <div class={{ body: true, empty: !hasBody }} part=\"body\">\n              <slot onSlotchange={() => this.readBody()}>{this.description}</slot>\n            </div>\n          </div>\n\n          {this.dismissible && (\n            <button\n              type=\"button\"\n              class=\"dismiss\"\n              part=\"dismiss\"\n              aria-label={this.dismissLabel}\n              onClick={() => this.dismiss()}\n            >\n              <pf-icon name=\"circle-xmark\" aria-hidden=\"true\"></pf-icon>\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qLAAA,MAAMA,EAAa,IAAM,g4D,MC8CZC,EAAOC,EAAA,MAAAD,UAAAE,E,yIAIOC,QAA0B,OAE3CC,QAGAC,YAGiBC,YAAc,MAG/BC,aAAe,gBAGdC,UAGAC,QAAU,MAGVC,eAAiB,MAG1B,iBAAAC,GACEC,KAAKC,U,CAcP,aAAMC,GACJ,GAAIF,KAAKH,QAAS,OAClBG,KAAKH,QAAU,WAETM,EAAmBH,KAAKI,GAAGC,YAAYC,cAAc,WAC3DN,KAAKJ,UAAUW,M,CAGT,QAAAN,GACND,KAAKF,eAAiBU,MAAMC,KAAKT,KAAKI,GAAGM,YAAYC,MAAMC,GACzDA,EAAKC,WAAaC,KAAKC,cACjBH,EAAiBI,aAAa,QAChCC,QAAQL,EAAKM,aAAaC,S,CAIlC,MAAAC,GACE,MAAMC,EAAUrB,KAAKF,gBAAkBmB,QAAQjB,KAAKP,aAEpD,OACE6B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAEC,MAAO,KAAM,iBAAkB1B,KAAKH,SAC7C8B,KAAK,QACLC,KAAMC,EAAe7B,KAAKT,UAE1B+B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,OAAOE,KAAK,OAAM,cAAa,QACzCL,EAAA,QAAAE,IAAA,2CAAMM,KAAK,QACTR,EAAA,WAAAE,IAAA,2CAASM,KAAMC,EAAiB/B,KAAKT,aAIzC+B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACRzB,KAAKR,SACJ8B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQE,KAAK,SACnB3B,KAAKR,SAQV8B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEO,KAAM,KAAMC,OAAQZ,GAAWM,KAAK,QAChDL,EAAA,QAAAE,IAAA,2CAAMU,aAAc,IAAMlC,KAAKC,YAAaD,KAAKP,eAIpDO,KAAKN,aACJ4B,EAAA,UAAAE,IAAA,2CACEW,KAAK,SACLV,MAAM,UACNE,KAAK,UAAS,aACF3B,KAAKL,aACjByC,QAAS,IAAMpC,KAAKE,WAEpBoB,EAAA,WAAAE,IAAA,2CAASM,KAAK,eAAc,cAAa,W","ignoreList":[]}

package/dist/components/pf-avatar-group.d.ts

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

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

@@ -0,0 +1,2 @@
+import{t,p as a,H as e,h as o,a as r}from"./index.js";import{d as s}from"./p-ClI1g7kx.js";function n(t,a,e){const o=Number.isFinite(t)?Math.max(Math.floor(t),0):0;const r=Math.min(o,Number.isFinite(a)?Math.max(Math.floor(a),0):0);const s=e!==void 0&&Number.isFinite(e)?Math.max(Math.floor(e),0):o;return{shown:r,overflow:Math.max(s-r,0),total:s}}function i(t){const a=Number.isFinite(t)?Math.max(Math.floor(t),0):0;return`${a} ${a===1?"person":"people"}`}const l=()=>`:host{--pf-avatar-group-overlap:8px;align-items:center;display:inline-flex}:host([hidden]){display:none}:host([size='lg']),:host([size='xl']){--pf-avatar-group-overlap:12px}::slotted(pf-avatar),.overflow{box-shadow:0 0 0 2px var(--pf-avatar-group-ring);position:relative}::slotted(pf-avatar:not(:first-child)),.overflow{margin-inline-start:calc(-1 * var(--pf-avatar-group-overlap))}::slotted(pf-avatar[data-pf-overflow]){display:none}.overflow{--pf-avatar-bg:var(--pf-avatar-group-overflow-bg);--pf-avatar-text:var(--pf-avatar-group-overflow-text)}`;const f=a(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}max=5;size="md";total;label;overflow=0;counted=0;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleStateChange(){this.sync()}async refresh(){this.sync()}get avatars(){return Array.from(this.el.querySelectorAll("pf-avatar")).filter((t=>t.parentElement===this.el))}sync(){const t=this.avatars;const a=n(t.length,Number(this.max),this.total);for(const[e,o]of t.entries()){o.size=this.size;if(e<a.shown)o.removeAttribute("data-pf-overflow");else o.setAttribute("data-pf-overflow","");o.style.zIndex=e<a.shown?`${a.shown-e}`:""}this.overflow=a.overflow;this.counted=a.total}render(){return o(r,{key:"42ec24fb2307fda7fee46622cab9cd04fd33626d",role:"group","aria-label":this.label??i(this.counted)},o("slot",{key:"774448c455e6aa400b050fde75831f1c9e66ac95",onSlotchange:()=>this.refresh()}),this.overflow>0&&o("pf-avatar",{key:"fee71535c6973de304a38761fb8db8ddb5734e3e",class:"overflow",part:"overflow",size:this.size,name:`${this.overflow} more`},"+",this.overflow))}static get watchers(){return{max:[{handleStateChange:0}],size:[{handleStateChange:0}],total:[{handleStateChange:0}]}}static get style(){return l()}},[769,"pf-avatar-group",{max:[2],size:[513],total:[2],label:[1],overflow:[32],counted:[32],refresh:[64]},undefined,{max:[{handleStateChange:0}],size:[{handleStateChange:0}],total:[{handleStateChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const a=["pf-avatar-group","pf-avatar"];a.forEach((a=>{switch(a){case"pf-avatar-group":if(!customElements.get(t(a))){customElements.define(t(a),f)}break;case"pf-avatar":if(!customElements.get(t(a))){s()}break}}))}h();const p=f;const c=h;export{p as PfAvatarGroup,c as defineCustomElement};
+//# sourceMappingURL=pf-avatar-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["splitAvatarGroup","count","max","total","safeCount","Number","isFinite","Math","floor","shown","min","resolvedTotal","overflow","avatarGroupLabel","safeTotal","pfAvatarGroupCss","PfAvatarGroup","__stencil_proxyCustomElement","HTMLElement","size","label","counted","componentWillLoad","this","sync","componentDidLoad","handleStateChange","refresh","avatars","Array","from","el","querySelectorAll","filter","avatar","parentElement","split","length","index","entries","removeAttribute","setAttribute","style","zIndex","render","h","Host","key","role","onSlotchange","class","part","name"],"sources":["../core/dist/avatar-group.js","src/components/pf-avatar-group/pf-avatar-group.css?tag=pf-avatar-group&encapsulation=shadow","src/components/pf-avatar-group/pf-avatar-group.tsx"],"sourcesContent":["//#region src/avatar-group.ts\n/**\n* Splits `count` avatars into the ones shown and the overflow.\n*\n* `total` is for a group that knows how many people there are without being\n* handed an avatar for each — \"5 of 40\" shows five faces and `+35`. Without\n* it the count is simply how many avatars there are.\n*\n* A negative or fractional `max` cannot produce a negative row: it floors at\n* zero, which shows the chip alone.\n*/\nfunction splitAvatarGroup(count, max, total) {\n\tconst safeCount = Number.isFinite(count) ? Math.max(Math.floor(count), 0) : 0;\n\tconst shown = Math.min(safeCount, Number.isFinite(max) ? Math.max(Math.floor(max), 0) : 0);\n\tconst resolvedTotal = total !== void 0 && Number.isFinite(total) ? Math.max(Math.floor(total), 0) : safeCount;\n\treturn {\n\t\tshown,\n\t\toverflow: Math.max(resolvedTotal - shown, 0),\n\t\ttotal: resolvedTotal\n\t};\n}\n/**\n* What an unnamed avatar group is called: \"1 person\", \"4 people\".\n*\n* Here rather than in either layer because it is the group's accessible name,\n* and a group that announced itself differently in the two layers would be a\n* different control to a screen reader.\n*/\nfunction avatarGroupLabel(total) {\n\tconst safeTotal = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;\n\treturn `${safeTotal} ${safeTotal === 1 ? \"person\" : \"people\"}`;\n}\n//#endregion\nexport { avatarGroupLabel, splitAvatarGroup };\n",":host {\n  /* How far each avatar laps over the one before it. */\n  --pf-avatar-group-overlap: 8px;\n  align-items: center;\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='lg']),\n:host([size='xl']) {\n  --pf-avatar-group-overlap: 12px;\n}\n\n/*\n * The ring is drawn in the surface colour, so overlapping avatars stay\n * separated. `position: relative` is what makes the z-index the group writes\n * on each avatar mean anything.\n */\n::slotted(pf-avatar),\n.overflow {\n  box-shadow: 0 0 0 2px var(--pf-avatar-group-ring);\n  position: relative;\n}\n\n/*\n * `:not(:first-child)` inside `::slotted()` rather than a sibling combinator:\n * the parens take a compound selector and no combinator, so `::slotted(a + a)`\n * cannot be written -- the same limit that keeps pf-accordion's rule in the\n * child. A pseudo-class is part of a compound selector, so this one is fine.\n */\n::slotted(pf-avatar:not(:first-child)),\n.overflow {\n  margin-inline-start: calc(-1 * var(--pf-avatar-group-overlap));\n}\n\n/*\n * Collapsed by the group. A data attribute of the group's own, so an avatar\n * the *consumer* hid with `hidden` is a separate thing and still works.\n */\n::slotted(pf-avatar[data-pf-overflow]) {\n  display: none;\n}\n\n/*\n * The chip's colours go through the properties pf-avatar already reads, which\n * inherit through the shadow boundary -- the pf-option bridge again, and the\n * way to colour a nested element without reaching into its shadow root.\n */\n.overflow {\n  --pf-avatar-bg: var(--pf-avatar-group-overflow-bg);\n  --pf-avatar-text: var(--pf-avatar-group-overflow-text);\n}\n","import { avatarGroupLabel, splitAvatarGroup } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport type { PfAvatarSize } from '../pf-avatar/pf-avatar';\n\n/**\n * A stack of overlapping `pf-avatar` children, with a `+N` chip for the ones\n * that did not fit.\n *\n * Children rather than an array of people, as everywhere else — a consumer\n * loops in their own template, and each avatar keeps its own `src`, `name` and\n * `status`.\n *\n * The chip is a `pf-avatar` of its own, in the shadow root: it needs an\n * avatar's shape, size and ring, and reusing the element is how it gets them\n * without a second copy of all three. Its colours come through the\n * `--pf-avatar-*` properties the avatar already reads, which inherit through\n * the shadow boundary.\n *\n * @slot - the `pf-avatar` children.\n * @part overflow - the `+N` chip, when something did not fit.\n */\n@Component({\n  tag: 'pf-avatar-group',\n  styleUrl: 'pf-avatar-group.css',\n  shadow: true,\n})\nexport class PfAvatarGroup {\n  @Element() el!: HTMLElement;\n\n  /** How many avatars to show before collapsing the rest into the chip. */\n  @Prop() max = 5;\n\n  /** Applied to every avatar in the group. Reflected, and pushed down. */\n  @Prop({ reflect: true }) size: PfAvatarSize = 'md';\n\n  /**\n   * The group's real size, for a group that knows how many people there are\n   * without being handed an avatar for each: five faces and `+35`.\n   */\n  @Prop() total?: number;\n\n  /** Overrides the generated name, which counts the people in the group. */\n  @Prop() label?: string;\n\n  /** How many did not fit, which is what the chip says. */\n  @State() overflow = 0;\n\n  /** How many the group counts, which is what its name says. */\n  @State() counted = 0;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('max')\n  @Watch('size')\n  @Watch('total')\n  handleStateChange() {\n    this.sync();\n  }\n\n  /** Re-reads the children, for a consumer who changed one through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested group owns its own avatars. */\n  private get avatars(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-avatar')).filter(\n      (avatar) => avatar.parentElement === this.el,\n    );\n  }\n\n  private sync() {\n    const avatars = this.avatars;\n    const split = splitAvatarGroup(avatars.length, Number(this.max), this.total);\n\n    for (const [index, avatar] of avatars.entries()) {\n      (avatar as HTMLElement & { size: PfAvatarSize }).size = this.size;\n\n      /*\n       * A data attribute of the group's own rather than `hidden`: `hidden` is\n       * the consumer's to set, and overwriting it would lose an avatar they\n       * had hidden themselves. This says \"the group collapsed you\", which is\n       * a different thing, and the stylesheet selects on it.\n       */\n      if (index < split.shown) avatar.removeAttribute('data-pf-overflow');\n      else avatar.setAttribute('data-pf-overflow', '');\n\n      // Earlier avatars stack above later ones, and the chip sits under all\n      // of them -- so the overlap reads as a stack rather than a ribbon.\n      avatar.style.zIndex = index < split.shown ? `${split.shown - index}` : '';\n    }\n\n    this.overflow = split.overflow;\n    this.counted = split.total;\n  }\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.label ?? avatarGroupLabel(this.counted)}>\n        <slot onSlotchange={() => this.refresh()} />\n        {this.overflow > 0 && (\n          <pf-avatar\n            class=\"overflow\"\n            part=\"overflow\"\n            size={this.size}\n            name={`${this.overflow} more`}\n          >\n            +{this.overflow}\n          </pf-avatar>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"0FAWA,SAASA,EAAiBC,EAAOC,EAAKC,GACrC,MAAMC,EAAYC,OAAOC,SAASL,GAASM,KAAKL,IAAIK,KAAKC,MAAMP,GAAQ,GAAK,EAC5E,MAAMQ,EAAQF,KAAKG,IAAIN,EAAWC,OAAOC,SAASJ,GAAOK,KAAKL,IAAIK,KAAKC,MAAMN,GAAM,GAAK,GACxF,MAAMS,EAAgBR,SAAU,GAAUE,OAAOC,SAASH,GAASI,KAAKL,IAAIK,KAAKC,MAAML,GAAQ,GAAKC,EACpG,MAAO,CACNK,QACAG,SAAUL,KAAKL,IAAIS,EAAgBF,EAAO,GAC1CN,MAAOQ,EAET,CAQA,SAASE,EAAiBV,GACzB,MAAMW,EAAYT,OAAOC,SAASH,GAASI,KAAKL,IAAIK,KAAKC,MAAML,GAAQ,GAAK,EAC5E,MAAO,GAAGW,KAAaA,IAAc,EAAI,SAAW,UACrD,CC/BA,MAAMC,EAAmB,IAAM,uiB,MC2BlBC,EAAaC,EAAA,MAAAD,UAAAE,E,sGAIhBhB,IAAM,EAGWiB,KAAqB,KAMtChB,MAGAiB,MAGCR,SAAW,EAGXS,QAAU,EAGnB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAMP,iBAAAE,GACEH,KAAKC,M,CAKP,aAAMG,GACJJ,KAAKC,M,CAIP,WAAYI,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,cAAcC,QACnEC,GAAWA,EAAOC,gBAAkBZ,KAAKQ,I,CAItC,IAAAP,GACN,MAAMI,EAAUL,KAAKK,QACrB,MAAMQ,EAAQpC,EAAiB4B,EAAQS,OAAQhC,OAAOkB,KAAKrB,KAAMqB,KAAKpB,OAEtE,IAAK,MAAOmC,EAAOJ,KAAWN,EAAQW,UAAW,CAC9CL,EAAgDf,KAAOI,KAAKJ,KAQ7D,GAAImB,EAAQF,EAAM3B,MAAOyB,EAAOM,gBAAgB,yBAC3CN,EAAOO,aAAa,mBAAoB,IAI7CP,EAAOQ,MAAMC,OAASL,EAAQF,EAAM3B,MAAQ,GAAG2B,EAAM3B,MAAQ6B,IAAU,E,CAGzEf,KAAKX,SAAWwB,EAAMxB,SACtBW,KAAKF,QAAUe,EAAMjC,K,CAGvB,MAAAyC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,QAAO,aAAazB,KAAKH,OAASP,EAAiBU,KAAKF,UACjEwB,EAAA,QAAAE,IAAA,2CAAME,aAAc,IAAM1B,KAAKI,YAC9BJ,KAAKX,SAAW,GACfiC,EAAA,aAAAE,IAAA,2CACEG,MAAM,WACNC,KAAK,WACLhC,KAAMI,KAAKJ,KACXiC,KAAM,GAAG7B,KAAKX,iBAAe,IAE3BW,KAAKX,U","ignoreList":[]}

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

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

package/dist/components/pf-avatar.js

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

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

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

package/dist/components/pf-badge-group.d.ts

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

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

@@ -0,0 +1,2 @@
+import{t as r,p as a,H as e,h as o,a as d}from"./index.js";const g=()=>`:host{align-items:center;display:inline-flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1}:host([hidden]){display:none}.badge,.text{border:1px solid;display:inline-flex;min-height:24px;padding:0 var(--space-2);white-space:nowrap}.badge{align-items:center;border-radius:var(--radius-full);z-index:1}.text{align-items:center}:host([badge-position='leading']) .text{border-radius:0 var(--radius-full) var(--radius-full) 0;margin-inline-start:-1px;padding-inline-start:calc(var(--space-2) + 2px)}:host([badge-position='leading']) .badge{border-radius:var(--radius-full) 0 0 var(--radius-full)}:host([badge-position='trailing']) .text{border-radius:var(--radius-full) 0 0 var(--radius-full);margin-inline-end:-1px;padding-inline-end:calc(var(--space-2) + 2px)}:host([badge-position='trailing']) .badge{border-radius:0 var(--radius-full) var(--radius-full) 0}:host([color='gray']) .badge{background:var(--pf-badgegroup-gray-100);border-color:var(--pf-badgegroup-gray-200);color:var(--pf-badgegroup-gray-700)}:host([color='brand']) .badge{background:var(--pf-badgegroup-brand-100);border-color:var(--pf-badgegroup-brand-300);color:var(--pf-badgegroup-brand-700)}:host([color='error']) .badge{background:var(--pf-badgegroup-danger-bg);border-color:var(--pf-badgegroup-danger-border);color:var(--pf-badgegroup-danger-text)}:host([color='warning']) .badge{background:var(--pf-badgegroup-warning-bg);border-color:var(--pf-badgegroup-warning-border);color:var(--pf-badgegroup-warning-text)}:host([color='success']) .badge{background:var(--pf-badgegroup-success-bg);border-color:var(--pf-badgegroup-success-border);color:var(--pf-badgegroup-success-text)}:host([appearance='pill']) .text{background:var(--pf-badgegroup-surface-bg, var(--pf-surface-bg))}:host([appearance='modern']) .text{background:var(--pf-badgegroup-surface-subtle, var(--pf-surface-subtle))}:host([color='gray']) .text{border-color:var(--pf-badgegroup-gray-200);color:var(--pf-badgegroup-gray-700)}:host([color='brand']) .text{border-color:var(--pf-badgegroup-brand-300);color:var(--pf-badgegroup-brand-700)}:host([color='error']) .text{border-color:var(--pf-badgegroup-danger-border);color:var(--pf-badgegroup-danger-text)}:host([color='warning']) .text{border-color:var(--pf-badgegroup-warning-border);color:var(--pf-badgegroup-warning-text)}:host([color='success']) .text{border-color:var(--pf-badgegroup-success-border);color:var(--pf-badgegroup-success-text)}`;const s=a(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow()}label="";message="";color="gray";appearance="pill";badgePosition="leading";render(){const r=o("span",{key:"decc69e468385f59c798b7b5fc542fd9f0fc76be",class:"badge",part:"badge"},this.label);const a=o("span",{key:"944cbbd02fab9c6cc3c344464a55bc2f0d5c2082",class:"text",part:"text"},this.message);return o(d,{key:"cdb8ab25262ced71a32ad6de49f3eab4e3daab6a"},this.badgePosition==="leading"?[r,a]:[a,r])}static get style(){return g()}},[513,"pf-badge-group",{label:[1],message:[1],color:[513],appearance:[513],badgePosition:[513,"badge-position"]}]);function t(){if(typeof customElements==="undefined"){return}const a=["pf-badge-group"];a.forEach((a=>{switch(a){case"pf-badge-group":if(!customElements.get(r(a))){customElements.define(r(a),s)}break}}))}t();const n=s;const b=t;export{n as PfBadgeGroup,b as defineCustomElement};
+//# sourceMappingURL=pf-badge-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfBadgeGroupCss","PfBadgeGroup","__stencil_proxyCustomElement","HTMLElement","label","message","color","appearance","badgePosition","render","badge","h","key","class","part","this","text","Host"],"sources":["src/components/pf-badge-group/pf-badge-group.css?tag=pf-badge-group&encapsulation=shadow","src/components/pf-badge-group/pf-badge-group.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: inline-flex;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: 1;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.badge,\n.text {\n  border: 1px solid;\n  display: inline-flex;\n  min-height: 24px;\n  padding: 0 var(--space-2);\n  white-space: nowrap;\n}\n\n.badge {\n  align-items: center;\n  border-radius: var(--radius-full);\n  /* Above the text, so the shared edge shows the badge's border, not both. */\n  z-index: 1;\n}\n\n.text {\n  align-items: center;\n}\n\n/*\n * The two halves overlap by a pixel so their borders coincide into one line,\n * and the inner padding gains that pixel back so the text is not pulled\n * off-centre.\n */\n:host([badge-position='leading']) .text {\n  border-radius: 0 var(--radius-full) var(--radius-full) 0;\n  margin-inline-start: -1px;\n  padding-inline-start: calc(var(--space-2) + 2px);\n}\n\n:host([badge-position='leading']) .badge {\n  border-radius: var(--radius-full) 0 0 var(--radius-full);\n}\n\n:host([badge-position='trailing']) .text {\n  border-radius: var(--radius-full) 0 0 var(--radius-full);\n  margin-inline-end: -1px;\n  padding-inline-end: calc(var(--space-2) + 2px);\n}\n\n:host([badge-position='trailing']) .badge {\n  border-radius: 0 var(--radius-full) var(--radius-full) 0;\n}\n\n:host([color='gray']) .badge {\n  background: var(--pf-badgegroup-gray-100);\n  border-color: var(--pf-badgegroup-gray-200);\n  color: var(--pf-badgegroup-gray-700);\n}\n\n:host([color='brand']) .badge {\n  background: var(--pf-badgegroup-brand-100);\n  border-color: var(--pf-badgegroup-brand-300);\n  color: var(--pf-badgegroup-brand-700);\n}\n\n:host([color='error']) .badge {\n  background: var(--pf-badgegroup-danger-bg);\n  border-color: var(--pf-badgegroup-danger-border);\n  color: var(--pf-badgegroup-danger-text);\n}\n\n:host([color='warning']) .badge {\n  background: var(--pf-badgegroup-warning-bg);\n  border-color: var(--pf-badgegroup-warning-border);\n  color: var(--pf-badgegroup-warning-text);\n}\n\n:host([color='success']) .badge {\n  background: var(--pf-badgegroup-success-bg);\n  border-color: var(--pf-badgegroup-success-border);\n  color: var(--pf-badgegroup-success-text);\n}\n\n:host([appearance='pill']) .text {\n  background: var(--pf-badgegroup-surface-bg, var(--pf-surface-bg));\n}\n\n:host([appearance='modern']) .text {\n  background: var(--pf-badgegroup-surface-subtle, var(--pf-surface-subtle));\n}\n\n:host([color='gray']) .text {\n  border-color: var(--pf-badgegroup-gray-200);\n  color: var(--pf-badgegroup-gray-700);\n}\n\n:host([color='brand']) .text {\n  border-color: var(--pf-badgegroup-brand-300);\n  color: var(--pf-badgegroup-brand-700);\n}\n\n:host([color='error']) .text {\n  border-color: var(--pf-badgegroup-danger-border);\n  color: var(--pf-badgegroup-danger-text);\n}\n\n:host([color='warning']) .text {\n  border-color: var(--pf-badgegroup-warning-border);\n  color: var(--pf-badgegroup-warning-text);\n}\n\n:host([color='success']) .text {\n  border-color: var(--pf-badgegroup-success-border);\n  color: var(--pf-badgegroup-success-text);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfBadgeGroupColor = 'gray' | 'brand' | 'error' | 'warning' | 'success';\nexport type PfBadgeGroupAppearance = 'pill' | 'modern';\nexport type PfBadgeGroupBadgePosition = 'leading' | 'trailing';\n\n/**\n * A badge joined to a line of text, sharing one rounded outline — the\n * \"2 new · See what's changed\" pattern.\n *\n * @part badge - the coloured badge.\n * @part text - the message beside it.\n */\n@Component({\n  tag: 'pf-badge-group',\n  styleUrl: 'pf-badge-group.css',\n  shadow: true,\n})\nexport class PfBadgeGroup {\n  /** The badge's text. */\n  @Prop() label = '';\n\n  /** The message beside the badge. */\n  @Prop() message = '';\n\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) color: PfBadgeGroupColor = 'gray';\n\n  /** Surface treatment for the message. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) appearance: PfBadgeGroupAppearance = 'pill';\n\n  /** Which side the badge sits on. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) badgePosition: PfBadgeGroupBadgePosition = 'leading';\n\n  render() {\n    const badge = (\n      <span class=\"badge\" part=\"badge\">\n        {this.label}\n      </span>\n    );\n    const text = (\n      <span class=\"text\" part=\"text\">\n        {this.message}\n      </span>\n    );\n\n    /*\n     * Ordered in the DOM rather than reversed with `flex-direction`, so a\n     * screen reader reads the badge and the message in the order they appear.\n     */\n    return <Host>{this.badgePosition === 'leading' ? [badge, text] : [text, badge]}</Host>;\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAkB,IAAM,65E,MCkBjBC,EAAYC,EAAA,MAAAD,UAAAE,E,iFAEfC,MAAQ,GAGRC,QAAU,GAGOC,MAA2B,OAG3BC,WAAqC,OAGrCC,cAA2C,UAEpE,MAAAC,GACE,MAAMC,EACJC,EAAA,QAAAC,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SACtBC,KAAKX,OAGV,MAAMY,EACJL,EAAA,QAAAC,IAAA,2CAAMC,MAAM,OAAOC,KAAK,QACrBC,KAAKV,SAQV,OAAOM,EAACM,EAAI,CAAAL,IAAA,4CAAEG,KAAKP,gBAAkB,UAAY,CAACE,EAAOM,GAAQ,CAACA,EAAMN,G","ignoreList":[]}

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

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

package/dist/components/pf-badge.js

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,h as a,a as n}from"./index.js";import{c as i,n as r,b as l,C as o,p as c,a as d,d as h,f as p,e as f}from"./p-CmX-kVk-.js";const g=()=>`:host{display:flex;flex-direction:column;gap:var(--space-3);width:100%}:host([hidden]){display:none}.svg{display:block;height:auto;overflow:visible;width:100%}.empty{align-items:center;color:var(--pf-chart-text-muted);display:flex;font-size:var(--font-size-sm);height:120px;justify-content:center}.grid{stroke:var(--pf-chart-grid);stroke-width:1}.tick{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs)}.tick--y{dominant-baseline:middle;text-anchor:end}.tick--x{dominant-baseline:hanging;text-anchor:middle}.axis-label{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs);text-anchor:middle}.bar{transition:opacity 80ms ease}.bar:hover{opacity:0.75}.legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;margin:0;padding:0;padding-inline-start:var(--pf-chart-plot-inset-left, 0)}.legend.legend--hidden{display:none}.legend slot{display:contents}@media (prefers-reduced-motion: reduce){.bar{transition:none}}`;const u=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}data=[];stacked=false;showLegend=true;yAxisLabel;label;series=[];componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}async refresh(){this.sync()}get seriesElements(){return Array.from(this.el.children).filter((t=>t.tagName.toLowerCase()==="pf-chart-series"))}get rows(){const t=this.data;if(Array.isArray(t))return t;try{const e=JSON.parse(String(t||"[]"));return Array.isArray(e)?e:[]}catch{return[]}}sync(){this.series=this.seriesElements.map(((t,e)=>{const s=t;const a=i(e,s.color??t.getAttribute("color")??undefined);t.swatch=a;return{key:s.seriesKey??t.getAttribute("series-key")??"",color:a}}))}render(){const t=this.rows;const e=this.series;if(t.length===0||e.length===0){return a(n,null,a("div",{class:"empty",part:"empty"},a("slot",{name:"empty"},"No data")),a("ul",{class:"legend legend--hidden",part:"legend"},a("slot",{onSlotchange:()=>this.refresh()})))}const s=(t,e)=>Math.max(0,Number(t[e]??0)||0);const i=this.stacked?t.map((t=>e.reduce(((e,a)=>e+s(t,a.key)),0))):e.flatMap((e=>t.map((t=>s(t,e.key)))));const g=r(Math.max(0,...i));const u=g[g.length-1];const y=l(t.length,e.length,this.stacked);const m=f(t.length);const x=d.top+h.height;return a(n,{style:{"--pf-chart-plot-inset-left":`${d.left/o.width*100}%`}},a("svg",{class:"svg",part:"svg",viewBox:`0 0 ${o.width} ${o.height}`,role:"img","aria-label":this.label??this.yAxisLabel??"Bar chart"},g.map((t=>{const e=c(t,u);return a("g",null,a("line",{class:"grid",part:"grid",x1:d.left,y1:e,x2:d.left+h.width,y2:e}),a("text",{class:"tick tick--y",part:"tick",x:d.left-8,y:e},p(t)))})),t.map(((t,e)=>e%m===0?a("text",{class:"tick tick--x",part:"tick",x:y.groupCenters[e],y:x+20},t.label):null)),this.yAxisLabel&&a("text",{class:"axis-label",x:-112,y:14,transform:"rotate(-90)"},this.yAxisLabel),t.map(((t,n)=>{let i=0;return a("g",null,e.map(((e,r)=>{const l=s(t,e.key);const o=l/(u>0?u:1)*h.height;const d=this.stacked?y.groupLefts[n]:y.groupLefts[n]+r*(y.barWidth+y.gap);const f=this.stacked?c(i+l,u):x-o;if(this.stacked)i+=l;return a("rect",{class:"bar",part:"bar",x:d,y:f,width:y.barWidth,height:o,rx:"2",fill:e.color},a("title",null,`${t.label} — ${e.key}: ${p(l)}`))})))}))),a("ul",{class:{legend:true,"legend--hidden":!this.showLegend||e.length<2},part:"legend"},a("slot",{onSlotchange:()=>this.refresh()})))}static get watchers(){return{data:[{sync:0}]}}static get style(){return g()}},[769,"pf-bar-chart",{data:[1],stacked:[516],showLegend:[516,"show-legend"],yAxisLabel:[1,"y-axis-label"],label:[1],series:[32],refresh:[64]},undefined,{data:[{sync:0}]}]);function y(){if(typeof customElements==="undefined"){return}const e=["pf-bar-chart"];e.forEach((e=>{switch(e){case"pf-bar-chart":if(!customElements.get(t(e))){customElements.define(t(e),u)}break}}))}y();const m=u;const x=y;export{m as PfBarChart,x as defineCustomElement};
+//# sourceMappingURL=pf-bar-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfBarChartCss","PfBarChart","__stencil_proxyCustomElement","HTMLElement","data","stacked","showLegend","yAxisLabel","label","series","componentWillLoad","this","sync","componentDidLoad","refresh","seriesElements","Array","from","el","children","filter","child","tagName","toLowerCase","rows","raw","isArray","parsed","JSON","parse","String","map","element","index","node","color","chartSeriesColor","getAttribute","undefined","swatch","key","seriesKey","render","length","h","Host","class","part","name","onSlotchange","valueAt","row","Math","max","Number","totals","reduce","sum","item","flatMap","ticks","niceAxisTicks","maxTick","geometry","barGeometry","labelStep","axisLabelStep","floor","CHART_PADDING","top","CHART_PLOT","height","style","left","CHART_VIEW","width","viewBox","role","tick","y","plotY","x1","y1","x2","y2","x","formatAxisTick","groupCenters","transform","groupIndex","base","seriesIndex","value","groupLefts","barWidth","gap","rx","fill","legend"],"sources":["src/components/pf-bar-chart/pf-bar-chart.css?tag=pf-bar-chart&encapsulation=shadow","src/components/pf-bar-chart/pf-bar-chart.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  display: block;\n  height: auto;\n  /* The y-axis label is drawn outside the plot, so the box must not clip. */\n  overflow: visible;\n  width: 100%;\n}\n\n.empty {\n  align-items: center;\n  color: var(--pf-chart-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  height: 120px;\n  justify-content: center;\n}\n\n.grid {\n  stroke: var(--pf-chart-grid);\n  stroke-width: 1;\n}\n\n.tick {\n  fill: var(--pf-chart-text-muted);\n  font-family: inherit;\n  font-size: var(--font-size-2xs);\n}\n\n.tick--y {\n  dominant-baseline: middle;\n  text-anchor: end;\n}\n\n.tick--x {\n  dominant-baseline: hanging;\n  text-anchor: middle;\n}\n\n.axis-label {\n  fill: var(--pf-chart-text-muted);\n  font-family: inherit;\n  font-size: var(--font-size-2xs);\n  text-anchor: middle;\n}\n\n.bar {\n  transition: opacity 80ms ease;\n}\n\n.bar:hover {\n  opacity: 0.75;\n}\n\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  list-style: none;\n  margin: 0;\n  /*\n   * Lines the legend's start edge up with the plot area: the SVG is inset by\n   * the y-axis gutter, and the inset is set inline from the chart's geometry.\n   */\n  padding: 0;\n  padding-inline-start: var(--pf-chart-plot-inset-left, 0);\n}\n\n/*\n * Hidden rather than dropped, so the series stay slotted and `slotchange`\n * still fires. Two classes deep, because the tie breaks on source order.\n */\n.legend.legend--hidden {\n  display: none;\n}\n\n/* The series are flex children of the list, not of a box inside it. */\n.legend slot {\n  display: contents;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bar {\n    transition: none;\n  }\n}\n","import {\n  CHART_PADDING,\n  CHART_PLOT,\n  CHART_VIEW,\n  axisLabelStep,\n  barGeometry,\n  chartSeriesColor,\n  formatAxisTick,\n  niceAxisTicks,\n  plotY,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { PfChartRow } from '../pf-line-chart/pf-line-chart';\n\n/**\n * A grouped or stacked bar chart over `pf-chart-series` children.\n *\n * The same split as `pf-line-chart`: the rows are bulk numbers in a property,\n * the series are named and coloured and live in the light DOM so the legend\n * can reach their labels.\n *\n * @slot - the `pf-chart-series` children.\n * @slot empty - what to show when there is nothing to draw.\n * @part svg - the drawing.\n * @part grid - one gridline.\n * @part tick - one axis label.\n * @part bar - one bar.\n * @part legend - the list the series are slotted into.\n * @part empty - the empty state's box.\n */\n@Component({\n  tag: 'pf-bar-chart',\n  styleUrl: 'pf-bar-chart.css',\n  shadow: true,\n})\nexport class PfBarChart {\n  @Element() el!: HTMLElement;\n\n  /** The rows to plot. An array, or JSON for plain HTML. */\n  @Prop() data: PfChartRow[] | string = [];\n\n  /** Stack each group's series rather than standing them side by side. */\n  @Prop({ reflect: true }) stacked = false;\n\n  @Prop({ reflect: true }) showLegend = true;\n\n  @Prop() yAxisLabel?: string;\n\n  @Prop() label?: string;\n\n  @State() series: { key: string; color: string }[] = [];\n\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only; named to avoid shadowing `Element.children`. */\n  private get seriesElements(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pf-chart-series',\n    ) as HTMLElement[];\n  }\n\n  private get rows(): PfChartRow[] {\n    const raw = this.data;\n    if (Array.isArray(raw)) return raw;\n\n    try {\n      const parsed = JSON.parse(String(raw || '[]'));\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n\n  @Watch('data')\n  sync() {\n    this.series = this.seriesElements.map((element, index) => {\n      const node = element as HTMLElement & { seriesKey?: string; color?: string };\n      const color = chartSeriesColor(\n        index,\n        node.color ?? element.getAttribute('color') ?? undefined,\n      );\n\n      (element as HTMLElement & { swatch: string }).swatch = color;\n\n      return { key: node.seriesKey ?? element.getAttribute('series-key') ?? '', color };\n    });\n  }\n\n  render() {\n    const rows = this.rows;\n    const series = this.series;\n\n    if (rows.length === 0 || series.length === 0) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n          <ul class=\"legend legend--hidden\" part=\"legend\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n        </Host>\n      );\n    }\n\n    /*\n     * Clamped here and nowhere else. A negative value must not pull a stack\n     * down, and it must not give a `<rect>` a negative `height` — which is\n     * an error the browser drops the element for. One clamp rather than two,\n     * so there is one thing to keep right.\n     */\n    const valueAt = (row: PfChartRow, key: string) => Math.max(0, Number(row[key] ?? 0) || 0);\n    /*\n     * A stacked chart's scale is the tallest *stack*, not the tallest bar —\n     * otherwise the top of the stack is drawn above the plot.\n     */\n    const totals = this.stacked\n      ? rows.map((row) => series.reduce((sum, item) => sum + valueAt(row, item.key), 0))\n      : series.flatMap((item) => rows.map((row) => valueAt(row, item.key)));\n\n    const ticks = niceAxisTicks(Math.max(0, ...totals));\n    const maxTick = ticks[ticks.length - 1];\n    const geometry = barGeometry(rows.length, series.length, this.stacked);\n    const labelStep = axisLabelStep(rows.length);\n    const floor = CHART_PADDING.top + CHART_PLOT.height;\n\n    return (\n      <Host\n        style={{\n          '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,\n        }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`}\n          role=\"img\"\n          aria-label={this.label ?? this.yAxisLabel ?? 'Bar chart'}\n        >\n          {ticks.map((tick) => {\n            const y = plotY(tick, maxTick);\n            return (\n              <g>\n                <line\n                  class=\"grid\"\n                  part=\"grid\"\n                  x1={CHART_PADDING.left}\n                  y1={y}\n                  x2={CHART_PADDING.left + CHART_PLOT.width}\n                  y2={y}\n                />\n                <text class=\"tick tick--y\" part=\"tick\" x={CHART_PADDING.left - 8} y={y}>\n                  {formatAxisTick(tick)}\n                </text>\n              </g>\n            );\n          })}\n\n          {rows.map((row, index) =>\n            index % labelStep === 0 ? (\n              <text\n                class=\"tick tick--x\"\n                part=\"tick\"\n                x={geometry.groupCenters[index]}\n                y={floor + 20}\n              >\n                {row.label}\n              </text>\n            ) : null,\n          )}\n\n          {this.yAxisLabel && (\n            <text\n              class=\"axis-label\"\n              x={-(CHART_PADDING.top + CHART_PLOT.height / 2)}\n              y={14}\n              transform=\"rotate(-90)\"\n            >\n              {this.yAxisLabel}\n            </text>\n          )}\n\n          {rows.map((row, groupIndex) => {\n            let base = 0;\n\n            return (\n              <g>\n                {series.map((item, seriesIndex) => {\n                  const value = valueAt(row, item.key);\n                  const height = (value / (maxTick > 0 ? maxTick : 1)) * CHART_PLOT.height;\n                  const x = this.stacked\n                    ? geometry.groupLefts[groupIndex]\n                    : geometry.groupLefts[groupIndex] +\n                      seriesIndex * (geometry.barWidth + geometry.gap);\n                  const y = this.stacked ? plotY(base + value, maxTick) : floor - height;\n\n                  if (this.stacked) base += value;\n\n                  return (\n                    <rect\n                      class=\"bar\"\n                      part=\"bar\"\n                      x={x}\n                      y={y}\n                      width={geometry.barWidth}\n                      height={height}\n                      rx=\"2\"\n                      fill={item.color}\n                    >\n                      <title>{`${row.label} — ${item.key}: ${formatAxisTick(value)}`}</title>\n                    </rect>\n                  );\n                })}\n              </g>\n            );\n          })}\n        </svg>\n\n        <ul\n          class={{ legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }}\n          part=\"legend\"\n        >\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/pf-breadcrumb.js

@@ -0,0 +1,2 @@
+import{t as e,p as r,H as t,h as a,a as s}from"./index.js";const n=()=>`:host{align-items:center;display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.link{color:var(--pf-breadcrumbs-link-color);font-size:var(--font-size-sm);line-height:1.4;text-decoration:none}a.link:hover{color:var(--pf-breadcrumbs-link-hover-color);text-decoration:underline}:host([current-page]) .link,.link[aria-current='page']{color:var(--pf-breadcrumbs-link-current-color);font-weight:var(--font-weight-medium);text-decoration:none}.separator{color:var(--pf-breadcrumbs-separator-color);display:inline-flex;font-size:var(--font-size-xs);line-height:1}`;const i=r(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}href;current=false;currentPage=false;last=false;separator="/";render(){const e=a("slot",{key:"9867775efe95a88c9d79894089761a835aec4a2c"});return a(s,{key:"ed743e2c769ac704621241b6c63857e0919d7386",role:"listitem"},this.href?a("a",{class:"link",part:"link",href:this.href,"aria-current":this.currentPage?"page":null},e):a("span",{class:"link",part:"link","aria-current":this.currentPage?"page":null},e),!this.last&&a("span",{key:"0bf16efee1d46f196bbf61555d05042b0bb8040d",class:"separator",part:"separator","aria-hidden":"true"},this.separator))}static get style(){return n()}},[769,"pf-breadcrumb",{href:[513],current:[516],currentPage:[1540,"current-page"],last:[1540],separator:[1025]}]);function o(){if(typeof customElements==="undefined"){return}const r=["pf-breadcrumb"];r.forEach((r=>{switch(r){case"pf-breadcrumb":if(!customElements.get(e(r))){customElements.define(e(r),i)}break}}))}o();const c=i;const l=o;export{c as PfBreadcrumb,l as defineCustomElement};
+//# sourceMappingURL=pf-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfBreadcrumbCss","PfBreadcrumb","__stencil_proxyCustomElement","HTMLElement","href","current","currentPage","last","separator","render","label","h","key","Host","role","this","class","part"],"sources":["src/components/pf-breadcrumb/pf-breadcrumb.css?tag=pf-breadcrumb&encapsulation=shadow","src/components/pf-breadcrumb/pf-breadcrumb.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.link {\n  color: var(--pf-breadcrumbs-link-color);\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  text-decoration: none;\n}\n\na.link:hover {\n  color: var(--pf-breadcrumbs-link-hover-color);\n  text-decoration: underline;\n}\n\n/*\n * `current-page` is the group's answer, not the consumer's `current` ask --\n * a trail where nothing was marked has a current page all the same, and this\n * is the attribute that says which.\n */\n:host([current-page]) .link,\n.link[aria-current='page'] {\n  color: var(--pf-breadcrumbs-link-current-color);\n  font-weight: var(--font-weight-medium);\n  text-decoration: none;\n}\n\n.separator {\n  color: var(--pf-breadcrumbs-separator-color);\n  display: inline-flex;\n  font-size: var(--font-size-xs);\n  line-height: 1;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One crumb in a `pf-breadcrumbs` trail.\n *\n * With an `href` it renders a link; without one it renders a plain span, which\n * is both what a current page wants and the way to use a framework's own\n * router — slot an `<a routerLink>` or a `<Link>` in and leave `href` unset.\n *\n * `currentPage`, `last` and `separator` are the group's to set: only it can\n * see the trail. A consumer asks by setting `current`; the group resolves the\n * trail with core's rule and writes the answer to `currentPage`.\n *\n * @slot - the crumb's label.\n * @part link - the link, or the span standing in for one.\n * @part separator - the separator after this crumb. Absent on the last.\n */\n@Component({\n  tag: 'pf-breadcrumb',\n  styleUrl: 'pf-breadcrumb.css',\n  shadow: true,\n})\nexport class PfBreadcrumb {\n  /** Where the crumb goes. Reflected; a consumer's stylesheet reads it. */\n  @Prop({ reflect: true }) href?: string;\n\n  /**\n   * Set it to mark this crumb as the current page, rather than letting the\n   * last crumb be it.\n   *\n   * This is the *asking* half, and the group never writes it — `currentPage`\n   * below is the answer. Keeping the two apart is what lets the trail change:\n   * if the group wrote its answer back here, the crumb that happened to be\n   * last would look like a crumb the consumer had marked, and appending\n   * another would leave the mark behind on it.\n   */\n  @Prop({ reflect: true }) current = false;\n\n  /**\n   * Set by the group: the resolved current page, which is the one thing that\n   * renders `aria-current=\"page\"`. Exactly one crumb in a trail carries it.\n   */\n  @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n  /** Set by the group: no separator is drawn after the last crumb. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** Set by the group from its own `separator`. */\n  @Prop({ mutable: true }) separator = '/';\n\n  render() {\n    const label = <slot />;\n\n    return (\n      <Host role=\"listitem\">\n        {this.href ? (\n          <a\n            class=\"link\"\n            part=\"link\"\n            href={this.href}\n            aria-current={this.currentPage ? 'page' : null}\n          >\n            {label}\n          </a>\n        ) : (\n          <span class=\"link\" part=\"link\" aria-current={this.currentPage ? 'page' : null}>\n            {label}\n          </span>\n        )}\n        {!this.last && (\n          <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">\n            {this.separator}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAkB,IAAM,4jB,MCsBjBC,EAAYC,EAAA,MAAAD,UAAAE,E,iFAEEC,KAYAC,QAAU,MAMKC,YAAc,MAGdC,KAAO,MAGtBC,UAAY,IAErC,MAAAC,GACE,MAAMC,EAAQC,EAAA,QAAAC,IAAA,6CAEd,OACED,EAACE,EAAI,CAAAD,IAAA,2CAACE,KAAK,YACRC,KAAKX,KACJO,EAAA,KACEK,MAAM,OACNC,KAAK,OACLb,KAAMW,KAAKX,KAAI,eACDW,KAAKT,YAAc,OAAS,MAEzCI,GAGHC,EAAA,QAAMK,MAAM,OAAOC,KAAK,OAAM,eAAeF,KAAKT,YAAc,OAAS,MACtEI,IAGHK,KAAKR,MACLI,EAAA,QAAAC,IAAA,2CAAMI,MAAM,YAAYC,KAAK,YAAW,cAAa,QAClDF,KAAKP,W","ignoreList":[]}

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

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

package/dist/components/pf-breadcrumbs.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,h as a,a as r}from"./index.js";function n(t){const e=t.findIndex((t=>t.current));if(e>=0)return e;return t.length-1}const c=()=>`:host{display:block;width:100%}:host([hidden]){display:none}.list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}.list slot{display:contents}`;const o=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}label="Breadcrumb";separator="/";componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleSeparatorChange(){this.sync()}async refresh(){this.sync()}get crumbs(){return Array.from(this.el.querySelectorAll("pf-breadcrumb")).filter((t=>t.parentElement===this.el))}isCurrent(t){return t.current??t.hasAttribute("current")}sync(){const t=this.crumbs;const e=n(t.map((t=>({current:this.isCurrent(t)}))));for(const[s,a]of t.entries()){const r=a;r.currentPage=s===e;r.last=s===t.length-1;r.separator=this.separator}}render(){return a(r,{key:"ba6aac87bd5f235035ea7d15cc7be4a400dd4882",role:"navigation","aria-label":this.label},a("ol",{key:"fdca023c17af41cba5fa4009de9b0972abf770ab",class:"list",part:"list"},a("slot",{key:"cd8e5645f012b2db1ac6b22fe90d49c7794064f3",onSlotchange:()=>this.refresh()})))}static get watchers(){return{separator:[{handleSeparatorChange:0}]}}static get style(){return c()}},[769,"pf-breadcrumbs",{label:[1],separator:[1],refresh:[64]},undefined,{separator:[{handleSeparatorChange:0}]}]);function i(){if(typeof customElements==="undefined"){return}const e=["pf-breadcrumbs"];e.forEach((e=>{switch(e){case"pf-breadcrumbs":if(!customElements.get(t(e))){customElements.define(t(e),o)}break}}))}i();const l=o;const d=i;export{l as PfBreadcrumbs,d as defineCustomElement};
+//# sourceMappingURL=pf-breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["resolveCurrentCrumb","crumbs","explicit","findIndex","crumb","current","length","pfBreadcrumbsCss","PfBreadcrumbs","__stencil_proxyCustomElement","HTMLElement","label","separator","componentWillLoad","this","sync","componentDidLoad","handleSeparatorChange","refresh","Array","from","el","querySelectorAll","filter","parentElement","isCurrent","hasAttribute","currentIndex","map","index","entries","node","currentPage","last","render","h","Host","key","role","class","part","onSlotchange"],"sources":["../core/dist/breadcrumbs.js","src/components/pf-breadcrumbs/pf-breadcrumbs.css?tag=pf-breadcrumbs&encapsulation=shadow","src/components/pf-breadcrumbs/pf-breadcrumbs.tsx"],"sourcesContent":["//#region src/breadcrumbs.ts\n/**\n* The index of the current crumb: the first one marked `current`, or the last\n* crumb when none is. `-1` for an empty trail.\n*\n* One index rather than a per-crumb answer, because that is what stops a trail\n* marking two pages. The React `Breadcrumbs` read `item.current ?? isLast` per\n* item, which marked both the explicitly-current crumb *and* the last one as\n* soon as a consumer marked anything but the last — so a screen reader was\n* told the user was on two pages at once.\n*/\nfunction resolveCurrentCrumb(crumbs) {\n\tconst explicit = crumbs.findIndex((crumb) => crumb.current);\n\tif (explicit >= 0) return explicit;\n\treturn crumbs.length - 1;\n}\n//#endregion\nexport { resolveCurrentCrumb };\n",":host {\n  display: block;\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.list {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * The crumbs have to be flex items of the list, not of a box inside it. The UA\n * stylesheet already gives a slot `display: contents`, and this says so out\n * loud -- the same thing pf-calendar needs for a semantic row in a grid.\n */\n.list slot {\n  display: contents;\n}\n","import { resolveCurrentCrumb } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';\n\n/**\n * A breadcrumb trail over `pf-breadcrumb` children.\n *\n * The group owns the two things a crumb cannot know on its own: which crumb is\n * the current page, and which one is last — so only the last goes without a\n * separator after it.\n *\n * The separator is a **string**, where the React `separator` is a\n * `ReactNode`, because it has to appear between every pair: a slot renders its\n * assigned content once and in one place, so there is no way to repeat\n * slotted content down the trail. Each crumb draws its own instead, which is\n * why the group pushes the string down.\n *\n * @slot - the `pf-breadcrumb` children.\n * @part list - the ordered list the crumbs are slotted into.\n */\n@Component({\n  tag: 'pf-breadcrumbs',\n  styleUrl: 'pf-breadcrumbs.css',\n  shadow: true,\n})\nexport class PfBreadcrumbs {\n  @Element() el!: HTMLElement;\n\n  /** The trail's accessible name. */\n  @Prop() label = 'Breadcrumb';\n\n  /** Drawn after every crumb but the last. */\n  @Prop() separator = '/';\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('separator')\n  handleSeparatorChange() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the children, for a consumer who marked a crumb current through\n   * its *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested trail owns its own crumbs. */\n  private get crumbs(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-breadcrumb')).filter(\n      (crumb) => crumb.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the crumb has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(crumb: HTMLElement) {\n    return (crumb as HTMLElement & { current?: boolean }).current ?? crumb.hasAttribute('current');\n  }\n\n  /**\n   * Core's rule for which crumb is current — the first one marked, or the last\n   * — so the React `Breadcrumbs` marks the same one. One index, which is what\n   * stops a trail claiming two current pages.\n   *\n   * The answer goes to `currentPage`, never to the `current` the consumer\n   * asked with. Writing it back to `current` looked tidier and was wrong:\n   * with nothing marked, the last crumb was given `current`, and appending\n   * another crumb then found that one marked and left the mark behind on it.\n   * A browser test appends a crumb, which is what caught it.\n   */\n  private sync() {\n    const crumbs = this.crumbs;\n    const currentIndex = resolveCurrentCrumb(\n      crumbs.map((crumb) => ({ current: this.isCurrent(crumb) })),\n    );\n\n    for (const [index, crumb] of crumbs.entries()) {\n      const node = crumb as HTMLElement & {\n        currentPage: boolean;\n        last: boolean;\n        separator: string;\n      };\n      node.currentPage = index === currentIndex;\n      node.last = index === crumbs.length - 1;\n      node.separator = this.separator;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\" aria-label={this.label}>\n        <ol class=\"list\" part=\"list\">\n          <slot onSlotchange={() => this.refresh()} />\n        </ol>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAWA,SAASA,EAAoBC,GAC5B,MAAMC,EAAWD,EAAOE,WAAWC,GAAUA,EAAMC,UACnD,GAAIH,GAAY,EAAG,OAAOA,EAC1B,OAAOD,EAAOK,OAAS,CACxB,CCfA,MAAMC,EAAmB,IAAM,sM,MCwBlBC,EAAaC,EAAA,MAAAD,UAAAE,E,sGAIhBC,MAAQ,aAGRC,UAAY,IAGpB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAIP,qBAAAE,GACEH,KAAKC,M,CAQP,aAAMG,GACJJ,KAAKC,M,CAIP,UAAYd,GACV,OAAOkB,MAAMC,KAAKN,KAAKO,GAAGC,iBAA8B,kBAAkBC,QACvEnB,GAAUA,EAAMoB,gBAAkBV,KAAKO,I,CAQpC,SAAAI,CAAUrB,GAChB,OAAQA,EAA8CC,SAAWD,EAAMsB,aAAa,U,CAc9E,IAAAX,GACN,MAAMd,EAASa,KAAKb,OACpB,MAAM0B,EAAe3B,EACnBC,EAAO2B,KAAKxB,IAAK,CAAQC,QAASS,KAAKW,UAAUrB,QAGnD,IAAK,MAAOyB,EAAOzB,KAAUH,EAAO6B,UAAW,CAC7C,MAAMC,EAAO3B,EAKb2B,EAAKC,YAAcH,IAAUF,EAC7BI,EAAKE,KAAOJ,IAAU5B,EAAOK,OAAS,EACtCyB,EAAKnB,UAAYE,KAAKF,S,EAI1B,MAAAsB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,aAAY,aAAaxB,KAAKH,OACvCwB,EAAA,MAAAE,IAAA,2CAAIE,MAAM,OAAOC,KAAK,QACpBL,EAAA,QAAAE,IAAA,2CAAMI,aAAc,IAAM3B,KAAKI,a","ignoreList":[]}