@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfCommandPaletteCss","setHidden","element","hidden","setAttribute","removeAttribute","PfCommandPalette","open","placeholder","emptyMessage","label","dismissable","pfOpenChange","pfSelect","query","matchCount","releaseScroll","activeItem","componentWillLoad","this","applyQuery","componentDidLoad","showDialog","componentDidRender","syncActiveDescendant","disconnectedCallback","unlockScroll","show","hide","syncOpen","next","previous","closeDialog","emit","handleCommandSelect","event","stopPropagation","value","detail","onSlotChange","refresh","dialog","el","shadowRoot","querySelector","input","items","Array","from","querySelectorAll","visibleItems","filter","item","hasAttribute","lockScroll","lockPageScroll","showModal","requestAnimationFrame","focus","close","onCancel","preventDefault","onClose","onDialogClick","target","onInput","group","closest","matches","matchesCommandQuery","textContent","trim","description","getAttribute","showing","length","visible","setActive","find","scrollIntoView","block","ariaActiveDescendantElement","move","action","enabled","getEnabledIndexes","current","indexOf","resolveListMove","runActive","onKeyDown","actions","Keys","ArrowDown","ArrowUp","Home","End","key","Enter","render","empty","h","Host","part","class","onClick","name","type","role","autocomplete","spellcheck","onSlotchange"],"sources":["src/components/pf-command-palette/pf-command-palette.css?tag=pf-command-palette&encapsulation=shadow","src/components/pf-command-palette/pf-command-palette.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/*\n * The dialog is the backdrop: it fills the viewport and aligns the panel near\n * the top, so a click landing on it rather than on the panel is a backdrop\n * click. The explicit sizing overrides the UA's `margin: auto` and\n * `width: fit-content` for a `<dialog>`.\n */\n.dialog {\n  align-items: flex-start;\n  background: none;\n  border: 0;\n  display: none;\n  height: 100%;\n  justify-content: center;\n  max-height: 100%;\n  max-width: 100%;\n  padding: var(--space-4);\n  width: 100%;\n}\n\n.dialog[open] {\n  display: flex;\n}\n\n@media (--md) {\n  .dialog {\n    padding-top: 10vh;\n  }\n}\n\n.dialog::backdrop {\n  background: var(--pf-commandpalette-overlay-backdrop, var(--pf-overlay-backdrop));\n}\n\n.panel {\n  background: var(--pf-command-bg);\n  border: 1px solid var(--pf-command-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--pf-commandpalette-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));\n  color: var(--pf-command-text);\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  max-height: 100%;\n  overflow: hidden;\n  width: min(560px, 100%);\n}\n\n.dialog[open] .panel {\n  animation: pf-command-panel-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-command-panel-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8px) scale(0.98);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialog[open] .panel {\n    animation: none;\n  }\n}\n\n.search {\n  align-items: center;\n  border-bottom: 1px solid var(--pf-command-border);\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n}\n\n.search-icon {\n  color: var(--pf-command-text-muted);\n  flex-shrink: 0;\n}\n\n.input {\n  background: none;\n  border: 0;\n  color: var(--pf-command-text);\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-md);\n  min-width: 0;\n  outline: none;\n  padding: 0;\n}\n\n.input::placeholder {\n  color: var(--pf-command-text-muted);\n}\n\n.hint {\n  flex-shrink: 0;\n}\n\n.list {\n  overflow-y: auto;\n  padding: var(--space-2);\n}\n\n.empty {\n  color: var(--pf-command-text-muted);\n  font-size: var(--font-size-sm);\n  margin: 0;\n  padding: var(--space-4) var(--space-3);\n  text-align: center;\n}\n","import {\n  getEnabledIndexes,\n  Keys,\n  lockPageScroll,\n  matchesCommandQuery,\n  resolveListMove,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/*\n * `toggleAttribute` does not exist on Stencil's mock DOM -- measured, and\n * worth knowing how it fails: Stencil's `safeCall` swallows the TypeError, so\n * the filter silently did nothing and the palette rendered \"No results found\"\n * over a full list. Not exported, so this file still has one export.\n */\nconst setHidden = (element: Element, hidden: boolean) => {\n  if (hidden) element.setAttribute('hidden', '');\n  else element.removeAttribute('hidden');\n};\n\n/**\n * A searchable command list in a modal dialog.\n *\n * A native `<dialog>` opened with `showModal()`, like `pf-modal` and\n * `pf-slideout-menu`: the focus trap, Escape and the backdrop come free, and\n * the React component's `useFocusTrap` has no equivalent here. Page scroll is\n * the one part the dialog does not do, so that is core's reference-counted\n * lock.\n *\n * **The active option is set as an element, not an IDREF.** The input lives in\n * this shadow root and the options are slotted light-DOM children, and\n * `aria-activedescendant` does not cross a shadow boundary — measured against\n * Chromium's accessibility tree, where a cross-root IDREF is simply absent\n * from it. `ariaActiveDescendantElement` does resolve, because the option sits\n * in an ancestor scope of the input's tree, which is the direction element\n * reflection allows. (`pf-tooltip` needed the opposite direction — a trigger\n * referencing something inside a shadow root it does not own — and that one\n * reads back empty, which is why it copies text into `aria-description`\n * instead.)\n *\n * @slot - `pf-command-item` and `pf-command-group` children.\n * @part dialog - the native dialog, which is also the backdrop.\n * @part panel - the floating panel.\n * @part input - the search input.\n * @part list - the listbox the items are slotted into.\n * @part empty - the message shown when nothing matches.\n */\n@Component({\n  tag: 'pf-command-palette',\n  styleUrl: 'pf-command-palette.css',\n  shadow: true,\n})\nexport class PfCommandPalette {\n  @Element() el!: HTMLElement;\n\n  /** Whether the palette is showing. Reflected so the stylesheet selects on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Placeholder for the search input. */\n  @Prop() placeholder = 'Search commands…';\n\n  /** Shown when the query matches nothing. */\n  @Prop() emptyMessage = 'No results found.';\n\n  /** Accessible name for the dialog. */\n  @Prop() label = 'Command palette';\n\n  /** Close on Escape or a click on the backdrop. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Fires whenever the palette opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Fires with the chosen item's `value`. The palette then closes. */\n  @Event() pfSelect!: EventEmitter<{ value: string }>;\n\n  @State() query = '';\n  @State() matchCount = 0;\n\n  private releaseScroll: (() => void) | null = null;\n  private activeItem: HTMLElement | null = null;\n\n  /*\n   * Read the light DOM on the way in, not after mounting, so the first paint\n   * is right: filtering from `componentDidLoad` leaves `matchCount` at 0 for\n   * that first render and flashes \"No results found\" over a full list.\n   */\n  componentWillLoad() {\n    this.applyQuery();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  componentDidRender() {\n    /*\n     * Re-applied after every render because the active option is held as a\n     * *property* on the input, and Stencil's re-render replaces nothing of the\n     * light DOM but does reset nothing of this either — the property survives,\n     * but the matching set may have changed under it, so the one place that is\n     * always right is after the render that changed it.\n     */\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.unlockScroll();\n  }\n\n  /** Opens the palette. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the palette. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showDialog();\n    else this.closeDialog();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** A child asking to be run. The palette decides, reports and closes. */\n  @Listen('pfCommandSelect')\n  handleCommandSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.pfSelect.emit({ value: event.detail.value });\n    this.open = false;\n  }\n\n  /*\n   * Items may be added, removed or relabelled while the palette is open, so\n   * the filter is re-applied when the assignment changes. Text edited inside\n   * an already-assigned node does not fire this — the same caveat pf-tooltip\n   * documents — which is why `refresh()` exists.\n   */\n  private onSlotChange = () => {\n    this.applyQuery();\n  };\n\n  /** Re-reads the children and re-applies the current query. */\n  @Method()\n  async refresh(): Promise<void> {\n    this.applyQuery();\n  }\n\n  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector('input') ?? null;\n  }\n\n  private items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-command-item'));\n  }\n\n  /** The items a query left showing, which is what the arrows move through. */\n  private visibleItems(): HTMLElement[] {\n    return this.items().filter((item) => !item.hasAttribute('hidden'));\n  }\n\n  private lockScroll() {\n    if (this.releaseScroll) return;\n    this.releaseScroll = lockPageScroll();\n  }\n\n  private unlockScroll() {\n    this.releaseScroll?.();\n    this.releaseScroll = null;\n  }\n\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n\n    // A fresh query each time it opens, matching the React component.\n    this.query = '';\n    this.applyQuery();\n    requestAnimationFrame(() => this.input?.focus());\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) event.preventDefault();\n  };\n\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /** A click on the dialog itself landed on the backdrop, not the panel. */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  private onInput = (event: Event) => {\n    this.query = (event.target as HTMLInputElement).value;\n    this.applyQuery();\n  };\n\n  /**\n   * Hides the items a query excludes, and any group left with none showing.\n   *\n   * The group's own label counts towards each of its items, so typing a\n   * section name narrows to that section — which is what the React component\n   * does with its `group` field.\n   */\n  private applyQuery() {\n    const query = this.query;\n\n    for (const item of this.items()) {\n      const group = item.closest('pf-command-group');\n      const matches = matchesCommandQuery(\n        {\n          label: item.textContent?.trim() ?? '',\n          description: item.getAttribute('description'),\n          group: group?.getAttribute('label') ?? null,\n        },\n        query,\n      );\n      setHidden(item, !matches);\n    }\n\n    for (const group of Array.from(this.el.querySelectorAll<HTMLElement>('pf-command-group'))) {\n      const showing = group.querySelectorAll('pf-command-item:not([hidden])').length;\n      setHidden(group, showing === 0);\n    }\n\n    const visible = this.visibleItems();\n    this.matchCount = visible.length;\n\n    // A new query starts at the top, as the React component does.\n    this.setActive(visible.find((item) => !item.hasAttribute('disabled')) ?? null);\n  }\n\n  private setActive(item: HTMLElement | null) {\n    if (this.activeItem && this.activeItem !== item) {\n      this.activeItem.removeAttribute('aria-selected');\n    }\n    this.activeItem = item;\n    item?.setAttribute('aria-selected', 'true');\n    this.syncActiveDescendant();\n    // Guarded: this also runs from componentWillLoad, and the mock DOM has no\n    // scrollIntoView at all.\n    if (item && typeof item.scrollIntoView === 'function') {\n      item.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /**\n   * Feature-detected: where ARIA element reflection is missing there is no\n   * cross-root equivalent, so the active option stops being *announced* while\n   * the arrows, the highlight and Enter all still work. Recorded in `todo.md`.\n   */\n  private syncActiveDescendant() {\n    const input = this.input;\n    if (!input || !('ariaActiveDescendantElement' in input)) return;\n    (\n      input as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.activeItem;\n  }\n\n  private move(action: ListNavigationAction) {\n    const visible = this.visibleItems();\n    const enabled = getEnabledIndexes(visible, (item) => item.hasAttribute('disabled'));\n    const current = this.activeItem ? visible.indexOf(this.activeItem) : -1;\n    const next = resolveListMove(action, enabled, current);\n    if (next !== -1) this.setActive(visible[next] ?? null);\n  }\n\n  private runActive() {\n    const item = this.activeItem;\n    if (!item || item.hasAttribute('disabled')) return;\n    // The property, not the attribute: a binding that sets props would leave\n    // the attribute absent, and the reported value silently empty.\n    const value = (item as HTMLElement & { value?: string }).value;\n    this.pfSelect.emit({ value: value ?? item.getAttribute('value') ?? '' });\n    this.open = false;\n  }\n\n  /*\n   * On the panel rather than the input, so a pointer that has moved focus\n   * elsewhere inside the dialog still drives the list. Escape is left to the\n   * dialog, which handles it natively.\n   */\n  private onKeyDown = (event: KeyboardEvent) => {\n    const actions: Record<string, ListNavigationAction> = {\n      [Keys.ArrowDown]: 'next',\n      [Keys.ArrowUp]: 'previous',\n      [Keys.Home]: 'first',\n      [Keys.End]: 'last',\n    };\n\n    const action = actions[event.key];\n    if (action) {\n      event.preventDefault();\n      this.move(action);\n      return;\n    }\n\n    if (event.key === Keys.Enter) {\n      event.preventDefault();\n      this.runActive();\n    }\n  };\n\n  render() {\n    const empty = this.matchCount === 0;\n\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.label}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\" onKeyDown={this.onKeyDown}>\n            <div class=\"search\">\n              <pf-icon name=\"magnifying-glass\" class=\"search-icon\"></pf-icon>\n              <input\n                part=\"input\"\n                class=\"input\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                spellcheck={false}\n                aria-autocomplete=\"list\"\n                aria-expanded=\"true\"\n                aria-label={this.placeholder}\n                placeholder={this.placeholder}\n                value={this.query}\n                onInput={this.onInput}\n              />\n              <pf-kbd class=\"hint\">esc</pf-kbd>\n            </div>\n\n            <div class=\"list\" part=\"list\" role=\"listbox\" aria-label={this.label}>\n              <slot onSlotchange={this.onSlotChange} />\n              {empty && (\n                <p class=\"empty\" part=\"empty\">\n                  {this.emptyMessage}\n                </p>\n              )}\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,a as r,h as i,H as a}from"./p-Bm6UxEit.js";import{c as o}from"./p-DfpCerXM.js";import{r as s}from"./p-CAz7-p8y.js";import{s as n,g as d,r as l}from"./p-Fiuz9ck7.js";import{a as c}from"./p-Cr6IXrUk.js";import"./p-g4FlTDZx.js";var h=[{command:"bold",label:"Bold",text:"B"},{command:"italic",label:"Italic",text:"I"},{command:"underline",label:"Underline",text:"U"},{command:"insertUnorderedList",label:"Bulleted list",text:"• List",separatorBefore:true},{command:"insertOrderedList",label:"Numbered list",text:"1. List"},{command:"removeFormat",label:"Clear formatting",text:"Clear"}];function f(t){if(!t)return"";const e=t.trim();if(!e.startsWith("<p>")||!e.endsWith("</p>"))return t;if(e.indexOf("</p>")!==e.length-4)return t;return e.slice(3,-4)}const p=()=>`: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}.box{background:var(--pf-rte-bg);border:1px solid var(--pf-rte-border);border-radius:var(--radius-md);overflow:hidden}.box:focus-within{border-color:var(--pf-rte-focus-border);box-shadow:var(--pf-rte-focus-ring, var(--pf-focus-ring))}.box--invalid{border-color:var(--pf-rte-invalid-border)}.box--disabled{opacity:var(--pf-rte-disabled-opacity, 0.75)}.toolbar{align-items:center;background:var(--pf-rte-bg-subtle);border-bottom:1px solid var(--pf-rte-border);display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2)}.tool{background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-rte-text);cursor:pointer;font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);min-height:28px;padding:0 var(--space-2)}.tool:hover:not(:disabled){background:var(--pf-rte-bg);border-color:var(--pf-rte-border)}.tool:focus-visible{box-shadow:var(--pf-rte-focus-ring, var(--pf-focus-ring));outline:none}.tool:disabled{cursor:not-allowed;opacity:var(--pf-rte-disabled-opacity, 0.55)}.divider{background:var(--pf-rte-border);height:18px;margin:0 var(--space-1);width:1px}.editor{color:var(--pf-rte-text);font:inherit;line-height:1.5;min-height:var(--pf-rte-min-height, 140px);outline:none;overflow-wrap:anywhere;padding:var(--space-3)}.editor p{margin:0 0 0.75em}.editor p:last-child{margin-bottom:0}.editor:empty::before{color:var(--pf-rte-text-muted);content:attr(data-placeholder);pointer-events:none}.count{color:var(--pf-rte-text-muted);font-size:var(--font-size-sm);margin:0;text-align:end}`;const b=class{constructor(r){t(this,r);this.pfChange=e(this,"pfChange");if(r.$hostElement$["s-ei"]){this.internals=r.$hostElement$["s-ei"]}else{this.internals=r.$hostElement$.attachInternals();r.$hostElement$["s-ei"]=this.internals}}internals;get el(){return r(this)}name;value="";label;description;error;placeholder="Start typing...";minHeight=140;characterMax;required=false;disabled=false;pfChange;characterCount=0;initialValue="";lastWithinLimit="";editor;toolbar;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}componentDidLoad(){this.writeValueIntoEditor();if(this.toolbar)n(d(this.toolbar))}handleValueChange(){this.writeValueIntoEditor();this.syncFormState()}syncFormState(){const t=this.editor?.textContent??"";this.internals.setFormValue(this.value??"");c(this.internals,t.trim().length>0,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}async format(t){this.runCommand(t)}formResetCallback(){this.value=this.initialValue;this.writeValueIntoEditor()}writeValueIntoEditor(){const t=f(this.value??"");if(this.editor&&this.editor.innerHTML!==t)this.editor.innerHTML=t;this.lastWithinLimit=t;this.characterCount=this.editor?.textContent?.length??0}onInput=()=>{if(!this.editor)return;const t=this.editor.textContent?.length??0;if(typeof this.characterMax==="number"&&t>this.characterMax){this.editor.innerHTML=this.lastWithinLimit;this.characterCount=this.editor.textContent?.length??0;return}this.lastWithinLimit=this.editor.innerHTML;this.characterCount=t;this.value=this.editor.innerHTML;this.syncFormState();this.pfChange.emit({value:this.value})};runCommand(t){if(!this.editor||this.disabled)return;this.editor.focus();document.execCommand?.(t);this.onInput()}onToolbarKeyDown=t=>{if(t.defaultPrevented||!this.toolbar)return;const e=l(t.key,"horizontal");if(!e)return;const r=d(this.toolbar);const i=r.indexOf(this.el.shadowRoot?.activeElement);if(i===-1)return;const a=s(e,r.map(((t,e)=>e)),i);if(a>=0){t.preventDefault();r[a].focus()}};onToolbarFocusIn=t=>{if(this.toolbar)n(d(this.toolbar),t.target)};render(){const t=typeof this.characterMax==="number";const e=o(this.description&&"description",this.error&&"error",t&&"count");return i(a,{key:"1e777ccc50af79784ab6348ff378ebc505919fb2"},i("div",{key:"432f2eaa3288f993ec43423cccc29461713d0231",class:"field",part:"field"},this.label&&i("label",{key:"04fea69f6c553e6f0a9008696ec9a65b5741ba42",class:"label",part:"label",id:"label",htmlFor:"editor"},this.label,this.required&&i("span",{key:"104964261dc140c4aa59b3831ed40bdcd298b714",class:"required","aria-hidden":"true"},"*")),i("div",{key:"221e3f47b1bec4663155ad201bef63e1533eeb85",class:{box:true,"box--invalid":Boolean(this.error),"box--disabled":this.disabled}},i("div",{key:"20e03010935746f7491ec091395c698520d65f1b",class:"toolbar",part:"toolbar",role:"toolbar","aria-label":"Formatting options","aria-orientation":"horizontal",ref:t=>this.toolbar=t,onKeyDown:this.onToolbarKeyDown,onFocusin:this.onToolbarFocusIn},h.map((t=>[t.separatorBefore?i("span",{class:"divider","aria-hidden":"true"}):null,i("button",{type:"button",class:"tool",part:"tool","data-command":t.command,"aria-label":t.label,disabled:this.disabled,onMouseDown:t=>t.preventDefault(),onClick:()=>this.runCommand(t.command)},t.text)]))),i("div",{key:"ee4fa67a3c45efe5fb9d4e9f77d1a639fcee5c1a",id:"editor",class:"editor",part:"editor",role:"textbox","aria-multiline":"true","aria-labelledby":this.label?"label":null,"aria-required":this.required?"true":null,"aria-invalid":this.error?"true":null,"aria-describedby":e,"aria-disabled":this.disabled?"true":null,contentEditable:!this.disabled,"data-placeholder":this.placeholder,style:{"--pf-rte-min-height":`${this.minHeight}px`},ref:t=>this.editor=t,onInput:this.onInput})),this.description&&i("p",{key:"e55178dd64e111d6940a9a2de5541a1adfefef8d",class:"description",part:"description",id:"description"},this.description),this.error&&i("p",{key:"118e10b3463e82ef5af5f0a51df45693b864b695",class:"error",part:"error",id:"error"},this.error),t&&i("p",{key:"c8163c0bb3c46c1ea8c6b0def9179fbd93dffa56",class:"count",part:"count",id:"count","aria-live":"polite"},this.characterCount,"/",this.characterMax)))}static get formAssociated(){return true}static get watchers(){return{value:[{handleValueChange:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}};b.style=p();export{b as pf_rich_text_editor};
+//# sourceMappingURL=p-4df4eed8.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["RICH_TEXT_COMMANDS","command","label","text","separatorBefore","stripOuterParagraph","html","trimmed","trim","startsWith","endsWith","indexOf","length","slice","pfRichTextEditorCss","PfRichTextEditor","internals","name","value","description","error","placeholder","minHeight","characterMax","required","disabled","pfChange","characterCount","initialValue","lastWithinLimit","editor","toolbar","componentWillLoad","this","syncFormState","componentDidLoad","writeValueIntoEditor","syncRovingTabIndex","getRovingItems","handleValueChange","textContent","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","format","runCommand","formResetCallback","next","innerHTML","onInput","emit","focus","document","execCommand","onToolbarKeyDown","event","defaultPrevented","action","resolveRovingKey","key","items","current","el","shadowRoot","activeElement","resolveListMove","map","_","index","preventDefault","onToolbarFocusIn","target","render","hasCount","describedBy","composeDescribedBy","h","Host","class","part","id","htmlFor","box","Boolean","role","ref","node","onKeyDown","onFocusin","tool","type","onMouseDown","onClick","contentEditable","style"],"sources":["../core/dist/rich-text.js","src/components/pf-rich-text-editor/pf-rich-text-editor.css?tag=pf-rich-text-editor&encapsulation=shadow","src/components/pf-rich-text-editor/pf-rich-text-editor.tsx"],"sourcesContent":["//#region src/rich-text.ts\n/**\n* The toolbar, as data.\n*\n* Shared so the two layers cannot offer different buttons, or the same\n* buttons under different names — a design system whose editor is `B I U` in\n* one framework and `B I U S` in another is two editors.\n*/\nvar RICH_TEXT_COMMANDS = [\n\t{\n\t\tcommand: \"bold\",\n\t\tlabel: \"Bold\",\n\t\ttext: \"B\"\n\t},\n\t{\n\t\tcommand: \"italic\",\n\t\tlabel: \"Italic\",\n\t\ttext: \"I\"\n\t},\n\t{\n\t\tcommand: \"underline\",\n\t\tlabel: \"Underline\",\n\t\ttext: \"U\"\n\t},\n\t{\n\t\tcommand: \"insertUnorderedList\",\n\t\tlabel: \"Bulleted list\",\n\t\ttext: \"• List\",\n\t\tseparatorBefore: true\n\t},\n\t{\n\t\tcommand: \"insertOrderedList\",\n\t\tlabel: \"Numbered list\",\n\t\ttext: \"1. List\"\n\t},\n\t{\n\t\tcommand: \"removeFormat\",\n\t\tlabel: \"Clear formatting\",\n\t\ttext: \"Clear\"\n\t}\n];\n/**\n* Drops a single wrapping `<p>` from a value, leaving everything else alone.\n*\n* A contenteditable browsers have been left to themselves wraps a first line\n* in `<p>` in some engines and not others, so a value round-tripped through\n* one and set into another gains a level of nesting each time. Stripping one\n* outer paragraph is what keeps `value` stable.\n*\n* The check that matters is that the first `</p>` **is** the last one. The\n* React `RichTextEditor` tested `startsWith('<p>')`, `endsWith('</p>')`,\n* `indexOf('<p>') === 0` and `lastIndexOf('</p>') === length - 4`, every one\n* of which is true of `<p>a</p><p>b</p>` — two paragraphs, which it then cut\n* into the broken fragment `a</p><p>b`. Measured against that exact input.\n*/\nfunction stripOuterParagraph(html) {\n\tif (!html) return \"\";\n\tconst trimmed = html.trim();\n\tif (!trimmed.startsWith(\"<p>\") || !trimmed.endsWith(\"</p>\")) return html;\n\tif (trimmed.indexOf(\"</p>\") !== trimmed.length - 4) return html;\n\treturn trimmed.slice(3, -4);\n}\n//#endregion\nexport { RICH_TEXT_COMMANDS, stripOuterParagraph };\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.box {\n  background: var(--pf-rte-bg);\n  border: 1px solid var(--pf-rte-border);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n}\n\n.box:focus-within {\n  border-color: var(--pf-rte-focus-border);\n  box-shadow: var(--pf-rte-focus-ring, var(--pf-focus-ring));\n}\n\n.box--invalid {\n  border-color: var(--pf-rte-invalid-border);\n}\n\n.box--disabled {\n  opacity: var(--pf-rte-disabled-opacity, 0.75);\n}\n\n.toolbar {\n  align-items: center;\n  background: var(--pf-rte-bg-subtle);\n  border-bottom: 1px solid var(--pf-rte-border);\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  padding: var(--space-2);\n}\n\n.tool {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--radius-sm);\n  color: var(--pf-rte-text);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  min-height: 28px;\n  padding: 0 var(--space-2);\n}\n\n.tool:hover:not(:disabled) {\n  background: var(--pf-rte-bg);\n  border-color: var(--pf-rte-border);\n}\n\n.tool:focus-visible {\n  box-shadow: var(--pf-rte-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.tool:disabled {\n  cursor: not-allowed;\n  opacity: var(--pf-rte-disabled-opacity, 0.55);\n}\n\n.divider {\n  background: var(--pf-rte-border);\n  height: 18px;\n  margin: 0 var(--space-1);\n  width: 1px;\n}\n\n.editor {\n  color: var(--pf-rte-text);\n  font: inherit;\n  line-height: 1.5;\n  min-height: var(--pf-rte-min-height, 140px);\n  outline: none;\n  overflow-wrap: anywhere;\n  padding: var(--space-3);\n}\n\n/*\n * The browser's own paragraphs, which `execCommand` and Enter both produce.\n * There is no `::slotted` involved: this content is in the shadow root,\n * written there imperatively, so a plain descendant selector reaches it.\n */\n.editor p {\n  margin: 0 0 0.75em;\n}\n\n.editor p:last-child {\n  margin-bottom: 0;\n}\n\n.editor:empty::before {\n  color: var(--pf-rte-text-muted);\n  content: attr(data-placeholder);\n  pointer-events: none;\n}\n\n.count {\n  color: var(--pf-rte-text-muted);\n  font-size: var(--font-size-sm);\n  margin: 0;\n  text-align: end;\n}\n","import {\n  RICH_TEXT_COMMANDS,\n  composeDescribedBy,\n  getRovingItems,\n  resolveListMove,\n  resolveRovingKey,\n  stripOuterParagraph,\n  syncRovingTabIndex,\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 rich-text field over a `contenteditable`.\n *\n * The toolbar is core's list, so this and the React `RichTextEditor` cannot\n * offer different buttons, and the value is normalised with core's\n * `stripOuterParagraph`, so they cannot disagree about what a round trip\n * looks like.\n *\n * Two things differ from the React component, both deliberate:\n *\n * - **The toolbar is one tab stop**, with the arrows moving inside it, which\n *   is the ARIA toolbar pattern and what `pf-toolbar` already does. The React\n *   version is six tab stops inside a `role=\"toolbar\"`, so tabbing past the\n *   field walks every button; `todo.md` has that.\n * - **It is a real form control.** `formAssociated` with `ElementInternals` is\n *   what puts the value in `FormData`; a `contenteditable` is not a form\n *   control in any framework, and the React component's value reaches a form\n *   only if the consumer wires it there themselves.\n *\n * `document.execCommand` is deprecated and is still the only way to apply\n * formatting inside a `contenteditable` without a dependency, which is the\n * same trade the React component makes.\n *\n * @part field - the wrapper around label, toolbar, editor and messages.\n * @part label - the label element.\n * @part toolbar - the formatting toolbar.\n * @part tool - one toolbar button.\n * @part editor - the editable area.\n * @part count - the character counter.\n * @part description - the hint text.\n * @part error - the error message.\n */\n@Component({\n  tag: 'pf-rich-text-editor',\n  styleUrl: 'pf-rich-text-editor.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfRichTextEditor {\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  /** The field's value, as HTML. */\n  @Prop({ mutable: true }) value = '';\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() placeholder = 'Start typing...';\n\n  /** The editable area's smallest height, in pixels. */\n  @Prop() minHeight = 140;\n\n  /** The most characters of text the field will hold. */\n  @Prop() characterMax?: number;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the value changes, however it changed. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The text length, which the counter shows. */\n  @State() characterCount = 0;\n\n  /** The value a reset restores, captured before `value` can be replaced. */\n  private initialValue = '';\n\n  /** The last value inside the character limit, which an overrun reverts to. */\n  private lastWithinLimit = '';\n\n  private editor?: HTMLElement;\n\n  private toolbar?: HTMLElement;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  componentDidLoad() {\n    this.writeValueIntoEditor();\n    if (this.toolbar) syncRovingTabIndex(getRovingItems(this.toolbar));\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.writeValueIntoEditor();\n    this.syncFormState();\n  }\n\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const text = this.editor?.textContent ?? '';\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, text.trim().length > 0, this.required, this.error);\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** Applies one of the toolbar's commands, as pressing its button does. */\n  @Method()\n  async format(command: string) {\n    this.runCommand(command);\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * the rule a native `<input value=\"initial\">` follows.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.writeValueIntoEditor();\n  }\n\n  /**\n   * The editable area's content is written imperatively, never rendered.\n   *\n   * A `contenteditable` that a vdom also owns is a fight: the person types,\n   * the DOM changes under the renderer, and the next render puts the old\n   * content back with the caret at the start. So the element renders an empty\n   * box once and sets `innerHTML` only when the value it holds and the value\n   * in the box actually differ.\n   */\n  private writeValueIntoEditor() {\n    const next = stripOuterParagraph(this.value ?? '');\n    if (this.editor && this.editor.innerHTML !== next) this.editor.innerHTML = next;\n\n    this.lastWithinLimit = next;\n    this.characterCount = this.editor?.textContent?.length ?? 0;\n  }\n\n  private onInput = () => {\n    if (!this.editor) return;\n\n    const length = this.editor.textContent?.length ?? 0;\n\n    /*\n     * Over the limit: put the last good value back rather than let the\n     * content grow. The caret lands at the start of the box, which is the\n     * cost of this approach and the reason a limit should be generous.\n     */\n    if (typeof this.characterMax === 'number' && length > this.characterMax) {\n      this.editor.innerHTML = this.lastWithinLimit;\n      this.characterCount = this.editor.textContent?.length ?? 0;\n      return;\n    }\n\n    this.lastWithinLimit = this.editor.innerHTML;\n    this.characterCount = length;\n    this.value = this.editor.innerHTML;\n    this.syncFormState();\n    this.pfChange.emit({ value: this.value });\n  };\n\n  private runCommand(command: string) {\n    if (!this.editor || this.disabled) return;\n\n    this.editor.focus();\n    /*\n     * Deprecated, and still the only way to format inside a\n     * `contenteditable` without a dependency. It is also the one DOM call\n     * here that a test project cannot make: Stencil's mock DOM has no\n     * `execCommand` at all, so the toolbar is browser-tested.\n     */\n    document.execCommand?.(command);\n    this.onInput();\n  }\n\n  /** The toolbar is one tab stop, with the arrows moving inside it. */\n  private onToolbarKeyDown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || !this.toolbar) return;\n\n    const action = resolveRovingKey(event.key, 'horizontal');\n    if (!action) return;\n\n    const items = getRovingItems(this.toolbar);\n    const current = items.indexOf(this.el.shadowRoot?.activeElement as HTMLElement);\n    if (current === -1) return;\n\n    const next = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      current,\n    );\n    if (next >= 0) {\n      event.preventDefault();\n      items[next].focus();\n    }\n  };\n\n  private onToolbarFocusIn = (event: FocusEvent) => {\n    if (this.toolbar) syncRovingTabIndex(getRovingItems(this.toolbar), event.target as HTMLElement);\n  };\n\n  render() {\n    const hasCount = typeof this.characterMax === 'number';\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n      hasCount && 'count',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" id=\"label\" htmlFor=\"editor\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div\n            class={{\n              box: true,\n              'box--invalid': Boolean(this.error),\n              'box--disabled': this.disabled,\n            }}\n          >\n            <div\n              class=\"toolbar\"\n              part=\"toolbar\"\n              role=\"toolbar\"\n              aria-label=\"Formatting options\"\n              aria-orientation=\"horizontal\"\n              ref={(node) => (this.toolbar = node)}\n              onKeyDown={this.onToolbarKeyDown}\n              onFocusin={this.onToolbarFocusIn}\n            >\n              {RICH_TEXT_COMMANDS.map((tool) => [\n                tool.separatorBefore ? <span class=\"divider\" aria-hidden=\"true\"></span> : null,\n                <button\n                  type=\"button\"\n                  class=\"tool\"\n                  part=\"tool\"\n                  data-command={tool.command}\n                  aria-label={tool.label}\n                  disabled={this.disabled}\n                  // A press must not take the caret out of the editor, or the\n                  // command has no selection to apply to.\n                  onMouseDown={(event: MouseEvent) => event.preventDefault()}\n                  onClick={() => this.runCommand(tool.command)}\n                >\n                  {tool.text}\n                </button>,\n              ])}\n            </div>\n\n            {/*\n              Rendered empty, once. Its content is set imperatively, because a\n              vdom that also owned it would put the old content back under the\n              person's caret on the next render.\n            */}\n            <div\n              id=\"editor\"\n              class=\"editor\"\n              part=\"editor\"\n              role=\"textbox\"\n              aria-multiline=\"true\"\n              aria-labelledby={this.label ? 'label' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              aria-disabled={this.disabled ? 'true' : null}\n              contentEditable={!this.disabled}\n              data-placeholder={this.placeholder}\n              style={{ '--pf-rte-min-height': `${this.minHeight}px` }}\n              ref={(node) => (this.editor = node)}\n              onInput={this.onInput}\n            ></div>\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n\n          {hasCount && (\n            <p class=\"count\" part=\"count\" id=\"count\" aria-live=\"polite\">\n              {this.characterCount}/{this.characterMax}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sPAQA,IAAIA,EAAqB,CACxB,CACCC,QAAS,OACTC,MAAO,OACPC,KAAM,KAEP,CACCF,QAAS,SACTC,MAAO,SACPC,KAAM,KAEP,CACCF,QAAS,YACTC,MAAO,YACPC,KAAM,KAEP,CACCF,QAAS,sBACTC,MAAO,gBACPC,KAAM,SACNC,gBAAiB,MAElB,CACCH,QAAS,oBACTC,MAAO,gBACPC,KAAM,WAEP,CACCF,QAAS,eACTC,MAAO,mBACPC,KAAM,UAiBR,SAASE,EAAoBC,GAC5B,IAAKA,EAAM,MAAO,GAClB,MAAMC,EAAUD,EAAKE,OACrB,IAAKD,EAAQE,WAAW,SAAWF,EAAQG,SAAS,QAAS,OAAOJ,EACpE,GAAIC,EAAQI,QAAQ,UAAYJ,EAAQK,OAAS,EAAG,OAAON,EAC3D,OAAOC,EAAQM,MAAM,GAAG,EACzB,CC7DA,MAAMC,EAAsB,IAAM,47D,MC8DrBC,EAAgB,M,2NACRC,U,wBAUMC,KAGAC,MAAQ,GAEzBhB,MAEAiB,YAGAC,MAEAC,YAAc,kBAGdC,UAAY,IAGZC,aAEiBC,SAAW,MAEXC,SAAW,MAG3BC,SAGAC,eAAiB,EAGlBC,aAAe,GAGfC,gBAAkB,GAElBC,OAEAC,QAER,iBAAAC,GACEC,KAAKL,aAAeK,KAAKf,OAAS,GAClCe,KAAKC,e,CAGP,gBAAAC,GACEF,KAAKG,uBACL,GAAIH,KAAKF,QAASM,EAAmBC,EAAeL,KAAKF,S,CAI3D,iBAAAQ,GACEN,KAAKG,uBACLH,KAAKC,e,CAKP,aAAAA,GACE,MAAM/B,EAAO8B,KAAKH,QAAQU,aAAe,GACzCP,KAAKjB,UAAUyB,aAAaR,KAAKf,OAAS,IAC1CwB,EAAqBT,KAAKjB,UAAWb,EAAKK,OAAOI,OAAS,EAAGqB,KAAKT,SAAUS,KAAKb,M,CAInF,mBAAMuB,GACJ,OAAOV,KAAKjB,UAAU2B,e,CAIxB,oBAAMC,GACJ,OAAOX,KAAKjB,UAAU4B,gB,CAIxB,0BAAMC,GACJ,OAAOZ,KAAKjB,UAAU8B,iB,CAKxB,YAAMC,CAAO9C,GACXgC,KAAKe,WAAW/C,E,CAOlB,iBAAAgD,GACEhB,KAAKf,MAAQe,KAAKL,aAClBK,KAAKG,sB,CAYC,oBAAAA,GACN,MAAMc,EAAO7C,EAAoB4B,KAAKf,OAAS,IAC/C,GAAIe,KAAKH,QAAUG,KAAKH,OAAOqB,YAAcD,EAAMjB,KAAKH,OAAOqB,UAAYD,EAE3EjB,KAAKJ,gBAAkBqB,EACvBjB,KAAKN,eAAiBM,KAAKH,QAAQU,aAAa5B,QAAU,C,CAGpDwC,QAAU,KAChB,IAAKnB,KAAKH,OAAQ,OAElB,MAAMlB,EAASqB,KAAKH,OAAOU,aAAa5B,QAAU,EAOlD,UAAWqB,KAAKV,eAAiB,UAAYX,EAASqB,KAAKV,aAAc,CACvEU,KAAKH,OAAOqB,UAAYlB,KAAKJ,gBAC7BI,KAAKN,eAAiBM,KAAKH,OAAOU,aAAa5B,QAAU,EACzD,M,CAGFqB,KAAKJ,gBAAkBI,KAAKH,OAAOqB,UACnClB,KAAKN,eAAiBf,EACtBqB,KAAKf,MAAQe,KAAKH,OAAOqB,UACzBlB,KAAKC,gBACLD,KAAKP,SAAS2B,KAAK,CAAEnC,MAAOe,KAAKf,OAAQ,EAGnC,UAAA8B,CAAW/C,GACjB,IAAKgC,KAAKH,QAAUG,KAAKR,SAAU,OAEnCQ,KAAKH,OAAOwB,QAOZC,SAASC,cAAcvD,GACvBgC,KAAKmB,S,CAICK,iBAAoBC,IAC1B,GAAIA,EAAMC,mBAAqB1B,KAAKF,QAAS,OAE7C,MAAM6B,EAASC,EAAiBH,EAAMI,IAAK,cAC3C,IAAKF,EAAQ,OAEb,MAAMG,EAAQzB,EAAeL,KAAKF,SAClC,MAAMiC,EAAUD,EAAMpD,QAAQsB,KAAKgC,GAAGC,YAAYC,eAClD,GAAIH,KAAY,EAAI,OAEpB,MAAMd,EAAOkB,EACXR,EACAG,EAAMM,KAAI,CAACC,EAAGC,IAAUA,IACxBP,GAEF,GAAId,GAAQ,EAAG,CACbQ,EAAMc,iBACNT,EAAMb,GAAMI,O,GAIRmB,iBAAoBf,IAC1B,GAAIzB,KAAKF,QAASM,EAAmBC,EAAeL,KAAKF,SAAU2B,EAAMgB,OAAsB,EAGjG,MAAAC,GACE,MAAMC,SAAkB3C,KAAKV,eAAiB,SAC9C,MAAMsD,EAAcC,EAClB7C,KAAKd,aAAe,cACpBc,KAAKb,OAAS,QACdwD,GAAY,SAGd,OACEG,EAACC,EAAI,CAAAlB,IAAA,4CACHiB,EAAA,OAAAjB,IAAA,2CAAKmB,MAAM,QAAQC,KAAK,SACrBjD,KAAK/B,OACJ6E,EAAA,SAAAjB,IAAA,2CAAOmB,MAAM,QAAQC,KAAK,QAAQC,GAAG,QAAQC,QAAQ,UAClDnD,KAAK/B,MACL+B,KAAKT,UACJuD,EAAA,QAAAjB,IAAA,2CAAMmB,MAAM,WAAU,cAAa,QAAM,MAO/CF,EAAA,OAAAjB,IAAA,2CACEmB,MAAO,CACLI,IAAK,KACL,eAAgBC,QAAQrD,KAAKb,OAC7B,gBAAiBa,KAAKR,WAGxBsD,EAAA,OAAAjB,IAAA,2CACEmB,MAAM,UACNC,KAAK,UACLK,KAAK,UAAS,aACH,qBAAoB,mBACd,aACjBC,IAAMC,GAAUxD,KAAKF,QAAU0D,EAC/BC,UAAWzD,KAAKwB,iBAChBkC,UAAW1D,KAAKwC,kBAEfzE,EAAmBqE,KAAKuB,GAAS,CAChCA,EAAKxF,gBAAkB2E,EAAA,QAAME,MAAM,UAAS,cAAa,SAAiB,KAC1EF,EAAA,UACEc,KAAK,SACLZ,MAAM,OACNC,KAAK,OAAM,eACGU,EAAK3F,QAAO,aACd2F,EAAK1F,MACjBuB,SAAUQ,KAAKR,SAGfqE,YAAcpC,GAAsBA,EAAMc,iBAC1CuB,QAAS,IAAM9D,KAAKe,WAAW4C,EAAK3F,UAEnC2F,EAAKzF,UAUZ4E,EAAA,OAAAjB,IAAA,2CACEqB,GAAG,SACHF,MAAM,SACNC,KAAK,SACLK,KAAK,UAAS,iBACC,OAAM,kBACJtD,KAAK/B,MAAQ,QAAU,KAAI,gBAC7B+B,KAAKT,SAAW,OAAS,KAAI,eAC9BS,KAAKb,MAAQ,OAAS,KAAI,mBACtByD,EAAW,gBACd5C,KAAKR,SAAW,OAAS,KACxCuE,iBAAkB/D,KAAKR,SAAQ,mBACbQ,KAAKZ,YACvB4E,MAAO,CAAE,sBAAuB,GAAGhE,KAAKX,eACxCkE,IAAMC,GAAUxD,KAAKH,OAAS2D,EAC9BrC,QAASnB,KAAKmB,WAIjBnB,KAAKd,aACJ4D,EAAA,KAAAjB,IAAA,2CAAGmB,MAAM,cAAcC,KAAK,cAAcC,GAAG,eAC1ClD,KAAKd,aAITc,KAAKb,OACJ2D,EAAA,KAAAjB,IAAA,2CAAGmB,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BlD,KAAKb,OAITwD,GACCG,EAAA,KAAAjB,IAAA,2CAAGmB,MAAM,QAAQC,KAAK,QAAQC,GAAG,QAAO,YAAW,UAChDlD,KAAKN,eAAc,IAAGM,KAAKV,e","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as a}from"./p-Bm6UxEit.js";const s=()=>`:host{border-bottom:1px solid var(--pf-table-border);color:var(--pf-table-text);display:table-cell;font-size:var(--font-size-sm);line-height:1.4;padding:var(--pf-table-cell-padding-block, 14px) var(--space-3);vertical-align:middle}:host([hidden]){display:none}@media (min-width: 768px){:host{padding-inline:var(--space-4)}}:host([head]){background:var(--pf-table-bg-subtle);color:var(--pf-table-text-muted);font-weight:var(--font-weight-semibold);position:var(--pf-table-head-position, static);top:0;z-index:1}:host([last]){border-bottom:0}:host([align='left']){text-align:start}:host([align='center']){text-align:center}:host([align='right']){text-align:end}.sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:var(--space-2);justify-content:inherit;padding:0;width:100%}.sort:hover,.sort:focus-visible{color:var(--pf-table-text);outline:none}.indicator{display:inline-flex;font-size:var(--font-size-2xs);line-height:1;opacity:0.7}`;const o=class{constructor(i){t(this,i);this.pfTableSort=e(this,"pfTableSort")}head=false;last=false;align="left";width;sortKey;sortable=false;sort="none";pfTableSort;onSort=()=>{if(!this.sortKey)return;this.pfTableSort.emit({key:this.sortKey})};render(){const t=this.head&&this.sortable&&Boolean(this.sortKey);return i(a,{key:"419a9736fa82721764ea58179c56000a4eed5c25",role:this.head?"columnheader":"cell","aria-sort":t?this.sort:null,style:this.width?{width:this.width}:undefined},t?i("button",{type:"button",class:"sort",part:"sort",onClick:this.onSort},i("span",{class:"label"},i("slot",null)),i("span",{class:"indicator",part:"indicator","aria-hidden":"true"},this.sort==="ascending"?"^":this.sort==="descending"?"v":"-")):i("slot",null))}};o.style=s();export{o as pf_table_cell};
+//# sourceMappingURL=p-4e785310.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfTableCellCss","PfTableCell","head","last","align","width","sortKey","sortable","sort","pfTableSort","onSort","this","emit","key","render","Boolean","h","Host","role","style","undefined","type","class","part","onClick"],"sources":["src/components/pf-table-cell/pf-table-cell.css?tag=pf-table-cell&encapsulation=shadow","src/components/pf-table-cell/pf-table-cell.tsx"],"sourcesContent":[":host {\n  border-bottom: 1px solid var(--pf-table-border);\n  color: var(--pf-table-text);\n  display: table-cell;\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  padding: var(--pf-table-cell-padding-block, 14px) var(--space-3);\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--md) {\n  :host {\n    padding-inline: var(--space-4);\n  }\n}\n\n:host([head]) {\n  background: var(--pf-table-bg-subtle);\n  color: var(--pf-table-text-muted);\n  font-weight: var(--font-weight-semibold);\n  /*\n   * Read from the table rather than told: `sticky` only when the table asked\n   * for a sticky header, `static` otherwise.\n   */\n  position: var(--pf-table-head-position, static);\n  top: 0;\n  z-index: 1;\n}\n\n/* The table's own border is the rule under the last row. */\n:host([last]) {\n  border-bottom: 0;\n}\n\n:host([align='left']) {\n  text-align: start;\n}\n\n:host([align='center']) {\n  text-align: center;\n}\n\n:host([align='right']) {\n  text-align: end;\n}\n\n.sort {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  gap: var(--space-2);\n  /* Follows the cell's own alignment rather than fighting it. */\n  justify-content: inherit;\n  padding: 0;\n  width: 100%;\n}\n\n.sort:hover,\n.sort:focus-visible {\n  color: var(--pf-table-text);\n  outline: none;\n}\n\n.indicator {\n  display: inline-flex;\n  font-size: var(--font-size-2xs);\n  line-height: 1;\n  opacity: 0.7;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type PfTableCellAlign = 'left' | 'center' | 'right';\n\n/**\n * One cell of a `pf-table` row.\n *\n * A header cell carries `columnheader` rather than `cell`, which the row tells\n * it; `sortable` turns the label into a button that asks the table to sort.\n * The table answers by writing `sort` back, which is what `aria-sort` and the\n * indicator read — the ask and the answer kept apart, as everywhere else here.\n *\n * @slot - the cell's content.\n * @part sort - the header's sort button, when `sortable` is set.\n * @part indicator - the sort indicator inside that button.\n */\n@Component({\n  tag: 'pf-table-cell',\n  styleUrl: 'pf-table-cell.css',\n  shadow: true,\n})\nexport class PfTableCell {\n  /** Set by the row: a header cell. Reflected, so the stylesheet reads it. */\n  @Prop({ mutable: true, reflect: true }) head = false;\n\n  /** Set by the row: a cell in the last body row, which drops its rule. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** Which way the content sits. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) align: PfTableCellAlign = 'left';\n\n  /** A column width, as any CSS length. Only a header cell's is read. */\n  @Prop() width?: string;\n\n  /**\n   * Identifies the column in the table's sort state. A header cell with one\n   * and `sortable` set is the only thing that can be sorted on.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-table-cell[sort-key=\"...\"]` finds\n   * nothing. The table reads the property.\n   */\n  @Prop({ reflect: true }) sortKey?: string;\n\n  /** Offer to sort on this column. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) sortable = false;\n\n  /** Set by the table: how this column is sorted, if it is. */\n  @Prop({ mutable: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  /** Asks the table to sort on this column. The table decides which way. */\n  @Event() pfTableSort!: EventEmitter<{ key: string }>;\n\n  private onSort = () => {\n    if (!this.sortKey) return;\n    this.pfTableSort.emit({ key: this.sortKey });\n  };\n\n  render() {\n    const sortable = this.head && this.sortable && Boolean(this.sortKey);\n\n    return (\n      <Host\n        role={this.head ? 'columnheader' : 'cell'}\n        aria-sort={sortable ? this.sort : null}\n        style={this.width ? { width: this.width } : undefined}\n      >\n        {sortable ? (\n          <button type=\"button\" class=\"sort\" part=\"sort\" onClick={this.onSort}>\n            <span class=\"label\">\n              <slot />\n            </span>\n            {/* Decorative: `aria-sort` on the header is what is announced. */}\n            <span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">\n              {this.sort === 'ascending' ? '^' : this.sort === 'descending' ? 'v' : '-'}\n            </span>\n          </button>\n        ) : (\n          <slot />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,IAAM,6+B,MCqBhBC,EAAW,M,gEAEkBC,KAAO,MAGPC,KAAO,MAGtBC,MAA0B,OAG3CC,MAUiBC,QAGAC,SAAW,MAGXC,KAA4C,OAG5DC,YAEDC,OAAS,KACf,IAAKC,KAAKL,QAAS,OACnBK,KAAKF,YAAYG,KAAK,CAAEC,IAAKF,KAAKL,SAAU,EAG9C,MAAAQ,GACE,MAAMP,EAAWI,KAAKT,MAAQS,KAAKJ,UAAYQ,QAAQJ,KAAKL,SAE5D,OACEU,EAACC,EAAI,CAAAJ,IAAA,2CACHK,KAAMP,KAAKT,KAAO,eAAiB,OAAM,YAC9BK,EAAWI,KAAKH,KAAO,KAClCW,MAAOR,KAAKN,MAAQ,CAAEA,MAAOM,KAAKN,OAAUe,WAE3Cb,EACCS,EAAA,UAAQK,KAAK,SAASC,MAAM,OAAOC,KAAK,OAAOC,QAASb,KAAKD,QAC3DM,EAAA,QAAMM,MAAM,SACVN,EAAA,cAGFA,EAAA,QAAMM,MAAM,YAAYC,KAAK,YAAW,cAAa,QAClDZ,KAAKH,OAAS,YAAc,IAAMG,KAAKH,OAAS,aAAe,IAAM,MAI1EQ,EAAA,a","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as s,H as i}from"./p-Bm6UxEit.js";import{o as n,p as o}from"./p-CC7AyfOt.js";import{K as r}from"./p-g4FlTDZx.js";const p=()=>`:host{display:inline-flex}:host([hidden]){display:none}.panel{inset:auto;margin:0;background:var(--pf-popover-bg);border:1px solid var(--pf-popover-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);color:var(--pf-popover-text);max-width:min(320px, calc(100vw - 2 * var(--space-4)));padding:var(--space-3);width:max-content}.panel:focus-visible{outline:none}.panel:popover-open{animation:pf-popover-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-popover-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}`;const h=class{constructor(a){e(this,a);this.pfOpenChange=t(this,"pfOpenChange")}get el(){return a(this)}open=false;align="start";label;dismissable=true;pfOpenChange;stopObserving;componentDidLoad(){this.syncTrigger();if(this.open)this.showPanel()}disconnectedCallback(){this.stopObserving?.()}async show(){this.open=true}async hide(){this.open=false}syncOpen(e,t){if(e)this.showPanel();else this.hidePanel();this.syncTrigger();if(e!==t)this.pfOpenChange.emit({open:e})}get panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.firstElementChild}syncTrigger(){const e=this.trigger;if(!e)return;e.setAttribute("aria-haspopup","dialog");e.setAttribute("aria-expanded",this.open?"true":"false")}showPanel(){const e=this.panel;if(!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=n({getAnchor:()=>this.trigger,getFloating:()=>e,align:this.align,matchAnchorWidth:false,flip:true,onChange:({left:t,top:a})=>o(e,t,a)});e.focus()}hidePanel(){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;this.open=!this.open}handleKeyDown(e){if(e.key!==r.Escape||this.dismissable||!this.open)return;e.stopPropagation();this.open=false}onToggle=e=>{const t=e.newState==="open";if(t!==this.open)this.open=t};render(){return s(i,{key:"df31f83d35301ca9e0cee9952b990ed09d9bb1a3"},s("slot",{key:"a302c69a56ff5e286b5d78b7fd17c0592bc5268d",onSlotchange:()=>this.syncTrigger()}),s("div",{key:"e1e7272e02705426eb375e4397cbc8941ccfb995",class:"panel",part:"panel",popover:this.dismissable?"auto":"manual",role:"dialog","aria-label":this.label,tabindex:"-1",onToggle:this.onToggle},s("slot",{key:"56c901b8c16a17dc5725e49c55262e0218262595",name:"content"})))}static get watchers(){return{open:[{syncOpen:0}]}}};h.style=p();export{h as pf_popover};
+//# sourceMappingURL=p-4e7c51e4.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfPopoverCss","PfPopover","open","align","label","dismissable","pfOpenChange","stopObserving","componentDidLoad","this","syncTrigger","showPanel","disconnectedCallback","show","hide","syncOpen","next","previous","hidePanel","emit","panel","el","shadowRoot","querySelector","trigger","firstElementChild","setAttribute","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","placePopover","focus","undefined","hidePopover","handleClick","event","composedPath","includes","handleKeyDown","key","Keys","Escape","stopPropagation","onToggle","newState","render","h","Host","onSlotchange","class","part","popover","role","tabindex","name"],"sources":["src/components/pf-popover/pf-popover.css?tag=pf-popover&encapsulation=shadow","src/components/pf-popover/pf-popover.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\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.panel {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-popover-bg);\n  border: 1px solid var(--pf-popover-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-lg);\n  color: var(--pf-popover-text);\n  max-width: min(320px, calc(100vw - 2 * var(--space-4)));\n  padding: var(--space-3);\n  width: max-content;\n}\n\n.panel:focus-visible {\n  outline: none;\n}\n\n.panel:popover-open {\n  animation: pf-popover-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-popover-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n","import { Keys, observeAnchoredPosition } from '@pitchfork-ui/core';\n\nimport { placePopover } from '../../place-popover';\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\n/**\n * An interactive panel anchored to its trigger.\n *\n * `popover=\"auto\"` rather than `manual`, because the browser then does\n * light-dismiss and Escape itself — measured from inside a shadow root with\n * trusted input: a real outside click and a real Escape both close an `auto`\n * popover while a `manual` one stays open. That is less code than\n * `onOutsideInteraction` and it composes with the top-layer stack, so a\n * popover inside a popover closes in the right order.\n *\n * @slot - the trigger.\n * @slot content - the panel's content.\n * @part panel - the floating panel.\n */\n@Component({\n  tag: 'pf-popover',\n  styleUrl: 'pf-popover.css',\n  shadow: true,\n})\nexport class PfPopover {\n  @Element() el!: HTMLElement;\n\n  /** Whether the panel is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge of the trigger the panel lines up with. */\n  @Prop() align: 'start' | 'end' = 'start';\n\n  /** Accessible name for the panel, which is a dialog. */\n  @Prop() label?: string;\n\n  /**\n   * Close on an outside click or Escape. Defaults to true.\n   *\n   * This is the `auto`/`manual` popover switch: turning it off hands the\n   * consumer responsibility for closing, which is what a popover holding an\n   * unfinished form wants.\n   */\n  @Prop() dismissable = true;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  private stopObserving?: () => void;\n\n  componentDidLoad() {\n    this.syncTrigger();\n    if (this.open) this.showPanel();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  /** Opens the panel. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the panel. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place a state change is announced, whatever caused it: a trigger\n   * click, `show()`/`hide()`, a consumer writing the prop, or the browser's own\n   * light-dismiss mirrored in below.\n   *\n   * Emitting from the `toggle` handler instead looked right and fired for none\n   * of the user-driven paths — by the time `toggle` arrives the click handler\n   * has already moved `open`, so the guard there saw no change. A consumer\n   * mirroring this value back sets `open` to what it already is, which Stencil\n   * does not treat as a change, so there is no loop.\n   */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\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=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.firstElementChild as HTMLElement | null;\n  }\n\n  /**\n   * The trigger's disclosure state.\n   *\n   * `aria-controls` is deliberately absent: it is an IDREF, and an IDREF does\n   * not cross a shadow boundary, so pointing it at the panel's id would leave\n   * a dangling reference — worse than none. `aria-expanded` and\n   * `aria-haspopup` carry what a screen reader announces here.\n   */\n  private syncTrigger() {\n    const trigger = this.trigger;\n    if (!trigger) return;\n    trigger.setAttribute('aria-haspopup', 'dialog');\n    trigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (!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      // A popover sizes to its own content rather than to the trigger, and\n      // flips above when there is no room below.\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    // The panel is a dialog, so focus belongs inside it once it is showing.\n    panel.focus();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    const trigger = this.trigger;\n    // Only the trigger toggles. A click inside the panel is the content's.\n    if (!trigger || !event.composedPath().includes(trigger)) return;\n    this.open = !this.open;\n  }\n\n  /**\n   * Escape for the `manual` case only. An `auto` popover is dismissed by the\n   * browser, and handling it here as well would fight that.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== Keys.Escape || this.dismissable || !this.open) return;\n    event.stopPropagation();\n    this.open = false;\n  }\n\n  /**\n   * Mirrors a change the browser made — light-dismiss, or being closed because\n   * another popover took the top layer — back into `open`, which then announces\n   * it through the watch above. Without this a consumer's `open` goes stale\n   * after a dismiss they did not initiate.\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=\"panel\"\n          part=\"panel\"\n          popover={this.dismissable ? 'auto' : 'manual'}\n          role=\"dialog\"\n          aria-label={this.label}\n          tabindex=\"-1\"\n          onToggle={this.onToggle}\n        >\n          <slot name=\"content\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAe,IAAM,mmB,MCmCdC,EAAS,M,0FAIoBC,KAAO,MAGvCC,MAAyB,QAGzBC,MASAC,YAAc,KAGbC,aAEDC,cAER,gBAAAC,GACEC,KAAKC,cACL,GAAID,KAAKP,KAAMO,KAAKE,W,CAGtB,oBAAAC,GACEH,KAAKF,iB,CAKP,UAAMM,GACJJ,KAAKP,KAAO,I,CAKd,UAAMY,GACJL,KAAKP,KAAO,K,CAed,QAAAa,CAASC,EAAeC,GACtB,GAAID,EAAMP,KAAKE,iBACVF,KAAKS,YACVT,KAAKC,cACL,GAAIM,IAASC,EAAUR,KAAKH,aAAaa,KAAK,CAAEjB,KAAMc,G,CAGxD,SAAYI,GACV,OAAOX,KAAKY,GAAGC,YAAYC,cAA2B,mBAAqB,I,CAG7E,WAAYC,GACV,OAAOf,KAAKY,GAAGI,iB,CAWT,WAAAf,GACN,MAAMc,EAAUf,KAAKe,QACrB,IAAKA,EAAS,OACdA,EAAQE,aAAa,gBAAiB,UACtCF,EAAQE,aAAa,gBAAiBjB,KAAKP,KAAO,OAAS,Q,CAGrD,SAAAS,GACN,MAAMS,EAAQX,KAAKW,MACnB,IAAKA,GAASA,EAAMO,QAAQ,iBAAkB,OAE9CP,EAAMQ,cACNnB,KAAKF,kBACLE,KAAKF,cAAgBsB,EAAwB,CAC3CC,UAAW,IAAMrB,KAAKe,QACtBO,YAAa,IAAMX,EACnBjB,MAAOM,KAAKN,MAGZ6B,iBAAkB,MAClBC,KAAM,KACNC,SAAU,EAAGC,OAAMC,SAAUC,EAAajB,EAAOe,EAAMC,KAIzDhB,EAAMkB,O,CAGA,SAAApB,GACNT,KAAKF,kBACLE,KAAKF,cAAgBgC,UACrB,MAAMnB,EAAQX,KAAKW,MACnB,GAAIA,GAAOO,QAAQ,iBAAkBP,EAAMoB,a,CAI7C,WAAAC,CAAYC,GACV,MAAMlB,EAAUf,KAAKe,QAErB,IAAKA,IAAYkB,EAAMC,eAAeC,SAASpB,GAAU,OACzDf,KAAKP,MAAQO,KAAKP,I,CAQpB,aAAA2C,CAAcH,GACZ,GAAIA,EAAMI,MAAQC,EAAKC,QAAUvC,KAAKJ,cAAgBI,KAAKP,KAAM,OACjEwC,EAAMO,kBACNxC,KAAKP,KAAO,K,CASNgD,SAAYR,IAClB,MAAM1B,EAAQ0B,EAAsBS,WAAa,OACjD,GAAInC,IAASP,KAAKP,KAAMO,KAAKP,KAAOc,CAAI,EAG1C,MAAAoC,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,4CACHO,EAAA,QAAAP,IAAA,2CAAMS,aAAc,IAAM9C,KAAKC,gBAC/B2C,EAAA,OAAAP,IAAA,2CACEU,MAAM,QACNC,KAAK,QACLC,QAASjD,KAAKJ,YAAc,OAAS,SACrCsD,KAAK,SAAQ,aACDlD,KAAKL,MACjBwD,SAAS,KACTV,SAAUzC,KAAKyC,UAEfG,EAAA,QAAAP,IAAA,2CAAMe,KAAK,a","ignoreList":[]}

package/dist/pitchfork/p-5064d2dd.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a as i,h as r,H as n}from"./p-Bm6UxEit.js";import{o,p as a}from"./p-CC7AyfOt.js";import{c as s}from"./p-DfpCerXM.js";import{K as l}from"./p-g4FlTDZx.js";import{a as c}from"./p-Cr6IXrUk.js";var p=e=>String(e).padStart(2,"0");function d(e){const t=/^(\d{1,2}):(\d{2})$/.exec((e??"").trim());if(!t)return{hour:null,minute:null};const i=Number(t[1]);const r=Number(t[2]);if(i>23||r>59)return{hour:null,minute:null};return{hour:i,minute:r}}function u(e){if(e.hour===null||e.minute===null)return"";return`${p(e.hour)}:${p(e.minute)}`}function h(e,t){if(e.hour===null||e.minute===null)return"";if(t===24)return`${p(e.hour)}:${p(e.minute)}`;return`${m(e.hour)}:${p(e.minute)} ${f(e.hour)}`}function f(e){return e<12?"AM":"PM"}function m(e){const t=e%12;return t===0?12:t}function b(e,t){const i=e%12;return t==="PM"?i+12:i}function g(e,t=1){const i=Math.max(1,Math.floor(t));const r=Math.ceil(e/i);return Array.from({length:r},((e,t)=>t*i))}function v(e){return e===24?g(24):g(12).map((e=>e+1))}const y=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-timepicker-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-timepicker-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-timepicker-bg);border:1px solid var(--pf-timepicker-border);border-radius:var(--radius-md);color:var(--pf-timepicker-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:focus-visible{border-color:var(--pf-timepicker-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-timepicker-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-timepicker-placeholder)}.description{color:var(--pf-timepicker-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-timepicker-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:var(--pf-timepicker-menu-bg);border:1px solid var(--pf-timepicker-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);display:flex;gap:var(--space-1);padding:var(--space-1)}.panel:popover-open{animation:pf-time-picker-in var(--pf-transition-enter)}@keyframes pf-time-picker-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}.column{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;scrollbar-width:thin}.column:focus-visible{outline:none}.option{background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-timepicker-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;padding:var(--space-1) var(--space-3);text-align:center}.option:hover{background:var(--pf-timepicker-option-hover-bg)}.option:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.option--selected{background:var(--pf-timepicker-option-active-bg);color:var(--pf-timepicker-option-active-text)}`;const k=class{constructor(i){e(this,i);this.pfChange=t(this,"pfChange");this.pfOpenChange=t(this,"pfOpenChange");if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}}get el(){return i(this)}internals;name;value="";open=false;hourCycle=24;minuteStep=1;label;description;error;placeholder="Select time";required=false;disabled=false;pfChange;pfOpenChange;initialValue="";stopObserving;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}componentDidRender(){if(this.open)this.scrollSelectedIntoView()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){this.internals.setFormValue(this.value||null);c(this.internals,Boolean(this.value),this.required,this.error)}syncOpen(e,t){if(e)this.showPanel();else this.hidePanel();if(e!==t)this.pfOpenChange.emit({open:e})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}get cycle(){return Number(this.hourCycle)===12?12:24}get panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}get parts(){return d(this.value)}showPanel(){const e=this.panel;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=o({getAnchor:()=>this.trigger,getFloating:()=>e,align:"start",matchAnchorWidth:false,flip:true,onChange:({left:t,top:i})=>a(e,t,i)});this.scrollSelectedIntoView();e.querySelector('[data-selected="true"]')?.focus()}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}scrollSelectedIntoView(){for(const e of Array.from(this.panel?.querySelectorAll('[data-selected="true"]')??[])){if(typeof e.scrollIntoView==="function"){e.scrollIntoView({block:"center"})}}}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t)this.trigger?.focus()};commit(e){const t=u(e);if(!t||t===this.value)return;this.value=t;this.pfChange.emit({value:t})}selectHour(e){const t=this.cycle===24?e:b(e,this.selectedMeridiem()??"AM");this.commit({hour:t,minute:this.parts.minute??0})}selectMinute(e){this.commit({hour:this.parts.hour??0,minute:e})}selectMeridiem(e){const{hour:t,minute:i}=this.parts;this.commit({hour:b(m(t??0),e),minute:i??0})}selectedMeridiem(){const{hour:e}=this.parts;return e===null?null:f(e)}onColumnKeyDown=e=>{if(e.key!==l.ArrowDown&&e.key!==l.ArrowUp)return;const t=e.currentTarget;const i=Array.from(t.querySelectorAll("button"));const r=i.indexOf(this.el.shadowRoot?.activeElement);if(r===-1)return;e.preventDefault();const n=e.key===l.ArrowDown?r+1:r-1;i[Math.min(Math.max(n,0),i.length-1)]?.focus()};renderColumn(e,t){return r("div",{class:"column",part:"column",role:"listbox","aria-label":e,tabindex:-1,onKeyDown:this.onColumnKeyDown},t.map((e=>r("button",{key:e.key,type:"button",part:"option",class:{option:true,"option--selected":e.selected},role:"option","aria-selected":e.selected?"true":"false","data-selected":e.selected?"true":"false",onClick:e.onSelect},e.label))))}render(){const e=s(this.description&&"description",this.error&&"error");const{hour:t,minute:i}=this.parts;const o=h(this.parts,this.cycle);const a=t===null?null:this.cycle===24?t:m(t);const l=this.selectedMeridiem();return r(n,{key:"8397a5200df46b5834039d4356dfa21b8ff04900"},r("div",{key:"5b28cd916ea6fb07080b7ccb953cb46f3f50e2a1",class:"field",part:"field"},this.label&&r("label",{key:"dca55c09008da4d20087f89e9574332ed5750c05",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&r("span",{key:"85dc9a7dde71ff2b8a73cacffb432a006c2244ab",class:"required","aria-hidden":"true"},"*")),r("button",{key:"e0860a424c00c771a7f384f210c570707596dd42",id:"trigger",part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",disabled:this.disabled,"aria-haspopup":"dialog","aria-expanded":this.open?"true":"false","aria-controls":"panel","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":e,onClick:()=>{if(!this.disabled)this.open=!this.open}},r("span",{key:"03c67a53cf957fc1f3d18ae291cf6216b6fce11f",class:{value:true,"value--placeholder":!o}},o||this.placeholder),r("pf-icon",{key:"72f2cf8f61d3b547436edc0f9080ce141f989f46",name:"clock"})),this.description&&r("p",{key:"b891c75c8942c32d920aaab2a82476f3ff5879ab",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"64b4eae8a178da68308e5c641ad3144b29373339",class:"error",part:"error",id:"error"},this.error)),r("div",{key:"c29b038ea9d75b0ecac1f4f79b2e915e827b5859",id:"panel",part:"panel",class:"panel",popover:"auto",role:"dialog","aria-label":"Choose a time",onToggle:this.onToggle},this.renderColumn("Hour",v(this.cycle).map((e=>({key:`h-${e}`,label:p(e),selected:a===e,onSelect:()=>this.selectHour(e)})))),this.renderColumn("Minute",g(60,this.minuteStep).map((e=>({key:`m-${e}`,label:p(e),selected:i===e,onSelect:()=>this.selectMinute(e)})))),this.cycle===12&&this.renderColumn("AM or PM",["AM","PM"].map((e=>({key:e,label:e,selected:l===e,onSelect:()=>this.selectMeridiem(e)}))))))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};k.style=y();export{k as pf_time_picker};
+//# sourceMappingURL=p-5064d2dd.entry.js.map

package/dist/pitchfork/p-5064d2dd.entry.js.map

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

package/dist/pitchfork/p-50ad12be.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as e,H as r}from"./p-Bm6UxEit.js";const n=()=>`@keyframes pf-spin{to{transform:rotate(360deg)}}:host{animation:pf-spin 0.8s linear infinite;border:3px solid color-mix(in srgb, var(--pf-loading-border) 75%, transparent);border-radius:50%;border-top-color:var(--pf-loading-accent);display:inline-block;flex:0 0 auto;height:var(--pf-spinner-size, 24px);min-height:12px;min-width:12px;width:var(--pf-spinner-size, 24px)}:host([hidden]){display:none}.sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion: reduce){:host{animation-duration:0.01ms;animation-iteration-count:1}}`;const a=class{constructor(e){i(this,e)}size=24;label="Loading";render(){return e(r,{key:"34cbe91125995cfa2cca9f4d988214ec9984f860",role:"status","aria-label":this.label,style:{"--pf-spinner-size":`${this.size}px`}},e("span",{key:"d5d50df4e6ec207337f1a418d39724d5c62314af",class:"sr-only",part:"label"},this.label))}};a.style=n();export{a as pf_loading_spinner};
+//# sourceMappingURL=p-50ad12be.entry.js.map

package/dist/pitchfork/p-50ad12be.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfLoadingSpinnerCss","PfLoadingSpinner","size","label","render","h","Host","key","role","this","style","class","part"],"sources":["src/components/pf-loading-spinner/pf-loading-spinner.css?tag=pf-loading-spinner&encapsulation=shadow","src/components/pf-loading-spinner/pf-loading-spinner.tsx"],"sourcesContent":["/*\n * `@keyframes` do not cross a shadow boundary. In the React library pf-spin is\n * declared once in LoadingIndicators.css and every component picks it up from\n * the global sheet; here each shadow root needs its own copy.\n */\n@keyframes pf-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host {\n  animation: pf-spin 0.8s linear infinite;\n  border: 3px solid color-mix(in srgb, var(--pf-loading-border) 75%, transparent);\n  border-radius: 50%;\n  border-top-color: var(--pf-loading-accent);\n  display: inline-block;\n  flex: 0 0 auto;\n  height: var(--pf-spinner-size, 24px);\n  min-height: 12px;\n  min-width: 12px;\n  width: var(--pf-spinner-size, 24px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The React library reaches a global `.pf-sr-only` for this. A shadow root\n * cannot, so each of these elements declares its own copy.\n */\n.sr-only {\n  border: 0;\n  clip: rect(0 0 0 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@media (prefers-reduced-motion: reduce) {\n  :host {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * An indeterminate spinner.\n *\n * @part label - the visually hidden text the live region announces.\n */\n@Component({\n  tag: 'pf-loading-spinner',\n  styleUrl: 'pf-loading-spinner.css',\n  shadow: true,\n})\nexport class PfLoadingSpinner {\n  /** Diameter in pixels. */\n  @Prop() size = 24;\n\n  /** Accessible name, announced by the live region. */\n  @Prop() label = 'Loading';\n\n  render() {\n    /*\n     * `role` and `aria-label` go on the host so the element is the live region,\n     * and the hidden text gives that region something to announce — an empty\n     * live region named only by `aria-label` is not reliably read out. The\n     * React component carries both for the same reason.\n     */\n    return (\n      <Host role=\"status\" aria-label={this.label} style={{ '--pf-spinner-size': `${this.size}px` }}>\n        <span class=\"sr-only\" part=\"label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAsB,IAAM,gpB,MCYrBC,EAAgB,M,yBAEnBC,KAAO,GAGPC,MAAQ,UAEhB,MAAAC,GAOE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAaC,KAAKN,MAAOO,MAAO,CAAE,oBAAqB,GAAGD,KAAKP,WAChFG,EAAA,QAAAE,IAAA,2CAAMI,MAAM,UAAUC,KAAK,SACxBH,KAAKN,O","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as r,H as a}from"./p-Bm6UxEit.js";const t=()=>`:host{align-items:center;display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.link{color:var(--pf-breadcrumbs-link-color);font-size:var(--font-size-sm);line-height:1.4;text-decoration:none}a.link:hover{color:var(--pf-breadcrumbs-link-hover-color);text-decoration:underline}:host([current-page]) .link,.link[aria-current='page']{color:var(--pf-breadcrumbs-link-current-color);font-weight:var(--font-weight-medium);text-decoration:none}.separator{color:var(--pf-breadcrumbs-separator-color);display:inline-flex;font-size:var(--font-size-xs);line-height:1}`;const n=class{constructor(r){e(this,r)}href;current=false;currentPage=false;last=false;separator="/";render(){const e=r("slot",{key:"9867775efe95a88c9d79894089761a835aec4a2c"});return r(a,{key:"ed743e2c769ac704621241b6c63857e0919d7386",role:"listitem"},this.href?r("a",{class:"link",part:"link",href:this.href,"aria-current":this.currentPage?"page":null},e):r("span",{class:"link",part:"link","aria-current":this.currentPage?"page":null},e),!this.last&&r("span",{key:"0bf16efee1d46f196bbf61555d05042b0bb8040d",class:"separator",part:"separator","aria-hidden":"true"},this.separator))}};n.style=t();export{n as pf_breadcrumb};
+//# sourceMappingURL=p-51528462.entry.js.map

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

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

package/dist/pitchfork/p-52eef7eb.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as r,H as s}from"./p-Bm6UxEit.js";import{o as n,p as i}from"./p-CC7AyfOt.js";import{c as o}from"./p-DfpCerXM.js";import{t as d,d as l,s as c,f,c as h,i as p,p as u,m as b,a as g,e as y,b as v,W as m,C as w}from"./p-C9jNMqLs.js";import{K as k}from"./p-g4FlTDZx.js";import{a as x}from"./p-Cr6IXrUk.js";function C(e,t){const a=d(t);if(!e.awaitingEnd||!e.range.start)return{range:{start:a,end:null},awaitingEnd:true};const r=e.range.start;if(l(r,a))return{range:{start:a,end:null},awaitingEnd:true};return{range:a.getTime()<r.getTime()?{start:a,end:r}:{start:r,end:a},awaitingEnd:false}}function D(e,t,a=null){const{start:r}=t;const s=t.end??(r&&a?a:null);const n=Boolean(r&&l(e,r));const i=Boolean(s&&l(e,s));if(!r||!s)return{isStart:n,isEnd:i,isInside:false};const[o,d]=r.getTime()<=s.getTime()?[r,s]:[s,r];const c=e.getTime();return{isStart:n,isEnd:i,isInside:c>o.getTime()&&c<d.getTime()}}function z(e,t){if(!e.start||!e.end)return"";return`${t(e.start)}/${t(e.end)}`}function j(e,t){const[a,r]=(e??"").split("/");const s=t(a??"");const n=t(r??"");if(!s||!n)return{start:null,end:null};return s.getTime()<=n.getTime()?{start:s,end:n}:{start:n,end:s}}const S=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-daterange-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-daterange-invalid-border);margin-inline-start:var(--space-1)}.row-controls{align-items:center;display:flex;gap:var(--space-2)}.trigger{align-items:center;background:var(--pf-daterange-bg);border:1px solid var(--pf-daterange-border);border-radius:var(--radius-md);color:var(--pf-daterange-text);cursor:pointer;display:flex;flex:1;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;min-width:0;padding:var(--space-2) var(--space-3);text-align:start}.trigger:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-daterange-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-daterange-text-muted)}.clear{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-daterange-text-muted);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:var(--space-1)}.clear:hover:not(:disabled){color:var(--pf-daterange-text)}.clear:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.description{color:var(--pf-daterange-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-daterange-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:var(--pf-daterange-menu-bg);border:1px solid var(--pf-daterange-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);color:var(--pf-daterange-text);padding:var(--space-3)}.panel:popover-open{animation:pf-date-range-in var(--pf-transition-enter)}@keyframes pf-date-range-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}.nav{display:flex;justify-content:space-between;margin-bottom:var(--space-2)}.step{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-daterange-text-muted);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1)}.step:hover{background:var(--pf-daterange-bg-subtle);color:var(--pf-daterange-text)}.step:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.months{display:grid;gap:var(--space-4)}@media (min-width: 768px){.months{grid-template-columns:1fr 1fr}}.month-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-2);text-align:center}.grid{display:grid;gap:2px;grid-template-columns:repeat(7, 1fr)}.row{display:contents}.weekday{color:var(--pf-daterange-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--space-1) 0;text-align:center}.day,.empty{aspect-ratio:1;display:flex;min-width:var(--space-7)}.day{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-daterange-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);justify-content:center}.day:hover:not([aria-disabled='true']){background:var(--pf-daterange-bg-subtle)}.day:focus-visible{box-shadow:var(--pf-daterange-focus-ring);outline:none}.day--today{border-color:var(--pf-calendar-today-border)}.day--inside{background:var(--pf-daterange-range-bg);border-radius:0;color:var(--pf-daterange-range-text)}.day--endpoint{background:var(--pf-calendar-selected-bg);border-color:var(--pf-calendar-selected-bg);color:var(--pf-calendar-selected-text)}.day--start:not(.day--end){border-end-end-radius:0;border-start-end-radius:0}.day--end:not(.day--start){border-end-start-radius:0;border-start-start-radius:0}.day[aria-disabled='true']{cursor:not-allowed;opacity:0.4}`;const F={[k.ArrowRight]:"day-next",[k.ArrowLeft]:"day-previous",[k.ArrowDown]:"week-next",[k.ArrowUp]:"week-previous",[k.Home]:"week-start",[k.End]:"week-end",PageDown:"month-next",PageUp:"month-previous"};const M=class{constructor(a){e(this,a);this.pfChange=t(this,"pfChange");this.pfOpenChange=t(this,"pfOpenChange");if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}}get el(){return a(this)}internals;name;value="";open=false;label;description;error;placeholder="Select dates";required=false;disabled=false;allowClear=false;min;max;startYear;endYear;isDateDisabled;pfChange;pfOpenChange;leftMonth=c(new Date);focusedDate=d(new Date);hovered=null;awaitingEnd=false;initialValue="";pendingStart=null;stopObserving;shouldRestoreFocus=false;componentWillLoad(){this.initialValue=this.value??"";const{start:e}=this.range();const t=e??d(new Date);this.focusedDate=t;this.leftMonth=this.clamp(c(t));this.syncFormState()}componentDidRender(){if(!this.shouldRestoreFocus)return;this.shouldRestoreFocus=false;this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus()}disconnectedCallback(){this.stopObserving?.()}syncDisplayedMonths(){const{start:e,end:t}=this.range();if(!e||!t)return;this.pendingStart=null;this.awaitingEnd=false;this.focusedDate=e;this.leftMonth=this.clamp(c(e))}syncFormState(){const{start:e,end:t}=this.range();if(!e||!t||!this.name){this.internals.setFormValue(null)}else{const a=new FormData;a.append(`${this.name}-start`,f(e));a.append(`${this.name}-end`,f(t));this.internals.setFormValue(a)}x(this.internals,Boolean(e&&t),this.required,this.error)}syncOpen(e,t){if(e)this.showPanel();else this.hidePanel();if(e!==t)this.pfOpenChange.emit({open:e})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.awaitingEnd=false;this.hovered=null}range(){return j(this.value,u)}get years(){const e=(new Date).getFullYear();const t=this.startYear??e-50;const a=this.endYear??e+50;return{start:Math.min(t,a),end:Math.max(t,a)}}clamp(e){const{start:t,end:a}=this.years;return h(e,t,a)}get panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}isDisabled(e){if(p(e,u(this.min),u(this.max)))return true;return this.isDateDisabled?.(e)??false}showPanel(){const e=this.panel;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=n({getAnchor:()=>this.trigger,getFloating:()=>e,align:"start",matchAnchorWidth:false,flip:true,onChange:({left:t,top:a})=>i(e,t,a)});this.shouldRestoreFocus=true}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;this.hovered=null;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t)this.trigger?.focus()};pick(e){if(this.isDisabled(e))return;const t=C({range:this.displayRange(),awaitingEnd:this.awaitingEnd},e);this.awaitingEnd=t.awaitingEnd;this.focusedDate=d(e);if(t.awaitingEnd){this.value="";this.pendingStart=t.range.start;return}this.pendingStart=null;this.hovered=null;this.value=z(t.range,f);this.pfChange.emit({value:this.value,start:t.range.start?f(t.range.start):"",end:t.range.end?f(t.range.end):""});this.open=false}displayRange(){const e=this.range();if(e.start&&e.end)return e;return{start:this.pendingStart,end:null}}moveFocus(e){const t=b(this.focusedDate,e);const{start:a,end:r}=this.years;if(t.getFullYear()<a||t.getFullYear()>r)return;this.focusedDate=t;this.shouldRestoreFocus=true;const s=g(this.leftMonth,1);if(!y(t,this.leftMonth)&&!y(t,s)){this.leftMonth=this.clamp(c(t))}}onKeyDown=e=>{const t=F[e.key];if(t){e.preventDefault();this.moveFocus(t);return}if(e.key===k.Enter||e.key===k.Space){e.preventDefault();this.pick(this.focusedDate);this.shouldRestoreFocus=true}};clear=e=>{e.stopPropagation();if(!this.value&&!this.pendingStart)return;this.value="";this.pendingStart=null;this.awaitingEnd=false;this.hovered=null;this.pfChange.emit({value:"",start:"",end:""})};formatted(){const{start:e,end:t}=this.range();if(!e||!t)return"";const a=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"});return`${a.format(e)} – ${a.format(t)}`}renderGrid(e){const t=v(e);const a=this.displayRange();const s=d(new Date);const n=new Intl.DateTimeFormat("en-US",{month:"long",year:"numeric"}).format(e);return r("div",{class:"month"},r("p",{class:"month-label"},n),r("div",{class:"grid",part:"grid",role:"grid","aria-label":n},r("div",{class:"row",role:"row"},m.map((e=>r("span",{key:e,class:"weekday",role:"columnheader","aria-label":e},e)))),Array.from({length:w/7},((e,n)=>r("div",{key:n,class:"row",role:"row"},t.slice(n*7,n*7+7).map((({date:e,inCurrentMonth:t})=>{if(!t){return r("span",{key:f(e),class:"empty",role:"gridcell"})}const n=D(e,a,this.hovered);const i=n.isStart||n.isEnd;const o=this.isDisabled(e);return r("button",{key:f(e),type:"button",role:"gridcell","data-day":f(e),part:"day",class:{day:true,"day--today":l(s,e),"day--endpoint":i,"day--start":n.isStart,"day--end":n.isEnd,"day--inside":n.isInside},tabindex:l(this.focusedDate,e)?0:-1,"aria-selected":i||n.isInside?"true":"false","aria-current":l(s,e)?"date":null,"aria-disabled":o?"true":null,"aria-label":new Intl.DateTimeFormat("en-US",{weekday:"long",month:"long",day:"numeric",year:"numeric"}).format(e),onClick:()=>{this.pick(e);this.shouldRestoreFocus=true},onMouseEnter:()=>{if(this.awaitingEnd&&!o)this.hovered=e}},e.getDate())})))))))}render(){const e=o(this.description&&"description",this.error&&"error");const t=this.formatted();const a=g(this.leftMonth,1);return r(s,{key:"c769f8e46ecb2b1cc36fb6569f5c52c602d5bace"},r("div",{key:"9800b4ea3fbd90e9ce1aa0e14b1c18c960da6c80",class:"field",part:"field"},this.label&&r("label",{key:"da11753ffc0352c61aa63c57fa03f84dbff7b8be",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&r("span",{key:"156cce16b0dcd46f94cf13f87bf2bdeebb1f8bd3",class:"required","aria-hidden":"true"},"*")),r("div",{key:"9ff549ec5c220e04049055b813eb979fdf87a835",class:"row-controls"},r("button",{key:"b4245ab2a3fe86abfc33b451eb4cc4994ef78480",id:"trigger",part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",disabled:this.disabled,"aria-haspopup":"dialog","aria-expanded":this.open?"true":"false","aria-controls":"panel","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":e,onClick:()=>{if(!this.disabled)this.open=!this.open}},r("span",{key:"02e3efca7af827add1fa80519cdf995c7cb54dc3",class:{value:true,"value--placeholder":!t}},t||this.placeholder),r("pf-icon",{key:"e2139c1b236edfd82e109caeb778de8c1c43468d",name:"calendar"})),this.allowClear&&(this.value||this.pendingStart)&&r("button",{key:"f2572d3f798e9ba895b1165d024522014cfbb5ab",class:"clear",part:"clear",type:"button","aria-label":"Clear selected dates",disabled:this.disabled,onClick:this.clear},r("pf-icon",{key:"d22ecfecc4114815c557b60d4908a9bbea6e8b1d",name:"circle-xmark"}))),this.description&&r("p",{key:"f5399489f7666e2b7b7d4bbc1885e74a52e32cd4",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"1a46f2d10e6edcc47979ecbb0724958a9790b2db",class:"error",part:"error",id:"error"},this.error)),r("div",{key:"2aaa30dcd06ab95ebe7973d2783224cf236b57ef",id:"panel",part:"panel",class:"panel",popover:"auto",role:"dialog","aria-label":"Choose a date range",onToggle:this.onToggle,onKeyDown:this.onKeyDown,onMouseLeave:()=>{this.hovered=null}},r("div",{key:"d5c052b2ce87bb5a19492a3d2afe65a8be50aac6",class:"nav"},r("button",{key:"3f04ddb2cfea5ef4c05380a81c1f4cd2b43be396",type:"button",class:"step","aria-label":"Previous month",onClick:()=>{this.leftMonth=this.clamp(g(this.leftMonth,-1))}},r("pf-icon",{key:"cb18b7c7e71a687d6220126f503a36170f1afc2f",name:"square-caret-left"})),r("button",{key:"837bf1095910392e6a0249f785e558ecf729e870",type:"button",class:"step","aria-label":"Next month",onClick:()=>{this.leftMonth=this.clamp(g(this.leftMonth,1))}},r("pf-icon",{key:"bd56b0173777c7dc13bc9c052e2ccb7fc81cefb1",name:"square-caret-right"}))),r("div",{key:"102f50860c882a493ec9b8f9098d0703f4ecaf40",class:"months"},this.renderGrid(this.leftMonth),this.renderGrid(a))))}static get formAssociated(){return true}static get watchers(){return{value:[{syncDisplayedMonths:0},{syncFormState:0}],name:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};M.style=S();export{M as pf_date_range_picker};
+//# sourceMappingURL=p-52eef7eb.entry.js.map

package/dist/pitchfork/p-52eef7eb.entry.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","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","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 { 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              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/pitchfork/p-578db1a6.entry.js

@@ -0,0 +1,2 @@
+import{r as t,a as e,h as s,H as a}from"./p-Bm6UxEit.js";const i=()=>`:host{display:grid;gap:0}:host([hidden]){display:none}slot{display:contents}`;const n=class{constructor(e){t(this,e)}get el(){return e(this)}label;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleLabelChange(){this.sync()}async refresh(){this.sync()}get items(){return Array.from(this.el.querySelectorAll("pf-timeline-item")).filter((t=>t.parentElement===this.el))}sync(){const t=this.items;for(const[e,s]of t.entries()){s.last=e===t.length-1}}render(){return s(a,{key:"53a5400e234a874e685694c80275a9f09089dd14",role:"list","aria-label":this.label},s("slot",{key:"020e56e751cf207b5b3a083952dbfe36549ad9a0",onSlotchange:()=>this.refresh()}))}static get watchers(){return{label:[{handleLabelChange:0}]}}};n.style=i();export{n as pf_timeline};
+//# sourceMappingURL=p-578db1a6.entry.js.map

package/dist/pitchfork/p-578db1a6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTimelineCss","PfTimeline","label","componentWillLoad","this","sync","componentDidLoad","handleLabelChange","refresh","items","Array","from","el","querySelectorAll","filter","item","parentElement","index","entries","last","length","render","h","Host","key","role","onSlotchange"],"sources":["src/components/pf-timeline/pf-timeline.css?tag=pf-timeline&encapsulation=shadow","src/components/pf-timeline/pf-timeline.tsx"],"sourcesContent":[":host {\n  display: grid;\n  gap: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* The entries have to be grid items of the host, not of a box inside it. */\nslot {\n  display: contents;\n}\n","import { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';\n\n/**\n * A vertical timeline over `pf-timeline-item` children.\n *\n * The group owns the one thing an entry cannot see: whether it is the last,\n * which decides both the connector running down to the next entry and the\n * space below the content.\n *\n * @slot - the `pf-timeline-item` children.\n */\n@Component({\n  tag: 'pf-timeline',\n  styleUrl: 'pf-timeline.css',\n  shadow: true,\n})\nexport class PfTimeline {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The timeline's accessible name. A list of entries is worth naming, and a\n   * consumer can only do it from out here.\n   */\n  @Prop() label?: string;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('label')\n  handleLabelChange() {\n    this.sync();\n  }\n\n  /** Re-reads the children, for a consumer who moved them imperatively. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested timeline owns its own entries. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-timeline-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  private sync() {\n    const items = this.items;\n    for (const [index, item] of items.entries()) {\n      (item as HTMLElement & { last: boolean }).last = index === items.length - 1;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,IAAM,+E,MCgBfC,EAAU,M,iDAObC,MAGR,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAIP,iBAAAE,GACEH,KAAKC,M,CAKP,aAAMG,GACJJ,KAAKC,M,CAIP,SAAYI,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,qBAAqBC,QAC1EC,GAASA,EAAKC,gBAAkBZ,KAAKQ,I,CAIlC,IAAAP,GACN,MAAMI,EAAQL,KAAKK,MACnB,IAAK,MAAOQ,EAAOF,KAASN,EAAMS,UAAW,CAC1CH,EAAyCI,KAAOF,IAAUR,EAAMW,OAAS,C,EAI9E,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OAAM,aAAarB,KAAKF,OACjCoB,EAAA,QAAAE,IAAA,2CAAME,aAAc,IAAMtB,KAAKI,Y","ignoreList":[]}

package/dist/pitchfork/p-6066ce98.entry.js

@@ -0,0 +1,2 @@
+import{r as t,a as e,h as s,H as a}from"./p-Bm6UxEit.js";import{c as n,n as i,C as r,p as l,a as o,d as c,f as d,g as h,s as p,h as f,i as g,e as y}from"./p-CmX-kVk-.js";import"./p-COAc4ZDB.js";const u=()=>`:host{display:flex;flex-direction:column;gap:var(--space-3);width:100%}:host([hidden]){display:none}.svg{display:block;height:auto;overflow:visible;width:100%}.empty{align-items:center;color:var(--pf-chart-text-muted);display:flex;font-size:var(--font-size-sm);height:120px;justify-content:center}.grid{stroke:var(--pf-chart-grid);stroke-width:1}.tick{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs)}.tick--y{dominant-baseline:middle;text-anchor:end}.tick--x{dominant-baseline:hanging;text-anchor:middle}.axis-label{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs);text-anchor:middle}.dot{opacity:0;transition:opacity 80ms ease}.svg:hover .dot{opacity:1}.legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;margin:0;padding:0;padding-inline-start:var(--pf-chart-plot-inset-left, 0)}.legend.legend--hidden{display:none}.legend slot{display:contents}@media (prefers-reduced-motion: reduce){.dot{transition:none}}`;const m=class{constructor(e){t(this,e)}get el(){return e(this)}data=[];area=false;curved=true;showLegend=true;yAxisLabel;label;series=[];componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}async refresh(){this.sync()}get seriesElements(){return Array.from(this.el.children).filter((t=>t.tagName.toLowerCase()==="pf-chart-series"))}get rows(){const t=this.data;if(Array.isArray(t))return t;try{const e=JSON.parse(String(t||"[]"));return Array.isArray(e)?e:[]}catch{return[]}}sync(){const t=this.seriesElements;this.series=t.map(((t,e)=>{const s=t;const a=n(e,s.color??t.getAttribute("color")??undefined);t.swatch=a;return{key:s.seriesKey??t.getAttribute("series-key")??"",color:a,dashed:s.dashed??t.hasAttribute("dashed")}}))}render(){const t=this.rows;const e=this.series;if(t.length===0||e.length===0){return s(a,null,s("div",{class:"empty",part:"empty"},s("slot",{name:"empty"},"No data")),s("ul",{class:"legend legend--hidden",part:"legend"},s("slot",{onSlotchange:()=>this.refresh()})))}const n=(t,e)=>Number(t[e]??0);const u=Math.max(0,...e.flatMap((e=>t.map((t=>n(t,e.key))))));const m=i(u);const x=m[m.length-1];const k=y(t.length);const v=o.top+c.height;return s(a,{style:{"--pf-chart-plot-inset-left":`${o.left/r.width*100}%`}},s("svg",{class:"svg",part:"svg",viewBox:`0 0 ${r.width} ${r.height}`,role:"img","aria-label":this.label??this.yAxisLabel??"Line chart"},m.map((t=>{const e=l(t,x);return s("g",null,s("line",{class:"grid",part:"grid",x1:o.left,y1:e,x2:o.left+c.width,y2:e}),s("text",{class:"tick tick--y",part:"tick",x:o.left-8,y:e},d(t)))})),t.map(((e,a)=>a%k===0?s("text",{class:"tick tick--x",part:"tick",x:h(a,t.length),y:v+20},e.label):null)),this.yAxisLabel&&s("text",{class:"axis-label",x:-112,y:14,transform:"rotate(-90)"},this.yAxisLabel),e.map((e=>{const a=t.map(((s,a)=>({x:h(a,t.length),y:l(n(s,e.key),x)})));const i=this.curved?p(a):f(a);return s("g",null,this.area&&s("path",{class:"area",part:"area",d:g(i,a),fill:e.color,"fill-opacity":"0.12",stroke:"none"}),s("path",{class:"line",part:"line",d:i,fill:"none",stroke:e.color,"stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","stroke-dasharray":e.dashed?"6 4":undefined}),a.map(((a,i)=>s("circle",{class:"dot",part:"dot",cx:a.x,cy:a.y,r:"3.5",fill:e.color},s("title",null,`${t[i].label}: ${d(n(t[i],e.key))}`)))))}))),s("ul",{class:{legend:true,"legend--hidden":!this.showLegend||e.length<2},part:"legend"},s("slot",{onSlotchange:()=>this.refresh()})))}static get watchers(){return{data:[{sync:0}]}}};m.style=u();export{m as pf_line_chart};
+//# sourceMappingURL=p-6066ce98.entry.js.map