@pitchfork-ui/elements 0.1.0 → 0.2.1

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

@@ -1 +0,0 @@
-{"version":3,"names":["pfModalCss","PfModal","open","size","label","dismissable","showCloseButton","pfOpenChange","releaseScroll","componentDidLoad","this","showDialog","disconnectedCallback","unlockScroll","show","hide","syncOpen","next","previous","closeDialog","emit","dialog","el","shadowRoot","querySelector","lockScroll","lockPageScroll","showModal","close","onCancel","event","preventDefault","onClose","onDialogClick","target","accessibleName","text","textContent","trim","slice","undefined","render","h","Host","key","part","class","onClick","type","viewBox","width","height","focusable","d","stroke","fill"],"sources":["src/components/pf-modal/pf-modal.css?tag=pf-modal&encapsulation=shadow","src/components/pf-modal/pf-modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/*\n * The dialog is the overlay: it fills the viewport and centres the panel, so a\n * click that lands on it rather than on the panel is an overlay click.\n */\n.dialog {\n  align-items: center;\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.dialog::backdrop {\n  background: var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop));\n}\n\n.panel {\n  background: var(--pf-modal-bg);\n  border: 1px solid var(--pf-modal-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-lg);\n  color: var(--pf-modal-text);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow: auto;\n  position: relative;\n  width: 100%;\n}\n\n:host([size='sm']) .panel {\n  max-width: 400px;\n}\n\n:host([size='md']) .panel {\n  max-width: 560px;\n}\n\n:host([size='lg']) .panel {\n  max-width: 800px;\n}\n\n.close {\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-modal-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  inset-block-start: var(--space-3);\n  inset-inline-end: var(--space-3);\n  padding: var(--space-1);\n  position: absolute;\n}\n\n.close:hover {\n  color: var(--pf-modal-text);\n}\n\n.close:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.dialog[open] .panel {\n  animation: pf-modal-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-modal-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialog[open] .panel {\n    animation: none;\n  }\n}\n","import { lockPageScroll } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfModalSize = 'sm' | 'md' | 'lg';\n\n/**\n * A modal dialog.\n *\n * A native `<dialog>` opened with `showModal()`, which from inside a shadow\n * root gives the focus trap, Escape and the backdrop for nothing — all\n * measured: focus moves inside on open and cannot be taken by a light-DOM\n * button, and a real Escape fires `cancel` then `close`. So `trapFocus` from\n * core is not needed here, unlike in the React component.\n *\n * What `showModal()` does *not* do is lock page scroll — measured: a real\n * wheel still scrolled the page behind an open modal — so this element locks\n * it, exactly as the React component does.\n *\n * @slot - the modal's sections, usually `pf-modal-header`, `pf-modal-body` and\n * `pf-modal-footer`.\n * @part dialog - the native dialog, which is also the overlay.\n * @part panel - the bordered box the content sits in.\n * @part close - the close button.\n */\n@Component({\n  tag: 'pf-modal',\n  styleUrl: 'pf-modal.css',\n  shadow: true,\n})\nexport class PfModal {\n  @Element() el!: HTMLElement;\n\n  /** Whether the modal is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Panel width. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfModalSize = 'md';\n\n  /**\n   * Accessible name. Falls back to the text of whatever is slotted, which is\n   * usually the header — `aria-labelledby` cannot be used, because an IDREF\n   * does not cross a shadow boundary and the header is in the light DOM.\n   */\n  @Prop() label?: string;\n\n  /** Close on Escape or a click on the overlay. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Render the corner close button. Defaults to true. */\n  @Prop() showCloseButton = true;\n\n  /** Fires whenever the modal opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /**\n   * Releases the page-scroll lock, or null when this modal does not hold it.\n   * The lock is core's and reference-counted, so a slideout opening over a\n   * modal cannot leave the page unscrollable.\n   */\n  private releaseScroll: (() => void) | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  disconnectedCallback() {\n    // A modal removed while open would otherwise leave the page unscrollable.\n    this.unlockScroll();\n  }\n\n  /** Opens the modal. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the modal. */\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: `show()`,\n   * the close button, Escape, an overlay click, or a consumer writing the prop.\n   *\n   * The first version emitted from the `close` handler alone, which fired for\n   * every close and for no open — caught by its own test. A consumer mirroring\n   * this value back sets `open` to what it already is, which Stencil does not\n   * treat as a change, so there is no loop.\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  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private lockScroll() {\n    if (this.releaseScroll) return;\n    this.releaseScroll = lockPageScroll();\n  }\n\n  private unlockScroll() {\n    this.releaseScroll?.();\n    this.releaseScroll = null;\n  }\n\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  /** Fires on Escape. Blocking it is how a non-dismissable modal stays put. */\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) {\n      event.preventDefault();\n      return;\n    }\n    // Let it close; `close` does the state mirroring.\n  };\n\n  /**\n   * Mirrors a close the browser made — Escape, or the dialog being closed by\n   * anything other than this element — back into `open`, which then announces\n   * it through the watch above.\n   */\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /**\n   * A click on the dialog element itself is a click on the overlay: the panel\n   * is an inner box, so anything landing on the dialog missed the content.\n   */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  private accessibleName() {\n    if (this.label) return this.label;\n    const text = this.el.textContent?.trim();\n    return text ? text.slice(0, 120) : undefined;\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.accessibleName()}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\">\n            {this.showCloseButton && (\n              <button\n                class=\"close\"\n                part=\"close\"\n                type=\"button\"\n                aria-label=\"Close\"\n                onClick={() => this.hide()}\n              >\n                <svg\n                  viewBox=\"0 0 16 16\"\n                  width=\"16\"\n                  height=\"16\"\n                  aria-hidden=\"true\"\n                  focusable=\"false\"\n                >\n                  <path\n                    d=\"M4 4l8 8M12 4l-8 8\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.6\"\n                    stroke-linecap=\"round\"\n                    fill=\"none\"\n                  />\n                </svg>\n              </button>\n            )}\n            <slot />\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAa,IAAM,8tC,MCwCZC,EAAO,M,0FAIsBC,KAAO,MAGtBC,KAAoB,KAOrCC,MAGAC,YAAc,KAGdC,gBAAkB,KAGjBC,aAODC,cAAqC,KAE7C,gBAAAC,GACE,GAAIC,KAAKR,KAAMQ,KAAKC,Y,CAGtB,oBAAAC,GAEEF,KAAKG,c,CAKP,UAAMC,GACJJ,KAAKR,KAAO,I,CAKd,UAAMa,GACJL,KAAKR,KAAO,K,CAad,QAAAc,CAASC,EAAeC,GACtB,GAAID,EAAMP,KAAKC,kBACVD,KAAKS,cACV,GAAIF,IAASC,EAAUR,KAAKH,aAAaa,KAAK,CAAElB,KAAMe,G,CAGxD,UAAYI,GACV,OAAOX,KAAKY,GAAGC,YAAYC,cAAc,WAAa,I,CAGhD,UAAAC,GACN,GAAIf,KAAKF,cAAe,OACxBE,KAAKF,cAAgBkB,G,CAGf,YAAAb,GACNH,KAAKF,kBACLE,KAAKF,cAAgB,I,CAGf,UAAAG,GACN,MAAMU,EAASX,KAAKW,OACpB,IAAKA,GAAUA,EAAOnB,KAAM,OAC5BmB,EAAOM,YACPjB,KAAKe,Y,CAGC,WAAAN,GACN,MAAME,EAASX,KAAKW,OACpBX,KAAKG,eACL,GAAIQ,GAAQnB,KAAMmB,EAAOO,O,CAInBC,SAAYC,IAClB,IAAKpB,KAAKL,YAAa,CACrByB,EAAMC,iBACN,M,GAUIC,QAAU,KAChBtB,KAAKG,eACL,GAAIH,KAAKR,KAAMQ,KAAKR,KAAO,KAAK,EAO1B+B,cAAiBH,IACvB,IAAKpB,KAAKL,aAAeyB,EAAMI,SAAWxB,KAAKW,OAAQ,OACvDX,KAAKR,KAAO,KAAK,EAGX,cAAAiC,GACN,GAAIzB,KAAKN,MAAO,OAAOM,KAAKN,MAC5B,MAAMgC,EAAO1B,KAAKY,GAAGe,aAAaC,OAClC,OAAOF,EAAOA,EAAKG,MAAM,EAAG,KAAOC,S,CAGrC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAM,SAAQ,aACFpC,KAAKyB,iBACjBN,SAAUnB,KAAKmB,SACfG,QAAStB,KAAKsB,QACde,QAASrC,KAAKuB,eAEdS,EAAA,OAAAE,IAAA,2CAAKE,MAAM,QAAQD,KAAK,SACrBnC,KAAKJ,iBACJoC,EAAA,UAAAE,IAAA,2CACEE,MAAM,QACND,KAAK,QACLG,KAAK,SAAQ,aACF,QACXD,QAAS,IAAMrC,KAAKK,QAEpB2B,EAAA,OAAAE,IAAA,2CACEK,QAAQ,YACRC,MAAM,KACNC,OAAO,KAAI,cACC,OACZC,UAAU,SAEVV,EAAA,QAAAE,IAAA,2CACES,EAAE,qBACFC,OAAO,eAAc,eACR,MAAK,iBACH,QACfC,KAAK,WAKbb,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as a,a as e,h as t,H as n}from"./p-Bm6UxEit.js";import{r}from"./p-DToIJg5W.js";const s=()=>`:host{background:var(--pf-header-nav-bg);border:1px solid var(--pf-header-nav-border);border-radius:var(--pf-header-nav-radius, var(--radius-md));display:block;width:100%;--pf-nav-item-text:var(--pf-header-nav-text-muted);--pf-nav-item-hover-text:var(--pf-header-nav-text);--pf-nav-item-hover-bg:var(--pf-header-nav-bg-subtle);--pf-nav-item-current-text:var(--pf-header-nav-text);--pf-nav-item-current-bg:var(--pf-header-nav-bg-subtle)}:host([hidden]){display:none}.nav{align-items:center;display:grid;gap:var(--space-3);grid-template-columns:1fr;min-height:var(--pf-header-nav-min-height, 56px);padding:var(--space-3)}@media (min-width: 768px){.nav{grid-template-columns:auto 1fr auto;padding:0 var(--space-4)}}.brand{color:var(--pf-header-nav-text);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);white-space:nowrap}.list{align-items:center;display:flex;gap:var(--space-1);list-style:none;margin:0;overflow-x:auto;padding:0}.list slot{display:contents}.actions{align-items:center;display:inline-flex;gap:var(--space-2)}.brand.empty,.actions.empty{display:none}`;const i=class{constructor(e){a(this,e)}get el(){return e(this)}label="Header navigation";hasBrand=false;hasActions=false;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}async refresh(){this.sync()}get items(){return Array.from(this.el.querySelectorAll("pf-nav-item")).filter((a=>a.parentElement===this.el))}isCurrent(a){return a.current??a.hasAttribute("current")}sync(){const a=a=>Array.from(this.el.children).some((e=>e.getAttribute("slot")===a));this.hasBrand=a("brand");this.hasActions=a("actions");const e=this.items;const t=r(e.map((a=>({current:this.isCurrent(a)}))));for(const[a,n]of e.entries()){const e=n;e.currentPage=a===t;e.orientation="horizontal"}}render(){return t(n,{key:"2b0c0031fc8225b1b3d87cf91c06a84138840dca"},t("nav",{key:"196a2e3faf81b1b831683ae4e422beedeeef1af6",class:"nav",part:"nav","aria-label":this.label},t("span",{key:"a99fb70cb2763fd865f1d39290632952d1f27fbb",class:{brand:true,empty:!this.hasBrand},part:"brand"},t("slot",{key:"e9d3eb13fd19f1265b3caed47e082331414e47f9",name:"brand",onSlotchange:()=>this.refresh()})),t("ul",{key:"c03966d2083df04e560b2151d89694755276aea2",class:"list",part:"list"},t("slot",{key:"754a8d4910efc0aee658ea4c01e392f2a2f91178",onSlotchange:()=>this.refresh()})),t("span",{key:"bee95bd441bb2bac3ef88ce5ca40ea07989adba4",class:{actions:true,empty:!this.hasActions},part:"actions"},t("slot",{key:"a5a75d6aa8ff4736d32a6ddd9535c34c629ee524",name:"actions",onSlotchange:()=>this.refresh()}))))}};i.style=s();export{i as pf_header_navigation};
-//# sourceMappingURL=p-d7eb6335.entry.js.map

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

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

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

@@ -1,2 +0,0 @@
-import{r as e,c as a,a as t,h as i,H as r}from"./p-Bm6UxEit.js";import{o as s,p as n}from"./p-CC7AyfOt.js";import{c as o}from"./p-DfpCerXM.js";import{p as l}from"./p-C9jNMqLs.js";import{K as d}from"./p-g4FlTDZx.js";import{a as c}from"./p-Cr6IXrUk.js";const p=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-field-label-text, var(--pf-input-label-text));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-input-invalid-border);margin-inline-start:var(--space-1)}.row{align-items:center;display:flex;gap:var(--space-2)}.trigger{align-items:center;background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-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:hover:not(:disabled){border-color:var(--pf-input-border-hover)}.trigger:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-input-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-input-placeholder-text)}.clear{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-input-text-muted, var(--pf-input-placeholder-text));cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:var(--space-1)}.clear:hover:not(:disabled){color:var(--pf-input-text)}.clear:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.description{color:var(--pf-input-description-text);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-input-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:none;border:0;overflow:visible;padding:0}.panel:popover-open{animation:pf-date-picker-in var(--pf-transition-enter)}@keyframes pf-date-picker-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}`;const f=class{constructor(t){e(this,t);this.pfChange=a(this,"pfChange");this.pfOpenChange=a(this,"pfOpenChange");if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}}get el(){return t(this)}internals;name;value="";open=false;label;description;error;placeholder="Select a date";required=false;disabled=false;allowClear=false;min;max;startYear;endYear;showOutsideDays=true;isDateDisabled;pfChange;pfOpenChange;initialValue="";stopObserving;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){this.internals.setFormValue(this.value||null);c(this.internals,Boolean(this.value),this.required,this.error)}syncOpen(e,a){if(e)this.showPanel();else this.hidePanel();if(e!==a)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 panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}get calendar(){return this.el.shadowRoot?.querySelector("pf-calendar")??null}showPanel(){const e=this.panel;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=s({getAnchor:()=>this.trigger,getFloating:()=>e,align:"start",matchAnchorWidth:false,flip:true,onChange:({left:a,top:t})=>n(e,a,t)});void this.calendar?.focusSelectedDay()}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const a=e.newState==="open";if(this.open!==a)this.open=a;if(!a)this.trigger?.focus()};bindCalendar=e=>{if(!e||e===this.boundCalendar)return;this.boundCalendar=e;e.addEventListener("pfChange",this.onCalendarChange)};boundCalendar;onCalendarChange=e=>{e.stopPropagation();this.value=e.detail.value;this.pfChange.emit({value:this.value});this.open=false;this.trigger?.focus()};clear=e=>{e.stopPropagation();if(!this.value)return;this.value="";this.pfChange.emit({value:""})};onTriggerKeyDown=e=>{if(this.open||this.disabled)return;if(e.key===d.ArrowDown||e.key===d.Enter||e.key===d.Space){if(e.key===d.ArrowDown){e.preventDefault();this.open=true}}};formatted(){const e=l(this.value);if(!e)return"";return new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"}).format(e)}render(){const e=o(this.description&&"description",this.error&&"error");const a=this.formatted();return i(r,{key:"4c7b624f2b4f7b0a1bb1283ceeaf0884eb8617f7"},i("div",{key:"9b8b376726d7d5073d78da8d2f8388d4e721725f",class:"field",part:"field"},this.label&&i("label",{key:"5aa01393fb9172abb0e9718f8ca4872e93f540c2",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&i("span",{key:"c0a00abc02da50500ffa64471222355a0b5c610d",class:"required","aria-hidden":"true"},"*")),i("div",{key:"17bab24f52f47bde8d06f1070f13845cffeeae26",class:"row"},i("button",{key:"cde12c16dd7e2824cbd570d6101d9322cd56e802",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},onKeyDown:this.onTriggerKeyDown},i("span",{key:"a0058117f0f220f7c023ea839320448e2cf11492",class:{value:true,"value--placeholder":!a}},a||this.placeholder),i("pf-icon",{key:"2fafd08f3570839fe8b1e9fbd444cb01441cff19",name:"calendar"})),this.allowClear&&this.value&&i("button",{key:"3c0ae031b818206486b0dedaa67ec7da4abe47a1",class:"clear",part:"clear",type:"button","aria-label":"Clear selected date",disabled:this.disabled,onClick:this.clear},i("pf-icon",{key:"f2f340dfdccdcb59cd38fa1ca9c449e14bada1bd",name:"circle-xmark"}))),this.description&&i("p",{key:"868d285932ff0a58a0917909ac566f8672b410ee",class:"description",part:"description",id:"description"},this.description),this.error&&i("p",{key:"425d7843886e4afadafbf38b26bae2ee80b3c7d8",class:"error",part:"error",id:"error"},this.error)),i("div",{key:"1fa2e68673f31aeb52be6446f614a39494016d90",id:"panel",part:"panel",class:"panel",popover:"auto",role:"dialog","aria-label":"Choose a date",onToggle:this.onToggle},i("pf-calendar",{key:"7a9e9553c4a2975ae7ec8e6c34cc04ac7626ec76",ref:this.bindCalendar,part:"calendar",value:this.value||undefined,min:this.min,max:this.max,startYear:this.startYear,endYear:this.endYear,showOutsideDays:this.showOutsideDays,isDateDisabled:this.isDateDisabled})))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};f.style=p();export{f as pf_date_picker};
-//# sourceMappingURL=p-e944f504.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["pfDatePickerCss","PfDatePicker","internals","name","value","open","label","description","error","placeholder","required","disabled","allowClear","min","max","startYear","endYear","showOutsideDays","isDateDisabled","pfChange","pfOpenChange","initialValue","stopObserving","componentWillLoad","this","syncFormState","disconnectedCallback","setFormValue","applyControlValidity","Boolean","syncOpen","next","previous","showPanel","hidePanel","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","panel","el","shadowRoot","querySelector","trigger","calendar","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","align","matchAnchorWidth","flip","onChange","left","top","placePopover","focusSelectedDay","undefined","hidePopover","onToggle","event","nowOpen","newState","focus","bindCalendar","element","boundCalendar","addEventListener","onCalendarChange","stopPropagation","detail","clear","onTriggerKeyDown","key","Keys","ArrowDown","Enter","Space","preventDefault","formatted","date","parseISODate","Intl","DateTimeFormat","month","day","year","format","render","describedBy","composeDescribedBy","text","h","Host","class","part","htmlFor","id","type","onClick","onKeyDown","popover","role","ref"],"sources":["src/components/pf-date-picker/pf-date-picker.css?tag=pf-date-picker&encapsulation=shadow","src/components/pf-date-picker/pf-date-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-field-label-text, var(--pf-input-label-text));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-input-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.row {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-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:hover:not(:disabled) {\n  border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-input-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-input-placeholder-text);\n}\n\n.clear {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-input-text-muted, var(--pf-input-placeholder-text));\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-input-text);\n}\n\n.clear:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.description {\n  color: var(--pf-input-description-text);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-input-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 * Declared here and set inline, because no test project applies this file.\n */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: none;\n  border: 0;\n  overflow: visible;\n  padding: 0;\n}\n\n.panel:popover-open {\n  animation: pf-date-picker-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-date-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","import {\n  composeDescribedBy,\n  Keys,\n  observeAnchoredPosition,\n  parseISODate,\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 date field: a trigger that opens `pf-calendar` in a\n * popover.\n *\n * Form-associated, which the React `DatePicker` is not — it is a button and a\n * portal, so its value reaches a surrounding `<form>` only if the consumer\n * wires it there themselves. Here the value is submitted as `YYYY-MM-DD`,\n * constraint validation works, and Angular's generated accessor has something\n * to bind to.\n *\n * The panel is a `popover`, so light dismiss and Escape are the browser's.\n * Unlike `pf-dropdown`, the trigger and the panel are both in *this* shadow\n * root, so `aria-controls` resolves and is worth setting — a same-root IDREF\n * is the one case that works, measured.\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 calendar.\n * @part clear - the clear button.\n * @part panel - the floating panel holding the calendar.\n * @part calendar - the calendar itself.\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-picker',\n  styleUrl: 'pf-date-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfDatePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because the submission name comes\n   * from the content attribute and the generated bindings set properties.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The selected date as `YYYY-MM-DD`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the calendar is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Visible label. In the same root as the trigger, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select a date';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Offer a button that empties the field. */\n  @Prop() allowClear = false;\n\n  /** Earliest selectable date, as `YYYY-MM-DD`. */\n  @Prop() min?: string;\n\n  /** Latest selectable date, as `YYYY-MM-DD`. */\n  @Prop() max?: string;\n\n  @Prop() startYear?: number;\n\n  @Prop() endYear?: number;\n\n  @Prop() showOutsideDays = true;\n\n  /** A predicate for days that cannot be chosen; see `pf-calendar`. */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires when a date is chosen or cleared. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the calendar opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** What a form reset restores; `value` has been overwritten by then. */\n  private initialValue = '';\n\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\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  /** The one place an open or close is announced, whatever caused it. */\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  /** Opens the calendar. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the calendar. */\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  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 calendar() {\n    return (\n      this.el.shadowRoot?.querySelector<HTMLElement & { focusSelectedDay(): Promise<void> }>(\n        'pf-calendar',\n      ) ?? null\n    );\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    // Focus the grid, not the panel: the calendar owns its own tab stop, and\n    // it asks for focus through a method rather than having it reached for.\n    void this.calendar?.focusSelectedDay();\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   * Mirrors a browser-driven close — a light dismiss or Escape — back into\n   * `open`, which is what then announces it.\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  /**\n   * Listens on the calendar element itself, not on the host.\n   *\n   * Both were tried. A `@Listen('pfChange')` on the host sees the calendar's\n   * event *and* this element's own — a Stencil event is composed, so by then\n   * both have been retargeted to the host and `event.target` cannot tell them\n   * apart. Worse, `stopPropagation()` there does not help: the consumer's\n   * listener is on that same node, and stopping propagation never stops\n   * same-node listeners, so every pick reported twice. Caught by a test that\n   * counted them.\n   *\n   * On the calendar, the event is stopped before it reaches the host at all,\n   * which does not depend on listener registration order the way\n   * `stopImmediatePropagation` would.\n   */\n  private bindCalendar = (element?: HTMLElement) => {\n    if (!element || element === this.boundCalendar) return;\n    this.boundCalendar = element;\n    element.addEventListener('pfChange', this.onCalendarChange as EventListener);\n  };\n\n  private boundCalendar?: HTMLElement;\n\n  private onCalendarChange = (event: CustomEvent<{ value: string }>) => {\n    event.stopPropagation();\n\n    this.value = event.detail.value;\n    this.pfChange.emit({ value: this.value });\n    this.open = false;\n    this.trigger?.focus();\n  };\n\n  private clear = (event: MouseEvent) => {\n    event.stopPropagation();\n    if (!this.value) return;\n    this.value = '';\n    this.pfChange.emit({ value: '' });\n  };\n\n  /**\n   * Down opens the calendar from a closed trigger, as a popup button should.\n   * Escape is the browser's while the panel is open — `popover=\"auto\"` handles\n   * it — so there is nothing to do here for it.\n   */\n  private onTriggerKeyDown = (event: KeyboardEvent) => {\n    if (this.open || this.disabled) return;\n    if (event.key === Keys.ArrowDown || event.key === Keys.Enter || event.key === Keys.Space) {\n      if (event.key === Keys.ArrowDown) {\n        event.preventDefault();\n        this.open = true;\n      }\n    }\n  };\n\n  /** `MMM D, YYYY`, matching the React component's trigger text. */\n  private formatted(): string {\n    const date = parseISODate(this.value);\n    if (!date) return '';\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    }).format(date);\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const text = this.formatted();\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\">\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              onKeyDown={this.onTriggerKeyDown}\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 && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label=\"Clear selected date\"\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\"\n          onToggle={this.onToggle}\n        >\n          <pf-calendar\n            ref={this.bindCalendar}\n            part=\"calendar\"\n            value={this.value || undefined}\n            min={this.min}\n            max={this.max}\n            startYear={this.startYear}\n            endYear={this.endYear}\n            showOutsideDays={this.showOutsideDays}\n            isDateDisabled={this.isDateDisabled}\n          ></pf-calendar>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,a,h as t,H as r}from"./p-Bm6UxEit.js";import{r as s}from"./p-DToIJg5W.js";const i=()=>`:host{background:var(--pf-sidebar-nav-bg);border:1px solid var(--pf-sidebar-nav-border);border-radius:var(--pf-sidebar-nav-radius, var(--radius-md));display:flex;flex-direction:column;min-height:0;width:100%;--pf-nav-item-text:var(--pf-sidebar-nav-text-muted);--pf-nav-item-hover-text:var(--pf-sidebar-nav-text);--pf-nav-item-hover-bg:var(--pf-sidebar-nav-bg-subtle);--pf-nav-item-current-text:var(--pf-sidebar-nav-text);--pf-nav-item-current-bg:var(--pf-sidebar-nav-bg-subtle)}:host([hidden]){display:none}@media (min-width: 768px){:host{min-height:var(--pf-sidebar-nav-min-height, 360px);width:min(100%, var(--pf-sidebar-nav-width, 280px))}}.header,.footer{padding:var(--space-3)}.header{border-bottom:1px solid var(--pf-sidebar-nav-border)}.footer{border-top:1px solid var(--pf-sidebar-nav-border);margin-top:auto}.header.empty,.footer.empty{display:none}.nav{display:grid;gap:var(--space-3);padding:var(--space-3)}.nav slot{display:contents}`;const n=class{constructor(a){e(this,a)}get el(){return a(this)}label="Sidebar navigation";hasHeader=false;hasFooter=false;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleStructureChange(e){e.stopPropagation();this.sync()}async refresh(){this.sync()}get items(){const e=e=>{for(let a=e.parentElement;a;a=a.parentElement){const e=a.tagName.toLowerCase();if(e==="pf-sidebar-navigation"||e==="pf-header-navigation"){return a===this.el}}return false};return Array.from(this.el.querySelectorAll("pf-nav-item")).filter(e)}isCurrent(e){return e.current??e.hasAttribute("current")}sync(){const e=e=>Array.from(this.el.children).some((a=>a.getAttribute("slot")===e));this.hasHeader=e("header");this.hasFooter=e("footer");const a=this.items;const t=s(a.map((e=>({current:this.isCurrent(e)}))));for(const[e,r]of a.entries()){const a=r;a.currentPage=e===t;a.orientation="vertical"}}render(){return t(r,{key:"c53d731970844c06cf2d86789dfbc9e111eeb83e"},t("div",{key:"1ca019d8890305e0f1656243bcca112f461ea51c",class:{header:true,empty:!this.hasHeader},part:"header"},t("slot",{key:"750fc4f32e167e6b186824d1429ea25d09818c3d",name:"header",onSlotchange:()=>this.refresh()})),t("nav",{key:"6ebe62b6bd357a9fac58220f31309c811a6af76a",class:"nav",part:"nav","aria-label":this.label},t("slot",{key:"636b7284ed6113e7c60da733da62c0562a8ba042",onSlotchange:()=>this.refresh()})),t("div",{key:"9a5b32c84e82ced42bc6520806f9d02b5c7af65e",class:{footer:true,empty:!this.hasFooter},part:"footer"},t("slot",{key:"d04ef066ba6168173d0f778e8dc163ba34deeef5",name:"footer",onSlotchange:()=>this.refresh()})))}};n.style=i();export{n as pf_sidebar_navigation};
-//# sourceMappingURL=p-fd5a5ea1.entry.js.map