@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["resolveCurrentCrumb","crumbs","explicit","findIndex","crumb","current","length","pfBreadcrumbsCss","PfBreadcrumbs","__stencil_proxyCustomElement","HTMLElement","label","separator","componentWillLoad","this","sync","componentDidLoad","handleSeparatorChange","refresh","Array","from","el","querySelectorAll","filter","parentElement","isCurrent","hasAttribute","currentIndex","map","index","entries","node","currentPage","last","render","h","Host","key","role","class","part","onSlotchange"],"sources":["../core/dist/breadcrumbs.js","src/components/pf-breadcrumbs/pf-breadcrumbs.css?tag=pf-breadcrumbs&encapsulation=shadow","src/components/pf-breadcrumbs/pf-breadcrumbs.tsx"],"sourcesContent":["//#region src/breadcrumbs.ts\n/**\n* The index of the current crumb: the first one marked `current`, or the last\n* crumb when none is. `-1` for an empty trail.\n*\n* One index rather than a per-crumb answer, because that is what stops a trail\n* marking two pages. The React `Breadcrumbs` read `item.current ?? isLast` per\n* item, which marked both the explicitly-current crumb *and* the last one as\n* soon as a consumer marked anything but the last — so a screen reader was\n* told the user was on two pages at once.\n*/\nfunction resolveCurrentCrumb(crumbs) {\n\tconst explicit = crumbs.findIndex((crumb) => crumb.current);\n\tif (explicit >= 0) return explicit;\n\treturn crumbs.length - 1;\n}\n//#endregion\nexport { resolveCurrentCrumb };\n",":host {\n  display: block;\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.list {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * The crumbs have to be flex items of the list, not of a box inside it. The UA\n * stylesheet already gives a slot `display: contents`, and this says so out\n * loud -- the same thing pf-calendar needs for a semantic row in a grid.\n */\n.list slot {\n  display: contents;\n}\n","import { resolveCurrentCrumb } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';\n\n/**\n * A breadcrumb trail over `pf-breadcrumb` children.\n *\n * The group owns the two things a crumb cannot know on its own: which crumb is\n * the current page, and which one is last — so only the last goes without a\n * separator after it.\n *\n * The separator is a **string**, where the React `separator` is a\n * `ReactNode`, because it has to appear between every pair: a slot renders its\n * assigned content once and in one place, so there is no way to repeat\n * slotted content down the trail. Each crumb draws its own instead, which is\n * why the group pushes the string down.\n *\n * @slot - the `pf-breadcrumb` children.\n * @part list - the ordered list the crumbs are slotted into.\n */\n@Component({\n  tag: 'pf-breadcrumbs',\n  styleUrl: 'pf-breadcrumbs.css',\n  shadow: true,\n})\nexport class PfBreadcrumbs {\n  @Element() el!: HTMLElement;\n\n  /** The trail's accessible name. */\n  @Prop() label = 'Breadcrumb';\n\n  /** Drawn after every crumb but the last. */\n  @Prop() separator = '/';\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('separator')\n  handleSeparatorChange() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the children, for a consumer who marked a crumb current through\n   * its *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested trail owns its own crumbs. */\n  private get crumbs(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-breadcrumb')).filter(\n      (crumb) => crumb.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the crumb has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(crumb: HTMLElement) {\n    return (crumb as HTMLElement & { current?: boolean }).current ?? crumb.hasAttribute('current');\n  }\n\n  /**\n   * Core's rule for which crumb is current — the first one marked, or the last\n   * — so the React `Breadcrumbs` marks the same one. One index, which is what\n   * stops a trail claiming two current pages.\n   *\n   * The answer goes to `currentPage`, never to the `current` the consumer\n   * asked with. Writing it back to `current` looked tidier and was wrong:\n   * with nothing marked, the last crumb was given `current`, and appending\n   * another crumb then found that one marked and left the mark behind on it.\n   * A browser test appends a crumb, which is what caught it.\n   */\n  private sync() {\n    const crumbs = this.crumbs;\n    const currentIndex = resolveCurrentCrumb(\n      crumbs.map((crumb) => ({ current: this.isCurrent(crumb) })),\n    );\n\n    for (const [index, crumb] of crumbs.entries()) {\n      const node = crumb as HTMLElement & {\n        currentPage: boolean;\n        last: boolean;\n        separator: string;\n      };\n      node.currentPage = index === currentIndex;\n      node.last = index === crumbs.length - 1;\n      node.separator = this.separator;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\" aria-label={this.label}>\n        <ol class=\"list\" part=\"list\">\n          <slot onSlotchange={() => this.refresh()} />\n        </ol>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAWA,SAASA,EAAoBC,GAC5B,MAAMC,EAAWD,EAAOE,WAAWC,GAAUA,EAAMC,UACnD,GAAIH,GAAY,EAAG,OAAOA,EAC1B,OAAOD,EAAOK,OAAS,CACxB,CCfA,MAAMC,EAAmB,IAAM,sM,MCwBlBC,EAAaC,EAAA,MAAAD,UAAAE,E,sGAIhBC,MAAQ,aAGRC,UAAY,IAGpB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAIP,qBAAAE,GACEH,KAAKC,M,CAQP,aAAMG,GACJJ,KAAKC,M,CAIP,UAAYd,GACV,OAAOkB,MAAMC,KAAKN,KAAKO,GAAGC,iBAA8B,kBAAkBC,QACvEnB,GAAUA,EAAMoB,gBAAkBV,KAAKO,I,CAQpC,SAAAI,CAAUrB,GAChB,OAAQA,EAA8CC,SAAWD,EAAMsB,aAAa,U,CAc9E,IAAAX,GACN,MAAMd,EAASa,KAAKb,OACpB,MAAM0B,EAAe3B,EACnBC,EAAO2B,KAAKxB,IAAK,CAAQC,QAASS,KAAKW,UAAUrB,QAGnD,IAAK,MAAOyB,EAAOzB,KAAUH,EAAO6B,UAAW,CAC7C,MAAMC,EAAO3B,EAKb2B,EAAKC,YAAcH,IAAUF,EAC7BI,EAAKE,KAAOJ,IAAU5B,EAAOK,OAAS,EACtCyB,EAAKnB,UAAYE,KAAKF,S,EAI1B,MAAAsB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,aAAY,aAAaxB,KAAKH,OACvCwB,EAAA,MAAAE,IAAA,2CAAIE,MAAM,OAAOC,KAAK,QACpBL,EAAA,QAAAE,IAAA,2CAAMI,aAAc,IAAM3B,KAAKI,a","ignoreList":[]}

package/dist/components/pf-button-group-item.d.ts

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

package/dist/components/pf-button-group-item.js

@@ -0,0 +1,2 @@
+import{t,p as o,H as r,c as e,h as a,a as i}from"./index.js";import{d as n}from"./p-CkFjPRTe.js";const s=()=>`:host{display:inline-flex}:host([hidden]){display:none}.button{align-items:center;background:var(--pf-buttongroup-bg);border:1px solid var(--pf-buttongroup-border);color:var(--pf-buttongroup-text);cursor:pointer;display:inline-flex;font:inherit;gap:var(--space-2);justify-content:center;line-height:1;margin-inline-start:-1px;min-height:40px;padding:0 var(--space-4);position:relative;transition:background-color var(--pf-transition-fast),     border-color var(--pf-transition-fast),     color var(--pf-transition-fast),     box-shadow var(--pf-transition-fast)}:host(:first-child) .button{border-bottom-left-radius:var(--radius-md);border-top-left-radius:var(--radius-md);margin-inline-start:0}:host(:last-child) .button{border-bottom-right-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.button:focus-visible{box-shadow:var(--pf-buttongroup-focus-ring, var(--pf-focus-ring));outline:none;z-index:2}.button:hover:not(:disabled){background:var(--pf-buttongroup-bg-subtle)}:host([selected]) .button{background:var(--pf-buttongroup-action-primary);border-color:var(--pf-buttongroup-action-primary);color:var(--pf-buttongroup-action-primary-text);z-index:1}:host([selected]) .button:hover:not(:disabled){background:var(--pf-buttongroup-action-primary-hover);border-color:var(--pf-buttongroup-action-primary-hover)}.button:disabled{cursor:not-allowed;opacity:0.55}.button:disabled:hover{background:var(--pf-buttongroup-bg)}:host([selected]) .button:disabled:hover{background:var(--pf-buttongroup-action-primary);border-color:var(--pf-buttongroup-action-primary)}.icon{display:inline-flex;flex-shrink:0;font-size:16px}.dot{background:var(--pf-buttongroup-action-primary);border-radius:var(--radius-full);flex-shrink:0;height:8px;width:8px}:host([selected]) .dot{background:var(--pf-buttongroup-dot-selected)}`;const d=o(class t extends r{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfButtonGroupSelect=e(this,"pfButtonGroupSelect")}value="";disabled=false;groupDisabled=false;selected=false;icon;dot=false;pfButtonGroupSelect;onClick=()=>{if(this.disabled||this.groupDisabled)return;this.pfButtonGroupSelect.emit({value:this.value})};render(){const t=this.disabled||this.groupDisabled;return a(i,{key:"32d9d9f92d18efa67f8f0a1c6958b9aad11f82c6"},a("button",{key:"271d2f140ec040979d4f497aa1b610afe728f48b",type:"button",class:"button",part:"button","aria-pressed":this.selected?"true":"false",disabled:t,onClick:this.onClick},this.icon&&a("pf-icon",{key:"b52b1251a1d5a76ee4956fa71206ff6003d45577",class:"icon",part:"icon",name:this.icon,"aria-hidden":"true"}),this.dot&&a("span",{key:"56ebc9f5d68ea5bdaee36ed812e143e65cca6613",class:"dot",part:"dot","aria-hidden":"true"}),a("span",{key:"2da80f85ab0cc7650bc0836284a1b21cf96653ce",class:"label",part:"label"},a("slot",{key:"46d2f6cec317a9d4d2b63d96b4678f02ef1f7269"}))))}static get style(){return s()}},[769,"pf-button-group-item",{value:[513],disabled:[516],groupDisabled:[1540,"group-disabled"],selected:[1540],icon:[1],dot:[516]}]);function u(){if(typeof customElements==="undefined"){return}const o=["pf-button-group-item","pf-icon"];o.forEach((o=>{switch(o){case"pf-button-group-item":if(!customElements.get(t(o))){customElements.define(t(o),d)}break;case"pf-icon":if(!customElements.get(t(o))){n()}break}}))}u();const c=d;const p=u;export{c as PfButtonGroupItem,p as defineCustomElement};
+//# sourceMappingURL=pf-button-group-item.js.map

