@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/components/pf-scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfScrollAreaCss","PfScrollArea","__stencil_proxyCustomElement","HTMLElement","orientation","focusable","componentWillLoad","this","el","hasAttribute","setAttribute","render","h","Host","key"],"sources":["src/components/pf-scroll-area/pf-scroll-area.css?tag=pf-scroll-area&encapsulation=shadow","src/components/pf-scroll-area/pf-scroll-area.tsx"],"sourcesContent":[":host {\n  display: block;\n  /* Standard scrollbar styling (Firefox + modern browsers). */\n  scrollbar-color: var(--pf-scrollarea-thumb) transparent;\n  scrollbar-width: thin;\n  /* Reserve a gutter so the scrollbar never overlays (and obscures) content. */\n  scrollbar-gutter: stable;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  border-radius: var(--radius-sm);\n  box-shadow: var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n:host([orientation='vertical']) {\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n:host([orientation='horizontal']) {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:host([orientation='both']) {\n  overflow: auto;\n}\n\n/*\n * WebKit / Blink scrollbar styling. These pseudo-elements target the host's own\n * scrollbar, so they are written against `:host` rather than an inner element.\n */\n:host::-webkit-scrollbar {\n  height: 10px;\n  width: 10px;\n}\n\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n:host::-webkit-scrollbar-thumb {\n  background: var(--pf-scrollarea-thumb);\n  /* Transparent border + padding-box clip insets the thumb so it reads slimmer. */\n  background-clip: padding-box;\n  border: 2px solid transparent;\n  border-radius: var(--radius-full);\n}\n\n:host::-webkit-scrollbar-thumb:hover {\n  background: var(--pf-scrollarea-thumb-hover);\n  background-clip: padding-box;\n}\n\n:host::-webkit-scrollbar-corner {\n  background: transparent;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type PfScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';\n\n/**\n * A scrollable region with a styled, non-overlaying scrollbar.\n *\n * @slot - the content to scroll.\n */\n@Component({\n  tag: 'pf-scroll-area',\n  styleUrl: 'pf-scroll-area.css',\n  shadow: true,\n})\nexport class PfScrollArea {\n  @Element() el!: HTMLElement;\n\n  /** Which axis scrolls. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfScrollAreaOrientation = 'vertical';\n\n  /**\n   * Make the region keyboard-focusable so it can be scrolled with the arrow\n   * keys (WCAG 2.1.1). Set false when a focusable child already provides\n   * keyboard access.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * The host scrolls, so the host is what has to be focusable — there is no\n   * inner element to put the tabindex on, which is why this is set here rather\n   * than rendered.\n   *\n   * A consumer's own `tabindex` wins: read before the first render and never\n   * overwritten, so `tabindex=\"-1\"` is respected instead of being silently\n   * reset to 0.\n   */\n  componentWillLoad() {\n    if (this.focusable && !this.el.hasAttribute('tabindex')) {\n      this.el.setAttribute('tabindex', '0');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAkB,IAAM,o3B,MCcjBC,EAAYC,EAAA,MAAAD,UAAAE,E,sGAIEC,YAAuC,WAOxDC,UAAY,KAWpB,iBAAAC,GACE,GAAIC,KAAKF,YAAcE,KAAKC,GAAGC,aAAa,YAAa,CACvDF,KAAKC,GAAGE,aAAa,WAAY,I,EAIrC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/pf-section-footer.d.ts

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

package/dist/components/pf-section-footer.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as i,a}from"./index.js";const n=()=>`:host{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between;padding-top:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row}}:host([divider]){border-top:1px solid var(--pf-section-footer-border)}:host([align='start']){justify-content:flex-start}:host([align='end']){justify-content:flex-end}.heading.empty,.actions.empty{display:none}.content{min-width:0}.heading{color:var(--pf-section-footer-text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0}slot[name='description']::slotted(*){color:var(--pf-section-footer-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.4;margin:var(--space-1) 0 0}.actions{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--space-2);width:100%}@media (min-width: 640px){.actions{width:auto}}`;const o=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}divider=true;align="between";hasHeading=false;hasActions=false;componentWillLoad(){this.read()}read=()=>{const e=Array.from(this.el.children);this.hasHeading=e.some((e=>!e.hasAttribute("slot")))||Array.from(this.el.childNodes).some((e=>e.nodeType===3&&(e.textContent??"").trim()!==""));this.hasActions=e.some((e=>e.getAttribute("slot")==="actions"))};render(){return i(a,{key:"f25e894c4f0fe0dc340b29f448add3dc71afe52a"},i("div",{key:"51882857d07254c8998a34c5feaf281d55d87f51",class:"content",part:"content"},i("h3",{key:"9b67978a5a2824d5d9b8881e76c9d3ed9129ae3f",class:{heading:true,empty:!this.hasHeading},part:"heading"},i("slot",{key:"588df184573f0d84d0f0fa073e7ec7bc7007ba2f",onSlotchange:this.read})),i("slot",{key:"ab2749da402851c1dc922454db4188f1bed5fecf",name:"description"})),i("div",{key:"fa1cdc6a8a4301d6e61275998f7550057b6cd734",class:{actions:true,empty:!this.hasActions},part:"actions"},i("slot",{key:"b8585a98084951deb0d66c36a7c29a668d5f7dbc",name:"actions",onSlotchange:this.read})))}static get style(){return n()}},[769,"pf-section-footer",{divider:[516],align:[513],hasHeading:[32],hasActions:[32]}]);function c(){if(typeof customElements==="undefined"){return}const t=["pf-section-footer"];t.forEach((t=>{switch(t){case"pf-section-footer":if(!customElements.get(e(t))){customElements.define(e(t),o)}break}}))}c();const d=o;const r=c;export{d as PfSectionFooter,r as defineCustomElement};
+//# sourceMappingURL=pf-section-footer.js.map

package/dist/components/pf-section-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfSectionFooterCss","PfSectionFooter","__stencil_proxyCustomElement","HTMLElement","divider","align","hasHeading","hasActions","componentWillLoad","this","read","children","Array","from","el","some","child","hasAttribute","childNodes","node","nodeType","textContent","trim","getAttribute","render","h","Host","key","class","part","heading","empty","onSlotchange","name","actions"],"sources":["src/components/pf-section-footer/pf-section-footer.css?tag=pf-section-footer&encapsulation=shadow","src/components/pf-section-footer/pf-section-footer.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  justify-content: space-between;\n  padding-top: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    align-items: center;\n    flex-direction: row;\n  }\n}\n\n:host([divider]) {\n  border-top: 1px solid var(--pf-section-footer-border);\n}\n\n:host([align='start']) {\n  justify-content: flex-start;\n}\n\n:host([align='end']) {\n  justify-content: flex-end;\n}\n\n/*\n * Hidden rather than left out, so a later `slotchange` still arrives. Two\n * classes deep, because the actions box sets its own `display` below.\n */\n.heading.empty,\n.actions.empty {\n  display: none;\n}\n\n.content {\n  min-width: 0;\n}\n\n.heading {\n  color: var(--pf-section-footer-text);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-section-footer-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  margin: var(--space-1) 0 0;\n}\n\n.actions {\n  align-items: center;\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  width: 100%;\n}\n\n@media (--sm) {\n  .actions {\n    width: auto;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nimport type { PfSectionHeaderAlign } from '../pf-section-header/pf-section-header';\n\n/**\n * The foot of a section: an optional heading and line of text, and the\n * controls that close it off.\n *\n * The same shape as `pf-section-header` with the rule on the other edge —\n * and, unlike the header, the heading is optional here, so its box is one of\n * the ones that can be empty.\n *\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot actions - controls, which sit opposite the heading on a wide screen.\n * @part content - the box holding the heading and the description.\n * @part heading - the heading's box.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-section-footer',\n  styleUrl: 'pf-section-footer.css',\n  shadow: true,\n})\nexport class PfSectionFooter {\n  @Element() el!: HTMLElement;\n\n  /** Draw a rule above the footer. Defaults to true, as the React one does. */\n  @Prop({ reflect: true }) divider = true;\n\n  /** How the heading and the actions share the row. Reflected. */\n  @Prop({ reflect: true }) align: PfSectionHeaderAlign = 'between';\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasHeading = false;\n  @State() hasActions = 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    const children = Array.from(this.el.children);\n\n    // The heading is the default slot, so it is anything *without* a slot name\n    // — including a bare text node, which is why the text is counted too.\n    this.hasHeading =\n      children.some((child) => !child.hasAttribute('slot')) ||\n      Array.from(this.el.childNodes).some(\n        (node) => node.nodeType === 3 && (node.textContent ?? '').trim() !== '',\n      );\n    this.hasActions = children.some((child) => child.getAttribute('slot') === 'actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\" part=\"content\">\n          <h3 class={{ heading: true, empty: !this.hasHeading }} part=\"heading\">\n            <slot onSlotchange={this.read} />\n          </h3>\n          <slot name=\"description\" />\n        </div>\n\n        <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n          <slot name=\"actions\" onSlotchange={this.read} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAqB,IAAM,w4B,MCwBpBC,EAAeC,EAAA,MAAAD,UAAAE,E,sGAIDC,QAAU,KAGVC,MAA8B,UAG9CC,WAAa,MACbC,WAAa,MAGtB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACb,MAAMC,EAAWC,MAAMC,KAAKJ,KAAKK,GAAGH,UAIpCF,KAAKH,WACHK,EAASI,MAAMC,IAAWA,EAAMC,aAAa,WAC7CL,MAAMC,KAAKJ,KAAKK,GAAGI,YAAYH,MAC5BI,GAASA,EAAKC,WAAa,IAAMD,EAAKE,aAAe,IAAIC,SAAW,KAEzEb,KAAKF,WAAaI,EAASI,MAAMC,GAAUA,EAAMO,aAAa,UAAY,WAAU,EAGtF,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUC,KAAK,WACxBJ,EAAA,MAAAE,IAAA,2CAAIC,MAAO,CAAEE,QAAS,KAAMC,OAAQtB,KAAKH,YAAcuB,KAAK,WAC1DJ,EAAA,QAAAE,IAAA,2CAAMK,aAAcvB,KAAKC,QAE3Be,EAAA,QAAAE,IAAA,2CAAMM,KAAK,iBAGbR,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEM,QAAS,KAAMH,OAAQtB,KAAKF,YAAcsB,KAAK,WAC3DJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAAUD,aAAcvB,KAAKC,Q","ignoreList":[]}

package/dist/components/pf-section-header.d.ts

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,h as s,a as i}from"./index.js";const n=()=>`:host{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between;padding-bottom:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row}}:host([divider]){border-bottom:1px solid var(--pf-section-header-border)}:host([align='start']){justify-content:flex-start}:host([align='end']){justify-content:flex-end}.metadata.empty,.actions.empty{display:none}.content{min-width:0}slot[name='eyebrow']::slotted(*){color:var(--pf-section-header-text-muted);display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.04em;margin:0 0 var(--space-1);text-transform:uppercase}.heading{color:var(--pf-section-header-text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}slot[name='description']::slotted(*){color:var(--pf-section-header-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.5;margin:var(--space-1) 0 0}.metadata{align-items:center;color:var(--pf-section-header-text-muted);display:inline-flex;flex-wrap:wrap;font-size:var(--font-size-sm);gap:var(--space-2);margin-top:var(--space-2)}.actions{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--space-2);width:100%}@media (min-width: 640px){.actions{width:auto}}`;const o=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}divider=false;align="between";hasMetadata=false;hasActions=false;componentWillLoad(){this.read()}read=()=>{const e=e=>Array.from(this.el.children).some((t=>t.getAttribute("slot")===e));this.hasMetadata=e("metadata");this.hasActions=e("actions")};render(){return s(i,{key:"4ccd9a76ae1dc8921ba2a16ab7a15ced1b626986"},s("div",{key:"1df5a554bae92dd018741c0eb353f8fb6b0749d1",class:"content",part:"content"},s("slot",{key:"1559805e1974477782291d45e87bfaafa58e4bbf",name:"eyebrow"}),s("h2",{key:"ae351a3f5853a16aeaf83f0af5b959a113a7e827",class:"heading",part:"heading"},s("slot",{key:"e8f154fc36e3e77e550b28320a0e35f085d3a1ee"})),s("slot",{key:"29213ae43627969251138fc9b1b70193e693ae91",name:"description"}),s("div",{key:"55c17fef4be98e763ac1d9bbf169ad14309f240d",class:{metadata:true,empty:!this.hasMetadata},part:"metadata"},s("slot",{key:"191d9e23d9e769303862b6f1afe05b57242cafbe",name:"metadata",onSlotchange:this.read}))),s("div",{key:"ac2fb5005a90c8f49c70c04a4193c2787ed0f004",class:{actions:true,empty:!this.hasActions},part:"actions"},s("slot",{key:"02ce065806d229d45f9498715db2648c767aec10",name:"actions",onSlotchange:this.read})))}static get style(){return n()}},[769,"pf-section-header",{divider:[516],align:[513],hasMetadata:[32],hasActions:[32]}]);function c(){if(typeof customElements==="undefined"){return}const t=["pf-section-header"];t.forEach((t=>{switch(t){case"pf-section-header":if(!customElements.get(e(t))){customElements.define(e(t),o)}break}}))}c();const r=o;const d=c;export{r as PfSectionHeader,d as defineCustomElement};
+//# sourceMappingURL=pf-section-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfSectionHeaderCss","PfSectionHeader","__stencil_proxyCustomElement","HTMLElement","divider","align","hasMetadata","hasActions","componentWillLoad","this","read","slotted","name","Array","from","el","children","some","child","getAttribute","render","h","Host","key","class","part","metadata","empty","onSlotchange","actions"],"sources":["src/components/pf-section-header/pf-section-header.css?tag=pf-section-header&encapsulation=shadow","src/components/pf-section-header/pf-section-header.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  justify-content: space-between;\n  padding-bottom: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    align-items: center;\n    flex-direction: row;\n  }\n}\n\n:host([divider]) {\n  border-bottom: 1px solid var(--pf-section-header-border);\n}\n\n:host([align='start']) {\n  justify-content: flex-start;\n}\n\n:host([align='end']) {\n  justify-content: flex-end;\n}\n\n/*\n * Hidden rather than left out, so a later `slotchange` still arrives. Two\n * classes deep, because both boxes set their own `display` below.\n */\n.metadata.empty,\n.actions.empty {\n  display: none;\n}\n\n.content {\n  min-width: 0;\n}\n\nslot[name='eyebrow']::slotted(*) {\n  color: var(--pf-section-header-text-muted);\n  display: block;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.04em;\n  margin: 0 0 var(--space-1);\n  text-transform: uppercase;\n}\n\n.heading {\n  color: var(--pf-section-header-text);\n  font-size: var(--font-size-xl);\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-section-header-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.5;\n  margin: var(--space-1) 0 0;\n}\n\n.metadata {\n  align-items: center;\n  color: var(--pf-section-header-text-muted);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  margin-top: var(--space-2);\n}\n\n.actions {\n  align-items: center;\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  width: 100%;\n}\n\n@media (--sm) {\n  .actions {\n    width: auto;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfSectionHeaderAlign = 'start' | 'between' | 'end';\n\n/**\n * The heading of a section, with room for an eyebrow, a line of explanation,\n * some metadata and a control or two.\n *\n * Every optional box stays in the tree and is hidden when empty rather than\n * being left out, because a slot that is not rendered never fires\n * `slotchange` — content added later would stay invisible for good. The\n * eyebrow and the description need no box of their own, so they are styled\n * through `::slotted()` and collapse on their own.\n *\n * @slot eyebrow - small text above the heading.\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot metadata - small facts below the description.\n * @slot actions - controls, which sit opposite the heading on a wide screen.\n * @part content - the box holding everything but the actions.\n * @part heading - the heading's box.\n * @part metadata - the box holding the metadata slot.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-section-header',\n  styleUrl: 'pf-section-header.css',\n  shadow: true,\n})\nexport class PfSectionHeader {\n  @Element() el!: HTMLElement;\n\n  /** Draw a rule below the header. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) divider = false;\n\n  /** How the heading and the actions share the row. Reflected. */\n  @Prop({ reflect: true }) align: PfSectionHeaderAlign = 'between';\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasMetadata = false;\n  @State() hasActions = 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    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasMetadata = slotted('metadata');\n    this.hasActions = slotted('actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\" part=\"content\">\n          <slot name=\"eyebrow\" />\n          <h2 class=\"heading\" part=\"heading\">\n            <slot />\n          </h2>\n          <slot name=\"description\" />\n          <div class={{ metadata: true, empty: !this.hasMetadata }} part=\"metadata\">\n            <slot name=\"metadata\" onSlotchange={this.read} />\n          </div>\n        </div>\n\n        <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n          <slot name=\"actions\" onSlotchange={this.read} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAqB,IAAM,0yC,MC6BpBC,EAAeC,EAAA,MAAAD,UAAAE,E,sGAIDC,QAAU,MAGVC,MAA8B,UAG9CC,YAAc,MACdC,WAAa,MAGtB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACb,MAAMC,EAAWC,GACfC,MAAMC,KAAKL,KAAKM,GAAGC,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYP,IAE9EH,KAAKH,YAAcK,EAAQ,YAC3BF,KAAKF,WAAaI,EAAQ,UAAU,EAGtC,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUC,KAAK,WACxBJ,EAAA,QAAAE,IAAA,2CAAMX,KAAK,YACXS,EAAA,MAAAE,IAAA,2CAAIC,MAAM,UAAUC,KAAK,WACvBJ,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMX,KAAK,gBACXS,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEE,SAAU,KAAMC,OAAQlB,KAAKH,aAAemB,KAAK,YAC7DJ,EAAA,QAAAE,IAAA,2CAAMX,KAAK,WAAWgB,aAAcnB,KAAKC,SAI7CW,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEK,QAAS,KAAMF,OAAQlB,KAAKF,YAAckB,KAAK,WAC3DJ,EAAA,QAAAE,IAAA,2CAAMX,KAAK,UAAUgB,aAAcnB,KAAKC,Q","ignoreList":[]}

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

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

