@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

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

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

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

package/dist/components/pf-toaster.js

@@ -0,0 +1,2 @@
+import{t,p as s,H as e,c as i,h as a,a as o}from"./index.js";import{d as c}from"./p-CkFjPRTe.js";import{d as n}from"./p-E7EWeR1F.js";const r=()=>`:host{display:contents}.stack{display:grid;gap:var(--space-3);left:var(--space-2);position:fixed;right:var(--space-2);width:auto;z-index:1000}:host([placement='top-right']) .stack,:host([placement='top-left']) .stack{top:var(--space-2)}:host([placement='bottom-right']) .stack,:host([placement='bottom-left']) .stack{bottom:var(--space-2)}@media (min-width: 768px){.stack{left:auto;right:auto;width:min(420px, calc(100vw - (var(--space-4) * 2)))}:host([placement='top-right']) .stack,:host([placement='top-left']) .stack{top:var(--space-4)}:host([placement='bottom-right']) .stack,:host([placement='bottom-left']) .stack{bottom:var(--space-4)}:host([placement='top-right']) .stack,:host([placement='bottom-right']) .stack{justify-items:end;right:var(--space-4)}:host([placement='top-left']) .stack,:host([placement='bottom-left']) .stack{left:var(--space-4)}}`;const p=s(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfToastDismiss=i(this,"pfToastDismiss")}get el(){return this}placement="top-right";duration=4e3;pfToastDismiss;entries=[];timers=new Map;sequence=0;disconnectedCallback(){for(const t of this.timers.values())clearTimeout(t);this.timers.clear()}async toast(t={}){const s=`pf-toast-${this.sequence+=1}`;this.entries=[{...t,id:s},...this.entries];const e=t.duration??this.duration;if(e>0){this.timers.set(s,setTimeout((()=>{this.timers.delete(s);void this.dismiss(s)}),e))}return s}async dismiss(t){this.clearTimer(t);const s=this.el.shadowRoot?.querySelector(`pf-notification[data-id="${t}"]`);if(s)await s.dismiss();this.remove(t)}async dismissAll(){await Promise.all(this.entries.map((t=>this.dismiss(t.id))))}clearTimer(t){const s=this.timers.get(t);if(s)clearTimeout(s);this.timers.delete(t)}remove(t){if(!this.entries.some((s=>s.id===t)))return;this.entries=this.entries.filter((s=>s.id!==t));this.pfToastDismiss.emit({id:t})}render(){return a(o,{key:"0ed859d92e6ceb13483bb2a469e9e9ef5ae595a2"},a("div",{key:"526f85d58a2af54c1b5ca7fe172f0c8e6070d205",class:"stack",part:"stack"},this.entries.map((t=>a("pf-notification",{key:t.id,"data-id":t.id,variant:t.variant??"info",heading:t.heading,description:t.description,dismissable:t.dismissable??true,onPfDismiss:()=>this.remove(t.id)}))),a("slot",{key:"169fad33c3f11cbc8d78ba7552677ff7296eb232"})))}static get style(){return r()}},[769,"pf-toaster",{placement:[513],duration:[2],entries:[32],toast:[64],dismiss:[64],dismissAll:[64]}]);function m(){if(typeof customElements==="undefined"){return}const s=["pf-toaster","pf-icon","pf-notification"];s.forEach((s=>{switch(s){case"pf-toaster":if(!customElements.get(t(s))){customElements.define(t(s),p)}break;case"pf-icon":if(!customElements.get(t(s))){c()}break;case"pf-notification":if(!customElements.get(t(s))){n()}break}}))}m();const f=p;const h=m;export{f as PfToaster,h as defineCustomElement};
+//# sourceMappingURL=pf-toaster.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfToasterCss","PfToaster","__stencil_proxyCustomElement","HTMLElement","placement","duration","pfToastDismiss","entries","timers","Map","sequence","disconnectedCallback","timer","this","values","clearTimeout","clear","toast","options","id","set","setTimeout","delete","dismiss","clearTimer","element","el","shadowRoot","querySelector","remove","dismissAll","Promise","all","map","entry","get","some","filter","emit","render","h","Host","key","class","part","variant","heading","description","dismissable","onPfDismiss"],"sources":["src/components/pf-toaster/pf-toaster.css?tag=pf-toaster&encapsulation=shadow","src/components/pf-toaster/pf-toaster.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/*\n * Full-width on a phone, where a 420px card in a corner would be cropped;\n * a corner-anchored column from --md up. Mirrors .pf-notification-stack.\n */\n.stack {\n  display: grid;\n  gap: var(--space-3);\n  left: var(--space-2);\n  position: fixed;\n  right: var(--space-2);\n  width: auto;\n  z-index: 1000;\n}\n\n:host([placement='top-right']) .stack,\n:host([placement='top-left']) .stack {\n  top: var(--space-2);\n}\n\n:host([placement='bottom-right']) .stack,\n:host([placement='bottom-left']) .stack {\n  bottom: var(--space-2);\n}\n\n@media (--md) {\n  .stack {\n    left: auto;\n    right: auto;\n    width: min(420px, calc(100vw - (var(--space-4) * 2)));\n  }\n\n  :host([placement='top-right']) .stack,\n  :host([placement='top-left']) .stack {\n    top: var(--space-4);\n  }\n\n  :host([placement='bottom-right']) .stack,\n  :host([placement='bottom-left']) .stack {\n    bottom: var(--space-4);\n  }\n\n  :host([placement='top-right']) .stack,\n  :host([placement='bottom-right']) .stack {\n    justify-items: end;\n    right: var(--space-4);\n  }\n\n  :host([placement='top-left']) .stack,\n  :host([placement='bottom-left']) .stack {\n    left: var(--space-4);\n  }\n}\n","import type { LiveRegionVariant } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type PfToasterPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\nexport interface PfToastOptions {\n  variant?: LiveRegionVariant;\n  heading?: string;\n  description?: string;\n  /** Milliseconds before it dismisses itself. `0` keeps it until dismissed. */\n  duration?: number;\n  /** Render the dismiss button. Defaults to true. */\n  dismissable?: boolean;\n}\n\ninterface Entry extends PfToastOptions {\n  id: string;\n}\n\n/**\n * The region toasts appear in, and the queue behind them.\n *\n * This is the one place the elements layer takes options rather than child\n * elements, against the rule in `WEB-COMPONENTS-PLAN.md` §2.1 — because a\n * toast is not data the consumer is rendering, it is an event that happened.\n * React expresses that with a context provider and a module-level `toast()`;\n * the equivalent for a custom element is a method on the region, since a\n * consumer calling `toast()` three times from an event handler cannot\n * reasonably be asked to maintain a list of children for it.\n *\n * Declarative use still works: anything slotted in is laid out in the stack\n * alongside the queue, which is how a notification that is part of the page\n * rather than a response to an action is placed here.\n *\n * The region itself is not a live region. Each `pf-notification` is one\n * already, so marking the container as well would announce every toast twice.\n *\n * @slot - notifications placed in the stack declaratively.\n * @part stack - the positioned container.\n */\n@Component({\n  tag: 'pf-toaster',\n  styleUrl: 'pf-toaster.css',\n  shadow: true,\n})\nexport class PfToaster {\n  @Element() el!: HTMLElement;\n\n  /** Which corner the stack sits in. Reflected; the stylesheet positions on it. */\n  @Prop({ reflect: true }) placement: PfToasterPlacement = 'top-right';\n\n  /** Auto-dismiss delay for toasts that do not set their own. `0` disables it. */\n  @Prop() duration = 4000;\n\n  /** Fires when a toast has left, with the id `toast()` returned. */\n  @Event() pfToastDismiss!: EventEmitter<{ id: string }>;\n\n  @State() entries: Entry[] = [];\n\n  private timers = new Map<string, ReturnType<typeof setTimeout>>();\n  private sequence = 0;\n\n  disconnectedCallback() {\n    for (const timer of this.timers.values()) clearTimeout(timer);\n    this.timers.clear();\n  }\n\n  /**\n   * Shows a toast and returns its id.\n   *\n   * Newest first, matching the React provider, so a stack in a top corner\n   * grows downwards away from the corner.\n   */\n  @Method()\n  async toast(options: PfToastOptions = {}): Promise<string> {\n    const id = `pf-toast-${(this.sequence += 1)}`;\n    this.entries = [{ ...options, id }, ...this.entries];\n\n    const duration = options.duration ?? this.duration;\n    if (duration > 0) {\n      this.timers.set(\n        id,\n        setTimeout(() => {\n          this.timers.delete(id);\n          void this.dismiss(id);\n        }, duration),\n      );\n    }\n\n    return id;\n  }\n\n  /** Dismisses one toast by the id `toast()` returned. */\n  @Method()\n  async dismiss(id: string): Promise<void> {\n    this.clearTimer(id);\n    /*\n     * Typed structurally rather than as `HTMLPfNotificationElement`: that\n     * interface is generated by the build, so naming it here makes the first\n     * build of a new element fail on the type it is about to produce.\n     */\n    const element = this.el.shadowRoot?.querySelector(`pf-notification[data-id=\"${id}\"]`) as\n      (HTMLElement & { dismiss(): Promise<void> }) | null;\n\n    // Play the exit animation if it is still mounted; remove it either way.\n    if (element) await element.dismiss();\n    this.remove(id);\n  }\n\n  /** Dismisses everything currently showing. */\n  @Method()\n  async dismissAll(): Promise<void> {\n    await Promise.all(this.entries.map((entry) => this.dismiss(entry.id)));\n  }\n\n  private clearTimer(id: string) {\n    const timer = this.timers.get(id);\n    if (timer) clearTimeout(timer);\n    this.timers.delete(id);\n  }\n\n  private remove(id: string) {\n    if (!this.entries.some((entry) => entry.id === id)) return;\n    this.entries = this.entries.filter((entry) => entry.id !== id);\n    this.pfToastDismiss.emit({ id });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stack\" part=\"stack\">\n          {this.entries.map((entry) => (\n            <pf-notification\n              key={entry.id}\n              data-id={entry.id}\n              variant={entry.variant ?? 'info'}\n              heading={entry.heading}\n              description={entry.description}\n              dismissable={entry.dismissable ?? true}\n              /*\n               * The notification owns its own exit, and tells us when it is\n               * over. Removing it on the click instead would cut the animation\n               * off at the first frame.\n               */\n              onPfDismiss={() => this.remove(entry.id)}\n            ></pf-notification>\n          ))}\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qIAAA,MAAMA,EAAe,IAAM,81B,MCwDdC,EAASC,EAAA,MAAAD,UAAAE,E,mJAIKC,UAAgC,YAGjDC,SAAW,IAGVC,eAEAC,QAAmB,GAEpBC,OAAS,IAAIC,IACbC,SAAW,EAEnB,oBAAAC,GACE,IAAK,MAAMC,KAASC,KAAKL,OAAOM,SAAUC,aAAaH,GACvDC,KAAKL,OAAOQ,O,CAUd,WAAMC,CAAMC,EAA0B,IACpC,MAAMC,EAAK,YAAaN,KAAKH,UAAY,IACzCG,KAAKN,QAAU,CAAC,IAAKW,EAASC,SAASN,KAAKN,SAE5C,MAAMF,EAAWa,EAAQb,UAAYQ,KAAKR,SAC1C,GAAIA,EAAW,EAAG,CAChBQ,KAAKL,OAAOY,IACVD,EACAE,YAAW,KACTR,KAAKL,OAAOc,OAAOH,QACdN,KAAKU,QAAQJ,EAAG,GACpBd,G,CAIP,OAAOc,C,CAKT,aAAMI,CAAQJ,GACZN,KAAKW,WAAWL,GAMhB,MAAMM,EAAUZ,KAAKa,GAAGC,YAAYC,cAAc,4BAA4BT,OAI9E,GAAIM,QAAeA,EAAQF,UAC3BV,KAAKgB,OAAOV,E,CAKd,gBAAMW,SACEC,QAAQC,IAAInB,KAAKN,QAAQ0B,KAAKC,GAAUrB,KAAKU,QAAQW,EAAMf,M,CAG3D,UAAAK,CAAWL,GACjB,MAAMP,EAAQC,KAAKL,OAAO2B,IAAIhB,GAC9B,GAAIP,EAAOG,aAAaH,GACxBC,KAAKL,OAAOc,OAAOH,E,CAGb,MAAAU,CAAOV,GACb,IAAKN,KAAKN,QAAQ6B,MAAMF,GAAUA,EAAMf,KAAOA,IAAK,OACpDN,KAAKN,QAAUM,KAAKN,QAAQ8B,QAAQH,GAAUA,EAAMf,KAAOA,IAC3DN,KAAKP,eAAegC,KAAK,CAAEnB,M,CAG7B,MAAAoB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrB/B,KAAKN,QAAQ0B,KAAKC,GACjBM,EAAA,mBACEE,IAAKR,EAAMf,GAAE,UACJe,EAAMf,GACf0B,QAASX,EAAMW,SAAW,OAC1BC,QAASZ,EAAMY,QACfC,YAAab,EAAMa,YACnBC,YAAad,EAAMc,aAAe,KAMlCC,YAAa,IAAMpC,KAAKgB,OAAOK,EAAMf,QAGzCqB,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/pf-toolbar-separator.d.ts

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