package/dist/components/pf-button-group-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfButtonGroupItemCss","PfButtonGroupItem","__stencil_proxyCustomElement","HTMLElement","value","disabled","groupDisabled","selected","icon","dot","pfButtonGroupSelect","onClick","this","emit","render","off","h","Host","key","type","class","part","name"],"sources":["src/components/pf-button-group-item/pf-button-group-item.css?tag=pf-button-group-item&encapsulation=shadow","src/components/pf-button-group-item/pf-button-group-item.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.button {\n  align-items: center;\n  background: var(--pf-buttongroup-bg);\n  border: 1px solid var(--pf-buttongroup-border);\n  color: var(--pf-buttongroup-text);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  gap: var(--space-2);\n  justify-content: center;\n  line-height: 1;\n  /* The buttons share a border, so each laps one pixel over the last. */\n  margin-inline-start: -1px;\n  min-height: 40px;\n  padding: 0 var(--space-4);\n  position: relative;\n  transition:\n    background-color var(--pf-transition-fast),\n    border-color var(--pf-transition-fast),\n    color var(--pf-transition-fast),\n    box-shadow var(--pf-transition-fast);\n}\n\n/*\n * The rounded ends, from in here rather than from the group's sheet:\n * `::slotted()` takes a compound selector and no combinator, and the radius\n * belongs on the inner button in any case -- it is the thing with the border.\n * The same arrangement as pf-accordion-item's rule between sections.\n */\n:host(:first-child) .button {\n  border-bottom-left-radius: var(--radius-md);\n  border-top-left-radius: var(--radius-md);\n  margin-inline-start: 0;\n}\n\n:host(:last-child) .button {\n  border-bottom-right-radius: var(--radius-md);\n  border-top-right-radius: var(--radius-md);\n}\n\n.button:focus-visible {\n  box-shadow: var(--pf-buttongroup-focus-ring, var(--pf-focus-ring));\n  outline: none;\n  /* Above both neighbours, so the ring is not clipped by their borders. */\n  z-index: 2;\n}\n\n.button:hover:not(:disabled) {\n  background: var(--pf-buttongroup-bg-subtle);\n}\n\n:host([selected]) .button {\n  background: var(--pf-buttongroup-action-primary);\n  border-color: var(--pf-buttongroup-action-primary);\n  color: var(--pf-buttongroup-action-primary-text);\n  z-index: 1;\n}\n\n:host([selected]) .button:hover:not(:disabled) {\n  background: var(--pf-buttongroup-action-primary-hover);\n  border-color: var(--pf-buttongroup-action-primary-hover);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.button:disabled:hover {\n  background: var(--pf-buttongroup-bg);\n}\n\n:host([selected]) .button:disabled:hover {\n  background: var(--pf-buttongroup-action-primary);\n  border-color: var(--pf-buttongroup-action-primary);\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  font-size: 16px;\n}\n\n.dot {\n  background: var(--pf-buttongroup-action-primary);\n  border-radius: var(--radius-full);\n  flex-shrink: 0;\n  height: 8px;\n  width: 8px;\n}\n\n/* There is an alias for exactly this, so the selected dot uses it. */\n:host([selected]) .dot {\n  background: var(--pf-buttongroup-dot-selected);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * One button inside a `pf-button-group`.\n *\n * It only reports that it was pressed; the group owns the selection, exactly\n * as `pf-radio-group` does for its radios. The group writes `selected` and\n * `groupDisabled` back onto it.\n *\n * `aria-pressed` rather than `aria-checked`: these are toggle buttons, not\n * radios, which is also why every one of them is a tab stop.\n *\n * @slot - the button's label.\n * @part button - the button itself.\n * @part icon - the leading icon, when `icon` is set.\n * @part dot - the leading dot, when `dot` is set.\n * @part label - the label's box.\n */\n@Component({\n  tag: 'pf-button-group-item',\n  styleUrl: 'pf-button-group-item.css',\n  shadow: true,\n})\nexport class PfButtonGroupItem {\n  /**\n   * The value the group reports when this button is chosen.\n   *\n   * Reflected, because the generated bindings set props as *properties*: an\n   * unreflected prop leaves no attribute, and anything selecting on one — a\n   * consumer's stylesheet, or a test — finds nothing.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Disable this button alone. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Set by the group when the whole group is disabled, kept apart from\n   * `disabled` so that enabling the group does not enable a button the\n   * consumer disabled on its own.\n   */\n  @Prop({ mutable: true, reflect: true }) groupDisabled = false;\n\n  /** Set by the group. Reflected, so the stylesheet can mark the choice. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** A leading icon's name, from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /** Draw a leading dot — a status light rather than an icon. */\n  @Prop({ reflect: true }) dot = false;\n\n  /** Asks the group to choose this button. The group decides. */\n  @Event() pfButtonGroupSelect!: EventEmitter<{ value: string }>;\n\n  private onClick = () => {\n    if (this.disabled || this.groupDisabled) return;\n    this.pfButtonGroupSelect.emit({ value: this.value });\n  };\n\n  render() {\n    const off = this.disabled || this.groupDisabled;\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class=\"button\"\n          part=\"button\"\n          aria-pressed={this.selected ? 'true' : 'false'}\n          disabled={off}\n          onClick={this.onClick}\n        >\n          {this.icon && (\n            <pf-icon class=\"icon\" part=\"icon\" name={this.icon} aria-hidden=\"true\"></pf-icon>\n          )}\n          {this.dot && <span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span>}\n          <span class=\"label\" part=\"label\">\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iGAAA,MAAMA,EAAuB,IAAM,gyD,MCuBtBC,EAAiBC,EAAA,MAAAD,UAAAE,E,wIAQHC,MAAQ,GAGRC,SAAW,MAOIC,cAAgB,MAGhBC,SAAW,MAG3CC,KAGiBC,IAAM,MAGtBC,oBAEDC,QAAU,KAChB,GAAIC,KAAKP,UAAYO,KAAKN,cAAe,OACzCM,KAAKF,oBAAoBG,KAAK,CAAET,MAAOQ,KAAKR,OAAQ,EAGtD,MAAAU,GACE,MAAMC,EAAMH,KAAKP,UAAYO,KAAKN,cAElC,OACEU,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAM,SACNC,KAAK,SAAQ,eACCT,KAAKL,SAAW,OAAS,QACvCF,SAAUU,EACVJ,QAASC,KAAKD,SAEbC,KAAKJ,MACJQ,EAAA,WAAAE,IAAA,2CAASE,MAAM,OAAOC,KAAK,OAAOC,KAAMV,KAAKJ,KAAI,cAAc,SAEhEI,KAAKH,KAAOO,EAAA,QAAAE,IAAA,2CAAME,MAAM,MAAMC,KAAK,MAAK,cAAa,SACtDL,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACvBL,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,c as n,h as a,a as i}from"./index.js";import{p as h,a as l,f as o}from"./p-BmcsJLdy.js";const r=()=>`:host{align-items:stretch;display:inline-flex;flex-wrap:wrap}:host([hidden]){display:none}slot{display:contents}`;const c=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfChange=n(this,"pfChange")}get el(){return this}value="";multiple=false;disabled=false;pfChange;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleStateChange(){this.sync()}async refresh(){this.sync()}get items(){return Array.from(this.el.querySelectorAll("pf-button-group-item")).filter((t=>t.parentElement===this.el))}get chosen(){return h(this.value)}itemValue(t){return t.value??t.getAttribute("value")??""}sync(){const t=this.chosen;for(const e of this.items){const s=e;s.selected=t.includes(this.itemValue(e));s.groupDisabled=this.disabled}}handleSelect(t){t.stopPropagation();if(this.disabled)return;const e=this.items.find((e=>this.itemValue(e)===t.detail.value));if(!e||e.disabled)return;const s=this.multiple?l(this.chosen,t.detail.value):[t.detail.value];this.value=o(s);this.sync();this.pfChange.emit({value:this.value,values:s})}render(){return a(i,{key:"b7fbde0a2e14fccf291687b378dfd93a16660692",role:"group"},a("slot",{key:"c81eb48bb1ab31f7b35c7fb9e0c16b8f524e8520",onSlotchange:()=>this.refresh()}))}static get watchers(){return{value:[{handleStateChange:0}],multiple:[{handleStateChange:0}],disabled:[{handleStateChange:0}]}}static get style(){return r()}},[769,"pf-button-group",{value:[1537],multiple:[516],disabled:[516],refresh:[64]},[[0,"pfButtonGroupSelect","handleSelect"]],{value:[{handleStateChange:0}],multiple:[{handleStateChange:0}],disabled:[{handleStateChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["pf-button-group"];e.forEach((e=>{switch(e){case"pf-button-group":if(!customElements.get(t(e))){customElements.define(t(e),c)}break}}))}u();const d=c;const f=u;export{d as PfButtonGroup,f as defineCustomElement};
+//# sourceMappingURL=pf-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfButtonGroupCss","PfButtonGroup","__stencil_proxyCustomElement","HTMLElement","value","multiple","disabled","pfChange","componentWillLoad","this","sync","componentDidLoad","handleStateChange","refresh","items","Array","from","el","querySelectorAll","filter","item","parentElement","chosen","parseValueList","itemValue","getAttribute","node","selected","includes","groupDisabled","handleSelect","event","stopPropagation","find","candidate","detail","next","toggleValueInList","formatValueList","emit","values","render","h","Host","key","role","onSlotchange"],"sources":["src/components/pf-button-group/pf-button-group.css?tag=pf-button-group&encapsulation=shadow","src/components/pf-button-group/pf-button-group.tsx"],"sourcesContent":[":host {\n  align-items: stretch;\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* The buttons have to be flex items of the host, not of a box inside it. */\nslot {\n  display: contents;\n}\n","import { formatValueList, parseValueList, toggleValueInList } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A row of joined toggle buttons: pick one, or several.\n *\n * The group owns the selection, because \"one at a time\" is not a thing a\n * button can decide for itself — the same division as `pf-radio-group`. Each\n * `pf-button-group-item` renders a real `<button>` in its own shadow root, so\n * every one of them is an ordinary tab stop: a group of toggle buttons is not\n * a roving-tabindex pattern, unlike a toolbar or a tab strip.\n *\n * `value` is one comma-separated string, because that is what an attribute\n * can carry; `pfChange` also reports the parsed array, which is what a\n * framework consumer usually wants.\n *\n * @slot - the `pf-button-group-item` children.\n */\n@Component({\n  tag: 'pf-button-group',\n  styleUrl: 'pf-button-group.css',\n  shadow: true,\n})\nexport class PfButtonGroup {\n  @Element() el!: HTMLElement;\n\n  /** The chosen value, or values, as one comma-separated string. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Allow several at once. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) multiple = false;\n\n  /** Disable every button. Reflected, and pushed down. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the selection changes, however it was changed. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('value')\n  @Watch('multiple')\n  @Watch('disabled')\n  handleStateChange() {\n    this.sync();\n  }\n\n  /** Re-reads the children, for a consumer who changed one through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested group owns its own buttons. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-button-group-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  private get chosen(): string[] {\n    return parseValueList(this.value);\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 itemValue(item: HTMLElement) {\n    return (item as HTMLElement & { value?: string }).value ?? item.getAttribute('value') ?? '';\n  }\n\n  private sync() {\n    const chosen = this.chosen;\n\n    for (const item of this.items) {\n      const node = item as HTMLElement & { selected: boolean; groupDisabled: boolean };\n      node.selected = chosen.includes(this.itemValue(item));\n      /*\n       * The group's disabled state goes to a prop of its own, not to the\n       * item's `disabled`: that one is the consumer's, and overwriting it\n       * would lose a button they had disabled on its own — and un-disable it\n       * the moment the group was enabled again.\n       */\n      node.groupDisabled = this.disabled;\n    }\n  }\n\n  /**\n   * A button asking to be chosen. The group decides, because in single mode\n   * the answer depends on what else is chosen.\n   */\n  @Listen('pfButtonGroupSelect')\n  handleSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const item = this.items.find((candidate) => this.itemValue(candidate) === event.detail.value);\n    if (!item || (item as HTMLElement & { disabled?: boolean }).disabled) return;\n\n    const next = this.multiple\n      ? toggleValueInList(this.chosen, event.detail.value)\n      : [event.detail.value];\n\n    this.value = formatValueList(next);\n    this.sync();\n    this.pfChange.emit({ value: this.value, values: next });\n  }\n\n  render() {\n    return (\n      <Host role=\"group\">\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"+GAAA,MAAMA,EAAmB,IAAM,mH,MCkClBC,EAAaC,EAAA,MAAAD,UAAAE,E,uIAIgBC,MAAQ,GAGvBC,SAAW,MAGXC,SAAW,MAG3BC,SAGT,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAMP,iBAAAE,GACEH,KAAKC,M,CAKP,aAAMG,GACJJ,KAAKC,M,CAIP,SAAYI,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,yBAAyBC,QAC9EC,GAASA,EAAKC,gBAAkBZ,KAAKQ,I,CAI1C,UAAYK,GACV,OAAOC,EAAed,KAAKL,M,CAOrB,SAAAoB,CAAUJ,GAChB,OAAQA,EAA0ChB,OAASgB,EAAKK,aAAa,UAAY,E,CAGnF,IAAAf,GACN,MAAMY,EAASb,KAAKa,OAEpB,IAAK,MAAMF,KAAQX,KAAKK,MAAO,CAC7B,MAAMY,EAAON,EACbM,EAAKC,SAAWL,EAAOM,SAASnB,KAAKe,UAAUJ,IAO/CM,EAAKG,cAAgBpB,KAAKH,Q,EAS9B,YAAAwB,CAAaC,GACXA,EAAMC,kBACN,GAAIvB,KAAKH,SAAU,OAEnB,MAAMc,EAAOX,KAAKK,MAAMmB,MAAMC,GAAczB,KAAKe,UAAUU,KAAeH,EAAMI,OAAO/B,QACvF,IAAKgB,GAASA,EAA8Cd,SAAU,OAEtE,MAAM8B,EAAO3B,KAAKJ,SACdgC,EAAkB5B,KAAKa,OAAQS,EAAMI,OAAO/B,OAC5C,CAAC2B,EAAMI,OAAO/B,OAElBK,KAAKL,MAAQkC,EAAgBF,GAC7B3B,KAAKC,OACLD,KAAKF,SAASgC,KAAK,CAAEnC,MAAOK,KAAKL,MAAOoC,OAAQJ,G,CAGlD,MAAAK,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SACTH,EAAA,QAAAE,IAAA,2CAAME,aAAc,IAAMrC,KAAKI,Y","ignoreList":[]}

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

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

package/dist/components/pf-button.js

@@ -0,0 +1,2 @@
+import{t,p as o,H as e,h as r,a as n}from"./index.js";const a=()=>`@keyframes pf-spin{to{transform:rotate(360deg)}}:host{display:inline-flex}:host([full-width]){display:flex;width:100%}:host([hidden]){display:none}button{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-md);color:inherit;cursor:pointer;display:inline-flex;flex:1;font-family:inherit;font-size:inherit;font-weight:var(--font-weight-semibold);gap:var(--space-2);justify-content:center;line-height:1;min-height:40px;text-decoration:none;transition:background-color var(--pf-transition-fast),     border-color var(--pf-transition-fast),     color var(--pf-transition-fast),     box-shadow var(--pf-transition-fast)}button:focus-visible{box-shadow:var(--pf-button-focus-ring, var(--pf-focus-ring));outline:none}button:disabled{cursor:not-allowed;opacity:0.55}:host([size='sm']) button{font-size:var(--font-size-sm);min-height:36px;padding:0 var(--space-3)}:host([size='md']) button{font-size:var(--font-size-md);min-height:40px;padding:0 var(--space-4)}:host([size='lg']) button{font-size:var(--font-size-lg);min-height:48px;padding:0 var(--space-5)}:host([variant='primary']) button{background:var(--pf-button-primary-bg);color:var(--pf-button-primary-text)}:host([variant='primary']) button:hover:not(:disabled){background:var(--pf-button-primary-bg-hover)}:host([variant='secondary']) button{background:var(--pf-button-secondary-bg);border-color:var(--pf-button-secondary-border);color:var(--pf-button-secondary-text)}:host([variant='secondary']) button:hover:not(:disabled){background:var(--pf-button-secondary-bg-hover);border-color:var(--pf-button-secondary-border-hover)}:host([variant='ghost']) button{background:transparent;color:var(--pf-button-ghost-text)}:host([variant='ghost']) button:hover:not(:disabled){background:var(--pf-button-ghost-bg-hover)}:host([variant='destructive']) button{background:var(--pf-button-destructive-bg);color:var(--pf-button-destructive-text)}:host([variant='destructive']) button:hover:not(:disabled){background:var(--pf-button-destructive-bg-hover)}:host([loading]) button:disabled{cursor:wait;opacity:1}.spinner{animation:pf-spin 0.65s linear infinite;flex-shrink:0}@media (prefers-reduced-motion: reduce){button{transition:none}.spinner{animation-duration:0.01ms;animation-iteration-count:1}}`;const i=o(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}variant="primary";size="md";fullWidth=false;loading=false;disabled=false;type="button";label;renderSpinner(){return r("svg",{class:"spinner",part:"spinner",viewBox:"0 0 24 24",fill:"none",width:"1em",height:"1em","aria-hidden":"true",focusable:"false"},r("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","stroke-dasharray":"32","stroke-dashoffset":"8"}))}render(){const t=this.disabled||this.loading;return r(n,{key:"9adf86112a2c18facb4513de37871f81a3b373e2"},r("button",{key:"1edecdfbce26d76fec0b746f14b7adc6f5d603d5",part:"button",type:this.type,disabled:t,"aria-busy":this.loading?"true":null,"aria-label":this.label},this.loading&&this.renderSpinner(),r("slot",{key:"6ff1a6b6b4cb32ccc865d42ffa396cd5acd43bbe"})))}static get delegatesFocus(){return true}static get style(){return a()}},[785,"pf-button",{variant:[513],size:[513],fullWidth:[516,"full-width"],loading:[516],disabled:[516],type:[1],label:[1]}]);function s(){if(typeof customElements==="undefined"){return}const o=["pf-button"];o.forEach((o=>{switch(o){case"pf-button":if(!customElements.get(t(o))){customElements.define(t(o),i)}break}}))}s();const d=i;const u=s;export{d as PfButton,u as defineCustomElement};
+//# sourceMappingURL=pf-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfButtonCss","PfButton","__stencil_proxyCustomElement","HTMLElement","variant","size","fullWidth","loading","disabled","type","label","renderSpinner","h","class","part","viewBox","fill","width","height","focusable","cx","cy","r","stroke","render","isDisabled","this","Host","key"],"sources":["src/components/pf-button/pf-button.css?tag=pf-button&encapsulation=shadow","src/components/pf-button/pf-button.tsx"],"sourcesContent":["/*\n * `@keyframes` do not cross a shadow boundary. In the React library pf-spin is\n * declared once in LoadingIndicators.css and every component picks it up from\n * the global sheet; here each shadow root needs its own copy.\n */\n@keyframes pf-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host {\n  display: inline-flex;\n}\n\n:host([full-width]) {\n  display: flex;\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nbutton {\n  align-items: center;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  color: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  flex: 1;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: var(--font-weight-semibold);\n  gap: var(--space-2);\n  justify-content: center;\n  line-height: 1;\n  min-height: 40px;\n  text-decoration: none;\n  transition:\n    background-color var(--pf-transition-fast),\n    border-color var(--pf-transition-fast),\n    color var(--pf-transition-fast),\n    box-shadow var(--pf-transition-fast);\n}\n\nbutton:focus-visible {\n  box-shadow: var(--pf-button-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n:host([size='sm']) button {\n  font-size: var(--font-size-sm);\n  min-height: 36px;\n  padding: 0 var(--space-3);\n}\n\n:host([size='md']) button {\n  font-size: var(--font-size-md);\n  min-height: 40px;\n  padding: 0 var(--space-4);\n}\n\n:host([size='lg']) button {\n  font-size: var(--font-size-lg);\n  min-height: 48px;\n  padding: 0 var(--space-5);\n}\n\n:host([variant='primary']) button {\n  background: var(--pf-button-primary-bg);\n  color: var(--pf-button-primary-text);\n}\n\n:host([variant='primary']) button:hover:not(:disabled) {\n  background: var(--pf-button-primary-bg-hover);\n}\n\n:host([variant='secondary']) button {\n  background: var(--pf-button-secondary-bg);\n  border-color: var(--pf-button-secondary-border);\n  color: var(--pf-button-secondary-text);\n}\n\n:host([variant='secondary']) button:hover:not(:disabled) {\n  background: var(--pf-button-secondary-bg-hover);\n  border-color: var(--pf-button-secondary-border-hover);\n}\n\n:host([variant='ghost']) button {\n  background: transparent;\n  color: var(--pf-button-ghost-text);\n}\n\n:host([variant='ghost']) button:hover:not(:disabled) {\n  background: var(--pf-button-ghost-bg-hover);\n}\n\n:host([variant='destructive']) button {\n  background: var(--pf-button-destructive-bg);\n  color: var(--pf-button-destructive-text);\n}\n\n:host([variant='destructive']) button:hover:not(:disabled) {\n  background: var(--pf-button-destructive-bg-hover);\n}\n\n:host([loading]) button:disabled {\n  cursor: wait;\n  opacity: 1;\n}\n\n.spinner {\n  animation: pf-spin 0.65s linear infinite;\n  flex-shrink: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  button {\n    transition: none;\n  }\n\n  .spinner {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';\nexport type PfButtonSize = 'sm' | 'md' | 'lg';\nexport type PfButtonType = 'button' | 'submit' | 'reset';\n\n/**\n * A button, with the variants, sizes and loading state the React `Button` has.\n *\n * The first element in this package, and the one the whole pipeline was proved\n * on: the PostCSS chain, the generated React bindings and the generated Angular\n * component all exist because this built end to end before anything else was\n * attempted. `delegatesFocus` is why focusing the host reaches the real button\n * inside, which is what lets `pf-toolbar` treat it as an item.\n *\n * @slot - the button's label.\n * @part button - the native button element.\n * @part spinner - the loading spinner.\n */\n@Component({\n  tag: 'pf-button',\n  styleUrl: 'pf-button.css',\n  // delegatesFocus so that focusing <pf-button> reaches the real button, and\n  // :focus-visible lands on the element that is actually styled for it.\n  shadow: { delegatesFocus: true },\n})\nexport class PfButton {\n  /** Visual style. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) variant: PfButtonVariant = 'primary';\n\n  /** Control size. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfButtonSize = 'md';\n\n  /** Stretch to the width of the container. */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /** Show a spinner and block interaction. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Mirrors the native attribute. `submit` and `reset` do not yet act on a form\n   * outside this element's shadow root -- that needs ElementInternals, which\n   * arrives with the form controls in Wave 3.\n   */\n  @Prop() type: PfButtonType = 'button';\n\n  /** Accessible name, for when the slot holds only an icon. */\n  @Prop() label?: string;\n\n  private renderSpinner() {\n    return (\n      <svg\n        class=\"spinner\"\n        part=\"spinner\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        width=\"1em\"\n        height=\"1em\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"32\"\n          stroke-dashoffset=\"8\"\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const isDisabled = this.disabled || this.loading;\n\n    return (\n      <Host>\n        <button\n          part=\"button\"\n          type={this.type}\n          disabled={isDisabled}\n          aria-busy={this.loading ? 'true' : null}\n          aria-label={this.label}\n        >\n          {this.loading && this.renderSpinner()}\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAc,IAAM,quE,MC0BbC,EAAQC,EAAA,MAAAD,UAAAE,E,iFAEMC,QAA2B,UAG3BC,KAAqB,KAGrBC,UAAY,MAGZC,QAAU,MAGVC,SAAW,MAO5BC,KAAqB,SAGrBC,MAEA,aAAAC,GACN,OACEC,EAAA,OACEC,MAAM,UACNC,KAAK,UACLC,QAAQ,YACRC,KAAK,OACLC,MAAM,MACNC,OAAO,MAAK,cACA,OACZC,UAAU,SAEVP,EAAA,UACEQ,GAAG,KACHC,GAAG,KACHC,EAAE,KACFC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,mBACL,KAAI,oBACH,M,CAM1B,MAAAC,GACE,MAAMC,EAAaC,KAAKlB,UAAYkB,KAAKnB,QAEzC,OACEK,EAACe,EAAI,CAAAC,IAAA,4CACHhB,EAAA,UAAAgB,IAAA,2CACEd,KAAK,SACLL,KAAMiB,KAAKjB,KACXD,SAAUiB,EAAU,YACTC,KAAKnB,QAAU,OAAS,KAAI,aAC3BmB,KAAKhB,OAEhBgB,KAAKnB,SAAWmB,KAAKf,gBACtBC,EAAA,QAAAgB,IAAA,8C","ignoreList":[]}

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

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

package/dist/components/pf-calendar.js

@@ -0,0 +1,2 @@
+import{P as o,d as s}from"./p-DkBJMi_M.js";const t=o;const p=s;export{t as PfCalendar,p as defineCustomElement};
+//# sourceMappingURL=pf-calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/pf-card-content.d.ts

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

package/dist/components/pf-card-content.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as c,a as n}from"./index.js";const a=()=>`:host{display:block;padding:var(--pf-card-section-padding, var(--space-4))}:host([hidden]){display:none}`;const o=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return c(n,{key:"59a59b62c908361de72c2a887083eaf0e4cd8990"},c("slot",{key:"666c791fcd20f18eb92e1d7cbdf688db3a9f46e9"}))}static get style(){return a()}},[257,"pf-card-content"]);function d(){if(typeof customElements==="undefined"){return}const t=["pf-card-content"];t.forEach((t=>{switch(t){case"pf-card-content":if(!customElements.get(e(t))){customElements.define(e(t),o)}break}}))}d();const r=o;const f=d;export{r as PfCardContent,f as defineCustomElement};
+//# sourceMappingURL=pf-card-content.js.map