package/dist/components/pf-select.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as i,c as s,h as r,a as n}from"./index.js";import{o,p as a}from"./p-CC7AyfOt.js";import{c}from"./p-DfpCerXM.js";import{i as l,K as h}from"./p-g4FlTDZx.js";import{g as d,r as p}from"./p-CAz7-p8y.js";import{a as f}from"./p-Cr6IXrUk.js";import{d as u}from"./p-CkFjPRTe.js";var b=500;function v(e){return e.length===1&&e!==" "}function m(e,t){if(!v(t))return e;return e+t.toLowerCase()}function g(e){return e.length>0&&[...e].every((t=>t===e[0]))}function y(e,t,i=-1,s=()=>false){if(!t||e.length===0)return-1;const r=g(t);const n=r?t[0]:t;const o=i<0?0:r?i+1:i;for(let t=0;t<e.length;t+=1){const i=(o+t)%e.length;if(s(i))continue;if(e[i]?.trim().toLowerCase().startsWith(n))return i}return-1}const x=()=>`:host{display:block;--pf-option-text:var(--pf-select-input-text, var(--pf-input-text));--pf-option-text-disabled:var(--pf-select-input-placeholder, var(--pf-input-placeholder));--pf-option-active-bg:var(--pf-select-option-active-bg);--pf-option-active-text:var(--pf-select-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-input-label-text, var(--pf-input-text));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-select-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:hover:not(:disabled){border-color:var(--pf-input-border-hover)}.trigger:focus-visible{border-color:var(--pf-select-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-select-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-input-placeholder)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.listbox{inset:auto;margin:0;background:var(--pf-select-menu-bg);border:1px solid var(--pf-select-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-select-in var(--pf-transition-enter)}@keyframes pf-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;const k={[h.ArrowDown]:"next",[h.ArrowUp]:"previous",[h.Home]:"first",[h.End]:"last"};const w=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=s(this,"pfChange");this.pfOpenChange=s(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";open=false;label;description;error;placeholder="Select an option";required=false;disabled=false;maxVisibleOptions;pfChange;pfOpenChange;selectedLabel="";initialValue="";stopObserving;activeOption=null;typeahead="";typeaheadTimer;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.syncOptions()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}syncFormState(){this.internals.setFormValue(this.value||null);f(this.internals,Boolean(this.value),this.required,this.error)}syncOptions(){const e=this.options();let t="";for(const i of e){const e=this.optionValue(i)===this.value&&this.value!=="";i.selected=e;if(e)t=i.textContent?.trim()??""}this.selectedLabel=t}syncOpen(e,t){if(e)this.showListbox();else this.hideListbox();if(e!==t)this.pfOpenChange.emit({open:e})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onSlotChange=()=>{this.syncOptions()};async refresh(){this.syncOptions()}options(){return Array.from(this.el.querySelectorAll("pf-option"))}enabled(){return this.options().filter((e=>!e.hasAttribute("disabled")))}optionValue(e){return e.value??e.getAttribute("value")??""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}showListbox(){const e=this.listbox;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=o({getAnchor:()=>this.trigger,getFloating:()=>e,matchAnchorWidth:true,flip:true,onChange:({left:t,top:i,width:s,minWidth:r})=>{a(e,t,i);if(s!==undefined)e.style.width=`${s}px`;if(r!==undefined)e.style.minWidth=`${r}px`}});const t=this.options();const i=t.find((e=>this.optionValue(e)===this.value));this.setActive(i&&!i.hasAttribute("disabled")?i:this.enabled()[0]??null)}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;this.clearTypeahead();const e=this.listbox;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t)this.trigger?.focus()};setActive(e){for(const t of this.options()){if(t!==e)t.active=false}if(e)e.active=true;this.activeOption=e;this.syncActiveDescendant();if(e&&typeof e.scrollIntoView==="function"){e.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const e=this.trigger;if(!e||!("ariaActiveDescendantElement"in e))return;e.ariaActiveDescendantElement=this.open?this.activeOption:null}commit(e){if(e.hasAttribute("disabled"))return;const t=this.optionValue(e);this.open=false;this.trigger?.focus();if(t===this.value)return;this.value=t;this.pfChange.emit({value:t})}handleOptionSelect(e){e.stopPropagation();if(this.disabled)return;const t=this.options().find((t=>this.optionValue(t)===e.detail.value));if(t)this.commit(t)}move(e){const t=this.options();const i=d(t,(e=>e.hasAttribute("disabled")));const s=this.activeOption?t.indexOf(this.activeOption):-1;const r=p(e,i,s);if(r!==-1)this.setActive(t[r]??null)}clearTypeahead(){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.typeaheadTimer=undefined;this.typeahead=""}handleTypeahead(e){this.typeahead=m(this.typeahead,e);if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.typeaheadTimer=setTimeout((()=>this.clearTypeahead()),b);const t=this.options();const i=t.map((e=>e.textContent??""));const s=this.activeOption?t.indexOf(this.activeOption):-1;const r=y(i,this.typeahead,s,(e=>t[e].hasAttribute("disabled")));if(r===-1)return;if(this.open)this.setActive(t[r]);else this.commit(t[r])}handleKeyDown(e){if(this.disabled||e.defaultPrevented)return;const t=k[e.key];if(t){e.preventDefault();if(!this.open)this.open=true;else this.move(t);return}if(l(e.key)){e.preventDefault();if(!this.open){this.open=true}else if(this.activeOption){this.commit(this.activeOption)}return}if(v(e.key)){e.preventDefault();this.handleTypeahead(e.key)}}render(){const e=c(this.description&&"description",this.error&&"error");return r(n,{key:"24c97882ec87fd8dc346ab6b10efe9d6a23359e3"},r("div",{key:"d96e86483cad67270c6359f1594872f7638ec218",class:"field",part:"field"},this.label&&r("label",{key:"92736ce6664e9b107a85008cacccaf0e8b6175d4",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&r("span",{key:"72c82fe29714e9c3ecca4bcad72318fb0e0dc217",class:"required","aria-hidden":"true"},"*")),r("button",{key:"c07e0f5ef7f202dc1239a6868d4c5360194889a4",id:"trigger",part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",role:"combobox",disabled:this.disabled,"aria-haspopup":"listbox","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":e,onClick:()=>{if(!this.disabled)this.open=!this.open}},r("span",{key:"a745f2fcce7fd7d3e2a8d0b245d4b6e38baf934d",class:{value:true,"value--placeholder":!this.selectedLabel}},this.selectedLabel||this.placeholder),r("span",{key:"f4fe94fb5877aa8b7a9442112d897368d208e108",class:"chevron","aria-hidden":"true"},r("pf-icon",{key:"0e9c5dbedc04f727fe9be09b56a5cebbec99607f",name:"chevron-down"}))),this.description&&r("p",{key:"80e491e4ce53b694803d0f8978af584cb418ea79",class:"description",part:"description",id:"description"},this.description),this.error&&r("p",{key:"1e8e8c4d46f746981f831ca8e7574f94bd9673bb",class:"error",part:"error",id:"error"},this.error)),r("div",{key:"9daf605fa081d9e2b3f4a07e9cb41e17cd142b42",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-label":this.label??this.placeholder,style:this.maxVisibleOptions?{maxHeight:`calc(${this.maxVisibleOptions} * 36px)`,overflowY:"auto"}:undefined,onToggle:this.onToggle},r("slot",{key:"f23712d710ef4aa13b186ef5a8f075494dc7b5ca",onSlotchange:this.onSlotChange})))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}static get style(){return x()}},[833,"pf-select",{name:[513],value:[1537],open:[1540],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],maxVisibleOptions:[2,"max-visible-options"],selectedLabel:[32],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],refresh:[64]},[[0,"pfOptionSelect","handleOptionSelect"],[0,"keydown","handleKeyDown"]],{value:[{syncFormState:0},{syncOptions:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function O(){if(typeof customElements==="undefined"){return}const t=["pf-select","pf-icon"];t.forEach((t=>{switch(t){case"pf-select":if(!customElements.get(e(t))){customElements.define(e(t),w)}break;case"pf-icon":if(!customElements.get(e(t))){u()}break}}))}O();const C=w;const S=O;export{C as PfSelect,S as defineCustomElement};
+//# sourceMappingURL=pf-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["TYPEAHEAD_TIMEOUT_MS","isTypeaheadKey","key","length","nextTypeaheadBuffer","buffer","toLowerCase","isCycling","every","char","findTypeaheadMatch","labels","fromIndex","isDisabled","cycling","needle","start","step","index","trim","startsWith","pfSelectCss","MOVES","Keys","ArrowDown","ArrowUp","Home","End","PfSelect","__stencil_proxyCustomElement","HTMLElement","internals","name","value","open","label","description","error","placeholder","required","disabled","maxVisibleOptions","pfChange","pfOpenChange","selectedLabel","initialValue","stopObserving","activeOption","typeahead","typeaheadTimer","componentWillLoad","this","syncFormState","syncOptions","componentDidRender","syncActiveDescendant","disconnectedCallback","clearTimeout","setFormValue","applyControlValidity","Boolean","options","option","selected","optionValue","textContent","syncOpen","next","previous","showListbox","hideListbox","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onSlotChange","refresh","Array","from","el","querySelectorAll","enabled","filter","hasAttribute","getAttribute","listbox","shadowRoot","querySelector","trigger","panel","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","matchAnchorWidth","flip","onChange","left","top","width","minWidth","placePopover","undefined","style","chosen","find","setActive","clearTypeahead","hidePopover","onToggle","event","nowOpen","newState","focus","other","active","scrollIntoView","block","ariaActiveDescendantElement","commit","handleOptionSelect","stopPropagation","candidate","detail","move","action","enabledIndexes","getEnabledIndexes","current","indexOf","resolveListMove","handleTypeahead","setTimeout","map","match","handleKeyDown","defaultPrevented","preventDefault","isActivationKey","render","describedBy","composeDescribedBy","h","Host","class","part","htmlFor","id","type","role","onClick","popover","maxHeight","overflowY","onSlotchange"],"sources":["../core/dist/typeahead.js","src/components/pf-select/pf-select.css?tag=pf-select&encapsulation=shadow","src/components/pf-select/pf-select.tsx"],"sourcesContent":["//#region src/typeahead.ts\n/**\n* Printable-character typeahead for a listbox, menu or tree.\n*\n* The ARIA listbox pattern expects it: typing `b` jumps to the next option\n* beginning with `b`, and typing `br` narrows to `br`. The React `Select` has\n* none of this — `todo.md` has the fix — so the rules live here, where\n* `<pf-select>` and every later `pf-combobox` / `pf-multi-select` /\n* `pf-tree-view` read the same ones.\n*\n* Core owns the matching; the rendering layer owns the buffer and its timer,\n* because a timer is state and core is never a state container.\n*/\n/** How long a quiet gap ends one typeahead word, in milliseconds. */\nvar TYPEAHEAD_TIMEOUT_MS = 500;\n/**\n* Whether a key should go into the buffer at all.\n*\n* One character, so `Enter`, `ArrowDown` and `Escape` are excluded by length\n* rather than by a list that would need keeping up to date. A space is\n* deliberately *not* typeahead: in a listbox it selects.\n*/\nfunction isTypeaheadKey(key) {\n\treturn key.length === 1 && key !== \" \";\n}\n/**\n* The buffer after `key`: lower-cased and appended, nothing more.\n*\n* A repeat is *not* special-cased here. Pressing `b` four times means \"the\n* fourth option starting with b\" rather than \"an option starting with bbbb\",\n* but that is a matching question, so `findTypeaheadMatch` reads it off the\n* buffer's shape instead — which keeps this function a plain append and lets\n* the caller hold one string.\n*/\nfunction nextTypeaheadBuffer(buffer, key) {\n\tif (!isTypeaheadKey(key)) return buffer;\n\treturn buffer + key.toLowerCase();\n}\n/**\n* True when the buffer is one character repeated — including just once.\n*\n* The single-character case is the important one, and requiring two got it\n* wrong: pressing `b` while already on Banana has to move to Blackberry, the\n* way a native `<select>` does, not sit still because Banana also starts with\n* `b`. Found by a browser test on `pf-select`.\n*/\nfunction isCycling(buffer) {\n\treturn buffer.length > 0 && [...buffer].every((char) => char === buffer[0]);\n}\n/**\n* The index of the option the buffer points at, or -1.\n*\n* Searches from `fromIndex` and wraps, so a match behind the current option is\n* still found. Two modes:\n*\n* - **Narrowing** (`br`): the current option is included, because typing more\n*   of the label you are already on should keep you there rather than skip to\n*   the next `br`.\n* - **Cycling** (`b`, `bb`, `bbb`): one character repeated, searched from\n*   *after* the current option — so pressing one letter walks through the\n*   options beginning with it, which is what a native `<select>` does.\n*\n* A disabled option is never matched: the keyboard would land somewhere it\n* cannot act, which is worse than not moving.\n*/\nfunction findTypeaheadMatch(labels, buffer, fromIndex = -1, isDisabled = () => false) {\n\tif (!buffer || labels.length === 0) return -1;\n\tconst cycling = isCycling(buffer);\n\tconst needle = cycling ? buffer[0] : buffer;\n\tconst start = fromIndex < 0 ? 0 : cycling ? fromIndex + 1 : fromIndex;\n\tfor (let step = 0; step < labels.length; step += 1) {\n\t\tconst index = (start + step) % labels.length;\n\t\tif (isDisabled(index)) continue;\n\t\tif (labels[index]?.trim().toLowerCase().startsWith(needle)) return index;\n\t}\n\treturn -1;\n}\n//#endregion\nexport { TYPEAHEAD_TIMEOUT_MS, findTypeaheadMatch, isTypeaheadKey, nextTypeaheadBuffer };\n","/*\n * The generic set pf-option reads, mapped to this control's own family. They\n * inherit through the shadow boundary, so a slotted option is themed by the\n * listbox it sits in without knowing which that is.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-select-input-text, var(--pf-input-text));\n  --pf-option-text-disabled: var(--pf-select-input-placeholder, var(--pf-input-placeholder));\n  --pf-option-active-bg: var(--pf-select-option-active-bg);\n  --pf-option-active-text: var(--pf-select-option-active-text);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-input-label-text, var(--pf-input-text));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-select-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-text);\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:hover:not(:disabled) {\n  border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\n  border-color: var(--pf-select-focus-border);\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-select-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-input-placeholder);\n}\n\n.chevron {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n  transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-select-menu-bg);\n  border: 1px solid var(--pf-select-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  padding: var(--space-1);\n}\n\n.listbox:popover-open {\n  animation: pf-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-select-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .listbox:popover-open {\n    animation: none;\n  }\n}\n","import {\n  composeDescribedBy,\n  findTypeaheadMatch,\n  getEnabledIndexes,\n  isActivationKey,\n  Keys,\n  nextTypeaheadBuffer,\n  observeAnchoredPosition,\n  resolveListMove,\n  TYPEAHEAD_TIMEOUT_MS,\n  isTypeaheadKey,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n  [Keys.ArrowDown]: 'next',\n  [Keys.ArrowUp]: 'previous',\n  [Keys.Home]: 'first',\n  [Keys.End]: 'last',\n};\n\n/**\n * A form-associated single-choice select over `pf-option` children.\n *\n * The first of Wave 5, and the worked example for §2.1: the options are child\n * elements, so a label is a slot and can hold anything, where the React\n * `Select`'s `options` array can only hold a string.\n *\n * **It has typeahead, which the React component does not.** Typing `b` jumps\n * to the next option beginning with `b`, `br` narrows, and `bbb` cycles — the\n * ARIA listbox pattern, and the matching is core's so a later `pf-combobox`\n * answers the same keystrokes. `todo.md` has the React fix.\n *\n * Form-associated, so the value submits by itself. The React component fakes\n * that with a hidden `<input>` beside the trigger.\n *\n * The active option is set as an *element*, not an IDREF: the trigger is in\n * this shadow root and the options are slotted light DOM, and a cross-root\n * IDREF is absent from the accessibility tree — measured. `aria-controls` does\n * work, because the listbox itself is in this same root.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the combobox button.\n * @part listbox - the floating listbox the options are slotted into.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-select',\n  styleUrl: 'pf-select.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfSelect {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen option's value, or empty. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select an option';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Options to show before the listbox scrolls. Unset means it fits them all. */\n  @Prop() maxVisibleOptions?: number;\n\n  /** Fires when the chosen value changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The label of the chosen option, for the trigger to show. */\n  @State() selectedLabel = '';\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n  private typeahead = '';\n  private typeaheadTimer?: ReturnType<typeof setTimeout>;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n    this.syncOptions();\n  }\n\n  componentDidRender() {\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** The value changed, so the children's `selected` and the trigger follow. */\n  @Watch('value')\n  syncOptions() {\n    const options = this.options();\n    let label = '';\n\n    for (const option of options) {\n      const selected = this.optionValue(option) === this.value && this.value !== '';\n      (option as HTMLElement & { selected: boolean }).selected = selected;\n      if (selected) label = option.textContent?.trim() ?? '';\n    }\n\n    this.selectedLabel = label;\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showListbox();\n    else this.hideListbox();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the control started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** An option added or removed while mounted; re-mark the children. */\n  private onSlotChange = () => {\n    this.syncOptions();\n  };\n\n  /** Re-reads the options, for a label edited in place (which fires no slotchange). */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncOptions();\n  }\n\n  private options(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n  }\n\n  private enabled(): HTMLElement[] {\n    return this.options().filter((option) => !option.hasAttribute('disabled'));\n  }\n\n  /** The property, never the attribute: a binding may only have set the former. */\n  private optionValue(option: HTMLElement): string {\n    return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n  }\n\n  private get listbox() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private showListbox() {\n    const panel = this.listbox;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      // The listbox matches the trigger's width, as the React component does.\n      matchAnchorWidth: true,\n      flip: true,\n      /*\n       * `width` *and* `minWidth`: core reports whichever the mode calls for\n       * and leaves the other undefined — `matchAnchorWidth: true` gives a\n       * `width`, false gives a `minWidth`. Reading only `minWidth`, which is\n       * what pf-dropdown needs, left the listbox at its intrinsic 156px beside\n       * a 1216px trigger. The smoke test against a real build caught it.\n       */\n      onChange: ({ left, top, width, minWidth }) => {\n        placePopover(panel, left, top);\n        if (width !== undefined) panel.style.width = `${width}px`;\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    /*\n     * Opens on the chosen option, or the first selectable one. Landing\n     * anywhere else would make the arrows start from somewhere the user has\n     * no reason to expect.\n     */\n    const options = this.options();\n    const chosen = options.find((option) => this.optionValue(option) === this.value);\n    this.setActive(\n      chosen && !chosen.hasAttribute('disabled') ? chosen : (this.enabled()[0] ?? null),\n    );\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    this.clearTypeahead();\n    const panel = this.listbox;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  private setActive(option: HTMLElement | null) {\n    for (const other of this.options()) {\n      if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n    }\n    if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n    this.activeOption = option;\n    this.syncActiveDescendant();\n    if (option && typeof option.scrollIntoView === 'function') {\n      option.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /**\n   * Feature-detected. Where ARIA element reflection is missing there is no\n   * cross-root equivalent, so the active option stops being *announced* while\n   * the arrows and Enter still work — recorded in `todo.md`.\n   */\n  private syncActiveDescendant() {\n    const trigger = this.trigger;\n    if (!trigger || !('ariaActiveDescendantElement' in trigger)) return;\n    (\n      trigger as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n  }\n\n  private commit(option: HTMLElement) {\n    if (option.hasAttribute('disabled')) return;\n\n    const next = this.optionValue(option);\n    this.open = false;\n    this.trigger?.focus();\n\n    if (next === this.value) return;\n    this.value = next;\n    this.pfChange.emit({ value: next });\n  }\n\n  /** An option asked to be taken. The select decides, reports and closes. */\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.commit(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const options = this.options();\n    const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));\n    const current = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const next = resolveListMove(action, enabledIndexes, current);\n    if (next !== -1) this.setActive(options[next] ?? null);\n  }\n\n  private clearTypeahead() {\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.typeaheadTimer = undefined;\n    this.typeahead = '';\n  }\n\n  /**\n   * Typeahead. The buffer and its timer live here, because a timer is state\n   * and core is never a state container; the matching is core's.\n   */\n  private handleTypeahead(key: string) {\n    this.typeahead = nextTypeaheadBuffer(this.typeahead, key);\n\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.typeaheadTimer = setTimeout(() => this.clearTypeahead(), TYPEAHEAD_TIMEOUT_MS);\n\n    const options = this.options();\n    const labels = options.map((option) => option.textContent ?? '');\n    const from = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const match = findTypeaheadMatch(labels, this.typeahead, from, (index) =>\n      options[index].hasAttribute('disabled'),\n    );\n\n    if (match === -1) return;\n\n    /*\n     * Closed, typeahead *chooses* rather than merely highlighting: that is\n     * what a native `<select>` does, and with no listbox on screen a\n     * highlight nobody can see would be no feedback at all.\n     */\n    if (this.open) this.setActive(options[match]);\n    else this.commit(options[match]);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || event.defaultPrevented) return;\n\n    const move = MOVES[event.key];\n    if (move) {\n      event.preventDefault();\n      // Down or Up on a closed select opens it, as a combobox should.\n      if (!this.open) this.open = true;\n      else this.move(move);\n      return;\n    }\n\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      if (!this.open) {\n        this.open = true;\n      } else if (this.activeOption) {\n        this.commit(this.activeOption);\n      }\n      return;\n    }\n\n    // Escape is the browser's while the listbox is a `popover=\"auto\"`.\n    if (isTypeaheadKey(event.key)) {\n      event.preventDefault();\n      this.handleTypeahead(event.key);\n    }\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <button\n            id=\"trigger\"\n            part=\"trigger\"\n            class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n            type=\"button\"\n            role=\"combobox\"\n            disabled={this.disabled}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the listbox, so this IDREF resolves. */\n            aria-controls=\"listbox\"\n            aria-invalid={this.error ? 'true' : null}\n            aria-required={this.required ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => {\n              if (!this.disabled) this.open = !this.open;\n            }}\n          >\n            <span class={{ value: true, 'value--placeholder': !this.selectedLabel }}>\n              {this.selectedLabel || this.placeholder}\n            </span>\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          </button>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"listbox\"\n          part=\"listbox\"\n          class=\"listbox\"\n          popover=\"auto\"\n          role=\"listbox\"\n          aria-label={this.label ?? this.placeholder}\n          style={\n            this.maxVisibleOptions\n              ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }\n              : undefined\n          }\n          onToggle={this.onToggle}\n        >\n          <slot onSlotchange={this.onSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-sidebar-navigation.d.ts

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfSidebarNavigationCss","PfSidebarNavigation","__stencil_proxyCustomElement","HTMLElement","label","hasHeader","hasFooter","componentWillLoad","this","sync","componentDidLoad","handleStructureChange","event","stopPropagation","refresh","items","ownedByThis","item","node","parentElement","tag","tagName","toLowerCase","el","Array","from","querySelectorAll","filter","isCurrent","current","hasAttribute","slotted","name","children","some","child","getAttribute","currentIndex","resolveCurrentNavItem","map","index","entries","currentPage","orientation","render","h","Host","key","class","header","empty","part","onSlotchange","footer"],"sources":["src/components/pf-sidebar-navigation/pf-sidebar-navigation.css?tag=pf-sidebar-navigation&encapsulation=shadow","src/components/pf-sidebar-navigation/pf-sidebar-navigation.tsx"],"sourcesContent":[":host {\n  background: var(--pf-sidebar-nav-bg);\n  border: 1px solid var(--pf-sidebar-nav-border);\n  border-radius: var(--pf-sidebar-nav-radius, var(--radius-md));\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  width: 100%;\n\n  /*\n   * The bridge to the shared item. `pf-header-navigation` defines the same\n   * five from its own aliases; custom properties inherit through the shadow\n   * boundary, which is how one item element takes its colours from whichever\n   * navigation it is slotted into.\n   */\n  --pf-nav-item-text: var(--pf-sidebar-nav-text-muted);\n  --pf-nav-item-hover-text: var(--pf-sidebar-nav-text);\n  --pf-nav-item-hover-bg: var(--pf-sidebar-nav-bg-subtle);\n  --pf-nav-item-current-text: var(--pf-sidebar-nav-text);\n  --pf-nav-item-current-bg: var(--pf-sidebar-nav-bg-subtle);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Mobile first: full width, growing to a fixed column on a wider screen. */\n@media (--md) {\n  :host {\n    min-height: var(--pf-sidebar-nav-min-height, 360px);\n    width: min(100%, var(--pf-sidebar-nav-width, 280px));\n  }\n}\n\n.header,\n.footer {\n  padding: var(--space-3);\n}\n\n.header {\n  border-bottom: 1px solid var(--pf-sidebar-nav-border);\n}\n\n.footer {\n  border-top: 1px solid var(--pf-sidebar-nav-border);\n  /* Pushed to the bottom, so a short navigation still has it at the foot. */\n  margin-top: auto;\n}\n\n/*\n * Both classes rather than a bare `.empty`: an empty box here would draw a\n * rule across the sidebar, which is the most visible version of the\n * can't-collapse-a-slot-wrapper problem.\n */\n.header.empty,\n.footer.empty {\n  display: none;\n}\n\n.nav {\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n/* The sections are grid children of the nav, not of a box inside it. */\n.nav slot {\n  display: contents;\n}\n","import { resolveCurrentNavItem } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\n\n/**\n * A sidebar navigation over `pf-nav-item` children, optionally grouped into\n * `pf-nav-section`s.\n *\n * The group owns the one thing an item cannot know: which item is the current\n * page. Core's rule decides, so the React `SidebarNavigation` marks the same\n * one — and the resolution runs across every section rather than within one,\n * because `aria-current=\"page\"` names the one page the reader is on and a\n * sidebar with two marked sections would claim two.\n *\n * As with `pf-header-navigation`, the host is not a landmark of its own: the\n * React component renders an `<aside>`, and an element cannot know whether it\n * is the page's complementary region. Only the `<nav>` is rendered.\n *\n * Items are grouped: the default slot takes `pf-nav-section` children, each\n * of which owns its own `<ul>`. A navigation with no section titles is one\n * untitled section, which is exactly what the React `sections` array is — and\n * it is also the only arrangement that keeps the list semantics honest, since\n * a `<ul>` here would be a list whose children were sections rather than\n * items.\n *\n * @slot - the `pf-nav-section` children.\n * @slot header - a box above the navigation, such as a product switcher.\n * @slot footer - a box below it, pushed to the bottom.\n * @part header - the header's box.\n * @part nav - the navigation landmark.\n * @part footer - the footer's box.\n */\n@Component({\n  tag: 'pf-sidebar-navigation',\n  styleUrl: 'pf-sidebar-navigation.css',\n  shadow: true,\n})\nexport class PfSidebarNavigation {\n  @Element() el!: HTMLElement;\n\n  /** The navigation's accessible name. */\n  @Prop() label = 'Sidebar navigation';\n\n  /**\n   * Whether anything was slotted into `header` and `footer`.\n   *\n   * Asked in JS: both boxes carry a border and padding, so an empty one draws\n   * a rule across the sidebar for no reason, and a wrapper around a slot\n   * cannot be collapsed from CSS. The same arrangement as\n   * `pf-slideout-menu`'s footer.\n   */\n  @State() hasHeader = false;\n  @State() hasFooter = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * A section's own slot changed, so the items below it have moved.\n   *\n   * `slotchange` is not composed, so this is the only way the navigation\n   * hears about an item appended inside a section. The event comes from a\n   * slotted child in the navigation's own tree, so `event.target` is the\n   * section rather than the host — nothing is retargeted, which is what makes\n   * a host listener safe here and not on a child in the shadow root.\n   */\n  @Listen('pfNavStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  /**\n   * Re-reads the items, for a consumer who marked one current through its\n   * *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /**\n   * Every item this navigation owns, in document order, however deeply a\n   * section nests it — but not one belonging to a navigation nested inside\n   * this one.\n   */\n  private get items(): HTMLElement[] {\n    /*\n     * The walk up is written out rather than done with `closest`, which would\n     * need a comma selector the mock DOM may not take. The first navigation\n     * above an item is the one that owns it, so a navigation nested inside\n     * this one keeps its own.\n     */\n    const ownedByThis = (item: HTMLElement) => {\n      for (let node = item.parentElement; node; node = node.parentElement) {\n        const tag = node.tagName.toLowerCase();\n        if (tag === 'pf-sidebar-navigation' || tag === 'pf-header-navigation') {\n          return node === this.el;\n        }\n      }\n      return false;\n    };\n\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-nav-item')).filter(ownedByThis);\n  }\n\n  /**\n   * The property if the item has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(item: HTMLElement) {\n    return (item as HTMLElement & { current?: boolean }).current ?? item.hasAttribute('current');\n  }\n\n  private sync() {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasHeader = slotted('header');\n    this.hasFooter = slotted('footer');\n\n    const items = this.items;\n    const currentIndex = resolveCurrentNavItem(\n      items.map((item) => ({ current: this.isCurrent(item) })),\n    );\n\n    for (const [index, item] of items.entries()) {\n      const node = item as HTMLElement & { currentPage: boolean; orientation: string };\n      node.currentPage = index === currentIndex;\n      node.orientation = 'vertical';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ header: true, empty: !this.hasHeader }} part=\"header\">\n          <slot name=\"header\" onSlotchange={() => this.refresh()} />\n        </div>\n\n        <nav class=\"nav\" part=\"nav\" aria-label={this.label}>\n          <slot onSlotchange={() => this.refresh()} />\n        </nav>\n\n        <div class={{ footer: true, empty: !this.hasFooter }} part=\"footer\">\n          <slot name=\"footer\" onSlotchange={() => this.refresh()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAyB,IAAM,o7B,MCoCxBC,EAAmBC,EAAA,MAAAD,UAAAE,E,sGAItBC,MAAQ,qBAUPC,UAAY,MACZC,UAAY,MAGrB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAaP,qBAAAE,CAAsBC,GACpBA,EAAMC,kBACNL,KAAKC,M,CAQP,aAAMK,GACJN,KAAKC,M,CAQP,SAAYM,GAOV,MAAMC,EAAeC,IACnB,IAAK,IAAIC,EAAOD,EAAKE,cAAeD,EAAMA,EAAOA,EAAKC,cAAe,CACnE,MAAMC,EAAMF,EAAKG,QAAQC,cACzB,GAAIF,IAAQ,yBAA2BA,IAAQ,uBAAwB,CACrE,OAAOF,IAASV,KAAKe,E,EAGzB,OAAO,KAAK,EAGd,OAAOC,MAAMC,KAAKjB,KAAKe,GAAGG,iBAA8B,gBAAgBC,OAAOX,E,CAOzE,SAAAY,CAAUX,GAChB,OAAQA,EAA6CY,SAAWZ,EAAKa,aAAa,U,CAG5E,IAAArB,GACN,MAAMsB,EAAWC,GACfR,MAAMC,KAAKjB,KAAKe,GAAGU,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYJ,IAE9ExB,KAAKH,UAAY0B,EAAQ,UACzBvB,KAAKF,UAAYyB,EAAQ,UAEzB,MAAMhB,EAAQP,KAAKO,MACnB,MAAMsB,EAAeC,EACnBvB,EAAMwB,KAAKtB,IAAI,CAAQY,QAASrB,KAAKoB,UAAUX,QAGjD,IAAK,MAAOuB,EAAOvB,KAASF,EAAM0B,UAAW,CAC3C,MAAMvB,EAAOD,EACbC,EAAKwB,YAAcF,IAAUH,EAC7BnB,EAAKyB,YAAc,U,EAIvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEC,OAAQ,KAAMC,OAAQ1C,KAAKH,WAAa8C,KAAK,UACzDN,EAAA,QAAAE,IAAA,2CAAMf,KAAK,SAASoB,aAAc,IAAM5C,KAAKM,aAG/C+B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,MAAMG,KAAK,MAAK,aAAa3C,KAAKJ,OAC3CyC,EAAA,QAAAE,IAAA,2CAAMK,aAAc,IAAM5C,KAAKM,aAGjC+B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEK,OAAQ,KAAMH,OAAQ1C,KAAKF,WAAa6C,KAAK,UACzDN,EAAA,QAAAE,IAAA,2CAAMf,KAAK,SAASoB,aAAc,IAAM5C,KAAKM,a","ignoreList":[]}

package/dist/components/pf-slideout-menu.d.ts

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

package/dist/components/pf-slideout-menu.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as i,c as o,h as a,a as s}from"./index.js";import{l as n}from"./p-C-VLyxRR.js";const r=()=>`:host{display:contents}.dialog{background:none;border:0;display:none;height:100%;max-height:100%;max-width:100%;padding:0;width:100%}.dialog[open]{display:flex}:host([placement='right']) .dialog{justify-content:flex-end}:host([placement='left']) .dialog{justify-content:flex-start}.dialog::backdrop{background:var(--pf-slideoutmenu-overlay-backdrop, var(--pf-overlay-backdrop))}.panel{background:var(--pf-slideout-bg);border-color:var(--pf-slideout-border);border-style:solid;border-width:0;box-shadow:var(--pf-slideoutmenu-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));color:var(--pf-slideout-text);display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;max-width:100%}:host([placement='right']) .panel{border-left-width:1px}:host([placement='left']) .panel{border-right-width:1px}:host([size='sm']) .panel{width:min(420px, 100vw)}:host([size='md']) .panel{width:min(520px, 100vw)}:host([size='lg']) .panel{width:min(680px, 100vw)}:host([placement='right']) .dialog[open] .panel{animation:pf-slideout-in-right var(--pf-transition-slow)}:host([placement='left']) .dialog[open] .panel{animation:pf-slideout-in-left var(--pf-transition-slow)}@keyframes pf-slideout-in-right{from{transform:translateX(100%)}}@keyframes pf-slideout-in-left{from{transform:translateX(-100%)}}@media (prefers-reduced-motion: reduce){.dialog[open] .panel{animation:none}}.header,.footer{align-items:flex-start;display:flex;gap:var(--space-3);justify-content:space-between;padding:var(--space-3)}.footer[hidden]{display:none}.header{border-bottom:1px solid var(--pf-slideout-border)}.footer{border-top:1px solid var(--pf-slideout-border);justify-content:flex-end}.body{overflow-y:auto;padding:var(--space-3)}@media (min-width: 768px){.header,.body,.footer{padding:var(--space-4)}}.headings{display:grid;gap:var(--space-1);min-width:0}.title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:1.2;margin:0}.description{color:var(--pf-slideout-text-muted);font-size:var(--font-size-sm);line-height:1.45;margin:0}.close{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-slideout-text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;height:var(--space-8);justify-content:center;width:var(--space-8)}.close:hover{background:var(--pf-slideout-bg-subtle);color:var(--pf-slideout-text)}.close:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}`;const d=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOpenChange=o(this,"pfOpenChange")}get el(){return this}open=false;placement="right";size="md";heading;description;label;dismissable=true;showCloseButton=true;pfOpenChange;hasFooter=false;releaseScroll=null;componentWillLoad(){this.readFooter()}componentDidLoad(){if(this.open)this.showDialog()}disconnectedCallback(){this.unlockScroll()}async show(){this.open=true}async hide(){this.open=false}syncOpen(e,t){if(e)this.showDialog();else this.closeDialog();if(e!==t)this.pfOpenChange.emit({open:e})}readFooter(){this.hasFooter=Array.from(this.el.children).some((e=>e.getAttribute("slot")==="footer"))}get dialog(){return this.el.shadowRoot?.querySelector("dialog")??null}lockScroll(){if(this.releaseScroll)return;this.releaseScroll=n()}unlockScroll(){this.releaseScroll?.();this.releaseScroll=null}showDialog(){const e=this.dialog;if(!e||e.open)return;e.showModal();this.lockScroll()}closeDialog(){const e=this.dialog;this.unlockScroll();if(e?.open)e.close()}onCancel=e=>{if(!this.dismissable)e.preventDefault()};onClose=()=>{this.unlockScroll();if(this.open)this.open=false};onDialogClick=e=>{if(!this.dismissable||e.target!==this.dialog)return;this.open=false};render(){const e=Boolean(this.heading||this.description||this.showCloseButton);return a(s,{key:"1818b5812da54d3fd832824588a674c3cddc542a"},a("dialog",{key:"34e55f45a666da9c9da86f026f717122f2d8106a",part:"dialog",class:"dialog","aria-label":this.heading?undefined:this.label,"aria-labelledby":this.heading?"title":undefined,"aria-describedby":this.description?"description":undefined,onCancel:this.onCancel,onClose:this.onClose,onClick:this.onDialogClick},a("div",{key:"537eb70dd6bbb7c88dc8ec2e2403bf753d2b23e4",class:"panel",part:"panel"},e&&a("header",{key:"99d780e46350c08f9f47301105fa59a5ef0ea01f",class:"header",part:"header"},a("div",{key:"2e9619701ec5045edb9db1193b21c554bc48b545",class:"headings"},this.heading&&a("h2",{key:"3d78f7c7a157b0ab462cef6aa33ba603feb80539",class:"title",part:"title",id:"title"},this.heading),this.description&&a("p",{key:"dc947237348920e95daf0dd7766ef8f5555e10e1",class:"description",part:"description",id:"description"},this.description)),this.showCloseButton&&a("button",{key:"11a0b9306d9c9a8ff93f54c464ae29c28c5fdc4b",class:"close",part:"close",type:"button","aria-label":"Close",onClick:()=>this.hide()},a("svg",{key:"a4f0e7897b9610dc1afc52fcdc848cf3c4e8995c",viewBox:"0 0 16 16",width:"16",height:"16","aria-hidden":"true",focusable:"false"},a("path",{key:"28aff0cc434f02d2d94352192255a25ce0c2bf18",d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.6","stroke-linecap":"round",fill:"none"})))),a("div",{key:"865a0cb08a8f9a67480adfeaff37315d410f0369",class:"body",part:"body"},a("slot",{key:"96288f62c6e01624c8f2a091d2c6580a1939e9f5"})),a("footer",{key:"a9279652bce34ab82016ecb5d8381148c8ac53b1",class:"footer",part:"footer",hidden:!this.hasFooter},a("slot",{key:"34f493c7ed5b3c094e3c11843461ee1dc4295c4e",name:"footer",onSlotchange:()=>this.readFooter()})))))}static get watchers(){return{open:[{syncOpen:0}]}}static get style(){return r()}},[769,"pf-slideout-menu",{open:[1540],placement:[513],size:[513],heading:[1],description:[1],label:[1],dismissable:[4],showCloseButton:[4,"show-close-button"],hasFooter:[32],show:[64],hide:[64]},undefined,{open:[{syncOpen:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-slideout-menu"];t.forEach((t=>{switch(t){case"pf-slideout-menu":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}l();const c=d;const f=l;export{c as PfSlideoutMenu,f as defineCustomElement};
+//# sourceMappingURL=pf-slideout-menu.js.map

package/dist/components/pf-slideout-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfSlideoutMenuCss","PfSlideoutMenu","__stencil_proxyCustomElement","HTMLElement","open","placement","size","heading","description","label","dismissable","showCloseButton","pfOpenChange","hasFooter","releaseScroll","componentWillLoad","this","readFooter","componentDidLoad","showDialog","disconnectedCallback","unlockScroll","show","hide","syncOpen","next","previous","closeDialog","emit","Array","from","el","children","some","child","getAttribute","dialog","shadowRoot","querySelector","lockScroll","lockPageScroll","showModal","close","onCancel","event","preventDefault","onClose","onDialogClick","target","render","hasHeader","Boolean","h","Host","key","part","class","undefined","onClick","id","type","viewBox","width","height","focusable","d","stroke","fill","hidden","name","onSlotchange"],"sources":["src/components/pf-slideout-menu/pf-slideout-menu.css?tag=pf-slideout-menu&encapsulation=shadow","src/components/pf-slideout-menu/pf-slideout-menu.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/*\n * The dialog is the overlay: it fills the viewport and pins the panel to one\n * edge, so a click that lands on it rather than on the panel is an overlay\n * click. The explicit sizing is what overrides the UA's `margin: auto` and\n * `width: fit-content` for a `<dialog>`.\n */\n.dialog {\n  background: none;\n  border: 0;\n  display: none;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  padding: 0;\n  width: 100%;\n}\n\n.dialog[open] {\n  display: flex;\n}\n\n:host([placement='right']) .dialog {\n  justify-content: flex-end;\n}\n\n:host([placement='left']) .dialog {\n  justify-content: flex-start;\n}\n\n.dialog::backdrop {\n  background: var(--pf-slideoutmenu-overlay-backdrop, var(--pf-overlay-backdrop));\n}\n\n.panel {\n  background: var(--pf-slideout-bg);\n  border-color: var(--pf-slideout-border);\n  border-style: solid;\n  border-width: 0;\n  box-shadow: var(--pf-slideoutmenu-elevation-overlay-shadow, var(--pf-elevation-overlay-shadow));\n  color: var(--pf-slideout-text);\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  max-width: 100%;\n}\n\n:host([placement='right']) .panel {\n  border-left-width: 1px;\n}\n\n:host([placement='left']) .panel {\n  border-right-width: 1px;\n}\n\n:host([size='sm']) .panel {\n  width: min(420px, 100vw);\n}\n\n:host([size='md']) .panel {\n  width: min(520px, 100vw);\n}\n\n:host([size='lg']) .panel {\n  width: min(680px, 100vw);\n}\n\n/*\n * Its own copy of each: @keyframes do not cross a shadow boundary, so the\n * global sheet's definitions are invisible in here.\n */\n:host([placement='right']) .dialog[open] .panel {\n  animation: pf-slideout-in-right var(--pf-transition-slow);\n}\n\n:host([placement='left']) .dialog[open] .panel {\n  animation: pf-slideout-in-left var(--pf-transition-slow);\n}\n\n@keyframes pf-slideout-in-right {\n  from {\n    transform: translateX(100%);\n  }\n}\n\n@keyframes pf-slideout-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialog[open] .panel {\n    animation: none;\n  }\n}\n\n.header,\n.footer {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--space-3);\n  justify-content: space-between;\n  padding: var(--space-3);\n}\n\n/* `hidden` has to beat the `display: flex` above, or an empty footer shows. */\n.footer[hidden] {\n  display: none;\n}\n\n.header {\n  border-bottom: 1px solid var(--pf-slideout-border);\n}\n\n.footer {\n  border-top: 1px solid var(--pf-slideout-border);\n  justify-content: flex-end;\n}\n\n.body {\n  overflow-y: auto;\n  padding: var(--space-3);\n}\n\n@media (--md) {\n  .header,\n  .body,\n  .footer {\n    padding: var(--space-4);\n  }\n}\n\n.headings {\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.title {\n  font-size: var(--font-size-lg);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.2;\n  margin: 0;\n}\n\n.description {\n  color: var(--pf-slideout-text-muted);\n  font-size: var(--font-size-sm);\n  line-height: 1.45;\n  margin: 0;\n}\n\n.close {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-slideout-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  flex: 0 0 auto;\n  height: var(--space-8);\n  justify-content: center;\n  width: var(--space-8);\n}\n\n.close:hover {\n  background: var(--pf-slideout-bg-subtle);\n  color: var(--pf-slideout-text);\n}\n\n.close:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n","import { lockPageScroll } from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type PfSlideoutMenuPlacement = 'left' | 'right';\nexport type PfSlideoutMenuSize = 'sm' | 'md' | 'lg';\n\n/**\n * A panel that slides in from the edge of the screen — a modal dialog that\n * happens to be anchored to a side rather than centred.\n *\n * Which is why this is a native `<dialog>` opened with `showModal()`, exactly\n * as `pf-modal` is. The React component hand-rolls the whole modal contract:\n * a focus trap over `getFocusableElements`, a `focusin` listener to pull focus\n * back, Escape handling, an overlay element, and focus restoration on close —\n * about ninety lines. `showModal()` gives all of it, and the element needs\n * none of core's `trapFocus`.\n *\n * The one thing it does not give is a page-scroll lock, so that comes from\n * core's reference-counted `lockPageScroll`.\n *\n * @slot - the panel's body.\n * @slot footer - actions pinned below the body.\n * @part dialog - the native dialog, which is also the overlay.\n * @part panel - the sliding panel.\n * @part header - the header row, present only when there is a heading.\n * @part title - the heading.\n * @part description - the supporting line under the heading.\n * @part body - the scrolling region the default slot renders into.\n * @part footer - the footer region.\n * @part close - the close button.\n */\n@Component({\n  tag: 'pf-slideout-menu',\n  styleUrl: 'pf-slideout-menu.css',\n  shadow: true,\n})\nexport class PfSlideoutMenu {\n  @Element() el!: HTMLElement;\n\n  /** Whether the panel is showing. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge it slides in from. Reflected; the stylesheet positions on it. */\n  @Prop({ reflect: true }) placement: PfSlideoutMenuPlacement = 'right';\n\n  /** Panel width. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfSlideoutMenuSize = 'md';\n\n  /** The heading shown in the header. */\n  @Prop() heading?: string;\n\n  /** A supporting line under the heading. */\n  @Prop() description?: string;\n\n  /**\n   * Accessible name, for when there is no `heading` to name it.\n   *\n   * With a heading, `aria-labelledby` is used instead and points at the\n   * heading's id. That works here and not in `pf-modal` because this heading\n   * is a prop rendered into this element's own shadow root, so the IDREF never\n   * crosses a boundary — `pf-modal`'s header is slotted light DOM, which is\n   * why it has to fall back to copying text into `aria-label`.\n   */\n  @Prop() label?: string;\n\n  /** Close on Escape or a click on the overlay. Defaults to true. */\n  @Prop() dismissable = true;\n\n  /** Render the corner close button. Defaults to true. */\n  @Prop() showCloseButton = true;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /**\n   * Whether anything is slotted into the footer.\n   *\n   * Asked in JS rather than selected in CSS because a wrapper holding a\n   * `<slot>` cannot be collapsed by a `:not(:has(*))` rule — the slot element\n   * is itself a child, so the rule never matches, measured. An empty footer\n   * carries a border and padding, so it has to actually not render.\n   */\n  @State() hasFooter = false;\n\n  private releaseScroll: (() => void) | null = null;\n\n  /*\n   * Read on the way in as well as on `slotchange`, so the first paint is\n   * right: the mock DOM never fires `slotchange`, and nor does the browser\n   * before the first assignment.\n   */\n  componentWillLoad() {\n    this.readFooter();\n  }\n\n  componentDidLoad() {\n    if (this.open) this.showDialog();\n  }\n\n  disconnectedCallback() {\n    // Removed while open, the page would otherwise stay unscrollable.\n    this.unlockScroll();\n  }\n\n  /** Opens the panel. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Closes the panel. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place a state change is announced, whatever caused it. Emitting\n   * from the `close` handler instead fires for the browser-driven path and for\n   * none of the user-driven ones, because by then the element has already\n   * moved its own `open` and the guard sees no change.\n   */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showDialog();\n    else this.closeDialog();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /**\n   * Counts element children rather than `assignedNodes`, because this runs in\n   * `componentWillLoad` too, before there is a shadow root to ask.\n   */\n  private readFooter() {\n    this.hasFooter = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'footer',\n    );\n  }\n\n  private get dialog() {\n    return this.el.shadowRoot?.querySelector('dialog') ?? null;\n  }\n\n  private lockScroll() {\n    if (this.releaseScroll) return;\n    this.releaseScroll = lockPageScroll();\n  }\n\n  private unlockScroll() {\n    this.releaseScroll?.();\n    this.releaseScroll = null;\n  }\n\n  private showDialog() {\n    const dialog = this.dialog;\n    if (!dialog || dialog.open) return;\n    dialog.showModal();\n    this.lockScroll();\n  }\n\n  private closeDialog() {\n    const dialog = this.dialog;\n    this.unlockScroll();\n    if (dialog?.open) dialog.close();\n  }\n\n  /** Fires on Escape. Blocking it is how a non-dismissable panel stays put. */\n  private onCancel = (event: Event) => {\n    if (!this.dismissable) event.preventDefault();\n  };\n\n  /** Mirrors a browser-driven close back into `open`, which announces it. */\n  private onClose = () => {\n    this.unlockScroll();\n    if (this.open) this.open = false;\n  };\n\n  /**\n   * A click on the dialog itself is a click on the overlay: the panel is an\n   * inner box, so anything landing on the dialog missed the content.\n   */\n  private onDialogClick = (event: MouseEvent) => {\n    if (!this.dismissable || event.target !== this.dialog) return;\n    this.open = false;\n  };\n\n  render() {\n    const hasHeader = Boolean(this.heading || this.description || this.showCloseButton);\n\n    return (\n      <Host>\n        <dialog\n          part=\"dialog\"\n          class=\"dialog\"\n          aria-label={this.heading ? undefined : this.label}\n          aria-labelledby={this.heading ? 'title' : undefined}\n          aria-describedby={this.description ? 'description' : undefined}\n          onCancel={this.onCancel}\n          onClose={this.onClose}\n          onClick={this.onDialogClick}\n        >\n          <div class=\"panel\" part=\"panel\">\n            {hasHeader && (\n              <header class=\"header\" part=\"header\">\n                <div class=\"headings\">\n                  {this.heading && (\n                    <h2 class=\"title\" part=\"title\" id=\"title\">\n                      {this.heading}\n                    </h2>\n                  )}\n                  {this.description && (\n                    <p class=\"description\" part=\"description\" id=\"description\">\n                      {this.description}\n                    </p>\n                  )}\n                </div>\n\n                {this.showCloseButton && (\n                  <button\n                    class=\"close\"\n                    part=\"close\"\n                    type=\"button\"\n                    aria-label=\"Close\"\n                    onClick={() => this.hide()}\n                  >\n                    <svg\n                      viewBox=\"0 0 16 16\"\n                      width=\"16\"\n                      height=\"16\"\n                      aria-hidden=\"true\"\n                      focusable=\"false\"\n                    >\n                      <path\n                        d=\"M4 4l8 8M12 4l-8 8\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.6\"\n                        stroke-linecap=\"round\"\n                        fill=\"none\"\n                      />\n                    </svg>\n                  </button>\n                )}\n              </header>\n            )}\n\n            <div class=\"body\" part=\"body\">\n              <slot />\n            </div>\n\n            {/*\n              Always rendered, hidden when empty rather than omitted: a slot\n              that is not in the tree never fires `slotchange`, so omitting it\n              would make a footer added later stay invisible for good.\n            */}\n            <footer class=\"footer\" part=\"footer\" hidden={!this.hasFooter}>\n              <slot name=\"footer\" onSlotchange={() => this.readFooter()} />\n            </footer>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/pf-slider.js

@@ -0,0 +1,2 @@
+import{t as e,p as r,H as i,c as s,h as t,a}from"./index.js";import{c as d}from"./p-DfpCerXM.js";import{n as l,a as o,b as n}from"./p-BA6CMosJ.js";import{a as c}from"./p-Cr6IXrUk.js";const f=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-slider-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-slider-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-slider-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.header{align-items:center;display:flex;justify-content:space-between}.value{color:var(--pf-slider-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.slider{appearance:none;background:linear-gradient(     to right,     var(--pf-slider-action) 0,     var(--pf-slider-action) var(--pf-slider-progress, 0%),     var(--pf-slider-border) var(--pf-slider-progress, 0%),     var(--pf-slider-border) 100%   );border-radius:var(--radius-full);cursor:pointer;height:var(--pf-slider-track-height);width:100%}.slider:focus{outline:none}.slider:focus-visible{box-shadow:var(--pf-slider-focus-ring, var(--pf-focus-ring))}.slider::-webkit-slider-thumb{appearance:none;background:var(--pf-slider-bg);border:2px solid var(--pf-slider-action);border-radius:50%;box-shadow:var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));height:var(--pf-slider-thumb-size);margin-top:calc((var(--pf-slider-track-height) - var(--pf-slider-thumb-size)) / 2);width:var(--pf-slider-thumb-size)}.slider::-moz-range-thumb{background:var(--pf-slider-bg);border:2px solid var(--pf-slider-action);border-radius:50%;box-shadow:var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));height:var(--pf-slider-thumb-size);width:var(--pf-slider-thumb-size)}.slider::-moz-range-track{background:transparent;border-radius:var(--radius-full);height:var(--pf-slider-track-height)}.slider:disabled{cursor:not-allowed;opacity:0.55}.slider--invalid{background:linear-gradient(     to right,     var(--pf-slider-danger-fill) 0,     var(--pf-slider-danger-fill) var(--pf-slider-progress, 0%),     var(--pf-slider-border) var(--pf-slider-progress, 0%),     var(--pf-slider-border) 100%   )}.slider--invalid::-webkit-slider-thumb{border-color:var(--pf-slider-danger-fill)}.slider--invalid::-moz-range-thumb{border-color:var(--pf-slider-danger-fill)}`;const p=r(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfInput=s(this,"pfInput");this.pfChange=s(this,"pfChange");this.internals=this.attachInternals()}internals;name;value=0;min=0;max=100;step=1;label;description;error;showValue=true;disabled=false;pfInput;pfChange;initialValue=0;componentWillLoad(){this.initialValue=this.value;this.syncFormState()}syncFormState(){this.internals.setFormValue(`${this.current}`);c(this.internals,true,false,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}get range(){return l(Number(this.min),Number(this.max),Number(this.step))}get current(){const{min:e,max:r}=this.range;return o(Number(this.value),e,r)}onInput=e=>{this.value=Number(e.target.value);this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.current})};render(){const{min:e,max:r,step:i}=this.range;const s=this.current;const l=d(this.description&&"description",this.error&&"error");return t(a,{key:"aa9f73bc61fc164df6b960827337c57c89f3e041"},t("div",{key:"6de203487f260a1025c2a49abeef29f3a9a1e250",class:"field",part:"field"},(this.label||this.showValue)&&t("div",{key:"c02c8be4fff2bb3eafbb45c8d19c777d79f984a4",class:"header",part:"header"},this.label?t("label",{class:"label",part:"label",htmlFor:"input"},this.label):t("span",null),this.showValue&&t("span",{key:"6638b3e9b626493e92c4dd76428a0ba2637956d6",class:"value",part:"value","aria-hidden":"true"},Math.round(s))),t("input",{key:"03a97800d5dabc7d17e6f1cd91b9884485cafb42",id:"input",part:"input",class:{slider:true,"slider--invalid":Boolean(this.error)},type:"range",name:this.name,value:`${s}`,min:`${e}`,max:`${r}`,step:`${i}`,disabled:this.disabled,"aria-invalid":this.error?"true":null,"aria-describedby":l,onInput:this.onInput,onChange:this.onChange,style:{"--pf-slider-progress":`${n(s,e,r)}%`}}),this.description&&t("p",{key:"0338224959bff19c234bfe07b8bf83027d85b17d",class:"description",part:"description",id:"description"},this.description),this.error&&t("p",{key:"f469ebcbb86d81d933c0b66f578f8990d2a4b9a5",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],min:[{syncFormState:0}],max:[{syncFormState:0}]}}static get style(){return f()}},[593,"pf-slider",{name:[513],value:[1026],min:[2],max:[2],step:[2],label:[1],description:[1],error:[1],showValue:[516,"show-value"],disabled:[516],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],min:[{syncFormState:0}],max:[{syncFormState:0}]}]);function h(){if(typeof customElements==="undefined"){return}const r=["pf-slider"];r.forEach((r=>{switch(r){case"pf-slider":if(!customElements.get(e(r))){customElements.define(e(r),p)}break}}))}h();const u=p;const b=h;export{u as PfSlider,b as defineCustomElement};
+//# sourceMappingURL=pf-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfSliderCss","PfSlider","__stencil_proxyCustomElement","HTMLElement","internals","name","value","min","max","step","label","description","error","showValue","disabled","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","current","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","range","normalizeRange","Number","clampToRange","onInput","event","target","emit","onChange","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","Math","round","id","slider","Boolean","type","style","getRangePercent"],"sources":["src/components/pf-slider/pf-slider.css?tag=pf-slider&encapsulation=shadow","src/components/pf-slider/pf-slider.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-slider-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-slider-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-slider-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n}\n\n.value {\n  color: var(--pf-slider-text-muted);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.slider {\n  appearance: none;\n  background: linear-gradient(\n    to right,\n    var(--pf-slider-action) 0,\n    var(--pf-slider-action) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) 100%\n  );\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  height: var(--pf-slider-track-height);\n  width: 100%;\n}\n\n.slider:focus {\n  outline: none;\n}\n\n.slider:focus-visible {\n  box-shadow: var(--pf-slider-focus-ring, var(--pf-focus-ring));\n}\n\n.slider::-webkit-slider-thumb {\n  appearance: none;\n  background: var(--pf-slider-bg);\n  border: 2px solid var(--pf-slider-action);\n  border-radius: 50%;\n  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));\n  height: var(--pf-slider-thumb-size);\n  margin-top: calc((var(--pf-slider-track-height) - var(--pf-slider-thumb-size)) / 2);\n  width: var(--pf-slider-thumb-size);\n}\n\n.slider::-moz-range-thumb {\n  background: var(--pf-slider-bg);\n  border: 2px solid var(--pf-slider-action);\n  border-radius: 50%;\n  box-shadow: var(--pf-slider-control-thumb-outline-shadow, var(--pf-control-thumb-outline-shadow));\n  height: var(--pf-slider-thumb-size);\n  width: var(--pf-slider-thumb-size);\n}\n\n.slider::-moz-range-track {\n  background: transparent;\n  border-radius: var(--radius-full);\n  height: var(--pf-slider-track-height);\n}\n\n.slider:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.slider--invalid {\n  background: linear-gradient(\n    to right,\n    var(--pf-slider-danger-fill) 0,\n    var(--pf-slider-danger-fill) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) var(--pf-slider-progress, 0%),\n    var(--pf-slider-border) 100%\n  );\n}\n\n.slider--invalid::-webkit-slider-thumb {\n  border-color: var(--pf-slider-danger-fill);\n}\n\n.slider--invalid::-moz-range-thumb {\n  border-color: var(--pf-slider-danger-fill);\n}\n","import {\n  clampToRange,\n  composeDescribedBy,\n  getRangePercent,\n  normalizeRange,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated range slider.\n *\n * A native `<input type=\"range\">`, as the React component is — the drag, the\n * keyboard stepping and the touch handling are all the browser's, and nothing\n * here reimplements them.\n *\n * @part field - the wrapper around header, control and messages.\n * @part header - the row holding the label and the readout.\n * @part label - the label element.\n * @part value - the numeric readout.\n * @part input - the native range input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-slider',\n  styleUrl: 'pf-slider.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfSlider {\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because a form-associated element\n   * takes its submission name from the attribute, not this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = 0;\n\n  @Prop() min = 0;\n\n  @Prop() max = 100;\n\n  @Prop() step = 1;\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  /** Show the current value beside the label. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showValue = true;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires as the user drags, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: number }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: number }>;\n\n  /** The value a form reset restores, which is the initial attribute. */\n  private initialValue = 0;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('min')\n  @Watch('max')\n  syncFormState() {\n    this.internals.setFormValue(`${this.current}`);\n    /*\n     * A slider always has a value — it cannot be empty the way a text field\n     * can — so `required` would never fail and the element does not offer it.\n     * Only an explicit error can make this control invalid.\n     */\n    applyControlValidity(this.internals, true, false, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the control started with. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** The bounds, with a non-finite or inverted range made drawable. */\n  private get range() {\n    return normalizeRange(Number(this.min), Number(this.max), Number(this.step));\n  }\n\n  /** The value as rendered: always inside the bounds. */\n  private get current() {\n    const { min, max } = this.range;\n    return clampToRange(Number(this.value), min, max);\n  }\n\n  private onInput = (event: Event) => {\n    this.value = Number((event.target as HTMLInputElement).value);\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.current });\n  };\n\n  render() {\n    const { min, max, step } = this.range;\n    const current = this.current;\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 || this.showValue) && (\n            <div class=\"header\" part=\"header\">\n              {this.label ? (\n                <label class=\"label\" part=\"label\" htmlFor=\"input\">\n                  {this.label}\n                </label>\n              ) : (\n                <span />\n              )}\n              {this.showValue && (\n                // aria-hidden: the input already reports its value to\n                // assistive technology through the range role.\n                <span class=\"value\" part=\"value\" aria-hidden=\"true\">\n                  {Math.round(current)}\n                </span>\n              )}\n            </div>\n          )}\n\n          <input\n            id=\"input\"\n            part=\"input\"\n            class={{ slider: true, 'slider--invalid': Boolean(this.error) }}\n            type=\"range\"\n            name={this.name}\n            value={`${current}`}\n            min={`${min}`}\n            max={`${max}`}\n            step={`${step}`}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n            style={{ '--pf-slider-progress': `${getRangePercent(current, min, max)}%` }}\n          />\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uLAAA,MAAMA,EAAc,IAAM,22E,MCyCbC,EAAQC,EAAA,MAAAD,UAAAE,E,uLACAC,UAMMC,KAGAC,MAAQ,EAEzBC,IAAM,EAENC,IAAM,IAENC,KAAO,EAGPC,MAGAC,YAGAC,MAGiBC,UAAY,KAEZC,SAAW,MAG3BC,QAGAC,SAGDC,aAAe,EAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,MACzBa,KAAKC,e,CAOP,aAAAA,GACED,KAAKf,UAAUiB,aAAa,GAAGF,KAAKG,WAMpCC,EAAqBJ,KAAKf,UAAW,KAAM,MAAOe,KAAKP,M,CAKzD,mBAAMY,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CAIxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAIpB,SAAYY,GACV,OAAOC,EAAeC,OAAOZ,KAAKZ,KAAMwB,OAAOZ,KAAKX,KAAMuB,OAAOZ,KAAKV,M,CAIxE,WAAYa,GACV,MAAMf,IAAEA,EAAGC,IAAEA,GAAQW,KAAKU,MAC1B,OAAOG,EAAaD,OAAOZ,KAAKb,OAAQC,EAAKC,E,CAGvCyB,QAAWC,IACjBf,KAAKb,MAAQyB,OAAQG,EAAMC,OAA4B7B,OACvDa,KAAKJ,QAAQqB,KAAK,CAAE9B,MAAOa,KAAKb,OAAQ,EAGlC+B,SAAW,KACjBlB,KAAKH,SAASoB,KAAK,CAAE9B,MAAOa,KAAKG,SAAU,EAG7C,MAAAgB,GACE,MAAM/B,IAAEA,EAAGC,IAAEA,EAAGC,KAAEA,GAASU,KAAKU,MAChC,MAAMP,EAAUH,KAAKG,QACrB,MAAMiB,EAAcC,EAClBrB,KAAKR,aAAe,cACpBQ,KAAKP,OAAS,SAGhB,OACE6B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,UACpB1B,KAAKT,OAASS,KAAKN,YACnB4B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SAASC,KAAK,UACtB1B,KAAKT,MACJ+B,EAAA,SAAOG,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvC3B,KAAKT,OAGR+B,EAAA,aAEDtB,KAAKN,WAGJ4B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,QAAO,cAAa,QAC1CE,KAAKC,MAAM1B,KAMpBmB,EAAA,SAAAE,IAAA,2CACEM,GAAG,QACHJ,KAAK,QACLD,MAAO,CAAEM,OAAQ,KAAM,kBAAmBC,QAAQhC,KAAKP,QACvDwC,KAAK,QACL/C,KAAMc,KAAKd,KACXC,MAAO,GAAGgB,IACVf,IAAK,GAAGA,IACRC,IAAK,GAAGA,IACRC,KAAM,GAAGA,IACTK,SAAUK,KAAKL,SAAQ,eACTK,KAAKP,MAAQ,OAAS,KAAI,mBACtB2B,EAClBN,QAASd,KAAKc,QACdI,SAAUlB,KAAKkB,SACfgB,MAAO,CAAE,uBAAwB,GAAGC,EAAgBhC,EAASf,EAAKC,SAGnEW,KAAKR,aACJ8B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcI,GAAG,eAC1C9B,KAAKR,aAGTQ,KAAKP,OACJ6B,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQI,GAAG,SAC9B9B,KAAKP,Q","ignoreList":[]}

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

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

