@pitchfork-ui/elements 0.1.0 → 0.2.1

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

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

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

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

package/dist/components/pf-input.js

@@ -1,2 +1,2 @@
-import{t as e,p as t,H as r,c as i,h as a,a as s}from"./index.js";import{c as o}from"./p-DfpCerXM.js";import{a as n}from"./p-Cr6IXrUk.js";const d=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-input-field-label, 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-input-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-input-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.input{background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);font:inherit;min-height:40px;padding:0 var(--space-3);width:100%;transition:background 0.2s,     border 0.2s,     color 0.2s,     opacity 0.2s}.input:disabled{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);cursor:not-allowed;opacity:0.6}.input:focus{outline:none}.input:focus-visible{border-color:var(--pf-input-focus-border);box-shadow:var(--pf-input-focus-ring, var(--pf-focus-ring))}.input::placeholder{color:var(--pf-input-placeholder)}.input--invalid{border-color:var(--pf-input-invalid-border)}@media (prefers-reduced-motion: reduce){.input{transition:none}}`;const l=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfInput=i(this,"pfInput");this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}internals;name;value="";type="text";label;description;error;placeholder;required=false;disabled=false;readonly=false;pfInput;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");n(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onInput=e=>{this.value=e.target.value;this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.value})};render(){const e=o(this.description&&"description",this.error&&"error");return a(s,{key:"a6d68ce6641fb92407356c94e2181b280bdc03b6"},a("div",{key:"312ee69f4a661494548b01f598b74ed56bd443fc",class:"field",part:"field"},this.label&&a("label",{key:"59188fde6b3639105f8ade8b497c764ddd5d658f",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&a("span",{key:"4f71679ec6bb99d3f7dc8f941d8c02bb94452c21",class:"required","aria-hidden":"true"},"*")),a("input",{key:"0680b0e5aa0f8ddf9850a212f735f0f8c5b273a3",id:"input",part:"input",class:{input:true,"input--invalid":Boolean(this.error)},type:this.type,name:this.name,value:this.value,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readOnly:this.readonly,"aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onChange:this.onChange}),this.description&&a("p",{key:"f732742b8602ed6094600065d5036bdad538ad35",class:"description",part:"description",id:"description"},this.description),this.error&&a("p",{key:"9d524a204abfb733afaf2bf3cc5ec9a5e1c65b94",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}static get style(){return d()}},[593,"pf-input",{name:[513],value:[1025],type:[513],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],readonly:[516],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}]);function c(){if(typeof customElements==="undefined"){return}const t=["pf-input"];t.forEach((t=>{switch(t){case"pf-input":if(!customElements.get(e(t))){customElements.define(e(t),l)}break}}))}c();const p=l;const f=c;export{p as PfInput,f as defineCustomElement};
+import{t as e,p as t,H as r,c as i,h as a,a as s}from"./index.js";import{c as o}from"./p-DfpCerXM.js";import{a as n}from"./p-Cr6IXrUk.js";import{c as d}from"./p-Cy_kHPeC.js";const l=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-input-field-label, 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-input-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-input-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.input{background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);font:inherit;min-height:40px;padding:0 var(--space-3);width:100%;transition:background 0.2s,     border 0.2s,     color 0.2s,     opacity 0.2s}.input:disabled{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);cursor:not-allowed;opacity:0.6}.input:focus{outline:none}.input:focus-visible{border-color:var(--pf-input-focus-border);box-shadow:var(--pf-input-focus-ring, var(--pf-focus-ring))}.input::placeholder{color:var(--pf-input-placeholder)}.input--invalid{border-color:var(--pf-input-invalid-border)}@media (prefers-reduced-motion: reduce){.input{transition:none}}`;const p=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfInput=i(this,"pfInput");this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";type="text";label;description;error;placeholder;required=false;disabled=false;readonly=false;pfInput;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");n(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onInput=e=>{this.value=e.target.value;this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.value})};render(){const e=o(this.description&&"description",this.error&&"error");return a(s,{key:"2eabd0d15d1a83b03064dee5feef9884a55a3c4c"},a("div",{key:"3c10b0b9d675eede30e34c27013d51713584baca",class:"field",part:"field"},this.label&&a("label",{key:"f0b9b45f307792a93190a354efcf0a980a326589",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&a("span",{key:"e3d8edb769ea8736ca485f5e539a0398ba1d1a33",class:"required","aria-hidden":"true"},"*")),a("input",{key:"419f2ba1f5a7b62b5042d1fd94b96a8abee829a7",id:"input","aria-label":d(this.el,this.label),part:"input",class:{input:true,"input--invalid":Boolean(this.error)},type:this.type,name:this.name,value:this.value,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readOnly:this.readonly,"aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onChange:this.onChange}),this.description&&a("p",{key:"c0d1323a34f5503a2049cc3ac5ef9e892cfb1cb6",class:"description",part:"description",id:"description"},this.description),this.error&&a("p",{key:"915301b580225bbf0b901c53f977b73a53fa94ee",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}static get style(){return l()}},[593,"pf-input",{name:[513],value:[1025],type:[513],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],readonly:[516],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}]);function c(){if(typeof customElements==="undefined"){return}const t=["pf-input"];t.forEach((t=>{switch(t){case"pf-input":if(!customElements.get(e(t))){customElements.define(e(t),p)}break}}))}c();const u=p;const f=c;export{u as PfInput,f as defineCustomElement};
 //# sourceMappingURL=pf-input.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["pfInputCss","PfInput","__stencil_proxyCustomElement","HTMLElement","internals","name","value","type","label","description","error","placeholder","required","disabled","readonly","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onInput","event","target","emit","onChange","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","id","input","readOnly"],"sources":["src/components/pf-input/pf-input.css?tag=pf-input&encapsulation=shadow","src/components/pf-input/pf-input.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-2);\n}\n\n.label {\n  color: var(--pf-input-field-label, 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-input-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-input-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.input {\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  font: inherit;\n  min-height: 40px;\n  padding: 0 var(--space-3);\n  width: 100%;\n  transition:\n    background 0.2s,\n    border 0.2s,\n    color 0.2s,\n    opacity 0.2s;\n}\n\n.input:disabled {\n  background: var(--pf-control-bg-disabled);\n  border-color: var(--pf-control-border-disabled);\n  color: var(--pf-control-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--pf-input-focus-border);\n  box-shadow: var(--pf-input-focus-ring, var(--pf-focus-ring));\n}\n\n.input::placeholder {\n  color: var(--pf-input-placeholder);\n}\n\n.input--invalid {\n  border-color: var(--pf-input-invalid-border);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';\n\n/**\n * A form-associated text input.\n *\n * `formAssociated` plus `ElementInternals` is what makes this participate in a\n * real `<form>`: the value reaches `FormData`, constraint validation works, and\n * Angular's generated value accessor has something to bind to. A plain\n * `<input>` inside a shadow root does none of that.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part input - the native input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-input',\n  styleUrl: 'pf-input.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfInput {\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = '';\n\n  @Prop({ reflect: true }) type: PfInputType = 'text';\n\n  /** Visible label. Rendered in the same root as the input, 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?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Fires on every keystroke, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: string }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The value the control had when it was created, which is what a form reset\n   * restores. Captured here because `value` has been overwritten by then.\n   */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /**\n   * Whether the control currently satisfies its constraints.\n   *\n   * A form-associated custom element does not inherit `checkValidity` from\n   * anywhere -- the spec puts it on ElementInternals, so the element has to\n   * forward it or consumers cannot ask.\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * verified against a native `<input value=\"initial\">`, which comes back to\n   * \"initial\" rather than to \"\". Clearing it was a real defect: a\n   * `<pf-input value=\"…\">` in a form lost its value on any reset.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private onInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\n  };\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal -- the useId()\n    // the React component needs has no counterpart here.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <input\n            id=\"input\"\n            part=\"input\"\n            class={{ input: true, 'input--invalid': Boolean(this.error) }}\n            type={this.type}\n            name={this.name}\n            value={this.value}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\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      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAa,IAAM,qxC,MCoCZC,EAAOC,EAAA,MAAAD,UAAAE,E,uLACCC,UAWMC,KAGAC,MAAQ,GAERC,KAAoB,OAGrCC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAEXC,SAAW,MAG3BC,QAGAC,SAMDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,OAAS,GAClCa,KAAKC,e,CAMP,aAAAA,GACED,KAAKf,UAAUiB,aAAaF,KAAKb,OAAS,IAC1CgB,EAAqBH,KAAKf,UAAWmB,QAAQJ,KAAKb,OAAQa,KAAKP,SAAUO,KAAKT,M,CAWhF,mBAAMc,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CASxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAGZY,QAAWC,IACjBX,KAAKb,MAASwB,EAAMC,OAA4BzB,MAChDa,KAAKJ,QAAQiB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAGlC2B,SAAW,KACjBd,KAAKH,SAASgB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAG3C,MAAA4B,GAGE,MAAMC,EAAcC,EAClBjB,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAGhB,OACE2B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrBtB,KAAKX,OACJ6B,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvCvB,KAAKX,MACLW,KAAKP,UACJyB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAU,cAAa,QAAM,MAM/CH,EAAA,SAAAE,IAAA,2CACEI,GAAG,QACHF,KAAK,QACLD,MAAO,CAAEI,MAAO,KAAM,iBAAkBrB,QAAQJ,KAAKT,QACrDH,KAAMY,KAAKZ,KACXF,KAAMc,KAAKd,KACXC,MAAOa,KAAKb,MACZK,YAAaQ,KAAKR,YAClBC,SAAUO,KAAKP,SACfC,SAAUM,KAAKN,SACfgC,SAAU1B,KAAKL,SAAQ,eACTK,KAAKT,MAAQ,OAAS,KAAI,mBACtByB,EAClBN,QAASV,KAAKU,QACdI,SAAUd,KAAKc,WAEhBd,KAAKV,aACJ4B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcE,GAAG,eAC1CxB,KAAKV,aAGTU,KAAKT,OACJ2B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQE,GAAG,SAC9BxB,KAAKT,Q","ignoreList":[]}
+{"version":3,"names":["pfInputCss","PfInput","__stencil_proxyCustomElement","HTMLElement","internals","name","value","type","label","description","error","placeholder","required","disabled","readonly","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onInput","event","target","emit","onChange","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","id","controlAriaLabel","el","input","readOnly"],"sources":["src/components/pf-input/pf-input.css?tag=pf-input&encapsulation=shadow","src/components/pf-input/pf-input.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-2);\n}\n\n.label {\n  color: var(--pf-input-field-label, 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-input-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-input-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.input {\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  font: inherit;\n  min-height: 40px;\n  padding: 0 var(--space-3);\n  width: 100%;\n  transition:\n    background 0.2s,\n    border 0.2s,\n    color 0.2s,\n    opacity 0.2s;\n}\n\n.input:disabled {\n  background: var(--pf-control-bg-disabled);\n  border-color: var(--pf-control-border-disabled);\n  color: var(--pf-control-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--pf-input-focus-border);\n  box-shadow: var(--pf-input-focus-ring, var(--pf-focus-ring));\n}\n\n.input::placeholder {\n  color: var(--pf-input-placeholder);\n}\n\n.input--invalid {\n  border-color: var(--pf-input-invalid-border);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\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\nexport type PfInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';\n\n/**\n * A form-associated text input.\n *\n * `formAssociated` plus `ElementInternals` is what makes this participate in a\n * real `<form>`: the value reaches `FormData`, constraint validation works, and\n * Angular's generated value accessor has something to bind to. A plain\n * `<input>` inside a shadow root does none of that.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part input - the native input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-input',\n  styleUrl: 'pf-input.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfInput {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = '';\n\n  @Prop({ reflect: true }) type: PfInputType = 'text';\n\n  /** Visible label. Rendered in the same root as the input, 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?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Fires on every keystroke, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: string }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The value the control had when it was created, which is what a form reset\n   * restores. Captured here because `value` has been overwritten by then.\n   */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /**\n   * Whether the control currently satisfies its constraints.\n   *\n   * A form-associated custom element does not inherit `checkValidity` from\n   * anywhere -- the spec puts it on ElementInternals, so the element has to\n   * forward it or consumers cannot ask.\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * verified against a native `<input value=\"initial\">`, which comes back to\n   * \"initial\" rather than to \"\". Clearing it was a real defect: a\n   * `<pf-input value=\"…\">` in a form lost its value on any reset.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private onInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\n  };\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal -- the useId()\n    // the React component needs has no counterpart here.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <input\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"input\"\n            class={{ input: true, 'input--invalid': Boolean(this.error) }}\n            type={this.type}\n            name={this.name}\n            value={this.value}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\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      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAa,IAAM,qxC,MCsCZC,EAAOC,EAAA,MAAAD,UAAAE,E,4MAGCC,UAWMC,KAGAC,MAAQ,GAERC,KAAoB,OAGrCC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAEXC,SAAW,MAG3BC,QAGAC,SAMDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,OAAS,GAClCa,KAAKC,e,CAMP,aAAAA,GACED,KAAKf,UAAUiB,aAAaF,KAAKb,OAAS,IAC1CgB,EAAqBH,KAAKf,UAAWmB,QAAQJ,KAAKb,OAAQa,KAAKP,SAAUO,KAAKT,M,CAWhF,mBAAMc,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CASxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAGZY,QAAWC,IACjBX,KAAKb,MAASwB,EAAMC,OAA4BzB,MAChDa,KAAKJ,QAAQiB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAGlC2B,SAAW,KACjBd,KAAKH,SAASgB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAG3C,MAAA4B,GAGE,MAAMC,EAAcC,EAClBjB,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAGhB,OACE2B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrBtB,KAAKX,OACJ6B,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvCvB,KAAKX,MACLW,KAAKP,UACJyB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAU,cAAa,QAAM,MAM/CH,EAAA,SAAAE,IAAA,2CACEI,GAAG,QAAO,aACEC,EAAiBzB,KAAK0B,GAAI1B,KAAKX,OAC3CiC,KAAK,QACLD,MAAO,CAAEM,MAAO,KAAM,iBAAkBvB,QAAQJ,KAAKT,QACrDH,KAAMY,KAAKZ,KACXF,KAAMc,KAAKd,KACXC,MAAOa,KAAKb,MACZK,YAAaQ,KAAKR,YAClBC,SAAUO,KAAKP,SACfC,SAAUM,KAAKN,SACfkC,SAAU5B,KAAKL,SAAQ,eACTK,KAAKT,MAAQ,OAAS,KAAI,mBACtByB,EAClBN,QAASV,KAAKU,QACdI,SAAUd,KAAKc,WAEhBd,KAAKV,aACJ4B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcE,GAAG,eAC1CxB,KAAKV,aAGTU,KAAKT,OACJ2B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQE,GAAG,SAC9BxB,KAAKT,Q","ignoreList":[]}

package/dist/components/pf-modal.js

@@ -1,2 +1,2 @@
-import{t as e,p as s,H as o,c as t,h as a,a as i}from"./index.js";import{l as n}from"./p-C-VLyxRR.js";const l=()=>`:host{display:contents}.dialog{align-items:center;background:none;border:0;display:none;height:100%;justify-content:center;max-height:100%;max-width:100%;padding:var(--space-4);width:100%}.dialog[open]{display:flex}.dialog::backdrop{background:var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-modal-bg);border:1px solid var(--pf-modal-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--pf-modal-text);display:flex;flex-direction:column;max-height:100%;overflow:auto;position:relative;width:100%}:host([size='sm']) .panel{max-width:400px}:host([size='md']) .panel{max-width:560px}:host([size='lg']) .panel{max-width:800px}.close{background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-modal-text-muted);cursor:pointer;display:inline-flex;inset-block-start:var(--space-3);inset-inline-end:var(--space-3);padding:var(--space-1);position:absolute}.close:hover{color:var(--pf-modal-text)}.close:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.dialog[open] .panel{animation:pf-modal-in var(--pf-transition-enter)}@keyframes pf-modal-in{from{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}`;const r=s(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOpenChange=t(this,"pfOpenChange")}get el(){return this}open=false;size="md";label;dismissable=true;showCloseButton=true;pfOpenChange;releaseScroll=null;componentDidLoad(){if(this.open)this.showDialog()}disconnectedCallback(){this.unlockScroll()}async show(){this.open=true}async hide(){this.open=false}syncOpen(e,s){if(e)this.showDialog();else this.closeDialog();if(e!==s)this.pfOpenChange.emit({open:e})}get dialog(){return this.el.shadowRoot?.querySelector("dialog")??null}lockScroll(){if(this.releaseScroll)return;this.releaseScroll=n()}unlockScroll(){this.releaseScroll?.();this.releaseScroll=null}showDialog(){const e=this.dialog;if(!e||e.open)return;e.showModal();this.lockScroll()}closeDialog(){const e=this.dialog;this.unlockScroll();if(e?.open)e.close()}onCancel=e=>{if(!this.dismissable){e.preventDefault();return}};onClose=()=>{this.unlockScroll();if(this.open)this.open=false};onDialogClick=e=>{if(!this.dismissable||e.target!==this.dialog)return;this.open=false};accessibleName(){if(this.label)return this.label;const e=this.el.textContent?.trim();return e?e.slice(0,120):undefined}render(){return a(i,{key:"4445c1692e0cdf8ea4243f031984d25c3fa35148"},a("dialog",{key:"6a87d0181761644d8f9bc2d02ead398c10030668",part:"dialog",class:"dialog","aria-label":this.accessibleName(),onCancel:this.onCancel,onClose:this.onClose,onClick:this.onDialogClick},a("div",{key:"0ce7125e86b87d9fd834aee12491d384c0a47f7c",class:"panel",part:"panel"},this.showCloseButton&&a("button",{key:"e395307252b805932cdbebe2bc8e31178b8c8fb6",class:"close",part:"close",type:"button","aria-label":"Close",onClick:()=>this.hide()},a("svg",{key:"f83625e2e03e6c0e5f29aa1dd76dabab6011d27f",viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",focusable:"false"},a("path",{key:"fccb0dadc0442661f9300fdec4b36234124fcd93",d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.6","stroke-linecap":"round",fill:"none"}))),a("slot",{key:"8a01602089364eeeb8dfb4b8c1f9d6b48bc3f4a5"}))))}static get watchers(){return{open:[{syncOpen:0}]}}static get style(){return l()}},[769,"pf-modal",{open:[1540],size:[513],label:[1],dismissable:[4],showCloseButton:[4,"show-close-button"],show:[64],hide:[64]},undefined,{open:[{syncOpen:0}]}]);function d(){if(typeof customElements==="undefined"){return}const s=["pf-modal"];s.forEach((s=>{switch(s){case"pf-modal":if(!customElements.get(e(s))){customElements.define(e(s),r)}break}}))}d();const c=r;const h=d;export{c as PfModal,h as defineCustomElement};
+import{t as e,p as t,H as s,c as o,h as i,a}from"./index.js";import{l as n}from"./p-C-VLyxRR.js";var r=e=>{if(typeof e.checkVisibility==="function")return e.checkVisibility();return e.offsetParent!==null||e.getClientRects().length>0};var l=e=>{const t=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[contenteditable]:not([contenteditable="false"])','[tabindex]:not([tabindex="-1"])'].join(",");return Array.from(e.querySelectorAll(t)).filter((e=>{if(e.hasAttribute("disabled")||e.getAttribute("aria-hidden")==="true")return false;return r(e)}))};const d=()=>`:host{display:contents}.dialog{align-items:center;background:none;border:0;display:none;height:100%;justify-content:center;max-height:100%;max-width:100%;padding:var(--space-4);width:100%}.dialog[open]{display:flex}.dialog::backdrop{background:var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-modal-bg);border:1px solid var(--pf-modal-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--pf-modal-text);display:flex;flex-direction:column;max-height:100%;overflow:auto;position:relative;width:100%}:host([size='sm']) .panel{max-width:400px}:host([size='md']) .panel{max-width:560px}:host([size='lg']) .panel{max-width:800px}.close{background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-modal-text-muted);cursor:pointer;display:inline-flex;inset-block-start:var(--space-3);inset-inline-end:var(--space-3);padding:var(--space-1);position:absolute}.close:hover{color:var(--pf-modal-text)}.close:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.dialog[open] .panel{animation:pf-modal-in var(--pf-transition-enter)}@keyframes pf-modal-in{from{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}`;const c=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOpenChange=o(this,"pfOpenChange")}get el(){return this}open=false;size="md";label;dismissable=true;showCloseButton=true;pfOpenChange;releaseScroll=null;componentDidLoad(){if(this.open)this.showDialog()}disconnectedCallback(){this.unlockScroll()}async show(){this.open=true}async hide(){this.open=false}syncOpen(e,t){if(e)this.showDialog();else this.closeDialog();if(e!==t)this.pfOpenChange.emit({open:e})}get dialog(){return this.el.shadowRoot?.querySelector("dialog")??null}lockScroll(){if(this.releaseScroll)return;this.releaseScroll=n()}unlockScroll(){this.releaseScroll?.();this.releaseScroll=null}showDialog(){const e=this.dialog;if(!e||e.open)return;e.showModal();this.lockScroll();requestAnimationFrame((()=>this.ensureFocusInside()))}componentDidRender(){this.ensureFocusInside()}onFocusOut=e=>{if(!this.open||e.relatedTarget)return;requestAnimationFrame((()=>{if(document.hasFocus())this.ensureFocusInside()}))};ensureFocusInside(){const e=this.dialog;if(!this.open||!e?.isConnected||!e.open)return;if(e.matches(":focus-within"))return;const[t]=l(e);(t??e).focus()}closeDialog(){const e=this.dialog;this.unlockScroll();if(e?.open)e.close()}onCancel=e=>{if(!this.dismissable){e.preventDefault();return}};onClose=()=>{this.unlockScroll();if(this.open)this.open=false};onDialogClick=e=>{if(!this.dismissable||e.target!==this.dialog)return;this.open=false};accessibleName(){if(this.label)return this.label;const e=this.el.textContent?.trim();return e?e.slice(0,120):undefined}render(){return i(a,{key:"bf6b14acf276e7e327dad4e2adb0759c5371caa0"},i("dialog",{key:"fa8836858cd2ac18fe270c860671e77f5f9f6b93",part:"dialog",class:"dialog","aria-label":this.accessibleName(),onCancel:this.onCancel,onFocusout:this.onFocusOut,onClose:this.onClose,onClick:this.onDialogClick},i("div",{key:"6bfce72c9c19619388b93e3385b2fa8fe8fecc8e",class:"panel",part:"panel"},this.showCloseButton&&i("button",{key:"f11faa39f8854d5dd6854bb3c6e8e8e2f1abc6e3",class:"close",part:"close",type:"button","aria-label":"Close",onClick:()=>this.hide()},i("svg",{key:"7530bfc0821a2d09e6045589cbbf2d390e8c6897",viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",focusable:"false"},i("path",{key:"74c4d8385baa9776cfdf23570f46fd1621bd3fa2",d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.6","stroke-linecap":"round",fill:"none"}))),i("slot",{key:"d11d9ae0716dc7f846ea05dc24689f0c6465057d"}))))}static get watchers(){return{open:[{syncOpen:0}]}}static get style(){return d()}},[769,"pf-modal",{open:[1540],size:[513],label:[1],dismissable:[4],showCloseButton:[4,"show-close-button"],show:[64],hide:[64]},undefined,{open:[{syncOpen:0}]}]);function f(){if(typeof customElements==="undefined"){return}const t=["pf-modal"];t.forEach((t=>{switch(t){case"pf-modal":if(!customElements.get(e(t))){customElements.define(e(t),c)}break}}))}f();const h=c;const u=f;export{h as PfModal,u as defineCustomElement};
 //# sourceMappingURL=pf-modal.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["pfModalCss","PfModal","__stencil_proxyCustomElement","HTMLElement","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":"sGAAA,MAAMA,EAAa,IAAM,8tC,MCwCZC,EAAOC,EAAA,MAAAD,UAAAE,E,+IAIsBC,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":[]}
+{"version":3,"names":["isElementVisible","element","checkVisibility","offsetParent","getClientRects","length","getFocusableElements","container","selector","join","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","pfModalCss","PfModal","__stencil_proxyCustomElement","HTMLElement","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","requestAnimationFrame","ensureFocusInside","componentDidRender","onFocusOut","event","relatedTarget","document","hasFocus","isConnected","matches","first","focus","close","onCancel","preventDefault","onClose","onDialogClick","target","accessibleName","text","textContent","trim","slice","undefined","render","h","Host","key","part","class","onFocusout","onClick","type","viewBox","width","height","focusable","d","stroke","fill"],"sources":["../core/dist/focus.js","src/components/pf-modal/pf-modal.css?tag=pf-modal&encapsulation=shadow","src/components/pf-modal/pf-modal.tsx"],"sourcesContent":["import { noop } from \"./internal.js\";\nimport { Keys } from \"./keys.js\";\n//#region src/focus.ts\nvar isElementVisible = (element) => {\n\tif (typeof element.checkVisibility === \"function\") return element.checkVisibility();\n\treturn element.offsetParent !== null || element.getClientRects().length > 0;\n};\nvar getFocusableElements = (container) => {\n\tconst selector = [\n\t\t\"a[href]\",\n\t\t\"button:not([disabled])\",\n\t\t\"input:not([disabled])\",\n\t\t\"select:not([disabled])\",\n\t\t\"textarea:not([disabled])\",\n\t\t\"[contenteditable]:not([contenteditable=\\\"false\\\"])\",\n\t\t\"[tabindex]:not([tabindex=\\\"-1\\\"])\"\n\t].join(\",\");\n\treturn Array.from(container.querySelectorAll(selector)).filter((element) => {\n\t\tif (element.hasAttribute(\"disabled\") || element.getAttribute(\"aria-hidden\") === \"true\") return false;\n\t\treturn isElementVisible(element);\n\t});\n};\n/**\n* Moves focus into the container and keeps Tab cycling inside it. Returns a\n* cleanup function that removes the listener and, unless told otherwise,\n* restores focus to the previously active element.\n*/\nfunction trapFocus({ getContainer, onEscape, restoreFocus = true }) {\n\tif (typeof document === \"undefined\") return noop;\n\tconst container = getContainer();\n\tconst previousActiveElement = document.activeElement;\n\tconst initialFocusable = container ? getFocusableElements(container)[0] : void 0;\n\tif (initialFocusable) initialFocusable.focus();\n\telse container?.focus();\n\tconst onKeyDown = (event) => {\n\t\tif (event.key === Keys.Escape) {\n\t\t\tonEscape?.();\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== Keys.Tab) return;\n\t\tconst current = getContainer();\n\t\tif (!current) return;\n\t\tconst focusableElements = getFocusableElements(current);\n\t\tif (focusableElements.length === 0) {\n\t\t\tevent.preventDefault();\n\t\t\tcurrent.focus();\n\t\t\treturn;\n\t\t}\n\t\tconst firstElement = focusableElements[0];\n\t\tconst lastElement = focusableElements[focusableElements.length - 1];\n\t\tconst activeElement = document.activeElement;\n\t\tif (!(activeElement ? current.contains(activeElement) : false)) {\n\t\t\tevent.preventDefault();\n\t\t\t(event.shiftKey ? lastElement : firstElement).focus();\n\t\t\treturn;\n\t\t}\n\t\tif (event.shiftKey && activeElement === firstElement) {\n\t\t\tevent.preventDefault();\n\t\t\tlastElement.focus();\n\t\t\treturn;\n\t\t}\n\t\tif (!event.shiftKey && activeElement === lastElement) {\n\t\t\tevent.preventDefault();\n\t\t\tfirstElement.focus();\n\t\t}\n\t};\n\tdocument.addEventListener(\"keydown\", onKeyDown);\n\treturn () => {\n\t\tdocument.removeEventListener(\"keydown\", onKeyDown);\n\t\tif (restoreFocus) previousActiveElement?.focus?.();\n\t};\n}\n//#endregion\nexport { getFocusableElements, trapFocus };\n",":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 { getFocusableElements, 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 cannot be taken by a light-DOM button, and a real Escape\n * fires `cancel` then `close`. So `trapFocus` from core is not needed here,\n * unlike in the React component.\n *\n * The one part of `showModal()` that cannot be relied on is where it puts\n * focus, and the gap is exactly the case every framework consumer is in. See\n * `showDialog` below.\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  /**\n   * Opens the dialog, and makes sure focus actually went into it.\n   *\n   * `showModal()` focuses the dialog or its first focusable descendant — but\n   * **not** when light-DOM children were appended in the same task as the\n   * open. Measured in Chromium with no framework involved: append the three\n   * `pf-modal-*` sections to a long-mounted `pf-modal` and set `open` in the\n   * same task, and the dialog opens with `document.activeElement` still on\n   * `<body>` and `:focus-within` false. Leave one frame between the two and\n   * focus lands inside; mount the element with its children and `open`\n   * already set and focus lands inside. So it is the append racing the open,\n   * and the flattened tree `showModal()`'s focusing steps read.\n   *\n   * That race is not an edge case: React, Angular and Vue all commit a\n   * modal's content and its `open` in one go, so every framework consumer got\n   * an open modal with focus outside it and nothing to say so — the page is\n   * still inert, so the only symptom is that a reader is not taken to the\n   * dialog and the first Tab is needed. Porting `apps/demo` is what found it.\n   *\n   * What the trace shows, with element identity and a `MutationObserver` on\n   * the shadow root: `showModal()` **does** focus, onto `div[part=panel]`,\n   * and one frame later a `focusout` with `relatedTarget: null` drops it,\n   * with nothing removed from the shadow root. That is Chromium's focus\n   * fixup running once the appended children are assigned to the slot and\n   * finding the panel is no longer a valid target -- so it is not a render\n   * that loses focus, and re-asserting after a render does not catch it\n   * (measured: `componentDidRender` alone changes nothing here).\n   *\n   * So the dialog watches for exactly that: a `focusout` that goes nowhere\n   * while the modal is open puts focus back. `requestAnimationFrame` after\n   * `showModal()` covers the case where focus never arrived at all, and\n   * `componentDidRender` covers a render that discards the focused node. All\n   * three are the same guarded call, and the `:focus-within` guard makes it a\n   * no-op whenever focus is already inside -- so none of them moves focus\n   * that the platform or a consumer placed.\n   */\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n    requestAnimationFrame(() => this.ensureFocusInside());\n  }\n\n  componentDidRender() {\n    this.ensureFocusInside();\n  }\n\n  /**\n   * Focus left the dialog for nothing while it is open, which the platform\n   * does when its focus fixup runs after the slotted content changes.\n   *\n   * `relatedTarget` is the test: a Tab or a click inside names where focus\n   * went, and a modal dialog means it cannot have gone outside. The window\n   * losing focus also reports null, hence the `document.hasFocus()` guard --\n   * without it, switching tabs would pull focus back on return.\n   */\n  private onFocusOut = (event: FocusEvent) => {\n    if (!this.open || event.relatedTarget) return;\n    requestAnimationFrame(() => {\n      if (document.hasFocus()) this.ensureFocusInside();\n    });\n  };\n\n  /** Focus inside the open dialog, unless it is already there. */\n  private ensureFocusInside() {\n    const dialog = this.dialog;\n    if (!this.open || !dialog?.isConnected || !dialog.open) return;\n    if (dialog.matches(':focus-within')) return;\n    const [first] = getFocusableElements(dialog);\n    (first ?? dialog).focus();\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          onFocusout={this.onFocusOut}\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":"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","ignoreList":[]}

package/dist/components/pf-multi-select.js

@@ -1,2 +1,2 @@
-import{t,p as e,H as i,c as s,h as r,a}from"./index.js";import{o,p as n}from"./p-CC7AyfOt.js";import{c as l}from"./p-DfpCerXM.js";import{i as c,K as p}from"./p-g4FlTDZx.js";import{g as h,r as d}from"./p-CAz7-p8y.js";import{b as f,p as u,a as m,f as b}from"./p-BmcsJLdy.js";import{a as v}from"./p-Cr6IXrUk.js";import{d as g}from"./p-CkFjPRTe.js";const y=()=>`:host{display:block;--pf-option-text:var(--pf-multiselect-text);--pf-option-text-disabled:var(--pf-multiselect-text-muted);--pf-option-active-bg:var(--pf-multiselect-active-bg);--pf-option-active-text:var(--pf-multiselect-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-multiselect-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-multiselect-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);color:var(--pf-multiselect-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-multiselect-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-multiselect-invalid-border)}.chips{display:flex;flex-wrap:wrap;gap:var(--space-1);min-width:0}.chip{background:var(--pf-multiselect-bg-subtle);border-radius:var(--radius-sm);font-size:var(--font-size-xs);padding:2px var(--space-2)}.placeholder{color:var(--pf-multiselect-text-muted)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-multiselect-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-multiselect-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-multi-select-in var(--pf-transition-enter)}@keyframes pf-multi-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;const x={[p.ArrowDown]:"next",[p.ArrowUp]:"previous",[p.Home]:"first",[p.End]:"last"};const k=e(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfChange=s(this,"pfChange");this.pfOpenChange=s(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";open=false;label;description;error;placeholder="Select options";required=false;disabled=false;maxVisibleOptions;pfChange;pfOpenChange;chips=[];initialValue="";stopObserving;activeOption=null;warnedAboutSeparator=false;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.syncOptions()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){const t=this.values();if(t.length===0||!this.name){this.internals.setFormValue(null)}else{const e=new FormData;for(const i of t)e.append(this.name,i);this.internals.setFormValue(e)}v(this.internals,t.length>0,this.required,this.error)}syncOptions(){const t=this.values();const e=[];for(const e of this.options()){const i=t.includes(this.optionValue(e));e.selected=i}for(const i of t){const t=this.options().find((t=>this.optionValue(t)===i));if(t)e.push(t.textContent?.trim()??i)}this.chips=e;this.warnAboutSeparators()}warnAboutSeparators(){if(this.warnedAboutSeparator)return;const t=f(this.options().map((t=>this.optionValue(t))));if(t.length===0)return;this.warnedAboutSeparator=true;console.warn(`[pf-multi-select] option values cannot contain a comma, because \`value\` is a `+`comma-separated list: ${t.join(" ")}`)}syncOpen(t,e){if(t)this.showListbox();else this.hideListbox();if(t!==e)this.pfOpenChange.emit({open:t})}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}async refresh(){this.syncOptions()}onSlotChange=()=>{this.syncOptions()};values(){return u(this.value)}options(){return Array.from(this.el.querySelectorAll("pf-option"))}enabled(){return this.options().filter((t=>!t.hasAttribute("disabled")))}optionValue(t){return t.value??t.getAttribute("value")??""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}showListbox(){const t=this.listbox;if(this.disabled||!t||t.matches(":popover-open"))return;t.showPopover();this.stopObserving?.();this.stopObserving=o({getAnchor:()=>this.trigger,getFloating:()=>t,matchAnchorWidth:true,flip:true,onChange:({left:e,top:i,width:s,minWidth:r})=>{n(t,e,i);if(s!==undefined)t.style.width=`${s}px`;if(r!==undefined)t.style.minWidth=`${r}px`}});const e=this.values();const i=this.options().find((t=>e.includes(this.optionValue(t))&&!t.hasAttribute("disabled")))??this.enabled()[0];this.setActive(i??null)}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;const t=this.listbox;if(t?.matches(":popover-open"))t.hidePopover()}onToggle=t=>{const e=t.newState==="open";if(this.open!==e)this.open=e;if(!e)this.trigger?.focus()};setActive(t){for(const e of this.options()){if(e!==t)e.active=false}if(t)t.active=true;this.activeOption=t;this.syncActiveDescendant();if(t&&typeof t.scrollIntoView==="function"){t.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const t=this.trigger;if(!t||!("ariaActiveDescendantElement"in t))return;t.ariaActiveDescendantElement=this.open?this.activeOption:null}toggle(t){if(t.hasAttribute("disabled")||this.disabled)return;const e=m(this.values(),this.optionValue(t));this.value=b(e);this.pfChange.emit({value:this.value,values:e})}handleOptionSelect(t){t.stopPropagation();const e=this.options().find((e=>this.optionValue(e)===t.detail.value));if(e)this.toggle(e)}move(t){const e=this.options();const i=h(e,(t=>t.hasAttribute("disabled")));const s=this.activeOption?e.indexOf(this.activeOption):-1;const r=d(t,i,s);if(r!==-1)this.setActive(e[r]??null)}handleKeyDown(t){if(this.disabled||t.defaultPrevented)return;const e=x[t.key];if(e){t.preventDefault();if(!this.open)this.open=true;else this.move(e);return}if(c(t.key)){t.preventDefault();if(!this.open)this.open=true;else if(this.activeOption)this.toggle(this.activeOption)}}render(){const t=l(this.description&&"description",this.error&&"error");return r(a,{key:"68ee3f2e23741c14f955523bf3cbcb10e4fc3e71"},r("div",{key:"ffbfe398e848a5134740908327bca92afe74f39c",class:"field",part:"field"},this.label&&r("label",{key:"7fe73bdad7836709b5e30536412283edf72abd37",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&r("span",{key:"1cecfe1256d01e6770417b030a8aba22ca65f802",class:"required","aria-hidden":"true"},"*")),r("button",{key:"03c611dff79a67cda5478d586eaa301fd4178843",id:"trigger",part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",role:"combobox",disabled:this.disabled,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":t,onClick:()=>{if(!this.disabled)this.open=!this.open}},this.chips.length>0?r("span",{class:"chips"},this.chips.map((t=>r("span",{key:t,class:"chip",part:"chip"},t)))):r("span",{class:"placeholder"},this.placeholder),r("span",{key:"a31710bfb23f890b33a010962b93792424b71e36",class:"chevron","aria-hidden":"true"},r("pf-icon",{key:"517857c8ab460c5a60a50d42c3ff68d986e0c744",name:"chevron-down"}))),this.description&&r("p",{key:"549f06c9be1d291d4654ac63c6f03f749453113d",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"0da14622c434e02f6098a61382b22ee2b74a3f84",class:"error",part:"error",id:"error"},this.error)),r("div",{key:"f62c24c5870b4a05bcba73969af4721ed52bf4e3",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-multiselectable":"true","aria-label":this.label??this.placeholder,style:this.maxVisibleOptions?{maxHeight:`calc(${this.maxVisibleOptions} * 36px)`,overflowY:"auto"}:undefined,onToggle:this.onToggle},r("slot",{key:"6d8c84b2173904d99f7b3583cbb2203636cd6214",onSlotchange:this.onSlotChange})))}static get formAssociated(){return true}static get watchers(){return{name:[{syncFormState:0}],value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}static get style(){return y()}},[833,"pf-multi-select",{name:[513],value:[1537],open:[1540],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],maxVisibleOptions:[2,"max-visible-options"],chips:[32],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],refresh:[64]},[[0,"pfOptionSelect","handleOptionSelect"],[0,"keydown","handleKeyDown"]],{name:[{syncFormState:0}],value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function w(){if(typeof customElements==="undefined"){return}const e=["pf-multi-select","pf-icon"];e.forEach((e=>{switch(e){case"pf-multi-select":if(!customElements.get(t(e))){customElements.define(t(e),k)}break;case"pf-icon":if(!customElements.get(t(e))){g()}break}}))}w();const S=k;const O=w;export{S as PfMultiSelect,O as defineCustomElement};
+import{t,p as e,H as i,c as s,h as r,a}from"./index.js";import{o,p as n}from"./p-CC7AyfOt.js";import{c as l}from"./p-DfpCerXM.js";import{i as c,K as p}from"./p-g4FlTDZx.js";import{g as d,r as h}from"./p-CAz7-p8y.js";import{b as f,p as u,a as m,f as b}from"./p-BmcsJLdy.js";import{a as v}from"./p-Cr6IXrUk.js";import{c as g}from"./p-Cy_kHPeC.js";import{d as y}from"./p-CkFjPRTe.js";const x=()=>`:host{display:block;--pf-option-text:var(--pf-multiselect-text);--pf-option-text-disabled:var(--pf-multiselect-text-muted);--pf-option-active-bg:var(--pf-multiselect-active-bg);--pf-option-active-text:var(--pf-multiselect-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-multiselect-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-multiselect-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);color:var(--pf-multiselect-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-multiselect-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-multiselect-invalid-border)}.chips{display:flex;flex-wrap:wrap;gap:var(--space-1);min-width:0}.chip{background:var(--pf-multiselect-bg-subtle);border-radius:var(--radius-sm);font-size:var(--font-size-xs);padding:2px var(--space-2)}.placeholder{color:var(--pf-multiselect-text-muted)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-multiselect-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-multiselect-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-multiselect-bg);border:1px solid var(--pf-multiselect-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-multi-select-in var(--pf-transition-enter)}@keyframes pf-multi-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;const k={[p.ArrowDown]:"next",[p.ArrowUp]:"previous",[p.Home]:"first",[p.End]:"last"};const w=e(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfChange=s(this,"pfChange");this.pfOpenChange=s(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";open=false;label;description;error;placeholder="Select options";required=false;disabled=false;maxVisibleOptions;pfChange;pfOpenChange;chips=[];initialValue="";stopObserving;activeOption=null;warnedAboutSeparator=false;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.syncOptions()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){const t=this.values();if(t.length===0||!this.name){this.internals.setFormValue(null)}else{const e=new FormData;for(const i of t)e.append(this.name,i);this.internals.setFormValue(e)}v(this.internals,t.length>0,this.required,this.error)}syncOptions(){const t=this.values();const e=[];for(const e of this.options()){const i=t.includes(this.optionValue(e));e.selected=i}for(const i of t){const t=this.options().find((t=>this.optionValue(t)===i));if(t)e.push(t.textContent?.trim()??i)}this.chips=e;this.warnAboutSeparators()}warnAboutSeparators(){if(this.warnedAboutSeparator)return;const t=f(this.options().map((t=>this.optionValue(t))));if(t.length===0)return;this.warnedAboutSeparator=true;console.warn(`[pf-multi-select] option values cannot contain a comma, because \`value\` is a `+`comma-separated list: ${t.join(" ")}`)}syncOpen(t,e){if(t)this.showListbox();else this.hideListbox();if(t!==e)this.pfOpenChange.emit({open:t})}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}async refresh(){this.syncOptions()}onSlotChange=()=>{this.syncOptions()};values(){return u(this.value)}options(){return Array.from(this.el.querySelectorAll("pf-option"))}enabled(){return this.options().filter((t=>!t.hasAttribute("disabled")))}optionValue(t){return t.value??t.getAttribute("value")??""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}showListbox(){const t=this.listbox;if(this.disabled||!t||t.matches(":popover-open"))return;t.showPopover();this.stopObserving?.();this.stopObserving=o({getAnchor:()=>this.trigger,getFloating:()=>t,matchAnchorWidth:true,flip:true,onChange:({left:e,top:i,width:s,minWidth:r})=>{n(t,e,i);if(s!==undefined)t.style.width=`${s}px`;if(r!==undefined)t.style.minWidth=`${r}px`}});const e=this.values();const i=this.options().find((t=>e.includes(this.optionValue(t))&&!t.hasAttribute("disabled")))??this.enabled()[0];this.setActive(i??null)}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;const t=this.listbox;if(t?.matches(":popover-open"))t.hidePopover()}onToggle=t=>{const e=t.newState==="open";if(this.open!==e)this.open=e;if(!e)this.trigger?.focus()};setActive(t){for(const e of this.options()){if(e!==t)e.active=false}if(t)t.active=true;this.activeOption=t;this.syncActiveDescendant();if(t&&typeof t.scrollIntoView==="function"){t.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const t=this.trigger;if(!t||!("ariaActiveDescendantElement"in t))return;t.ariaActiveDescendantElement=this.open?this.activeOption:null}toggle(t){if(t.hasAttribute("disabled")||this.disabled)return;const e=m(this.values(),this.optionValue(t));this.value=b(e);this.pfChange.emit({value:this.value,values:e})}handleOptionSelect(t){t.stopPropagation();const e=this.options().find((e=>this.optionValue(e)===t.detail.value));if(e)this.toggle(e)}move(t){const e=this.options();const i=d(e,(t=>t.hasAttribute("disabled")));const s=this.activeOption?e.indexOf(this.activeOption):-1;const r=h(t,i,s);if(r!==-1)this.setActive(e[r]??null)}handleKeyDown(t){if(this.disabled||t.defaultPrevented)return;const e=k[t.key];if(e){t.preventDefault();if(!this.open)this.open=true;else this.move(e);return}if(c(t.key)){t.preventDefault();if(!this.open)this.open=true;else if(this.activeOption)this.toggle(this.activeOption)}}render(){const t=l(this.description&&"description",this.error&&"error");return r(a,{key:"84f645358443d6dc41515a835cf0c7136a6f2a30"},r("div",{key:"2abaf9886654a5cef6756a4c566f61e37c7c876a",class:"field",part:"field"},this.label&&r("label",{key:"76f9cf451c6fba652494862a0fa05e320a4790c4",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&r("span",{key:"9f4a8074bc2ef06ae7256267bab07d9baf52dc2c",class:"required","aria-hidden":"true"},"*")),r("button",{key:"a5a15ff1c857e6f727bc43131741ee95ba345efd",id:"trigger","aria-label":g(this.el,this.label),part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",role:"combobox",disabled:this.disabled,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":t,onClick:()=>{if(!this.disabled)this.open=!this.open}},this.chips.length>0?r("span",{class:"chips"},this.chips.map((t=>r("span",{key:t,class:"chip",part:"chip"},t)))):r("span",{class:"placeholder"},this.placeholder),r("span",{key:"9b662f3899c243059b07b4ecc0166b74b97501cc",class:"chevron","aria-hidden":"true"},r("pf-icon",{key:"5a869e8d9d1aa023e57ed556afc613544f54424f",name:"chevron-down"}))),this.description&&r("p",{key:"d231f94ad697dc52d3115cf13c0b47f0b20045a6",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"dcc0995d743ea214575031de7225f0bce71aebb6",class:"error",part:"error",id:"error"},this.error)),r("div",{key:"c161c902c9859dd71dda4967dc4e074db29dd448",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-multiselectable":"true","aria-label":this.label??this.placeholder,style:this.maxVisibleOptions?{maxHeight:`calc(${this.maxVisibleOptions} * 36px)`,overflowY:"auto"}:undefined,onToggle:this.onToggle},r("slot",{key:"8fec52209e91211ba15d8c32f53d111b2058b76f",onSlotchange:this.onSlotChange})))}static get formAssociated(){return true}static get watchers(){return{name:[{syncFormState:0}],value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}static get style(){return x()}},[833,"pf-multi-select",{name:[513],value:[1537],open:[1540],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],maxVisibleOptions:[2,"max-visible-options"],chips:[32],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],refresh:[64]},[[0,"pfOptionSelect","handleOptionSelect"],[0,"keydown","handleKeyDown"]],{name:[{syncFormState:0}],value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function C(){if(typeof customElements==="undefined"){return}const e=["pf-multi-select","pf-icon"];e.forEach((e=>{switch(e){case"pf-multi-select":if(!customElements.get(t(e))){customElements.define(t(e),w)}break;case"pf-icon":if(!customElements.get(t(e))){y()}break}}))}C();const S=w;const O=C;export{S as PfMultiSelect,O as defineCustomElement};
 //# sourceMappingURL=pf-multi-select.js.map

package/dist/components/pf-multi-select.js.map

@@ -1 +1 @@
-{"version":3,"names":["pfMultiSelectCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfMultiSelect","__stencil_proxyCustomElement","HTMLElement","internals","name","value","open","label","description","error","placeholder","required","disabled","maxVisibleOptions","pfChange","pfOpenChange","chips","initialValue","stopObserving","activeOption","warnedAboutSeparator","componentWillLoad","this","syncFormState","syncOptions","componentDidRender","syncActiveDescendant","disconnectedCallback","values","length","setFormValue","data","FormData","append","applyControlValidity","chosen","labels","option","options","selected","includes","optionValue","find","candidate","push","textContent","trim","warnAboutSeparators","offenders","assertSeparableValues","map","o","console","warn","join","syncOpen","next","previous","showListbox","hideListbox","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","refresh","onSlotChange","parseValueList","Array","from","el","querySelectorAll","enabled","filter","hasAttribute","getAttribute","listbox","shadowRoot","querySelector","trigger","panel","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","width","minWidth","placePopover","undefined","style","first","setActive","hidePopover","onToggle","event","nowOpen","newState","focus","other","active","scrollIntoView","block","ariaActiveDescendantElement","toggle","toggleValueInList","formatValueList","handleOptionSelect","stopPropagation","detail","move","action","enabledIndexes","getEnabledIndexes","current","indexOf","resolveListMove","handleKeyDown","defaultPrevented","key","preventDefault","isActivationKey","render","describedBy","composeDescribedBy","h","Host","class","part","htmlFor","id","Boolean","type","role","onClick","chip","popover","maxHeight","overflowY","onSlotchange"],"sources":["src/components/pf-multi-select/pf-multi-select.css?tag=pf-multi-select&encapsulation=shadow","src/components/pf-multi-select/pf-multi-select.tsx"],"sourcesContent":["/*\n * The generic set pf-option reads, mapped to this control's own family — see\n * pf-option.css.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-multiselect-text);\n  --pf-option-text-disabled: var(--pf-multiselect-text-muted);\n  --pf-option-active-bg: var(--pf-multiselect-active-bg);\n  --pf-option-active-text: var(--pf-multiselect-active-text);\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-multiselect-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-multiselect-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-multiselect-bg);\n  border: 1px solid var(--pf-multiselect-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-multiselect-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-multiselect-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-multiselect-invalid-border);\n}\n\n.chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.chip {\n  background: var(--pf-multiselect-bg-subtle);\n  border-radius: var(--radius-sm);\n  font-size: var(--font-size-xs);\n  padding: 2px var(--space-2);\n}\n\n.placeholder {\n  color: var(--pf-multiselect-text-muted);\n}\n\n.chevron {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n  transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n\n.description {\n  color: var(--pf-multiselect-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-multiselect-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.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-multiselect-bg);\n  border: 1px solid var(--pf-multiselect-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  padding: var(--space-1);\n}\n\n.listbox:popover-open {\n  animation: pf-multi-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-multi-select-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .listbox:popover-open {\n    animation: none;\n  }\n}\n","import {\n  composeDescribedBy,\n  formatValueList,\n  getEnabledIndexes,\n  isActivationKey,\n  Keys,\n  observeAnchoredPosition,\n  parseValueList,\n  resolveListMove,\n  toggleValueInList,\n  assertSeparableValues,\n  type ListNavigationAction,\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  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n  [Keys.ArrowDown]: 'next',\n  [Keys.ArrowUp]: 'previous',\n  [Keys.Home]: 'first',\n  [Keys.End]: 'last',\n};\n\n/**\n * A form-associated multi-choice select over `pf-option` children.\n *\n * **It submits one entry per chosen value from a single control.**\n * `setFormValue` takes a `FormData`, and a key repeated in it is submitted\n * once per value — measured, and the same shape the React component gets from\n * rendering one hidden `<input>` per selection. So a server reads\n * `data.getAll(name)` exactly as it would from a native multiple select.\n *\n * `value` is one comma-separated string, because that is what an attribute can\n * carry; `pfChange` also reports the parsed `values` array, which is what a\n * framework consumer usually wants. A value containing a comma cannot survive\n * that, so one is reported on the console rather than silently mangled.\n *\n * Shares `pf-option` with `pf-select` and `pf-combobox` through the generic\n * `--pf-option-*` set.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the combobox button.\n * @part chip - each chosen value's chip in the trigger.\n * @part listbox - the floating listbox the options are slotted into.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-multi-select',\n  styleUrl: 'pf-multi-select.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfMultiSelect {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name, once per chosen value. Reflected. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen values, comma-separated. Reflected, so HTML can set it. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox 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 options';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Options to show before the listbox scrolls. */\n  @Prop() maxVisibleOptions?: number;\n\n  /** Fires when the chosen set changes, with both representations. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The labels of the chosen options, for the trigger's chips. */\n  @State() chips: string[] = [];\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n  private warnedAboutSeparator = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n    this.syncOptions();\n  }\n\n  componentDidRender() {\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\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 values = this.values();\n\n    if (values.length === 0 || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      // One entry per value under the one name, which `data.getAll(name)`\n      // reads back as an array.\n      const data = new FormData();\n      for (const value of values) data.append(this.name, value);\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, values.length > 0, this.required, this.error);\n  }\n\n  /** The value changed, so the children's `selected` and the chips follow. */\n  @Watch('value')\n  syncOptions() {\n    const chosen = this.values();\n    const labels: string[] = [];\n\n    for (const option of this.options()) {\n      const selected = chosen.includes(this.optionValue(option));\n      (option as HTMLElement & { selected: boolean }).selected = selected;\n    }\n\n    // Chips in the order they were chosen, not the options' order.\n    for (const value of chosen) {\n      const option = this.options().find((candidate) => this.optionValue(candidate) === value);\n      if (option) labels.push(option.textContent?.trim() ?? value);\n    }\n\n    this.chips = labels;\n    this.warnAboutSeparators();\n  }\n\n  /**\n   * One warning naming every offending value.\n   *\n   * A value holding a comma cannot round-trip through `value`, and failing\n   * silently would show the right chips over a wrong submission.\n   */\n  private warnAboutSeparators() {\n    if (this.warnedAboutSeparator) return;\n    const offenders = assertSeparableValues(this.options().map((o) => this.optionValue(o)));\n    if (offenders.length === 0) return;\n\n    this.warnedAboutSeparator = true;\n    console.warn(\n      `[pf-multi-select] option values cannot contain a comma, because \\`value\\` is a ` +\n        `comma-separated list: ${offenders.join(' ')}`,\n    );\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showListbox();\n    else this.hideListbox();\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  }\n\n  /** Re-reads the options, for a label edited in place. */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncOptions();\n  }\n\n  private onSlotChange = () => {\n    this.syncOptions();\n  };\n\n  private values(): string[] {\n    return parseValueList(this.value);\n  }\n\n  private options(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n  }\n\n  private enabled(): HTMLElement[] {\n    return this.options().filter((option) => !option.hasAttribute('disabled'));\n  }\n\n  /** The property, never the attribute: a binding may only have set the former. */\n  private optionValue(option: HTMLElement): string {\n    return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n  }\n\n  private get listbox() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private showListbox() {\n    const panel = this.listbox;\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      matchAnchorWidth: true,\n      flip: true,\n      onChange: ({ left, top, width, minWidth }) => {\n        placePopover(panel, left, top);\n        if (width !== undefined) panel.style.width = `${width}px`;\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    // Opens on the first chosen option, or the first selectable one.\n    const chosen = this.values();\n    const first =\n      this.options().find(\n        (option) => chosen.includes(this.optionValue(option)) && !option.hasAttribute('disabled'),\n      ) ?? this.enabled()[0];\n    this.setActive(first ?? null);\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.listbox;\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  private setActive(option: HTMLElement | null) {\n    for (const other of this.options()) {\n      if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n    }\n    if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n    this.activeOption = option;\n    this.syncActiveDescendant();\n    if (option && typeof option.scrollIntoView === 'function') {\n      option.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /** An element, not an IDREF: a cross-root IDREF resolves to nothing. */\n  private syncActiveDescendant() {\n    const trigger = this.trigger;\n    if (!trigger || !('ariaActiveDescendantElement' in trigger)) return;\n    (\n      trigger as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n  }\n\n  /**\n   * Toggles one value and keeps the listbox open — the difference from\n   * `pf-select`, and the whole point of a multi-choice control: closing after\n   * each pick would make choosing three things three round trips.\n   */\n  private toggle(option: HTMLElement) {\n    if (option.hasAttribute('disabled') || this.disabled) return;\n\n    const next = toggleValueInList(this.values(), this.optionValue(option));\n    this.value = formatValueList(next);\n    this.pfChange.emit({ value: this.value, values: next });\n  }\n\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.toggle(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const options = this.options();\n    const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));\n    const current = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const next = resolveListMove(action, enabledIndexes, current);\n    if (next !== -1) this.setActive(options[next] ?? null);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || event.defaultPrevented) return;\n\n    const move = MOVES[event.key];\n    if (move) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else this.move(move);\n      return;\n    }\n\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else if (this.activeOption) this.toggle(this.activeOption);\n    }\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\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            role=\"combobox\"\n            disabled={this.disabled}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the listbox, so this IDREF resolves. */\n            aria-controls=\"listbox\"\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            {this.chips.length > 0 ? (\n              <span class=\"chips\">\n                {this.chips.map((chip) => (\n                  <span key={chip} class=\"chip\" part=\"chip\">\n                    {chip}\n                  </span>\n                ))}\n              </span>\n            ) : (\n              <span class=\"placeholder\">{this.placeholder}</span>\n            )}\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\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=\"listbox\"\n          part=\"listbox\"\n          class=\"listbox\"\n          popover=\"auto\"\n          role=\"listbox\"\n          /* The one ARIA difference from pf-select, and the important one. */\n          aria-multiselectable=\"true\"\n          aria-label={this.label ?? this.placeholder}\n          style={\n            this.maxVisibleOptions\n              ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }\n              : undefined\n          }\n          onToggle={this.onToggle}\n        >\n          <slot onSlotchange={this.onSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["pfMultiSelectCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfMultiSelect","__stencil_proxyCustomElement","HTMLElement","internals","name","value","open","label","description","error","placeholder","required","disabled","maxVisibleOptions","pfChange","pfOpenChange","chips","initialValue","stopObserving","activeOption","warnedAboutSeparator","componentWillLoad","this","syncFormState","syncOptions","componentDidRender","syncActiveDescendant","disconnectedCallback","values","length","setFormValue","data","FormData","append","applyControlValidity","chosen","labels","option","options","selected","includes","optionValue","find","candidate","push","textContent","trim","warnAboutSeparators","offenders","assertSeparableValues","map","o","console","warn","join","syncOpen","next","previous","showListbox","hideListbox","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","refresh","onSlotChange","parseValueList","Array","from","el","querySelectorAll","enabled","filter","hasAttribute","getAttribute","listbox","shadowRoot","querySelector","trigger","panel","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","width","minWidth","placePopover","undefined","style","first","setActive","hidePopover","onToggle","event","nowOpen","newState","focus","other","active","scrollIntoView","block","ariaActiveDescendantElement","toggle","toggleValueInList","formatValueList","handleOptionSelect","stopPropagation","detail","move","action","enabledIndexes","getEnabledIndexes","current","indexOf","resolveListMove","handleKeyDown","defaultPrevented","key","preventDefault","isActivationKey","render","describedBy","composeDescribedBy","h","Host","class","part","htmlFor","id","controlAriaLabel","Boolean","type","role","onClick","chip","popover","maxHeight","overflowY","onSlotchange"],"sources":["src/components/pf-multi-select/pf-multi-select.css?tag=pf-multi-select&encapsulation=shadow","src/components/pf-multi-select/pf-multi-select.tsx"],"sourcesContent":["/*\n * The generic set pf-option reads, mapped to this control's own family — see\n * pf-option.css.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-multiselect-text);\n  --pf-option-text-disabled: var(--pf-multiselect-text-muted);\n  --pf-option-active-bg: var(--pf-multiselect-active-bg);\n  --pf-option-active-text: var(--pf-multiselect-active-text);\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-multiselect-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-multiselect-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-multiselect-bg);\n  border: 1px solid var(--pf-multiselect-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-multiselect-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-multiselect-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-multiselect-invalid-border);\n}\n\n.chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.chip {\n  background: var(--pf-multiselect-bg-subtle);\n  border-radius: var(--radius-sm);\n  font-size: var(--font-size-xs);\n  padding: 2px var(--space-2);\n}\n\n.placeholder {\n  color: var(--pf-multiselect-text-muted);\n}\n\n.chevron {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n  transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n\n.description {\n  color: var(--pf-multiselect-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-multiselect-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.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-multiselect-bg);\n  border: 1px solid var(--pf-multiselect-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  padding: var(--space-1);\n}\n\n.listbox:popover-open {\n  animation: pf-multi-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-multi-select-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .listbox:popover-open {\n    animation: none;\n  }\n}\n","import {\n  composeDescribedBy,\n  formatValueList,\n  getEnabledIndexes,\n  isActivationKey,\n  Keys,\n  observeAnchoredPosition,\n  parseValueList,\n  resolveListMove,\n  toggleValueInList,\n  assertSeparableValues,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n  [Keys.ArrowDown]: 'next',\n  [Keys.ArrowUp]: 'previous',\n  [Keys.Home]: 'first',\n  [Keys.End]: 'last',\n};\n\n/**\n * A form-associated multi-choice select over `pf-option` children.\n *\n * **It submits one entry per chosen value from a single control.**\n * `setFormValue` takes a `FormData`, and a key repeated in it is submitted\n * once per value — measured, and the same shape the React component gets from\n * rendering one hidden `<input>` per selection. So a server reads\n * `data.getAll(name)` exactly as it would from a native multiple select.\n *\n * `value` is one comma-separated string, because that is what an attribute can\n * carry; `pfChange` also reports the parsed `values` array, which is what a\n * framework consumer usually wants. A value containing a comma cannot survive\n * that, so one is reported on the console rather than silently mangled.\n *\n * Shares `pf-option` with `pf-select` and `pf-combobox` through the generic\n * `--pf-option-*` set.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the combobox button.\n * @part chip - each chosen value's chip in the trigger.\n * @part listbox - the floating listbox the options are slotted into.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-multi-select',\n  styleUrl: 'pf-multi-select.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfMultiSelect {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name, once per chosen value. Reflected. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen values, comma-separated. Reflected, so HTML can set it. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox 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 options';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Options to show before the listbox scrolls. */\n  @Prop() maxVisibleOptions?: number;\n\n  /** Fires when the chosen set changes, with both representations. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The labels of the chosen options, for the trigger's chips. */\n  @State() chips: string[] = [];\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n  private warnedAboutSeparator = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n    this.syncOptions();\n  }\n\n  componentDidRender() {\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\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 values = this.values();\n\n    if (values.length === 0 || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      // One entry per value under the one name, which `data.getAll(name)`\n      // reads back as an array.\n      const data = new FormData();\n      for (const value of values) data.append(this.name, value);\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, values.length > 0, this.required, this.error);\n  }\n\n  /** The value changed, so the children's `selected` and the chips follow. */\n  @Watch('value')\n  syncOptions() {\n    const chosen = this.values();\n    const labels: string[] = [];\n\n    for (const option of this.options()) {\n      const selected = chosen.includes(this.optionValue(option));\n      (option as HTMLElement & { selected: boolean }).selected = selected;\n    }\n\n    // Chips in the order they were chosen, not the options' order.\n    for (const value of chosen) {\n      const option = this.options().find((candidate) => this.optionValue(candidate) === value);\n      if (option) labels.push(option.textContent?.trim() ?? value);\n    }\n\n    this.chips = labels;\n    this.warnAboutSeparators();\n  }\n\n  /**\n   * One warning naming every offending value.\n   *\n   * A value holding a comma cannot round-trip through `value`, and failing\n   * silently would show the right chips over a wrong submission.\n   */\n  private warnAboutSeparators() {\n    if (this.warnedAboutSeparator) return;\n    const offenders = assertSeparableValues(this.options().map((o) => this.optionValue(o)));\n    if (offenders.length === 0) return;\n\n    this.warnedAboutSeparator = true;\n    console.warn(\n      `[pf-multi-select] option values cannot contain a comma, because \\`value\\` is a ` +\n        `comma-separated list: ${offenders.join(' ')}`,\n    );\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showListbox();\n    else this.hideListbox();\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  }\n\n  /** Re-reads the options, for a label edited in place. */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncOptions();\n  }\n\n  private onSlotChange = () => {\n    this.syncOptions();\n  };\n\n  private values(): string[] {\n    return parseValueList(this.value);\n  }\n\n  private options(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n  }\n\n  private enabled(): HTMLElement[] {\n    return this.options().filter((option) => !option.hasAttribute('disabled'));\n  }\n\n  /** The property, never the attribute: a binding may only have set the former. */\n  private optionValue(option: HTMLElement): string {\n    return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n  }\n\n  private get listbox() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private showListbox() {\n    const panel = this.listbox;\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      matchAnchorWidth: true,\n      flip: true,\n      onChange: ({ left, top, width, minWidth }) => {\n        placePopover(panel, left, top);\n        if (width !== undefined) panel.style.width = `${width}px`;\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    // Opens on the first chosen option, or the first selectable one.\n    const chosen = this.values();\n    const first =\n      this.options().find(\n        (option) => chosen.includes(this.optionValue(option)) && !option.hasAttribute('disabled'),\n      ) ?? this.enabled()[0];\n    this.setActive(first ?? null);\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.listbox;\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  private setActive(option: HTMLElement | null) {\n    for (const other of this.options()) {\n      if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n    }\n    if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n    this.activeOption = option;\n    this.syncActiveDescendant();\n    if (option && typeof option.scrollIntoView === 'function') {\n      option.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /** An element, not an IDREF: a cross-root IDREF resolves to nothing. */\n  private syncActiveDescendant() {\n    const trigger = this.trigger;\n    if (!trigger || !('ariaActiveDescendantElement' in trigger)) return;\n    (\n      trigger as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n  }\n\n  /**\n   * Toggles one value and keeps the listbox open — the difference from\n   * `pf-select`, and the whole point of a multi-choice control: closing after\n   * each pick would make choosing three things three round trips.\n   */\n  private toggle(option: HTMLElement) {\n    if (option.hasAttribute('disabled') || this.disabled) return;\n\n    const next = toggleValueInList(this.values(), this.optionValue(option));\n    this.value = formatValueList(next);\n    this.pfChange.emit({ value: this.value, values: next });\n  }\n\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.toggle(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const options = this.options();\n    const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));\n    const current = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const next = resolveListMove(action, enabledIndexes, current);\n    if (next !== -1) this.setActive(options[next] ?? null);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || event.defaultPrevented) return;\n\n    const move = MOVES[event.key];\n    if (move) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else this.move(move);\n      return;\n    }\n\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      if (!this.open) this.open = true;\n      else if (this.activeOption) this.toggle(this.activeOption);\n    }\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\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            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"trigger\"\n            class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n            type=\"button\"\n            role=\"combobox\"\n            disabled={this.disabled}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the listbox, so this IDREF resolves. */\n            aria-controls=\"listbox\"\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            {this.chips.length > 0 ? (\n              <span class=\"chips\">\n                {this.chips.map((chip) => (\n                  <span key={chip} class=\"chip\" part=\"chip\">\n                    {chip}\n                  </span>\n                ))}\n              </span>\n            ) : (\n              <span class=\"placeholder\">{this.placeholder}</span>\n            )}\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\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=\"listbox\"\n          part=\"listbox\"\n          class=\"listbox\"\n          popover=\"auto\"\n          role=\"listbox\"\n          /* The one ARIA difference from pf-select, and the important one. */\n          aria-multiselectable=\"true\"\n          aria-label={this.label ?? this.placeholder}\n          style={\n            this.maxVisibleOptions\n              ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }\n              : undefined\n          }\n          onToggle={this.onToggle}\n        >\n          <slot onSlotchange={this.onSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{t as e,p as t,H as a,h as n,a as r}from"./index.js";const i=()=>`:host{display:block}:host([hidden]){display:none}:host([orientation='horizontal']){flex:0 0 auto}.link{align-items:center;background:transparent;border:0;border-radius:var(--pf-nav-item-radius, var(--radius-sm));color:var(--pf-nav-item-text);cursor:pointer;display:flex;font:inherit;gap:var(--pf-nav-item-gap, var(--space-2));min-height:var(--pf-nav-item-min-height, 32px);padding:var(--pf-nav-item-padding, 0 var(--space-2));text-decoration:none;white-space:nowrap}:host([orientation='vertical']) .link{min-height:var(--pf-nav-item-vertical-min-height, 36px);padding:var(--pf-nav-item-vertical-padding, 0 var(--space-3));width:100%}.link:hover{background:var(--pf-nav-item-hover-bg);color:var(--pf-nav-item-hover-text)}a.link:focus-visible{box-shadow:var(--pf-nav-item-focus-ring, var(--pf-focus-ring));outline:none}:host([current-page]) .link{background:var(--pf-nav-item-current-bg);color:var(--pf-nav-item-current-text);font-weight:var(--font-weight-semibold)}:host([disabled]) .link{cursor:not-allowed;opacity:var(--pf-nav-item-disabled-opacity, 0.5)}:host([disabled]) .link:hover{background:transparent;color:var(--pf-nav-item-text)}.label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}:host([orientation='horizontal']) .label{flex:0 0 auto}::slotted([slot='icon']){color:inherit;flex:0 0 auto}::slotted([slot='badge']){flex:0 0 auto}::slotted(a),::slotted(button){align-items:center;align-self:stretch;background:none;border:0;color:inherit;cursor:inherit;display:flex;flex:1 1 auto;font:inherit;margin:0;padding:0;text-decoration:none}`;const o=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}href;target;rel;current=false;currentPage=false;disabled=false;orientation="horizontal";render(){const e=[n("slot",{key:"35769e4f7edb3524591111fd8c78eca5a6ae5e76",name:"icon"}),n("span",{key:"201e0efd80af4ec26fde67d5c90fbf47d2f8f16f",class:"label",part:"label"},n("slot",{key:"bf2ada457257d25f3a054beb41133e872585a26b"})),n("slot",{key:"c807ea3208d83e9f205392aa655a35e211c75e3e",name:"badge"})];return n(r,{key:"ad28038cf786d9c8431e1da725305cceacac5a15",role:"listitem"},this.href&&!this.disabled?n("a",{class:"link",part:"link",href:this.href,target:this.target,rel:this.rel,"aria-current":this.currentPage?"page":null},e):n("span",{class:"link",part:"link","aria-current":this.currentPage?"page":null,"aria-disabled":this.disabled?"true":null},e))}static get style(){return i()}},[769,"pf-nav-item",{href:[513],target:[1],rel:[1],current:[516],currentPage:[1540,"current-page"],disabled:[516],orientation:[1537]}]);function s(){if(typeof customElements==="undefined"){return}const t=["pf-nav-item"];t.forEach((t=>{switch(t){case"pf-nav-item":if(!customElements.get(e(t))){customElements.define(e(t),o)}break}}))}s();const l=o;const c=s;export{l as PfNavItem,c as defineCustomElement};
+import{t as e,p as t,H as a,c as r,h as n,a as i}from"./index.js";const o=()=>`:host{display:block}:host([hidden]){display:none}:host([orientation='horizontal']){flex:0 0 auto}.link{align-items:center;background:transparent;border:0;border-radius:var(--pf-nav-item-radius, var(--radius-sm));color:var(--pf-nav-item-text);cursor:pointer;display:flex;font:inherit;gap:var(--pf-nav-item-gap, var(--space-2));min-height:var(--pf-nav-item-min-height, 32px);padding:var(--pf-nav-item-padding, 0 var(--space-2));text-decoration:none;white-space:nowrap}:host([orientation='vertical']) .link{min-height:var(--pf-nav-item-vertical-min-height, 36px);padding:var(--pf-nav-item-vertical-padding, 0 var(--space-3));width:100%}.link:hover{background:var(--pf-nav-item-hover-bg);color:var(--pf-nav-item-hover-text)}a.link:focus-visible{box-shadow:var(--pf-nav-item-focus-ring, var(--pf-focus-ring));outline:none}:host([current-page]) .link{background:var(--pf-nav-item-current-bg);color:var(--pf-nav-item-current-text);font-weight:var(--font-weight-semibold)}:host([disabled]) .link{cursor:not-allowed;opacity:var(--pf-nav-item-disabled-opacity, 0.5)}:host([disabled]) .link:hover{background:transparent;color:var(--pf-nav-item-text)}.label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}:host([orientation='horizontal']) .label{flex:0 0 auto}::slotted([slot='icon']){color:inherit;flex:0 0 auto}::slotted([slot='badge']){flex:0 0 auto}::slotted(a),::slotted(button){align-items:center;align-self:stretch;background:none;border:0;color:inherit;cursor:inherit;display:flex;flex:1 1 auto;font:inherit;margin:0;padding:0;text-decoration:none}`;const s=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfNavStructure=r(this,"pfNavStructure")}href;target;rel;current=false;pfNavStructure;handleCurrentChange(){this.pfNavStructure.emit()}currentPage=false;disabled=false;orientation="horizontal";render(){const e=[n("slot",{key:"b478a66b7ae6c6d00b18f762600435dbac37996d",name:"icon"}),n("span",{key:"4b1ddbe87804c604d492b00bbc743299c54f7240",class:"label",part:"label"},n("slot",{key:"86778db42fef8af44096211cd8a743155dca3fb0"})),n("slot",{key:"02fef2701ef217701ce18e71e9ff873dc3bd3a44",name:"badge"})];return n(i,{key:"c4ee7f6245eedd2bf0546ebcb987120212ea18e3",role:"listitem"},this.href&&!this.disabled?n("a",{class:"link",part:"link",href:this.href,target:this.target,rel:this.rel,"aria-current":this.currentPage?"page":null},e):n("span",{class:"link",part:"link","aria-current":this.currentPage?"page":null,"aria-disabled":this.disabled?"true":null},e))}static get watchers(){return{current:[{handleCurrentChange:0}]}}static get style(){return o()}},[769,"pf-nav-item",{href:[513],target:[1],rel:[1],current:[516],currentPage:[1540,"current-page"],disabled:[516],orientation:[1537]},undefined,{current:[{handleCurrentChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-nav-item"];t.forEach((t=>{switch(t){case"pf-nav-item":if(!customElements.get(e(t))){customElements.define(e(t),s)}break}}))}l();const c=s;const d=l;export{c as PfNavItem,d as defineCustomElement};
 //# sourceMappingURL=pf-nav-item.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["pfNavItemCss","PfNavItem","__stencil_proxyCustomElement","HTMLElement","href","target","rel","current","currentPage","disabled","orientation","render","content","h","key","name","class","part","Host","role","this"],"sources":["src/components/pf-nav-item/pf-nav-item.css?tag=pf-nav-item&encapsulation=shadow","src/components/pf-nav-item/pf-nav-item.tsx"],"sourcesContent":["/*\n * This element is shared by pf-header-navigation and pf-sidebar-navigation,\n * whose React counterparts have separate alias families with their own\n * values. Rather than pick one and diverge from the other, the item reads a\n * generic `--pf-nav-item-*` set that each navigation defines on itself --\n * custom properties inherit through the shadow boundary, so a slotted item\n * picks up whichever navigation it is inside, which no selector can do\n * (`:host-context` is not in Firefox). Exactly the pf-option arrangement, for\n * the same reason. There is deliberately no `:root` default: without one the\n * bridge is load-bearing, and a missing one shows up as an item with no\n * colours at all rather than as one that quietly looks right.\n */\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex: 0 0 auto;\n}\n\n.link {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pf-nav-item-radius, var(--radius-sm));\n  color: var(--pf-nav-item-text);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  gap: var(--pf-nav-item-gap, var(--space-2));\n  min-height: var(--pf-nav-item-min-height, 32px);\n  padding: var(--pf-nav-item-padding, 0 var(--space-2));\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n:host([orientation='vertical']) .link {\n  min-height: var(--pf-nav-item-vertical-min-height, 36px);\n  padding: var(--pf-nav-item-vertical-padding, 0 var(--space-3));\n  width: 100%;\n}\n\n.link:hover {\n  background: var(--pf-nav-item-hover-bg);\n  color: var(--pf-nav-item-hover-text);\n}\n\na.link:focus-visible {\n  box-shadow: var(--pf-nav-item-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n/*\n * `current-page` is the group's answer, not the consumer's `current` ask: the\n * highlight and the announcement are the same decision, so they read the same\n * attribute.\n */\n:host([current-page]) .link {\n  background: var(--pf-nav-item-current-bg);\n  color: var(--pf-nav-item-current-text);\n  font-weight: var(--font-weight-semibold);\n}\n\n:host([disabled]) .link {\n  cursor: not-allowed;\n  opacity: var(--pf-nav-item-disabled-opacity, 0.5);\n}\n\n:host([disabled]) .link:hover {\n  background: transparent;\n  color: var(--pf-nav-item-text);\n}\n\n/* The label takes the slack so a badge sits at the far edge of a sidebar. */\n.label {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([orientation='horizontal']) .label {\n  flex: 0 0 auto;\n}\n\n/*\n * No wrapper around the icon and badge slots: an unassigned slot is\n * `display: contents` and generates nothing, while a wrapper around one\n * cannot be collapsed from CSS and would cost a gap in front of every label\n * with no icon.\n */\n::slotted([slot='icon']) {\n  color: inherit;\n  flex: 0 0 auto;\n}\n\n::slotted([slot='badge']) {\n  flex: 0 0 auto;\n}\n\n/*\n * A consumer's own router link, slotted in with no `href` of ours. It fills\n * the box's content area rather than being a word inside it, and it inherits\n * every colour the box resolved, so hover and the current page look the same\n * whichever of the two is the control.\n */\n::slotted(a),\n::slotted(button) {\n  align-items: center;\n  align-self: stretch;\n  background: none;\n  border: 0;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  flex: 1 1 auto;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.\n *\n * Shared by both, because the React library's `HeaderNavigationItem` and\n * `SidebarNavigationItem` are the same shape — one element rather than two\n * that would drift. What differs is the layout, and that is the group's to\n * say: it pushes `orientation` down, which is the only thing an item cannot\n * work out for itself.\n *\n * With an `href` it renders a link; without one it renders a plain box, which\n * is how a framework's own router is used — slot an `<a routerLink>` or a\n * `<Link>` in and leave `href` unset.\n *\n * `currentPage` and `orientation` are the group's to set. A consumer asks by\n * setting `current`; the group resolves every item with core's rule and\n * writes the answer to `currentPage`.\n *\n * @slot - the item's label.\n * @slot icon - a leading icon.\n * @slot badge - a trailing badge or count.\n * @part link - the link, or the box standing in for one.\n */\n@Component({\n  tag: 'pf-nav-item',\n  styleUrl: 'pf-nav-item.css',\n  shadow: true,\n})\nexport class PfNavItem {\n  /** Where the item goes. Reflected; a consumer's stylesheet reads it. */\n  @Prop({ reflect: true }) href?: string;\n\n  /** Opens elsewhere, as on a plain anchor. Ignored without an `href`. */\n  @Prop() target?: string;\n\n  /** Goes on the anchor as-is. Ignored without an `href`. */\n  @Prop() rel?: string;\n\n  /**\n   * Set it to mark this item as the current page.\n   *\n   * The *asking* half, which the group never writes — `currentPage` below is\n   * the answer. The two are kept apart for the reason `pf-breadcrumb` keeps\n   * them apart: a group that wrote its answer back would leave the mark\n   * behind on an item the consumer had not marked.\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\"`. At most one item in a navigation carries\n   * it, and the highlight follows it rather than `current` — a second\n   * highlighted item with no `aria-current` would be a sighted-only lie.\n   */\n  @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n  /**\n   * Takes the item out of the navigation without removing it.\n   *\n   * A disabled item renders **no anchor at all**, because an anchor has no\n   * disabled state: `aria-disabled` alone leaves it focusable and clickable,\n   * and dropping the `href` is the only thing that really takes it out of the\n   * tab order.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the group, which is the only one that knows which it is. */\n  @Prop({ mutable: true, reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    const content = [\n      <slot name=\"icon\" />,\n      <span class=\"label\" part=\"label\">\n        <slot />\n      </span>,\n      <slot name=\"badge\" />,\n    ];\n\n    return (\n      <Host role=\"listitem\">\n        {this.href && !this.disabled ? (\n          <a\n            class=\"link\"\n            part=\"link\"\n            href={this.href}\n            target={this.target}\n            rel={this.rel}\n            aria-current={this.currentPage ? 'page' : null}\n          >\n            {content}\n          </a>\n        ) : (\n          <span\n            class=\"link\"\n            part=\"link\"\n            aria-current={this.currentPage ? 'page' : null}\n            aria-disabled={this.disabled ? 'true' : null}\n          >\n            {content}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAe,IAAM,6hD,MC6BdC,EAASC,EAAA,MAAAD,UAAAE,E,iFAEKC,KAGjBC,OAGAC,IAUiBC,QAAU,MAQKC,YAAc,MAU7BC,SAAW,MAGIC,YAAyC,aAEjF,MAAAC,GACE,MAAMC,EAAU,CACdC,EAAA,QAAAC,IAAA,2CAAMC,KAAK,SACXF,EAAA,QAAAC,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACvBJ,EAAA,QAAAC,IAAA,8CAEFD,EAAA,QAAAC,IAAA,2CAAMC,KAAK,WAGb,OACEF,EAACK,EAAI,CAAAJ,IAAA,2CAACK,KAAK,YACRC,KAAKhB,OAASgB,KAAKX,SAClBI,EAAA,KACEG,MAAM,OACNC,KAAK,OACLb,KAAMgB,KAAKhB,KACXC,OAAQe,KAAKf,OACbC,IAAKc,KAAKd,IAAG,eACCc,KAAKZ,YAAc,OAAS,MAEzCI,GAGHC,EAAA,QACEG,MAAM,OACNC,KAAK,OAAM,eACGG,KAAKZ,YAAc,OAAS,KAAI,gBAC/BY,KAAKX,SAAW,OAAS,MAEvCG,G","ignoreList":[]}
+{"version":3,"names":["pfNavItemCss","PfNavItem","__stencil_proxyCustomElement","HTMLElement","href","target","rel","current","pfNavStructure","handleCurrentChange","this","emit","currentPage","disabled","orientation","render","content","h","key","name","class","part","Host","role"],"sources":["src/components/pf-nav-item/pf-nav-item.css?tag=pf-nav-item&encapsulation=shadow","src/components/pf-nav-item/pf-nav-item.tsx"],"sourcesContent":["/*\n * This element is shared by pf-header-navigation and pf-sidebar-navigation,\n * whose React counterparts have separate alias families with their own\n * values. Rather than pick one and diverge from the other, the item reads a\n * generic `--pf-nav-item-*` set that each navigation defines on itself --\n * custom properties inherit through the shadow boundary, so a slotted item\n * picks up whichever navigation it is inside, which no selector can do\n * (`:host-context` is not in Firefox). Exactly the pf-option arrangement, for\n * the same reason. There is deliberately no `:root` default: without one the\n * bridge is load-bearing, and a missing one shows up as an item with no\n * colours at all rather than as one that quietly looks right.\n */\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex: 0 0 auto;\n}\n\n.link {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pf-nav-item-radius, var(--radius-sm));\n  color: var(--pf-nav-item-text);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  gap: var(--pf-nav-item-gap, var(--space-2));\n  min-height: var(--pf-nav-item-min-height, 32px);\n  padding: var(--pf-nav-item-padding, 0 var(--space-2));\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n:host([orientation='vertical']) .link {\n  min-height: var(--pf-nav-item-vertical-min-height, 36px);\n  padding: var(--pf-nav-item-vertical-padding, 0 var(--space-3));\n  width: 100%;\n}\n\n.link:hover {\n  background: var(--pf-nav-item-hover-bg);\n  color: var(--pf-nav-item-hover-text);\n}\n\na.link:focus-visible {\n  box-shadow: var(--pf-nav-item-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n/*\n * `current-page` is the group's answer, not the consumer's `current` ask: the\n * highlight and the announcement are the same decision, so they read the same\n * attribute.\n */\n:host([current-page]) .link {\n  background: var(--pf-nav-item-current-bg);\n  color: var(--pf-nav-item-current-text);\n  font-weight: var(--font-weight-semibold);\n}\n\n:host([disabled]) .link {\n  cursor: not-allowed;\n  opacity: var(--pf-nav-item-disabled-opacity, 0.5);\n}\n\n:host([disabled]) .link:hover {\n  background: transparent;\n  color: var(--pf-nav-item-text);\n}\n\n/* The label takes the slack so a badge sits at the far edge of a sidebar. */\n.label {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([orientation='horizontal']) .label {\n  flex: 0 0 auto;\n}\n\n/*\n * No wrapper around the icon and badge slots: an unassigned slot is\n * `display: contents` and generates nothing, while a wrapper around one\n * cannot be collapsed from CSS and would cost a gap in front of every label\n * with no icon.\n */\n::slotted([slot='icon']) {\n  color: inherit;\n  flex: 0 0 auto;\n}\n\n::slotted([slot='badge']) {\n  flex: 0 0 auto;\n}\n\n/*\n * A consumer's own router link, slotted in with no `href` of ours. It fills\n * the box's content area rather than being a word inside it, and it inherits\n * every colour the box resolved, so hover and the current page look the same\n * whichever of the two is the control.\n */\n::slotted(a),\n::slotted(button) {\n  align-items: center;\n  align-self: stretch;\n  background: none;\n  border: 0;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  flex: 1 1 auto;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.\n *\n * Shared by both, because the React library's `HeaderNavigationItem` and\n * `SidebarNavigationItem` are the same shape — one element rather than two\n * that would drift. What differs is the layout, and that is the group's to\n * say: it pushes `orientation` down, which is the only thing an item cannot\n * work out for itself.\n *\n * With an `href` it renders a link; without one it renders a plain box, which\n * is how a framework's own router is used — slot an `<a routerLink>` or a\n * `<Link>` in and leave `href` unset.\n *\n * `currentPage` and `orientation` are the group's to set. A consumer asks by\n * setting `current`; the group resolves every item with core's rule and\n * writes the answer to `currentPage`. Changing the ask tells the group, so\n * the answer follows a framework's re-render without the consumer calling\n * anything.\n *\n * @slot - the item's label.\n * @slot icon - a leading icon.\n * @slot badge - a trailing badge or count.\n * @part link - the link, or the box standing in for one.\n */\n@Component({\n  tag: 'pf-nav-item',\n  styleUrl: 'pf-nav-item.css',\n  shadow: true,\n})\nexport class PfNavItem {\n  /** Where the item goes. Reflected; a consumer's stylesheet reads it. */\n  @Prop({ reflect: true }) href?: string;\n\n  /** Opens elsewhere, as on a plain anchor. Ignored without an `href`. */\n  @Prop() target?: string;\n\n  /** Goes on the anchor as-is. Ignored without an `href`. */\n  @Prop() rel?: string;\n\n  /**\n   * Set it to mark this item as the current page.\n   *\n   * The *asking* half, which the group never writes — `currentPage` below is\n   * the answer. The two are kept apart for the reason `pf-breadcrumb` keeps\n   * them apart: a group that wrote its answer back would leave the mark\n   * behind on an item the consumer had not marked.\n   */\n  @Prop({ reflect: true }) current = false;\n\n  /**\n   * Tells the group the ask changed, so it can resolve again.\n   *\n   * The same event `pf-nav-section` emits when its items move, because the\n   * groups do the same thing with both: re-read every item and resolve the\n   * one current page. Without this a navigation resolves at load and never\n   * again for a consumer who marks items through the *property*, which is\n   * every framework consumer — the generated bindings set props as\n   * properties, so there is no attribute change and no `slotchange` either.\n   * The symptom is a navigation whose highlight never moves while the router\n   * works perfectly, which is what porting `apps/demo` ran into.\n   *\n   * `current` only. Watching `currentPage` would loop, since that is what the\n   * group writes back.\n   */\n  @Event() pfNavStructure!: EventEmitter<void>;\n\n  @Watch('current')\n  handleCurrentChange() {\n    this.pfNavStructure.emit();\n  }\n\n  /**\n   * Set by the group: the resolved current page, which is the one thing that\n   * renders `aria-current=\"page\"`. At most one item in a navigation carries\n   * it, and the highlight follows it rather than `current` — a second\n   * highlighted item with no `aria-current` would be a sighted-only lie.\n   */\n  @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n  /**\n   * Takes the item out of the navigation without removing it.\n   *\n   * A disabled item renders **no anchor at all**, because an anchor has no\n   * disabled state: `aria-disabled` alone leaves it focusable and clickable,\n   * and dropping the `href` is the only thing that really takes it out of the\n   * tab order.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the group, which is the only one that knows which it is. */\n  @Prop({ mutable: true, reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    const content = [\n      <slot name=\"icon\" />,\n      <span class=\"label\" part=\"label\">\n        <slot />\n      </span>,\n      <slot name=\"badge\" />,\n    ];\n\n    return (\n      <Host role=\"listitem\">\n        {this.href && !this.disabled ? (\n          <a\n            class=\"link\"\n            part=\"link\"\n            href={this.href}\n            target={this.target}\n            rel={this.rel}\n            aria-current={this.currentPage ? 'page' : null}\n          >\n            {content}\n          </a>\n        ) : (\n          <span\n            class=\"link\"\n            part=\"link\"\n            aria-current={this.currentPage ? 'page' : null}\n            aria-disabled={this.disabled ? 'true' : null}\n          >\n            {content}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAe,IAAM,6hD,MC+BdC,EAASC,EAAA,MAAAD,UAAAE,E,8HAEKC,KAGjBC,OAGAC,IAUiBC,QAAU,MAiB1BC,eAGT,mBAAAC,GACEC,KAAKF,eAAeG,M,CASkBC,YAAc,MAU7BC,SAAW,MAGIC,YAAyC,aAEjF,MAAAC,GACE,MAAMC,EAAU,CACdC,EAAA,QAAAC,IAAA,2CAAMC,KAAK,SACXF,EAAA,QAAAC,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACvBJ,EAAA,QAAAC,IAAA,8CAEFD,EAAA,QAAAC,IAAA,2CAAMC,KAAK,WAGb,OACEF,EAACK,EAAI,CAAAJ,IAAA,2CAACK,KAAK,YACRb,KAAKN,OAASM,KAAKG,SAClBI,EAAA,KACEG,MAAM,OACNC,KAAK,OACLjB,KAAMM,KAAKN,KACXC,OAAQK,KAAKL,OACbC,IAAKI,KAAKJ,IAAG,eACCI,KAAKE,YAAc,OAAS,MAEzCI,GAGHC,EAAA,QACEG,MAAM,OACNC,KAAK,OAAM,eACGX,KAAKE,YAAc,OAAS,KAAI,gBAC/BF,KAAKG,SAAW,OAAS,MAEvCG,G","ignoreList":[]}

package/dist/components/pf-number-input.js

@@ -1,2 +1,2 @@
-import{t as e,p as t,H as r,c as i,h as n,a as s}from"./index.js";import{c as a}from"./p-DfpCerXM.js";import{K as o}from"./p-g4FlTDZx.js";import{p as l,r as d,s as c,f as u,c as p}from"./p-DSXauhXX.js";import{a as f}from"./p-Cr6IXrUk.js";import{d as h}from"./p-CkFjPRTe.js";const b=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-numberinput-field-label, 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)}.control{align-items:stretch;background:var(--pf-numberinput-bg);border:1px solid var(--pf-numberinput-border);border-radius:var(--radius-md);display:inline-flex;min-height:40px;overflow:hidden;transition:border var(--pf-transition-fast),     box-shadow var(--pf-transition-fast);width:100%}.control:focus-within{border-color:var(--pf-numberinput-focus-border);box-shadow:var(--pf-numberinput-focus-ring, var(--pf-focus-ring))}.control--invalid{border-color:var(--pf-numberinput-invalid-border)}:host([disabled]) .control{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);opacity:0.6}.input{background:transparent;border:none;color:var(--pf-numberinput-text);flex:1;font:inherit;min-width:0;outline:none;padding:0 var(--space-3);text-align:center;width:100%}.input::placeholder{color:var(--pf-numberinput-placeholder)}.input:disabled{cursor:not-allowed}.step{align-items:center;align-self:stretch;background:var(--pf-numberinput-step-bg);border:none;color:var(--pf-numberinput-step-text);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:0;transition:background var(--pf-transition-fast),     color var(--pf-transition-fast);width:40px}.step:hover:not(:disabled){background:var(--pf-numberinput-step-hover-bg);color:var(--pf-numberinput-step-hover-text)}.step:disabled{cursor:not-allowed;opacity:0.45}[part='decrement']{border-inline-end:1px solid var(--pf-numberinput-border)}[part='increment']{border-inline-start:1px solid var(--pf-numberinput-border)}.step pf-icon{font-size:16px}.description{color:var(--pf-numberinput-field-description, 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}@media (prefers-reduced-motion: reduce){.control,.step{transition:none}}`;const m=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";min;max;step=1;label;description;error;placeholder;required=false;disabled=false;decrementLabel="Decrease";incrementLabel="Increase";pfChange;draft=null;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");f(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.draft=null}async stepBy(e){this.step_(e)}get bounds(){return{min:this.min===undefined?-Infinity:Number(this.min),max:this.max===undefined?Infinity:Number(this.max),step:Number(this.step)||1}}get current(){return l(this.value)}get atMin(){const{min:e}=this.bounds;return this.current!==null&&this.current<=e}get atMax(){const{max:e}=this.bounds;return this.current!==null&&this.current>=e}commit(e){const{min:t,max:r,step:i}=this.bounds;const n=e===null?"":String(d(p(e,t,r),i));if(n===this.value)return;this.value=n;this.pfChange.emit({value:n,number:l(n)})}step_(e){if(this.disabled)return;this.draft=null;this.commit(c(this.current,e,this.bounds))}onInput=e=>{const t=e.target.value;this.draft=t;const r=l(t);if(t.trim()===""){this.commit(null);return}if(r!==null)this.commit(r)};onBlur=()=>{this.draft=null};onKeyDown=e=>{if(this.disabled)return;const{min:t,max:r}=this.bounds;if(e.key===o.ArrowUp){e.preventDefault();this.step_(1)}else if(e.key===o.ArrowDown){e.preventDefault();this.step_(-1)}else if(e.key===o.Home&&Number.isFinite(t)){e.preventDefault();this.draft=null;this.commit(t)}else if(e.key===o.End&&Number.isFinite(r)){e.preventDefault();this.draft=null;this.commit(r)}};render(){const e=a(this.description&&"description",this.error&&"error");const{min:t,max:r}=this.bounds;const i=this.draft??u(this.current);return n(s,{key:"b873ad5d26191b9589a3f67432f911f57a3db2cc"},n("div",{key:"1fe3503ee61589e6cd9ebe683c937665b934fc8e",class:"field",part:"field"},this.label&&n("label",{key:"7d9da068ca611a068b89e5292238852f2d40ba53",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&n("span",{key:"bfb6e221092438b3ccef19dfe811767f4d2f3a5d",class:"required","aria-hidden":"true"},"*")),n("div",{key:"7bb8c35312b4d30e1b09fefa78f752c6791a34f9",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},n("button",{key:"ff991dc6a65ca1fc5984e5b260b7b9c77def5d49",type:"button",class:"step",part:"decrement","aria-label":this.decrementLabel,disabled:this.disabled||this.atMin,tabindex:"-1",onMouseDown:e=>e.preventDefault(),onClick:()=>this.step_(-1)},n("pf-icon",{key:"4d65e8eda2958a1e9a7308a3b23f2f3bcf9083cf",name:"minus","aria-hidden":"true"})),n("input",{key:"4a7db9fb97f9cdf12c4228ff47079f2cecadf7d8",id:"input",part:"input",class:"input",type:"text",inputMode:"decimal",role:"spinbutton",name:this.name,value:i,placeholder:this.placeholder,required:this.required,disabled:this.disabled,autocomplete:"off","aria-invalid":this.error?"true":null,"aria-describedby":e,"aria-valuenow":this.current??null,"aria-valuemin":Number.isFinite(t)?t:null,"aria-valuemax":Number.isFinite(r)?r:null,onInput:this.onInput,onBlur:this.onBlur,onKeyDown:this.onKeyDown}),n("button",{key:"436e0a6557aef36b2bd59b7f0cee8d0a08636c53",type:"button",class:"step",part:"increment","aria-label":this.incrementLabel,disabled:this.disabled||this.atMax,tabindex:"-1",onMouseDown:e=>e.preventDefault(),onClick:()=>this.step_(1)},n("pf-icon",{key:"0ae5162f3d63f69c135cc9991c9d02aaf3ac86ea",name:"plus","aria-hidden":"true"}))),this.description&&n("p",{key:"6c958dd2bdeb22310d6c422d1757f4938687513c",class:"description",part:"description",id:"description"},this.description),this.error&&n("p",{key:"f8ea4d36f4941251e63cdfdc127fd08d3bb55ae4",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}static get style(){return b()}},[593,"pf-number-input",{name:[513],value:[1025],min:[2],max:[2],step:[2],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],decrementLabel:[1,"decrement-label"],incrementLabel:[1,"increment-label"],draft:[32],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],stepBy:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["pf-number-input","pf-icon"];t.forEach((t=>{switch(t){case"pf-number-input":if(!customElements.get(e(t))){customElements.define(e(t),m)}break;case"pf-icon":if(!customElements.get(e(t))){h()}break}}))}v();const y=m;const g=v;export{y as PfNumberInput,g as defineCustomElement};
+import{t as e,p as t,H as r,c as i,h as n,a as s}from"./index.js";import{c as a}from"./p-DfpCerXM.js";import{K as o}from"./p-g4FlTDZx.js";import{p as l,r as c,s as d,f as p,c as u}from"./p-DSXauhXX.js";import{a as f}from"./p-Cr6IXrUk.js";import{c as b}from"./p-Cy_kHPeC.js";import{d as h}from"./p-CkFjPRTe.js";const m=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-numberinput-field-label, 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)}.control{align-items:stretch;background:var(--pf-numberinput-bg);border:1px solid var(--pf-numberinput-border);border-radius:var(--radius-md);display:inline-flex;min-height:40px;overflow:hidden;transition:border var(--pf-transition-fast),     box-shadow var(--pf-transition-fast);width:100%}.control:focus-within{border-color:var(--pf-numberinput-focus-border);box-shadow:var(--pf-numberinput-focus-ring, var(--pf-focus-ring))}.control--invalid{border-color:var(--pf-numberinput-invalid-border)}:host([disabled]) .control{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);opacity:0.6}.input{background:transparent;border:none;color:var(--pf-numberinput-text);flex:1;font:inherit;min-width:0;outline:none;padding:0 var(--space-3);text-align:center;width:100%}.input::placeholder{color:var(--pf-numberinput-placeholder)}.input:disabled{cursor:not-allowed}.step{align-items:center;align-self:stretch;background:var(--pf-numberinput-step-bg);border:none;color:var(--pf-numberinput-step-text);cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:0;transition:background var(--pf-transition-fast),     color var(--pf-transition-fast);width:40px}.step:hover:not(:disabled){background:var(--pf-numberinput-step-hover-bg);color:var(--pf-numberinput-step-hover-text)}.step:disabled{cursor:not-allowed;opacity:0.45}[part='decrement']{border-inline-end:1px solid var(--pf-numberinput-border)}[part='increment']{border-inline-start:1px solid var(--pf-numberinput-border)}.step pf-icon{font-size:16px}.description{color:var(--pf-numberinput-field-description, 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}@media (prefers-reduced-motion: reduce){.control,.step{transition:none}}`;const v=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";min;max;step=1;label;description;error;placeholder;required=false;disabled=false;decrementLabel="Decrease";incrementLabel="Increase";pfChange;draft=null;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");f(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.draft=null}async stepBy(e){this.step_(e)}get bounds(){return{min:this.min===undefined?-Infinity:Number(this.min),max:this.max===undefined?Infinity:Number(this.max),step:Number(this.step)||1}}get current(){return l(this.value)}get atMin(){const{min:e}=this.bounds;return this.current!==null&&this.current<=e}get atMax(){const{max:e}=this.bounds;return this.current!==null&&this.current>=e}commit(e){const{min:t,max:r,step:i}=this.bounds;const n=e===null?"":String(c(u(e,t,r),i));if(n===this.value)return;this.value=n;this.pfChange.emit({value:n,number:l(n)})}step_(e){if(this.disabled)return;this.draft=null;this.commit(d(this.current,e,this.bounds))}onInput=e=>{const t=e.target.value;this.draft=t;const r=l(t);if(t.trim()===""){this.commit(null);return}if(r!==null)this.commit(r)};onBlur=()=>{this.draft=null};onKeyDown=e=>{if(this.disabled)return;const{min:t,max:r}=this.bounds;if(e.key===o.ArrowUp){e.preventDefault();this.step_(1)}else if(e.key===o.ArrowDown){e.preventDefault();this.step_(-1)}else if(e.key===o.Home&&Number.isFinite(t)){e.preventDefault();this.draft=null;this.commit(t)}else if(e.key===o.End&&Number.isFinite(r)){e.preventDefault();this.draft=null;this.commit(r)}};render(){const e=a(this.description&&"description",this.error&&"error");const{min:t,max:r}=this.bounds;const i=this.draft??p(this.current);return n(s,{key:"27f7f45a2732cbca6d252f4b9128901ed7868663"},n("div",{key:"75bfab2f72a83b830fd960e5fae19b9941eeae6c",class:"field",part:"field"},this.label&&n("label",{key:"f2e60206f153933cde6b36a23c510225bd5fb2ab",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&n("span",{key:"3925b4690d5b560190aaa04e7e7cf83453c7c49e",class:"required","aria-hidden":"true"},"*")),n("div",{key:"dcf1949c7fd8626c5a334fd3d72d8c4544369b41",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},n("button",{key:"03e3592fa8ff57a23e3675c475e7a66908af6cc3",type:"button",class:"step",part:"decrement","aria-label":this.decrementLabel,disabled:this.disabled||this.atMin,tabindex:"-1",onMouseDown:e=>e.preventDefault(),onClick:()=>this.step_(-1)},n("pf-icon",{key:"157e45ebe127230052c34215c3f88d487dacd41a",name:"minus","aria-hidden":"true"})),n("input",{key:"6fb05cb46de22b37387a16869f93b31b2ea6cc0a",id:"input","aria-label":b(this.el,this.label),part:"input",class:"input",type:"text",inputMode:"decimal",role:"spinbutton",name:this.name,value:i,placeholder:this.placeholder,required:this.required,disabled:this.disabled,autocomplete:"off","aria-invalid":this.error?"true":null,"aria-describedby":e,"aria-valuenow":this.current??null,"aria-valuemin":Number.isFinite(t)?t:null,"aria-valuemax":Number.isFinite(r)?r:null,onInput:this.onInput,onBlur:this.onBlur,onKeyDown:this.onKeyDown}),n("button",{key:"9b6eeddb4884a2961ac5a5cfe6a406111635cf79",type:"button",class:"step",part:"increment","aria-label":this.incrementLabel,disabled:this.disabled||this.atMax,tabindex:"-1",onMouseDown:e=>e.preventDefault(),onClick:()=>this.step_(1)},n("pf-icon",{key:"2a97e66ca7bf42c6d10a872c4b8eec52316d0784",name:"plus","aria-hidden":"true"}))),this.description&&n("p",{key:"3943b0c1ec5ad58d749b0e6d1fb5f60a17eb917e",class:"description",part:"description",id:"description"},this.description),this.error&&n("p",{key:"5aafabcd042976f000f906e6c16fc3eb45d57bf6",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}static get style(){return m()}},[593,"pf-number-input",{name:[513],value:[1025],min:[2],max:[2],step:[2],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],decrementLabel:[1,"decrement-label"],incrementLabel:[1,"increment-label"],draft:[32],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],stepBy:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["pf-number-input","pf-icon"];t.forEach((t=>{switch(t){case"pf-number-input":if(!customElements.get(e(t))){customElements.define(e(t),v)}break;case"pf-icon":if(!customElements.get(e(t))){h()}break}}))}y();const g=v;const x=y;export{g as PfNumberInput,x as defineCustomElement};
 //# sourceMappingURL=pf-number-input.js.map