@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/cjs/pf-calendar.cjs.entry.js.map

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

package/dist/cjs/pf-card-content.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfCardContentCss = () => `:host{display:block;padding:var(--pf-card-section-padding, var(--space-4))}:host([hidden]){display:none}`;
+
+const PfCardContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '59a59b62c908361de72c2a887083eaf0e4cd8990' }, index.h("slot", { key: '666c791fcd20f18eb92e1d7cbdf688db3a9f46e9' })));
+    }
+};
+PfCardContent.style = pfCardContentCss();
+
+exports.pf_card_content = PfCardContent;
+//# sourceMappingURL=pf-card-content.entry.cjs.js.map
+
+//# sourceMappingURL=pf-card-content.cjs.entry.js.map

package/dist/cjs/pf-card-content.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-card-content.cjs.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,wGAAwG,CAAC;;MCY5H,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/pf-card-content/pf-card-content.css?tag=pf-card-content&encapsulation=shadow","src/components/pf-card-content/pf-card-content.tsx"],"sourcesContent":[":host {\n  display: block;\n  padding: var(--pf-card-section-padding, var(--space-4));\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The body section of a `pf-card`.\n *\n * @slot - the content.\n */\n@Component({\n  tag: 'pf-card-content',\n  styleUrl: 'pf-card-content.css',\n  shadow: true,\n})\nexport class PfCardContent {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-card-footer.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfCardFooterCss = () => `:host{border-top:1px solid var(--pf-card-border);display:flex;gap:var(--pf-card-footer-gap);padding:var(--pf-card-section-padding, var(--space-4))}:host([hidden]){display:none}`;
+
+const PfCardFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '94597fc7d75217bd21d063cb79f4e99dc4d4962b' }, index.h("slot", { key: '6d37ed88a893134c4b4025ed4870993b9ea82812' })));
+    }
+};
+PfCardFooter.style = pfCardFooterCss();
+
+exports.pf_card_footer = PfCardFooter;
+//# sourceMappingURL=pf-card-footer.entry.cjs.js.map
+
+//# sourceMappingURL=pf-card-footer.cjs.entry.js.map

package/dist/cjs/pf-card-footer.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-card-footer.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,gLAAgL,CAAC;;MCcnM,YAAY,GAAA,MAAA;;;;IACvB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/pf-card-footer/pf-card-footer.css?tag=pf-card-footer&encapsulation=shadow","src/components/pf-card-footer/pf-card-footer.tsx"],"sourcesContent":[":host {\n  border-top: 1px solid var(--pf-card-border);\n  display: flex;\n  gap: var(--pf-card-footer-gap);\n  padding: var(--pf-card-section-padding, var(--space-4));\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The bottom section of a `pf-card`, separated from what precedes it by a rule.\n * Lays its children out in a row, which is what makes it the natural home for\n * a card's actions.\n *\n * @slot - the footer's content, usually buttons.\n */\n@Component({\n  tag: 'pf-card-footer',\n  styleUrl: 'pf-card-footer.css',\n  shadow: true,\n})\nexport class PfCardFooter {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-card-header.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfCardHeaderCss = () => `:host{border-bottom:1px solid var(--pf-card-border);display:block;padding:var(--pf-card-section-padding, var(--space-4))}:host([hidden]){display:none}`;
+
+const PfCardHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '334c522bf5347bac313ff6fb75e1b21018911828' }, index.h("slot", { key: 'a69f1d5579125f7c71344fe5b92391a99dcf7066' })));
+    }
+};
+PfCardHeader.style = pfCardHeaderCss();
+
+exports.pf_card_header = PfCardHeader;
+//# sourceMappingURL=pf-card-header.entry.cjs.js.map
+
+//# sourceMappingURL=pf-card-header.cjs.entry.js.map

package/dist/cjs/pf-card-header.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-card-header.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,sJAAsJ,CAAC;;MCYzK,YAAY,GAAA,MAAA;;;;IACvB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/pf-card-header/pf-card-header.css?tag=pf-card-header&encapsulation=shadow","src/components/pf-card-header/pf-card-header.tsx"],"sourcesContent":["/*\n * Reads pf-card's own variables rather than defining its own: a consumer who\n * sets --pf-card-section-padding on a card expects every section to follow,\n * and custom properties inherit through the shadow boundary.\n */\n:host {\n  border-bottom: 1px solid var(--pf-card-border);\n  display: block;\n  padding: var(--pf-card-section-padding, var(--space-4));\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The top section of a `pf-card`, separated from what follows by a rule.\n *\n * @slot - the header's content.\n */\n@Component({\n  tag: 'pf-card-header',\n  styleUrl: 'pf-card-header.css',\n  shadow: true,\n})\nexport class PfCardHeader {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-card.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfCardCss = () => `:host{background:var(--pf-card-background);border:1px solid var(--pf-card-border);border-radius:var(--pf-card-radius, var(--radius-lg));box-shadow:var(--pf-card-shadow, var(--shadow-sm));display:block;overflow:hidden}:host([hidden]){display:none}`;
+
+const PfCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'dde68be01e7fc8e7773cf3b21153e2502f115df2' }, index.h("slot", { key: '30bd9de2b4eaf837b40afa6161f18a823c78d683' })));
+    }
+};
+PfCard.style = pfCardCss();
+
+exports.pf_card = PfCard;
+//# sourceMappingURL=pf-card.entry.cjs.js.map
+
+//# sourceMappingURL=pf-card.cjs.entry.js.map