package/dist/components/pf-sparkline.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as a,h as r,a as s}from"./index.js";function i(t,{width:e,height:a,padding:r}){if(t.length===0)return[];if(t.length===1)return[[e/2,a/2]];const s=Math.min(...t);const i=Math.max(...t);const n=e-r*2;const o=a-r*2;if(i===s)return t.map(((e,s)=>[r+s/(t.length-1)*n,a/2]));const d=i-s;return t.map(((e,a)=>[r+a/(t.length-1)*n,r+(1-(e-s)/d)*o]))}function n(t){if(t.length<2)return"";const[e,...a]=t;return[`M ${e[0]} ${e[1]}`,...a.map((([t,e])=>`L ${t} ${e}`))].join(" ")}function o(t,e){if(t.length<2)return"";const a=n(t);const r=t[0];return`${a} L ${t[t.length-1][0]} ${e} L ${r[0]} ${e} Z`}const d=()=>`:host{display:inline-block;line-height:0}:host([hidden]){display:none}.svg{display:block;overflow:visible}.area{opacity:var(--pf-sparkline-area-opacity, 0.15)}:host([animated]) .line{animation:pf-sparkline-draw var(--duration-slow) var(--easing-standard) both;stroke-dasharray:1}@keyframes pf-sparkline-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}:host([animated]) .area{animation:pf-sparkline-fade var(--duration-slow) var(--easing-standard) both}@keyframes pf-sparkline-fade{from{opacity:0}to{opacity:var(--pf-sparkline-area-opacity, 0.15)}}:host([animated]) .dot{animation:pf-sparkline-dot var(--duration-fast) var(--easing-decelerate) var(--duration-moderate)     both}@keyframes pf-sparkline-dot{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){:host([animated]) .line,:host([animated]) .area,:host([animated]) .dot{animation:none}}`;const c=e(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}data=[];width=120;height=36;variant="line";strokeWidth=1.5;color;endDot=false;animated=false;label;get values(){if(Array.isArray(this.data))return this.data.map(Number).filter(Number.isFinite);return String(this.data??"").split(",").map((t=>Number(t.trim()))).filter(Number.isFinite)}render(){const t=Number(this.width)||120;const e=Number(this.height)||36;const a=Number(this.strokeWidth)||1.5;const d=a+2;const c=i(this.values,{width:t,height:e,padding:d});const f=n(c);const l=this.variant==="area"?o(c,e-d+a):"";const h=c[c.length-1];const p=this.color??"var(--pf-sparkline-color)";return r(s,{key:"48c34496ff9ef2f3f4a41c88306c9b889675f75a"},r("svg",{key:"a20441dd7a4ac13826ef0a9a1182e617ed401100",class:"svg",part:"svg",width:t,height:e,viewBox:`0 0 ${t} ${e}`,role:this.label?"img":"presentation","aria-label":this.label},l&&r("path",{key:"ae71a2b060e46406eb6f1e62faae67d8bd624b10",class:"area",part:"area",d:l,fill:p}),f&&r("path",{key:"ebbb9d2e7fb866410a04229752e76963a702761e",class:"line",part:"line",d:f,fill:"none",stroke:p,"stroke-width":a,"stroke-linecap":"round","stroke-linejoin":"round",pathLength:this.animated?1:undefined}),this.endDot&&h&&r("circle",{key:"43b0fe15ba268da3ec1d80b3ade57b3d12a987bc",class:"dot",part:"dot",cx:h[0],cy:h[1],r:a+1.5,fill:p})))}static get style(){return d()}},[513,"pf-sparkline",{data:[1],width:[2],height:[2],variant:[513],strokeWidth:[2,"stroke-width"],color:[1],endDot:[516,"end-dot"],animated:[516],label:[1]}]);function f(){if(typeof customElements==="undefined"){return}const e=["pf-sparkline"];e.forEach((e=>{switch(e){case"pf-sparkline":if(!customElements.get(t(e))){customElements.define(t(e),c)}break}}))}f();const l=c;const h=f;export{l as PfSparkline,h as defineCustomElement};
+//# sourceMappingURL=pf-sparkline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sparklinePoints","data","width","height","padding","length","min","Math","max","innerWidth","innerHeight","map","_","index","range","value","sparklineLinePath","points","first","rest","x","y","join","sparklineAreaPath","bottom","line","pfSparklineCss","PfSparkline","__stencil_proxyCustomElement","HTMLElement","variant","strokeWidth","color","endDot","animated","label","values","Array","isArray","this","Number","filter","isFinite","String","split","part","trim","render","area","last","stroke","h","Host","key","class","viewBox","role","d","fill","pathLength","undefined","cx","cy","r"],"sources":["../core/dist/sparkline.js","src/components/pf-sparkline/pf-sparkline.css?tag=pf-sparkline&encapsulation=shadow","src/components/pf-sparkline/pf-sparkline.tsx"],"sourcesContent":["//#region src/sparkline.ts\n/**\n* Where each value sits.\n*\n* Three edge cases, each of which the React `Sparkline` got wrong:\n*\n* - **One value** divided by `data.length - 1`, which is zero, so `x` came out\n*   `NaN` and an `endDot` rendered `cx=\"NaN\"`. A single value has no line, so\n*   it goes in the middle of the box, where a dot for it belongs.\n* - **Every value equal** fell to the `max - min || 1` guard and put the whole\n*   series on one edge of the box — the bottom, which reads as a collapse\n*   rather than as \"no change\". A flat series is centred.\n* - **No values** is an empty list, which is the one it did handle.\n*/\nfunction sparklinePoints(data, { width, height, padding }) {\n\tif (data.length === 0) return [];\n\tif (data.length === 1) return [[width / 2, height / 2]];\n\tconst min = Math.min(...data);\n\tconst max = Math.max(...data);\n\tconst innerWidth = width - padding * 2;\n\tconst innerHeight = height - padding * 2;\n\tif (max === min) return data.map((_, index) => [padding + index / (data.length - 1) * innerWidth, height / 2]);\n\tconst range = max - min;\n\treturn data.map((value, index) => [padding + index / (data.length - 1) * innerWidth, padding + (1 - (value - min) / range) * innerHeight]);\n}\n/** The line through the points, or `''` when there is no line to draw. */\nfunction sparklineLinePath(points) {\n\tif (points.length < 2) return \"\";\n\tconst [first, ...rest] = points;\n\treturn [`M ${first[0]} ${first[1]}`, ...rest.map(([x, y]) => `L ${x} ${y}`)].join(\" \");\n}\n/**\n* The same line, closed down to `bottom` and back, for the filled variant.\n*\n* A separate function rather than a flag on `sparklineLinePath`, because the\n* React version's `buildPath(points, close = false)` took one and its closing\n* branch interpolated the **boolean** into the path (`L ${lastX} ${close}`).\n* It was never reached — every call site passed one argument — so the broken\n* branch sat there looking like working code, and the area path was written\n* out a second time inline.\n*/\nfunction sparklineAreaPath(points, bottom) {\n\tif (points.length < 2) return \"\";\n\tconst line = sparklineLinePath(points);\n\tconst first = points[0];\n\treturn `${line} L ${points[points.length - 1][0]} ${bottom} L ${first[0]} ${bottom} Z`;\n}\n//#endregion\nexport { sparklineAreaPath, sparklineLinePath, sparklinePoints };\n",":host {\n  display: inline-block;\n  line-height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  display: block;\n  overflow: visible;\n}\n\n.area {\n  opacity: var(--pf-sparkline-area-opacity, 0.15);\n}\n\n/*\n * Each element needs its own copy of its `@keyframes`: they do not cross a\n * shadow boundary, so the React library's global declarations are invisible\n * here. And the durations are the three that exist — `fast`, `moderate`,\n * `slow` — because an undefined custom property makes the whole `animation`\n * shorthand invalid at computed-value time and nothing runs at all.\n */\n:host([animated]) .line {\n  animation: pf-sparkline-draw var(--duration-slow) var(--easing-standard) both;\n  stroke-dasharray: 1;\n}\n\n@keyframes pf-sparkline-draw {\n  from {\n    stroke-dashoffset: 1;\n  }\n\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n:host([animated]) .area {\n  animation: pf-sparkline-fade var(--duration-slow) var(--easing-standard) both;\n}\n\n@keyframes pf-sparkline-fade {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: var(--pf-sparkline-area-opacity, 0.15);\n  }\n}\n\n:host([animated]) .dot {\n  animation: pf-sparkline-dot var(--duration-fast) var(--easing-decelerate) var(--duration-moderate)\n    both;\n}\n\n@keyframes pf-sparkline-dot {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([animated]) .line,\n  :host([animated]) .area,\n  :host([animated]) .dot {\n    animation: none;\n  }\n}\n","import { sparklineAreaPath, sparklineLinePath, sparklinePoints } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A small line or area chart with no axes.\n *\n * All of the geometry is core's, so this and the React `Sparkline` put the\n * same numbers in the same places — including the three edge cases that were\n * wrong before the extraction: one value gave `NaN`, a flat series was pinned\n * to an edge, and the closing branch of the old path builder interpolated a\n * boolean.\n *\n * @part svg - the chart.\n * @part area - the filled region, on the `area` variant.\n * @part line - the line.\n * @part dot - the dot at the last point, when `endDot` is set.\n */\n@Component({\n  tag: 'pf-sparkline',\n  styleUrl: 'pf-sparkline.css',\n  shadow: true,\n})\nexport class PfSparkline {\n  /**\n   * The values to plot.\n   *\n   * A `number[]` for a framework consumer, and a comma-separated string for\n   * plain HTML — `data=\"1,4,2,8\"` — because Stencil coerces an attribute only\n   * for the primitive types it recognises, and an array is not one of them.\n   * Read through `values` below, never directly.\n   */\n  @Prop() data: number[] | string = [];\n\n  @Prop() width = 120;\n\n  @Prop() height = 36;\n\n  /** `line` draws only the stroke; `area` fills under it too. Reflected. */\n  @Prop({ reflect: true }) variant: 'line' | 'area' = 'line';\n\n  @Prop() strokeWidth = 1.5;\n\n  /** Overrides the token colour, for a chart that has to match its data. */\n  @Prop() color?: string;\n\n  /** Draw a dot at the last value. */\n  @Prop({ reflect: true }) endDot = false;\n\n  /**\n   * Draw the line in on first paint. Off by default. Reflected.\n   *\n   * `animated`, where the React prop is `animate`: `animate` is a **reserved\n   * public name** — `Element.prototype.animate` is the Web Animations API —\n   * and Stencil refuses to build a prop that shadows a prototype member. The\n   * React component is a function taking props and has no such collision.\n   */\n  @Prop({ reflect: true }) animated = false;\n\n  /**\n   * The chart's accessible name.\n   *\n   * Without one the chart is `presentation`: a sparkline with no name is\n   * decoration beside a number that already says what it means, and\n   * announcing an unnamed graphic is worse than skipping it.\n   */\n  @Prop() label?: string;\n\n  /** The values, however they arrived. */\n  private get values(): number[] {\n    if (Array.isArray(this.data)) return this.data.map(Number).filter(Number.isFinite);\n\n    return String(this.data ?? '')\n      .split(',')\n      .map((part) => Number(part.trim()))\n      .filter(Number.isFinite);\n  }\n\n  render() {\n    const width = Number(this.width) || 120;\n    const height = Number(this.height) || 36;\n    const strokeWidth = Number(this.strokeWidth) || 1.5;\n    const padding = strokeWidth + 2;\n\n    const points = sparklinePoints(this.values, { width, height, padding });\n    const line = sparklineLinePath(points);\n    const area =\n      this.variant === 'area' ? sparklineAreaPath(points, height - padding + strokeWidth) : '';\n    const last = points[points.length - 1];\n    const stroke = this.color ?? 'var(--pf-sparkline-color)';\n\n    return (\n      <Host>\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          width={width}\n          height={height}\n          viewBox={`0 0 ${width} ${height}`}\n          role={this.label ? 'img' : 'presentation'}\n          aria-label={this.label}\n        >\n          {area && <path class=\"area\" part=\"area\" d={area} fill={stroke} />}\n          {line && (\n            <path\n              class=\"line\"\n              part=\"line\"\n              d={line}\n              fill=\"none\"\n              stroke={stroke}\n              stroke-width={strokeWidth}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              // The dash maths below is then independent of the real length.\n              pathLength={this.animated ? 1 : undefined}\n            />\n          )}\n          {this.endDot && last && (\n            <circle\n              class=\"dot\"\n              part=\"dot\"\n              cx={last[0]}\n              cy={last[1]}\n              r={strokeWidth + 1.5}\n              fill={stroke}\n            />\n          )}\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/pf-switch.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as r,c as i,h as a,a as s}from"./index.js";import{a as n}from"./p-Cr6IXrUk.js";const c=()=>`:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-switch-track-bg);border-radius:var(--radius-full);cursor:pointer;height:24px;margin:0;position:relative;transition:background-color 120ms ease;width:44px}.input::after{background:var(--pf-switch-thumb-bg);border-radius:50%;content:'';height:20px;left:2px;position:absolute;top:2px;transition:transform 120ms ease;width:20px}.input:checked{background:var(--pf-switch-track-checked-bg)}.input:checked::after{transform:translateX(20px)}.input:focus-visible{box-shadow:var(--pf-switch-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-switch-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-switch-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}@media (prefers-reduced-motion: reduce){.input,.input::after{transition:none}}`;const o=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}internals;name;checked=false;value="on";label;error;required=false;disabled=false;pfChange;initialChecked=false;componentWillLoad(){this.initialChecked=this.checked;this.syncFormState()}syncFormState(){this.internals.setFormValue(this.checked?this.value:null);n(this.internals,this.checked,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.checked=this.initialChecked}onChange=e=>{this.checked=e.target.checked;this.pfChange.emit({checked:this.checked,value:this.value})};render(){return a(s,{key:"2b1d5bf745c871e8633aa562ef6aa619d77b27bd"},a("div",{key:"ce5a586351ff1ac9d64f446a991365085f185a2e",class:"field",part:"field"},a("input",{key:"5596a0b34fc5f91435da841b5196db5221090be4",id:"input",part:"input",class:"input",type:"checkbox",role:"switch",name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,"aria-invalid":this.error?"true":null,"aria-describedby":this.error?"error":null,onChange:this.onChange}),this.label&&a("label",{key:"59741e6dcbe31fbaf0df1ea730800ef1b5b79622",class:"label",part:"label",htmlFor:"input"},this.label)),this.error&&a("p",{key:"e1278052a8546bae276ed0eff2d74a1ccee06176",class:"error",part:"error",id:"error"},this.error))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}}static get style(){return c()}},[593,"pf-switch",{name:[513],checked:[1540],value:[1],label:[1],error:[1],required:[516],disabled:[516],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-switch"];t.forEach((t=>{switch(t){case"pf-switch":if(!customElements.get(e(t))){customElements.define(e(t),o)}break}}))}l();const d=o;const h=l;export{d as PfSwitch,h as defineCustomElement};
+//# sourceMappingURL=pf-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfSwitchCss","PfSwitch","__stencil_proxyCustomElement","HTMLElement","internals","name","checked","value","label","error","required","disabled","pfChange","initialChecked","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onChange","event","target","emit","render","h","Host","key","class","part","id","type","role","htmlFor"],"sources":["src/components/pf-switch/pf-switch.css?tag=pf-switch&encapsulation=shadow","src/components/pf-switch/pf-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.input {\n  appearance: none;\n  background: var(--pf-switch-track-bg);\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  height: 24px;\n  margin: 0;\n  position: relative;\n  transition: background-color 120ms ease;\n  width: 44px;\n}\n\n/* The thumb. */\n.input::after {\n  background: var(--pf-switch-thumb-bg);\n  border-radius: 50%;\n  content: '';\n  height: 20px;\n  left: 2px;\n  position: absolute;\n  top: 2px;\n  transition: transform 120ms ease;\n  width: 20px;\n}\n\n.input:checked {\n  background: var(--pf-switch-track-checked-bg);\n}\n\n.input:checked::after {\n  transform: translateX(20px);\n}\n\n.input:focus-visible {\n  box-shadow: var(--pf-switch-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.input:disabled + .label {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.label {\n  color: var(--pf-switch-label-text);\n  font-size: var(--font-size-md);\n}\n\n.error {\n  color: var(--pf-switch-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: var(--space-1) 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .input,\n  .input::after {\n    transition: none;\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated on/off switch.\n *\n * Built on a native checkbox with `role=\"switch\"`, exactly as the React\n * component is: a switch is a checkbox whose two states are \"on\" and \"off\"\n * rather than \"selected\" and \"not selected\", and the role is the only\n * difference assistive technology needs.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox carrying role=\"switch\".\n * @part label - the label element.\n */\n@Component({\n  tag: 'pf-switch',\n  styleUrl: 'pf-switch.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfSwitch {\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Whether the switch is on. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * What is submitted when on. Mirrors the native attribute, whose default is\n   * also `on` — a checkbox with no value still submits something.\n   */\n  @Prop() value = 'on';\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the user turns the switch on or off. */\n  @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n  /** The state a form reset restores, which is the initial attribute. */\n  private initialChecked = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormState();\n  }\n\n  @Watch('checked')\n  @Watch('error')\n  @Watch('required')\n  @Watch('value')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, when off: an unchecked checkbox is\n     * absent from the submission entirely, rather than present and empty.\n     * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n     * on, and it is what a native checkbox does.\n     */\n    this.internals.setFormValue(this.checked ? this.value : null);\n    applyControlValidity(this.internals, this.checked, this.required, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the initial state, not `false` — a native\n   * `<input type=checkbox checked>` comes back on.\n   */\n  formResetCallback() {\n    this.checked = this.initialChecked;\n  }\n\n  private onChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this.pfChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          <input\n            id=\"input\"\n            part=\"input\"\n            class=\"input\"\n            type=\"checkbox\"\n            role=\"switch\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={this.error ? 'error' : null}\n            onChange={this.onChange}\n          />\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n            </label>\n          )}\n        </div>\n        {this.error && (\n          <p class=\"error\" part=\"error\" id=\"error\">\n            {this.error}\n          </p>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAc,IAAM,4iC,MCgCbC,EAAQC,EAAA,MAAAD,UAAAE,E,wJACAC,UAWMC,KAGeC,QAAU,MAM1CC,MAAQ,KAGRC,MAGAC,MAEiBC,SAAW,MAEXC,SAAW,MAG3BC,SAGDC,eAAiB,MAEzB,iBAAAC,GACEC,KAAKF,eAAiBE,KAAKT,QAC3BS,KAAKC,e,CAOP,aAAAA,GAOED,KAAKX,UAAUa,aAAaF,KAAKT,QAAUS,KAAKR,MAAQ,MACxDW,EAAqBH,KAAKX,UAAWW,KAAKT,QAASS,KAAKL,SAAUK,KAAKN,M,CAKzE,mBAAMU,GACJ,OAAOJ,KAAKX,UAAUe,e,CAKxB,oBAAMC,GACJ,OAAOL,KAAKX,UAAUgB,gB,CAKxB,0BAAMC,GACJ,OAAON,KAAKX,UAAUkB,iB,CAOxB,iBAAAC,GACER,KAAKT,QAAUS,KAAKF,c,CAGdW,SAAYC,IAClBV,KAAKT,QAAWmB,EAAMC,OAA4BpB,QAClDS,KAAKH,SAASe,KAAK,CAAErB,QAASS,KAAKT,QAASC,MAAOQ,KAAKR,OAAQ,EAGlE,MAAAqB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACtBJ,EAAA,SAAAE,IAAA,2CACEG,GAAG,QACHD,KAAK,QACLD,MAAM,QACNG,KAAK,WACLC,KAAK,SACL/B,KAAMU,KAAKV,KACXE,MAAOQ,KAAKR,MACZD,QAASS,KAAKT,QACdI,SAAUK,KAAKL,SACfC,SAAUI,KAAKJ,SAAQ,eACTI,KAAKN,MAAQ,OAAS,KAAI,mBACtBM,KAAKN,MAAQ,QAAU,KACzCe,SAAUT,KAAKS,WAEhBT,KAAKP,OACJqB,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQI,QAAQ,SACvCtB,KAAKP,QAIXO,KAAKN,OACJoB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BnB,KAAKN,O","ignoreList":[]}