package/dist/components/pf-toolbar-separator.js

@@ -0,0 +1,2 @@
+import{t,p as o,H as e,h as r,a}from"./index.js";const s=()=>`:host{background:var(--pf-toolbar-separator);flex-shrink:0;margin:var(--space-1)}:host([hidden]){display:none}:host([orientation='horizontal']){align-self:stretch;width:1px}:host([orientation='vertical']){height:1px}`;const n=o(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}orientation="horizontal";render(){return r(a,{key:"b6a69e325252e5807d813d6b7d95a4d0cd915148",role:"separator","aria-orientation":this.orientation})}static get style(){return s()}},[513,"pf-toolbar-separator",{orientation:[513]}]);function i(){if(typeof customElements==="undefined"){return}const o=["pf-toolbar-separator"];o.forEach((o=>{switch(o){case"pf-toolbar-separator":if(!customElements.get(t(o))){customElements.define(t(o),n)}break}}))}i();const c=n;const l=i;export{c as PfToolbarSeparator,l as defineCustomElement};
+//# sourceMappingURL=pf-toolbar-separator.js.map

package/dist/components/pf-toolbar-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfToolbarSeparatorCss","PfToolbarSeparator","__stencil_proxyCustomElement","HTMLElement","orientation","render","h","Host","key","role","this"],"sources":["src/components/pf-toolbar-separator/pf-toolbar-separator.css?tag=pf-toolbar-separator&encapsulation=shadow","src/components/pf-toolbar-separator/pf-toolbar-separator.tsx"],"sourcesContent":[":host {\n  background: var(--pf-toolbar-separator);\n  flex-shrink: 0;\n  margin: var(--space-1);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* A horizontal toolbar is divided by a vertical hairline, and vice versa. */\n:host([orientation='horizontal']) {\n  align-self: stretch;\n  width: 1px;\n}\n\n:host([orientation='vertical']) {\n  height: 1px;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfToolbarSeparatorOrientation = 'horizontal' | 'vertical';\n\n/**\n * A rule between groups of toolbar controls.\n *\n * `orientation` describes the toolbar it sits in, not the rule's own shape: a\n * horizontal toolbar gets a vertical hairline. `pf-toolbar` sets it on every\n * separator it contains, so a consumer does not have to — and cannot leave one\n * pointing the wrong way.\n */\n@Component({\n  tag: 'pf-toolbar-separator',\n  styleUrl: 'pf-toolbar-separator.css',\n  shadow: true,\n})\nexport class PfToolbarSeparator {\n  /** The axis of the toolbar this sits in. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) orientation: PfToolbarSeparatorOrientation = 'horizontal';\n\n  render() {\n    return <Host role=\"separator\" aria-orientation={this.orientation} />;\n  }\n}\n"],"mappings":"iDAAA,MAAMA,EAAwB,IAAM,2N,MCiBvBC,EAAkBC,EAAA,MAAAD,UAAAE,E,iFAEJC,YAA6C,aAEtE,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YAAW,mBAAmBC,KAAKN,a","ignoreList":[]}

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

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

package/dist/components/pf-toolbar.js

@@ -0,0 +1,2 @@
+import{t,p as o,H as e,h as n,a as r}from"./index.js";import{r as s}from"./p-CAz7-p8y.js";import{s as i,g as a,r as c}from"./p-Fiuz9ck7.js";const d=()=>`:host{align-items:center;background:var(--pf-toolbar-bg);border:1px solid var(--pf-toolbar-border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding:var(--space-1)}:host([hidden]){display:none}:host([orientation='horizontal']){flex-direction:row}:host([orientation='vertical']){align-items:stretch;flex-direction:column;width:fit-content}`;const f=o(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}orientation="horizontal";componentDidLoad(){this.sync()}sync(){i(a(this.el));for(const t of Array.from(this.el.querySelectorAll("pf-toolbar-separator"))){t.setAttribute("orientation",this.orientation)}}handleFocusIn(t){i(a(this.el),t.target)}handleKeyDown(t){if(t.defaultPrevented)return;const o=c(t.key,this.orientation);if(!o)return;const e=a(this.el);const n=e.indexOf(document.activeElement);if(n===-1)return;const r=s(o,e.map(((t,o)=>o)),n);if(r>=0){t.preventDefault();e[r].focus()}}render(){return n(r,{key:"f0a26b6f3d74719af7dbefc0eb21a957502427f6",role:"toolbar","aria-orientation":this.orientation},n("slot",{key:"0e557bef8da2b0e344541975284be29d647dec34",onSlotchange:()=>this.sync()}))}static get watchers(){return{orientation:[{sync:0}]}}static get style(){return d()}},[769,"pf-toolbar",{orientation:[513]},[[0,"focusin","handleFocusIn"],[0,"keydown","handleKeyDown"]],{orientation:[{sync:0}]}]);function l(){if(typeof customElements==="undefined"){return}const o=["pf-toolbar"];o.forEach((o=>{switch(o){case"pf-toolbar":if(!customElements.get(t(o))){customElements.define(t(o),f)}break}}))}l();const h=f;const p=l;export{h as PfToolbar,p as defineCustomElement};
+//# sourceMappingURL=pf-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfToolbarCss","PfToolbar","__stencil_proxyCustomElement","HTMLElement","orientation","componentDidLoad","this","sync","syncRovingTabIndex","getRovingItems","el","separator","Array","from","querySelectorAll","setAttribute","handleFocusIn","event","target","handleKeyDown","defaultPrevented","action","resolveRovingKey","key","items","currentIndex","indexOf","document","activeElement","nextIndex","resolveListMove","map","_","index","preventDefault","focus","render","h","Host","role","onSlotchange"],"sources":["src/components/pf-toolbar/pf-toolbar.css?tag=pf-toolbar&encapsulation=shadow","src/components/pf-toolbar/pf-toolbar.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  background: var(--pf-toolbar-bg);\n  border: 1px solid var(--pf-toolbar-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex-direction: row;\n}\n\n:host([orientation='vertical']) {\n  align-items: stretch;\n  flex-direction: column;\n  width: fit-content;\n}\n","import {\n  getRovingItems,\n  resolveListMove,\n  resolveRovingKey,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\nexport type PfToolbarOrientation = 'horizontal' | 'vertical';\n\n/**\n * A group of controls that is one tab stop from outside and navigated\n * internally with the arrow keys.\n *\n * Items are matched in the light DOM, so a native `button`, `a[href]` or form\n * control works with no ceremony. A custom element is not a native control and\n * has to opt in with `data-toolbar-item` — `<pf-button data-toolbar-item>`.\n * Focusing it still reaches the real button inside, because `pf-button`\n * delegates focus.\n *\n * @slot - the toolbar's controls, and any `pf-toolbar-separator` between them.\n */\n@Component({\n  tag: 'pf-toolbar',\n  styleUrl: 'pf-toolbar.css',\n  shadow: true,\n})\nexport class PfToolbar {\n  @Element() el!: HTMLElement;\n\n  /** Layout and arrow-key axis. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfToolbarOrientation = 'horizontal';\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * A separator cannot see which way its toolbar runs: `:host-context()` is the\n   * only selector that would reach out of its shadow root, and it is not\n   * supported in Firefox or Safari. So the toolbar pushes its own orientation\n   * down instead, which also means a consumer never has to set it twice.\n   */\n  @Watch('orientation')\n  sync() {\n    syncRovingTabIndex(getRovingItems(this.el));\n\n    for (const separator of Array.from(this.el.querySelectorAll('pf-toolbar-separator'))) {\n      separator.setAttribute('orientation', this.orientation);\n    }\n  }\n\n  /**\n   * Keeps the tab stop on whatever the user actually focused, however they got\n   * there — a click, a Tab from outside, or a script.\n   *\n   * `focusin` rather than `focus` because it bubbles, and it crosses a shadow\n   * boundary with its target retargeted to the host, which is exactly the\n   * element in the item list.\n   */\n  @Listen('focusin')\n  handleFocusIn(event: FocusEvent) {\n    syncRovingTabIndex(getRovingItems(this.el), event.target as HTMLElement);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, this.orientation);\n    if (!action) return;\n\n    const items = getRovingItems(this.el);\n    // activeElement reports the shallowest host, which is the item itself even\n    // when focus has been delegated into its shadow root.\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    if (currentIndex === -1) return;\n\n    const nextIndex = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex >= 0) {\n      event.preventDefault();\n      items[nextIndex].focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"toolbar\" aria-orientation={this.orientation}>\n        <slot onSlotchange={() => this.sync()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"4IAAA,MAAMA,EAAe,IAAM,0W,MC2BdC,EAASC,EAAA,MAAAD,UAAAE,E,sGAIKC,YAAoC,aAE7D,gBAAAC,GACEC,KAAKC,M,CAUP,IAAAA,GACEC,EAAmBC,EAAeH,KAAKI,KAEvC,IAAK,MAAMC,KAAaC,MAAMC,KAAKP,KAAKI,GAAGI,iBAAiB,yBAA0B,CACpFH,EAAUI,aAAa,cAAeT,KAAKF,Y,EAa/C,aAAAY,CAAcC,GACZT,EAAmBC,EAAeH,KAAKI,IAAKO,EAAMC,O,CAIpD,aAAAC,CAAcF,GACZ,GAAIA,EAAMG,iBAAkB,OAE5B,MAAMC,EAASC,EAAiBL,EAAMM,IAAKjB,KAAKF,aAChD,IAAKiB,EAAQ,OAEb,MAAMG,EAAQf,EAAeH,KAAKI,IAGlC,MAAMe,EAAeD,EAAME,QAAQC,SAASC,eAC5C,GAAIH,KAAiB,EAAI,OAEzB,MAAMI,EAAYC,EAChBT,EACAG,EAAMO,KAAI,CAACC,EAAGC,IAAUA,IACxBR,GAEF,GAAII,GAAa,EAAG,CAClBZ,EAAMiB,iBACNV,EAAMK,GAAWM,O,EAIrB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAf,IAAA,2CAACgB,KAAK,UAAS,mBAAmBjC,KAAKF,aAC1CiC,EAAA,QAAAd,IAAA,2CAAMiB,aAAc,IAAMlC,KAAKC,S","ignoreList":[]}

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

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

package/dist/components/pf-tooltip.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as i,h as o,a as s}from"./index.js";import{a as n,p as a}from"./p-CC7AyfOt.js";import{K as r}from"./p-g4FlTDZx.js";const h=()=>`:host{display:inline-flex}:host([hidden]){display:none}.tooltip{inset:auto;margin:0;background:var(--pf-tooltip-bg);border:0;border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--pf-tooltip-text);font-size:var(--font-size-sm);line-height:1.4;max-width:260px;padding:var(--space-2) var(--space-3);width:max-content}.tooltip:popover-open{animation:pf-tooltip-in var(--duration-fast) var(--easing-decelerate)}@keyframes pf-tooltip-in{from{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip:popover-open{animation:none}}`;const d=e(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}placement="top";delay=120;open;disabled=false;resolvedSide="top";showTimer;stopObserving;contentObserver;componentDidLoad(){this.watchContent();this.syncDescription();if(this.open)this.show()}disconnectedCallback(){this.clearTimer();this.stopObserving?.();this.contentObserver?.disconnect()}watchContent(){this.contentObserver?.disconnect();this.contentObserver=new MutationObserver((()=>this.syncDescription()));this.contentObserver.observe(this.el,{characterData:true,childList:true,subtree:true})}syncDescription(){const t=this.el.firstElementChild;if(!t)return;const e=this.el.shadowRoot?.querySelector('slot[name="content"]');const i=e?.assignedNodes({flatten:true}).map((t=>t.textContent??"")).join(" ").trim();if(i)t.setAttribute("aria-description",i);else t.removeAttribute("aria-description")}syncOpen(t){if(t)this.show();else if(t===false)this.hide()}get panel(){return this.el.shadowRoot?.querySelector('[part="tooltip"]')??null}clearTimer(){if(this.showTimer!==undefined){window.clearTimeout(this.showTimer);this.showTimer=undefined}}show(){const t=this.panel;if(this.disabled||!t||t.matches(":popover-open"))return;t.showPopover();this.stopObserving?.();this.stopObserving=n({getAnchor:()=>this.el.firstElementChild,getFloating:()=>t,side:this.placement,onChange:({side:e,left:i,top:o})=>{this.resolvedSide=e;a(t,i,o)}})}hide(){this.clearTimer();this.stopObserving?.();this.stopObserving=undefined;const t=this.panel;if(t?.matches(":popover-open"))t.hidePopover()}get isControlled(){return this.open!==undefined}scheduleShow=()=>{if(this.disabled||this.isControlled)return;this.clearTimer();this.showTimer=window.setTimeout((()=>this.show()),this.delay)};cancel=()=>{if(this.isControlled)return;this.hide()};handlePointerEnter(){this.scheduleShow()}handlePointerLeave(){this.cancel()}handleFocusIn(){this.scheduleShow()}handleFocusOut(){this.cancel()}handleKeyDown(t){if(t.key!==r.Escape)return;const e=this.panel;if(!e?.matches(":popover-open"))return;t.stopPropagation();this.hide()}render(){return o(s,{key:"e127ade47feddf8eb99405236f4f97f4fc7d9068"},o("slot",{key:"28fc4e44a6bfe2060386f9454592b306bc1b2756",onSlotchange:()=>this.syncDescription()}),o("div",{key:"6a2f2cc60d2ecc38188a7084cae5a86c496fabda",class:"tooltip",part:"tooltip",popover:"manual",role:"tooltip","data-side":this.resolvedSide},o("slot",{key:"ef1b81321a49e69741bd8fe7f400838c399ccb18",name:"content",onSlotchange:()=>this.syncDescription()})))}static get watchers(){return{open:[{syncOpen:0}]}}static get style(){return h()}},[769,"pf-tooltip",{placement:[513],delay:[2],open:[4],disabled:[516],resolvedSide:[32]},[[1,"pointerenter","handlePointerEnter"],[1,"pointerleave","handlePointerLeave"],[0,"focusin","handleFocusIn"],[0,"focusout","handleFocusOut"],[0,"keydown","handleKeyDown"]],{open:[{syncOpen:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["pf-tooltip"];e.forEach((e=>{switch(e){case"pf-tooltip":if(!customElements.get(t(e))){customElements.define(t(e),d)}break}}))}c();const p=d;const l=c;export{p as PfTooltip,l as defineCustomElement};
+//# sourceMappingURL=pf-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfTooltipCss","PfTooltip","__stencil_proxyCustomElement","HTMLElement","placement","delay","open","disabled","resolvedSide","showTimer","stopObserving","contentObserver","componentDidLoad","this","watchContent","syncDescription","show","disconnectedCallback","clearTimer","disconnect","MutationObserver","observe","el","characterData","childList","subtree","trigger","firstElementChild","slot","shadowRoot","querySelector","text","assignedNodes","flatten","map","node","textContent","join","trim","setAttribute","removeAttribute","syncOpen","next","hide","panel","undefined","window","clearTimeout","matches","showPopover","observeSidePosition","getAnchor","getFloating","side","onChange","left","top","placePopover","hidePopover","isControlled","scheduleShow","setTimeout","cancel","handlePointerEnter","handlePointerLeave","handleFocusIn","handleFocusOut","handleKeyDown","event","key","Keys","Escape","stopPropagation","render","h","Host","onSlotchange","class","part","popover","role","name"],"sources":["src/components/pf-tooltip/pf-tooltip.css?tag=pf-tooltip&encapsulation=shadow","src/components/pf-tooltip/pf-tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * `popover` puts this in the top layer, so it escapes any ancestor's overflow\n * and stacking context. left/top come from the observer.\n */\n/*\n * `inset: auto` and `margin: 0` are essential, not tidying -- see\n * `src/place-popover.ts`, which sets the same two inline and explains the\n * measurement. They are declared in both places deliberately: here so the\n * cascade carries them for the whole life of the panel, and inline so a panel\n * is still positioned where this stylesheet has not been applied.\n */\n.tooltip {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-tooltip-bg);\n  border: 0;\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n  color: var(--pf-tooltip-text);\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  max-width: 260px;\n  padding: var(--space-2) var(--space-3);\n  width: max-content;\n}\n\n.tooltip:popover-open {\n  /* Fade in from the side it sits on. */\n  animation: pf-tooltip-in var(--duration-fast) var(--easing-decelerate);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-tooltip-in {\n  from {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tooltip:popover-open {\n    animation: none;\n  }\n}\n","import { Keys, observeSidePosition, type Side } from '@pitchfork-ui/core';\n\nimport { placePopover } from '../../place-popover';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\n/**\n * A tooltip anchored to whatever is slotted into it.\n *\n * The panel is a `popover`, which is how it escapes an ancestor's `overflow`\n * and stacking context — the thing `createPortal` does for the React\n * component, and the only equivalent available from inside a shadow root.\n * Verified: a popover opened from a shadow root inside an `overflow: hidden`\n * container beats a `z-index: 999` sibling, where a plain absolute element in\n * the same place loses.\n *\n * @slot - the trigger.\n * @slot content - the tooltip's content. Its text also becomes the trigger's\n * accessible description.\n * @part tooltip - the floating panel.\n */\n@Component({\n  tag: 'pf-tooltip',\n  styleUrl: 'pf-tooltip.css',\n  shadow: true,\n})\nexport class PfTooltip {\n  @Element() el!: HTMLElement;\n\n  /** Preferred side. Reflected so the stylesheet can place the arrow. */\n  @Prop({ reflect: true }) placement: Side = 'top';\n\n  /** Milliseconds to wait before showing on hover or focus. */\n  @Prop() delay = 120;\n\n  /** Force the tooltip open or closed, rather than letting it react. */\n  @Prop() open?: boolean;\n\n  /** Never show. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The side actually in use, which the arrow follows. */\n  @State() resolvedSide: Side = 'top';\n\n  private showTimer?: number;\n  private stopObserving?: () => void;\n  private contentObserver?: MutationObserver;\n\n  componentDidLoad() {\n    this.watchContent();\n    this.syncDescription();\n    if (this.open) this.show();\n  }\n\n  disconnectedCallback() {\n    this.clearTimer();\n    this.stopObserving?.();\n    this.contentObserver?.disconnect();\n  }\n\n  /**\n   * `slotchange` fires when the *assignment* changes, not when text inside an\n   * already-assigned node is edited — so a consumer setting\n   * `span.textContent = 'Changed'` would update the visible tooltip and leave\n   * the trigger's accessible description stale. That is a silent\n   * accessibility bug rather than a cosmetic one, which is what earns the\n   * observer.\n   */\n  private watchContent() {\n    this.contentObserver?.disconnect();\n    this.contentObserver = new MutationObserver(() => this.syncDescription());\n    this.contentObserver.observe(this.el, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  /**\n   * The trigger's accessible description, copied as text.\n   *\n   * It cannot be an IDREF: `aria-describedby` does not cross a shadow\n   * boundary, and `ariaDescribedByElements` silently reads back empty when\n   * handed an element from a root the trigger does not own — both measured.\n   * `aria-description` is a plain string, so it crosses nothing, and the\n   * accessibility tree reports it identically to a same-root IDREF.\n   */\n  private syncDescription() {\n    const trigger = this.el.firstElementChild;\n    if (!trigger) return;\n\n    const slot = this.el.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"content\"]');\n    const text = slot\n      ?.assignedNodes({ flatten: true })\n      .map((node) => node.textContent ?? '')\n      .join(' ')\n      .trim();\n\n    if (text) trigger.setAttribute('aria-description', text);\n    else trigger.removeAttribute('aria-description');\n  }\n\n  @Watch('open')\n  syncOpen(next?: boolean) {\n    if (next) this.show();\n    else if (next === false) this.hide();\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"tooltip\"]') ?? null;\n  }\n\n  private clearTimer() {\n    if (this.showTimer !== undefined) {\n      window.clearTimeout(this.showTimer);\n      this.showTimer = undefined;\n    }\n  }\n\n  private show() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    /*\n     * Positioning waits until the panel is open, because the side is chosen by\n     * how the panel's own size fits the viewport and a closed popover has no\n     * size at all.\n     */\n    this.stopObserving?.();\n    this.stopObserving = observeSidePosition({\n      getAnchor: () => this.el.firstElementChild as HTMLElement | null,\n      getFloating: () => panel,\n      side: this.placement,\n      onChange: ({ side, left, top }) => {\n        this.resolvedSide = side;\n        placePopover(panel, left, top);\n      },\n    });\n  }\n\n  private hide() {\n    this.clearTimer();\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /** Controlled mode means the consumer decides; hover and focus do nothing. */\n  private get isControlled() {\n    return this.open !== undefined;\n  }\n\n  private scheduleShow = () => {\n    if (this.disabled || this.isControlled) return;\n    this.clearTimer();\n    this.showTimer = window.setTimeout(() => this.show(), this.delay);\n  };\n\n  private cancel = () => {\n    if (this.isControlled) return;\n    this.hide();\n  };\n\n  @Listen('pointerenter')\n  handlePointerEnter() {\n    this.scheduleShow();\n  }\n\n  @Listen('pointerleave')\n  handlePointerLeave() {\n    this.cancel();\n  }\n\n  /** `focusin`/`focusout` rather than `focus`/`blur`, so they bubble. */\n  @Listen('focusin')\n  handleFocusIn() {\n    this.scheduleShow();\n  }\n\n  @Listen('focusout')\n  handleFocusOut() {\n    this.cancel();\n  }\n\n  /**\n   * Escape dismisses even in controlled mode. A tooltip covering the content\n   * you are trying to read is not something to need a prop for, and WAI-ARIA\n   * requires it of any tooltip.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== Keys.Escape) return;\n    const panel = this.panel;\n    if (!panel?.matches(':popover-open')) return;\n    event.stopPropagation();\n    this.hide();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.syncDescription()} />\n        <div\n          class=\"tooltip\"\n          part=\"tooltip\"\n          popover=\"manual\"\n          role=\"tooltip\"\n          data-side={this.resolvedSide}\n        >\n          <slot name=\"content\" onSlotchange={() => this.syncDescription()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-tree-item.d.ts

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,c as i,h as s,a as r}from"./index.js";import{d as n}from"./p-CkFjPRTe.js";const l=()=>`:host{display:block;min-width:0}:host([hidden]){display:none}.children{padding-inline-start:var(--space-4)}.children[hidden]{display:none}.row{align-items:center;border-radius:var(--radius-sm);color:var(--pf-treeview-text-muted);cursor:pointer;display:grid;gap:var(--space-2);grid-template-columns:24px auto 1fr auto;min-height:34px;min-width:0;padding-inline-end:var(--space-2)}:host(:not([icon])) .row{grid-template-columns:24px 1fr auto}.row:hover{background:var(--pf-treeview-bg-subtle);color:var(--pf-treeview-text)}:host([active]) .row{box-shadow:var(--pf-tree-active-ring, none)}:host([selected]) .row{background:var(--pf-treeview-bg-subtle);color:var(--pf-treeview-text);font-weight:var(--font-weight-semibold)}:host([disabled]) .row{cursor:not-allowed;opacity:0.5}.twisty{align-items:center;display:inline-flex;justify-content:center;width:24px}.toggle{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-treeview-text-muted);cursor:pointer;display:inline-flex;font-size:var(--font-size-xs);height:24px;justify-content:center;padding:0;width:24px}.toggle:hover{background:var(--pf-treeview-bg-subtle);color:var(--pf-treeview-text)}.icon{align-items:center;display:inline-flex;justify-content:center}.label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{align-items:center;display:inline-flex;justify-content:center}.badge.empty{display:none}`;const o=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfTreeSelect=i(this,"pfTreeSelect");this.pfTreeToggle=i(this,"pfTreeToggle");this.pfTreeStructure=i(this,"pfTreeStructure")}get el(){return this}value="";disabled=false;icon;level=1;selected=false;expanded=false;hasChildren=false;active=false;pfTreeSelect;pfTreeToggle;pfTreeStructure;hasBadge=false;componentWillLoad(){this.read()}read=()=>{this.hasBadge=Array.from(this.el.children).some((e=>e.getAttribute("slot")==="badge"))};onRowClick=()=>{if(this.disabled)return;this.pfTreeSelect.emit({value:this.value})};onToggleClick=e=>{e.stopPropagation();this.pfTreeToggle.emit({value:this.value})};render(){return s(r,{key:"88ecc1b46b8a27da4032a95a5dc61a5c26aaada0",role:"treeitem","aria-level":String(this.level),"aria-selected":this.selected?"true":"false","aria-expanded":this.hasChildren?this.expanded?"true":"false":null,"aria-disabled":this.disabled?"true":null},s("div",{key:"9b01234883116846b26e5cd5565fb40612b81370",class:"row",part:"row",onClick:this.onRowClick},s("span",{key:"25d5ca0c4ca422a00061eda5f2811328cfc54a5c",class:"twisty","aria-hidden":"true"},this.hasChildren&&s("button",{key:"3cb856498ec1506de4026c6a9115e4a86add6a23",type:"button",class:"toggle",part:"toggle",tabindex:"-1",onClick:this.onToggleClick},this.expanded?"▾":"▸")),this.icon&&s("pf-icon",{key:"d0730491a865b2b2f59e0fcb0adf7cac6db8d4cc",class:"icon",name:this.icon,"aria-hidden":"true"}),s("span",{key:"60a592334f70f944b7d5b8355e0ea6ade902492f",class:"label",part:"label"},s("slot",{key:"7b00850cd21475d567b0c80d4537f2a8bf0dc24c",name:"label"})),s("span",{key:"641b9658b88ee4760067db4bc0a63ef992c83b4a",class:{badge:true,empty:!this.hasBadge}},s("slot",{key:"fffbfbe5f68e1bf85d171b29e6473ef35f11a176",name:"badge",onSlotchange:this.read}))),s("div",{key:"7679e1668cb704b25a5f27f1d896a77b97fb4e90",class:"children",part:"children",role:"group",hidden:!this.expanded},s("slot",{key:"6b9182c724d033d3f3eb0e3977b2c54a8748f793",onSlotchange:()=>this.pfTreeStructure.emit()})))}static get style(){return l()}},[769,"pf-tree-item",{value:[513],disabled:[516],icon:[1],level:[1026],selected:[1540],expanded:[1540],hasChildren:[1540,"has-children"],active:[1540],hasBadge:[32]}]);function d(){if(typeof customElements==="undefined"){return}const t=["pf-tree-item","pf-icon"];t.forEach((t=>{switch(t){case"pf-tree-item":if(!customElements.get(e(t))){customElements.define(e(t),o)}break;case"pf-icon":if(!customElements.get(e(t))){n()}break}}))}d();const c=o;const f=d;export{c as PfTreeItem,f as defineCustomElement};
+//# sourceMappingURL=pf-tree-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfTreeItemCss","PfTreeItem","__stencil_proxyCustomElement","HTMLElement","value","disabled","icon","level","selected","expanded","hasChildren","active","pfTreeSelect","pfTreeToggle","pfTreeStructure","hasBadge","componentWillLoad","this","read","Array","from","el","children","some","child","getAttribute","onRowClick","emit","onToggleClick","event","stopPropagation","render","h","Host","key","role","String","class","part","onClick","type","tabindex","name","badge","empty","onSlotchange","hidden"],"sources":["src/components/pf-tree-item/pf-tree-item.css?tag=pf-tree-item&encapsulation=shadow","src/components/pf-tree-item/pf-tree-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  min-width: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The indent comes from the nesting rather than from a level pushed into a\n * custom property: the items are nested in the DOM, so one rule here indents\n * every depth, and there is no number to keep in step with the markup.\n */\n.children {\n  padding-inline-start: var(--space-4);\n}\n\n.children[hidden] {\n  display: none;\n}\n\n.row {\n  align-items: center;\n  border-radius: var(--radius-sm);\n  color: var(--pf-treeview-text-muted);\n  cursor: pointer;\n  display: grid;\n  gap: var(--space-2);\n  grid-template-columns: 24px auto 1fr auto;\n  min-height: 34px;\n  min-width: 0;\n  padding-inline-end: var(--space-2);\n}\n\n/* No icon slotted in, no column for one: the grid closes up. */\n:host(:not([icon])) .row {\n  grid-template-columns: 24px 1fr auto;\n}\n\n.row:hover {\n  background: var(--pf-treeview-bg-subtle);\n  color: var(--pf-treeview-text);\n}\n\n/*\n * The ring marks the item the keyboard is on, and the tree decides whether to\n * draw one at all: it is the thing with the focus, and it turns the ring on\n * through `--pf-tree-active-ring` only while it is focused.\n */\n:host([active]) .row {\n  box-shadow: var(--pf-tree-active-ring, none);\n}\n\n:host([selected]) .row {\n  background: var(--pf-treeview-bg-subtle);\n  color: var(--pf-treeview-text);\n  font-weight: var(--font-weight-semibold);\n}\n\n:host([disabled]) .row {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.twisty {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n  width: 24px;\n}\n\n.toggle {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-treeview-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-xs);\n  height: 24px;\n  justify-content: center;\n  padding: 0;\n  width: 24px;\n}\n\n.toggle:hover {\n  background: var(--pf-treeview-bg-subtle);\n  color: var(--pf-treeview-text);\n}\n\n.icon {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n}\n\n.label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.badge {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n}\n\n/* Two classes deep, because the box sets its own `display` above. */\n.badge.empty {\n  display: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * One item in a `pf-tree-view`, with its own items nested inside it.\n *\n * The host is the `treeitem`, and it is never focused: the tree keeps the\n * focus and names the active item with `aria-activedescendant`, because a\n * nested host cannot take a roving tabindex at all — measured, and explained\n * on `pf-tree-view`. So the row inside is a plain box rather than a button,\n * and the twisty is the only focusable thing in here, kept out of the tab\n * order.\n *\n * `level`, `selected`, `expanded` and `hasChildren` are the group's to set:\n * only it can see the whole tree.\n *\n * @slot label - the item's label.\n * @slot badge - small trailing content, a count or a status.\n * @slot - the nested `pf-tree-item` children.\n * @part row - the item's own row, without its children.\n * @part toggle - the twisty, on an item that has children.\n * @part label - the label's box.\n * @part children - the box holding the nested items.\n */\n@Component({\n  tag: 'pf-tree-item',\n  styleUrl: 'pf-tree-item.css',\n  shadow: true,\n})\nexport class PfTreeItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Identifies the item in the tree's selection and open set.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-tree-item[value=\"...\"]` finds\n   * nothing. The tree reads the property.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Reflected; the stylesheet and the tree's own filtering both read it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /** Set by the tree: how deep this item sits, counting from 1. */\n  @Prop({ mutable: true }) level = 1;\n\n  /** Set by the tree. Reflected, so the stylesheet can mark the item. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** Set by the tree: whether this branch is open. Reflected. */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  /** Set by the tree: whether there is anything to open. Reflected. */\n  @Prop({ mutable: true, reflect: true }) hasChildren = false;\n\n  /**\n   * Set by the tree: the item the keyboard is on, which is not always the\n   * selected one. Reflected, because the ring is drawn from it.\n   */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  /** Asks the tree to select this item. The tree decides. */\n  @Event() pfTreeSelect!: EventEmitter<{ value: string }>;\n\n  /** Asks the tree to open or close this branch. */\n  @Event() pfTreeToggle!: EventEmitter<{ value: string }>;\n\n  /**\n   * Tells the tree that the items inside this one have changed.\n   *\n   * `slotchange` does not cross a shadow boundary — it is not composed — so a\n   * tree cannot hear its grandchildren arrive. Without this, an item appended\n   * to a branch is never given a level, an id or a place in the keyboard\n   * order; a browser test adds one.\n   */\n  @Event() pfTreeStructure!: EventEmitter<void>;\n\n  /** Whether anything is slotted into the badge, which carries layout. */\n  @State() hasBadge = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    this.hasBadge = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'badge',\n    );\n  };\n\n  private onRowClick = () => {\n    if (this.disabled) return;\n    this.pfTreeSelect.emit({ value: this.value });\n  };\n\n  private onToggleClick = (event: MouseEvent) => {\n    // The twisty opens the branch without also selecting the item.\n    event.stopPropagation();\n    this.pfTreeToggle.emit({ value: this.value });\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"treeitem\"\n        aria-level={String(this.level)}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-expanded={this.hasChildren ? (this.expanded ? 'true' : 'false') : null}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        {/*\n          A click surface rather than a button: the host is the treeitem, and\n          the tree holds the keys — a second focusable thing in here would be\n          a tab stop inside a treeitem, which the pattern does not have.\n        */}\n        <div class=\"row\" part=\"row\" onClick={this.onRowClick}>\n          <span class=\"twisty\" aria-hidden=\"true\">\n            {this.hasChildren && (\n              <button\n                type=\"button\"\n                class=\"toggle\"\n                part=\"toggle\"\n                tabindex=\"-1\"\n                onClick={this.onToggleClick}\n              >\n                {this.expanded ? '▾' : '▸'}\n              </button>\n            )}\n          </span>\n\n          {this.icon && <pf-icon class=\"icon\" name={this.icon} aria-hidden=\"true\"></pf-icon>}\n\n          <span class=\"label\" part=\"label\">\n            <slot name=\"label\" />\n          </span>\n\n          <span class={{ badge: true, empty: !this.hasBadge }}>\n            <slot name=\"badge\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        {/*\n          The nested items stay in the tree when the branch is closed and are\n          hidden instead: a slot that is not rendered never fires `slotchange`,\n          so an item added to a closed branch would stay invisible for good.\n          `role=\"group\"` is what makes the nesting a tree to a screen reader.\n        */}\n        <div class=\"children\" part=\"children\" role=\"group\" hidden={!this.expanded}>\n          <slot onSlotchange={() => this.pfTreeStructure.emit()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAgB,IAAM,o5C,MC4BfC,EAAUC,EAAA,MAAAD,UAAAE,E,uOAUIC,MAAQ,GAGRC,SAAW,MAG5BC,KAGiBC,MAAQ,EAGOC,SAAW,MAGXC,SAAW,MAGXC,YAAc,MAMdC,OAAS,MAGxCC,aAGAC,aAUAC,gBAGAC,SAAW,MAGpB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACbD,KAAKF,SAAWI,MAAMC,KAAKH,KAAKI,GAAGC,UAAUC,MAC1CC,GAAUA,EAAMC,aAAa,UAAY,SAC3C,EAGKC,WAAa,KACnB,GAAIT,KAAKZ,SAAU,OACnBY,KAAKL,aAAae,KAAK,CAAEvB,MAAOa,KAAKb,OAAQ,EAGvCwB,cAAiBC,IAEvBA,EAAMC,kBACNb,KAAKJ,aAAac,KAAK,CAAEvB,MAAOa,KAAKb,OAAQ,EAG/C,MAAA2B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WAAU,aACHC,OAAOnB,KAAKV,OAAM,gBACfU,KAAKT,SAAW,OAAS,QAAO,gBAChCS,KAAKP,YAAeO,KAAKR,SAAW,OAAS,QAAW,KAAI,gBAC5DQ,KAAKZ,SAAW,OAAS,MAOxC2B,EAAA,OAAAE,IAAA,2CAAKG,MAAM,MAAMC,KAAK,MAAMC,QAAStB,KAAKS,YACxCM,EAAA,QAAAE,IAAA,2CAAMG,MAAM,SAAQ,cAAa,QAC9BpB,KAAKP,aACJsB,EAAA,UAAAE,IAAA,2CACEM,KAAK,SACLH,MAAM,SACNC,KAAK,SACLG,SAAS,KACTF,QAAStB,KAAKW,eAEbX,KAAKR,SAAW,IAAM,MAK5BQ,KAAKX,MAAQ0B,EAAA,WAAAE,IAAA,2CAASG,MAAM,OAAOK,KAAMzB,KAAKX,KAAI,cAAc,SAEjE0B,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QAAQC,KAAK,SACvBN,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGbV,EAAA,QAAAE,IAAA,2CAAMG,MAAO,CAAEM,MAAO,KAAMC,OAAQ3B,KAAKF,WACvCiB,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,QAAQG,aAAc5B,KAAKC,SAU1Cc,EAAA,OAAAE,IAAA,2CAAKG,MAAM,WAAWC,KAAK,WAAWH,KAAK,QAAQW,QAAS7B,KAAKR,UAC/DuB,EAAA,QAAAE,IAAA,2CAAMW,aAAc,IAAM5B,KAAKH,gBAAgBa,U","ignoreList":[]}

package/dist/components/pf-tree-view.d.ts

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

package/dist/components/pf-tree-view.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as n,c as s,h as r,a}from"./index.js";import{p as i,f as o}from"./p-BmcsJLdy.js";function l(e,t,n=1,s){const r=t instanceof Set?t:new Set(t);const a=[];for(const t of e){const e=Boolean(t.children&&t.children.length>0);const i=e&&r.has(t.value);a.push({node:t,level:n,parentValue:s,hasChildren:e,expanded:i});if(i)a.push(...l(t.children,r,n+1,t.value))}return a}function c(e){for(const t of e){if(!t.disabled)return t.value;if(t.children&&t.children.length>0){const e=c(t.children);if(e)return e}}}function h(e){const t=[];for(const n of e)if(n.children&&n.children.length>0){t.push(n.value);t.push(...h(n.children))}return t}function u(e,t,n){const s=t[n];if(!s)return null;const r=e=>t[e]?.node.value;switch(e){case"ArrowDown":{const e=r(n+1);return e?{type:"focus",value:e}:null}case"ArrowUp":{const e=r(n-1);return e?{type:"focus",value:e}:null}case"ArrowRight":{if(!s.hasChildren)return null;if(!s.expanded)return{type:"expand",value:s.node.value};const e=t[n+1];return e&&e.parentValue===s.node.value?{type:"focus",value:e.node.value}:null}case"ArrowLeft":if(s.hasChildren&&s.expanded)return{type:"collapse",value:s.node.value};return s.parentValue?{type:"focus",value:s.parentValue}:null;case"Home":{const e=r(0);return e?{type:"focus",value:e}:null}case"End":{const e=r(t.length-1);return e?{type:"focus",value:e}:null}case"Enter":case" ":return{type:"activate",value:s.node.value};default:return null}}const f=()=>`:host{background:var(--pf-treeview-bg);border:1px solid var(--pf-treeview-border);border-radius:var(--radius-md);display:block;padding:var(--space-2)}:host([hidden]){display:none}:host{--pf-tree-active-ring:none;outline:none}:host(:focus-visible){--pf-tree-active-ring:var(--pf-treeview-focus-ring, var(--pf-focus-ring))}`;let d=0;const p=t(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=s(this,"pfChange");this.pfExpandedChange=s(this,"pfExpandedChange")}get el(){return this}value="";expanded="";label;pfChange;pfExpandedChange;activeValue="";uid=++d;componentWillLoad(){if(!this.value)this.value=c(this.tree)??"";this.activeValue=this.value;this.sync()}componentDidLoad(){this.sync()}handleStateChange(){this.sync()}async refresh(){this.sync()}async expandAll(){this.setExpanded(h(this.tree))}async collapseAll(){this.setExpanded([])}get tree(){const e=t=>Array.from(t.querySelectorAll("pf-tree-item")).filter((e=>e.parentElement===t)).map((t=>({el:t,value:t.value??t.getAttribute("value")??"",disabled:t.disabled??t.hasAttribute("disabled"),children:e(t)})));return e(this.el)}get openValues(){return i(this.expanded)}get visible(){return l(this.tree,this.openValues)}sync(){const e=new Set(this.openValues);let t=0;const n=(s,r)=>{for(const a of s){const s=a.el;if(!a.el.id)a.el.id=`pf-tree-${this.uid}-item-${t+=1}`;s.level=r;s.selected=a.value===this.value;s.hasChildren=a.children.length>0;s.expanded=a.children.length>0&&e.has(a.value);s.active=a.value===this.activeValue;n(a.children,r+1)}};n(this.tree,1);const s=this.visible;if(s.length===0)return;if(!s.some((e=>e.node.value===this.activeValue))){const e=s.find((e=>e.node.value===this.value))??s[0];this.activeValue=e.node.value;this.sync()}}get activeId(){const e=this.visible.find((e=>e.node.value===this.activeValue));return e?.node.el.id||undefined}setExpanded(e){const t=o(e);if(t===this.expanded)return;this.expanded=t;this.sync();this.pfExpandedChange.emit({value:t,values:e})}toggle(e,t){const n=new Set(this.openValues);const s=t??!n.has(e);if(s)n.add(e);else n.delete(e);this.setExpanded(Array.from(n))}select(e){const t=this.visible.find((t=>t.node.value===e))?.node;if(!t||t.disabled)return;this.activeValue=e;if(e===this.value){this.sync();return}this.value=e;this.sync();this.pfChange.emit({value:e})}handleSelect(e){e.stopPropagation();this.select(e.detail.value)}handleToggle(e){e.stopPropagation();this.toggle(e.detail.value)}handleKeyDown(e){if(e.defaultPrevented)return;const t=this.visible;const n=t.findIndex((e=>e.node.value===this.activeValue));const s=u(e.key,t,n);if(!s)return;e.preventDefault();if(s.type==="focus"){this.activeValue=s.value;this.sync();return}if(s.type==="expand"||s.type==="collapse"){this.toggle(s.value,s.type==="expand");return}this.select(s.value);if(t[n]?.hasChildren)this.toggle(s.value)}handleStructureChange(e){e.stopPropagation();this.sync()}render(){return r(a,{key:"a39e6df109c516369723544040b29914e5ba596d",role:"tree",tabindex:"0","aria-label":this.label,"aria-activedescendant":this.activeId},r("slot",{key:"e50cbfba93aadd34fefad3399af4ecc7aa468fdf",onSlotchange:()=>this.refresh()}))}static get watchers(){return{value:[{handleStateChange:0}],expanded:[{handleStateChange:0}]}}static get style(){return f()}},[769,"pf-tree-view",{value:[1537],expanded:[1537],label:[1],activeValue:[32],refresh:[64],expandAll:[64],collapseAll:[64]},[[0,"pfTreeSelect","handleSelect"],[0,"pfTreeToggle","handleToggle"],[0,"keydown","handleKeyDown"],[0,"pfTreeStructure","handleStructureChange"]],{value:[{handleStateChange:0}],expanded:[{handleStateChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["pf-tree-view"];t.forEach((t=>{switch(t){case"pf-tree-view":if(!customElements.get(e(t))){customElements.define(e(t),p)}break}}))}v();const g=p;const y=v;export{g as PfTreeView,y as defineCustomElement};
+//# sourceMappingURL=pf-tree-view.js.map

package/dist/components/pf-tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["flattenVisibleTree","nodes","expanded","level","parentValue","open","Set","flattened","node","hasChildren","Boolean","children","length","isExpanded","has","value","push","firstEnabledTreeValue","disabled","inside","expandableTreeValues","values","resolveTreeKey","key","currentIndex","current","at","index","next","type","previous","child","first","last","pfTreeViewCss","instances","PfTreeView","__stencil_proxyCustomElement","HTMLElement","label","pfChange","pfExpandedChange","activeValue","uid","componentWillLoad","this","tree","sync","componentDidLoad","handleStateChange","refresh","expandAll","setExpanded","collapseAll","read","container","Array","from","querySelectorAll","filter","item","parentElement","map","el","getAttribute","hasAttribute","openValues","parseValueList","visible","walk","id","selected","active","some","fallback","find","activeId","undefined","formatValueList","emit","toggle","shouldOpen","add","delete","select","handleSelect","event","stopPropagation","detail","handleToggle","handleKeyDown","defaultPrevented","findIndex","intent","preventDefault","handleStructureChange","render","h","Host","role","tabindex","onSlotchange"],"sources":["../core/dist/tree.js","src/components/pf-tree-view/pf-tree-view.css?tag=pf-tree-view&encapsulation=shadow","src/components/pf-tree-view/pf-tree-view.tsx"],"sourcesContent":["//#region src/tree.ts\n/**\n* The nodes a reader can actually see, in the order they are rendered —\n* depth-first, with a closed branch's children left out.\n*\n* One flat list rather than a recursive walk per key, because every one of the\n* keyboard rules is \"the next visible node\" or \"the previous\" one, and those\n* are neighbours here.\n*/\nfunction flattenVisibleTree(nodes, expanded, level = 1, parentValue) {\n\tconst open = expanded instanceof Set ? expanded : new Set(expanded);\n\tconst flattened = [];\n\tfor (const node of nodes) {\n\t\tconst hasChildren = Boolean(node.children && node.children.length > 0);\n\t\tconst isExpanded = hasChildren && open.has(node.value);\n\t\tflattened.push({\n\t\t\tnode,\n\t\t\tlevel,\n\t\t\tparentValue,\n\t\t\thasChildren,\n\t\t\texpanded: isExpanded\n\t\t});\n\t\tif (isExpanded) flattened.push(...flattenVisibleTree(node.children, open, level + 1, node.value));\n\t}\n\treturn flattened;\n}\n/** The first node a reader can select, looking into closed branches too. */\nfunction firstEnabledTreeValue(nodes) {\n\tfor (const node of nodes) {\n\t\tif (!node.disabled) return node.value;\n\t\tif (node.children && node.children.length > 0) {\n\t\t\tconst inside = firstEnabledTreeValue(node.children);\n\t\t\tif (inside) return inside;\n\t\t}\n\t}\n}\n/** Every node that has children, which is what \"expand all\" opens. */\nfunction expandableTreeValues(nodes) {\n\tconst values = [];\n\tfor (const node of nodes) if (node.children && node.children.length > 0) {\n\t\tvalues.push(node.value);\n\t\tvalues.push(...expandableTreeValues(node.children));\n\t}\n\treturn values;\n}\n/**\n* What a key does, given the visible list and where the focus is — or `null`\n* when the key is not the tree's to handle.\n*\n* Returned as an intent rather than performed, so both layers share every\n* rule and differ only in how they move focus and set state. The two rules\n* worth stating are the horizontal ones, which are the ARIA pattern:\n*\n* - Right opens a closed branch, and on an open one moves to its first child.\n*   On a leaf it does nothing, rather than skipping to the next sibling.\n* - Left closes an open branch, and on anything else moves out to the parent.\n*\n* Enter and Space select, and also toggle a branch — which is the React\n* component's behaviour, and the reason this returns one intent at a time:\n* the caller does the selection itself and asks again for the toggle.\n*/\nfunction resolveTreeKey(key, flattened, currentIndex) {\n\tconst current = flattened[currentIndex];\n\tif (!current) return null;\n\tconst at = (index) => flattened[index]?.node.value;\n\tswitch (key) {\n\t\tcase \"ArrowDown\": {\n\t\t\tconst next = at(currentIndex + 1);\n\t\t\treturn next ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: next\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowUp\": {\n\t\t\tconst previous = at(currentIndex - 1);\n\t\t\treturn previous ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: previous\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowRight\": {\n\t\t\tif (!current.hasChildren) return null;\n\t\t\tif (!current.expanded) return {\n\t\t\t\ttype: \"expand\",\n\t\t\t\tvalue: current.node.value\n\t\t\t};\n\t\t\tconst child = flattened[currentIndex + 1];\n\t\t\treturn child && child.parentValue === current.node.value ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: child.node.value\n\t\t\t} : null;\n\t\t}\n\t\tcase \"ArrowLeft\":\n\t\t\tif (current.hasChildren && current.expanded) return {\n\t\t\t\ttype: \"collapse\",\n\t\t\t\tvalue: current.node.value\n\t\t\t};\n\t\t\treturn current.parentValue ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: current.parentValue\n\t\t\t} : null;\n\t\tcase \"Home\": {\n\t\t\tconst first = at(0);\n\t\t\treturn first ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: first\n\t\t\t} : null;\n\t\t}\n\t\tcase \"End\": {\n\t\t\tconst last = at(flattened.length - 1);\n\t\t\treturn last ? {\n\t\t\t\ttype: \"focus\",\n\t\t\t\tvalue: last\n\t\t\t} : null;\n\t\t}\n\t\tcase \"Enter\":\n\t\tcase \" \": return {\n\t\t\ttype: \"activate\",\n\t\t\tvalue: current.node.value\n\t\t};\n\t\tdefault: return null;\n\t}\n}\n//#endregion\nexport { expandableTreeValues, firstEnabledTreeValue, flattenVisibleTree, resolveTreeKey };\n",":host {\n  background: var(--pf-treeview-bg);\n  border: 1px solid var(--pf-treeview-border);\n  border-radius: var(--radius-md);\n  display: block;\n  padding: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The tree is the tab stop, so the ring belongs to whichever item the keyboard\n * is on — and only while the tree itself has focus. A custom property is how\n * that reaches the item: it inherits through the shadow boundary, where\n * `:host-context()` would not work in Firefox or Safari.\n */\n:host {\n  --pf-tree-active-ring: none;\n  outline: none;\n}\n\n:host(:focus-visible) {\n  --pf-tree-active-ring: var(--pf-treeview-focus-ring, var(--pf-focus-ring));\n}\n","import {\n  expandableTreeValues,\n  firstEnabledTreeValue,\n  type FlatTreeNode,\n  flattenVisibleTree,\n  formatValueList,\n  parseValueList,\n  resolveTreeKey,\n  type TreeNodeLike,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * Distinguishes the ids a tree generates for its items. Not `useId`, which has\n * no equivalent here, and not a shadow-scoped literal either: these ids go on\n * *light-DOM* children, so they share the document's namespace.\n */\nlet instances = 0;\n\n/** A `pf-tree-item` read the way core's rules need it. */\ninterface ItemNode extends TreeNodeLike {\n  el: HTMLElement;\n  children: ItemNode[];\n}\n\n/**\n * A tree over nested `pf-tree-item` children.\n *\n * Nesting rather than a `nodes` array, which is what a tree looks like in a\n * consumer's template anyway — and the labels are nodes, so they could not\n * cross the HTML boundary.\n *\n * The group owns what no single item can see: which one is selected, which\n * are open, the one tab stop, and the keyboard. Every rule the keyboard\n * follows is core's `resolveTreeKey`, so this and the React `TreeView` answer\n * the arrows identically.\n *\n * **The tree itself is the tab stop, not the items.** The ARIA tree pattern\n * allows either a roving tabindex or a managed `aria-activedescendant`, and\n * here only the second one works: measured in Chromium, a `tabindex=\"0\"` host\n * slotted into another host's shadow tree is skipped by sequential navigation\n * entirely when the outer host's tabindex is negative — which is exactly a\n * nested `pf-tree-item` under a roving tabindex. So the tree takes the focus\n * and tracks the active item with an IDREF, which resolves because the items\n * are its own light-DOM descendants.\n *\n * The React `TreeView` makes every visible item a tab stop, which is a gap\n * recorded in `todo.md`.\n *\n * @slot - the `pf-tree-item` children.\n */\n@Component({\n  tag: 'pf-tree-view',\n  styleUrl: 'pf-tree-view.css',\n  shadow: true,\n})\nexport class PfTreeView {\n  @Element() el!: HTMLElement;\n\n  /** The selected item's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The open branches, as one comma-separated string. */\n  @Prop({ mutable: true, reflect: true }) expanded = '';\n\n  /** The tree's accessible name. */\n  @Prop() label?: string;\n\n  /** Fires when the selection changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires when a branch opens or closes, with the open set. */\n  @Event() pfExpandedChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /**\n   * The item the keyboard is on, which is not always the selected one — the\n   * arrows move it, Enter selects. Starts on the selection, so tabbing in\n   * lands where the reader left off.\n   */\n  @State() activeValue = '';\n\n  /** Distinguishes the ids this tree generates for its light-DOM items. */\n  private uid = ++instances;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    if (!this.value) this.value = firstEnabledTreeValue(this.tree) ?? '';\n    this.activeValue = this.value;\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('value')\n  @Watch('expanded')\n  handleStateChange() {\n    this.sync();\n  }\n\n  /** Re-reads the tree, for a consumer who changed an item through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Opens every branch. */\n  @Method()\n  async expandAll() {\n    this.setExpanded(expandableTreeValues(this.tree));\n  }\n\n  /** Closes every branch. */\n  @Method()\n  async collapseAll() {\n    this.setExpanded([]);\n  }\n\n  /** The nested items, as the tree core's rules walk. */\n  private get tree(): ItemNode[] {\n    const read = (container: HTMLElement): ItemNode[] =>\n      Array.from(container.querySelectorAll<HTMLElement>('pf-tree-item'))\n        .filter((item) => item.parentElement === container)\n        .map((item) => ({\n          el: item,\n          value:\n            (item as HTMLElement & { value?: string }).value ?? item.getAttribute('value') ?? '',\n          disabled:\n            (item as HTMLElement & { disabled?: boolean }).disabled ??\n            item.hasAttribute('disabled'),\n          children: read(item),\n        }));\n\n    return read(this.el);\n  }\n\n  private get openValues(): string[] {\n    return parseValueList(this.expanded);\n  }\n\n  private get visible(): FlatTreeNode<ItemNode>[] {\n    return flattenVisibleTree(this.tree, this.openValues);\n  }\n\n  /**\n   * Pushes the tree's state onto the items: how deep each one is, whether it\n   * is selected, open, or the one the keyboard is on — and an id, because the\n   * active item is named by an IDREF from the host.\n   */\n  private sync() {\n    const open = new Set(this.openValues);\n    let index = 0;\n\n    const walk = (nodes: ItemNode[], level: number) => {\n      for (const node of nodes) {\n        const item = node.el as HTMLElement & {\n          level: number;\n          selected: boolean;\n          expanded: boolean;\n          hasChildren: boolean;\n          active: boolean;\n        };\n        // The ids go on light-DOM children, so they share the document's\n        // namespace with every other tree on the page.\n        if (!node.el.id) node.el.id = `pf-tree-${this.uid}-item-${(index += 1)}`;\n        item.level = level;\n        item.selected = node.value === this.value;\n        item.hasChildren = node.children.length > 0;\n        item.expanded = node.children.length > 0 && open.has(node.value);\n        item.active = node.value === this.activeValue;\n        walk(node.children, level + 1);\n      }\n    };\n    walk(this.tree, 1);\n\n    /*\n     * An item inside a closed branch cannot be the active one: the reader\n     * cannot see it, and `aria-activedescendant` pointing at it would tell a\n     * screen reader otherwise. Collapsing a branch therefore moves the\n     * keyboard back out to it.\n     */\n    const visible = this.visible;\n    if (visible.length === 0) return;\n    if (!visible.some((item) => item.node.value === this.activeValue)) {\n      const fallback = visible.find((item) => item.node.value === this.value) ?? visible[0];\n      this.activeValue = fallback.node.value;\n      this.sync();\n    }\n  }\n\n  /** The active item's id, which is what the host points `aria-activedescendant` at. */\n  private get activeId(): string | undefined {\n    const active = this.visible.find((item) => item.node.value === this.activeValue);\n    return active?.node.el.id || undefined;\n  }\n\n  private setExpanded(next: string[]) {\n    const value = formatValueList(next);\n    if (value === this.expanded) return;\n\n    this.expanded = value;\n    this.sync();\n    this.pfExpandedChange.emit({ value, values: next });\n  }\n\n  private toggle(value: string, open?: boolean) {\n    const current = new Set(this.openValues);\n    const shouldOpen = open ?? !current.has(value);\n\n    if (shouldOpen) current.add(value);\n    else current.delete(value);\n\n    this.setExpanded(Array.from(current));\n  }\n\n  private select(value: string) {\n    const node = this.visible.find((item) => item.node.value === value)?.node;\n    if (!node || node.disabled) return;\n\n    // The keyboard follows the selection, however it was made.\n    this.activeValue = value;\n    if (value === this.value) {\n      this.sync();\n      return;\n    }\n\n    this.value = value;\n    this.sync();\n    this.pfChange.emit({ value });\n  }\n\n  /** An item asking to be selected. The group decides. */\n  @Listen('pfTreeSelect')\n  handleSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.select(event.detail.value);\n  }\n\n  /** An item's twisty asking to open or close it. */\n  @Listen('pfTreeToggle')\n  handleToggle(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.toggle(event.detail.value);\n  }\n\n  /**\n   * Every key rule is core's; this only carries the intent out. A key core\n   * does not claim is left to the browser.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const visible = this.visible;\n    const currentIndex = visible.findIndex((item) => item.node.value === this.activeValue);\n    const intent = resolveTreeKey(event.key, visible, currentIndex);\n    if (!intent) return;\n\n    event.preventDefault();\n\n    if (intent.type === 'focus') {\n      // The keyboard moves without any DOM focus moving: the tree keeps it.\n      this.activeValue = intent.value;\n      this.sync();\n      return;\n    }\n    if (intent.type === 'expand' || intent.type === 'collapse') {\n      this.toggle(intent.value, intent.type === 'expand');\n      return;\n    }\n\n    // Activation both selects and toggles, as a click on each half would.\n    this.select(intent.value);\n    if (visible[currentIndex]?.hasChildren) this.toggle(intent.value);\n  }\n\n  /** An item's own slot changed, so the tree below it has moved. */\n  @Listen('pfTreeStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  render() {\n    return (\n      <Host role=\"tree\" tabindex=\"0\" aria-label={this.label} aria-activedescendant={this.activeId}>\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-utility-button.d.ts

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

package/dist/components/pf-utility-button.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as r,h as o,a}from"./index.js";const n=()=>`:host{display:inline-flex}:host([hidden]){display:none}[part='button']{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--space-1);justify-content:center;line-height:1;white-space:nowrap;transition:background-color 120ms ease,     border-color 120ms ease,     color 120ms ease,     box-shadow 120ms ease;width:100%}[part='button']:focus-visible{box-shadow:var(--pf-utilitybutton-focus-ring, var(--pf-focus-ring));outline:none}[part='button']:disabled{cursor:not-allowed;opacity:0.55}:host([size='sm']) [part='button']{min-height:32px;padding:0 var(--space-2)}:host([size='md']) [part='button']{min-height:36px;padding:0 var(--space-3)}:host([variant='neutral']) [part='button']{background:var(--pf-utility-btn-neutral-bg);border-color:var(--pf-utility-btn-neutral-border);color:var(--pf-utility-btn-neutral-text)}:host([variant='neutral']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-neutral-bg-hover);border-color:var(--pf-utility-btn-neutral-border-hover)}:host([variant='brand']) [part='button']{background:var(--pf-utility-btn-brand-bg);border-color:var(--pf-utility-btn-brand-border);color:var(--pf-utility-btn-brand-text)}:host([variant='brand']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-brand-bg-hover)}:host([variant='destructive']) [part='button']{background:var(--pf-utility-btn-destructive-bg);border-color:var(--pf-utility-btn-destructive-border);color:var(--pf-utility-btn-destructive-text)}:host([variant='destructive']) [part='button']:hover:not(:disabled){background:var(--pf-utility-btn-destructive-bg-hover)}slot[name='icon']::slotted(*){display:block;flex:0 0 auto;height:16px;width:16px}@media (prefers-reduced-motion: reduce){[part='button']{transition:none}}`;const i=e(class t extends r{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}variant="neutral";size="md";disabled=false;type="button";label;tooltip;componentDidLoad(){if(this.label||this.el.getAttribute("aria-label"))return;const t=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.TEXT_NODE&&t.textContent?.trim()||t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("slot")!=="icon"));if(t)return;console.warn("[pf-utility-button] An icon-only button needs a `label` (or an `aria-label`) — this one has no accessible name.")}render(){return o(a,{key:"7086ccf4c93129e544c160cf2c4815f2a3c61484"},o("button",{key:"d938e6170a19ef49c2af1d9e784e42f4192bc530",part:"button",type:this.type,disabled:this.disabled,"aria-label":this.label,title:this.tooltip??this.label},o("slot",{key:"e59b5b03a80eecd37990c89bad5435c4cc0cc7f9",name:"icon"}),o("slot",{key:"ad287e4e52742a5c44eea10745163f065c79af07"})))}static get delegatesFocus(){return true}static get style(){return n()}},[785,"pf-utility-button",{variant:[513],size:[513],disabled:[516],type:[1],label:[1],tooltip:[1]}]);function s(){if(typeof customElements==="undefined"){return}const e=["pf-utility-button"];e.forEach((e=>{switch(e){case"pf-utility-button":if(!customElements.get(t(e))){customElements.define(t(e),i)}break}}))}s();const l=i;const u=s;export{l as PfUtilityButton,u as defineCustomElement};
+//# sourceMappingURL=pf-utility-button.js.map