package/dist/components/pf-card-content.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCardContentCss","PfCardContent","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/pf-card-content/pf-card-content.css?tag=pf-card-content&encapsulation=shadow","src/components/pf-card-content/pf-card-content.tsx"],"sourcesContent":[":host {\n  display: block;\n  padding: var(--pf-card-section-padding, var(--space-4));\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The body section of a `pf-card`.\n *\n * @slot - the content.\n */\n@Component({\n  tag: 'pf-card-content',\n  styleUrl: 'pf-card-content.css',\n  shadow: true,\n})\nexport class PfCardContent {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAmB,IAAM,2G,MCYlBC,EAAaC,EAAA,MAAAD,UAAAE,E,iFACxB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as s,h as r,a as o}from"./index.js";const d=()=>`:host{border-top:1px solid var(--pf-card-border);display:flex;gap:var(--pf-card-footer-gap);padding:var(--pf-card-section-padding, var(--space-4))}:host([hidden]){display:none}`;const a=t(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return r(o,{key:"94597fc7d75217bd21d063cb79f4e99dc4d4962b"},r("slot",{key:"6d37ed88a893134c4b4025ed4870993b9ea82812"}))}static get style(){return d()}},[257,"pf-card-footer"]);function c(){if(typeof customElements==="undefined"){return}const t=["pf-card-footer"];t.forEach((t=>{switch(t){case"pf-card-footer":if(!customElements.get(e(t))){customElements.define(e(t),a)}break}}))}c();const n=a;const f=c;export{n as PfCardFooter,f as defineCustomElement};
+//# sourceMappingURL=pf-card-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfCardFooterCss","PfCardFooter","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/pf-card-footer/pf-card-footer.css?tag=pf-card-footer&encapsulation=shadow","src/components/pf-card-footer/pf-card-footer.tsx"],"sourcesContent":[":host {\n  border-top: 1px solid var(--pf-card-border);\n  display: flex;\n  gap: var(--pf-card-footer-gap);\n  padding: var(--pf-card-section-padding, var(--space-4));\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The bottom section of a `pf-card`, separated from what precedes it by a rule.\n * Lays its children out in a row, which is what makes it the natural home for\n * a card's actions.\n *\n * @slot - the footer's content, usually buttons.\n */\n@Component({\n  tag: 'pf-card-footer',\n  styleUrl: 'pf-card-footer.css',\n  shadow: true,\n})\nexport class PfCardFooter {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAkB,IAAM,mL,MCcjBC,EAAYC,EAAA,MAAAD,UAAAE,E,iFACvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as s,H as t,h as r,a}from"./index.js";const c=()=>`:host{border-bottom:1px solid var(--pf-card-border);display:block;padding:var(--pf-card-section-padding, var(--space-4))}:host([hidden]){display:none}`;const d=s(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return r(a,{key:"334c522bf5347bac313ff6fb75e1b21018911828"},r("slot",{key:"a69f1d5579125f7c71344fe5b92391a99dcf7066"}))}static get style(){return c()}},[257,"pf-card-header"]);function o(){if(typeof customElements==="undefined"){return}const s=["pf-card-header"];s.forEach((s=>{switch(s){case"pf-card-header":if(!customElements.get(e(s))){customElements.define(e(s),d)}break}}))}o();const n=d;const f=o;export{n as PfCardHeader,f as defineCustomElement};
+//# sourceMappingURL=pf-card-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfCardHeaderCss","PfCardHeader","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/pf-card-header/pf-card-header.css?tag=pf-card-header&encapsulation=shadow","src/components/pf-card-header/pf-card-header.tsx"],"sourcesContent":["/*\n * Reads pf-card's own variables rather than defining its own: a consumer who\n * sets --pf-card-section-padding on a card expects every section to follow,\n * and custom properties inherit through the shadow boundary.\n */\n:host {\n  border-bottom: 1px solid var(--pf-card-border);\n  display: block;\n  padding: var(--pf-card-section-padding, var(--space-4));\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * The top section of a `pf-card`, separated from what follows by a rule.\n *\n * @slot - the header's content.\n */\n@Component({\n  tag: 'pf-card-header',\n  styleUrl: 'pf-card-header.css',\n  shadow: true,\n})\nexport class PfCardHeader {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAkB,IAAM,yJ,MCYjBC,EAAYC,EAAA,MAAAD,UAAAE,E,iFACvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

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

package/dist/components/pf-card.js