package/dist/components/pf-tab-panel.d.ts

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

package/dist/components/pf-tab-panel.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as a,a as n}from"./index.js";const c=()=>`:host{color:var(--pf-tabs-text);display:block;line-height:1.5;min-width:0}:host([hidden]){display:none}`;const i=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}value="";active=false;render(){return a(n,{key:"875b1e6db69fd49e1ffdeacb30eaa15fbd07a43e",role:"tabpanel",hidden:!this.active,tabindex:this.active?"0":null},a("slot",{key:"d5faccfbb49cc060fc64e1bf533ec85091842524"}))}static get style(){return c()}},[769,"pf-tab-panel",{value:[513],active:[1540]}]);function o(){if(typeof customElements==="undefined"){return}const t=["pf-tab-panel"];t.forEach((t=>{switch(t){case"pf-tab-panel":if(!customElements.get(e(t))){customElements.define(e(t),i)}break}}))}o();const l=i;const f=o;export{l as PfTabPanel,f as defineCustomElement};
+//# sourceMappingURL=pf-tab-panel.js.map

package/dist/components/pf-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTabPanelCss","PfTabPanel","__stencil_proxyCustomElement","HTMLElement","value","active","render","h","Host","key","role","hidden","this","tabindex"],"sources":["src/components/pf-tab-panel/pf-tab-panel.css?tag=pf-tab-panel&encapsulation=shadow","src/components/pf-tab-panel/pf-tab-panel.tsx"],"sourcesContent":[":host {\n  color: var(--pf-tabs-text);\n  display: block;\n  line-height: 1.5;\n  min-width: 0;\n}\n\n/*\n * The group hides the panels that are not on show with `hidden`, so this is\n * the rule that does the hiding -- `:host` above would otherwise override the\n * UA stylesheet's `display: none` for `[hidden]`.\n */\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One panel inside a `pf-tabs`, shown when the `pf-tab` carrying the same\n * `value` is selected.\n *\n * A sibling of its tab rather than a child of it, so that both live in the\n * consumer's tree: that is what lets the group point `aria-controls` at this\n * panel and `aria-labelledby` back at the tab, since a same-root IDREF is the\n * one that resolves.\n *\n * @slot - the panel's content.\n */\n@Component({\n  tag: 'pf-tab-panel',\n  styleUrl: 'pf-tab-panel.css',\n  shadow: true,\n})\nexport class PfTabPanel {\n  /**\n   * Pairs the panel with its tab.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-tab-panel[value=\"...\"]` in a React or\n   * Angular app finds nothing. The group reads the property.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set by the group: whether this is the panel on show. Reflected. */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host\n        role=\"tabpanel\"\n        /*\n         * `hidden` as well as the reflected `active`, because it hides the\n         * panel through the UA stylesheet — so a consumer who has not loaded\n         * this package's CSS still sees one panel rather than all of them.\n         *\n         * `false` is safe here although `hidden=\"false\"` would still hide the\n         * element: Stencil writes an attribute it finds as a *property* on the\n         * host, and `el.hidden = false` removes it. Measured both ways, in the\n         * mock DOM and in Chromium.\n         */\n        hidden={!this.active}\n        tabindex={this.active ? '0' : null}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,IAAM,0G,MCkBfC,EAAUC,EAAA,MAAAD,UAAAE,E,iFAQIC,MAAQ,GAGOC,OAAS,MAEjD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WAWLC,QAASC,KAAKP,OACdQ,SAAUD,KAAKP,OAAS,IAAM,MAE9BE,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

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

package/dist/components/pf-tab.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,c as a,h as i,a as n}from"./index.js";import{i as o}from"./p-g4FlTDZx.js";import{d as r}from"./p-CSsYpnzu.js";import{d as l}from"./p-CkFjPRTe.js";const d=()=>`:host{align-items:center;background:transparent;border:0;color:var(--pf-tabs-text-muted);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--space-2);min-width:0;position:relative;transition:color var(--pf-transition-medium);user-select:none;white-space:nowrap;z-index:1}:host([hidden]){display:none}:host([size='sm']){padding:var(--space-2) var(--space-3)}:host([size='md']){padding:var(--pf-tabs-tab-padding-y-md) var(--pf-tabs-tab-padding-x-md)}:host([full-width]){flex:1;justify-content:center}:host([variant='underline']){border-bottom:var(--pf-tabs-underline-width) solid transparent;margin-bottom:-1px}:host([variant='pills']){border-radius:var(--radius-sm)}:host(:hover:not([disabled])),:host([selected]),:host(:focus-visible){color:var(--pf-tabs-text)}:host([disabled]){cursor:not-allowed;opacity:0.45}:host(:focus-visible){outline:2px solid color-mix(in srgb, var(--pf-tabs-text) 32%, transparent);outline-offset:2px}.icon{flex-shrink:0;font-size:1em}.count{flex-shrink:0;font-size:var(--font-size-xs);min-height:18px;padding:0 var(--space-2)}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;const c=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfTabSelect=a(this,"pfTabSelect")}get el(){return this}value="";disabled=false;selected=false;variant="underline";size="md";fullWidth=false;icon;iconPlacement="start";count;badgePlacement="end";pfTabSelect;connectedCallback(){if(!this.el.hasAttribute("slot"))this.el.setAttribute("slot","tab")}handleClick(e){if(this.disabled){e.stopPropagation();return}this.pfTabSelect.emit({value:this.value})}handleKeyDown(e){if(!o(e.key)||this.disabled)return;e.preventDefault();this.pfTabSelect.emit({value:this.value})}render(){const e=this.icon?i("pf-icon",{key:"icon",class:"icon",part:"icon",name:this.icon,"aria-hidden":"true"}):null;const t=this.count===undefined?null:i("pf-badge",{key:"count",class:"count",part:"count",variant:"neutral"},this.count);return i(n,{key:"f9d5216db026a25bc8ee38d90dc146a1bfb33afa",role:"tab","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":null},this.iconPlacement==="start"?e:null,this.badgePlacement==="start"?t:null,i("span",{key:"36ae347e9c8bf47eab5f071aef2068a40da1ca73",class:"label",part:"label"},i("slot",{key:"c70792d716dfacecd24eb466e7b4b7c729dd47e3"})),this.badgePlacement==="end"?t:null,this.iconPlacement==="end"?e:null)}static get style(){return d()}},[769,"pf-tab",{value:[513],disabled:[516],selected:[1540],variant:[1537],size:[1537],fullWidth:[1540,"full-width"],icon:[1],iconPlacement:[1,"icon-placement"],count:[2],badgePlacement:[1,"badge-placement"]},[[0,"click","handleClick"],[0,"keydown","handleKeyDown"]]]);function f(){if(typeof customElements==="undefined"){return}const t=["pf-tab","pf-badge","pf-icon"];t.forEach((t=>{switch(t){case"pf-tab":if(!customElements.get(e(t))){customElements.define(e(t),c)}break;case"pf-badge":if(!customElements.get(e(t))){r()}break;case"pf-icon":if(!customElements.get(e(t))){l()}break}}))}f();const p=c;const u=f;export{p as PfTab,u as defineCustomElement};
+//# sourceMappingURL=pf-tab.js.map