package/dist/components/pf-utility-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfUtilityButtonCss","PfUtilityButton","__stencil_proxyCustomElement","HTMLElement","variant","size","disabled","type","label","tooltip","componentDidLoad","this","el","getAttribute","hasText","Array","from","childNodes","some","node","nodeType","Node","TEXT_NODE","textContent","trim","ELEMENT_NODE","console","warn","render","h","Host","key","part","title","name"],"sources":["src/components/pf-utility-button/pf-utility-button.css?tag=pf-utility-button&encapsulation=shadow","src/components/pf-utility-button/pf-utility-button.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n[part='button'] {\n  align-items: center;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  gap: var(--space-1);\n  justify-content: center;\n  line-height: 1;\n  white-space: nowrap;\n  transition:\n    background-color 120ms ease,\n    border-color 120ms ease,\n    color 120ms ease,\n    box-shadow 120ms ease;\n  width: 100%;\n}\n\n[part='button']:focus-visible {\n  box-shadow: var(--pf-utilitybutton-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n[part='button']:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n:host([size='sm']) [part='button'] {\n  min-height: 32px;\n  padding: 0 var(--space-2);\n}\n\n:host([size='md']) [part='button'] {\n  min-height: 36px;\n  padding: 0 var(--space-3);\n}\n\n:host([variant='neutral']) [part='button'] {\n  background: var(--pf-utility-btn-neutral-bg);\n  border-color: var(--pf-utility-btn-neutral-border);\n  color: var(--pf-utility-btn-neutral-text);\n}\n\n:host([variant='neutral']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-neutral-bg-hover);\n  border-color: var(--pf-utility-btn-neutral-border-hover);\n}\n\n:host([variant='brand']) [part='button'] {\n  background: var(--pf-utility-btn-brand-bg);\n  border-color: var(--pf-utility-btn-brand-border);\n  color: var(--pf-utility-btn-brand-text);\n}\n\n:host([variant='brand']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-brand-bg-hover);\n}\n\n:host([variant='destructive']) [part='button'] {\n  background: var(--pf-utility-btn-destructive-bg);\n  border-color: var(--pf-utility-btn-destructive-border);\n  color: var(--pf-utility-btn-destructive-text);\n}\n\n:host([variant='destructive']) [part='button']:hover:not(:disabled) {\n  background: var(--pf-utility-btn-destructive-bg-hover);\n}\n\n/*\n * Sizes the icon the consumer slots in. The React library reaches it with a\n * descendant selector (`.pf-utility-button__icon svg`); across a shadow\n * boundary only `::slotted` can, and it reaches the assigned node itself\n * rather than inside it -- so a slotted `pf-icon` is sized here and sizes its\n * own svg.\n */\nslot[name='icon']::slotted(*) {\n  display: block;\n  flex: 0 0 auto;\n  height: 16px;\n  width: 16px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [part='button'] {\n    transition: none;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type PfUtilityButtonVariant = 'neutral' | 'brand' | 'destructive';\nexport type PfUtilityButtonSize = 'sm' | 'md';\n\n/**\n * A compact button for toolbars and table rows, where the affordance is often\n * an icon alone.\n *\n * @slot - the button's label. Omit it for an icon-only button, and give a\n * `label` so the button still has an accessible name.\n * @slot icon - a leading icon, usually `pf-icon`.\n * @part button - the native button element.\n */\n@Component({\n  tag: 'pf-utility-button',\n  styleUrl: 'pf-utility-button.css',\n  // delegatesFocus so focusing <pf-utility-button> reaches the real button and\n  // :focus-visible lands on the element the stylesheet rings.\n  shadow: { delegatesFocus: true },\n})\nexport class PfUtilityButton {\n  @Element() el!: HTMLElement;\n\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) variant: PfUtilityButtonVariant = 'neutral';\n\n  /** Control size. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfUtilityButtonSize = 'md';\n\n  /** Disable the button. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Mirrors the native attribute. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Accessible name. Required for an icon-only button, and also used as the\n   * native tooltip unless `tooltip` says otherwise.\n   */\n  @Prop() label?: string;\n\n  /** Native tooltip text. Defaults to `label`. */\n  @Prop() tooltip?: string;\n\n  /**\n   * An icon-only button with no name is invisible to a screen reader, and it is\n   * the mistake this component invites.\n   *\n   * Once per element, in `componentDidLoad`. `pf-icon` dedupes its own warning\n   * by icon name, but there is no equivalent key here, and a module-level flag\n   * would make the warning depend on what else happened to render first. Fifty\n   * nameless buttons are fifty real defects, and the React component is noisier\n   * still -- it warns from the render body, so once per render.\n   */\n  componentDidLoad() {\n    if (this.label || this.el.getAttribute('aria-label')) return;\n    const hasText = Array.from(this.el.childNodes).some(\n      (node) =>\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) ||\n        (node.nodeType === Node.ELEMENT_NODE && (node as Element).getAttribute('slot') !== 'icon'),\n    );\n    if (hasText) return;\n    console.warn(\n      '[pf-utility-button] An icon-only button needs a `label` (or an `aria-label`) — this one has no accessible name.',\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          part=\"button\"\n          type={this.type}\n          disabled={this.disabled}\n          aria-label={this.label}\n          title={this.tooltip ?? this.label}\n        >\n          {/*\n            The slots sit directly in the flex container rather than inside\n            wrapper spans. A `slot` is `display: contents` per the UA\n            stylesheet, so an empty one contributes no flex item and the\n            button's `gap` does not open beside it -- which a wrapper span\n            would, being a zero-width item that still counts. There is no\n            emptiness to detect.\n          */}\n          <slot name=\"icon\" />\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iDAAA,MAAMA,EAAqB,IAAM,y3D,MCqBpBC,EAAeC,EAAA,MAAAD,UAAAE,E,sGAIDC,QAAkC,UAGlCC,KAA4B,KAG5BC,SAAW,MAG5BC,KAAsC,SAMtCC,MAGAC,QAYR,gBAAAC,GACE,GAAIC,KAAKH,OAASG,KAAKC,GAAGC,aAAa,cAAe,OACtD,MAAMC,EAAUC,MAAMC,KAAKL,KAAKC,GAAGK,YAAYC,MAC5CC,GACEA,EAAKC,WAAaC,KAAKC,WAAaH,EAAKI,aAAaC,QACtDL,EAAKC,WAAaC,KAAKI,cAAiBN,EAAiBN,aAAa,UAAY,SAEvF,GAAIC,EAAS,OACbY,QAAQC,KACN,kH,CAIJ,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLzB,KAAMI,KAAKJ,KACXD,SAAUK,KAAKL,SAAQ,aACXK,KAAKH,MACjByB,MAAOtB,KAAKF,SAAWE,KAAKH,OAU5BqB,EAAA,QAAAE,IAAA,2CAAMG,KAAK,SACXL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/pf-video-player.d.ts

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

package/dist/components/pf-video-player.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as r,h as a,a as s}from"./index.js";import{c as i}from"./p-DfpCerXM.js";const o=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-field-label);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.description{color:var(--pf-field-description);font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-field-error);font-size:var(--font-size-sm);margin:0}.frame{background:var(--pf-videoplayer-bg);border:1px solid var(--pf-videoplayer-border);border-radius:var(--radius-md);overflow:hidden;width:100%}:host([aspect-ratio='16/9']) .frame{aspect-ratio:16 / 9}:host([aspect-ratio='4/3']) .frame{aspect-ratio:4 / 3}:host([aspect-ratio='1/1']) .frame{aspect-ratio:1 / 1}.frame--invalid{border-color:var(--pf-videoplayer-invalid-border)}.video{display:block;height:100%;object-fit:cover;width:100%}.empty{align-items:center;color:var(--pf-videoplayer-text-muted);display:flex;font-size:var(--font-size-sm);height:100%;justify-content:center;padding:var(--space-4);text-align:center}`;const d=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}src;sources=[];tracks=[];label;description;error;aspectRatio="16/9";controls=true;poster;preload="metadata";muted=false;loop=false;autoplay=false;video;async play(){await(this.video?.play())}async pause(){this.video?.pause()}async getVideoElement(){return this.video}get sourceList(){return Array.isArray(this.sources)?this.sources:[]}get trackList(){return Array.isArray(this.tracks)?this.tracks:[]}render(){const e=Boolean(this.src)||this.sourceList.length>0;const t=i(this.description&&"description",this.error&&"error");return a(s,{key:"8fc0e7d1dcee86193d386997324741443d2c9f44"},a("div",{key:"f78531482d720dfcf3678e1d28f41c4a9bf2ba9d",class:"field",part:"field"},this.label&&a("span",{key:"f06a90f7baae88b20a015c7395a712a741cd4dba",class:"label",part:"label",id:"label"},this.label),a("div",{key:"3164297a1ccc26a858342675d9b28572e25c371b",class:{frame:true,"frame--invalid":Boolean(this.error)},part:"frame"},e?a("video",{class:"video",part:"video",ref:e=>this.video=e,controls:this.controls,poster:this.poster,preload:this.preload,muted:this.muted,loop:this.loop,autoplay:this.autoplay,src:this.src,"aria-labelledby":this.label?"label":null,"aria-invalid":this.error?"true":null,"aria-describedby":t},this.sourceList.map((e=>a("source",{src:e.src,type:e.type}))),this.trackList.map((e=>a("track",{src:e.src,kind:e.kind,srclang:e.srclang,label:e.label,default:e.default})))):a("div",{class:"empty",part:"empty",role:"note"},a("slot",{name:"empty"},"Add a video src to display playback."))),this.description&&a("p",{key:"d2bdbc4ebe3a326cf5dacedf67c85a35c2030851",class:"description",part:"description",id:"description"},this.description),this.error&&a("p",{key:"16994f8311cc0f1d3202e1ee32dee34e1ab1daf5",class:"error",part:"error",id:"error"},this.error)))}static get style(){return o()}},[769,"pf-video-player",{src:[1],sources:[16],tracks:[16],label:[1],description:[1],error:[1],aspectRatio:[513,"aspect-ratio"],controls:[4],poster:[1],preload:[1],muted:[516],loop:[516],autoplay:[516],play:[64],pause:[64],getVideoElement:[64]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-video-player"];t.forEach((t=>{switch(t){case"pf-video-player":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}l();const c=d;const p=l;export{c as PfVideoPlayer,p as defineCustomElement};
+//# sourceMappingURL=pf-video-player.js.map

package/dist/components/pf-video-player.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfVideoPlayerCss","PfVideoPlayer","__stencil_proxyCustomElement","HTMLElement","src","sources","tracks","label","description","error","aspectRatio","controls","poster","preload","muted","loop","autoplay","video","play","this","pause","getVideoElement","sourceList","Array","isArray","trackList","render","hasVideo","Boolean","length","describedBy","composeDescribedBy","h","Host","key","class","part","id","frame","ref","node","map","source","type","track","kind","srclang","default","role","name"],"sources":["src/components/pf-video-player/pf-video-player.css?tag=pf-video-player&encapsulation=shadow","src/components/pf-video-player/pf-video-player.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-field-label);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.description {\n  color: var(--pf-field-description);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-field-error);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.frame {\n  background: var(--pf-videoplayer-bg);\n  border: 1px solid var(--pf-videoplayer-border);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  width: 100%;\n}\n\n/*\n * The ratio comes from the reflected attribute rather than a class: the\n * generated bindings set props as properties, so an unreflected prop would\n * leave no attribute for this to select on.\n */\n:host([aspect-ratio='16/9']) .frame {\n  aspect-ratio: 16 / 9;\n}\n\n:host([aspect-ratio='4/3']) .frame {\n  aspect-ratio: 4 / 3;\n}\n\n:host([aspect-ratio='1/1']) .frame {\n  aspect-ratio: 1 / 1;\n}\n\n.frame--invalid {\n  border-color: var(--pf-videoplayer-invalid-border);\n}\n\n.video {\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n\n.empty {\n  align-items: center;\n  color: var(--pf-videoplayer-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  height: 100%;\n  justify-content: center;\n  padding: var(--space-4);\n  text-align: center;\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\n/** One alternative encoding of the same video. */\nexport interface PfVideoSource {\n  src: string;\n  type?: string;\n}\n\n/** One caption, subtitle or chapter track. */\nexport interface PfVideoTrack {\n  src: string;\n  kind: 'captions' | 'chapters' | 'descriptions' | 'metadata' | 'subtitles';\n  srclang: string;\n  label: string;\n  default?: boolean;\n}\n\n/**\n * A `<video>` in a framed, fixed-ratio box, with a label, a description and\n * an error message.\n *\n * `sources` and `tracks` are **properties**, not slotted children, and this\n * is one of the few places where that is forced rather than chosen: a\n * `<source>` has to be a child of the `<video>` itself, and slotted content\n * stays in the light DOM — a slotted `<source>` would be a child of this\n * element, which the video would never look at. They are rendered into the\n * shadow `<video>` instead.\n *\n * The label names the video with an IDREF rather than a `<label for>`:\n * `for` must point at a *labelable* element and a `<video>` is not one, so\n * the React `VideoPlayer`'s `htmlFor` was silently doing nothing and the\n * video had no accessible name at all. Both layers use `aria-labelledby`\n * now, and here it is a same-root reference, which is the kind that\n * resolves.\n *\n * @slot empty - what to show when there is no video to play.\n * @part field - the wrapper around label, frame and messages.\n * @part label - the label.\n * @part frame - the fixed-ratio box.\n * @part video - the video element.\n * @part empty - the empty state's box.\n * @part description - the hint text.\n * @part error - the error message.\n */\n@Component({\n  tag: 'pf-video-player',\n  styleUrl: 'pf-video-player.css',\n  shadow: true,\n})\nexport class PfVideoPlayer {\n  @Element() el!: HTMLElement;\n\n  /** A single source. Use `sources` for several encodings. */\n  @Prop() src?: string;\n\n  /** Several encodings of the same video, best first. */\n  @Prop() sources: PfVideoSource[] = [];\n\n  /** Captions and subtitles. A video without them is not finished. */\n  @Prop() tracks: PfVideoTrack[] = [];\n\n  /** Drawn above the frame, and what names the video. */\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the frame invalid. */\n  @Prop() error?: string;\n\n  /** Reflected, because the stylesheet selects on it for the box's ratio. */\n  @Prop({ reflect: true }) aspectRatio: '16/9' | '4/3' | '1/1' = '16/9';\n\n  @Prop() controls = true;\n\n  @Prop() poster?: string;\n\n  @Prop() preload: 'none' | 'metadata' | 'auto' = 'metadata';\n\n  @Prop({ reflect: true }) muted = false;\n\n  @Prop({ reflect: true }) loop = false;\n\n  @Prop({ reflect: true }) autoplay = false;\n\n  private video?: HTMLVideoElement;\n\n  /** Starts playback, which a consumer cannot do through the shadow root. */\n  @Method()\n  async play(): Promise<void> {\n    await this.video?.play();\n  }\n\n  /** Pauses it. */\n  @Method()\n  async pause() {\n    this.video?.pause();\n  }\n\n  /** The video element itself, for anything these methods do not cover. */\n  @Method()\n  async getVideoElement(): Promise<HTMLVideoElement | undefined> {\n    return this.video;\n  }\n\n  private get sourceList(): PfVideoSource[] {\n    return Array.isArray(this.sources) ? this.sources : [];\n  }\n\n  private get trackList(): PfVideoTrack[] {\n    return Array.isArray(this.tracks) ? this.tracks : [];\n  }\n\n  render() {\n    const hasVideo = Boolean(this.src) || this.sourceList.length > 0;\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            <span class=\"label\" part=\"label\" id=\"label\">\n              {this.label}\n            </span>\n          )}\n\n          <div class={{ frame: true, 'frame--invalid': Boolean(this.error) }} part=\"frame\">\n            {hasVideo ? (\n              <video\n                class=\"video\"\n                part=\"video\"\n                ref={(node) => (this.video = node)}\n                controls={this.controls}\n                poster={this.poster}\n                preload={this.preload}\n                muted={this.muted}\n                loop={this.loop}\n                autoplay={this.autoplay}\n                src={this.src}\n                aria-labelledby={this.label ? 'label' : null}\n                aria-invalid={this.error ? 'true' : null}\n                aria-describedby={describedBy}\n              >\n                {this.sourceList.map((source) => (\n                  <source src={source.src} type={source.type} />\n                ))}\n                {this.trackList.map((track) => (\n                  <track\n                    src={track.src}\n                    kind={track.kind}\n                    srclang={track.srclang}\n                    label={track.label}\n                    default={track.default}\n                  />\n                ))}\n              </video>\n            ) : (\n              <div class=\"empty\" part=\"empty\" role=\"note\">\n                <slot name=\"empty\">Add a video src to display playback.</slot>\n              </div>\n            )}\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAmB,IAAM,g9B,MCkDlBC,EAAaC,EAAA,MAAAD,UAAAE,E,sGAIhBC,IAGAC,QAA2B,GAG3BC,OAAyB,GAGzBC,MAEAC,YAGAC,MAGiBC,YAAsC,OAEvDC,SAAW,KAEXC,OAEAC,QAAwC,WAEvBC,MAAQ,MAERC,KAAO,MAEPC,SAAW,MAE5BC,MAIR,UAAMC,SACEC,KAAKF,OAAOC,O,CAKpB,WAAME,GACJD,KAAKF,OAAOG,O,CAKd,qBAAMC,GACJ,OAAOF,KAAKF,K,CAGd,cAAYK,GACV,OAAOC,MAAMC,QAAQL,KAAKd,SAAWc,KAAKd,QAAU,E,CAGtD,aAAYoB,GACV,OAAOF,MAAMC,QAAQL,KAAKb,QAAUa,KAAKb,OAAS,E,CAGpD,MAAAoB,GACE,MAAMC,EAAWC,QAAQT,KAAKf,MAAQe,KAAKG,WAAWO,OAAS,EAC/D,MAAMC,EAAcC,EAClBZ,KAAKX,aAAe,cACpBW,KAAKV,OAAS,SAGhB,OACEuB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrBjB,KAAKZ,OACJyB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SACjClB,KAAKZ,OAIVyB,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEG,MAAO,KAAM,iBAAkBV,QAAQT,KAAKV,QAAU2B,KAAK,SACtET,EACCK,EAAA,SACEG,MAAM,QACNC,KAAK,QACLG,IAAMC,GAAUrB,KAAKF,MAAQuB,EAC7B7B,SAAUQ,KAAKR,SACfC,OAAQO,KAAKP,OACbC,QAASM,KAAKN,QACdC,MAAOK,KAAKL,MACZC,KAAMI,KAAKJ,KACXC,SAAUG,KAAKH,SACfZ,IAAKe,KAAKf,IAAG,kBACIe,KAAKZ,MAAQ,QAAU,KAAI,eAC9BY,KAAKV,MAAQ,OAAS,KAAI,mBACtBqB,GAEjBX,KAAKG,WAAWmB,KAAKC,GACpBV,EAAA,UAAQ5B,IAAKsC,EAAOtC,IAAKuC,KAAMD,EAAOC,SAEvCxB,KAAKM,UAAUgB,KAAKG,GACnBZ,EAAA,SACE5B,IAAKwC,EAAMxC,IACXyC,KAAMD,EAAMC,KACZC,QAASF,EAAME,QACfvC,MAAOqC,EAAMrC,MACbwC,QAASH,EAAMG,aAKrBf,EAAA,OAAKG,MAAM,QAAQC,KAAK,QAAQY,KAAK,QACnChB,EAAA,QAAMiB,KAAK,SAAO,0CAKvB9B,KAAKX,aACJwB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcC,GAAG,eAC1ClB,KAAKX,aAITW,KAAKV,OACJuB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BlB,KAAKV,Q","ignoreList":[]}

package/dist/components/pf-visually-hidden.d.ts

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

package/dist/components/pf-visually-hidden.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as i,a as o}from"./index.js";const a=()=>`:host{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);display:block;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([hidden]){display:none}:host([focusable]:focus),:host([focusable]:focus-within){clip:auto;clip-path:none;height:auto;margin:0;overflow:visible;position:static;white-space:normal;width:auto}`;const n=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}focusable=false;render(){return i(o,{key:"196f44613e3141b9ac8e022cd119376e57c4e4ca"},i("slot",{key:"6524bd35bbbcb027aa6b596fcf08ead6e5101bd3"}))}static get style(){return a()}},[769,"pf-visually-hidden",{focusable:[516]}]);function c(){if(typeof customElements==="undefined"){return}const t=["pf-visually-hidden"];t.forEach((t=>{switch(t){case"pf-visually-hidden":if(!customElements.get(e(t))){customElements.define(e(t),n)}break}}))}c();const l=n;const d=c;export{l as PfVisuallyHidden,d as defineCustomElement};
+//# sourceMappingURL=pf-visually-hidden.js.map

package/dist/components/pf-visually-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfVisuallyHiddenCss","PfVisuallyHidden","__stencil_proxyCustomElement","HTMLElement","focusable","render","h","Host","key"],"sources":["src/components/pf-visually-hidden/pf-visually-hidden.css?tag=pf-visually-hidden&encapsulation=shadow","src/components/pf-visually-hidden/pf-visually-hidden.tsx"],"sourcesContent":["/*\n * The host does the hiding, so the slotted content needs no cooperation: it is\n * clipped wherever it happens to be in the consumer's tree.\n */\n:host {\n  border: 0;\n  /* `clip` is the deprecated fallback the React library also carries; both are\n     kept so the two layers hide content identically in older Safari. */\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  display: block;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * Reveal on keyboard focus (skip-link pattern). `:focus-within` is what catches\n * the common case of a focusable descendant, such as a skip link's anchor;\n * `:focus` alone covers a consumer who made the host itself focusable with\n * tabindex.\n */\n:host([focusable]:focus),\n:host([focusable]:focus-within) {\n  clip: auto;\n  clip-path: none;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  /* Flow back into layout so the revealed content doesn't overlap siblings. */\n  position: static;\n  white-space: normal;\n  width: auto;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hides content visually while keeping it available to screen readers and\n * other assistive technology. Use for labels, instructions and status text\n * that are implied visually but need to be announced.\n *\n * The React component takes an `as` prop to choose its tag; a custom element's\n * tag is fixed, so wrap this instead of configuring it — `<h2><pf-visually-\n * hidden>Results</pf-visually-hidden></h2>` is still a heading named\n * \"Results\".\n *\n * @slot - the content to hide visually.\n */\n@Component({\n  tag: 'pf-visually-hidden',\n  styleUrl: 'pf-visually-hidden.css',\n  shadow: true,\n})\nexport class PfVisuallyHidden {\n  /**\n   * Reveal the content when it, or a descendant, receives keyboard focus — the\n   * classic \"skip link\" pattern. Reflected so the stylesheet can select on it.\n   */\n  @Prop({ reflect: true }) focusable = false;\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAsB,IAAM,2W,MCmBrBC,EAAgBC,EAAA,MAAAD,UAAAE,E,iFAKFC,UAAY,MAErC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}