@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["nextDateRangeSelection","current","date","clicked","toMidday","awaitingEnd","range","start","end","isSameDay","getTime","rangeDayState","hovered","isStart","Boolean","isEnd","isInside","low","high","day","formatDateRange","format","parseDateRange","value","parse","from","to","split","pfDateRangePickerCss","MOVES","Keys","ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","PageDown","PageUp","PfDateRangePicker","__stencil_proxyCustomElement","HTMLElement","internals","name","open","label","description","error","placeholder","required","disabled","allowClear","min","max","startYear","endYear","isDateDisabled","pfChange","pfOpenChange","leftMonth","startOfMonth","Date","focusedDate","initialValue","pendingStart","stopObserving","shouldRestoreFocus","componentWillLoad","this","base","clamp","syncFormState","componentDidRender","el","shadowRoot","querySelector","focus","disconnectedCallback","syncDisplayedMonths","setFormValue","data","FormData","append","formatISODate","applyControlValidity","syncOpen","next","previous","showPanel","hidePanel","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","parseISODate","years","now","getFullYear","Math","clampMonthToYearRange","panel","trigger","isDisabled","isOutsideDateRange","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","align","matchAnchorWidth","flip","onChange","left","top","placePopover","undefined","hidePopover","onToggle","event","nowOpen","newState","pick","displayRange","committed","moveFocus","move","moveCalendarDate","right","addMonths","isSameMonth","onKeyDown","key","preventDefault","Enter","Space","clear","stopPropagation","formatted","Intl","DateTimeFormat","month","year","renderGrid","days","buildCalendarDays","today","h","class","part","role","WEEKDAY_LABELS","map","Array","length","CALENDAR_CELL_COUNT","_","week","slice","inCurrentMonth","state","isEndpoint","type","tabindex","weekday","onClick","onMouseEnter","getDate","render","describedBy","composeDescribedBy","text","Host","htmlFor","id","controlAriaLabel","popover","onMouseLeave"],"sources":["../core/dist/date-range.js","src/components/pf-date-range-picker/pf-date-range-picker.css?tag=pf-date-range-picker&encapsulation=shadow","src/components/pf-date-range-picker/pf-date-range-picker.tsx"],"sourcesContent":["import { isSameDay, toMidday } from \"./date.js\";\n//#region src/date-range.ts\n/**\n* Where a click on `date` leaves the selection.\n*\n* Three cases, and the second two are the ones worth naming:\n* - not awaiting an end: start the range here and wait for the other end;\n* - awaiting an end, clicked before the start: the two swap, because a range\n*   has no opinion about which end the user picked first;\n* - awaiting an end, clicked the start again: start over rather than make a\n*   one-day range, which is what the React component does and is the kinder\n*   reading of a double click.\n*/\nfunction nextDateRangeSelection(current, date) {\n\tconst clicked = toMidday(date);\n\tif (!current.awaitingEnd || !current.range.start) return {\n\t\trange: {\n\t\t\tstart: clicked,\n\t\t\tend: null\n\t\t},\n\t\tawaitingEnd: true\n\t};\n\tconst start = current.range.start;\n\tif (isSameDay(start, clicked)) return {\n\t\trange: {\n\t\t\tstart: clicked,\n\t\t\tend: null\n\t\t},\n\t\tawaitingEnd: true\n\t};\n\treturn {\n\t\trange: clicked.getTime() < start.getTime() ? {\n\t\t\tstart: clicked,\n\t\t\tend: start\n\t\t} : {\n\t\t\tstart,\n\t\t\tend: clicked\n\t\t},\n\t\tawaitingEnd: false\n\t};\n}\n/**\n* How a day should read, given the range and whatever is hovered.\n*\n* A hovered day stands in for the missing end while the range is half-made,\n* which is what makes the preview follow the pointer. It stands in only when\n* there is a start and no end — hovering before the first click previews\n* nothing.\n*/\nfunction rangeDayState(date, range, hovered = null) {\n\tconst { start } = range;\n\tconst end = range.end ?? (start && hovered ? hovered : null);\n\tconst isStart = Boolean(start && isSameDay(date, start));\n\tconst isEnd = Boolean(end && isSameDay(date, end));\n\tif (!start || !end) return {\n\t\tisStart,\n\t\tisEnd,\n\t\tisInside: false\n\t};\n\tconst [low, high] = start.getTime() <= end.getTime() ? [start, end] : [end, start];\n\tconst day = date.getTime();\n\treturn {\n\t\tisStart,\n\t\tisEnd,\n\t\tisInside: day > low.getTime() && day < high.getTime()\n\t};\n}\n/** `YYYY-MM-DD/YYYY-MM-DD`, or `''` when the range is not yet complete. */\nfunction formatDateRange(range, format) {\n\tif (!range.start || !range.end) return \"\";\n\treturn `${format(range.start)}/${format(range.end)}`;\n}\n/** Parses `YYYY-MM-DD/YYYY-MM-DD`; anything else is an empty range. */\nfunction parseDateRange(value, parse) {\n\tconst [from, to] = (value ?? \"\").split(\"/\");\n\tconst start = parse(from ?? \"\");\n\tconst end = parse(to ?? \"\");\n\tif (!start || !end) return {\n\t\tstart: null,\n\t\tend: null\n\t};\n\treturn start.getTime() <= end.getTime() ? {\n\t\tstart,\n\t\tend\n\t} : {\n\t\tstart: end,\n\t\tend: start\n\t};\n}\n//#endregion\nexport { formatDateRange, nextDateRangeSelection, parseDateRange, rangeDayState };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-daterange-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-daterange-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.row-controls {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-daterange-bg);\n  border: 1px solid var(--pf-daterange-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-daterange-text);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  min-width: 0;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n}\n\n.trigger:focus-visible {\n  box-shadow: var(--pf-daterange-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-daterange-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-daterange-text-muted);\n}\n\n.clear {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-daterange-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.clear:hover:not(:disabled) {\n  color: var(--pf-daterange-text);\n}\n\n.clear:focus-visible {\n  box-shadow: var(--pf-daterange-focus-ring);\n  outline: none;\n}\n\n.description {\n  color: var(--pf-daterange-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-daterange-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/* See src/place-popover.ts: the UA stylesheet centres a popover otherwise. */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-daterange-menu-bg);\n  border: 1px solid var(--pf-daterange-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  color: var(--pf-daterange-text);\n  padding: var(--space-3);\n}\n\n.panel:popover-open {\n  animation: pf-date-range-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-date-range-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n\n.nav {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--space-2);\n}\n\n.step {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-daterange-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.step:hover {\n  background: var(--pf-daterange-bg-subtle);\n  color: var(--pf-daterange-text);\n}\n\n.step:focus-visible {\n  box-shadow: var(--pf-daterange-focus-ring);\n  outline: none;\n}\n\n/* One month on a phone, two side by side from --md up. */\n.months {\n  display: grid;\n  gap: var(--space-4);\n}\n\n@media (--md) {\n  .months {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n.month-label {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  margin: 0 0 var(--space-2);\n  text-align: center;\n}\n\n.grid {\n  display: grid;\n  gap: 2px;\n  grid-template-columns: repeat(7, 1fr);\n}\n\n/*\n * `display: contents`, so each row's seven cells join the grid's own columns.\n * The rows exist for the `role=\"row\"` the grid pattern needs, not for layout.\n */\n.row {\n  display: contents;\n}\n\n.weekday {\n  color: var(--pf-daterange-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-7);\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-daterange-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-daterange-bg-subtle);\n}\n\n.day:focus-visible {\n  box-shadow: var(--pf-daterange-focus-ring);\n  outline: none;\n}\n\n.day--today {\n  border-color: var(--pf-calendar-today-border);\n}\n\n/*\n * The inside of the range is square and the ends are rounded on their outer\n * side only, so the run reads as one band rather than a row of pills.\n */\n.day--inside {\n  background: var(--pf-daterange-range-bg);\n  border-radius: 0;\n  color: var(--pf-daterange-range-text);\n}\n\n.day--endpoint {\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--start:not(.day--end) {\n  border-end-end-radius: 0;\n  border-start-end-radius: 0;\n}\n\n.day--end:not(.day--start) {\n  border-end-start-radius: 0;\n  border-start-start-radius: 0;\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  composeDescribedBy,\n  formatDateRange,\n  formatISODate,\n  isOutsideDateRange,\n  isSameDay,\n  isSameMonth,\n  Keys,\n  moveCalendarDate,\n  nextDateRangeSelection,\n  observeAnchoredPosition,\n  parseDateRange,\n  parseISODate,\n  rangeDayState,\n  startOfMonth,\n  toMidday,\n  WEEKDAY_LABELS,\n  type CalendarMove,\n  type DateRangeValue,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, CalendarMove> = {\n  [Keys.ArrowRight]: 'day-next',\n  [Keys.ArrowLeft]: 'day-previous',\n  [Keys.ArrowDown]: 'week-next',\n  [Keys.ArrowUp]: 'week-previous',\n  [Keys.Home]: 'week-start',\n  [Keys.End]: 'week-end',\n  PageDown: 'month-next',\n  PageUp: 'month-previous',\n};\n\n/**\n * A form-associated date-range field: two month grids in a popover, with a\n * preview that follows the pointer while the range is half-made.\n *\n * **It submits two entries from one control.** `setFormValue` accepts a\n * `FormData`, and every entry in it is submitted — measured, along with the\n * fact that the element's own `name` attribute is then ignored entirely. So a\n * range goes in as `${name}-start` and `${name}-end`, which is what a server\n * handling a form actually wants, rather than one field a handler has to split.\n * The `value` property stays a single round-trippable `start/end` string.\n *\n * The grids are rendered here rather than composed from two `pf-calendar`s:\n * the range preview spans both months, so one element has to own the hover and\n * the selection for both. The day-state and selection rules are core's, shared\n * with the React component.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the grids.\n * @part clear - the clear button.\n * @part panel - the floating panel.\n * @part grid - each month grid.\n * @part day - every day cell.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-date-range-picker',\n  styleUrl: 'pf-date-range-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfDateRangePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The base name for the two submitted entries, `${name}-start` and\n   * `${name}-end`. Reflected for selectors; the submission reads the property,\n   * because a `FormData` value carries its own keys.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The range as `YYYY-MM-DD/YYYY-MM-DD`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the panel is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select dates';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Offer a button that empties the range. */\n  @Prop() allowClear = false;\n\n  @Prop() min?: string;\n\n  @Prop() max?: string;\n\n  @Prop() startYear?: number;\n\n  @Prop() endYear?: number;\n\n  /** A predicate for days that cannot be chosen; see `pf-calendar`. */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires when the range changes or is cleared, with the `start/end` string. */\n  @Event() pfChange!: EventEmitter<{ value: string; start: string; end: string }>;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The left-hand month; the right-hand one is always the month after. */\n  @State() leftMonth: Date = startOfMonth(new Date());\n\n  /** The day the grids' single tab stop sits on. */\n  @State() focusedDate: Date = toMidday(new Date());\n\n  /** The day under the pointer, which previews the missing end. */\n  @State() hovered: Date | null = null;\n\n  /** True once a start is chosen and the next click sets the end. */\n  @State() awaitingEnd = false;\n\n  private initialValue = '';\n\n  /**\n   * The start held while the range is half-made.\n   *\n   * Not in `value`, because `value` is the *submitted* range and a half-made\n   * one is not a range — a form read mid-selection would see a start with no\n   * end. Held here instead, and folded back in for rendering.\n   */\n  private pendingStart: Date | null = null;\n  private stopObserving?: () => void;\n  private shouldRestoreFocus = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    const { start } = this.range();\n    const base = start ?? toMidday(new Date());\n    this.focusedDate = base;\n    this.leftMonth = this.clamp(startOfMonth(base));\n    this.syncFormState();\n  }\n\n  componentDidRender() {\n    if (!this.shouldRestoreFocus) return;\n    this.shouldRestoreFocus = false;\n    this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /**\n   * Follows a range set from outside, so the grids show what they are told.\n   *\n   * Without this the element kept whatever month it loaded with, and a\n   * consumer assigning `value` got a correct value over the wrong months —\n   * the days it names were not even rendered.\n   */\n  @Watch('value')\n  syncDisplayedMonths() {\n    const { start, end } = this.range();\n    if (!start || !end) return;\n    this.pendingStart = null;\n    this.awaitingEnd = false;\n    this.focusedDate = start;\n    this.leftMonth = this.clamp(startOfMonth(start));\n  }\n\n  /*\n   * `name` is watched here and not on the controls that pass a plain string to\n   * `setFormValue`: those take their submission name from the reflected\n   * attribute, so the platform picks a change up by itself. This one builds\n   * the name *into* a FormData, so without the watch a name assigned after\n   * load would never reach the submission.\n   */\n  @Watch('name')\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const { start, end } = this.range();\n\n    if (!start || !end || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      /*\n       * A FormData, so one control submits both ends. Measured: every entry in\n       * it reaches the submission, and the element's own `name` attribute is\n       * ignored in this mode — which is why the keys are built here.\n       */\n      const data = new FormData();\n      data.append(`${this.name}-start`, formatISODate(start));\n      data.append(`${this.name}-end`, formatISODate(end));\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, Boolean(start && end), this.required, this.error);\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.awaitingEnd = false;\n    this.hovered = null;\n  }\n\n  private range(): DateRangeValue {\n    return parseDateRange(this.value, parseISODate);\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 get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private isDisabled(date: Date): boolean {\n    if (isOutsideDateRange(date, parseISODate(this.min), parseISODate(this.max))) return true;\n    return this.isDateDisabled?.(date) ?? false;\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    this.shouldRestoreFocus = true;\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    this.hovered = null;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  /** One click through core's state machine, plus this element's side-effects. */\n  private pick(date: Date) {\n    if (this.isDisabled(date)) return;\n\n    /*\n     * `displayRange()`, not `range()`. A half-made range is deliberately kept\n     * out of `value`, so reading the state machine's input from `value` hands\n     * it a range with no start — and core, correctly, treats that as \"begin a\n     * new range\". Every second click restarted instead of closing. Caught by\n     * the swap and Enter tests.\n     */\n    const next = nextDateRangeSelection(\n      { range: this.displayRange(), awaitingEnd: this.awaitingEnd },\n      date,\n    );\n\n    this.awaitingEnd = next.awaitingEnd;\n    this.focusedDate = toMidday(date);\n\n    if (next.awaitingEnd) {\n      // Half-made: hold the start without reporting an incomplete range.\n      this.value = '';\n      this.pendingStart = next.range.start;\n      return;\n    }\n\n    this.pendingStart = null;\n    this.hovered = null;\n    this.value = formatDateRange(next.range, formatISODate);\n    this.pfChange.emit({\n      value: this.value,\n      start: next.range.start ? formatISODate(next.range.start) : '',\n      end: next.range.end ? formatISODate(next.range.end) : '',\n    });\n    this.open = false;\n  }\n\n  /** What the grids draw: the committed range, or the half-made one. */\n  private displayRange(): DateRangeValue {\n    const committed = this.range();\n    if (committed.start && committed.end) return committed;\n    return { start: this.pendingStart, end: null };\n  }\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.shouldRestoreFocus = true;\n\n    // Keep the focused day on screen: it belongs to one of the two months.\n    const right = addMonths(this.leftMonth, 1);\n    if (!isSameMonth(next, this.leftMonth) && !isSameMonth(next, right)) {\n      this.leftMonth = this.clamp(startOfMonth(next));\n    }\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    const move = MOVES[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.pick(this.focusedDate);\n      this.shouldRestoreFocus = true;\n    }\n  };\n\n  private clear = (event: MouseEvent) => {\n    event.stopPropagation();\n    if (!this.value && !this.pendingStart) return;\n    this.value = '';\n    this.pendingStart = null;\n    this.awaitingEnd = false;\n    this.hovered = null;\n    this.pfChange.emit({ value: '', start: '', end: '' });\n  };\n\n  private formatted(): string {\n    const { start, end } = this.range();\n    if (!start || !end) return '';\n    const format = new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    });\n    return `${format.format(start)} – ${format.format(end)}`;\n  }\n\n  private renderGrid(month: Date) {\n    const days = buildCalendarDays(month);\n    const range = this.displayRange();\n    const today = toMidday(new Date());\n    const label = new Intl.DateTimeFormat('en-US', {\n      month: 'long',\n      year: 'numeric',\n    }).format(month);\n\n    return (\n      <div class=\"month\">\n        <p class=\"month-label\">{label}</p>\n        <div class=\"grid\" part=\"grid\" role=\"grid\" aria-label={label}>\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 (!inCurrentMonth) {\n                  return <span key={formatISODate(date)} class=\"empty\" role=\"gridcell\"></span>;\n                }\n\n                const state = rangeDayState(date, range, this.hovered);\n                const isEndpoint = state.isStart || state.isEnd;\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\"\n                    class={{\n                      day: true,\n                      'day--today': isSameDay(today, date),\n                      'day--endpoint': isEndpoint,\n                      'day--start': state.isStart,\n                      'day--end': state.isEnd,\n                      'day--inside': state.isInside,\n                    }}\n                    tabindex={isSameDay(this.focusedDate, date) ? 0 : -1}\n                    aria-selected={isEndpoint || state.isInside ? 'true' : 'false'}\n                    aria-current={isSameDay(today, date) ? '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.pick(date);\n                      this.shouldRestoreFocus = true;\n                    }}\n                    onMouseEnter={() => {\n                      if (this.awaitingEnd && !disabled) this.hovered = date;\n                    }}\n                  >\n                    {date.getDate()}\n                  </button>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const text = this.formatted();\n    const right = addMonths(this.leftMonth, 1);\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class=\"row-controls\">\n            <button\n              id=\"trigger\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"trigger\"\n              class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n              type=\"button\"\n              disabled={this.disabled}\n              aria-haspopup=\"dialog\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              aria-controls=\"panel\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-describedby={describedBy}\n              onClick={() => {\n                if (!this.disabled) this.open = !this.open;\n              }}\n            >\n              <span class={{ value: true, 'value--placeholder': !text }}>\n                {text || this.placeholder}\n              </span>\n              <pf-icon name=\"calendar\"></pf-icon>\n            </button>\n\n            {this.allowClear && (this.value || this.pendingStart) && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label=\"Clear selected dates\"\n                disabled={this.disabled}\n                onClick={this.clear}\n              >\n                <pf-icon name=\"circle-xmark\"></pf-icon>\n              </button>\n            )}\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a date range\"\n          onToggle={this.onToggle}\n          onKeyDown={this.onKeyDown}\n          onMouseLeave={() => {\n            this.hovered = null;\n          }}\n        >\n          <div class=\"nav\">\n            <button\n              type=\"button\"\n              class=\"step\"\n              aria-label=\"Previous month\"\n              onClick={() => {\n                this.leftMonth = this.clamp(addMonths(this.leftMonth, -1));\n              }}\n            >\n              <pf-icon name=\"square-caret-left\"></pf-icon>\n            </button>\n            <button\n              type=\"button\"\n              class=\"step\"\n              aria-label=\"Next month\"\n              onClick={() => {\n                this.leftMonth = this.clamp(addMonths(this.leftMonth, 1));\n              }}\n            >\n              <pf-icon name=\"square-caret-right\"></pf-icon>\n            </button>\n          </div>\n\n          <div class=\"months\">\n            {this.renderGrid(this.leftMonth)}\n            {this.renderGrid(right)}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/pf-dropdown.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as n,c as s,h as r,a as i}from"./index.js";import{o as a,p as o}from"./p-CC7AyfOt.js";import{K as p}from"./p-g4FlTDZx.js";import{r as d}from"./p-CAz7-p8y.js";import{s as f,r as h}from"./p-Fiuz9ck7.js";const c=()=>`:host{display:inline-flex}:host([hidden]){display:none}:host{--pf-menu-text:var(--pf-dropdown-text);--pf-menu-text-muted:var(--pf-dropdown-text-muted);--pf-menu-text-danger:var(--pf-dropdown-text-danger);--pf-menu-item-active-bg:var(--pf-dropdown-surface-subtle, var(--pf-surface-subtle));--pf-menu-separator:var(--pf-dropdown-surface-border, var(--pf-surface-border))}.menu{inset:auto;margin:0;background:var(--pf-dropdown-surface-bg, var(--pf-surface-bg));border:1px solid var(--pf-dropdown-surface-border, var(--pf-surface-border));border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 420px);overflow:auto;padding:var(--space-1)}.menu:popover-open{animation:pf-dropdown-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-dropdown-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.menu:popover-open{animation:none}}`;const u=t(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOpenChange=s(this,"pfOpenChange");this.pfSelect=s(this,"pfSelect")}get el(){return this}open=false;align="start";label="Actions";disabled=false;pfOpenChange;pfSelect;stopObserving;componentDidLoad(){this.syncTrigger();if(this.open)this.showMenu()}disconnectedCallback(){this.stopObserving?.()}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}syncOpen(e,t){if(e)this.showMenu();else this.hideMenu();this.syncTrigger();if(e!==t)this.pfOpenChange.emit({open:e})}get panel(){return this.el.shadowRoot?.querySelector('[part="menu"]')??null}get trigger(){return this.el.firstElementChild}get items(){return Array.from(this.el.querySelectorAll("pf-menu-item"))}get enabledItems(){return this.items.filter((e=>!e.hasAttribute("disabled")))}syncTrigger(){const e=this.trigger;if(!e)return;e.setAttribute("aria-haspopup","menu");e.setAttribute("aria-expanded",this.open?"true":"false")}showMenu(){const e=this.panel;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.trigger,getFloating:()=>e,align:this.align,matchAnchorWidth:false,minWidth:200,flip:true,onChange:({left:t,top:n,minWidth:s})=>{o(e,t,n);if(s!==undefined)e.style.minWidth=`${s}px`}});const t=this.enabledItems[0];f(this.enabledItems,t);t?.focus()}hideMenu(){this.stopObserving?.();this.stopObserving=undefined;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}handleClick(e){const t=this.trigger;if(!t||!e.composedPath().includes(t))return;if(this.disabled)return;this.open=!this.open}handleMenuSelect(e){e.stopPropagation();this.pfSelect.emit({value:e.detail.value});this.open=false;this.trigger?.focus()}handleKeyDown(e){if(e.defaultPrevented)return;if(!this.open){if(e.key===p.ArrowDown&&!this.disabled){e.preventDefault();this.open=true}return}if(e.key===p.Escape){e.stopPropagation();this.open=false;this.trigger?.focus();return}const t=h(e.key,"vertical");if(!t)return;const n=this.enabledItems;if(n.length===0)return;const s=n.indexOf(document.activeElement);const r=d(t,n.map(((e,t)=>t)),s);if(r<0)return;e.preventDefault();f(n,n[r]);n[r].focus()}onToggle=e=>{const t=e.newState==="open";if(t!==this.open)this.open=t};render(){return r(i,{key:"358568ed6a8634244c328770ab1902b21fc640f8"},r("slot",{key:"50cc5ffa9d4846cab0014e2b93d2e02a3464d618",onSlotchange:()=>this.syncTrigger()}),r("div",{key:"ad5b534c5e7dc3d506417e617b9c82d4db6c430a",class:"menu",part:"menu",popover:"auto",role:"menu","aria-label":this.label,onToggle:this.onToggle},r("slot",{key:"e4a3682b14ac2c4fce0aee14b31100a2af8ab548",name:"menu"})))}static get watchers(){return{open:[{syncOpen:0}]}}static get style(){return c()}},[769,"pf-dropdown",{open:[1540],align:[1],label:[1],disabled:[516],show:[64],hide:[64]},[[0,"click","handleClick"],[0,"pfMenuSelect","handleMenuSelect"],[0,"keydown","handleKeyDown"]],{open:[{syncOpen:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-dropdown"];t.forEach((t=>{switch(t){case"pf-dropdown":if(!customElements.get(e(t))){customElements.define(e(t),u)}break}}))}l();const m=u;const g=l;export{m as PfDropdown,g as defineCustomElement};
+//# sourceMappingURL=pf-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfDropdownCss","PfDropdown","__stencil_proxyCustomElement","HTMLElement","open","align","label","disabled","pfOpenChange","pfSelect","stopObserving","componentDidLoad","this","syncTrigger","showMenu","disconnectedCallback","show","hide","syncOpen","next","previous","hideMenu","emit","panel","el","shadowRoot","querySelector","trigger","firstElementChild","items","Array","from","querySelectorAll","enabledItems","filter","item","hasAttribute","setAttribute","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","minWidth","flip","onChange","left","top","placePopover","undefined","style","first","syncRovingTabIndex","focus","hidePopover","handleClick","event","composedPath","includes","handleMenuSelect","stopPropagation","value","detail","handleKeyDown","defaultPrevented","key","Keys","ArrowDown","preventDefault","Escape","action","resolveRovingKey","length","currentIndex","indexOf","document","activeElement","nextIndex","resolveListMove","map","_","index","onToggle","newState","render","h","Host","onSlotchange","class","part","popover","role","name"],"sources":["src/components/pf-dropdown/pf-dropdown.css?tag=pf-dropdown&encapsulation=shadow","src/components/pf-dropdown/pf-dropdown.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The generic set pf-menu-item and pf-menu-separator read, mapped to this\n * menu's own alias family. They inherit through the shadow boundary, so a\n * slotted item picks these up without knowing which menu it is in.\n */\n:host {\n  --pf-menu-text: var(--pf-dropdown-text);\n  --pf-menu-text-muted: var(--pf-dropdown-text-muted);\n  --pf-menu-text-danger: var(--pf-dropdown-text-danger);\n  --pf-menu-item-active-bg: var(--pf-dropdown-surface-subtle, var(--pf-surface-subtle));\n  --pf-menu-separator: var(--pf-dropdown-surface-border, var(--pf-surface-border));\n}\n\n/*\n * `inset: auto` and `margin: 0` are essential, not tidying -- see\n * `src/place-popover.ts`, which sets the same two inline and explains the\n * measurement. They are declared in both places deliberately: here so the\n * cascade carries them for the whole life of the panel, and inline so a panel\n * is still positioned where this stylesheet has not been applied.\n */\n.menu {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-dropdown-surface-bg, var(--pf-surface-bg));\n  border: 1px solid var(--pf-dropdown-surface-border, var(--pf-surface-border));\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  max-height: min(60vh, 420px);\n  overflow: auto;\n  padding: var(--space-1);\n}\n\n.menu:popover-open {\n  animation: pf-dropdown-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-dropdown-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .menu:popover-open {\n    animation: none;\n  }\n}\n","import {\n  Keys,\n  observeAnchoredPosition,\n  resolveListMove,\n  resolveRovingKey,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { placePopover } from '../../place-popover';\n\n/**\n * A menu of actions, anchored to a trigger.\n *\n * `popover=\"auto\"`, so light-dismiss and Escape are the browser's, as in\n * `pf-popover`. The keyboard pattern is the ARIA menu one and reuses core's\n * roving module — its third consumer, after `pf-toolbar` and\n * `pf-radio-group` — because the items are custom elements rather than native\n * controls and have to be queried by tag.\n *\n * @slot - the trigger.\n * @slot menu - `pf-menu-item` and `pf-menu-separator` children.\n * @part menu - the floating menu panel.\n */\n@Component({\n  tag: 'pf-dropdown',\n  styleUrl: 'pf-dropdown.css',\n  shadow: true,\n})\nexport class PfDropdown {\n  @Element() el!: HTMLElement;\n\n  /** Whether the menu is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge of the trigger the menu lines up with. */\n  @Prop() align: 'start' | 'end' = 'start';\n\n  /** Accessible name for the menu. */\n  @Prop() label = 'Actions';\n\n  /** Prevent opening. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires whenever the menu opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Fires with the chosen item's value. The menu closes itself afterwards. */\n  @Event() pfSelect!: EventEmitter<{ value: string }>;\n\n  private stopObserving?: () => void;\n\n  componentDidLoad() {\n    this.syncTrigger();\n    if (this.open) this.showMenu();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /** Opens the menu. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the menu. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /** See pf-popover: the watch is the one place every path passes through. */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showMenu();\n    else this.hideMenu();\n    this.syncTrigger();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"menu\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.firstElementChild as HTMLElement | null;\n  }\n\n  /** The actionable items, in source order. Separators are not items. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-menu-item'));\n  }\n\n  private get enabledItems(): HTMLElement[] {\n    return this.items.filter((item) => !item.hasAttribute('disabled'));\n  }\n\n  /**\n   * `aria-controls` is absent on purpose: an IDREF does not cross a shadow\n   * boundary, so pointing it at the panel would dangle. `aria-haspopup` and\n   * `aria-expanded` carry what is announced.\n   */\n  private syncTrigger() {\n    const trigger = this.trigger;\n    if (!trigger) return;\n    trigger.setAttribute('aria-haspopup', 'menu');\n    trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  private showMenu() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: this.align,\n      matchAnchorWidth: false,\n      minWidth: 200,\n      flip: true,\n      onChange: ({ left, top, minWidth }) => {\n        placePopover(panel, left, top);\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    // The ARIA menu pattern puts focus on the first item, not on the menu.\n    const first = this.enabledItems[0];\n    syncRovingTabIndex(this.enabledItems, first);\n    first?.focus();\n  }\n\n  private hideMenu() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    const trigger = this.trigger;\n    if (!trigger || !event.composedPath().includes(trigger)) return;\n    if (this.disabled) return;\n    this.open = !this.open;\n  }\n\n  /**\n   * An item asked to be acted on. The menu reports it and closes, which is\n   * what makes `pf-menu-item` reusable: it knows nothing about its container.\n   */\n  @Listen('pfMenuSelect')\n  handleMenuSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.pfSelect.emit({ value: event.detail.value });\n    this.open = false;\n    this.trigger?.focus();\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    // Down on a closed trigger opens the menu, as a menu button should.\n    if (!this.open) {\n      if (event.key === Keys.ArrowDown && !this.disabled) {\n        event.preventDefault();\n        this.open = true;\n      }\n      return;\n    }\n\n    if (event.key === Keys.Escape) {\n      event.stopPropagation();\n      this.open = false;\n      this.trigger?.focus();\n      return;\n    }\n\n    // A menu is a column, so navigation is always the vertical axis.\n    const action = resolveRovingKey(event.key, 'vertical');\n    if (!action) return;\n\n    const items = this.enabledItems;\n    if (items.length === 0) return;\n\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    const nextIndex = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    syncRovingTabIndex(items, items[nextIndex]);\n    items[nextIndex].focus();\n  }\n\n  private onToggle = (event: Event) => {\n    const next = (event as ToggleEvent).newState === 'open';\n    if (next !== this.open) this.open = next;\n  };\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.syncTrigger()} />\n        <div\n          class=\"menu\"\n          part=\"menu\"\n          popover=\"auto\"\n          role=\"menu\"\n          aria-label={this.label}\n          onToggle={this.onToggle}\n        >\n          <slot name=\"menu\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-empty-state.d.ts

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