package/dist/cjs/pf-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-card.cjs.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,sPAAsP,CAAC;;MCoBnQ,MAAM,GAAA,MAAA;;;;IACjB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/pf-card/pf-card.css?tag=pf-card&encapsulation=shadow","src/components/pf-card/pf-card.tsx"],"sourcesContent":["/*\n * The host is the card. `overflow: hidden` is what makes a section's own\n * border-bottom stop at the rounded corner instead of crossing it, so the\n * sections need no corner-radius rules of their own.\n */\n:host {\n  background: var(--pf-card-background);\n  border: 1px solid var(--pf-card-border);\n  border-radius: var(--pf-card-radius, var(--radius-lg));\n  box-shadow: var(--pf-card-shadow, var(--shadow-sm));\n  display: block;\n  overflow: hidden;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A surface that groups related content.\n *\n * The React library's `Card` / `CardHeader` / `CardContent` / `CardFooter` map\n * to four elements rather than to one element with named slots. Named slots\n * would need a slot controller to know whether to render each wrapper at all —\n * an unslotted `header` would otherwise leave a padded, bordered empty strip.\n * Separate elements have no such state: the consumer writing\n * `<pf-card-header>` *is* the signal.\n *\n * @slot - the card's sections, usually `pf-card-header`, `pf-card-content` and\n * `pf-card-footer`, though any content is allowed.\n */\n@Component({\n  tag: 'pf-card',\n  styleUrl: 'pf-card.css',\n  shadow: true,\n})\nexport class PfCard {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-carousel-slide.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfCarouselSlideCss = () => `:host{background:var(--pf-carousel-slide-background, transparent);color:var(--pf-carousel-slide-text);flex:0 0 100%;min-width:0;padding:var(--pf-carousel-slide-padding, 0)}:host([hidden]){display:none}`;
+
+const PfCarouselSlide = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Set by the carousel: the slide on show. Reflected for the stylesheet. */
+    active = false;
+    /** Set by the carousel: this slide's place, counting from 1. */
+    position = 1;
+    /** Set by the carousel: how many slides there are. */
+    total = 1;
+    render() {
+        return (index.h(index.Host, { key: '5b8c82c4edca6c10ea5b20f1122cc62d8d37f0d5', role: "group", "aria-roledescription": "slide", "aria-label": `Slide ${this.position} of ${this.total}`, "aria-hidden": this.active ? null : 'true',
+            /*
+             * `inert` as well as `aria-hidden`: the slide is still laid out, just
+             * scrolled out of view, so without it a button inside the next slide
+             * is a tab stop nobody can see. The same reason an accordion's closed
+             * panel is inert.
+             */
+            inert: !this.active }, index.h("slot", { key: '36ea0239c2c53b175e94f701cc047eabd4e1d41d' })));
+    }
+};
+PfCarouselSlide.style = pfCarouselSlideCss();
+
+exports.pf_carousel_slide = PfCarouselSlide;
+//# sourceMappingURL=pf-carousel-slide.entry.cjs.js.map
+
+//# sourceMappingURL=pf-carousel-slide.cjs.entry.js.map

package/dist/cjs/pf-carousel-slide.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-carousel-slide.cjs.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,yMAAyM,CAAC;;MCiB/N,eAAe,GAAA,MAAA;;;;;IAEc,MAAM,GAAG,KAAK;;IAG7B,QAAQ,GAAG,CAAC;;IAGZ,KAAK,GAAG,CAAC;IAElC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,OAAO,EAAA,sBAAA,EACS,OAAO,EAAA,YAAA,EAChB,CAAA,MAAA,EAAS,IAAI,CAAC,QAAQ,CAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,aAAA,EACxC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,MAAM;AACxC;;;;;AAKG;AACH,YAAA,KAAK,EAAE,CAAC,IAAI,CAAC,MAAM,EAAA,EAEnBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/pf-carousel-slide/pf-carousel-slide.css?tag=pf-carousel-slide&encapsulation=shadow","src/components/pf-carousel-slide/pf-carousel-slide.tsx"],"sourcesContent":[":host {\n  background: var(--pf-carousel-slide-background, transparent);\n  color: var(--pf-carousel-slide-text);\n  /* One slide per viewport, which is what the track's transform steps by. */\n  flex: 0 0 100%;\n  min-width: 0;\n  padding: var(--pf-carousel-slide-padding, 0);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One slide of a `pf-carousel`.\n *\n * The carousel tells it where it sits and whether it is the one on show; it\n * owns only what that means for itself — chiefly that an off-screen slide is\n * `inert`, so the focusable content inside it cannot be tabbed to while it is\n * scrolled out of sight.\n *\n * @slot - the slide's content.\n */\n@Component({\n  tag: 'pf-carousel-slide',\n  styleUrl: 'pf-carousel-slide.css',\n  shadow: true,\n})\nexport class PfCarouselSlide {\n  /** Set by the carousel: the slide on show. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  /** Set by the carousel: this slide's place, counting from 1. */\n  @Prop({ mutable: true }) position = 1;\n\n  /** Set by the carousel: how many slides there are. */\n  @Prop({ mutable: true }) total = 1;\n\n  render() {\n    return (\n      <Host\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        aria-label={`Slide ${this.position} of ${this.total}`}\n        aria-hidden={this.active ? null : 'true'}\n        /*\n         * `inert` as well as `aria-hidden`: the slide is still laid out, just\n         * scrolled out of view, so without it a button inside the next slide\n         * is a tab stop nobody can see. The same reason an accordion's closed\n         * panel is inert.\n         */\n        inert={!this.active}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-carousel.cjs.entry.js

@@ -0,0 +1,170 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+//#region src/carousel.ts
+/**
+* Which slide a carousel lands on, and what it says it is showing.
+*
+* Shared because looping is a decision: stepping past the last slide either
+* wraps to the first or stays put, and a React `Carousel` and a
+* `<pf-carousel>` that disagreed would be two components wearing one name.
+*/
+/**
+* The slide `next` resolves to, out of `total`.
+*
+* With `loop` it wraps at both ends — including from a negative index, which
+* is what stepping back from the first slide gives, and which a bare `%` in
+* JavaScript gets wrong: `-1 % 5` is `-1`, not `4`. Without it the index is
+* clamped. An empty carousel has no slide to land on and reports `-1`.
+*/
+function resolveSlideIndex(next, total, loop = false) {
+	if (!(total > 0)) return -1;
+	if (!Number.isFinite(next)) return 0;
+	const index = Math.trunc(next);
+	if (loop) return (index % total + total) % total;
+	return Math.min(Math.max(index, 0), total - 1);
+}
+/**
+* What a carousel announces, which is the one thing a reader who cannot see it
+* has to go on: "Slide 2 of 5".
+*
+* Here rather than in either layer because it is read out, and two layers
+* announcing the same carousel differently would be two different controls to
+* a screen reader.
+*/
+function slidePositionLabel(index, total) {
+	if (!(total > 0)) return "No slides";
+	return `Slide ${resolveSlideIndex(index, total) + 1} of ${total}`;
+}
+
+const pfCarouselCss = () => `:host{background:var(--pf-carousel-bg);border:1px solid var(--pf-carousel-border);border-radius:var(--pf-carousel-radius, var(--radius-md));display:grid;gap:var(--pf-carousel-gap, var(--space-3));overflow:hidden;padding:var(--pf-carousel-padding, var(--space-3));width:100%}:host([hidden]){display:none}.viewport{background:var(--pf-carousel-viewport-bg);border-radius:var(--pf-carousel-viewport-radius, var(--radius-sm));overflow:hidden;width:100%}.track{display:flex;transition:transform var(--pf-carousel-transition-duration, var(--duration-moderate))     var(--easing-decelerate);width:100%}.track.empty{display:none}.empty{align-items:center;color:var(--pf-carousel-empty-text);display:flex;font-size:var(--pf-carousel-empty-font-size, var(--font-size-sm));justify-content:center;min-height:var(--pf-carousel-empty-min-height, 180px);padding:var(--pf-carousel-empty-padding, var(--space-4));text-align:center}.sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.controls{align-items:center;display:grid;gap:var(--pf-carousel-controls-gap, var(--space-2));grid-template-columns:var(--pf-carousel-nav-size, 28px) 1fr     var(--pf-carousel-nav-size, 28px)}.nav{align-items:center;background:transparent;border:0;border-radius:var(--pf-carousel-nav-radius, var(--radius-sm));color:var(--pf-carousel-nav-text);cursor:pointer;display:inline-flex;font-size:var(--pf-carousel-nav-font-size, var(--font-size-sm));height:var(--pf-carousel-nav-size, 28px);justify-content:center;padding:0;width:var(--pf-carousel-nav-size, 28px)}.nav:hover:not(:disabled){background:var(--pf-carousel-nav-hover-bg);color:var(--pf-carousel-nav-hover-text)}.nav:focus-visible{box-shadow:var(--pf-carousel-focus-ring, var(--pf-focus-ring));outline:none}.nav:disabled{color:var(--pf-carousel-nav-text);cursor:not-allowed;opacity:var(--pf-carousel-disabled-opacity, 0.45)}.indicators{align-items:center;display:inline-flex;gap:var(--pf-carousel-indicator-gap, var(--space-1));justify-content:center}.indicator{background:var(--pf-carousel-indicator-bg);border:0;border-radius:var(--pf-carousel-indicator-radius, var(--radius-full));cursor:pointer;height:var(--pf-carousel-indicator-size, 8px);padding:0;transition:all var(--pf-carousel-indicator-transition-duration, var(--duration-fast))     var(--easing-decelerate);width:var(--pf-carousel-indicator-size, 8px)}.indicator--active{background:var(--pf-carousel-indicator-active-bg);width:var(--pf-carousel-indicator-active-width, 20px)}.indicator:focus-visible{box-shadow:var(--pf-carousel-focus-ring, var(--pf-focus-ring));outline:none}.indicator-spacer{display:block;min-height:var(--pf-carousel-indicator-size, 8px)}@media (prefers-reduced-motion: reduce){.track,.indicator{transition:none}}`;
+
+const PfCarousel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+    }
+    get el() { return index.getElement(this); }
+    /** The slide on show, counting from 0. */
+    index = 0;
+    /** Wrap at both ends rather than stopping. */
+    loop = true;
+    /** Show the dots. */
+    showIndicators = true;
+    /** Step forward on a timer. */
+    autoPlay = false;
+    /** How long between steps, in milliseconds. */
+    autoPlayInterval = 5000;
+    /** The carousel's accessible name. */
+    label = 'Carousel';
+    /** The step-back button's accessible name. */
+    previousLabel = 'Previous slide';
+    /** The step-forward button's accessible name. */
+    nextLabel = 'Next slide';
+    /** Fires when the slide on show changes, however it changed. */
+    pfChange;
+    /** How many slides there are, which every control depends on. */
+    total = 0;
+    timer;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+        this.startTimer();
+    }
+    disconnectedCallback() {
+        this.stopTimer();
+    }
+    handleIndexChange() {
+        this.sync();
+    }
+    handleTimerChange() {
+        this.startTimer();
+    }
+    /** Re-reads the slides, for a consumer who changed them imperatively. */
+    async refresh() {
+        this.sync();
+    }
+    /** Steps one slide forward, as the button and the timer do. */
+    async next() {
+        this.goTo(this.resolved + 1);
+    }
+    /** Steps one slide back. */
+    async previous() {
+        this.goTo(this.resolved - 1);
+    }
+    /** Direct children only: a nested carousel owns its own slides. */
+    get slides() {
+        return Array.from(this.el.querySelectorAll('pf-carousel-slide')).filter((slide) => slide.parentElement === this.el);
+    }
+    /** The slide actually on show, which an out-of-range index resolves to. */
+    get resolved() {
+        return Math.max(resolveSlideIndex(this.index, this.total), 0);
+    }
+    sync() {
+        const slides = this.slides;
+        this.total = slides.length;
+        const active = this.resolved;
+        for (const [position, slide] of slides.entries()) {
+            const node = slide;
+            node.active = position === active;
+            node.position = position + 1;
+            node.total = slides.length;
+        }
+    }
+    goTo(next) {
+        const index = resolveSlideIndex(next, this.total, this.loop);
+        if (index < 0 || index === this.resolved)
+            return;
+        this.index = index;
+        this.sync();
+        this.pfChange.emit({ index });
+    }
+    /**
+     * One timer, restarted rather than stacked: a consumer changing the interval
+     * while it runs would otherwise leave the old one going, and the carousel
+     * would step twice as often for no visible reason.
+     */
+    startTimer() {
+        this.stopTimer();
+        if (!this.autoPlay || this.total < 2)
+            return;
+        this.timer = window.setInterval(() => {
+            this.goTo(this.resolved + 1);
+        }, Number(this.autoPlayInterval) || 5000);
+    }
+    stopTimer() {
+        if (this.timer !== undefined)
+            window.clearInterval(this.timer);
+        this.timer = undefined;
+    }
+    render() {
+        const active = this.resolved;
+        const atStart = !this.loop && active <= 0;
+        const atEnd = !this.loop && active >= this.total - 1;
+        return (index.h(index.Host, { key: '4f5a52bd33464c438e7a11d18c19c136ae9a1c81', role: "region", "aria-roledescription": "carousel", "aria-label": this.label }, index.h("div", { key: '04ee0fe33dadacf5e0097e97eb8968a4cb07bf6e', class: "viewport", part: "viewport" }, this.total === 0 ? (index.h("div", { class: "empty", part: "empty", role: "status" }, index.h("slot", { name: "empty" }, "Add at least one slide."))) : null, index.h("div", { key: 'a8fc8ce03bd7f8e8ac43215a61074f71e8fdb8e3', class: { track: true, empty: this.total === 0 }, part: "track", style: { transform: `translateX(-${active * 100}%)` } }, index.h("slot", { key: '55720356b707f7589cbe50daf6ccbacf8503b333', onSlotchange: () => this.refresh() }))), index.h("span", { key: '90ab70084b5b7bc1797350160805de10cae812f0', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.total > 0 ? slidePositionLabel(active, this.total) : ''), index.h("div", { key: '37edc5f9cff2e99992ade51d1189ee9da073cf63', class: "controls", part: "controls" }, index.h("button", { key: 'aa1470ae4a33ba1ecb6675ae0444d7ebcce31c0d', type: "button", class: "nav", part: "previous", "aria-label": this.previousLabel, disabled: atStart || this.total < 2, onClick: () => this.goTo(active - 1) }, index.h("pf-icon", { key: '7af19a182498df4e9e8c78ef10fcc24e202a87a9', name: "square-caret-left", "aria-hidden": "true" })), this.showIndicators && this.total > 1 ? (index.h("div", { class: "indicators", part: "indicators", role: "group", "aria-label": "Slide indicators" }, Array.from({ length: this.total }, (_, position) => (index.h("button", { type: "button", class: { indicator: true, 'indicator--active': position === active }, part: "indicator", "aria-label": `Go to slide ${position + 1}`, "aria-current": position === active ? 'true' : null, onClick: () => this.goTo(position) }))))) : (index.h("span", { class: "indicator-spacer", "aria-hidden": "true" })), index.h("button", { key: 'a9ce64398be6552d49926d467f7a2b74024d34a1', type: "button", class: "nav", part: "next", "aria-label": this.nextLabel, disabled: atEnd || this.total < 2, onClick: () => this.goTo(active + 1) }, index.h("pf-icon", { key: '385f7b01bb6086d454be41ca4f04a449a2e0504c', name: "square-caret-right", "aria-hidden": "true" })))));
+    }
+    static get watchers() { return {
+        "index": [{
+                "handleIndexChange": 0
+            }],
+        "loop": [{
+                "handleIndexChange": 0
+            }],
+        "autoPlay": [{
+                "handleTimerChange": 0
+            }],
+        "autoPlayInterval": [{
+                "handleTimerChange": 0
+            }]
+    }; }
+};
+PfCarousel.style = pfCarouselCss();
+
+exports.pf_carousel = PfCarousel;
+//# sourceMappingURL=pf-carousel.entry.cjs.js.map
+
+//# sourceMappingURL=pf-carousel.cjs.entry.js.map

package/dist/cjs/pf-carousel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-carousel.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["../core/dist/carousel.js","src/components/pf-carousel/pf-carousel.css?tag=pf-carousel&encapsulation=shadow","src/components/pf-carousel/pf-carousel.tsx"],"sourcesContent":["//#region src/carousel.ts\n/**\n* Which slide a carousel lands on, and what it says it is showing.\n*\n* Shared because looping is a decision: stepping past the last slide either\n* wraps to the first or stays put, and a React `Carousel` and a\n* `<pf-carousel>` that disagreed would be two components wearing one name.\n*/\n/**\n* The slide `next` resolves to, out of `total`.\n*\n* With `loop` it wraps at both ends — including from a negative index, which\n* is what stepping back from the first slide gives, and which a bare `%` in\n* JavaScript gets wrong: `-1 % 5` is `-1`, not `4`. Without it the index is\n* clamped. An empty carousel has no slide to land on and reports `-1`.\n*/\nfunction resolveSlideIndex(next, total, loop = false) {\n\tif (!(total > 0)) return -1;\n\tif (!Number.isFinite(next)) return 0;\n\tconst index = Math.trunc(next);\n\tif (loop) return (index % total + total) % total;\n\treturn Math.min(Math.max(index, 0), total - 1);\n}\n/**\n* What a carousel announces, which is the one thing a reader who cannot see it\n* has to go on: \"Slide 2 of 5\".\n*\n* Here rather than in either layer because it is read out, and two layers\n* announcing the same carousel differently would be two different controls to\n* a screen reader.\n*/\nfunction slidePositionLabel(index, total) {\n\tif (!(total > 0)) return \"No slides\";\n\treturn `Slide ${resolveSlideIndex(index, total) + 1} of ${total}`;\n}\n//#endregion\nexport { resolveSlideIndex, slidePositionLabel };\n",":host {\n  background: var(--pf-carousel-bg);\n  border: 1px solid var(--pf-carousel-border);\n  border-radius: var(--pf-carousel-radius, var(--radius-md));\n  display: grid;\n  gap: var(--pf-carousel-gap, var(--space-3));\n  overflow: hidden;\n  padding: var(--pf-carousel-padding, var(--space-3));\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.viewport {\n  background: var(--pf-carousel-viewport-bg);\n  border-radius: var(--pf-carousel-viewport-radius, var(--radius-sm));\n  overflow: hidden;\n  width: 100%;\n}\n\n.track {\n  display: flex;\n  transition: transform var(--pf-carousel-transition-duration, var(--duration-moderate))\n    var(--easing-decelerate);\n  width: 100%;\n}\n\n/*\n * The track stays in the tree with no slides in it — a slot that is not\n * rendered never fires `slotchange` — and is simply not laid out. Two classes\n * deep, because the track sets its own `display` above.\n */\n.track.empty {\n  display: none;\n}\n\n.empty {\n  align-items: center;\n  color: var(--pf-carousel-empty-text);\n  display: flex;\n  font-size: var(--pf-carousel-empty-font-size, var(--font-size-sm));\n  justify-content: center;\n  min-height: var(--pf-carousel-empty-min-height, 180px);\n  padding: var(--pf-carousel-empty-padding, var(--space-4));\n  text-align: center;\n}\n\n/*\n * Each element needs its own copy: `.pf-sr-only` is declared once in the React\n * library's global sheet and does not cross a shadow boundary.\n */\n.sr-only {\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.controls {\n  align-items: center;\n  display: grid;\n  gap: var(--pf-carousel-controls-gap, var(--space-2));\n  grid-template-columns:\n    var(--pf-carousel-nav-size, 28px) 1fr\n    var(--pf-carousel-nav-size, 28px);\n}\n\n.nav {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pf-carousel-nav-radius, var(--radius-sm));\n  color: var(--pf-carousel-nav-text);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--pf-carousel-nav-font-size, var(--font-size-sm));\n  height: var(--pf-carousel-nav-size, 28px);\n  justify-content: center;\n  padding: 0;\n  width: var(--pf-carousel-nav-size, 28px);\n}\n\n.nav:hover:not(:disabled) {\n  background: var(--pf-carousel-nav-hover-bg);\n  color: var(--pf-carousel-nav-hover-text);\n}\n\n.nav:focus-visible {\n  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.nav:disabled {\n  color: var(--pf-carousel-nav-text);\n  cursor: not-allowed;\n  opacity: var(--pf-carousel-disabled-opacity, 0.45);\n}\n\n.indicators {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--pf-carousel-indicator-gap, var(--space-1));\n  justify-content: center;\n}\n\n.indicator {\n  background: var(--pf-carousel-indicator-bg);\n  border: 0;\n  border-radius: var(--pf-carousel-indicator-radius, var(--radius-full));\n  cursor: pointer;\n  height: var(--pf-carousel-indicator-size, 8px);\n  padding: 0;\n  transition: all var(--pf-carousel-indicator-transition-duration, var(--duration-fast))\n    var(--easing-decelerate);\n  width: var(--pf-carousel-indicator-size, 8px);\n}\n\n.indicator--active {\n  background: var(--pf-carousel-indicator-active-bg);\n  width: var(--pf-carousel-indicator-active-width, 20px);\n}\n\n.indicator:focus-visible {\n  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.indicator-spacer {\n  display: block;\n  min-height: var(--pf-carousel-indicator-size, 8px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track,\n  .indicator {\n    transition: none;\n  }\n}\n","import { resolveSlideIndex, slidePositionLabel } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A carousel over `pf-carousel-slide` children.\n *\n * The group owns the index, the controls, the indicators and the live region\n * that announces the move; each slide owns only whether it is the one on show.\n *\n * `role=\"region\"` with `aria-roledescription=\"carousel\"` rather than any of\n * the tab or listbox patterns: a carousel is a region whose content changes,\n * and the announcement is what tells a reader it has.\n *\n * @slot - the `pf-carousel-slide` children.\n * @slot empty - what to show when there are no slides.\n * @part viewport - the clipping box.\n * @part track - the strip that slides.\n * @part controls - the row holding the buttons and the indicators.\n * @part previous - the step-back button.\n * @part next - the step-forward button.\n * @part indicators - the box holding the dots.\n * @part indicator - one dot.\n */\n@Component({\n  tag: 'pf-carousel',\n  styleUrl: 'pf-carousel.css',\n  shadow: true,\n})\nexport class PfCarousel {\n  @Element() el!: HTMLElement;\n\n  /** The slide on show, counting from 0. */\n  @Prop({ mutable: true }) index = 0;\n\n  /** Wrap at both ends rather than stopping. */\n  @Prop({ reflect: true }) loop = true;\n\n  /** Show the dots. */\n  @Prop({ reflect: true }) showIndicators = true;\n\n  /** Step forward on a timer. */\n  @Prop({ reflect: true }) autoPlay = false;\n\n  /** How long between steps, in milliseconds. */\n  @Prop() autoPlayInterval = 5000;\n\n  /** The carousel's accessible name. */\n  @Prop() label = 'Carousel';\n\n  /** The step-back button's accessible name. */\n  @Prop() previousLabel = 'Previous slide';\n\n  /** The step-forward button's accessible name. */\n  @Prop() nextLabel = 'Next slide';\n\n  /** Fires when the slide on show changes, however it changed. */\n  @Event() pfChange!: EventEmitter<{ index: number }>;\n\n  /** How many slides there are, which every control depends on. */\n  @State() total = 0;\n\n  private timer?: number;\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    this.startTimer();\n  }\n\n  disconnectedCallback() {\n    this.stopTimer();\n  }\n\n  @Watch('index')\n  @Watch('loop')\n  handleIndexChange() {\n    this.sync();\n  }\n\n  @Watch('autoPlay')\n  @Watch('autoPlayInterval')\n  handleTimerChange() {\n    this.startTimer();\n  }\n\n  /** Re-reads the slides, for a consumer who changed them imperatively. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Steps one slide forward, as the button and the timer do. */\n  @Method()\n  async next() {\n    this.goTo(this.resolved + 1);\n  }\n\n  /** Steps one slide back. */\n  @Method()\n  async previous() {\n    this.goTo(this.resolved - 1);\n  }\n\n  /** Direct children only: a nested carousel owns its own slides. */\n  private get slides(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-carousel-slide')).filter(\n      (slide) => slide.parentElement === this.el,\n    );\n  }\n\n  /** The slide actually on show, which an out-of-range index resolves to. */\n  private get resolved(): number {\n    return Math.max(resolveSlideIndex(this.index, this.total), 0);\n  }\n\n  private sync() {\n    const slides = this.slides;\n    this.total = slides.length;\n    const active = this.resolved;\n\n    for (const [position, slide] of slides.entries()) {\n      const node = slide as HTMLElement & { active: boolean; position: number; total: number };\n      node.active = position === active;\n      node.position = position + 1;\n      node.total = slides.length;\n    }\n  }\n\n  private goTo(next: number) {\n    const index = resolveSlideIndex(next, this.total, this.loop);\n    if (index < 0 || index === this.resolved) return;\n\n    this.index = index;\n    this.sync();\n    this.pfChange.emit({ index });\n  }\n\n  /**\n   * One timer, restarted rather than stacked: a consumer changing the interval\n   * while it runs would otherwise leave the old one going, and the carousel\n   * would step twice as often for no visible reason.\n   */\n  private startTimer() {\n    this.stopTimer();\n    if (!this.autoPlay || this.total < 2) return;\n\n    this.timer = window.setInterval(\n      () => {\n        this.goTo(this.resolved + 1);\n      },\n      Number(this.autoPlayInterval) || 5000,\n    );\n  }\n\n  private stopTimer() {\n    if (this.timer !== undefined) window.clearInterval(this.timer);\n    this.timer = undefined;\n  }\n\n  render() {\n    const active = this.resolved;\n    const atStart = !this.loop && active <= 0;\n    const atEnd = !this.loop && active >= this.total - 1;\n\n    return (\n      <Host role=\"region\" aria-roledescription=\"carousel\" aria-label={this.label}>\n        <div class=\"viewport\" part=\"viewport\">\n          {this.total === 0 ? (\n            <div class=\"empty\" part=\"empty\" role=\"status\">\n              <slot name=\"empty\">Add at least one slide.</slot>\n            </div>\n          ) : null}\n          {/*\n            The track stays in the tree even with no slides, because a slot\n            that is not rendered never fires `slotchange` — slides added later\n            would stay invisible for good.\n          */}\n          <div\n            class={{ track: true, empty: this.total === 0 }}\n            part=\"track\"\n            style={{ transform: `translateX(-${active * 100}%)` }}\n          >\n            <slot onSlotchange={() => this.refresh()} />\n          </div>\n        </div>\n\n        {/*\n          The announcement, which is the only thing a reader who cannot see the\n          carousel has to go on. `aria-live` on a box that is always present:\n          a live region added at the moment it changes is not announced.\n        */}\n        <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          {this.total > 0 ? slidePositionLabel(active, this.total) : ''}\n        </span>\n\n        <div class=\"controls\" part=\"controls\">\n          <button\n            type=\"button\"\n            class=\"nav\"\n            part=\"previous\"\n            aria-label={this.previousLabel}\n            disabled={atStart || this.total < 2}\n            onClick={() => this.goTo(active - 1)}\n          >\n            <pf-icon name=\"square-caret-left\" aria-hidden=\"true\"></pf-icon>\n          </button>\n\n          {this.showIndicators && this.total > 1 ? (\n            <div class=\"indicators\" part=\"indicators\" role=\"group\" aria-label=\"Slide indicators\">\n              {Array.from({ length: this.total }, (_, position) => (\n                <button\n                  type=\"button\"\n                  class={{ indicator: true, 'indicator--active': position === active }}\n                  part=\"indicator\"\n                  aria-label={`Go to slide ${position + 1}`}\n                  aria-current={position === active ? 'true' : null}\n                  onClick={() => this.goTo(position)}\n                ></button>\n              ))}\n            </div>\n          ) : (\n            <span class=\"indicator-spacer\" aria-hidden=\"true\"></span>\n          )}\n\n          <button\n            type=\"button\"\n            class=\"nav\"\n            part=\"next\"\n            aria-label={this.nextLabel}\n            disabled={atEnd || this.total < 2}\n            onClick={() => this.goTo(active + 1)}\n          >\n            <pf-icon name=\"square-caret-right\" aria-hidden=\"true\"></pf-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-chart-series.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfChartSeriesCss = () => `:host{align-items:center;color:var(--pf-chart-text-muted);display:flex;font-size:var(--font-size-sm);gap:var(--space-2)}:host([hidden]){display:none}.dot{border-radius:var(--radius-full);flex-shrink:0;height:8px;width:8px}`;
+
+const PfChartSeries = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * The property each data row carries this series' value under.
+     *
+     * `seriesKey`, not `key`: `key` is the vdom's own prop name and reserved,
+     * the same family as `animate` shadowing `Element.prototype.animate`.
+     */
+    seriesKey = '';
+    /** Overrides the palette colour the chart would give it. */
+    color;
+    /** Draw this series' line dashed. Line charts only. Reflected. */
+    dashed = false;
+    /** Set by the chart: the colour actually used, palette or override. */
+    swatch = '';
+    render() {
+        return (index.h(index.Host, { key: '42e03761d372da7b9878a86b5afd081e583232e9', role: "listitem" }, index.h("span", { key: '73da1c97180054c5178eaaecaa882c5a440216e5', class: "dot", part: "dot", "aria-hidden": "true", style: { background: this.swatch } }), index.h("span", { key: 'dada4085c9a46265eaf454bbcb10b1d849839ca6', class: "label", part: "label" }, index.h("slot", { key: 'bca6cc3bd7c0fd8f65f10a696ca823526aea46f9' }, this.seriesKey))));
+    }
+};
+PfChartSeries.style = pfChartSeriesCss();
+
+exports.pf_chart_series = PfChartSeries;
+//# sourceMappingURL=pf-chart-series.entry.cjs.js.map
+
+//# sourceMappingURL=pf-chart-series.cjs.entry.js.map

package/dist/cjs/pf-chart-series.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-chart-series.cjs.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,8NAA8N,CAAC;;MCwBlP,aAAa,GAAA,MAAA;;;;AACxB;;;;;AAKG;IACsB,SAAS,GAAG,EAAE;;AAGd,IAAA,KAAK;;IAGL,MAAM,GAAG,KAAK;;IAGd,MAAM,GAAG,EAAE;IAEpC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,aAAA,EAAa,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,CAAS,EAC3FA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,SAAS,CAAQ,CACxB,CACF;;;;;;;","names":["h","Host"],"sources":["src/components/pf-chart-series/pf-chart-series.css?tag=pf-chart-series&encapsulation=shadow","src/components/pf-chart-series/pf-chart-series.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  color: var(--pf-chart-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.dot {\n  border-radius: var(--radius-full);\n  flex-shrink: 0;\n  height: 8px;\n  width: 8px;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One series of a `pf-line-chart` or a `pf-bar-chart`, and its own row in the\n * legend.\n *\n * The chart's data is a single array of rows keyed by series — bulk numbers,\n * which belong in a property — while the series are the part with names and\n * colours, which belong in the light DOM so a consumer can loop over them and\n * so the legend can hold their labels. A legend built in the chart's shadow\n * root could not reach a slotted label at all.\n *\n * `swatch` is the chart's to set: only it knows this series' place in the\n * palette.\n *\n * @slot - the series' name. Falls back to `seriesKey`.\n * @part dot - the colour swatch.\n * @part label - the name.\n */\n@Component({\n  tag: 'pf-chart-series',\n  styleUrl: 'pf-chart-series.css',\n  shadow: true,\n})\nexport class PfChartSeries {\n  /**\n   * The property each data row carries this series' value under.\n   *\n   * `seriesKey`, not `key`: `key` is the vdom's own prop name and reserved,\n   * the same family as `animate` shadowing `Element.prototype.animate`.\n   */\n  @Prop({ reflect: true }) seriesKey = '';\n\n  /** Overrides the palette colour the chart would give it. */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Draw this series' line dashed. Line charts only. Reflected. */\n  @Prop({ reflect: true }) dashed = false;\n\n  /** Set by the chart: the colour actually used, palette or override. */\n  @Prop({ mutable: true }) swatch = '';\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" style={{ background: this.swatch }}></span>\n        <span class=\"label\" part=\"label\">\n          <slot>{this.seriesKey}</slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-checkbox.cjs.entry.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+var controlLabel = require('./control-label-C0eK8bPh.js');
+
+const pfCheckboxCss = () => `:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-checkbox-bg);border:1px solid var(--pf-checkbox-border);border-radius:var(--pf-checkbox-radius, var(--radius-sm));box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:18px;margin:0;position:relative;width:18px}.input:checked{background:var(--pf-checkbox-checked-bg);border-color:var(--pf-checkbox-border)}.input::after{border:solid var(--pf-checkbox-check-color);border-width:0 2px 2px 0;content:'';height:9px;left:5px;opacity:0;position:absolute;top:2px;transform:rotate(45deg);width:5px}.input:checked::after{opacity:1}.input:focus-visible{box-shadow:var(--pf-checkbox-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-checkbox-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-checkbox-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}`;
+
+const PfCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` *content attribute* -- not from this property. A
+     * framework wrapper that sets properties rather than attributes (the
+     * generated React bindings do) would otherwise leave the control nameless
+     * and absent from the submission, with every other sign of working.
+     */
+    name;
+    /** Whether the box is ticked. Reflected so the stylesheet can select on it. */
+    checked = false;
+    /**
+     * What is submitted when ticked. Mirrors the native attribute, whose default
+     * is also `on` — a checkbox with no value still submits something.
+     */
+    value = 'on';
+    /** Visible label, rendered in the same root so `for` actually associates. */
+    label;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    required = false;
+    disabled = false;
+    /** Fires when the user ticks or unticks the box. */
+    pfChange;
+    /** The state a form reset restores, which is the initial attribute. */
+    initialChecked = false;
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.syncFormState();
+    }
+    syncFormState() {
+        /*
+         * `null`, not an empty string, when unticked: an unchecked checkbox is
+         * absent from the submission entirely, rather than present and empty.
+         * That is what a server distinguishing "unticked" from "not sent" relies
+         * on, and it is what a native checkbox does.
+         */
+        this.internals.setFormValue(this.checked ? this.value : null);
+        formValidity.applyControlValidity(this.internals, this.checked, this.required, this.error);
+    }
+    /** A form-associated custom element does not inherit this. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** The message explaining why the control is invalid, or an empty string. */
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /**
+     * A reset restores the initial state, not `false` — a native
+     * `<input type=checkbox checked>` comes back ticked.
+     */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+    }
+    onChange = (event) => {
+        this.checked = event.target.checked;
+        this.pfChange.emit({ checked: this.checked, value: this.value });
+    };
+    render() {
+        return (index.h(index.Host, { key: 'f0888c00b688aef2c90deb60a7496971c2e52ac3' }, index.h("div", { key: '25dbafc87f7c597cc055ade975033bab23ed67d9', class: "field", part: "field" }, index.h("input", { key: '2d6f97d80d2686ad13ddac12bf70d12828611ad8', id: "input", "aria-label": controlLabel.controlAriaLabel(this.el, this.label), part: "input", class: "input", type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, "aria-invalid": this.error ? 'true' : null, "aria-describedby": this.error ? 'error' : null, onChange: this.onChange }), this.label && (index.h("label", { key: '0c6427fb3168226dd5c69e06e5769efab4cc0d5e', class: "label", part: "label", htmlFor: "input" }, this.label))), this.error && (index.h("p", { key: '401852018ce3b0c0a856e669d96c33d185a5b730', class: "error", part: "error", id: "error" }, this.error))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "value": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfCheckbox.style = pfCheckboxCss();
+
+exports.pf_checkbox = PfCheckbox;
+//# sourceMappingURL=pf-checkbox.entry.cjs.js.map
+
+//# sourceMappingURL=pf-checkbox.cjs.entry.js.map

package/dist/cjs/pf-checkbox.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-checkbox.cjs.entry.js","mappings":"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","names":["applyControlValidity","h","Host","controlAriaLabel"],"sources":["src/components/pf-checkbox/pf-checkbox.css?tag=pf-checkbox&encapsulation=shadow","src/components/pf-checkbox/pf-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.input {\n  appearance: none;\n  background: var(--pf-checkbox-bg);\n  border: 1px solid var(--pf-checkbox-border);\n  border-radius: var(--pf-checkbox-radius, var(--radius-sm));\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-block;\n  flex-shrink: 0;\n  height: 18px;\n  margin: 0;\n  position: relative;\n  width: 18px;\n}\n\n.input:checked {\n  background: var(--pf-checkbox-checked-bg);\n  border-color: var(--pf-checkbox-border);\n}\n\n/* The tick: two borders of a rotated box. */\n.input::after {\n  border: solid var(--pf-checkbox-check-color);\n  border-width: 0 2px 2px 0;\n  content: '';\n  height: 9px;\n  left: 5px;\n  opacity: 0;\n  position: absolute;\n  top: 2px;\n  transform: rotate(45deg);\n  width: 5px;\n}\n\n.input:checked::after {\n  opacity: 1;\n}\n\n.input:focus-visible {\n  box-shadow: var(--pf-checkbox-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.input:disabled + .label {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.label {\n  color: var(--pf-checkbox-label-text);\n  font-size: var(--font-size-md);\n}\n\n.error {\n  color: var(--pf-checkbox-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: var(--space-1) 0 0;\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/**\n * A form-associated checkbox.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox.\n * @part label - the label element.\n */\n@Component({\n  tag: 'pf-checkbox',\n  styleUrl: 'pf-checkbox.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfCheckbox {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Whether the box is ticked. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * What is submitted when ticked. Mirrors the native attribute, whose default\n   * is also `on` — a checkbox with no value still submits something.\n   */\n  @Prop() value = 'on';\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the user ticks or unticks the box. */\n  @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n  /** The state a form reset restores, which is the initial attribute. */\n  private initialChecked = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormState();\n  }\n\n  @Watch('checked')\n  @Watch('error')\n  @Watch('required')\n  @Watch('value')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, when unticked: an unchecked checkbox is\n     * absent from the submission entirely, rather than present and empty.\n     * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n     * on, and it is what a native checkbox does.\n     */\n    this.internals.setFormValue(this.checked ? this.value : null);\n    applyControlValidity(this.internals, this.checked, this.required, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the initial state, not `false` — a native\n   * `<input type=checkbox checked>` comes back ticked.\n   */\n  formResetCallback() {\n    this.checked = this.initialChecked;\n  }\n\n  private onChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this.pfChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          <input\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"input\"\n            class=\"input\"\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={this.error ? 'error' : null}\n            onChange={this.onChange}\n          />\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n            </label>\n          )}\n        </div>\n        {this.error && (\n          <p class=\"error\" part=\"error\" id=\"error\">\n            {this.error}\n          </p>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}