@@ -0,0 +1,2 @@
+import{t as e,p as r,H as s,h as a,a as d}from"./index.js";const o=()=>`:host{background:var(--pf-card-background);border:1px solid var(--pf-card-border);border-radius:var(--pf-card-radius, var(--radius-lg));box-shadow:var(--pf-card-shadow, var(--shadow-sm));display:block;overflow:hidden}:host([hidden]){display:none}`;const t=r(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return a(d,{key:"dde68be01e7fc8e7773cf3b21153e2502f115df2"},a("slot",{key:"30bd9de2b4eaf837b40afa6161f18a823c78d683"}))}static get style(){return o()}},[257,"pf-card"]);function c(){if(typeof customElements==="undefined"){return}const r=["pf-card"];r.forEach((r=>{switch(r){case"pf-card":if(!customElements.get(e(r))){customElements.define(e(r),t)}break}}))}c();const n=t;const f=c;export{n as PfCard,f as defineCustomElement};
+//# sourceMappingURL=pf-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfCardCss","PfCard","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key"],"sources":["src/components/pf-card/pf-card.css?tag=pf-card&encapsulation=shadow","src/components/pf-card/pf-card.tsx"],"sourcesContent":["/*\n * The host is the card. `overflow: hidden` is what makes a section's own\n * border-bottom stop at the rounded corner instead of crossing it, so the\n * sections need no corner-radius rules of their own.\n */\n:host {\n  background: var(--pf-card-background);\n  border: 1px solid var(--pf-card-border);\n  border-radius: var(--pf-card-radius, var(--radius-lg));\n  box-shadow: var(--pf-card-shadow, var(--shadow-sm));\n  display: block;\n  overflow: hidden;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A surface that groups related content.\n *\n * The React library's `Card` / `CardHeader` / `CardContent` / `CardFooter` map\n * to four elements rather than to one element with named slots. Named slots\n * would need a slot controller to know whether to render each wrapper at all —\n * an unslotted `header` would otherwise leave a padded, bordered empty strip.\n * Separate elements have no such state: the consumer writing\n * `<pf-card-header>` *is* the signal.\n *\n * @slot - the card's sections, usually `pf-card-header`, `pf-card-content` and\n * `pf-card-footer`, though any content is allowed.\n */\n@Component({\n  tag: 'pf-card',\n  styleUrl: 'pf-card.css',\n  shadow: true,\n})\nexport class PfCard {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAY,IAAM,yP,MCoBXC,EAAMC,EAAA,MAAAD,UAAAE,E,iFACjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/pf-carousel-slide.d.ts

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

package/dist/components/pf-carousel-slide.js

@@ -0,0 +1,2 @@
+import{t as e,p as s,H as t,h as i,a}from"./index.js";const o=()=>`:host{background:var(--pf-carousel-slide-background, transparent);color:var(--pf-carousel-slide-text);flex:0 0 100%;min-width:0;padding:var(--pf-carousel-slide-padding, 0)}:host([hidden]){display:none}`;const r=s(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}active=false;position=1;total=1;render(){return i(a,{key:"5b8c82c4edca6c10ea5b20f1122cc62d8d37f0d5",role:"group","aria-roledescription":"slide","aria-label":`Slide ${this.position} of ${this.total}`,"aria-hidden":this.active?null:"true",inert:!this.active},i("slot",{key:"36ea0239c2c53b175e94f701cc047eabd4e1d41d"}))}static get style(){return o()}},[769,"pf-carousel-slide",{active:[1540],position:[1026],total:[1026]}]);function c(){if(typeof customElements==="undefined"){return}const s=["pf-carousel-slide"];s.forEach((s=>{switch(s){case"pf-carousel-slide":if(!customElements.get(e(s))){customElements.define(e(s),r)}break}}))}c();const n=r;const d=c;export{n as PfCarouselSlide,d as defineCustomElement};
+//# sourceMappingURL=pf-carousel-slide.js.map