package/dist/components/pf-empty-state.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as a,a as i}from"./index.js";import{d as n}from"./p-CkFjPRTe.js";const o=()=>`:host{align-items:center;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);text-align:center}:host([hidden]){display:none}:host([size='sm']){gap:var(--space-2);padding:var(--space-4)}:host([size='lg']){gap:var(--space-4);padding:var(--space-10)}.icon.empty,.action.empty{display:none}.icon{color:var(--pf-empty-state-icon);display:inline-flex;font-size:var(--font-size-3xl);line-height:1;margin-bottom:var(--space-1)}:host([size='sm']) .icon{font-size:var(--font-size-xl);margin-bottom:0}:host([size='lg']) .icon{font-size:var(--font-size-5xl);margin-bottom:var(--space-2)}.heading{color:var(--pf-empty-state-text);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);line-height:1.3;margin:0}:host([size='sm']) .heading{font-size:var(--font-size-sm)}:host([size='lg']) .heading{font-size:var(--font-size-xl)}slot[name='description']::slotted(*){color:var(--pf-empty-state-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.5;margin:0;max-width:40ch}:host([size='lg']) slot[name='description']::slotted(*){font-size:var(--font-size-md);max-width:48ch}.action{align-items:center;display:inline-flex;gap:var(--space-2);margin-top:var(--space-1)}`;const c=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}size="md";icon;hasIcon=false;hasAction=false;componentWillLoad(){this.read()}read=()=>{const e=e=>Array.from(this.el.children).some((t=>t.getAttribute("slot")===e));this.hasIcon=e("icon");this.hasAction=e("action")};render(){const e=this.hasIcon||Boolean(this.icon);return a(i,{key:"617129c001ebd91e05ed9c4e9d6977429edb3c9d"},a("span",{key:"0f560b88267604b2a5b8c8cf6fcc6a3f2d7e5c68",class:{icon:true,empty:!e},part:"icon","aria-hidden":"true"},this.icon&&!this.hasIcon&&a("pf-icon",{key:"57033cbb4f7cb1a9a4b4941f572b22e1f1108190",name:this.icon}),a("slot",{key:"2e224aa7c0c9dacef8924e53b4de76b2b5f427d9",name:"icon",onSlotchange:this.read})),a("p",{key:"b9b110143eb28dde873041d3cba58c3be6b92f3a",class:"heading",part:"heading"},a("slot",{key:"976168fccdb51ad83df26034c0ea4f3de3b87ed3"})),a("slot",{key:"871107fa5635be28aa95de994cb088d6af1e0cb6",name:"description"}),a("span",{key:"7a6dff80ce76676d059b7ca9406f17fa66fc5149",class:{action:true,empty:!this.hasAction},part:"action"},a("slot",{key:"25b97e145e7007b85051e3e587cc8c374a020547",name:"action",onSlotchange:this.read})))}static get style(){return o()}},[769,"pf-empty-state",{size:[513],icon:[1],hasIcon:[32],hasAction:[32]}]);function r(){if(typeof customElements==="undefined"){return}const t=["pf-empty-state","pf-icon"];t.forEach((t=>{switch(t){case"pf-empty-state":if(!customElements.get(e(t))){customElements.define(e(t),c)}break;case"pf-icon":if(!customElements.get(e(t))){n()}break}}))}r();const d=c;const f=r;export{d as PfEmptyState,f as defineCustomElement};
+//# sourceMappingURL=pf-empty-state.js.map

package/dist/components/pf-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfEmptyStateCss","PfEmptyState","__stencil_proxyCustomElement","HTMLElement","size","icon","hasIcon","hasAction","componentWillLoad","this","read","slotted","name","Array","from","el","children","some","child","getAttribute","render","showIcon","Boolean","h","Host","key","class","empty","part","onSlotchange","action"],"sources":["src/components/pf-empty-state/pf-empty-state.css?tag=pf-empty-state&encapsulation=shadow","src/components/pf-empty-state/pf-empty-state.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-8);\n  text-align: center;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  gap: var(--space-2);\n  padding: var(--space-4);\n}\n\n:host([size='lg']) {\n  gap: var(--space-4);\n  padding: var(--space-10);\n}\n\n/*\n * The two wrappers that carry layout are hidden rather than left out when\n * there is nothing in them, because a slot that is not rendered never fires\n * `slotchange` -- an icon or an action added later would stay invisible.\n *\n * Two classes deep, because both boxes set their own `display` below: `.empty`\n * alone ties on specificity and loses on order.\n */\n.icon.empty,\n.action.empty {\n  display: none;\n}\n\n.icon {\n  color: var(--pf-empty-state-icon);\n  display: inline-flex;\n  font-size: var(--font-size-3xl);\n  line-height: 1;\n  margin-bottom: var(--space-1);\n}\n\n:host([size='sm']) .icon {\n  font-size: var(--font-size-xl);\n  margin-bottom: 0;\n}\n\n:host([size='lg']) .icon {\n  font-size: var(--font-size-5xl);\n  margin-bottom: var(--space-2);\n}\n\n.heading {\n  color: var(--pf-empty-state-text);\n  font-size: var(--font-size-md);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.3;\n  margin: 0;\n}\n\n:host([size='sm']) .heading {\n  font-size: var(--font-size-sm);\n}\n\n:host([size='lg']) .heading {\n  font-size: var(--font-size-xl);\n}\n\n/*\n * The description needs no box of its own, so it has none: an unassigned slot\n * generates nothing, where an empty wrapper would leave its own gap behind.\n */\nslot[name='description']::slotted(*) {\n  color: var(--pf-empty-state-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.5;\n  margin: 0;\n  max-width: 40ch;\n}\n\n:host([size='lg']) slot[name='description']::slotted(*) {\n  font-size: var(--font-size-md);\n  max-width: 48ch;\n}\n\n.action {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n  margin-top: var(--space-1);\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfEmptyStateSize = 'sm' | 'md' | 'lg';\n\n/**\n * What to show in place of content that is not there: an icon, a heading, a\n * line of explanation and something to do about it.\n *\n * The icon can be a name — `icon=\"folder-open\"`, which renders a `pf-icon` —\n * or anything slotted into the `icon` slot, for an illustration this library\n * does not have. The slot wins where both are given.\n *\n * @slot - the heading.\n * @slot description - a line explaining the emptiness.\n * @slot action - what to do about it, usually a button.\n * @slot icon - an icon or illustration, in place of the `icon` name.\n * @part icon - the icon's box.\n * @part heading - the heading's box.\n * @part action - the box holding the action slot.\n */\n@Component({\n  tag: 'pf-empty-state',\n  styleUrl: 'pf-empty-state.css',\n  shadow: true,\n})\nexport class PfEmptyState {\n  @Element() el!: HTMLElement;\n\n  /** Padding and type scale. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfEmptyStateSize = 'md';\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /**\n   * Whether anything is slotted into the `icon` and `action` slots, which\n   * decides whether their boxes are drawn at all.\n   *\n   * Asked in JS, because a wrapper around a slot cannot be collapsed from\n   * CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a child.\n   * The description needs no box of its own, so it is styled through\n   * `::slotted()` and collapses on its own — these two carry layout their\n   * content cannot.\n   */\n  @State() hasIcon = false;\n  @State() hasAction = false;\n\n  /**\n   * Read from the light DOM so first paint is right: the mock DOM never fires\n   * `slotchange`, and a real one fires it after the first render.\n   */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasIcon = slotted('icon');\n    this.hasAction = slotted('action');\n  };\n\n  render() {\n    /*\n     * Both wrappers stay in the tree and are hidden when empty, rather than\n     * being left out: a slot that is not rendered never fires `slotchange`, so\n     * content added later would stay invisible for good.\n     */\n    const showIcon = this.hasIcon || Boolean(this.icon);\n\n    return (\n      <Host>\n        <span class={{ icon: true, empty: !showIcon }} part=\"icon\" aria-hidden=\"true\">\n          {/* The slot wins: a consumer who has slotted an illustration does\n              not also want the named icon beside it. */}\n          {this.icon && !this.hasIcon && <pf-icon name={this.icon}></pf-icon>}\n          <slot name=\"icon\" onSlotchange={this.read} />\n        </span>\n\n        <p class=\"heading\" part=\"heading\">\n          <slot />\n        </p>\n\n        <slot name=\"description\" />\n\n        <span class={{ action: true, empty: !this.hasAction }} part=\"action\">\n          <slot name=\"action\" onSlotchange={this.read} />\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAkB,IAAM,yrC,MCyBjBC,EAAYC,EAAA,MAAAD,UAAAE,E,sGAIEC,KAAyB,KAG1CC,KAYCC,QAAU,MACVC,UAAY,MAMrB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACb,MAAMC,EAAWC,GACfC,MAAMC,KAAKL,KAAKM,GAAGC,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYP,IAE9EH,KAAKH,QAAUK,EAAQ,QACvBF,KAAKF,UAAYI,EAAQ,SAAS,EAGpC,MAAAS,GAME,MAAMC,EAAWZ,KAAKH,SAAWgB,QAAQb,KAAKJ,MAE9C,OACEkB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAErB,KAAM,KAAMsB,OAAQN,GAAYO,KAAK,OAAM,cAAa,QAGpEnB,KAAKJ,OAASI,KAAKH,SAAWiB,EAAA,WAAAE,IAAA,2CAASb,KAAMH,KAAKJ,OACnDkB,EAAA,QAAAE,IAAA,2CAAMb,KAAK,OAAOiB,aAAcpB,KAAKC,QAGvCa,EAAA,KAAAE,IAAA,2CAAGC,MAAM,UAAUE,KAAK,WACtBL,EAAA,QAAAE,IAAA,8CAGFF,EAAA,QAAAE,IAAA,2CAAMb,KAAK,gBAEXW,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEI,OAAQ,KAAMH,OAAQlB,KAAKF,WAAaqB,KAAK,UAC1DL,EAAA,QAAAE,IAAA,2CAAMb,KAAK,SAASiB,aAAcpB,KAAKC,Q","ignoreList":[]}

package/dist/components/pf-file-uploader.d.ts

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

package/dist/components/pf-file-uploader.js

@@ -0,0 +1,2 @@
+import{t as e,p as i,H as t,c as r,h as a,a as s}from"./index.js";import{c as o}from"./p-DfpCerXM.js";import{a as n}from"./p-Cr6IXrUk.js";import{d as l}from"./p-CkFjPRTe.js";function d(e){if(!Number.isFinite(e)||e<0)return"0 B";if(e<1024)return`${Math.round(e)} B`;if(e<1024**2)return`${(e/1024).toFixed(1)} KB`;if(e<1024**3)return`${(e/1024**2).toFixed(1)} MB`;return`${(e/1024**3).toFixed(1)} GB`}function c(e){return`${e.name}-${e.size}-${e.lastModified??0}`}function f(e,i,{multiple:t=true}={}){if(!t)return i.slice(0,1);const r=new Map;for(const t of[...e,...i]){const e=c(t);if(!r.has(e))r.set(e,t)}return[...r.values()]}function p(e,i){const t=(i??"").split(",").map((e=>e.trim().toLowerCase())).filter(Boolean);if(t.length===0)return true;const r=e.name.toLowerCase();const a=(e.type??"").toLowerCase();return t.some((e=>{if(e.startsWith("."))return r.endsWith(e);if(e.endsWith("/*"))return a.startsWith(`${e.slice(0,-1)}`);return a===e}))}function u(e,{maxFiles:i,maxFileSize:t,accept:r}={}){if(r){const i=e.find((e=>!p(e,r)));if(i)return`"${i.name}" is not an accepted file type.`}if(typeof t==="number"&&t>=0){const i=e.find((e=>e.size>t));if(i)return`"${i.name}" exceeds the ${d(t)} size limit.`}if(typeof i==="number"&&i>=0&&e.length>i)return`You can upload up to ${i} file${i===1?"":"s"}.`;return null}function h(e,{maxFiles:i,maxFileSize:t}={}){const r=[];if(e)r.push(`Accepted: ${e}`);if(typeof t==="number"&&t>=0)r.push(`Max size: ${d(t)}`);if(typeof i==="number"&&i>=0)r.push(`Max files: ${i}`);return r.join(" | ")}const b=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-field-label);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-field-description);font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-field-error);font-size:var(--font-size-sm);margin:0}.input{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.dropzone{align-items:center;background:var(--pf-file-uploader-bg);border:1px dashed var(--pf-file-uploader-border-strong);border-radius:var(--radius-md);color:var(--pf-file-uploader-text);cursor:pointer;display:grid;font:inherit;gap:var(--space-1);justify-items:center;padding:var(--space-5) var(--space-4);text-align:center;transition:all var(--pf-transition-fast);width:100%}.dropzone:hover:not(:disabled){background:var(--pf-file-uploader-bg-subtle)}.dropzone:focus-visible{box-shadow:var(--pf-file-uploader-focus-ring, var(--pf-focus-ring));outline:none}.dropzone--active{background:var(--pf-file-uploader-bg-subtle);border-color:var(--pf-file-uploader-active-border)}.dropzone--invalid{border-color:var(--pf-file-uploader-invalid-border)}.dropzone:disabled{cursor:not-allowed;opacity:var(--pf-file-uploader-disabled-opacity, 0.5)}.icon{color:var(--pf-file-uploader-text-muted);font-size:var(--font-size-xl)}.title{font-weight:var(--font-weight-semibold)}.subtitle,.hint{color:var(--pf-file-uploader-text-muted);font-size:var(--font-size-sm)}.hint{font-size:var(--font-size-xs)}.list{display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.file{align-items:center;background:var(--pf-file-uploader-bg-subtle);border:1px solid var(--pf-file-uploader-border);border-radius:var(--radius-sm);display:flex;gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3)}.meta{display:flex;gap:var(--space-2);min-width:0}.file-name{color:var(--pf-file-uploader-text);font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{color:var(--pf-file-uploader-text-muted);flex:0 0 auto;font-size:var(--font-size-xs)}.remove{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-file-uploader-text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;padding:var(--space-1)}.remove:hover:not(:disabled){color:var(--pf-file-uploader-text)}.remove:focus-visible{box-shadow:var(--pf-file-uploader-focus-ring, var(--pf-focus-ring));outline:none}.remove:disabled{cursor:not-allowed;opacity:var(--pf-file-uploader-disabled-opacity, 0.5)}@media (prefers-reduced-motion: reduce){.dropzone{transition:none}}`;const m=i(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=r(this,"pfChange");this.pfReject=r(this,"pfReject");this.internals=this.attachInternals()}internals;get el(){return this}name;files=[];accept;multiple=true;maxFiles;maxFileSize;label;description;error;required=false;disabled=false;pfChange;pfReject;rejection;dragDepth=0;initialFiles=[];input;componentWillLoad(){this.initialFiles=[...this.files??[]];this.syncFormState()}syncFormState(){const e=this.files??[];if(this.name&&e.length>0){const i=new FormData;for(const t of e)i.append(this.name,t);this.internals.setFormValue(i)}else{this.internals.setFormValue(null)}n(this.internals,e.length>0,this.required,this.error??this.rejection)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}async open(){if(!this.disabled)this.input?.click()}formResetCallback(){this.files=[...this.initialFiles];this.rejection=undefined;this.dragDepth=0}get limits(){return{maxFiles:this.maxFiles,maxFileSize:this.maxFileSize,accept:this.accept}}addFiles(e){if(!e||this.disabled)return;const i=f(this.files??[],Array.from(e),{multiple:this.multiple});const t=u(i,this.limits);if(this.input)this.input.value="";if(t){this.rejection=t;this.pfReject.emit({message:t});return}this.rejection=undefined;this.files=i;this.pfChange.emit({files:i})}removeAt(e){if(this.disabled)return;const i=(this.files??[]).filter(((i,t)=>t!==e));this.rejection=undefined;this.files=i;this.pfChange.emit({files:i})}onDragEnter=e=>{e.preventDefault();if(this.disabled)return;this.dragDepth+=1};onDragLeave=e=>{e.preventDefault();this.dragDepth=Math.max(0,this.dragDepth-1)};onDrop=e=>{e.preventDefault();this.dragDepth=0;this.addFiles(e.dataTransfer?.files??null)};render(){const e=this.files??[];const i=this.error??this.rejection;const t=h(this.accept,this.limits);const r=o(this.description&&"description",i&&"error",t&&"hint");return a(s,{key:"b3d295cdda9ec1becb407406f87514d1551f06d5"},a("div",{key:"e1617a342f4ea80e6ed55b2dca454d586c36df29",class:"field",part:"field"},this.label&&a("label",{key:"8f625e01a182d67267d43aad08f1a3a13d5ec163",class:"label",part:"label",htmlFor:"dropzone"},this.label,this.required&&a("span",{key:"26240be666f6ea5501b72fefdf90cf88c8536a3d",class:"required","aria-hidden":"true"},"*")),a("input",{key:"2cbb754c8cefebfd7330bc41bd364c4e7a56d02f",ref:e=>this.input=e,id:"input",class:"input",type:"file",accept:this.accept,multiple:this.multiple,disabled:this.disabled,tabindex:-1,"aria-hidden":"true",onChange:e=>this.addFiles(e.target.files)}),a("button",{key:"7aeb521a180397169ed14973981d9c970d87cd5e",id:"dropzone",type:"button",class:{dropzone:true,"dropzone--active":this.dragDepth>0,"dropzone--invalid":Boolean(i)},part:"dropzone",disabled:this.disabled,"aria-invalid":i?"true":null,"aria-describedby":r,onClick:()=>this.open(),onDragEnter:this.onDragEnter,onDragOver:e=>e.preventDefault(),onDragLeave:this.onDragLeave,onDrop:this.onDrop},a("span",{key:"b04a52684ff15f27ceba80943d9acfc7ecaa64d4",class:"icon",part:"icon","aria-hidden":"true"},a("pf-icon",{key:"cab1bd987ea9e7390b6694a31183f867e4185124",name:"file-arrow-up"})),a("span",{key:"fbb198fd16117eef5d844f2c775ab09cc8ccd194",class:"title"},"Upload files"),a("span",{key:"121e3bb418bca550eed7f94de79c5c01b044a6dd",class:"subtitle"},"Drag and drop files here, or click to browse."),t&&a("span",{key:"d590def1f305c437444dd21caa268a93a1ab8444",class:"hint",id:"hint"},t)),e.length>0&&a("ul",{key:"3af82b2c94954b4d872b6dd5ddfaa24a1397b01c",class:"list",part:"list","aria-label":"Selected files"},e.map(((e,i)=>a("li",{class:"file",part:"file",key:c(e)},a("span",{class:"meta"},a("span",{class:"file-name"},e.name),a("span",{class:"file-size"},d(e.size))),a("button",{type:"button",class:"remove",part:"remove","aria-label":`Remove ${e.name}`,disabled:this.disabled,onClick:()=>this.removeAt(i)},a("pf-icon",{name:"circle-xmark","aria-hidden":"true"})))))),this.description&&a("p",{key:"95f9c54b3b9ad2e7e1a6e0cc7242e372b9720218",class:"description",part:"description",id:"description"},this.description),i&&a("p",{key:"e5f1e9164d1e6f03a9c6412b9446f7f03262fc65",class:"error",part:"error",id:"error"},i)))}static get formAssociated(){return true}static get watchers(){return{files:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],rejection:[{syncFormState:0}]}}static get style(){return b()}},[577,"pf-file-uploader",{name:[513],files:[1040],accept:[1],multiple:[516],maxFiles:[2,"max-files"],maxFileSize:[2,"max-file-size"],label:[1],description:[1],error:[1],required:[516],disabled:[516],rejection:[32],dragDepth:[32],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],open:[64]},undefined,{files:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],rejection:[{syncFormState:0}]}]);function v(){if(typeof customElements==="undefined"){return}const i=["pf-file-uploader","pf-icon"];i.forEach((i=>{switch(i){case"pf-file-uploader":if(!customElements.get(e(i))){customElements.define(e(i),m)}break;case"pf-icon":if(!customElements.get(e(i))){l()}break}}))}v();const g=m;const y=v;export{g as PfFileUploader,y as defineCustomElement};
+//# sourceMappingURL=pf-file-uploader.js.map

package/dist/components/pf-file-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["formatFileSize","bytes","Number","isFinite","Math","round","toFixed","fileKey","file","name","size","lastModified","mergeFileSelection","existing","incoming","multiple","slice","byKey","Map","key","has","set","values","fileMatchesAccept","accept","tokens","split","map","token","trim","toLowerCase","filter","Boolean","length","type","some","startsWith","endsWith","validateFileSelection","files","maxFiles","maxFileSize","wrongKind","find","oversized","fileLimitsHint","parts","push","join","pfFileUploaderCss","PfFileUploader","__stencil_proxyCustomElement","HTMLElement","internals","label","description","error","required","disabled","pfChange","pfReject","rejection","dragDepth","initialFiles","input","componentWillLoad","this","syncFormState","held","data","FormData","append","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","open","click","formResetCallback","undefined","limits","addFiles","selected","next","Array","from","value","emit","message","removeAt","index","_","position","onDragEnter","event","preventDefault","onDragLeave","max","onDrop","dataTransfer","render","hint","describedBy","composeDescribedBy","h","Host","class","part","htmlFor","ref","node","id","tabindex","onChange","target","dropzone","onClick","onDragOver"],"sources":["../core/dist/files.js","src/components/pf-file-uploader/pf-file-uploader.css?tag=pf-file-uploader&encapsulation=shadow","src/components/pf-file-uploader/pf-file-uploader.tsx"],"sourcesContent":["//#region src/files.ts\n/**\n* A size in the units a person reads.\n*\n* Binary steps with decimal names, which is what every file manager does.\n* `GB` is included because stopping at `MB` reads a 3 GB upload as\n* \"3072.0 MB\", and the whole point of the function is to be read.\n*/\nfunction formatFileSize(bytes) {\n\tif (!Number.isFinite(bytes) || bytes < 0) return \"0 B\";\n\tif (bytes < 1024) return `${Math.round(bytes)} B`;\n\tif (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;\n\tif (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;\n\treturn `${(bytes / 1024 ** 3).toFixed(1)} GB`;\n}\n/**\n* What makes two selections the same file.\n*\n* Name, size and modification time together, because a browser gives no file\n* identity of its own: picking the same file twice produces two distinct\n* `File` objects, and a consumer who adds `report.pdf` from two folders is\n* adding two files. `lastModified` is optional only so a plain object can\n* stand in for a `File` in a test.\n*/\nfunction fileKey(file) {\n\treturn `${file.name}-${file.size}-${file.lastModified ?? 0}`;\n}\n/**\n* The files a new selection leaves you holding.\n*\n* Appends for a multiple picker and replaces for a single one, then drops\n* duplicates by `fileKey` keeping the **first** of each — so re-picking a\n* file already held is a no-op rather than a reordering.\n*\n* Deliberately does not truncate to `maxFiles`. The React `FileUploader`\n* truncated first and validated afterwards, which made its \"You can upload up\n* to N files\" message unreachable: the list was already short enough by the\n* time it was checked, so the extra files vanished with nothing said. Merging\n* and validating are separate so the caller can refuse a selection instead of\n* quietly losing part of it.\n*/\nfunction mergeFileSelection(existing, incoming, { multiple = true } = {}) {\n\tif (!multiple) return incoming.slice(0, 1);\n\tconst byKey = /* @__PURE__ */ new Map();\n\tfor (const file of [...existing, ...incoming]) {\n\t\tconst key = fileKey(file);\n\t\tif (!byKey.has(key)) byKey.set(key, file);\n\t}\n\treturn [...byKey.values()];\n}\n/**\n* Whether a file is one of the kinds an `accept` list allows.\n*\n* The three forms a file input takes, and nothing else: an extension\n* (`.pdf`), a type (`image/png`) and a wildcard type (`image/*`). No list at\n* all allows everything.\n*\n* It exists because `accept` only filters the file *picker*. A **dropped**\n* file is never filtered by anything, so a dropzone that trusts the attribute\n* accepts whatever is dragged onto it — which is what both layers did.\n*/\nfunction fileMatchesAccept(file, accept) {\n\tconst tokens = (accept ?? \"\").split(\",\").map((token) => token.trim().toLowerCase()).filter(Boolean);\n\tif (tokens.length === 0) return true;\n\tconst name = file.name.toLowerCase();\n\tconst type = (file.type ?? \"\").toLowerCase();\n\treturn tokens.some((token) => {\n\t\tif (token.startsWith(\".\")) return name.endsWith(token);\n\t\tif (token.endsWith(\"/*\")) return type.startsWith(`${token.slice(0, -1)}`);\n\t\treturn type === token;\n\t});\n}\n/**\n* What is wrong with a selection, as a sentence to show, or `null`.\n*\n* Each check names the offending file, because \"one of these is wrong\" is not\n* something a person can act on, and the kind is reported before the size\n* because it is the more specific complaint. `maxFileSize` and `maxFiles` are\n* honoured whenever they are finite and non-negative — the React version\n* tested them for truthiness, so a limit of `0`, which is a way of saying\n* \"nothing may be uploaded\", silently allowed everything.\n*/\nfunction validateFileSelection(files, { maxFiles, maxFileSize, accept } = {}) {\n\tif (accept) {\n\t\tconst wrongKind = files.find((file) => !fileMatchesAccept(file, accept));\n\t\tif (wrongKind) return `\"${wrongKind.name}\" is not an accepted file type.`;\n\t}\n\tif (typeof maxFileSize === \"number\" && maxFileSize >= 0) {\n\t\tconst oversized = files.find((file) => file.size > maxFileSize);\n\t\tif (oversized) return `\"${oversized.name}\" exceeds the ${formatFileSize(maxFileSize)} size limit.`;\n\t}\n\tif (typeof maxFiles === \"number\" && maxFiles >= 0 && files.length > maxFiles) return `You can upload up to ${maxFiles} file${maxFiles === 1 ? \"\" : \"s\"}.`;\n\treturn null;\n}\n/**\n* The hint under a dropzone: what is accepted, how big, how many.\n*\n* In core rather than in each layer because it is the one place the three\n* limits are described to a person, and two layers describing them\n* differently is worse than either wording.\n*/\nfunction fileLimitsHint(accept, { maxFiles, maxFileSize } = {}) {\n\tconst parts = [];\n\tif (accept) parts.push(`Accepted: ${accept}`);\n\tif (typeof maxFileSize === \"number\" && maxFileSize >= 0) parts.push(`Max size: ${formatFileSize(maxFileSize)}`);\n\tif (typeof maxFiles === \"number\" && maxFiles >= 0) parts.push(`Max files: ${maxFiles}`);\n\treturn parts.join(\" | \");\n}\n//#endregion\nexport { fileKey, fileLimitsHint, fileMatchesAccept, formatFileSize, mergeFileSelection, validateFileSelection };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-field-label);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-field-description);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-field-error);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n/*\n * The input is reached only through the dropzone, never directly: it is out of\n * the tab order and out of the accessibility tree, and the button is the\n * control. Hidden with the clip-path idiom rather than `display: none`,\n * because a `display: none` file input cannot be opened with `.click()` in\n * every browser.\n */\n.input {\n  border: 0;\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.dropzone {\n  align-items: center;\n  background: var(--pf-file-uploader-bg);\n  border: 1px dashed var(--pf-file-uploader-border-strong);\n  border-radius: var(--radius-md);\n  color: var(--pf-file-uploader-text);\n  cursor: pointer;\n  display: grid;\n  font: inherit;\n  gap: var(--space-1);\n  justify-items: center;\n  padding: var(--space-5) var(--space-4);\n  text-align: center;\n  transition: all var(--pf-transition-fast);\n  width: 100%;\n}\n\n.dropzone:hover:not(:disabled) {\n  background: var(--pf-file-uploader-bg-subtle);\n}\n\n.dropzone:focus-visible {\n  box-shadow: var(--pf-file-uploader-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.dropzone--active {\n  background: var(--pf-file-uploader-bg-subtle);\n  border-color: var(--pf-file-uploader-active-border);\n}\n\n.dropzone--invalid {\n  border-color: var(--pf-file-uploader-invalid-border);\n}\n\n.dropzone:disabled {\n  cursor: not-allowed;\n  opacity: var(--pf-file-uploader-disabled-opacity, 0.5);\n}\n\n.icon {\n  color: var(--pf-file-uploader-text-muted);\n  font-size: var(--font-size-xl);\n}\n\n.title {\n  font-weight: var(--font-weight-semibold);\n}\n\n.subtitle,\n.hint {\n  color: var(--pf-file-uploader-text-muted);\n  font-size: var(--font-size-sm);\n}\n\n.hint {\n  font-size: var(--font-size-xs);\n}\n\n.list {\n  display: grid;\n  gap: var(--space-1);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.file {\n  align-items: center;\n  background: var(--pf-file-uploader-bg-subtle);\n  border: 1px solid var(--pf-file-uploader-border);\n  border-radius: var(--radius-sm);\n  display: flex;\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n}\n\n/* The name takes the slack, so the size and the button sit at the far edge. */\n.meta {\n  display: flex;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n.file-name {\n  color: var(--pf-file-uploader-text);\n  font-size: var(--font-size-sm);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-size {\n  color: var(--pf-file-uploader-text-muted);\n  flex: 0 0 auto;\n  font-size: var(--font-size-xs);\n}\n\n.remove {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-file-uploader-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.remove:hover:not(:disabled) {\n  color: var(--pf-file-uploader-text);\n}\n\n.remove:focus-visible {\n  box-shadow: var(--pf-file-uploader-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.remove:disabled {\n  cursor: not-allowed;\n  opacity: var(--pf-file-uploader-disabled-opacity, 0.5);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropzone {\n    transition: none;\n  }\n}\n","import {\n  composeDescribedBy,\n  fileKey,\n  fileLimitsHint,\n  formatFileSize,\n  mergeFileSelection,\n  validateFileSelection,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated file picker with a dropzone.\n *\n * All of the rules are core's — how a size is written, what makes two\n * selections the same file, which files a selection leaves you with, what is\n * wrong with the result and how the limits are described — so this and the\n * React `FileUploader` cannot drift on any of them.\n *\n * It deliberately has **no Angular `ControlValueAccessor`**. The generator\n * offers accessors that write `value`, a number or `checked`, and this\n * control's value is a `File[]`: a text accessor would store `[object File]`.\n * An Angular consumer binds `[files]` and `(pfChange)`, and the submission\n * still works, because that goes through `ElementInternals` rather than\n * through the accessor.\n *\n * @part field - the wrapper around label, dropzone and messages.\n * @part label - the label element.\n * @part dropzone - the button that opens the picker and takes the drop.\n * @part icon - the dropzone's icon.\n * @part list - the list of chosen files.\n * @part file - one row of that list.\n * @part remove - a row's remove button.\n * @part description - the hint text.\n * @part error - the error message.\n */\n@Component({\n  tag: 'pf-file-uploader',\n  styleUrl: 'pf-file-uploader.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfFileUploader {\n  @AttachInternals() internals!: ElementInternals;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` content attribute rather than from this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The files chosen. A property only — there is no attribute that could\n   * carry a `File`.\n   */\n  @Prop({ mutable: true }) files: File[] = [];\n\n  /** The `accept` list, in the form an `<input type=\"file\">` takes. */\n  @Prop() accept?: string;\n\n  @Prop({ reflect: true }) multiple = true;\n\n  /** The most files that may be held at once. */\n  @Prop() maxFiles?: number;\n\n  /** The largest any one file may be, in bytes. */\n  @Prop() maxFileSize?: number;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  /** Error message from the consumer. Its presence marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the files held change, however they changed. */\n  @Event() pfChange!: EventEmitter<{ files: File[] }>;\n\n  /** Fires when a selection is refused, with the reason shown to the person. */\n  @Event() pfReject!: EventEmitter<{ message: string }>;\n\n  /** The uploader's own complaint about the last selection. */\n  @State() rejection?: string;\n\n  /**\n   * How deep the drag is.\n   *\n   * A counter rather than a boolean: `dragenter` and `dragleave` both bubble\n   * from the dropzone's own children, so moving the pointer from the icon to\n   * the title fires a leave and then an enter and a boolean flickers off. The\n   * React `FileUploader` has that flicker.\n   */\n  @State() dragDepth = 0;\n\n  /** What a form reset restores, captured before `files` can be replaced. */\n  private initialFiles: File[] = [];\n\n  private input?: HTMLInputElement;\n\n  componentWillLoad() {\n    this.initialFiles = [...(this.files ?? [])];\n    this.syncFormState();\n  }\n\n  @Watch('files')\n  @Watch('error')\n  @Watch('required')\n  // The uploader's own complaint is a real constraint failure, not only a\n  // message, so the validity has to follow it as well as the consumer's.\n  @Watch('rejection')\n  syncFormState() {\n    const held = this.files ?? [];\n\n    /*\n     * A `FormData` rather than a string, because one control here submits one\n     * entry per file — which is how a native multi-file input submits, and\n     * the only shape a server handling the form can use. `setFormValue`\n     * ignores the element's own `name` attribute when handed a `FormData`, so\n     * the key has to be built into it.\n     */\n    if (this.name && held.length > 0) {\n      const data = new FormData();\n      for (const file of held) data.append(this.name, file);\n      this.internals.setFormValue(data);\n    } else {\n      // `null`, not an empty string: a file input with nothing chosen is\n      // absent from the submission entirely.\n      this.internals.setFormValue(null);\n    }\n\n    applyControlValidity(\n      this.internals,\n      held.length > 0,\n      this.required,\n      this.error ?? this.rejection,\n    );\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** Opens the file picker, as clicking the dropzone does. */\n  @Method()\n  async open() {\n    if (!this.disabled) this.input?.click();\n  }\n\n  /**\n   * A reset restores the files the control started with, not an empty list —\n   * the rule a native `<input value=\"initial\">` follows.\n   */\n  formResetCallback() {\n    this.files = [...this.initialFiles];\n    this.rejection = undefined;\n    this.dragDepth = 0;\n  }\n\n  private get limits() {\n    return { maxFiles: this.maxFiles, maxFileSize: this.maxFileSize, accept: this.accept };\n  }\n\n  private addFiles(selected: FileList | null) {\n    if (!selected || this.disabled) return;\n\n    const next = mergeFileSelection(this.files ?? [], Array.from(selected), {\n      multiple: this.multiple,\n    });\n\n    /*\n     * `accept` is checked here as well as set on the input, because the\n     * attribute filters the *picker* and nothing else: a dropped file passes\n     * no filter at all.\n     */\n    const rejection = validateFileSelection(next, this.limits);\n\n    /*\n     * The input is cleared whichever way this goes. A file input fires no\n     * `change` for an identical selection, so a rejected value left in place\n     * means picking the same file again does nothing and the message stands\n     * with no way to retry.\n     */\n    if (this.input) this.input.value = '';\n\n    if (rejection) {\n      this.rejection = rejection;\n      this.pfReject.emit({ message: rejection });\n      return;\n    }\n\n    this.rejection = undefined;\n    this.files = next;\n    this.pfChange.emit({ files: next });\n  }\n\n  private removeAt(index: number) {\n    if (this.disabled) return;\n    const next = (this.files ?? []).filter((_, position) => position !== index);\n    this.rejection = undefined;\n    this.files = next;\n    this.pfChange.emit({ files: next });\n  }\n\n  private onDragEnter = (event: DragEvent) => {\n    event.preventDefault();\n    if (this.disabled) return;\n    this.dragDepth += 1;\n  };\n\n  private onDragLeave = (event: DragEvent) => {\n    event.preventDefault();\n    this.dragDepth = Math.max(0, this.dragDepth - 1);\n  };\n\n  private onDrop = (event: DragEvent) => {\n    event.preventDefault();\n    this.dragDepth = 0;\n    this.addFiles(event.dataTransfer?.files ?? null);\n  };\n\n  render() {\n    const held = this.files ?? [];\n    const message = this.error ?? this.rejection;\n    const hint = fileLimitsHint(this.accept, this.limits);\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      message && 'error',\n      hint && 'hint',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"dropzone\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          {/*\n            The input is in this shadow root, so it reaches no surrounding\n            form of its own — and is given no `name` for that reason. The\n            submission comes from `setFormValue` above.\n          */}\n          <input\n            ref={(node) => (this.input = node)}\n            id=\"input\"\n            class=\"input\"\n            type=\"file\"\n            accept={this.accept}\n            multiple={this.multiple}\n            disabled={this.disabled}\n            tabindex={-1}\n            aria-hidden=\"true\"\n            onChange={(event) => this.addFiles((event.target as HTMLInputElement).files)}\n          />\n\n          <button\n            id=\"dropzone\"\n            type=\"button\"\n            class={{\n              dropzone: true,\n              'dropzone--active': this.dragDepth > 0,\n              'dropzone--invalid': Boolean(message),\n            }}\n            part=\"dropzone\"\n            disabled={this.disabled}\n            aria-invalid={message ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => this.open()}\n            onDragEnter={this.onDragEnter}\n            onDragOver={(event: DragEvent) => event.preventDefault()}\n            onDragLeave={this.onDragLeave}\n            onDrop={this.onDrop}\n          >\n            <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n              <pf-icon name=\"file-arrow-up\"></pf-icon>\n            </span>\n            <span class=\"title\">Upload files</span>\n            <span class=\"subtitle\">Drag and drop files here, or click to browse.</span>\n            {hint && (\n              <span class=\"hint\" id=\"hint\">\n                {hint}\n              </span>\n            )}\n          </button>\n\n          {held.length > 0 && (\n            <ul class=\"list\" part=\"list\" aria-label=\"Selected files\">\n              {held.map((file, index) => (\n                <li class=\"file\" part=\"file\" key={fileKey(file)}>\n                  <span class=\"meta\">\n                    <span class=\"file-name\">{file.name}</span>\n                    <span class=\"file-size\">{formatFileSize(file.size)}</span>\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"remove\"\n                    part=\"remove\"\n                    aria-label={`Remove ${file.name}`}\n                    disabled={this.disabled}\n                    onClick={() => this.removeAt(index)}\n                  >\n                    <pf-icon name=\"circle-xmark\" aria-hidden=\"true\"></pf-icon>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          {message && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {message}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as t,h as r,a as s}from"./index.js";import{g as i,c}from"./p-BA6CMosJ.js";const n=()=>`:host{align-items:center;display:inline-flex;justify-content:center;position:relative}:host([hidden]){display:none}.svg{inset:0;position:absolute}.track{stroke:var(--pf-gauge-track-color)}.fill{animation:pf-gauge-fill var(--duration-slow) var(--easing-decelerate);stroke-dashoffset:var(--pf-gauge-offset);transition:stroke-dashoffset var(--pf-transition-medium)}@keyframes pf-gauge-fill{from{stroke-dashoffset:var(--pf-gauge-circumference)}}@media (prefers-reduced-motion: reduce){.fill{animation:none;transition:none}}.center{align-items:center;background:var(--pf-gauge-center-bg);border-radius:var(--radius-full);display:flex;flex-direction:column;gap:var(--space-1);justify-content:center;padding:var(--space-2);position:relative;text-align:center;z-index:1}.label{color:var(--pf-gauge-label-color);font-size:var(--pf-gauge-label-size);font-weight:var(--font-weight-semibold);line-height:1}::slotted([slot='sub']){color:var(--pf-gauge-sub-label-color);font-size:var(--font-size-sm);line-height:1}`;const o=a(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}value=0;max=100;size=200;strokeWidth=16;color;label="Gauge";render(){const e=Number(this.size)||200;const a=Number(this.strokeWidth)||16;const t=Math.round(c(Number(this.value),Number(this.max)));const{radius:n,circumference:o,dashOffset:l,center:f}=i(e,a,t);const d=this.color??"var(--pf-gauge-color)";return r(s,{key:"4b68ce456d9e35a64fa2eb16dbcaf7b3d7d8c39a",role:"meter","aria-label":this.label,"aria-valuenow":String(this.value),"aria-valuemin":"0","aria-valuemax":String(this.max),"aria-valuetext":`${t}%`,style:{width:`${e}px`,height:`${e}px`}},r("svg",{key:"cfec8943ae89a32ebb53b7590a16a5cb9c7650bd",class:"svg",part:"svg",width:e,height:e,viewBox:`0 0 ${e} ${e}`,"aria-hidden":"true"},r("circle",{key:"1b582bd780e9eef61d64fd9422881c3bd2980410",class:"track",part:"track",cx:f,cy:f,r:n,fill:"none","stroke-width":a}),r("circle",{key:"f1b871cc4f6c0e30f1f0ed2f97ed947f0733d197",class:"fill",part:"fill",cx:f,cy:f,r:n,fill:"none",stroke:d,"stroke-width":a,"stroke-linecap":"round","stroke-dasharray":o,style:{transform:"rotate(-90deg)",transformOrigin:`${f}px ${f}px`,"--pf-gauge-circumference":String(o),"--pf-gauge-offset":String(l)}})),r("div",{key:"ca9e8e0cbad4c53bd7b6d1f2cb032ac0e655e728",class:"center",part:"center","aria-hidden":"true"},r("span",{key:"c41cc2ff253f428c8f5a23ec1d8e63aa905ac7d5",class:"label",part:"label"},r("slot",{key:"491591bff197590cf4dc3431603494879f24652e",name:"center"},t,"%")),r("slot",{key:"2027cd831a0e13b89616a3a2e667a1a952fcdf5d",name:"sub"})))}static get style(){return n()}},[769,"pf-gauge-chart",{value:[2],max:[2],size:[2],strokeWidth:[2,"stroke-width"],color:[1],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const a=["pf-gauge-chart"];a.forEach((a=>{switch(a){case"pf-gauge-chart":if(!customElements.get(e(a))){customElements.define(e(a),o)}break}}))}l();const f=o;const d=l;export{f as PfGaugeChart,d as defineCustomElement};
+//# sourceMappingURL=pf-gauge-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfGaugeChartCss","PfGaugeChart","__stencil_proxyCustomElement","HTMLElement","value","max","size","strokeWidth","color","label","render","Number","this","percent","Math","round","clampProgressPercent","radius","circumference","dashOffset","center","getProgressCircleGeometry","stroke","h","Host","key","role","String","style","width","height","class","part","viewBox","cx","cy","r","fill","transform","transformOrigin","name"],"sources":["src/components/pf-gauge-chart/pf-gauge-chart.css?tag=pf-gauge-chart&encapsulation=shadow","src/components/pf-gauge-chart/pf-gauge-chart.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  inset: 0;\n  position: absolute;\n}\n\n.track {\n  stroke: var(--pf-gauge-track-color);\n}\n\n.fill {\n  /*\n   * The animation and the transition together: the first fills the arc in on\n   * first paint, the second carries it between values afterwards. A\n   * `--pf-transition-*` alias where the raw duration tokens would do, because\n   * an alias cannot be half-right.\n   */\n  animation: pf-gauge-fill var(--duration-slow) var(--easing-decelerate);\n  stroke-dashoffset: var(--pf-gauge-offset);\n  transition: stroke-dashoffset var(--pf-transition-medium);\n}\n\n/*\n * Its own copy: `@keyframes` do not cross a shadow boundary, so the React\n * library's global declaration is invisible here.\n */\n@keyframes pf-gauge-fill {\n  from {\n    stroke-dashoffset: var(--pf-gauge-circumference);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    animation: none;\n    transition: none;\n  }\n}\n\n.center {\n  align-items: center;\n  background: var(--pf-gauge-center-bg);\n  border-radius: var(--radius-full);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  justify-content: center;\n  padding: var(--space-2);\n  position: relative;\n  text-align: center;\n  z-index: 1;\n}\n\n.label {\n  color: var(--pf-gauge-label-color);\n  font-size: var(--pf-gauge-label-size);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1;\n}\n\n/*\n * The slotted sub-label itself, with no wrapper of ours around it: an\n * unassigned slot is `display: contents` and generates nothing, so a gauge\n * with no sub-label lays out nothing extra. A wrapper would still be a flex\n * item costing the `--space-1` gap, and could not be collapsed from CSS —\n * `:has()` cannot ask whether a slot has assigned content, because assigned\n * nodes are not the slot's children.\n */\n::slotted([slot='sub']) {\n  color: var(--pf-gauge-sub-label-color);\n  font-size: var(--font-size-sm);\n  line-height: 1;\n}\n","import { clampProgressPercent, getProgressCircleGeometry } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single value drawn as a filled arc, with a label in the middle.\n *\n * The geometry is `getProgressCircleGeometry`, which `pf-progress-circle` and\n * the React `ProgressCircle` already share: the dash offset only lands on the\n * right angle if it and the circumference came from the same radius, and the\n * radius has to be inset by half the stroke or half of it paints outside the\n * viewBox.\n *\n * It names itself with `label` where the React `GaugeChart` puts the\n * percentage in `aria-label`. A meter's name should say what is being\n * measured; the value belongs in `aria-valuetext`, which is where a reader\n * looks for it, and announcing \"73%\" as the name of a thing leaves a reader\n * with no idea what is 73% full.\n *\n * @slot center - replaces the percentage in the middle.\n * @slot sub - a second line under it.\n * @part svg - the arc's canvas.\n * @part track - the unfilled ring.\n * @part fill - the filled arc.\n * @part center - the box in the middle.\n * @part label - the big number.\n */\n@Component({\n  tag: 'pf-gauge-chart',\n  styleUrl: 'pf-gauge-chart.css',\n  shadow: true,\n})\nexport class PfGaugeChart {\n  @Prop() value = 0;\n\n  @Prop() max = 100;\n\n  /** Diameter, in pixels. */\n  @Prop() size = 200;\n\n  /** The arc's thickness, in pixels. */\n  @Prop() strokeWidth = 16;\n\n  /** Overrides the token colour. */\n  @Prop() color?: string;\n\n  /** What is being measured. The meter's accessible name. */\n  @Prop() label = 'Gauge';\n\n  render() {\n    const size = Number(this.size) || 200;\n    const strokeWidth = Number(this.strokeWidth) || 16;\n    const percent = Math.round(clampProgressPercent(Number(this.value), Number(this.max)));\n    const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(\n      size,\n      strokeWidth,\n      percent,\n    );\n    const stroke = this.color ?? 'var(--pf-gauge-color)';\n\n    return (\n      <Host\n        role=\"meter\"\n        aria-label={this.label}\n        aria-valuenow={String(this.value)}\n        aria-valuemin=\"0\"\n        aria-valuemax={String(this.max)}\n        aria-valuetext={`${percent}%`}\n        style={{ width: `${size}px`, height: `${size}px` }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          width={size}\n          height={size}\n          viewBox={`0 0 ${size} ${size}`}\n          aria-hidden=\"true\"\n        >\n          <circle\n            class=\"track\"\n            part=\"track\"\n            cx={center}\n            cy={center}\n            r={radius}\n            fill=\"none\"\n            stroke-width={strokeWidth}\n          />\n          {/* Rotated so the arc starts at twelve o'clock rather than at three. */}\n          <circle\n            class=\"fill\"\n            part=\"fill\"\n            cx={center}\n            cy={center}\n            r={radius}\n            fill=\"none\"\n            stroke={stroke}\n            stroke-width={strokeWidth}\n            stroke-linecap=\"round\"\n            stroke-dasharray={circumference}\n            style={{\n              transform: 'rotate(-90deg)',\n              transformOrigin: `${center}px ${center}px`,\n              '--pf-gauge-circumference': String(circumference),\n              '--pf-gauge-offset': String(dashOffset),\n            }}\n          />\n        </svg>\n\n        <div class=\"center\" part=\"center\" aria-hidden=\"true\">\n          <span class=\"label\" part=\"label\">\n            <slot name=\"center\">{percent}%</slot>\n          </span>\n          {/*\n            No wrapper around this slot. An *unassigned* slot is\n            `display: contents` and generates nothing, so nothing is laid out\n            when there is no sub-label — where a wrapper would still be a flex\n            item and still cost the `--space-1` gap above it, and could not be\n            collapsed from CSS: `:has()` on a slot's assigned content is not\n            expressible, because assigned nodes are not the slot's children.\n          */}\n          <slot name=\"sub\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iGAAA,MAAMA,EAAkB,IAAM,2+B,MC+BjBC,EAAYC,EAAA,MAAAD,UAAAE,E,iFACfC,MAAQ,EAERC,IAAM,IAGNC,KAAO,IAGPC,YAAc,GAGdC,MAGAC,MAAQ,QAEhB,MAAAC,GACE,MAAMJ,EAAOK,OAAOC,KAAKN,OAAS,IAClC,MAAMC,EAAcI,OAAOC,KAAKL,cAAgB,GAChD,MAAMM,EAAUC,KAAKC,MAAMC,EAAqBL,OAAOC,KAAKR,OAAQO,OAAOC,KAAKP,OAChF,MAAMY,OAAEA,EAAMC,cAAEA,EAAaC,WAAEA,EAAUC,OAAEA,GAAWC,EACpDf,EACAC,EACAM,GAEF,MAAMS,EAASV,KAAKJ,OAAS,wBAE7B,OACEe,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,QAAO,aACAd,KAAKH,MAAK,gBACPkB,OAAOf,KAAKR,OAAM,gBACnB,IAAG,gBACFuB,OAAOf,KAAKP,KAAI,iBACf,GAAGQ,KACnBe,MAAO,CAAEC,MAAO,GAAGvB,MAAUwB,OAAQ,GAAGxB,QAExCiB,EAAA,OAAAE,IAAA,2CACEM,MAAM,MACNC,KAAK,MACLH,MAAOvB,EACPwB,OAAQxB,EACR2B,QAAS,OAAO3B,KAAQA,IAAM,cAClB,QAEZiB,EAAA,UAAAE,IAAA,2CACEM,MAAM,QACNC,KAAK,QACLE,GAAId,EACJe,GAAIf,EACJgB,EAAGnB,EACHoB,KAAK,OAAM,eACG9B,IAGhBgB,EAAA,UAAAE,IAAA,2CACEM,MAAM,OACNC,KAAK,OACLE,GAAId,EACJe,GAAIf,EACJgB,EAAGnB,EACHoB,KAAK,OACLf,OAAQA,EAAM,eACAf,EAAW,iBACV,QAAO,mBACJW,EAClBU,MAAO,CACLU,UAAW,iBACXC,gBAAiB,GAAGnB,OAAYA,MAChC,2BAA4BO,OAAOT,GACnC,oBAAqBS,OAAOR,OAKlCI,EAAA,OAAAE,IAAA,2CAAKM,MAAM,SAASC,KAAK,SAAQ,cAAa,QAC5CT,EAAA,QAAAE,IAAA,2CAAMM,MAAM,QAAQC,KAAK,SACvBT,EAAA,QAAAE,IAAA,2CAAMe,KAAK,UAAU3B,EAAO,MAU9BU,EAAA,QAAAE,IAAA,2CAAMe,KAAK,S","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t as a,p as e,H as t,h as n,a as s}from"./index.js";import{r}from"./p-DToIJg5W.js";const i=()=>`:host{background:var(--pf-header-nav-bg);border:1px solid var(--pf-header-nav-border);border-radius:var(--pf-header-nav-radius, var(--radius-md));display:block;width:100%;--pf-nav-item-text:var(--pf-header-nav-text-muted);--pf-nav-item-hover-text:var(--pf-header-nav-text);--pf-nav-item-hover-bg:var(--pf-header-nav-bg-subtle);--pf-nav-item-current-text:var(--pf-header-nav-text);--pf-nav-item-current-bg:var(--pf-header-nav-bg-subtle)}:host([hidden]){display:none}.nav{align-items:center;display:grid;gap:var(--space-3);grid-template-columns:1fr;min-height:var(--pf-header-nav-min-height, 56px);padding:var(--space-3)}@media (min-width: 768px){.nav{grid-template-columns:auto 1fr auto;padding:0 var(--space-4)}}.brand{color:var(--pf-header-nav-text);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);white-space:nowrap}.list{align-items:center;display:flex;gap:var(--space-1);list-style:none;margin:0;overflow-x:auto;padding:0}.list slot{display:contents}.actions{align-items:center;display:inline-flex;gap:var(--space-2)}.brand.empty,.actions.empty{display:none}`;const o=e(class a extends t{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}label="Header navigation";hasBrand=false;hasActions=false;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleStructureChange(a){a.stopPropagation();this.sync()}async refresh(){this.sync()}get items(){return Array.from(this.el.querySelectorAll("pf-nav-item")).filter((a=>a.parentElement===this.el))}isCurrent(a){return a.current??a.hasAttribute("current")}sync(){const a=a=>Array.from(this.el.children).some((e=>e.getAttribute("slot")===a));this.hasBrand=a("brand");this.hasActions=a("actions");const e=this.items;const t=r(e.map((a=>({current:this.isCurrent(a)}))));for(const[a,n]of e.entries()){const e=n;e.currentPage=a===t;e.orientation="horizontal"}}render(){return n(s,{key:"f3f8c91ba9eab4755b1e5e96adc7245e630bd7fa"},n("nav",{key:"7984894e4bcc395140ef229f351bbc037efa565e",class:"nav",part:"nav","aria-label":this.label},n("span",{key:"fc21f987ab7f5ac3c74779157f70a23c5375cb27",class:{brand:true,empty:!this.hasBrand},part:"brand"},n("slot",{key:"bb68a3a686be890c522671f3d6a569f438275631",name:"brand",onSlotchange:()=>this.refresh()})),n("ul",{key:"43f0bb0d2d82497373ac74bfda26d9e2e545932e",class:"list",part:"list"},n("slot",{key:"30be86d24556bd3521642ee79195a2af6a8c70c9",onSlotchange:()=>this.refresh()})),n("span",{key:"687115f0db5bb7f35a82bb1b5dd79234a0049c99",class:{actions:true,empty:!this.hasActions},part:"actions"},n("slot",{key:"f11f998414c8a424d64ddf759369a31b9ddbd0bb",name:"actions",onSlotchange:()=>this.refresh()}))))}static get style(){return i()}},[769,"pf-header-navigation",{label:[1],hasBrand:[32],hasActions:[32],refresh:[64]},[[0,"pfNavStructure","handleStructureChange"]]]);function d(){if(typeof customElements==="undefined"){return}const e=["pf-header-navigation"];e.forEach((e=>{switch(e){case"pf-header-navigation":if(!customElements.get(a(e))){customElements.define(a(e),o)}break}}))}d();const c=o;const f=d;export{c as PfHeaderNavigation,f as defineCustomElement};
+//# sourceMappingURL=pf-header-navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfHeaderNavigationCss","PfHeaderNavigation","__stencil_proxyCustomElement","HTMLElement","label","hasBrand","hasActions","componentWillLoad","this","sync","componentDidLoad","handleStructureChange","event","stopPropagation","refresh","items","Array","from","el","querySelectorAll","filter","item","parentElement","isCurrent","current","hasAttribute","slotted","name","children","some","child","getAttribute","currentIndex","resolveCurrentNavItem","map","index","entries","node","currentPage","orientation","render","h","Host","key","class","part","brand","empty","onSlotchange","actions"],"sources":["src/components/pf-header-navigation/pf-header-navigation.css?tag=pf-header-navigation&encapsulation=shadow","src/components/pf-header-navigation/pf-header-navigation.tsx"],"sourcesContent":[":host {\n  background: var(--pf-header-nav-bg);\n  border: 1px solid var(--pf-header-nav-border);\n  border-radius: var(--pf-header-nav-radius, var(--radius-md));\n  display: block;\n  width: 100%;\n\n  /*\n   * The bridge to the shared item: custom properties inherit through a shadow\n   * boundary, so a slotted `pf-nav-item` resolves these inside its own shadow\n   * root. It is how one element serves two navigations without\n   * `:host-context`, which Firefox does not support.\n   */\n  --pf-nav-item-text: var(--pf-header-nav-text-muted);\n  --pf-nav-item-hover-text: var(--pf-header-nav-text);\n  --pf-nav-item-hover-bg: var(--pf-header-nav-bg-subtle);\n  --pf-nav-item-current-text: var(--pf-header-nav-text);\n  --pf-nav-item-current-bg: var(--pf-header-nav-bg-subtle);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Mobile first: one column, the items wrapping under the brand. */\n.nav {\n  align-items: center;\n  display: grid;\n  gap: var(--space-3);\n  grid-template-columns: 1fr;\n  min-height: var(--pf-header-nav-min-height, 56px);\n  padding: var(--space-3);\n}\n\n@media (--md) {\n  .nav {\n    grid-template-columns: auto 1fr auto;\n    padding: 0 var(--space-4);\n  }\n}\n\n.brand {\n  color: var(--pf-header-nav-text);\n  font-size: var(--font-size-md);\n  font-weight: var(--font-weight-semibold);\n  white-space: nowrap;\n}\n\n.list {\n  align-items: center;\n  display: flex;\n  gap: var(--space-1);\n  list-style: none;\n  margin: 0;\n  overflow-x: auto;\n  padding: 0;\n}\n\n/*\n * The items have to be flex children of the list, not of a box inside it. The\n * UA stylesheet already gives a slot `display: contents`; this says so out\n * loud.\n */\n.list slot {\n  display: contents;\n}\n\n.actions {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n/*\n * Both classes rather than a bare `.empty`, so the rule does not depend on\n * sitting below the `display` a box sets on itself: specificity ties break on\n * source order, and `.empty` losing that way is how a bare `pf-metric-card`\n * came to draw all three of its boxes.\n */\n.brand.empty,\n.actions.empty {\n  display: none;\n}\n","import { resolveCurrentNavItem } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\n\n/**\n * A header navigation over `pf-nav-item` children.\n *\n * The group owns the one thing an item cannot know: which item is the current\n * page. Core's rule decides, so the React `HeaderNavigation` marks the same\n * one, and it is one index — which is what stops a navigation claiming two\n * current pages.\n *\n * The host is **not** a banner. The React component renders a `<header>`,\n * which is the banner landmark at the top level of a page, but an element\n * cannot know whether it is the page's header: a second banner is a defect,\n * not a decoration. So the shadow root renders only the `<nav>` landmark, and\n * a consumer who wants a banner puts this inside their own `<header>`.\n *\n * @slot - the `pf-nav-item` children.\n * @slot brand - a logo or product name, before the items.\n * @slot actions - controls after the items, such as a sign-in button.\n * @part nav - the navigation landmark.\n * @part brand - the brand's box.\n * @part list - the list the items are slotted into.\n * @part actions - the actions' box.\n */\n@Component({\n  tag: 'pf-header-navigation',\n  styleUrl: 'pf-header-navigation.css',\n  shadow: true,\n})\nexport class PfHeaderNavigation {\n  @Element() el!: HTMLElement;\n\n  /** The navigation's accessible name. */\n  @Prop() label = 'Header navigation';\n\n  /**\n   * Whether anything was slotted into `brand` and `actions`.\n   *\n   * Asked in JS because a wrapper around a slot cannot be collapsed from CSS\n   * — `:not(:has(*))` never matches, since the `<slot>` is itself a child —\n   * and these two boxes have to exist when they are used: they are grid\n   * items, so an empty one still takes a column and a gap, which would push\n   * every item along by one `--space-3` for no visible reason.\n   */\n  @State() hasBrand = false;\n  @State() hasActions = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * An item's `current` changed, so the resolution has to run again.\n   *\n   * The items are this navigation's own light-DOM children, so nothing is\n   * retargeted and a host listener is safe — the same reason the sidebar can\n   * listen for a section's copy of this event. `refresh()` stays for a\n   * consumer who changes something else the group reads.\n   */\n  @Listen('pfNavStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  /**\n   * Re-reads the items, for a consumer who changed something the group reads\n   * and has no event for.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested navigation owns its own items. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-nav-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the item has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(item: HTMLElement) {\n    return (item as HTMLElement & { current?: boolean }).current ?? item.hasAttribute('current');\n  }\n\n  private sync() {\n    /*\n     * The children are read one by one rather than with a `:scope >`\n     * selector, which Stencil's mock DOM does not support at all — it throws\n     * from jQuery's selector engine rather than returning nothing.\n     */\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasBrand = slotted('brand');\n    this.hasActions = slotted('actions');\n\n    const items = this.items;\n    const currentIndex = resolveCurrentNavItem(\n      items.map((item) => ({ current: this.isCurrent(item) })),\n    );\n\n    for (const [index, item] of items.entries()) {\n      const node = item as HTMLElement & { currentPage: boolean; orientation: string };\n      node.currentPage = index === currentIndex;\n      node.orientation = 'horizontal';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"nav\" part=\"nav\" aria-label={this.label}>\n          {/*\n            The slots stay in the tree whether or not they hold anything: a\n            slot that is not rendered never fires `slotchange`, so content\n            added later would stay invisible for good. The box is hidden\n            instead.\n          */}\n          <span class={{ brand: true, empty: !this.hasBrand }} part=\"brand\">\n            <slot name=\"brand\" onSlotchange={() => this.refresh()} />\n          </span>\n\n          <ul class=\"list\" part=\"list\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n\n          <span class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n            <slot name=\"actions\" onSlotchange={() => this.refresh()} />\n          </span>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0FAAA,MAAMA,EAAwB,IAAM,+jC,MC8BvBC,EAAkBC,EAAA,MAAAD,UAAAE,E,sGAIrBC,MAAQ,oBAWPC,SAAW,MACXC,WAAa,MAGtB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAYP,qBAAAE,CAAsBC,GACpBA,EAAMC,kBACNL,KAAKC,M,CAQP,aAAMK,GACJN,KAAKC,M,CAIP,SAAYM,GACV,OAAOC,MAAMC,KAAKT,KAAKU,GAAGC,iBAA8B,gBAAgBC,QACrEC,GAASA,EAAKC,gBAAkBd,KAAKU,I,CAQlC,SAAAK,CAAUF,GAChB,OAAQA,EAA6CG,SAAWH,EAAKI,aAAa,U,CAG5E,IAAAhB,GAMN,MAAMiB,EAAWC,GACfX,MAAMC,KAAKT,KAAKU,GAAGU,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYJ,IAE9EnB,KAAKH,SAAWqB,EAAQ,SACxBlB,KAAKF,WAAaoB,EAAQ,WAE1B,MAAMX,EAAQP,KAAKO,MACnB,MAAMiB,EAAeC,EACnBlB,EAAMmB,KAAKb,IAAI,CAAQG,QAAShB,KAAKe,UAAUF,QAGjD,IAAK,MAAOc,EAAOd,KAASN,EAAMqB,UAAW,CAC3C,MAAMC,EAAOhB,EACbgB,EAAKC,YAAcH,IAAUH,EAC7BK,EAAKE,YAAc,Y,EAIvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,MAAMC,KAAK,MAAK,aAAarC,KAAKJ,OAO3CqC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEE,MAAO,KAAMC,OAAQvC,KAAKH,UAAYwC,KAAK,SACxDJ,EAAA,QAAAE,IAAA,2CAAMhB,KAAK,QAAQqB,aAAc,IAAMxC,KAAKM,aAG9C2B,EAAA,MAAAE,IAAA,2CAAIC,MAAM,OAAOC,KAAK,QACpBJ,EAAA,QAAAE,IAAA,2CAAMK,aAAc,IAAMxC,KAAKM,aAGjC2B,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEK,QAAS,KAAMF,OAAQvC,KAAKF,YAAcuC,KAAK,WAC5DJ,EAAA,QAAAE,IAAA,2CAAMhB,KAAK,UAAUqB,aAAc,IAAMxC,KAAKM,c","ignoreList":[]}

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

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

package/dist/components/pf-heatmap.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,h as s,a as r}from"./index.js";import{p as l,t as n,g as i,f as o}from"./p-C9jNMqLs.js";var c=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var p=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function d(e,t,a){const s=e.map((e=>e.date)).filter((e=>l(e)!==null)).sort();const r=l(t??s[0]);const n=l(a??s[s.length-1]);if(!r||!n)return null;if(n<r)return null;return{start:r,end:n}}function m(e,t,a=0){const s=n(e);const r=n(t);const l=(s.getDay()-a+7)%7;const c=[];let p=i(s,-l);while(p<=r&&c.length<400){const e=[];for(let t=0;t<7;t+=1){e.push({iso:o(p),date:p,inRange:p>=s&&p<=r});p=i(p,1)}c.push(e)}return c}function h(e){let t=0;let a=0;for(const s of e){if(!Number.isFinite(s.value))continue;t=Math.max(t,s.value);a+=s.value}return{max:t,total:a}}function f(e,t,a){const s=Math.max(2,Math.floor(a)||2);if(!Number.isFinite(e)||e<=0||!(t>0))return 0;return Math.min(s-1,Math.max(1,Math.ceil(e/t*(s-1))))}function u(e,t){if(e<=0)return"var(--pf-heatmap-empty)";const a=Math.max(2,Math.floor(t)||2);return`color-mix(in srgb, var(--pf-heatmap-color) ${Math.round(Math.min(e,a-1)/(a-1)*100)}%, var(--pf-heatmap-empty))`}function y(e){const t=[];let a=-1;for(const[s,r]of e.entries()){const e=r.find((e=>e.inRange));if(!e)continue;const l=e.date.getMonth();if(l!==a){t.push({column:s+1,label:c[l]});a=l}}return t}const g=()=>`:host{display:inline-block;font-family:var(--font-family-sans);max-width:100%;overflow-x:auto}:host([hidden]){display:none}.empty{color:var(--pf-heatmap-empty-text);font-size:var(--font-size-sm);padding:var(--space-4);text-align:center}.body{display:flex;gap:var(--pf-heatmap-cell-gap)}.weekdays{display:flex;flex-direction:column}.weekday-spacer{display:block;height:calc(var(--font-size-xs) + var(--space-1))}.weekday-grid{display:grid;gap:var(--pf-heatmap-cell-gap);grid-template-rows:repeat(7, var(--pf-heatmap-cell-size))}.weekday{align-items:center;color:var(--pf-heatmap-label-color);display:flex;font-size:var(--font-size-xs);line-height:1;padding-inline-end:var(--space-1)}.main{display:flex;flex-direction:column;gap:var(--space-1)}.months{display:grid;gap:var(--pf-heatmap-cell-gap);height:var(--font-size-xs)}.month{color:var(--pf-heatmap-label-color);font-size:var(--font-size-xs);line-height:1}.grid{display:grid;gap:var(--pf-heatmap-cell-gap);grid-auto-columns:var(--pf-heatmap-cell-size);grid-auto-flow:column;grid-template-rows:repeat(7, var(--pf-heatmap-cell-size))}.cell{animation:pf-heatmap-cell-in var(--duration-moderate) var(--easing-decelerate) both;border-radius:var(--pf-heatmap-cell-radius);height:var(--pf-heatmap-cell-size);width:var(--pf-heatmap-cell-size)}.cell--empty{background:transparent}@keyframes pf-heatmap-cell-in{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.cell{animation:none}}`;const v=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}data=[];startDate;endDate;levels=5;weekStartsOn=0;cellSize=12;cellGap=3;showWeekdayLabels=true;showMonthLabels=true;label;get entries(){const e=this.data;if(Array.isArray(e))return e;try{const t=JSON.parse(String(e||"[]"));return Array.isArray(t)?t:[]}catch{return[]}}get weekStart(){return Number(this.weekStartsOn)===1?1:0}render(){const e=this.entries;const t=d(e,this.startDate,this.endDate);const a=Number(this.cellSize)||12;const l=Number(this.cellGap)||3;if(!t){return s(r,null,s("div",{class:"empty",part:"empty"},s("slot",{name:"empty"},"No data")))}const{start:n,end:i}=t;const c=Number(this.levels);const g=new Map(e.map((e=>[e.date,e.value])));const{max:v,total:b}=h(e);const w=m(n,i,this.weekStart);const k=y(w);return s(r,{role:"img","aria-label":this.label??`Activity heatmap from ${o(n)} to ${o(i)}, ${b} total`,style:{"--pf-heatmap-cell-size":`${a}px`,"--pf-heatmap-cell-gap":`${l}px`}},s("div",{class:"body"},this.showWeekdayLabels&&s("div",{class:"weekdays",part:"weekdays"},this.showMonthLabels&&s("span",{class:"weekday-spacer","aria-hidden":"true"}),s("div",{class:"weekday-grid"},Array.from({length:7},((e,t)=>s("span",{class:"weekday"},t%2===1?p[(this.weekStart+t)%7]:""))))),s("div",{class:"main"},this.showMonthLabels&&s("div",{class:"months",part:"months","aria-hidden":"true",style:{gridTemplateColumns:`repeat(${w.length}, var(--pf-heatmap-cell-size))`}},k.map((e=>s("span",{class:"month",style:{gridColumnStart:String(e.column)}},e.label)))),s("div",{class:"grid",part:"grid"},w.flatMap(((e,t)=>e.map((e=>e.inRange?s("span",{class:"cell",part:"cell",title:`${e.iso}: ${g.get(e.iso)??0}`,"data-level":String(f(g.get(e.iso)??0,v,c)),style:{background:u(f(g.get(e.iso)??0,v,c),c),animationDelay:`${t*8}ms`}}):s("span",{class:"cell cell--empty"})))))))))}static get style(){return g()}},[769,"pf-heatmap",{data:[1],startDate:[1,"start-date"],endDate:[1,"end-date"],levels:[2],weekStartsOn:[2,"week-starts-on"],cellSize:[2,"cell-size"],cellGap:[2,"cell-gap"],showWeekdayLabels:[516,"show-weekday-labels"],showMonthLabels:[516,"show-month-labels"],label:[1]}]);function b(){if(typeof customElements==="undefined"){return}const t=["pf-heatmap"];t.forEach((t=>{switch(t){case"pf-heatmap":if(!customElements.get(e(t))){customElements.define(e(t),v)}break}}))}b();const w=v;const k=b;export{w as PfHeatmap,k as defineCustomElement};
+//# sourceMappingURL=pf-heatmap.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["HEATMAP_MONTHS","HEATMAP_WEEKDAYS","heatmapRange","data","startDate","endDate","dates","map","item","date","filter","iso","parseISODate","sort","start","end","length","buildHeatmapWeeks","weekStartsOn","from","toMidday","to","offset","getDay","weeks","cursor","addDays","week","day","push","formatISODate","inRange","summariseHeatmap","max","total","Number","isFinite","value","Math","heatmapLevel","levelCount","levels","floor","min","ceil","heatmapCellColor","level","round","heatmapMonthLabels","labels","lastMonth","index","entries","first","find","cell","month","getMonth","column","label","pfHeatmapCss","PfHeatmap","__stencil_proxyCustomElement","HTMLElement","cellSize","cellGap","showWeekdayLabels","showMonthLabels","raw","this","Array","isArray","parsed","JSON","parse","String","weekStart","render","range","h","Host","class","part","name","byDate","Map","entry","months","role","style","_","gridTemplateColumns","gridColumnStart","flatMap","title","get","background","animationDelay"],"sources":["../core/dist/heatmap.js","src/components/pf-heatmap/pf-heatmap.css?tag=pf-heatmap&encapsulation=shadow","src/components/pf-heatmap/pf-heatmap.tsx"],"sourcesContent":["import { addDays, formatISODate, parseISODate, toMidday } from \"./date.js\";\n//#region src/heatmap.ts\n/**\n* The grid behind a calendar heatmap: which days it covers, which column each\n* week is, and how dark a value makes a cell.\n*\n* Shared because all of it is date arithmetic and bucketing, and because the\n* date arithmetic is the part that is easy to get wrong in a way nobody sees\n* until a daylight-saving boundary. It goes through `date.ts`, which pins\n* every date to midday for exactly that reason.\n*/\n/** Short month names, in the order a `Date` reports them. */\nvar HEATMAP_MONTHS = [\n\t\"Jan\",\n\t\"Feb\",\n\t\"Mar\",\n\t\"Apr\",\n\t\"May\",\n\t\"Jun\",\n\t\"Jul\",\n\t\"Aug\",\n\t\"Sep\",\n\t\"Oct\",\n\t\"Nov\",\n\t\"Dec\"\n];\n/** Short weekday names, Sunday first, as `Date.getDay()` numbers them. */\nvar HEATMAP_WEEKDAYS = [\n\t\"Sun\",\n\t\"Mon\",\n\t\"Tue\",\n\t\"Wed\",\n\t\"Thu\",\n\t\"Fri\",\n\t\"Sat\"\n];\n/**\n* The first and last day to draw.\n*\n* The explicit bounds win; otherwise the earliest and latest dates in the\n* data. `null` when there is nothing to draw, which is the caller's signal to\n* show its empty state. A date that does not parse is ignored rather than\n* becoming an `Invalid Date` that poisons every comparison after it.\n*/\nfunction heatmapRange(data, startDate, endDate) {\n\tconst dates = data.map((item) => item.date).filter((iso) => parseISODate(iso) !== null).sort();\n\tconst start = parseISODate(startDate ?? dates[0]);\n\tconst end = parseISODate(endDate ?? dates[dates.length - 1]);\n\tif (!start || !end) return null;\n\tif (end < start) return null;\n\treturn {\n\t\tstart,\n\t\tend\n\t};\n}\n/**\n* The weeks to draw, as columns of seven days.\n*\n* The first column is aligned back to the configured week start, so every row\n* is the same weekday all the way across — which is the whole point of the\n* shape. Days before `start` and after `end` are present but not `inRange`,\n* because the grid has to stay rectangular.\n*\n* Capped at 400 columns: a `start`/`end` pair a consumer got the wrong way\n* round is caught by `heatmapRange`, but a range of twenty years is a\n* legitimate pair of dates and an unbounded loop building 1,040 columns of\n* seven cells each is a frozen tab rather than a chart.\n*/\nfunction buildHeatmapWeeks(start, end, weekStartsOn = 0) {\n\tconst from = toMidday(start);\n\tconst to = toMidday(end);\n\tconst offset = (from.getDay() - weekStartsOn + 7) % 7;\n\tconst weeks = [];\n\tlet cursor = addDays(from, -offset);\n\twhile (cursor <= to && weeks.length < 400) {\n\t\tconst week = [];\n\t\tfor (let day = 0; day < 7; day += 1) {\n\t\t\tweek.push({\n\t\t\t\tiso: formatISODate(cursor),\n\t\t\t\tdate: cursor,\n\t\t\t\tinRange: cursor >= from && cursor <= to\n\t\t\t});\n\t\t\tcursor = addDays(cursor, 1);\n\t\t}\n\t\tweeks.push(week);\n\t}\n\treturn weeks;\n}\n/**\n* The largest and the sum of the values, ignoring the ones that are not\n* numbers.\n*\n* The React `Heatmap` reduced with `Math.max(max, d.value)` and `sum +\n* d.value`, both of which carry one `NaN` through everything: every cell's\n* level came out `NaN` and the accessible summary read \"NaN total\".\n*/\nfunction summariseHeatmap(data) {\n\tlet max = 0;\n\tlet total = 0;\n\tfor (const item of data) {\n\t\tif (!Number.isFinite(item.value)) continue;\n\t\tmax = Math.max(max, item.value);\n\t\ttotal += item.value;\n\t}\n\treturn {\n\t\tmax,\n\t\ttotal\n\t};\n}\n/**\n* Which bucket a value falls in, from `0` (nothing) to `levelCount - 1`.\n*\n* Level 0 is reserved for \"no activity\", so any positive value is at least 1\n* however small — a day with one commit should not look like a day with none.\n*/\nfunction heatmapLevel(value, max, levelCount) {\n\tconst levels = Math.max(2, Math.floor(levelCount) || 2);\n\tif (!Number.isFinite(value) || value <= 0 || !(max > 0)) return 0;\n\treturn Math.min(levels - 1, Math.max(1, Math.ceil(value / max * (levels - 1))));\n}\n/**\n* The colour for a level, as a `color-mix` of the heatmap's own two aliases.\n*\n* A mix rather than a scale of tokens, so one `--pf-heatmap-color` override\n* re-tints the whole chart.\n*/\nfunction heatmapCellColor(level, levelCount) {\n\tif (level <= 0) return \"var(--pf-heatmap-empty)\";\n\tconst levels = Math.max(2, Math.floor(levelCount) || 2);\n\treturn `color-mix(in srgb, var(--pf-heatmap-color) ${Math.round(Math.min(level, levels - 1) / (levels - 1) * 100)}%, var(--pf-heatmap-empty))`;\n}\n/**\n* Where each month's name goes: the column of the first in-range day that\n* belongs to it.\n*\n* `column` is one-based, because it is used as a `grid-column-start`.\n*/\nfunction heatmapMonthLabels(weeks) {\n\tconst labels = [];\n\tlet lastMonth = -1;\n\tfor (const [index, week] of weeks.entries()) {\n\t\tconst first = week.find((cell) => cell.inRange);\n\t\tif (!first) continue;\n\t\tconst month = first.date.getMonth();\n\t\tif (month !== lastMonth) {\n\t\t\tlabels.push({\n\t\t\t\tcolumn: index + 1,\n\t\t\t\tlabel: HEATMAP_MONTHS[month]\n\t\t\t});\n\t\t\tlastMonth = month;\n\t\t}\n\t}\n\treturn labels;\n}\n//#endregion\nexport { HEATMAP_MONTHS, HEATMAP_WEEKDAYS, buildHeatmapWeeks, heatmapCellColor, heatmapLevel, heatmapMonthLabels, heatmapRange, summariseHeatmap };\n",":host {\n  display: inline-block;\n  font-family: var(--font-family-sans);\n  max-width: 100%;\n  /* A full year is wider than a small screen: scroll rather than overflow. */\n  overflow-x: auto;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.empty {\n  color: var(--pf-heatmap-empty-text);\n  font-size: var(--font-size-sm);\n  padding: var(--space-4);\n  text-align: center;\n}\n\n.body {\n  display: flex;\n  gap: var(--pf-heatmap-cell-gap);\n}\n\n.weekdays {\n  display: flex;\n  flex-direction: column;\n}\n\n.weekday-spacer {\n  display: block;\n  height: calc(var(--font-size-xs) + var(--space-1));\n}\n\n.weekday-grid {\n  display: grid;\n  gap: var(--pf-heatmap-cell-gap);\n  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));\n}\n\n.weekday {\n  align-items: center;\n  color: var(--pf-heatmap-label-color);\n  display: flex;\n  font-size: var(--font-size-xs);\n  line-height: 1;\n  padding-inline-end: var(--space-1);\n}\n\n.main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n.months {\n  display: grid;\n  gap: var(--pf-heatmap-cell-gap);\n  height: var(--font-size-xs);\n}\n\n.month {\n  color: var(--pf-heatmap-label-color);\n  font-size: var(--font-size-xs);\n  line-height: 1;\n}\n\n/*\n * Columns of seven, filled top to bottom and then left to right, which is\n * what `grid-auto-flow: column` over seven fixed rows gives.\n */\n.grid {\n  display: grid;\n  gap: var(--pf-heatmap-cell-gap);\n  grid-auto-columns: var(--pf-heatmap-cell-size);\n  grid-auto-flow: column;\n  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));\n}\n\n.cell {\n  animation: pf-heatmap-cell-in var(--duration-moderate) var(--easing-decelerate) both;\n  border-radius: var(--pf-heatmap-cell-radius);\n  height: var(--pf-heatmap-cell-size);\n  width: var(--pf-heatmap-cell-size);\n}\n\n.cell--empty {\n  background: transparent;\n}\n\n/* Its own copy: `@keyframes` do not cross a shadow boundary. */\n@keyframes pf-heatmap-cell-in {\n  from {\n    opacity: 0;\n    transform: scale(0.6);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cell {\n    animation: none;\n  }\n}\n","import {\n  HEATMAP_WEEKDAYS,\n  buildHeatmapWeeks,\n  formatISODate,\n  heatmapCellColor,\n  heatmapLevel,\n  heatmapMonthLabels,\n  heatmapRange,\n  summariseHeatmap,\n  type HeatmapDatumLike,\n} from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A calendar heatmap: one cell per day, darker where the value is higher.\n *\n * All of the arithmetic is core's, and the date stepping goes through\n * `date.ts`, which pins every date to midday — a day step from midnight\n * across a daylight-saving boundary loses or repeats a day, which is\n * invisible under UTC and is why both test projects now run in a timezone\n * that has daylight saving.\n *\n * @slot empty - what to show when there is nothing to draw.\n * @part empty - the empty state's box.\n * @part weekdays - the column of weekday names.\n * @part months - the row of month names.\n * @part grid - the cells.\n * @part cell - one day.\n */\n@Component({\n  tag: 'pf-heatmap',\n  styleUrl: 'pf-heatmap.css',\n  shadow: true,\n})\nexport class PfHeatmap {\n  /**\n   * One entry per day with a value, as `{ date: 'YYYY-MM-DD', value }`.\n   *\n   * An array for a framework consumer, or JSON for plain HTML, because\n   * Stencil coerces an attribute only for the primitive types it recognises\n   * and would otherwise hand this the string verbatim.\n   */\n  @Prop() data: HeatmapDatumLike[] | string = [];\n\n  /** First day to draw. Defaults to the earliest in the data. */\n  @Prop() startDate?: string;\n\n  /** Last day to draw. Defaults to the latest in the data. */\n  @Prop() endDate?: string;\n\n  /** Colour buckets, counting the empty one. */\n  @Prop() levels = 5;\n\n  /** 0 = Sunday, 1 = Monday. Read through a getter, which coerces. */\n  @Prop() weekStartsOn: 0 | 1 = 0;\n\n  @Prop() cellSize = 12;\n\n  @Prop() cellGap = 3;\n\n  @Prop({ reflect: true }) showWeekdayLabels = true;\n\n  @Prop({ reflect: true }) showMonthLabels = true;\n\n  /** The chart's accessible name. One is generated when it has none. */\n  @Prop() label?: string;\n\n  /** The entries, however they arrived. */\n  private get entries(): HeatmapDatumLike[] {\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      // A malformed attribute is an empty heatmap, not a thrown render.\n      return [];\n    }\n  }\n\n  /**\n   * `0 | 1`, coerced.\n   *\n   * Written out as `0 | 1` rather than as an imported alias, which is the\n   * difference that decides whether Stencil coerces the attribute: measured\n   * side by side, this arrives as the **number** `1` while\n   * `pf-time-picker`'s imported `HourCycle` arrives as the string `\"12\"`.\n   * The getter stays anyway — it costs nothing and covers a consumer who\n   * sets the property to a string.\n   */\n  private get weekStart(): 0 | 1 {\n    return Number(this.weekStartsOn) === 1 ? 1 : 0;\n  }\n\n  render() {\n    const entries = this.entries;\n    const range = heatmapRange(entries, this.startDate, this.endDate);\n    const cellSize = Number(this.cellSize) || 12;\n    const cellGap = Number(this.cellGap) || 3;\n\n    if (!range) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n        </Host>\n      );\n    }\n\n    const { start, end } = range;\n    /*\n     * Passed through rather than clamped here: `heatmapLevel` and\n     * `heatmapCellColor` both floor it at two buckets, and a second copy of\n     * that clamp is a second thing to keep in step.\n     */\n    const levelCount = Number(this.levels);\n    const byDate = new Map(entries.map((entry) => [entry.date, entry.value]));\n    const { max, total } = summariseHeatmap(entries);\n    const weeks = buildHeatmapWeeks(start, end, this.weekStart);\n    const months = heatmapMonthLabels(weeks);\n\n    return (\n      <Host\n        role=\"img\"\n        aria-label={\n          this.label ??\n          `Activity heatmap from ${formatISODate(start)} to ${formatISODate(end)}, ${total} total`\n        }\n        style={{\n          '--pf-heatmap-cell-size': `${cellSize}px`,\n          '--pf-heatmap-cell-gap': `${cellGap}px`,\n        }}\n      >\n        <div class=\"body\">\n          {this.showWeekdayLabels && (\n            <div class=\"weekdays\" part=\"weekdays\">\n              {this.showMonthLabels && <span class=\"weekday-spacer\" aria-hidden=\"true\"></span>}\n              <div class=\"weekday-grid\">\n                {Array.from({ length: 7 }, (_, index) => (\n                  <span class=\"weekday\">\n                    {/* Every other name, or seven three-letter labels in a\n                        12px column overlap each other. */}\n                    {index % 2 === 1 ? HEATMAP_WEEKDAYS[(this.weekStart + index) % 7] : ''}\n                  </span>\n                ))}\n              </div>\n            </div>\n          )}\n\n          <div class=\"main\">\n            {this.showMonthLabels && (\n              <div\n                class=\"months\"\n                part=\"months\"\n                aria-hidden=\"true\"\n                style={{\n                  gridTemplateColumns: `repeat(${weeks.length}, var(--pf-heatmap-cell-size))`,\n                }}\n              >\n                {months.map((month) => (\n                  <span class=\"month\" style={{ gridColumnStart: String(month.column) }}>\n                    {month.label}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            <div class=\"grid\" part=\"grid\">\n              {weeks.flatMap((week, column) =>\n                week.map((cell) =>\n                  cell.inRange ? (\n                    <span\n                      class=\"cell\"\n                      part=\"cell\"\n                      title={`${cell.iso}: ${byDate.get(cell.iso) ?? 0}`}\n                      data-level={String(heatmapLevel(byDate.get(cell.iso) ?? 0, max, levelCount))}\n                      style={{\n                        background: heatmapCellColor(\n                          heatmapLevel(byDate.get(cell.iso) ?? 0, max, levelCount),\n                          levelCount,\n                        ),\n                        // Staggered by column, so the grid wipes in oldest first.\n                        animationDelay: `${column * 8}ms`,\n                      }}\n                    ></span>\n                  ) : (\n                    <span class=\"cell cell--empty\"></span>\n                  ),\n                ),\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oHAYA,IAAIA,EAAiB,CACpB,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,OAGD,IAAIC,EAAmB,CACtB,MACA,MACA,MACA,MACA,MACA,MACA,OAUD,SAASC,EAAaC,EAAMC,EAAWC,GACtC,MAAMC,EAAQH,EAAKI,KAAKC,GAASA,EAAKC,OAAMC,QAAQC,GAAQC,EAAaD,KAAS,OAAME,OACxF,MAAMC,EAAQF,EAAaR,GAAaE,EAAM,IAC9C,MAAMS,EAAMH,EAAaP,GAAWC,EAAMA,EAAMU,OAAS,IACzD,IAAKF,IAAUC,EAAK,OAAO,KAC3B,GAAIA,EAAMD,EAAO,OAAO,KACxB,MAAO,CACNA,QACAC,MAEF,CAcA,SAASE,EAAkBH,EAAOC,EAAKG,EAAe,GACrD,MAAMC,EAAOC,EAASN,GACtB,MAAMO,EAAKD,EAASL,GACpB,MAAMO,GAAUH,EAAKI,SAAWL,EAAe,GAAK,EACpD,MAAMM,EAAQ,GACd,IAAIC,EAASC,EAAQP,GAAOG,GAC5B,MAAOG,GAAUJ,GAAMG,EAAMR,OAAS,IAAK,CAC1C,MAAMW,EAAO,GACb,IAAK,IAAIC,EAAM,EAAGA,EAAM,EAAGA,GAAO,EAAG,CACpCD,EAAKE,KAAK,CACTlB,IAAKmB,EAAcL,GACnBhB,KAAMgB,EACNM,QAASN,GAAUN,GAAQM,GAAUJ,IAEtCI,EAASC,EAAQD,EAAQ,EAC5B,CACED,EAAMK,KAAKF,EACb,CACC,OAAOH,CACR,CASA,SAASQ,EAAiB7B,GACzB,IAAI8B,EAAM,EACV,IAAIC,EAAQ,EACZ,IAAK,MAAM1B,KAAQL,EAAM,CACxB,IAAKgC,OAAOC,SAAS5B,EAAK6B,OAAQ,SAClCJ,EAAMK,KAAKL,IAAIA,EAAKzB,EAAK6B,OACzBH,GAAS1B,EAAK6B,KAChB,CACC,MAAO,CACNJ,MACAC,QAEF,CAOA,SAASK,EAAaF,EAAOJ,EAAKO,GACjC,MAAMC,EAASH,KAAKL,IAAI,EAAGK,KAAKI,MAAMF,IAAe,GACrD,IAAKL,OAAOC,SAASC,IAAUA,GAAS,KAAOJ,EAAM,GAAI,OAAO,EAChE,OAAOK,KAAKK,IAAIF,EAAS,EAAGH,KAAKL,IAAI,EAAGK,KAAKM,KAAKP,EAAQJ,GAAOQ,EAAS,KAC3E,CAOA,SAASI,EAAiBC,EAAON,GAChC,GAAIM,GAAS,EAAG,MAAO,0BACvB,MAAML,EAASH,KAAKL,IAAI,EAAGK,KAAKI,MAAMF,IAAe,GACrD,MAAO,8CAA8CF,KAAKS,MAAMT,KAAKK,IAAIG,EAAOL,EAAS,IAAMA,EAAS,GAAK,iCAC9G,CAOA,SAASO,EAAmBxB,GAC3B,MAAMyB,EAAS,GACf,IAAIC,GAAY,EAChB,IAAK,MAAOC,EAAOxB,KAASH,EAAM4B,UAAW,CAC5C,MAAMC,EAAQ1B,EAAK2B,MAAMC,GAASA,EAAKxB,UACvC,IAAKsB,EAAO,SACZ,MAAMG,EAAQH,EAAM5C,KAAKgD,WACzB,GAAID,IAAUN,EAAW,CACxBD,EAAOpB,KAAK,CACX6B,OAAQP,EAAQ,EAChBQ,MAAO3D,EAAewD,KAEvBN,EAAYM,CACf,CACA,CACC,OAAOP,CACR,CCzJA,MAAMW,EAAe,IAAM,+8C,MCkCdC,EAASC,EAAA,MAAAD,UAAAE,E,iFAQZ5D,KAAoC,GAGpCC,UAGAC,QAGAoC,OAAS,EAGTvB,aAAsB,EAEtB8C,SAAW,GAEXC,QAAU,EAEOC,kBAAoB,KAEpBC,gBAAkB,KAGnCR,MAGR,WAAYP,GACV,MAAMgB,EAAMC,KAAKlE,KACjB,GAAImE,MAAMC,QAAQH,GAAM,OAAOA,EAE/B,IACE,MAAMI,EAASC,KAAKC,MAAMC,OAAOP,GAAO,OACxC,OAAOE,MAAMC,QAAQC,GAAUA,EAAS,E,CACxC,MAEA,MAAO,E,EAcX,aAAYI,GACV,OAAOzC,OAAOkC,KAAKnD,gBAAkB,EAAI,EAAI,C,CAG/C,MAAA2D,GACE,MAAMzB,EAAUiB,KAAKjB,QACrB,MAAM0B,EAAQ5E,EAAakD,EAASiB,KAAKjE,UAAWiE,KAAKhE,SACzD,MAAM2D,EAAW7B,OAAOkC,KAAKL,WAAa,GAC1C,MAAMC,EAAU9B,OAAOkC,KAAKJ,UAAY,EAExC,IAAKa,EAAO,CACV,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,QAAQC,KAAK,SACtBH,EAAA,QAAMI,KAAK,SAAO,Y,CAM1B,MAAMrE,MAAEA,EAAKC,IAAEA,GAAQ+D,EAMvB,MAAMtC,EAAaL,OAAOkC,KAAK5B,QAC/B,MAAM2C,EAAS,IAAIC,IAAIjC,EAAQ7C,KAAK+E,GAAU,CAACA,EAAM7E,KAAM6E,EAAMjD,UACjE,MAAMJ,IAAEA,EAAGC,MAAEA,GAAUF,EAAiBoB,GACxC,MAAM5B,EAAQP,EAAkBH,EAAOC,EAAKsD,KAAKO,WACjD,MAAMW,EAASvC,EAAmBxB,GAElC,OACEuD,EAACC,EAAI,CACHQ,KAAK,MAAK,aAERnB,KAAKV,OACL,yBAAyB7B,EAAchB,SAAagB,EAAcf,OAASmB,UAE7EuD,MAAO,CACL,yBAA0B,GAAGzB,MAC7B,wBAAyB,GAAGC,QAG9Bc,EAAA,OAAKE,MAAM,QACRZ,KAAKH,mBACJa,EAAA,OAAKE,MAAM,WAAWC,KAAK,YACxBb,KAAKF,iBAAmBY,EAAA,QAAME,MAAM,iBAAgB,cAAa,SAClEF,EAAA,OAAKE,MAAM,gBACRX,MAAMnD,KAAK,CAAEH,OAAQ,IAAK,CAAC0E,EAAGvC,IAC7B4B,EAAA,QAAME,MAAM,WAGT9B,EAAQ,IAAM,EAAIlD,GAAkBoE,KAAKO,UAAYzB,GAAS,GAAK,QAO9E4B,EAAA,OAAKE,MAAM,QACRZ,KAAKF,iBACJY,EAAA,OACEE,MAAM,SACNC,KAAK,SAAQ,cACD,OACZO,MAAO,CACLE,oBAAqB,UAAUnE,EAAMR,yCAGtCuE,EAAOhF,KAAKiD,GACXuB,EAAA,QAAME,MAAM,QAAQQ,MAAO,CAAEG,gBAAiBjB,OAAOnB,EAAME,UACxDF,EAAMG,UAMfoB,EAAA,OAAKE,MAAM,OAAOC,KAAK,QACpB1D,EAAMqE,SAAQ,CAAClE,EAAM+B,IACpB/B,EAAKpB,KAAKgD,GACRA,EAAKxB,QACHgD,EAAA,QACEE,MAAM,OACNC,KAAK,OACLY,MAAO,GAAGvC,EAAK5C,QAAQyE,EAAOW,IAAIxC,EAAK5C,MAAQ,IAAG,aACtCgE,OAAOpC,EAAa6C,EAAOW,IAAIxC,EAAK5C,MAAQ,EAAGsB,EAAKO,IAChEiD,MAAO,CACLO,WAAYnD,EACVN,EAAa6C,EAAOW,IAAIxC,EAAK5C,MAAQ,EAAGsB,EAAKO,GAC7CA,GAGFyD,eAAgB,GAAGvC,EAAS,SAIhCqB,EAAA,QAAME,MAAM,4B","ignoreList":[]}

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

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