package/dist/components/pf-carousel-slide.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCarouselSlideCss","PfCarouselSlide","__stencil_proxyCustomElement","HTMLElement","active","position","total","render","h","Host","key","role","this","inert"],"sources":["src/components/pf-carousel-slide/pf-carousel-slide.css?tag=pf-carousel-slide&encapsulation=shadow","src/components/pf-carousel-slide/pf-carousel-slide.tsx"],"sourcesContent":[":host {\n  background: var(--pf-carousel-slide-background, transparent);\n  color: var(--pf-carousel-slide-text);\n  /* One slide per viewport, which is what the track's transform steps by. */\n  flex: 0 0 100%;\n  min-width: 0;\n  padding: var(--pf-carousel-slide-padding, 0);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One slide of a `pf-carousel`.\n *\n * The carousel tells it where it sits and whether it is the one on show; it\n * owns only what that means for itself — chiefly that an off-screen slide is\n * `inert`, so the focusable content inside it cannot be tabbed to while it is\n * scrolled out of sight.\n *\n * @slot - the slide's content.\n */\n@Component({\n  tag: 'pf-carousel-slide',\n  styleUrl: 'pf-carousel-slide.css',\n  shadow: true,\n})\nexport class PfCarouselSlide {\n  /** Set by the carousel: the slide on show. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) active = false;\n\n  /** Set by the carousel: this slide's place, counting from 1. */\n  @Prop({ mutable: true }) position = 1;\n\n  /** Set by the carousel: how many slides there are. */\n  @Prop({ mutable: true }) total = 1;\n\n  render() {\n    return (\n      <Host\n        role=\"group\"\n        aria-roledescription=\"slide\"\n        aria-label={`Slide ${this.position} of ${this.total}`}\n        aria-hidden={this.active ? null : 'true'}\n        /*\n         * `inert` as well as `aria-hidden`: the slide is still laid out, just\n         * scrolled out of view, so without it a button inside the next slide\n         * is a tab stop nobody can see. The same reason an accordion's closed\n         * panel is inert.\n         */\n        inert={!this.active}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAqB,IAAM,4M,MCiBpBC,EAAeC,EAAA,MAAAD,UAAAE,E,iFAEcC,OAAS,MAGxBC,SAAW,EAGXC,MAAQ,EAEjC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,QAAO,uBACS,QAAO,aAChB,SAASC,KAAKP,eAAeO,KAAKN,QAAO,cACxCM,KAAKR,OAAS,KAAO,OAOlCS,OAAQD,KAAKR,QAEbI,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

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

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

package/dist/components/pf-carousel.js

@@ -0,0 +1,2 @@
+import{t as a,p as e,H as t,c as r,h as i,a as s}from"./index.js";import{d as n}from"./p-CkFjPRTe.js";function o(a,e,t=false){if(!(e>0))return-1;if(!Number.isFinite(a))return 0;const r=Math.trunc(a);if(t)return(r%e+e)%e;return Math.min(Math.max(r,0),e-1)}function c(a,e){if(!(e>0))return"No slides";return`Slide ${o(a,e)+1} of ${e}`}const l=()=>`:host{background:var(--pf-carousel-bg);border:1px solid var(--pf-carousel-border);border-radius:var(--pf-carousel-radius, var(--radius-md));display:grid;gap:var(--pf-carousel-gap, var(--space-3));overflow:hidden;padding:var(--pf-carousel-padding, var(--space-3));width:100%}:host([hidden]){display:none}.viewport{background:var(--pf-carousel-viewport-bg);border-radius:var(--pf-carousel-viewport-radius, var(--radius-sm));overflow:hidden;width:100%}.track{display:flex;transition:transform var(--pf-carousel-transition-duration, var(--duration-moderate))     var(--easing-decelerate);width:100%}.track.empty{display:none}.empty{align-items:center;color:var(--pf-carousel-empty-text);display:flex;font-size:var(--pf-carousel-empty-font-size, var(--font-size-sm));justify-content:center;min-height:var(--pf-carousel-empty-min-height, 180px);padding:var(--pf-carousel-empty-padding, var(--space-4));text-align:center}.sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.controls{align-items:center;display:grid;gap:var(--pf-carousel-controls-gap, var(--space-2));grid-template-columns:var(--pf-carousel-nav-size, 28px) 1fr     var(--pf-carousel-nav-size, 28px)}.nav{align-items:center;background:transparent;border:0;border-radius:var(--pf-carousel-nav-radius, var(--radius-sm));color:var(--pf-carousel-nav-text);cursor:pointer;display:inline-flex;font-size:var(--pf-carousel-nav-font-size, var(--font-size-sm));height:var(--pf-carousel-nav-size, 28px);justify-content:center;padding:0;width:var(--pf-carousel-nav-size, 28px)}.nav:hover:not(:disabled){background:var(--pf-carousel-nav-hover-bg);color:var(--pf-carousel-nav-hover-text)}.nav:focus-visible{box-shadow:var(--pf-carousel-focus-ring, var(--pf-focus-ring));outline:none}.nav:disabled{color:var(--pf-carousel-nav-text);cursor:not-allowed;opacity:var(--pf-carousel-disabled-opacity, 0.45)}.indicators{align-items:center;display:inline-flex;gap:var(--pf-carousel-indicator-gap, var(--space-1));justify-content:center}.indicator{background:var(--pf-carousel-indicator-bg);border:0;border-radius:var(--pf-carousel-indicator-radius, var(--radius-full));cursor:pointer;height:var(--pf-carousel-indicator-size, 8px);padding:0;transition:all var(--pf-carousel-indicator-transition-duration, var(--duration-fast))     var(--easing-decelerate);width:var(--pf-carousel-indicator-size, 8px)}.indicator--active{background:var(--pf-carousel-indicator-active-bg);width:var(--pf-carousel-indicator-active-width, 20px)}.indicator:focus-visible{box-shadow:var(--pf-carousel-focus-ring, var(--pf-focus-ring));outline:none}.indicator-spacer{display:block;min-height:var(--pf-carousel-indicator-size, 8px)}@media (prefers-reduced-motion: reduce){.track,.indicator{transition:none}}`;const d=e(class a extends t{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow();this.pfChange=r(this,"pfChange")}get el(){return this}index=0;loop=true;showIndicators=true;autoPlay=false;autoPlayInterval=5e3;label="Carousel";previousLabel="Previous slide";nextLabel="Next slide";pfChange;total=0;timer;componentWillLoad(){this.sync()}componentDidLoad(){this.sync();this.startTimer()}disconnectedCallback(){this.stopTimer()}handleIndexChange(){this.sync()}handleTimerChange(){this.startTimer()}async refresh(){this.sync()}async next(){this.goTo(this.resolved+1)}async previous(){this.goTo(this.resolved-1)}get slides(){return Array.from(this.el.querySelectorAll("pf-carousel-slide")).filter((a=>a.parentElement===this.el))}get resolved(){return Math.max(o(this.index,this.total),0)}sync(){const a=this.slides;this.total=a.length;const e=this.resolved;for(const[t,r]of a.entries()){const i=r;i.active=t===e;i.position=t+1;i.total=a.length}}goTo(a){const e=o(a,this.total,this.loop);if(e<0||e===this.resolved)return;this.index=e;this.sync();this.pfChange.emit({index:e})}startTimer(){this.stopTimer();if(!this.autoPlay||this.total<2)return;this.timer=window.setInterval((()=>{this.goTo(this.resolved+1)}),Number(this.autoPlayInterval)||5e3)}stopTimer(){if(this.timer!==undefined)window.clearInterval(this.timer);this.timer=undefined}render(){const a=this.resolved;const e=!this.loop&&a<=0;const t=!this.loop&&a>=this.total-1;return i(s,{key:"4f5a52bd33464c438e7a11d18c19c136ae9a1c81",role:"region","aria-roledescription":"carousel","aria-label":this.label},i("div",{key:"04ee0fe33dadacf5e0097e97eb8968a4cb07bf6e",class:"viewport",part:"viewport"},this.total===0?i("div",{class:"empty",part:"empty",role:"status"},i("slot",{name:"empty"},"Add at least one slide.")):null,i("div",{key:"a8fc8ce03bd7f8e8ac43215a61074f71e8fdb8e3",class:{track:true,empty:this.total===0},part:"track",style:{transform:`translateX(-${a*100}%)`}},i("slot",{key:"55720356b707f7589cbe50daf6ccbacf8503b333",onSlotchange:()=>this.refresh()}))),i("span",{key:"90ab70084b5b7bc1797350160805de10cae812f0",class:"sr-only","aria-live":"polite","aria-atomic":"true"},this.total>0?c(a,this.total):""),i("div",{key:"37edc5f9cff2e99992ade51d1189ee9da073cf63",class:"controls",part:"controls"},i("button",{key:"aa1470ae4a33ba1ecb6675ae0444d7ebcce31c0d",type:"button",class:"nav",part:"previous","aria-label":this.previousLabel,disabled:e||this.total<2,onClick:()=>this.goTo(a-1)},i("pf-icon",{key:"7af19a182498df4e9e8c78ef10fcc24e202a87a9",name:"square-caret-left","aria-hidden":"true"})),this.showIndicators&&this.total>1?i("div",{class:"indicators",part:"indicators",role:"group","aria-label":"Slide indicators"},Array.from({length:this.total},((e,t)=>i("button",{type:"button",class:{indicator:true,"indicator--active":t===a},part:"indicator","aria-label":`Go to slide ${t+1}`,"aria-current":t===a?"true":null,onClick:()=>this.goTo(t)})))):i("span",{class:"indicator-spacer","aria-hidden":"true"}),i("button",{key:"a9ce64398be6552d49926d467f7a2b74024d34a1",type:"button",class:"nav",part:"next","aria-label":this.nextLabel,disabled:t||this.total<2,onClick:()=>this.goTo(a+1)},i("pf-icon",{key:"385f7b01bb6086d454be41ca4f04a449a2e0504c",name:"square-caret-right","aria-hidden":"true"}))))}static get watchers(){return{index:[{handleIndexChange:0}],loop:[{handleIndexChange:0}],autoPlay:[{handleTimerChange:0}],autoPlayInterval:[{handleTimerChange:0}]}}static get style(){return l()}},[769,"pf-carousel",{index:[1026],loop:[516],showIndicators:[516,"show-indicators"],autoPlay:[516,"auto-play"],autoPlayInterval:[2,"auto-play-interval"],label:[1],previousLabel:[1,"previous-label"],nextLabel:[1,"next-label"],total:[32],refresh:[64],next:[64],previous:[64]},undefined,{index:[{handleIndexChange:0}],loop:[{handleIndexChange:0}],autoPlay:[{handleTimerChange:0}],autoPlayInterval:[{handleTimerChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["pf-carousel","pf-icon"];e.forEach((e=>{switch(e){case"pf-carousel":if(!customElements.get(a(e))){customElements.define(a(e),d)}break;case"pf-icon":if(!customElements.get(a(e))){n()}break}}))}p();const u=d;const h=p;export{u as PfCarousel,h as defineCustomElement};
+//# sourceMappingURL=pf-carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["resolveSlideIndex","next","total","loop","Number","isFinite","index","Math","trunc","min","max","slidePositionLabel","pfCarouselCss","PfCarousel","__stencil_proxyCustomElement","HTMLElement","showIndicators","autoPlay","autoPlayInterval","label","previousLabel","nextLabel","pfChange","timer","componentWillLoad","this","sync","componentDidLoad","startTimer","disconnectedCallback","stopTimer","handleIndexChange","handleTimerChange","refresh","goTo","resolved","previous","slides","Array","from","el","querySelectorAll","filter","slide","parentElement","length","active","position","entries","node","emit","window","setInterval","undefined","clearInterval","render","atStart","atEnd","h","Host","key","role","class","part","name","track","empty","style","transform","onSlotchange","type","disabled","onClick","_","indicator"],"sources":["../core/dist/carousel.js","src/components/pf-carousel/pf-carousel.css?tag=pf-carousel&encapsulation=shadow","src/components/pf-carousel/pf-carousel.tsx"],"sourcesContent":["//#region src/carousel.ts\n/**\n* Which slide a carousel lands on, and what it says it is showing.\n*\n* Shared because looping is a decision: stepping past the last slide either\n* wraps to the first or stays put, and a React `Carousel` and a\n* `<pf-carousel>` that disagreed would be two components wearing one name.\n*/\n/**\n* The slide `next` resolves to, out of `total`.\n*\n* With `loop` it wraps at both ends — including from a negative index, which\n* is what stepping back from the first slide gives, and which a bare `%` in\n* JavaScript gets wrong: `-1 % 5` is `-1`, not `4`. Without it the index is\n* clamped. An empty carousel has no slide to land on and reports `-1`.\n*/\nfunction resolveSlideIndex(next, total, loop = false) {\n\tif (!(total > 0)) return -1;\n\tif (!Number.isFinite(next)) return 0;\n\tconst index = Math.trunc(next);\n\tif (loop) return (index % total + total) % total;\n\treturn Math.min(Math.max(index, 0), total - 1);\n}\n/**\n* What a carousel announces, which is the one thing a reader who cannot see it\n* has to go on: \"Slide 2 of 5\".\n*\n* Here rather than in either layer because it is read out, and two layers\n* announcing the same carousel differently would be two different controls to\n* a screen reader.\n*/\nfunction slidePositionLabel(index, total) {\n\tif (!(total > 0)) return \"No slides\";\n\treturn `Slide ${resolveSlideIndex(index, total) + 1} of ${total}`;\n}\n//#endregion\nexport { resolveSlideIndex, slidePositionLabel };\n",":host {\n  background: var(--pf-carousel-bg);\n  border: 1px solid var(--pf-carousel-border);\n  border-radius: var(--pf-carousel-radius, var(--radius-md));\n  display: grid;\n  gap: var(--pf-carousel-gap, var(--space-3));\n  overflow: hidden;\n  padding: var(--pf-carousel-padding, var(--space-3));\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.viewport {\n  background: var(--pf-carousel-viewport-bg);\n  border-radius: var(--pf-carousel-viewport-radius, var(--radius-sm));\n  overflow: hidden;\n  width: 100%;\n}\n\n.track {\n  display: flex;\n  transition: transform var(--pf-carousel-transition-duration, var(--duration-moderate))\n    var(--easing-decelerate);\n  width: 100%;\n}\n\n/*\n * The track stays in the tree with no slides in it — a slot that is not\n * rendered never fires `slotchange` — and is simply not laid out. Two classes\n * deep, because the track sets its own `display` above.\n */\n.track.empty {\n  display: none;\n}\n\n.empty {\n  align-items: center;\n  color: var(--pf-carousel-empty-text);\n  display: flex;\n  font-size: var(--pf-carousel-empty-font-size, var(--font-size-sm));\n  justify-content: center;\n  min-height: var(--pf-carousel-empty-min-height, 180px);\n  padding: var(--pf-carousel-empty-padding, var(--space-4));\n  text-align: center;\n}\n\n/*\n * Each element needs its own copy: `.pf-sr-only` is declared once in the React\n * library's global sheet and does not cross a shadow boundary.\n */\n.sr-only {\n  border: 0;\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.controls {\n  align-items: center;\n  display: grid;\n  gap: var(--pf-carousel-controls-gap, var(--space-2));\n  grid-template-columns:\n    var(--pf-carousel-nav-size, 28px) 1fr\n    var(--pf-carousel-nav-size, 28px);\n}\n\n.nav {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pf-carousel-nav-radius, var(--radius-sm));\n  color: var(--pf-carousel-nav-text);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--pf-carousel-nav-font-size, var(--font-size-sm));\n  height: var(--pf-carousel-nav-size, 28px);\n  justify-content: center;\n  padding: 0;\n  width: var(--pf-carousel-nav-size, 28px);\n}\n\n.nav:hover:not(:disabled) {\n  background: var(--pf-carousel-nav-hover-bg);\n  color: var(--pf-carousel-nav-hover-text);\n}\n\n.nav:focus-visible {\n  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.nav:disabled {\n  color: var(--pf-carousel-nav-text);\n  cursor: not-allowed;\n  opacity: var(--pf-carousel-disabled-opacity, 0.45);\n}\n\n.indicators {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--pf-carousel-indicator-gap, var(--space-1));\n  justify-content: center;\n}\n\n.indicator {\n  background: var(--pf-carousel-indicator-bg);\n  border: 0;\n  border-radius: var(--pf-carousel-indicator-radius, var(--radius-full));\n  cursor: pointer;\n  height: var(--pf-carousel-indicator-size, 8px);\n  padding: 0;\n  transition: all var(--pf-carousel-indicator-transition-duration, var(--duration-fast))\n    var(--easing-decelerate);\n  width: var(--pf-carousel-indicator-size, 8px);\n}\n\n.indicator--active {\n  background: var(--pf-carousel-indicator-active-bg);\n  width: var(--pf-carousel-indicator-active-width, 20px);\n}\n\n.indicator:focus-visible {\n  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.indicator-spacer {\n  display: block;\n  min-height: var(--pf-carousel-indicator-size, 8px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track,\n  .indicator {\n    transition: none;\n  }\n}\n","import { resolveSlideIndex, slidePositionLabel } from '@pitchfork-ui/core';\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\n/**\n * A carousel over `pf-carousel-slide` children.\n *\n * The group owns the index, the controls, the indicators and the live region\n * that announces the move; each slide owns only whether it is the one on show.\n *\n * `role=\"region\"` with `aria-roledescription=\"carousel\"` rather than any of\n * the tab or listbox patterns: a carousel is a region whose content changes,\n * and the announcement is what tells a reader it has.\n *\n * @slot - the `pf-carousel-slide` children.\n * @slot empty - what to show when there are no slides.\n * @part viewport - the clipping box.\n * @part track - the strip that slides.\n * @part controls - the row holding the buttons and the indicators.\n * @part previous - the step-back button.\n * @part next - the step-forward button.\n * @part indicators - the box holding the dots.\n * @part indicator - one dot.\n */\n@Component({\n  tag: 'pf-carousel',\n  styleUrl: 'pf-carousel.css',\n  shadow: true,\n})\nexport class PfCarousel {\n  @Element() el!: HTMLElement;\n\n  /** The slide on show, counting from 0. */\n  @Prop({ mutable: true }) index = 0;\n\n  /** Wrap at both ends rather than stopping. */\n  @Prop({ reflect: true }) loop = true;\n\n  /** Show the dots. */\n  @Prop({ reflect: true }) showIndicators = true;\n\n  /** Step forward on a timer. */\n  @Prop({ reflect: true }) autoPlay = false;\n\n  /** How long between steps, in milliseconds. */\n  @Prop() autoPlayInterval = 5000;\n\n  /** The carousel's accessible name. */\n  @Prop() label = 'Carousel';\n\n  /** The step-back button's accessible name. */\n  @Prop() previousLabel = 'Previous slide';\n\n  /** The step-forward button's accessible name. */\n  @Prop() nextLabel = 'Next slide';\n\n  /** Fires when the slide on show changes, however it changed. */\n  @Event() pfChange!: EventEmitter<{ index: number }>;\n\n  /** How many slides there are, which every control depends on. */\n  @State() total = 0;\n\n  private timer?: number;\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    this.startTimer();\n  }\n\n  disconnectedCallback() {\n    this.stopTimer();\n  }\n\n  @Watch('index')\n  @Watch('loop')\n  handleIndexChange() {\n    this.sync();\n  }\n\n  @Watch('autoPlay')\n  @Watch('autoPlayInterval')\n  handleTimerChange() {\n    this.startTimer();\n  }\n\n  /** Re-reads the slides, for a consumer who changed them imperatively. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Steps one slide forward, as the button and the timer do. */\n  @Method()\n  async next() {\n    this.goTo(this.resolved + 1);\n  }\n\n  /** Steps one slide back. */\n  @Method()\n  async previous() {\n    this.goTo(this.resolved - 1);\n  }\n\n  /** Direct children only: a nested carousel owns its own slides. */\n  private get slides(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-carousel-slide')).filter(\n      (slide) => slide.parentElement === this.el,\n    );\n  }\n\n  /** The slide actually on show, which an out-of-range index resolves to. */\n  private get resolved(): number {\n    return Math.max(resolveSlideIndex(this.index, this.total), 0);\n  }\n\n  private sync() {\n    const slides = this.slides;\n    this.total = slides.length;\n    const active = this.resolved;\n\n    for (const [position, slide] of slides.entries()) {\n      const node = slide as HTMLElement & { active: boolean; position: number; total: number };\n      node.active = position === active;\n      node.position = position + 1;\n      node.total = slides.length;\n    }\n  }\n\n  private goTo(next: number) {\n    const index = resolveSlideIndex(next, this.total, this.loop);\n    if (index < 0 || index === this.resolved) return;\n\n    this.index = index;\n    this.sync();\n    this.pfChange.emit({ index });\n  }\n\n  /**\n   * One timer, restarted rather than stacked: a consumer changing the interval\n   * while it runs would otherwise leave the old one going, and the carousel\n   * would step twice as often for no visible reason.\n   */\n  private startTimer() {\n    this.stopTimer();\n    if (!this.autoPlay || this.total < 2) return;\n\n    this.timer = window.setInterval(\n      () => {\n        this.goTo(this.resolved + 1);\n      },\n      Number(this.autoPlayInterval) || 5000,\n    );\n  }\n\n  private stopTimer() {\n    if (this.timer !== undefined) window.clearInterval(this.timer);\n    this.timer = undefined;\n  }\n\n  render() {\n    const active = this.resolved;\n    const atStart = !this.loop && active <= 0;\n    const atEnd = !this.loop && active >= this.total - 1;\n\n    return (\n      <Host role=\"region\" aria-roledescription=\"carousel\" aria-label={this.label}>\n        <div class=\"viewport\" part=\"viewport\">\n          {this.total === 0 ? (\n            <div class=\"empty\" part=\"empty\" role=\"status\">\n              <slot name=\"empty\">Add at least one slide.</slot>\n            </div>\n          ) : null}\n          {/*\n            The track stays in the tree even with no slides, because a slot\n            that is not rendered never fires `slotchange` — slides added later\n            would stay invisible for good.\n          */}\n          <div\n            class={{ track: true, empty: this.total === 0 }}\n            part=\"track\"\n            style={{ transform: `translateX(-${active * 100}%)` }}\n          >\n            <slot onSlotchange={() => this.refresh()} />\n          </div>\n        </div>\n\n        {/*\n          The announcement, which is the only thing a reader who cannot see the\n          carousel has to go on. `aria-live` on a box that is always present:\n          a live region added at the moment it changes is not announced.\n        */}\n        <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          {this.total > 0 ? slidePositionLabel(active, this.total) : ''}\n        </span>\n\n        <div class=\"controls\" part=\"controls\">\n          <button\n            type=\"button\"\n            class=\"nav\"\n            part=\"previous\"\n            aria-label={this.previousLabel}\n            disabled={atStart || this.total < 2}\n            onClick={() => this.goTo(active - 1)}\n          >\n            <pf-icon name=\"square-caret-left\" aria-hidden=\"true\"></pf-icon>\n          </button>\n\n          {this.showIndicators && this.total > 1 ? (\n            <div class=\"indicators\" part=\"indicators\" role=\"group\" aria-label=\"Slide indicators\">\n              {Array.from({ length: this.total }, (_, position) => (\n                <button\n                  type=\"button\"\n                  class={{ indicator: true, 'indicator--active': position === active }}\n                  part=\"indicator\"\n                  aria-label={`Go to slide ${position + 1}`}\n                  aria-current={position === active ? 'true' : null}\n                  onClick={() => this.goTo(position)}\n                ></button>\n              ))}\n            </div>\n          ) : (\n            <span class=\"indicator-spacer\" aria-hidden=\"true\"></span>\n          )}\n\n          <button\n            type=\"button\"\n            class=\"nav\"\n            part=\"next\"\n            aria-label={this.nextLabel}\n            disabled={atEnd || this.total < 2}\n            onClick={() => this.goTo(active + 1)}\n          >\n            <pf-icon name=\"square-caret-right\" aria-hidden=\"true\"></pf-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-chart-series.d.ts

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

package/dist/components/pf-chart-series.js

@@ -0,0 +1,2 @@
+import{t as e,p as s,H as a,h as t,a as r}from"./index.js";const c=()=>`:host{align-items:center;color:var(--pf-chart-text-muted);display:flex;font-size:var(--font-size-sm);gap:var(--space-2)}:host([hidden]){display:none}.dot{border-radius:var(--radius-full);flex-shrink:0;height:8px;width:8px}`;const i=s(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}seriesKey="";color;dashed=false;swatch="";render(){return t(r,{key:"42e03761d372da7b9878a86b5afd081e583232e9",role:"listitem"},t("span",{key:"73da1c97180054c5178eaaecaa882c5a440216e5",class:"dot",part:"dot","aria-hidden":"true",style:{background:this.swatch}}),t("span",{key:"dada4085c9a46265eaf454bbcb10b1d849839ca6",class:"label",part:"label"},t("slot",{key:"bca6cc3bd7c0fd8f65f10a696ca823526aea46f9"},this.seriesKey)))}static get style(){return c()}},[769,"pf-chart-series",{seriesKey:[513,"series-key"],color:[513],dashed:[516],swatch:[1025]}]);function d(){if(typeof customElements==="undefined"){return}const s=["pf-chart-series"];s.forEach((s=>{switch(s){case"pf-chart-series":if(!customElements.get(e(s))){customElements.define(e(s),i)}break}}))}d();const o=i;const n=d;export{o as PfChartSeries,n as defineCustomElement};
+//# sourceMappingURL=pf-chart-series.js.map

package/dist/components/pf-chart-series.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfChartSeriesCss","PfChartSeries","__stencil_proxyCustomElement","HTMLElement","seriesKey","color","dashed","swatch","render","h","Host","key","role","class","part","style","background","this"],"sources":["src/components/pf-chart-series/pf-chart-series.css?tag=pf-chart-series&encapsulation=shadow","src/components/pf-chart-series/pf-chart-series.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  color: var(--pf-chart-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.dot {\n  border-radius: var(--radius-full);\n  flex-shrink: 0;\n  height: 8px;\n  width: 8px;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One series of a `pf-line-chart` or a `pf-bar-chart`, and its own row in the\n * legend.\n *\n * The chart's data is a single array of rows keyed by series — bulk numbers,\n * which belong in a property — while the series are the part with names and\n * colours, which belong in the light DOM so a consumer can loop over them and\n * so the legend can hold their labels. A legend built in the chart's shadow\n * root could not reach a slotted label at all.\n *\n * `swatch` is the chart's to set: only it knows this series' place in the\n * palette.\n *\n * @slot - the series' name. Falls back to `seriesKey`.\n * @part dot - the colour swatch.\n * @part label - the name.\n */\n@Component({\n  tag: 'pf-chart-series',\n  styleUrl: 'pf-chart-series.css',\n  shadow: true,\n})\nexport class PfChartSeries {\n  /**\n   * The property each data row carries this series' value under.\n   *\n   * `seriesKey`, not `key`: `key` is the vdom's own prop name and reserved,\n   * the same family as `animate` shadowing `Element.prototype.animate`.\n   */\n  @Prop({ reflect: true }) seriesKey = '';\n\n  /** Overrides the palette colour the chart would give it. */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Draw this series' line dashed. Line charts only. Reflected. */\n  @Prop({ reflect: true }) dashed = false;\n\n  /** Set by the chart: the colour actually used, palette or override. */\n  @Prop({ mutable: true }) swatch = '';\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" style={{ background: this.swatch }}></span>\n        <span class=\"label\" part=\"label\">\n          <slot>{this.seriesKey}</slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAmB,IAAM,iO,MCwBlBC,EAAaC,EAAA,MAAAD,UAAAE,E,iFAOCC,UAAY,GAGZC,MAGAC,OAAS,MAGTC,OAAS,GAElC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,2CAAME,MAAM,MAAMC,KAAK,MAAK,cAAa,OAAOC,MAAO,CAAEC,WAAYC,KAAKV,UAC1EE,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACvBL,EAAA,QAAAE,IAAA,4CAAOM,KAAKb,Y","ignoreList":[]}

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

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

package/dist/components/pf-checkbox.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 c}from"./p-Cr6IXrUk.js";import{c as o}from"./p-Cy_kHPeC.js";const n=()=>`: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-checkbox-bg);border:1px solid var(--pf-checkbox-border);border-radius:var(--pf-checkbox-radius, var(--radius-sm));box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:18px;margin:0;position:relative;width:18px}.input:checked{background:var(--pf-checkbox-checked-bg);border-color:var(--pf-checkbox-border)}.input::after{border:solid var(--pf-checkbox-check-color);border-width:0 2px 2px 0;content:'';height:9px;left:5px;opacity:0;position:absolute;top:2px;transform:rotate(45deg);width:5px}.input:checked::after{opacity:1}.input:focus-visible{box-shadow:var(--pf-checkbox-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-checkbox-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-checkbox-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}`;const d=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;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);c(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:"f0888c00b688aef2c90deb60a7496971c2e52ac3"},a("div",{key:"25dbafc87f7c597cc055ade975033bab23ed67d9",class:"field",part:"field"},a("input",{key:"2d6f97d80d2686ad13ddac12bf70d12828611ad8",id:"input","aria-label":o(this.el,this.label),part:"input",class:"input",type:"checkbox",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:"0c6427fb3168226dd5c69e06e5769efab4cc0d5e",class:"label",part:"label",htmlFor:"input"},this.label)),this.error&&a("p",{key:"401852018ce3b0c0a856e669d96c33d185a5b730",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 n()}},[593,"pf-checkbox",{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-checkbox"];t.forEach((t=>{switch(t){case"pf-checkbox":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}l();const h=d;const p=l;export{h as PfCheckbox,p as defineCustomElement};
+//# sourceMappingURL=pf-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfCheckboxCss","PfCheckbox","__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","controlAriaLabel","el","type","htmlFor"],"sources":["src/components/pf-checkbox/pf-checkbox.css?tag=pf-checkbox&encapsulation=shadow","src/components/pf-checkbox/pf-checkbox.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-checkbox-bg);\n  border: 1px solid var(--pf-checkbox-border);\n  border-radius: var(--pf-checkbox-radius, var(--radius-sm));\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-block;\n  flex-shrink: 0;\n  height: 18px;\n  margin: 0;\n  position: relative;\n  width: 18px;\n}\n\n.input:checked {\n  background: var(--pf-checkbox-checked-bg);\n  border-color: var(--pf-checkbox-border);\n}\n\n/* The tick: two borders of a rotated box. */\n.input::after {\n  border: solid var(--pf-checkbox-check-color);\n  border-width: 0 2px 2px 0;\n  content: '';\n  height: 9px;\n  left: 5px;\n  opacity: 0;\n  position: absolute;\n  top: 2px;\n  transform: rotate(45deg);\n  width: 5px;\n}\n\n.input:checked::after {\n  opacity: 1;\n}\n\n.input:focus-visible {\n  box-shadow: var(--pf-checkbox-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-checkbox-label-text);\n  font-size: var(--font-size-md);\n}\n\n.error {\n  color: var(--pf-checkbox-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: var(--space-1) 0 0;\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/**\n * A form-associated checkbox.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox.\n * @part label - the label element.\n */\n@Component({\n  tag: 'pf-checkbox',\n  styleUrl: 'pf-checkbox.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfCheckbox {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Whether the box is ticked. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * What is submitted when ticked. Mirrors the native attribute, whose default\n   * is 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 ticks or unticks the box. */\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 unticked: 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 ticked.\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            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"input\"\n            class=\"input\"\n            type=\"checkbox\"\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":"0IAAA,MAAMA,EAAgB,IAAM,slC,MC6BfC,EAAUC,EAAA,MAAAD,UAAAE,E,6KAGFC,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,QAAO,aACEC,EAAiBpB,KAAKqB,GAAIrB,KAAKP,OAC3CyB,KAAK,QACLD,MAAM,QACNK,KAAK,WACLhC,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,QAAQK,QAAQ,SACvCvB,KAAKP,QAIXO,KAAKN,OACJoB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BnB,KAAKN,O","ignoreList":[]}

package/dist/components/pf-code-snippet.d.ts

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

package/dist/components/pf-code-snippet.js

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as i,c as s,h as t,a as n}from"./index.js";import{d as r}from"./p-CkFjPRTe.js";async function o(e){const a=typeof navigator==="undefined"?void 0:navigator.clipboard;if(!a?.writeText)return false;try{await a.writeText(e);return true}catch{return false}}function p(e){const a=e.replace(/\r\n/g,"\n").split("\n");if(a.length>1&&a[a.length-1]==="")a.pop();return a}const c=()=>`:host{display:block}:host([hidden]){display:none}.figure{background:var(--pf-code-snippet-bg);border:1px solid     var(       --pf-code-snippet-border,       color-mix(in srgb, var(--pf-code-snippet-bg) 82%, var(--pf-mix-base))     );border-radius:var(--radius-md);color:var(--pf-code-snippet-text);display:grid;margin:0;overflow:hidden}.header{align-items:center;background:var(     --pf-code-snippet-header-bg,     color-mix(in srgb, var(--pf-code-snippet-bg) 78%, var(--pf-mix-base))   );border-bottom:1px solid     var(       --pf-code-snippet-header-border,       color-mix(in srgb, var(--pf-code-snippet-bg) 65%, var(--pf-mix-base))     );display:flex;gap:var(--space-3);justify-content:space-between;min-height:40px;padding:0 var(--space-3)}.meta{align-items:baseline;display:inline-flex;gap:var(--space-2)}.title{color:var(--pf-code-snippet-title);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.language{color:var(--pf-code-snippet-language);font-size:var(--font-size-xs);text-transform:uppercase}.copy{align-items:center;background:var(     --pf-code-snippet-copy-bg,     color-mix(in srgb, var(--pf-code-snippet-bg) 70%, var(--pf-mix-base))   );border:1px solid     var(       --pf-code-snippet-copy-border,       color-mix(in srgb, var(--pf-code-snippet-bg) 55%, var(--pf-mix-base))     );border-radius:var(--radius-sm);color:var(--pf-code-snippet-copy-text);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--font-size-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.copy:hover{background:var(     --pf-code-snippet-copy-hover-bg,     color-mix(in srgb, var(--pf-code-snippet-bg) 58%, var(--pf-mix-base))   )}.copy:focus-visible{box-shadow:var(--pf-code-snippet-focus-ring, var(--pf-focus-ring));outline:none}.pre{font-family:var(--pf-code-font-family);font-size:var(--font-size-xs);line-height:1.65;margin:0;overflow:auto;padding:var(--space-3)}.plain,.markup{font:inherit}.markup.empty{display:none}.numbered{display:grid;font:inherit;grid-template-columns:auto 1fr}.line{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}.line-number{color:var(--pf-code-snippet-line-number);padding-inline-end:var(--space-3);text-align:end;user-select:none}.line-content{white-space:pre}.sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;const d=a(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfCopy=s(this,"pfCopy");this.pfCopyError=s(this,"pfCopyError")}get el(){return this}code="";language;heading;showLineNumbers=false;maxHeight;copyLabel="Copy";copiedLabel="Copied";copyFailedLabel="Copy failed";feedbackDuration=1600;pfCopy;pfCopyError;copied=false;failed=false;hasMarkup=false;resetTimer;componentWillLoad(){this.readSlot()}disconnectedCallback(){if(this.resetTimer!==undefined)window.clearTimeout(this.resetTimer)}async copy(){const e=await o(this.text);this.copied=e;this.failed=!e;if(e)this.pfCopy.emit({code:this.text});else this.pfCopyError.emit({message:this.copyFailedLabel});if(this.resetTimer!==undefined)window.clearTimeout(this.resetTimer);this.resetTimer=window.setTimeout((()=>{this.copied=false;this.failed=false;this.resetTimer=undefined}),Number(this.feedbackDuration)||1600);return e}get text(){if(this.code)return this.code;return this.el.textContent?.replace(/^\n/,"").trimEnd()??""}readSlot(){this.hasMarkup=Array.from(this.el.children).some((e=>!e.getAttribute("slot")&&e.textContent?.trim()))}render(){const e=p(this.code);const a=this.showLineNumbers&&!this.hasMarkup;const i=this.failed?this.copyFailedLabel:this.copied?this.copiedLabel:this.copyLabel;return t(n,{key:"ce790e02e48648e3f7237ae481cc9be19405dff5"},t("figure",{key:"256bedbf5c296e327a468ca8dcd7eb8a0b222ab5",class:"figure",part:"figure"},t("figcaption",{key:"19348aab69fda332deaa4bcfe960a51bba03628e",class:"header",part:"header"},t("span",{key:"a205ec4595e3c4bc7a3a0014a4f382ba5b1cd60e",class:"meta"},this.heading&&t("span",{key:"2952765b50ea3f47530f1512f5d3f300a3c7d46c",class:"title",part:"title"},this.heading),this.language&&t("span",{key:"dcf391d1cb9cee8dfdaf6225ea9492b0cf5024aa",class:"language",part:"language"},this.language)),t("button",{key:"81de649f6f5110741cea4a4a2c1cc5df2f6c1b94",type:"button",class:"copy",part:"copy","aria-describedby":"status",onClick:()=>this.copy()},t("pf-icon",{key:"2c5a328413fed44f659006170f1b30f436c53e10",name:this.failed?"triangle-exclamation":this.copied?"circle-check":"copy","aria-hidden":"true"}),t("span",{key:"b87e57f38c086e97e3a8a9ab9bc24aee878c388a"},i))),t("pre",{key:"31e71cc4836610003941856a5455e6ccf8c086f2",class:"pre",part:"pre",style:this.maxHeight?{maxHeight:`${this.maxHeight}px`,overflow:"auto"}:{}},t("code",{key:"6f019f3f6965e2b745ff7447b8c7ce14d76d88ff",class:{markup:true,empty:!this.hasMarkup}},t("slot",{key:"ad02a6b56fd9e8429b396e6d3a432801e6a24369",onSlotchange:()=>this.readSlot()})),!this.hasMarkup&&(a?t("code",{class:"numbered"},e.map(((e,a)=>t("span",{class:"line",part:"line"},t("span",{class:"line-number",part:"line-number","aria-hidden":"true"},a+1),t("span",{class:"line-content"},e===""?"\n":e))))):t("code",{class:"plain"},this.code))),t("span",{key:"3b0d4abef444eeb902bebe28c97ac1db7c097b24",class:"sr-only",id:"status","aria-live":"polite"},this.failed?this.copyFailedLabel:this.copied?this.copiedLabel:"")))}static get style(){return c()}},[769,"pf-code-snippet",{code:[1],language:[513],heading:[1],showLineNumbers:[516,"show-line-numbers"],maxHeight:[2,"max-height"],copyLabel:[1,"copy-label"],copiedLabel:[1,"copied-label"],copyFailedLabel:[1,"copy-failed-label"],feedbackDuration:[2,"feedback-duration"],copied:[32],failed:[32],hasMarkup:[32],copy:[64]}]);function f(){if(typeof customElements==="undefined"){return}const a=["pf-code-snippet","pf-icon"];a.forEach((a=>{switch(a){case"pf-code-snippet":if(!customElements.get(e(a))){customElements.define(e(a),d)}break;case"pf-icon":if(!customElements.get(e(a))){r()}break}}))}f();const l=d;const b=f;export{l as PfCodeSnippet,b as defineCustomElement};
+//# sourceMappingURL=pf-code-snippet.js.map

package/dist/components/pf-code-snippet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["async","copyText","text","clipboard","navigator","writeText","splitCodeLines","code","lines","replace","split","length","pop","pfCodeSnippetCss","PfCodeSnippet","__stencil_proxyCustomElement","HTMLElement","language","heading","showLineNumbers","maxHeight","copyLabel","copiedLabel","copyFailedLabel","feedbackDuration","pfCopy","pfCopyError","copied","failed","hasMarkup","resetTimer","componentWillLoad","this","readSlot","disconnectedCallback","undefined","window","clearTimeout","copy","ok","emit","message","setTimeout","Number","el","textContent","trimEnd","Array","from","children","some","child","getAttribute","trim","render","numbered","label","h","Host","key","class","part","type","onClick","name","style","overflow","markup","empty","onSlotchange","map","line","index","id"],"sources":["../core/dist/clipboard.js","src/components/pf-code-snippet/pf-code-snippet.css?tag=pf-code-snippet&encapsulation=shadow","src/components/pf-code-snippet/pf-code-snippet.tsx"],"sourcesContent":["//#region src/clipboard.ts\n/**\n* Copying text, and saying honestly whether it worked.\n*\n* In core because it is about the DOM — `navigator.clipboard` — rather than\n* about React, and because both layers have a copy button whose label is a\n* claim about what just happened.\n*/\n/**\n* Copies `text`, resolving to whether it was actually copied.\n*\n* The return value is the whole point. The React `CodeSnippet` wrote\n*\n* ```ts\n* if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(code);\n* setCopied(true);\n* ```\n*\n* — so where the API is missing the condition is simply false, nothing is\n* copied, and the button says \"Copied\" anyway. The API *is* missing in any\n* insecure context, which is every plain-`http` page and any iframe without\n* clipboard permission, so this was not a theoretical branch.\n*\n* There is deliberately no `document.execCommand('copy')` fallback. It is\n* deprecated, it needs a focused selection to work from, and it fails in most\n* of the same places; telling a person the copy failed, so they can select the\n* text themselves, is better than a second silent path to the same false\n* claim.\n*/\nasync function copyText(text) {\n\tconst clipboard = typeof navigator === \"undefined\" ? void 0 : navigator.clipboard;\n\tif (!clipboard?.writeText) return false;\n\ttry {\n\t\tawait clipboard.writeText(text);\n\t\treturn true;\n\t} catch {\n\t\treturn false;\n\t}\n}\n/**\n* A snippet's lines, for a gutter to count.\n*\n* A trailing newline is dropped, because a file that ends in one — nearly\n* every file — would otherwise show a numbered blank line at the end that is\n* not part of the code. Every other blank line is kept: they are the author's.\n*/\nfunction splitCodeLines(code) {\n\tconst lines = code.replace(/\\r\\n/g, \"\\n\").split(\"\\n\");\n\tif (lines.length > 1 && lines[lines.length - 1] === \"\") lines.pop();\n\treturn lines;\n}\n//#endregion\nexport { copyText, splitCodeLines };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.figure {\n  background: var(--pf-code-snippet-bg);\n  /*\n   * Derived borders and header stay as fallback mixes rather than theme.css\n   * aliases, so a scoped `--pf-code-snippet-bg` override re-tints them — the\n   * same arrangement the React stylesheet uses, and the reason the two look\n   * identical under a custom background.\n   */\n  border: 1px solid\n    var(\n      --pf-code-snippet-border,\n      color-mix(in srgb, var(--pf-code-snippet-bg) 82%, var(--pf-mix-base))\n    );\n  border-radius: var(--radius-md);\n  color: var(--pf-code-snippet-text);\n  display: grid;\n  margin: 0;\n  overflow: hidden;\n}\n\n.header {\n  align-items: center;\n  background: var(\n    --pf-code-snippet-header-bg,\n    color-mix(in srgb, var(--pf-code-snippet-bg) 78%, var(--pf-mix-base))\n  );\n  border-bottom: 1px solid\n    var(\n      --pf-code-snippet-header-border,\n      color-mix(in srgb, var(--pf-code-snippet-bg) 65%, var(--pf-mix-base))\n    );\n  display: flex;\n  gap: var(--space-3);\n  justify-content: space-between;\n  min-height: 40px;\n  padding: 0 var(--space-3);\n}\n\n.meta {\n  align-items: baseline;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.title {\n  color: var(--pf-code-snippet-title);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n}\n\n.language {\n  color: var(--pf-code-snippet-language);\n  font-size: var(--font-size-xs);\n  text-transform: uppercase;\n}\n\n.copy {\n  align-items: center;\n  background: var(\n    --pf-code-snippet-copy-bg,\n    color-mix(in srgb, var(--pf-code-snippet-bg) 70%, var(--pf-mix-base))\n  );\n  border: 1px solid\n    var(\n      --pf-code-snippet-copy-border,\n      color-mix(in srgb, var(--pf-code-snippet-bg) 55%, var(--pf-mix-base))\n    );\n  border-radius: var(--radius-sm);\n  color: var(--pf-code-snippet-copy-text);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--font-size-xs);\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-2);\n}\n\n.copy:hover {\n  background: var(\n    --pf-code-snippet-copy-hover-bg,\n    color-mix(in srgb, var(--pf-code-snippet-bg) 58%, var(--pf-mix-base))\n  );\n}\n\n.copy:focus-visible {\n  box-shadow: var(--pf-code-snippet-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.pre {\n  font-family: var(--pf-code-font-family);\n  font-size: var(--font-size-xs);\n  line-height: 1.65;\n  margin: 0;\n  overflow: auto;\n  padding: var(--space-3);\n}\n\n.plain,\n.markup {\n  font: inherit;\n}\n\n/*\n * Two classes deep, because the ties break on source order and a bare\n * `.empty` would lose to whatever `display` a later rule gives the box. The\n * slot itself stays rendered inside it either way, or markup added later\n * would never fire `slotchange`.\n */\n.markup.empty {\n  display: none;\n}\n\n/*\n * A grid, not a table: the numbers only have to line up in a column, and a\n * row here has no box of its own to need. `white-space: pre` on the content\n * is what keeps the author's indentation.\n */\n.numbered {\n  display: grid;\n  font: inherit;\n  grid-template-columns: auto 1fr;\n}\n\n.line {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: subgrid;\n}\n\n.line-number {\n  color: var(--pf-code-snippet-line-number);\n  padding-inline-end: var(--space-3);\n  text-align: end;\n  user-select: none;\n}\n\n.line-content {\n  white-space: pre;\n}\n\n/*\n * Each element needs its own copy: `.pf-sr-only` is declared once in the\n * React library's global sheet and does not cross a shadow boundary.\n */\n.sr-only {\n  border: 0;\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { copyText, splitCodeLines } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\n/**\n * A code block with a copy button.\n *\n * **No syntax highlighting, deliberately.** The React `CodeSnippet` uses\n * `prism-react-renderer`, which is a React renderer and has no equivalent\n * here; the alternatives are all large runtime dependencies, and an element in\n * a design system should not make a consumer's bundle choose one. A consumer\n * who already highlights code slots the markup their highlighter produced into\n * the default slot, and this renders that instead of the plain text — it still\n * owns the frame, the header, the copy button and the announcement.\n *\n * Line numbers are offered only for the plain-text path. Aligning a gutter\n * with someone else's markup needs to know where their lines break, which only\n * they know.\n *\n * @slot - pre-highlighted markup, rendered instead of `code`.\n * @part figure - the frame.\n * @part header - the title, language and copy button.\n * @part title - the title text.\n * @part language - the language tag.\n * @part copy - the copy button.\n * @part pre - the code block.\n * @part line - one numbered line, when line numbers are on.\n * @part line-number - that line's number.\n */\n@Component({\n  tag: 'pf-code-snippet',\n  styleUrl: 'pf-code-snippet.css',\n  shadow: true,\n})\nexport class PfCodeSnippet {\n  @Element() el!: HTMLElement;\n\n  /** The code, as plain text. */\n  @Prop() code = '';\n\n  /** Shown as a tag in the header, and not used for anything else. */\n  @Prop({ reflect: true }) language?: string;\n\n  /** Shown in the header. */\n  @Prop() heading?: string;\n\n  @Prop({ reflect: true }) showLineNumbers = false;\n\n  /** Scrolls past this height, in pixels. */\n  @Prop() maxHeight?: number;\n\n  @Prop() copyLabel = 'Copy';\n\n  @Prop() copiedLabel = 'Copied';\n\n  @Prop() copyFailedLabel = 'Copy failed';\n\n  /**\n   * How long the button keeps saying what the last press did, in\n   * milliseconds.\n   *\n   * A prop rather than a constant because a live region that still holds\n   * \"Copied\" when the next copy happens announces nothing, so how long it\n   * holds is a real decision — and because a test cannot use fake timers\n   * here: `vi.useFakeTimers()` replaces `requestAnimationFrame`, which\n   * Stencil's render queue runs on, and wedges every test after it.\n   */\n  @Prop() feedbackDuration = 1600;\n\n  /** Fires with the text that reached the clipboard. Not fired on a failure. */\n  @Event() pfCopy!: EventEmitter<{ code: string }>;\n\n  /** Fires when the copy could not be made, with the reason shown. */\n  @Event() pfCopyError!: EventEmitter<{ message: string }>;\n\n  @State() copied = false;\n\n  @State() failed = false;\n\n  /** Whether the consumer slotted their own highlighted markup. */\n  @State() hasMarkup = false;\n\n  private resetTimer?: number;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.readSlot();\n  }\n\n  disconnectedCallback() {\n    if (this.resetTimer !== undefined) window.clearTimeout(this.resetTimer);\n  }\n\n  /** Copies the snippet, as pressing the button does. */\n  @Method()\n  async copy(): Promise<boolean> {\n    /*\n     * The return value is the whole point. The React component guarded the\n     * write with `if (navigator.clipboard?.writeText)` and then said\n     * \"Copied\" regardless, so in any insecure context it claimed a copy it\n     * had not made.\n     */\n    const ok = await copyText(this.text);\n\n    this.copied = ok;\n    this.failed = !ok;\n\n    if (ok) this.pfCopy.emit({ code: this.text });\n    else this.pfCopyError.emit({ message: this.copyFailedLabel });\n\n    // One timer, restarted rather than stacked.\n    if (this.resetTimer !== undefined) window.clearTimeout(this.resetTimer);\n    this.resetTimer = window.setTimeout(\n      () => {\n        this.copied = false;\n        this.failed = false;\n        this.resetTimer = undefined;\n      },\n      Number(this.feedbackDuration) || 1600,\n    );\n\n    return ok;\n  }\n\n  /** What gets copied: the code, or the slotted markup's own text. */\n  private get text(): string {\n    if (this.code) return this.code;\n    return this.el.textContent?.replace(/^\\n/, '').trimEnd() ?? '';\n  }\n\n  private readSlot() {\n    this.hasMarkup = Array.from(this.el.children).some(\n      (child) => !child.getAttribute('slot') && child.textContent?.trim(),\n    );\n  }\n\n  render() {\n    const lines = splitCodeLines(this.code);\n    const numbered = this.showLineNumbers && !this.hasMarkup;\n    const label = this.failed\n      ? this.copyFailedLabel\n      : this.copied\n        ? this.copiedLabel\n        : this.copyLabel;\n\n    return (\n      <Host>\n        <figure class=\"figure\" part=\"figure\">\n          <figcaption class=\"header\" part=\"header\">\n            <span class=\"meta\">\n              {this.heading && (\n                <span class=\"title\" part=\"title\">\n                  {this.heading}\n                </span>\n              )}\n              {this.language && (\n                <span class=\"language\" part=\"language\">\n                  {this.language}\n                </span>\n              )}\n            </span>\n\n            <button\n              type=\"button\"\n              class=\"copy\"\n              part=\"copy\"\n              aria-describedby=\"status\"\n              onClick={() => this.copy()}\n            >\n              <pf-icon\n                name={this.failed ? 'triangle-exclamation' : this.copied ? 'circle-check' : 'copy'}\n                aria-hidden=\"true\"\n              ></pf-icon>\n              <span>{label}</span>\n            </button>\n          </figcaption>\n\n          <pre\n            class=\"pre\"\n            part=\"pre\"\n            style={this.maxHeight ? { maxHeight: `${this.maxHeight}px`, overflow: 'auto' } : {}}\n          >\n            {/*\n              The slot stays in the tree whichever path is taken: a slot that\n              is not rendered never fires `slotchange`, so markup added later\n              would stay invisible for good.\n            */}\n            <code class={{ markup: true, empty: !this.hasMarkup }}>\n              <slot onSlotchange={() => this.readSlot()} />\n            </code>\n\n            {!this.hasMarkup &&\n              (numbered ? (\n                <code class=\"numbered\">\n                  {lines.map((line, index) => (\n                    <span class=\"line\" part=\"line\">\n                      <span class=\"line-number\" part=\"line-number\" aria-hidden=\"true\">\n                        {index + 1}\n                      </span>\n                      <span class=\"line-content\">{line === '' ? '\\n' : line}</span>\n                    </span>\n                  ))}\n                </code>\n              ) : (\n                <code class=\"plain\">{this.code}</code>\n              ))}\n          </pre>\n\n          {/*\n            The announcement, on a box that is always present: a live region\n            added at the moment it changes is not announced. It is also the\n            button's description, which is what tells a reader using the\n            button what the last press did.\n          */}\n          <span class=\"sr-only\" id=\"status\" aria-live=\"polite\">\n            {this.failed ? this.copyFailedLabel : this.copied ? this.copiedLabel : ''}\n          </span>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/pf-collapsible.js

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as r,c as t,h as i,a as n}from"./index.js";import{K as s}from"./p-g4FlTDZx.js";import{d as o}from"./p-CkFjPRTe.js";const l=()=>`:host{border:1px solid var(--pf-collapsible-border);border-radius:var(--radius-md);display:block}:host([hidden]){display:none}.trigger{align-items:center;background:transparent;border:0;border-radius:var(--radius-md);color:var(--pf-collapsible-trigger-text);cursor:pointer;display:flex;font:inherit;font-weight:var(--font-weight-medium);gap:var(--space-2);justify-content:space-between;padding:var(--space-3);text-align:start;width:100%}.trigger:hover:not(:disabled){background:var(--pf-collapsible-trigger-hover-bg)}.trigger:focus-visible{box-shadow:var(--pf-collapsible-focus-ring, var(--pf-focus-ring));outline:none}.trigger:disabled{color:var(--pf-control-text-disabled);cursor:not-allowed}.label{min-width:0}.icon{align-items:center;color:var(--pf-collapsible-icon);display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .icon{transform:rotate(180deg)}.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--pf-transition-medium)}:host([open]) .panel{grid-template-rows:1fr}.content{min-height:0;overflow:hidden}.inner{border-top:1px solid var(--pf-collapsible-border);color:var(--pf-collapsible-content-text);padding:var(--space-3)}@media (prefers-reduced-motion: reduce){.icon,.panel{transition:none}}`;const c=a(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfOpenChange=t(this,"pfOpenChange")}open=false;disabled=false;showChevron=true;pfOpenChange;async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}handleOpenChange(e,a){if(e!==a)this.pfOpenChange.emit({open:e})}onClick=()=>{if(this.disabled)return;this.open=!this.open};handleKeyDown(e){if(e.key!==s.Escape||!this.open)return;if(e.composedPath()[0]!==this.trigger)return;e.preventDefault();this.open=false}trigger;render(){return i(n,{key:"77ee32aa721e31b94607d5b0043e31a0127ab4cf"},i("button",{key:"daeb5f647e0ca576fe362a3e6338ce0ac8a353c1",type:"button",id:"trigger",class:"trigger",part:"trigger",ref:e=>this.trigger=e,disabled:this.disabled,"aria-expanded":this.open?"true":"false","aria-controls":"panel",onClick:this.onClick},i("span",{key:"e0d551ab30b4236451093ee3c9a8e167450c940f",class:"label",part:"label"},i("slot",{key:"d315563377bef41f59bc236d341be6931a590a36",name:"trigger"})),this.showChevron&&i("span",{key:"efb107225ace280b4fcf44ffef86d63455297364",class:"icon",part:"icon","aria-hidden":"true"},i("pf-icon",{key:"2f1aad62fd01624b3ef5dba75fc1114af6ac2fa2",name:"chevron-down"}))),i("div",{key:"f2e53680c1073b0d423bd3400376af3fa65773d2",class:"panel",part:"panel"},i("div",{key:"1290a6058f2cf2063b77bb564dca6889f2367a33",class:"content",part:"content",id:"panel",role:"region","aria-labelledby":"trigger",inert:!this.open},i("div",{key:"b8634f3e2cf28dec7a1dcea45c983894e4cca130",class:"inner",part:"inner"},i("slot",{key:"2745c65d5c2a8ed9c1863e1db4f40933a3fab5a2"})))))}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return l()}},[769,"pf-collapsible",{open:[1540],disabled:[516],showChevron:[4,"show-chevron"],show:[64],hide:[64]},[[0,"keydown","handleKeyDown"]],{open:[{handleOpenChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const a=["pf-collapsible","pf-icon"];a.forEach((a=>{switch(a){case"pf-collapsible":if(!customElements.get(e(a))){customElements.define(e(a),c)}break;case"pf-icon":if(!customElements.get(e(a))){o()}break}}))}d();const p=c;const f=d;export{p as PfCollapsible,f as defineCustomElement};
+//# sourceMappingURL=pf-collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfCollapsibleCss","PfCollapsible","__stencil_proxyCustomElement","HTMLElement","open","disabled","showChevron","pfOpenChange","show","this","hide","handleOpenChange","next","previous","emit","onClick","handleKeyDown","event","key","Keys","Escape","composedPath","trigger","preventDefault","render","h","Host","type","id","class","part","ref","el","name","role","inert"],"sources":["src/components/pf-collapsible/pf-collapsible.css?tag=pf-collapsible&encapsulation=shadow","src/components/pf-collapsible/pf-collapsible.tsx"],"sourcesContent":[":host {\n  border: 1px solid var(--pf-collapsible-border);\n  border-radius: var(--radius-md);\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.trigger {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-md);\n  color: var(--pf-collapsible-trigger-text);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  font-weight: var(--font-weight-medium);\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-3);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:hover:not(:disabled) {\n  background: var(--pf-collapsible-trigger-hover-bg);\n}\n\n.trigger:focus-visible {\n  box-shadow: var(--pf-collapsible-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.trigger:disabled {\n  color: var(--pf-control-text-disabled);\n  cursor: not-allowed;\n}\n\n.label {\n  min-width: 0;\n}\n\n.icon {\n  align-items: center;\n  color: var(--pf-collapsible-icon);\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .icon {\n  transform: rotate(180deg);\n}\n\n/* The 0fr -> 1fr technique, which animates to the content's own height. */\n.panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--pf-transition-medium);\n}\n\n:host([open]) .panel {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  min-height: 0;\n  overflow: hidden;\n}\n\n.inner {\n  border-top: 1px solid var(--pf-collapsible-border);\n  color: var(--pf-collapsible-content-text);\n  padding: var(--space-3);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .icon,\n  .panel {\n    transition: none;\n  }\n}\n","import { Keys } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * One disclosure: a header that shows and hides the content below it.\n *\n * The same panel mechanics as `pf-accordion-item` — a `0fr` → `1fr` grid row\n * so the height animates to the content's own, and `inert` on the closed panel\n * because that height still holds focusable content — but no group above it,\n * so this element owns `open` itself.\n *\n * Both IDREFs stay inside this one shadow root, which is where an IDREF\n * resolves: the header names the panel with `aria-controls` and the panel\n * names the header back with `aria-labelledby`.\n *\n * @slot trigger - the header's label.\n * @slot - the content.\n * @part trigger - the header button.\n * @part label - the label's box inside the header.\n * @part icon - the chevron.\n * @part panel - the animating box around the content.\n * @part content - the region holding the content.\n */\n@Component({\n  tag: 'pf-collapsible',\n  styleUrl: 'pf-collapsible.css',\n  shadow: true,\n})\nexport class PfCollapsible {\n  /** Whether the content is showing. Reflected so the stylesheet selects on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Reflected, so the stylesheet can mark the header. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Show the rotating chevron. Defaults to true. */\n  @Prop() showChevron = true;\n\n  /** Fires whenever the content opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Opens the content. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the content. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place the change is announced, whatever caused it: the header, a\n   * method, or a consumer writing the prop. Announcing it from the click\n   * handler instead would miss the other two — the same mistake `pf-popover`\n   * and `pf-modal` both made from their DOM-event handlers.\n   *\n   * A consumer mirroring the value back sets `open` to what it already is,\n   * which Stencil does not treat as a change, so there is no loop.\n   */\n  @Watch('open')\n  handleOpenChange(next: boolean, previous: boolean) {\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  private onClick = () => {\n    if (this.disabled) return;\n    this.open = !this.open;\n  };\n\n  /**\n   * Escape closes it from the header, which is what the React component does.\n   * Only from the header: Escape inside the content belongs to whatever is in\n   * there — a dialog, or a field clearing itself.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== Keys.Escape || !this.open) return;\n    if (event.composedPath()[0] !== this.trigger) return;\n\n    event.preventDefault();\n    this.open = false;\n  }\n\n  private trigger?: HTMLButtonElement;\n\n  render() {\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          id=\"trigger\"\n          class=\"trigger\"\n          part=\"trigger\"\n          ref={(el) => (this.trigger = el)}\n          disabled={this.disabled}\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls=\"panel\"\n          onClick={this.onClick}\n        >\n          <span class=\"label\" part=\"label\">\n            <slot name=\"trigger\" />\n          </span>\n          {this.showChevron && (\n            <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          )}\n        </button>\n\n        <div class=\"panel\" part=\"panel\">\n          {/*\n            `inert` as well as the collapsed height: a panel animating to zero\n            still holds focusable content, so without it the next Tab from the\n            header lands inside the box that just closed.\n          */}\n          <div\n            class=\"content\"\n            part=\"content\"\n            id=\"panel\"\n            role=\"region\"\n            aria-labelledby=\"trigger\"\n            inert={!this.open}\n          >\n            <div class=\"inner\" part=\"inner\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAmB,IAAM,0vC,MCsClBC,EAAaC,EAAA,MAAAD,UAAAE,E,0HAEgBC,KAAO,MAGtBC,SAAW,MAG5BC,YAAc,KAGbC,aAIT,UAAMC,GACJ,IAAKC,KAAKJ,SAAUI,KAAKL,KAAO,I,CAKlC,UAAMM,GACJD,KAAKL,KAAO,K,CAad,gBAAAO,CAAiBC,EAAeC,GAC9B,GAAID,IAASC,EAAUJ,KAAKF,aAAaO,KAAK,CAAEV,KAAMQ,G,CAGhDG,QAAU,KAChB,GAAIN,KAAKJ,SAAU,OACnBI,KAAKL,MAAQK,KAAKL,IAAI,EASxB,aAAAY,CAAcC,GACZ,GAAIA,EAAMC,MAAQC,EAAKC,SAAWX,KAAKL,KAAM,OAC7C,GAAIa,EAAMI,eAAe,KAAOZ,KAAKa,QAAS,OAE9CL,EAAMM,iBACNd,KAAKL,KAAO,K,CAGNkB,QAER,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,4CACHO,EAAA,UAAAP,IAAA,2CACES,KAAK,SACLC,GAAG,UACHC,MAAM,UACNC,KAAK,UACLC,IAAMC,GAAQvB,KAAKa,QAAUU,EAC7B3B,SAAUI,KAAKJ,SAAQ,gBACRI,KAAKL,KAAO,OAAS,QAAO,gBAC7B,QACdW,QAASN,KAAKM,SAEdU,EAAA,QAAAP,IAAA,2CAAMW,MAAM,QAAQC,KAAK,SACvBL,EAAA,QAAAP,IAAA,2CAAMe,KAAK,aAEZxB,KAAKH,aACJmB,EAAA,QAAAP,IAAA,2CAAMW,MAAM,OAAOC,KAAK,OAAM,cAAa,QACzCL,EAAA,WAAAP,IAAA,2CAASe,KAAK,mBAKpBR,EAAA,OAAAP,IAAA,2CAAKW,MAAM,QAAQC,KAAK,SAMtBL,EAAA,OAAAP,IAAA,2CACEW,MAAM,UACNC,KAAK,UACLF,GAAG,QACHM,KAAK,SAAQ,kBACG,UAChBC,OAAQ1B,KAAKL,MAEbqB,EAAA,OAAAP,IAAA,2CAAKW,MAAM,QAAQC,KAAK,SACtBL,EAAA,QAAAP,IAAA,gD","ignoreList":[]}