package/dist/components/pf-icon.js

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

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

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

package/dist/components/pf-inline-cta.d.ts

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

package/dist/components/pf-inline-cta.js

@@ -0,0 +1,2 @@
+import{t as i,p as e,H as n,c as t,h as a,a as s}from"./index.js";import{d as o}from"./p-CkFjPRTe.js";const r=()=>`:host{align-items:flex-start;background:var(--pf-inline-cta-bg);border:1px solid var(--pf-inline-cta-border);border-radius:var(--radius-md);display:grid;gap:var(--space-3);grid-template-columns:auto 1fr;padding:var(--space-3);position:relative}:host([hidden]){display:none}:host([dismissible]){padding-inline-end:var(--space-12)}@media (min-width: 768px){:host{align-items:center;grid-template-columns:auto 1fr auto}}.action.empty{display:none}.icon{align-items:center;color:var(--pf-inline-cta-text-muted);display:inline-flex;font-size:var(--font-size-md);justify-content:center}.content{display:grid;gap:2px;min-width:0}.heading{color:var(--pf-inline-cta-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0}slot[name='description']::slotted(*){color:var(--pf-inline-cta-text-muted);display:block;font-size:var(--font-size-sm);margin:0}.action{align-items:center;display:inline-flex;gap:var(--space-2);grid-column:1 / -1;justify-content:flex-start}@media (min-width: 768px){.action{grid-column:auto;justify-content:initial}}.dismiss{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-inline-cta-text-muted);cursor:pointer;display:inline-flex;height:28px;inset-inline-end:var(--space-3);justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:28px}.dismiss:hover,.dismiss:focus-visible{background:var(--pf-inline-cta-bg-subtle);color:var(--pf-inline-cta-text);outline:none}:host([exiting]){animation:pf-inline-cta-out var(--duration-moderate) var(--easing-accelerate) forwards;overflow:hidden;pointer-events:none}@keyframes pf-inline-cta-out{from{opacity:1;max-height:480px}to{margin-bottom:0;margin-top:0;max-height:0;opacity:0;padding-bottom:0;padding-top:0}}@media (prefers-reduced-motion: reduce){:host([exiting]){animation:none}}:host([tone='info']){background:color-mix(in srgb, var(--pf-inline-cta-info-bg) 70%, var(--pf-mix-base));border-color:var(--pf-inline-cta-info-border)}:host([tone='info']) .icon{color:var(--pf-inline-cta-info-icon)}:host([tone='info']) .heading{color:var(--pf-inline-cta-info-heading)}:host([tone='info']) slot[name='description']::slotted(*){color:var(--pf-inline-cta-info-description)}:host([tone='success']){background:color-mix(in srgb, var(--pf-inline-cta-success-bg) 55%, var(--pf-mix-base));border-color:var(--pf-inline-cta-success-border)}:host([tone='warning']){background:color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--pf-mix-base));border-color:var(--pf-inline-cta-warning-border)}:host([tone='danger']){background:color-mix(in srgb, var(--pf-inline-cta-danger-bg) 55%, var(--pf-mix-base));border-color:var(--pf-inline-cta-danger-border)}`;const c=e(class i extends n{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.pfDismiss=t(this,"pfDismiss")}get el(){return this}tone="default";icon="circle-question";dismissible=false;dismissLabel="Dismiss";pfDismiss;exiting=false;hasIcon=false;hasAction=false;componentWillLoad(){this.read()}read=()=>{const i=i=>Array.from(this.el.children).some((e=>e.getAttribute("slot")===i));this.hasIcon=i("icon");this.hasAction=i("action")};async dismiss(){if(this.exiting)return;this.exiting=true;await new Promise((i=>requestAnimationFrame(i)));await this.waitForExit();this.pfDismiss.emit()}async waitForExit(){if(typeof this.el.getAnimations!=="function")return;const i=this.el.getAnimations().filter((i=>i.playState!=="finished"));if(i.length===0)return;await Promise.all(i.map((i=>i.finished.catch((()=>undefined)))))}render(){return a(s,{key:"6b8a8263476927209ca5c1c05f24e58a7dd777ec"},a("span",{key:"9cd6869009c50e63ee36c0c287f7aefe3c019ca5",class:"icon",part:"icon","aria-hidden":"true"},!this.hasIcon&&a("pf-icon",{key:"059bdd88a62913b71b1f3e1fa63b89ce2b574609",name:this.icon}),a("slot",{key:"d5993b4894092a586edce721e8016df0b9c4697c",name:"icon",onSlotchange:this.read})),a("div",{key:"1ef82a343a25cae1e912f4e01e8523c46930eeff",class:"content",part:"content"},a("p",{key:"e317f0f4205bfff48c40909bb6418dc3f5c97018",class:"heading",part:"heading"},a("slot",{key:"5f3a555de994165444e256fd1149a50ce941e7b2"})),a("slot",{key:"423e8b3c9cd45fd43c065f8bc11e7e0f2a5ff910",name:"description"})),a("div",{key:"6bdbddc484b7efe0262b5f4d263a235d3bcfc689",class:{action:true,empty:!this.hasAction},part:"action"},a("slot",{key:"0bb52dec765e6511209e2837c3c50d6aa63e0c63",name:"action",onSlotchange:this.read})),this.dismissible&&a("button",{key:"d8d54c43bc7a5641aba52637dcc641eadfd51c92",type:"button",class:"dismiss",part:"dismiss","aria-label":this.dismissLabel,onClick:()=>void this.dismiss()},a("pf-icon",{key:"4208ea0b4e6c99ed4025bdd2db2b1df2bcd8ef5c",name:"circle-xmark","aria-hidden":"true"})))}static get style(){return r()}},[769,"pf-inline-cta",{tone:[513],icon:[1],dismissible:[516],dismissLabel:[1,"dismiss-label"],exiting:[1540],hasIcon:[32],hasAction:[32],dismiss:[64]}]);function d(){if(typeof customElements==="undefined"){return}const e=["pf-inline-cta","pf-icon"];e.forEach((e=>{switch(e){case"pf-inline-cta":if(!customElements.get(i(e))){customElements.define(i(e),c)}break;case"pf-icon":if(!customElements.get(i(e))){o()}break}}))}d();const l=c;const f=d;export{l as PfInlineCta,f as defineCustomElement};
+//# sourceMappingURL=pf-inline-cta.js.map

package/dist/components/pf-inline-cta.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfInlineCtaCss","PfInlineCta","__stencil_proxyCustomElement","HTMLElement","tone","icon","dismissible","dismissLabel","pfDismiss","exiting","hasIcon","hasAction","componentWillLoad","this","read","slotted","name","Array","from","el","children","some","child","getAttribute","dismiss","Promise","resolve","requestAnimationFrame","waitForExit","emit","getAnimations","running","filter","animation","playState","length","all","map","finished","catch","undefined","render","h","Host","key","class","part","onSlotchange","action","empty","type","onClick"],"sources":["src/components/pf-inline-cta/pf-inline-cta.css?tag=pf-inline-cta&encapsulation=shadow","src/components/pf-inline-cta/pf-inline-cta.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  background: var(--pf-inline-cta-bg);\n  border: 1px solid var(--pf-inline-cta-border);\n  border-radius: var(--radius-md);\n  display: grid;\n  gap: var(--space-3);\n  grid-template-columns: auto 1fr;\n  padding: var(--space-3);\n  position: relative;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Room for the centred dismiss button, so the content does not crowd it. */\n:host([dismissible]) {\n  padding-inline-end: var(--space-12);\n}\n\n@media (--md) {\n  :host {\n    align-items: center;\n    grid-template-columns: auto 1fr auto;\n  }\n}\n\n/* Two classes deep, because the box sets its own `display` below. */\n.action.empty {\n  display: none;\n}\n\n.icon {\n  align-items: center;\n  color: var(--pf-inline-cta-text-muted);\n  display: inline-flex;\n  font-size: var(--font-size-md);\n  justify-content: center;\n}\n\n.content {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n}\n\n.heading {\n  color: var(--pf-inline-cta-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-inline-cta-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.action {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n  grid-column: 1 / -1;\n  justify-content: flex-start;\n}\n\n@media (--md) {\n  .action {\n    grid-column: auto;\n    justify-content: initial;\n  }\n}\n\n.dismiss {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-inline-cta-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  height: 28px;\n  inset-inline-end: var(--space-3);\n  justify-content: center;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n}\n\n.dismiss:hover,\n.dismiss:focus-visible {\n  background: var(--pf-inline-cta-bg-subtle);\n  color: var(--pf-inline-cta-text);\n  outline: none;\n}\n\n/*\n * The exit fades and collapses, so the page reflows as it goes. Each element\n * needs its own copy of the keyframes: they do not cross a shadow boundary.\n */\n:host([exiting]) {\n  animation: pf-inline-cta-out var(--duration-moderate) var(--easing-accelerate) forwards;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n@keyframes pf-inline-cta-out {\n  from {\n    opacity: 1;\n    max-height: 480px;\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  :host([exiting]) {\n    animation: none;\n  }\n}\n\n:host([tone='info']) {\n  background: color-mix(in srgb, var(--pf-inline-cta-info-bg) 70%, var(--pf-mix-base));\n  border-color: var(--pf-inline-cta-info-border);\n}\n\n/*\n * Only `info` tints its text in the React component, so only `info` does here\n * -- faithful rather than tidied, because changing the other three is a design\n * decision and not part of a port.\n */\n:host([tone='info']) .icon {\n  color: var(--pf-inline-cta-info-icon);\n}\n\n:host([tone='info']) .heading {\n  color: var(--pf-inline-cta-info-heading);\n}\n\n:host([tone='info']) slot[name='description']::slotted(*) {\n  color: var(--pf-inline-cta-info-description);\n}\n\n:host([tone='success']) {\n  background: color-mix(in srgb, var(--pf-inline-cta-success-bg) 55%, var(--pf-mix-base));\n  border-color: var(--pf-inline-cta-success-border);\n}\n\n:host([tone='warning']) {\n  background: color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--pf-mix-base));\n  border-color: var(--pf-inline-cta-warning-border);\n}\n\n:host([tone='danger']) {\n  background: color-mix(in srgb, var(--pf-inline-cta-danger-bg) 55%, var(--pf-mix-base));\n  border-color: var(--pf-inline-cta-danger-border);\n}\n","import {\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 PfInlineCtaTone = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * A prompt in the flow of a page: an icon, a line or two, something to do, and\n * optionally a way to send it away.\n *\n * Dismissal waits on `Animation.finished` rather than a timeout. The React\n * `useExitAnimation` guesses 220ms and calls back then, which is wrong twice\n * over: it fires too early or too late if the stylesheet's duration changes,\n * and it fires at all when nothing animated. Reading `getAnimations()` after a\n * frame answers both — the same arrangement `pf-notification.dismiss()` uses,\n * and for the same measured reason: an `animationend` listener never fires\n * when no animation started, which is the ordinary case under\n * `prefers-reduced-motion` or with the stylesheet unloaded.\n *\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot action - what to do about it, usually a button.\n * @slot icon - an icon, in place of the `icon` name.\n * @part icon - the icon's box.\n * @part heading - the heading's box.\n * @part content - the box holding the heading and the description.\n * @part action - the box holding the action slot.\n * @part dismiss - the dismiss button, when `dismissible` is set.\n */\n@Component({\n  tag: 'pf-inline-cta',\n  styleUrl: 'pf-inline-cta.css',\n  shadow: true,\n})\nexport class PfInlineCta {\n  @Element() el!: HTMLElement;\n\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) tone: PfInlineCtaTone = 'default';\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon = 'circle-question';\n\n  /** Offer a dismiss button. Reflected: it changes the padding. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** The dismiss button's accessible name. */\n  @Prop() dismissLabel = 'Dismiss';\n\n  /** Fires once the prompt has finished leaving. */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  /** Whether the exit animation is running. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) exiting = false;\n\n  /** Whether anything is slotted into the boxes that carry layout. */\n  @State() hasIcon = false;\n  @State() hasAction = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasIcon = slotted('icon');\n    this.hasAction = slotted('action');\n  };\n\n  /**\n   * Plays the exit animation and resolves once it has finished, then reports.\n   *\n   * `getAnimations()` read after a frame, so the class the stylesheet animates\n   * has landed; an empty list resolves at once, which is what makes this\n   * correct with no stylesheet, under `prefers-reduced-motion`, and in both\n   * test projects.\n   */\n  @Method()\n  async dismiss(): Promise<void> {\n    if (this.exiting) return;\n    this.exiting = true;\n\n    // A frame, so the reflected `exiting` attribute has landed and the\n    // animation it starts has actually been created.\n    await new Promise((resolve) => requestAnimationFrame(resolve));\n    await this.waitForExit();\n\n    this.pfDismiss.emit();\n  }\n\n  /**\n   * Waits for the exit animation, or returns straight away when there is not\n   * one.\n   *\n   * The `typeof` guard is for the mock DOM, which has no `getAnimations` at\n   * all — one more of its gaps, alongside the missing `toggleAttribute`. It\n   * surfaced here rather than vanishing because a `TypeError` inside an\n   * `@Method` rejects the promise it returned, where Stencil's `safeCall`\n   * swallows one thrown from a lifecycle method.\n   *\n   * A cancelled animation rejects, which is still \"done leaving\".\n   */\n  private async waitForExit(): Promise<void> {\n    if (typeof this.el.getAnimations !== 'function') return;\n\n    const running = this.el\n      .getAnimations()\n      .filter((animation) => animation.playState !== 'finished');\n    if (running.length === 0) return;\n\n    await Promise.all(running.map((animation) => animation.finished.catch(() => undefined)));\n  }\n\n  render() {\n    return (\n      <Host>\n        {/*\n          The icon box always has something in it — the named icon stands in\n          when nothing is slotted — so it needs no hiding. The action box does.\n        */}\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n          {!this.hasIcon && <pf-icon name={this.icon}></pf-icon>}\n          <slot name=\"icon\" onSlotchange={this.read} />\n        </span>\n\n        <div class=\"content\" part=\"content\">\n          <p class=\"heading\" part=\"heading\">\n            <slot />\n          </p>\n          <slot name=\"description\" />\n        </div>\n\n        <div class={{ action: true, empty: !this.hasAction }} part=\"action\">\n          <slot name=\"action\" onSlotchange={this.read} />\n        </div>\n\n        {this.dismissible && (\n          <button\n            type=\"button\"\n            class=\"dismiss\"\n            part=\"dismiss\"\n            aria-label={this.dismissLabel}\n            onClick={() => void this.dismiss()}\n          >\n            <pf-icon name=\"circle-xmark\" aria-hidden=\"true\"></pf-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAiB,IAAM,kpF,MC0ChBC,EAAWC,EAAA,MAAAD,UAAAE,E,yIAIGC,KAAwB,UAGzCC,KAAO,kBAGUC,YAAc,MAG/BC,aAAe,UAGdC,UAG+BC,QAAU,MAGzCC,QAAU,MACVC,UAAY,MAGrB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACb,MAAMC,EAAWC,GACfC,MAAMC,KAAKL,KAAKM,GAAGC,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYP,IAE9EH,KAAKH,QAAUK,EAAQ,QACvBF,KAAKF,UAAYI,EAAQ,SAAS,EAYpC,aAAMS,GACJ,GAAIX,KAAKJ,QAAS,OAClBI,KAAKJ,QAAU,WAIT,IAAIgB,SAASC,GAAYC,sBAAsBD,WAC/Cb,KAAKe,cAEXf,KAAKL,UAAUqB,M,CAeT,iBAAMD,GACZ,UAAWf,KAAKM,GAAGW,gBAAkB,WAAY,OAEjD,MAAMC,EAAUlB,KAAKM,GAClBW,gBACAE,QAAQC,GAAcA,EAAUC,YAAc,aACjD,GAAIH,EAAQI,SAAW,EAAG,aAEpBV,QAAQW,IAAIL,EAAQM,KAAKJ,GAAcA,EAAUK,SAASC,OAAM,IAAMC,c,CAG9E,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CAKHF,EAAA,QAAAE,IAAA,2CAAMC,MAAM,OAAOC,KAAK,OAAM,cAAa,SACvCjC,KAAKH,SAAWgC,EAAA,WAAAE,IAAA,2CAAS5B,KAAMH,KAAKR,OACtCqC,EAAA,QAAAE,IAAA,2CAAM5B,KAAK,OAAO+B,aAAclC,KAAKC,QAGvC4B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUC,KAAK,WACxBJ,EAAA,KAAAE,IAAA,2CAAGC,MAAM,UAAUC,KAAK,WACtBJ,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAM5B,KAAK,iBAGb0B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEG,OAAQ,KAAMC,OAAQpC,KAAKF,WAAamC,KAAK,UACzDJ,EAAA,QAAAE,IAAA,2CAAM5B,KAAK,SAAS+B,aAAclC,KAAKC,QAGxCD,KAAKP,aACJoC,EAAA,UAAAE,IAAA,2CACEM,KAAK,SACLL,MAAM,UACNC,KAAK,UAAS,aACFjC,KAAKN,aACjB4C,QAAS,SAAWtC,KAAKW,WAEzBkB,EAAA,WAAAE,IAAA,2CAAS5B,KAAK,eAAc,cAAa,U","ignoreList":[]}