@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfTabCss","PfTab","__stencil_proxyCustomElement","HTMLElement","value","disabled","selected","variant","size","fullWidth","icon","iconPlacement","count","badgePlacement","pfTabSelect","connectedCallback","this","el","hasAttribute","setAttribute","handleClick","event","stopPropagation","emit","handleKeyDown","isActivationKey","key","preventDefault","render","h","class","part","name","undefined","Host","role"],"sources":["src/components/pf-tab/pf-tab.css?tag=pf-tab&encapsulation=shadow","src/components/pf-tab/pf-tab.tsx"],"sourcesContent":["/*\n * The host is the tab: it carries `role=\"tab\"`, takes the focus the group\n * hands it, and is the box the group measures for the indicator. So the\n * padding and the type scale live on `:host`, selected on the `variant` and\n * `size` attributes the group writes down.\n */\n:host {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: var(--pf-tabs-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  gap: var(--space-2);\n  min-width: 0;\n  position: relative;\n  transition: color var(--pf-transition-medium);\n  user-select: none;\n  white-space: nowrap;\n  /* Above the shared indicator, which is a sibling inside the strip. */\n  z-index: 1;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  padding: var(--space-2) var(--space-3);\n}\n\n:host([size='md']) {\n  padding: var(--pf-tabs-tab-padding-y-md) var(--pf-tabs-tab-padding-x-md);\n}\n\n:host([full-width]) {\n  flex: 1;\n  justify-content: center;\n}\n\n/* The indicator draws the underline; the transparent border holds the space. */\n:host([variant='underline']) {\n  border-bottom: var(--pf-tabs-underline-width) solid transparent;\n  margin-bottom: -1px;\n}\n\n:host([variant='pills']) {\n  border-radius: var(--radius-sm);\n}\n\n:host(:hover:not([disabled])),\n:host([selected]),\n:host(:focus-visible) {\n  color: var(--pf-tabs-text);\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid color-mix(in srgb, var(--pf-tabs-text) 32%, transparent);\n  outline-offset: 2px;\n}\n\n/* Decorative, and inherits the tab's colour. */\n.icon {\n  flex-shrink: 0;\n  font-size: 1em;\n}\n\n/* Smaller than a default badge, and colour-neutral so it reads in both states. */\n.count {\n  flex-shrink: 0;\n  font-size: var(--font-size-xs);\n  min-height: 18px;\n  padding: 0 var(--space-2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n}\n","import { isActivationKey } from '@pitchfork-ui/core';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\n\nimport type { PfTabsSize, PfTabsVariant } from '../pf-tabs/pf-tabs';\n\nexport type PfTabPlacement = 'start' | 'end';\n\n/**\n * One tab inside a `pf-tabs`.\n *\n * It only reports that it was chosen; the group owns the selection, the single\n * tab stop and the id wiring — the same division as `pf-radio-group` with its\n * radios and `pf-select` with its options. The group writes `selected`,\n * `variant`, `size` and `full-width` back onto it, so the stylesheet has\n * reflected attributes to select on without the tab knowing anything about its\n * container.\n *\n * The host is the `tab` itself rather than a wrapper around a button, so it is\n * the element the group focuses and the one `aria-controls` points from.\n *\n * @slot - the tab's label.\n * @part label - the label's box.\n * @part icon - the decorative icon, when `icon` is set.\n * @part count - the count badge, when `count` is set.\n */\n@Component({\n  tag: 'pf-tab',\n  styleUrl: 'pf-tab.css',\n  shadow: true,\n})\nexport class PfTab {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Identifies the tab, and pairs it with the `pf-tab-panel` carrying the same\n   * value.\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  /** Reflected; the stylesheet and the group's own filtering both read it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set by the group. Reflected, so the stylesheet can mark the tab. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** Set by the group from its own `variant`. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) variant: PfTabsVariant = 'underline';\n\n  /** Set by the group from its own `size`. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) size: PfTabsSize = 'md';\n\n  /** Set by the group from its own `fullWidth`. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) fullWidth = false;\n\n  /** A decorative icon's name, from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /** Which side of the label the icon sits on. */\n  @Prop() iconPlacement: PfTabPlacement = 'start';\n\n  /**\n   * A count rendered as a badge beside the label (GitHub-style, \"Issues 12\").\n   * It is left in the tab's accessible name, so a screen reader announces it.\n   * `0` shows a zero; omitting the prop shows no badge at all.\n   */\n  @Prop() count?: number;\n\n  /** Which side of the label the count badge sits on. */\n  @Prop() badgePlacement: PfTabPlacement = 'end';\n\n  /** Asks the group to select this tab. The group decides. */\n  @Event() pfTabSelect!: EventEmitter<{ value: string }>;\n\n  /**\n   * Puts itself in the group's `tab` slot.\n   *\n   * So that a consumer can write one `pf-tab` and one `pf-tab-panel` per item\n   * — interleaved, which is what a loop over data produces — and still have\n   * the tabs land in the strip and the panels in the stack below it. A slot\n   * the consumer set themselves is left alone, so the explicit spelling keeps\n   * working.\n   *\n   * Assigning `slot` moves the node between slots, which fires `slotchange` on\n   * both; writing the same value again is not a mutation, so this does not\n   * loop.\n   */\n  connectedCallback() {\n    if (!this.el.hasAttribute('slot')) this.el.setAttribute('slot', 'tab');\n  }\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      // Swallowed rather than left for the group to read as a selection.\n      event.stopPropagation();\n      return;\n    }\n    this.pfTabSelect.emit({ value: this.value });\n  }\n\n  /**\n   * Enter and Space select, as they do on a tab. The arrows are the group's:\n   * only it knows the other tabs.\n   *\n   * `preventDefault` because the host is a focusable element rather than a\n   * button, so Space would scroll the page instead.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!isActivationKey(event.key) || this.disabled) return;\n    event.preventDefault();\n    this.pfTabSelect.emit({ value: this.value });\n  }\n\n  render() {\n    const icon = this.icon ? (\n      <pf-icon key=\"icon\" class=\"icon\" part=\"icon\" name={this.icon} aria-hidden=\"true\"></pf-icon>\n    ) : null;\n    const count =\n      this.count === undefined ? null : (\n        <pf-badge key=\"count\" class=\"count\" part=\"count\" variant=\"neutral\">\n          {this.count}\n        </pf-badge>\n      );\n\n    return (\n      <Host\n        role=\"tab\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        {this.iconPlacement === 'start' ? icon : null}\n        {this.badgePlacement === 'start' ? count : null}\n        <span class=\"label\" part=\"label\">\n          <slot />\n        </span>\n        {this.badgePlacement === 'end' ? count : null}\n        {this.iconPlacement === 'end' ? icon : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAW,IAAM,grC,MC8BVC,EAAKC,EAAA,MAAAD,UAAAE,E,6IAWSC,MAAQ,GAGRC,SAAW,MAGIC,SAAW,MAGXC,QAAyB,YAGzBC,KAAmB,KAGnBC,UAAY,MAG5CC,KAGAC,cAAgC,QAOhCC,MAGAC,eAAiC,MAGhCC,YAeT,iBAAAC,GACE,IAAKC,KAAKC,GAAGC,aAAa,QAASF,KAAKC,GAAGE,aAAa,OAAQ,M,CAIlE,WAAAC,CAAYC,GACV,GAAIL,KAAKX,SAAU,CAEjBgB,EAAMC,kBACN,M,CAEFN,KAAKF,YAAYS,KAAK,CAAEnB,MAAOY,KAAKZ,O,CAWtC,aAAAoB,CAAcH,GACZ,IAAKI,EAAgBJ,EAAMK,MAAQV,KAAKX,SAAU,OAClDgB,EAAMM,iBACNX,KAAKF,YAAYS,KAAK,CAAEnB,MAAOY,KAAKZ,O,CAGtC,MAAAwB,GACE,MAAMlB,EAAOM,KAAKN,KAChBmB,EAAA,WAASH,IAAI,OAAOI,MAAM,OAAOC,KAAK,OAAOC,KAAMhB,KAAKN,KAAI,cAAc,SACxE,KACJ,MAAME,EACJI,KAAKJ,QAAUqB,UAAY,KACzBJ,EAAA,YAAUH,IAAI,QAAQI,MAAM,QAAQC,KAAK,QAAQxB,QAAQ,WACtDS,KAAKJ,OAIZ,OACEiB,EAACK,EAAI,CAAAR,IAAA,2CACHS,KAAK,MAAK,gBACKnB,KAAKV,SAAW,OAAS,QAAO,gBAChCU,KAAKX,SAAW,OAAS,MAEvCW,KAAKL,gBAAkB,QAAUD,EAAO,KACxCM,KAAKH,iBAAmB,QAAUD,EAAQ,KAC3CiB,EAAA,QAAAH,IAAA,2CAAMI,MAAM,QAAQC,KAAK,SACvBF,EAAA,QAAAH,IAAA,8CAEDV,KAAKH,iBAAmB,MAAQD,EAAQ,KACxCI,KAAKL,gBAAkB,MAAQD,EAAO,K","ignoreList":[]}

package/dist/components/pf-table-cell.d.ts

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

package/dist/components/pf-table-cell.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,c as i,h as a,a as n}from"./index.js";const o=()=>`:host{border-bottom:1px solid var(--pf-table-border);color:var(--pf-table-text);display:table-cell;font-size:var(--font-size-sm);line-height:1.4;padding:var(--pf-table-cell-padding-block, 14px) var(--space-3);vertical-align:middle}:host([hidden]){display:none}@media (min-width: 768px){:host{padding-inline:var(--space-4)}}:host([head]){background:var(--pf-table-bg-subtle);color:var(--pf-table-text-muted);font-weight:var(--font-weight-semibold);position:var(--pf-table-head-position, static);top:0;z-index:1}:host([last]){border-bottom:0}:host([align='left']){text-align:start}:host([align='center']){text-align:center}:host([align='right']){text-align:end}.sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:var(--space-2);justify-content:inherit;padding:0;width:100%}.sort:hover,.sort:focus-visible{color:var(--pf-table-text);outline:none}.indicator{display:inline-flex;font-size:var(--font-size-2xs);line-height:1;opacity:0.7}`;const l=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfTableSort=i(this,"pfTableSort")}head=false;last=false;align="left";width;sortKey;sortable=false;sort="none";pfTableSort;onSort=()=>{if(!this.sortKey)return;this.pfTableSort.emit({key:this.sortKey})};render(){const t=this.head&&this.sortable&&Boolean(this.sortKey);return a(n,{key:"419a9736fa82721764ea58179c56000a4eed5c25",role:this.head?"columnheader":"cell","aria-sort":t?this.sort:null,style:this.width?{width:this.width}:undefined},t?a("button",{type:"button",class:"sort",part:"sort",onClick:this.onSort},a("span",{class:"label"},a("slot",null)),a("span",{class:"indicator",part:"indicator","aria-hidden":"true"},this.sort==="ascending"?"^":this.sort==="descending"?"v":"-")):a("slot",null))}static get style(){return o()}},[769,"pf-table-cell",{head:[1540],last:[1540],align:[513],width:[1],sortKey:[513,"sort-key"],sortable:[516],sort:[1025]}]);function r(){if(typeof customElements==="undefined"){return}const e=["pf-table-cell"];e.forEach((e=>{switch(e){case"pf-table-cell":if(!customElements.get(t(e))){customElements.define(t(e),l)}break}}))}r();const c=l;const d=r;export{c as PfTableCell,d as defineCustomElement};
+//# sourceMappingURL=pf-table-cell.js.map

package/dist/components/pf-table-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTableCellCss","PfTableCell","__stencil_proxyCustomElement","HTMLElement","head","last","align","width","sortKey","sortable","sort","pfTableSort","onSort","this","emit","key","render","Boolean","h","Host","role","style","undefined","type","class","part","onClick"],"sources":["src/components/pf-table-cell/pf-table-cell.css?tag=pf-table-cell&encapsulation=shadow","src/components/pf-table-cell/pf-table-cell.tsx"],"sourcesContent":[":host {\n  border-bottom: 1px solid var(--pf-table-border);\n  color: var(--pf-table-text);\n  display: table-cell;\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  padding: var(--pf-table-cell-padding-block, 14px) var(--space-3);\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--md) {\n  :host {\n    padding-inline: var(--space-4);\n  }\n}\n\n:host([head]) {\n  background: var(--pf-table-bg-subtle);\n  color: var(--pf-table-text-muted);\n  font-weight: var(--font-weight-semibold);\n  /*\n   * Read from the table rather than told: `sticky` only when the table asked\n   * for a sticky header, `static` otherwise.\n   */\n  position: var(--pf-table-head-position, static);\n  top: 0;\n  z-index: 1;\n}\n\n/* The table's own border is the rule under the last row. */\n:host([last]) {\n  border-bottom: 0;\n}\n\n:host([align='left']) {\n  text-align: start;\n}\n\n:host([align='center']) {\n  text-align: center;\n}\n\n:host([align='right']) {\n  text-align: end;\n}\n\n.sort {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  gap: var(--space-2);\n  /* Follows the cell's own alignment rather than fighting it. */\n  justify-content: inherit;\n  padding: 0;\n  width: 100%;\n}\n\n.sort:hover,\n.sort:focus-visible {\n  color: var(--pf-table-text);\n  outline: none;\n}\n\n.indicator {\n  display: inline-flex;\n  font-size: var(--font-size-2xs);\n  line-height: 1;\n  opacity: 0.7;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type PfTableCellAlign = 'left' | 'center' | 'right';\n\n/**\n * One cell of a `pf-table` row.\n *\n * A header cell carries `columnheader` rather than `cell`, which the row tells\n * it; `sortable` turns the label into a button that asks the table to sort.\n * The table answers by writing `sort` back, which is what `aria-sort` and the\n * indicator read — the ask and the answer kept apart, as everywhere else here.\n *\n * @slot - the cell's content.\n * @part sort - the header's sort button, when `sortable` is set.\n * @part indicator - the sort indicator inside that button.\n */\n@Component({\n  tag: 'pf-table-cell',\n  styleUrl: 'pf-table-cell.css',\n  shadow: true,\n})\nexport class PfTableCell {\n  /** Set by the row: a header cell. Reflected, so the stylesheet reads it. */\n  @Prop({ mutable: true, reflect: true }) head = false;\n\n  /** Set by the row: a cell in the last body row, which drops its rule. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** Which way the content sits. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) align: PfTableCellAlign = 'left';\n\n  /** A column width, as any CSS length. Only a header cell's is read. */\n  @Prop() width?: string;\n\n  /**\n   * Identifies the column in the table's sort state. A header cell with one\n   * and `sortable` set is the only thing that can be sorted on.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-table-cell[sort-key=\"...\"]` finds\n   * nothing. The table reads the property.\n   */\n  @Prop({ reflect: true }) sortKey?: string;\n\n  /** Offer to sort on this column. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) sortable = false;\n\n  /** Set by the table: how this column is sorted, if it is. */\n  @Prop({ mutable: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  /** Asks the table to sort on this column. The table decides which way. */\n  @Event() pfTableSort!: EventEmitter<{ key: string }>;\n\n  private onSort = () => {\n    if (!this.sortKey) return;\n    this.pfTableSort.emit({ key: this.sortKey });\n  };\n\n  render() {\n    const sortable = this.head && this.sortable && Boolean(this.sortKey);\n\n    return (\n      <Host\n        role={this.head ? 'columnheader' : 'cell'}\n        aria-sort={sortable ? this.sort : null}\n        style={this.width ? { width: this.width } : undefined}\n      >\n        {sortable ? (\n          <button type=\"button\" class=\"sort\" part=\"sort\" onClick={this.onSort}>\n            <span class=\"label\">\n              <slot />\n            </span>\n            {/* Decorative: `aria-sort` on the header is what is announced. */}\n            <span class=\"indicator\" part=\"indicator\" aria-hidden=\"true\">\n              {this.sort === 'ascending' ? '^' : this.sort === 'descending' ? 'v' : '-'}\n            </span>\n          </button>\n        ) : (\n          <slot />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAiB,IAAM,6+B,MCqBhBC,EAAWC,EAAA,MAAAD,UAAAE,E,wHAEkBC,KAAO,MAGPC,KAAO,MAGtBC,MAA0B,OAG3CC,MAUiBC,QAGAC,SAAW,MAGXC,KAA4C,OAG5DC,YAEDC,OAAS,KACf,IAAKC,KAAKL,QAAS,OACnBK,KAAKF,YAAYG,KAAK,CAAEC,IAAKF,KAAKL,SAAU,EAG9C,MAAAQ,GACE,MAAMP,EAAWI,KAAKT,MAAQS,KAAKJ,UAAYQ,QAAQJ,KAAKL,SAE5D,OACEU,EAACC,EAAI,CAAAJ,IAAA,2CACHK,KAAMP,KAAKT,KAAO,eAAiB,OAAM,YAC9BK,EAAWI,KAAKH,KAAO,KAClCW,MAAOR,KAAKN,MAAQ,CAAEA,MAAOM,KAAKN,OAAUe,WAE3Cb,EACCS,EAAA,UAAQK,KAAK,SAASC,MAAM,OAAOC,KAAK,OAAOC,QAASb,KAAKD,QAC3DM,EAAA,QAAMM,MAAM,SACVN,EAAA,cAGFA,EAAA,QAAMM,MAAM,YAAYC,KAAK,YAAW,cAAa,QAClDZ,KAAKH,OAAS,YAAc,IAAMG,KAAKH,OAAS,aAAe,IAAM,MAI1EQ,EAAA,a","ignoreList":[]}

package/dist/components/pf-table-row.d.ts

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

package/dist/components/pf-table-row.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,h as a,a as o}from"./index.js";const n=()=>`:host{display:table-row}:host([hidden]){display:none}:host([odd]){background:var(--pf-table-row-stripe, transparent)}:host(:not([head]):hover){background:var(--pf-table-row-hover, transparent)}`;const r=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}head=false;odd=false;last=false;componentWillLoad(){this.sync()}sync(){for(const t of Array.from(this.el.querySelectorAll("pf-table-cell"))){if(t.parentElement!==this.el)continue;const e=t;e.head=this.head;e.last=this.last}}render(){return a(o,{key:"d9c4ff6abef4826dd24c2099e10b7096bea0c93a",role:"row"},a("slot",{key:"4cb6b474a1dd2ddb970664266aa0b102bf52ead2",onSlotchange:()=>this.sync()}))}static get watchers(){return{head:[{sync:0}],last:[{sync:0}]}}static get style(){return n()}},[769,"pf-table-row",{head:[516],odd:[1540],last:[1540]},undefined,{head:[{sync:0}],last:[{sync:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["pf-table-row"];e.forEach((e=>{switch(e){case"pf-table-row":if(!customElements.get(t(e))){customElements.define(t(e),r)}break}}))}c();const d=r;const l=c;export{d as PfTableRow,l as defineCustomElement};
+//# sourceMappingURL=pf-table-row.js.map

package/dist/components/pf-table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTableRowCss","PfTableRow","__stencil_proxyCustomElement","HTMLElement","head","odd","last","componentWillLoad","this","sync","cell","Array","from","el","querySelectorAll","parentElement","node","render","h","Host","key","role","onSlotchange"],"sources":["src/components/pf-table-row/pf-table-row.css?tag=pf-table-row&encapsulation=shadow","src/components/pf-table-row/pf-table-row.tsx"],"sourcesContent":["/*\n * A box, not `display: contents`: that is what lets the row take a background\n * and a `:hover` of its own. An element with no box takes neither, which is\n * why the grid version of this needed both pushed down in JS.\n */\n:host {\n  display: table-row;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([odd]) {\n  background: var(--pf-table-row-stripe, transparent);\n}\n\n/* The header is not a row anyone hovers over to read. */\n:host(:not([head]):hover) {\n  background: var(--pf-table-row-hover, transparent);\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * One row of a `pf-table`.\n *\n * `display: table-row`, so the row is a box: that is what lets it take a\n * background for striping and a `:hover` of its own, neither of which an\n * element with `display: contents` can do. Its cells are table-cells inside\n * it, and the column widths come from the table layout rather than from\n * anything measured.\n *\n * The row pushes `head` and `last` onto its own cells, because it knows what\n * it is and they do not — `last` comes from the table, which is the only\n * thing that can see where the body ends.\n *\n * @slot - the `pf-table-cell` children.\n */\n@Component({\n  tag: 'pf-table-row',\n  styleUrl: 'pf-table-row.css',\n  shadow: true,\n})\nexport class PfTableRow {\n  @Element() el!: HTMLElement;\n\n  /** A header row. Reflected, and pushed onto its cells. */\n  @Prop({ reflect: true }) head = false;\n\n  /** Set by the table: every other body row, for striping. Reflected. */\n  @Prop({ mutable: true, reflect: true }) odd = false;\n\n  /**\n   * Set by the table: the last body row, whose cells drop their bottom border\n   * so the rule does not double up with the table's own.\n   */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  @Watch('head')\n  @Watch('last')\n  sync() {\n    for (const cell of Array.from(this.el.querySelectorAll<HTMLElement>('pf-table-cell'))) {\n      if (cell.parentElement !== this.el) continue;\n      const node = cell as HTMLElement & { head: boolean; last: boolean };\n      node.head = this.head;\n      node.last = this.last;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"row\">\n        <slot onSlotchange={() => this.sync()} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAgB,IAAM,oM,MCsBfC,EAAUC,EAAA,MAAAD,UAAAE,E,sGAIIC,KAAO,MAGQC,IAAM,MAMNC,KAAO,MAG/C,iBAAAC,GACEC,KAAKC,M,CAKP,IAAAA,GACE,IAAK,MAAMC,KAAQC,MAAMC,KAAKJ,KAAKK,GAAGC,iBAA8B,kBAAmB,CACrF,GAAIJ,EAAKK,gBAAkBP,KAAKK,GAAI,SACpC,MAAMG,EAAON,EACbM,EAAKZ,KAAOI,KAAKJ,KACjBY,EAAKV,KAAOE,KAAKF,I,EAIrB,MAAAW,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,OACTH,EAAA,QAAAE,IAAA,2CAAME,aAAc,IAAMd,KAAKC,S","ignoreList":[]}

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

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

package/dist/components/pf-table.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as a,c as s,h as r,a as o}from"./index.js";function i(e,t){if(e?.key!==t)return{key:t,direction:"asc"};return{key:t,direction:e.direction==="asc"?"desc":"asc"}}function n(e,t){if(e?.key!==t)return"none";return e.direction==="asc"?"ascending":"descending"}const c=()=>`:host{background:var(--pf-table-bg);border:1px solid var(--pf-table-border);border-radius:var(--radius-md);display:block;overflow:auto}:host([hidden]){display:none}:host{--pf-table-cell-padding-block:14px;--pf-table-head-position:static;--pf-table-row-stripe:transparent;--pf-table-row-hover:transparent}:host([dense]){--pf-table-cell-padding-block:var(--space-3)}:host([sticky-header]){--pf-table-head-position:sticky}:host([striped]){--pf-table-row-stripe:color-mix(in srgb, var(--pf-table-bg-subtle) 55%, transparent)}:host([hoverable]){--pf-table-row-hover:color-mix(in srgb, var(--pf-table-bg-subtle) 70%, transparent)}.caption{align-items:center;border-bottom:1px solid var(--pf-table-border);color:var(--pf-table-text-muted);display:flex;font-size:var(--font-size-sm);min-height:56px;padding:var(--space-3) var(--space-4)}.caption.empty{display:none}.table{border-collapse:separate;border-spacing:0;display:table;min-width:620px;width:100%}.empty{caption-side:bottom;color:var(--pf-table-text-muted);display:table-caption;font-size:var(--font-size-sm);padding:var(--pf-table-cell-padding-block) var(--space-3);text-align:center}@media (min-width: 768px){.empty{padding-inline:var(--space-4)}}`;const d=t(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfSortChange=s(this,"pfSortChange")}get el(){return this}dense=false;striped=false;hoverable=true;stickyHeader=false;sortKey;sortDirection="asc";label;pfSortChange;isEmpty=false;hasCaption=false;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}handleSortChange(){this.sync()}async refresh(){this.sync()}get rows(){return Array.from(this.el.querySelectorAll("pf-table-row")).filter((e=>e.parentElement===this.el))}isHead(e){return e.head??e.hasAttribute("head")}sync(){const e=this.rows;const t=e.filter((e=>!this.isHead(e)));this.isEmpty=t.length===0;this.hasCaption=Array.from(this.el.children).some((e=>e.getAttribute("slot")==="caption"));for(const[e,a]of t.entries()){const s=a;s.odd=e%2===1;s.last=e===t.length-1}const a=this.sortKey===undefined?undefined:{key:this.sortKey,direction:this.sortDirection};for(const t of e.filter((e=>this.isHead(e)))){for(const e of Array.from(t.querySelectorAll("pf-table-cell"))){const t=e;const s=e.sortKey;t.sort=s?n(a,s):"none"}}}handleSort(e){e.stopPropagation();const t=this.sortKey===undefined?undefined:{key:this.sortKey,direction:this.sortDirection};const a=i(t,e.detail.key);this.sortKey=a.key;this.sortDirection=a.direction;this.sync();this.pfSortChange.emit(a)}render(){return r(o,{key:"ee37a1921fc3c15710ec40a9844c4b2853efeecd"},r("div",{key:"ff1f94910828762a875636ff68e6dd60facaf495",class:{caption:true,empty:!this.hasCaption},part:"caption"},r("slot",{key:"f00c8a4351194b4af24c78dbdddbb66bcbdb9b57",name:"caption",onSlotchange:()=>this.refresh()})),r("div",{key:"28f6a3886f9452a0b36603d6d052dc1048045282",class:"table",part:"table",role:"table","aria-label":this.label},r("slot",{key:"17c9ce7882488a06f7b0a74c473cb60939883905",onSlotchange:()=>this.refresh()}),this.isEmpty&&r("div",{key:"4171c08a6fa2ad54b18431b9ea279517385970bf",class:"empty",part:"empty",role:"row"},r("span",{key:"a0b1638b64394db3cdcd4a29fabe77fbe4b6e222",role:"cell"},r("slot",{key:"9b0d26c64c13e136bc8f3a05b0bbfec8c750833d",name:"empty"},"No data available.")))))}static get watchers(){return{sortKey:[{handleSortChange:0}],sortDirection:[{handleSortChange:0}]}}static get style(){return c()}},[769,"pf-table",{dense:[516],striped:[516],hoverable:[516],stickyHeader:[516,"sticky-header"],sortKey:[1537,"sort-key"],sortDirection:[1537,"sort-direction"],label:[1],isEmpty:[32],hasCaption:[32],refresh:[64]},[[0,"pfTableSort","handleSort"]],{sortKey:[{handleSortChange:0}],sortDirection:[{handleSortChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-table"];t.forEach((t=>{switch(t){case"pf-table":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}l();const p=d;const b=l;export{p as PfTable,b as defineCustomElement};
+//# sourceMappingURL=pf-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["nextSortState","current","key","direction","ariaSortFor","pfTableCss","PfTable","__stencil_proxyCustomElement","HTMLElement","dense","striped","hoverable","stickyHeader","sortKey","sortDirection","label","pfSortChange","isEmpty","hasCaption","componentWillLoad","this","sync","componentDidLoad","handleSortChange","refresh","rows","Array","from","el","querySelectorAll","filter","row","parentElement","isHead","head","hasAttribute","bodyRows","length","children","some","child","getAttribute","index","entries","node","odd","last","undefined","candidate","cell","sort","handleSort","event","stopPropagation","next","detail","emit","render","h","Host","class","caption","empty","part","name","onSlotchange","role"],"sources":["../core/dist/table.js","src/components/pf-table/pf-table.css?tag=pf-table&encapsulation=shadow","src/components/pf-table/pf-table.tsx"],"sourcesContent":["//#region src/table.ts\n/**\n* Normalises a cell's value to something comparable: a `Date` becomes its\n* time, a number stays one, and everything else becomes text — with nothing\n* at all becoming the empty string, so a missing cell sorts to one end rather\n* than throwing.\n*/\nfunction normalizeSortValue(value) {\n\tif (value instanceof Date) return value.getTime();\n\tif (typeof value === \"number\") return value;\n\treturn value === null || value === void 0 ? \"\" : String(value);\n}\n/**\n* Compares two cell values in `direction`.\n*\n* Two numbers compare numerically; anything else goes through\n* `localeCompare` with `numeric: true` and a base sensitivity, which is what\n* sorts \"Item 2\" before \"Item 10\" and ignores case and accents. The two rules\n* together are why this is shared: a table that collated differently from its\n* own documentation would be worse than one that did not sort at all.\n*/\nfunction compareSortValues(left, right, direction = \"asc\") {\n\tconst factor = direction === \"asc\" ? 1 : -1;\n\tconst a = normalizeSortValue(left);\n\tconst b = normalizeSortValue(right);\n\tif (typeof a === \"number\" && typeof b === \"number\") return (a - b) * factor;\n\treturn String(a).localeCompare(String(b), void 0, {\n\t\tnumeric: true,\n\t\tsensitivity: \"base\"\n\t}) * factor;\n}\n/**\n* The sort state a click on `key` produces.\n*\n* A new column starts ascending — which is what a reader expects of a column\n* they have just asked about — and clicking the current column turns it round.\n*/\nfunction nextSortState(current, key) {\n\tif (current?.key !== key) return {\n\t\tkey,\n\t\tdirection: \"asc\"\n\t};\n\treturn {\n\t\tkey,\n\t\tdirection: current.direction === \"asc\" ? \"desc\" : \"asc\"\n\t};\n}\n/** The `aria-sort` value for a column, given the table's sort state. */\nfunction ariaSortFor(current, key) {\n\tif (current?.key !== key) return \"none\";\n\treturn current.direction === \"asc\" ? \"ascending\" : \"descending\";\n}\n/**\n* Sorts rows by a column, without disturbing the array it was given.\n*\n* `getValue` is the caller's, because only it knows where a cell's value\n* lives — a row object's key in React, a cell element's text in the custom\n* element.\n*/\nfunction sortRowsBy(rows, getValue, direction) {\n\treturn [...rows].sort((left, right) => compareSortValues(getValue(left), getValue(right), direction));\n}\n//#endregion\nexport { ariaSortFor, compareSortValues, nextSortState, normalizeSortValue, sortRowsBy };\n",":host {\n  background: var(--pf-table-bg);\n  border: 1px solid var(--pf-table-border);\n  border-radius: var(--radius-md);\n  display: block;\n  overflow: auto;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The cells read these rather than being told: a custom property inherits\n * through the shadow boundary, so one declaration here reaches every cell in\n * every row without the table walking them. The pf-option bridge again.\n */\n:host {\n  --pf-table-cell-padding-block: 14px;\n  --pf-table-head-position: static;\n  --pf-table-row-stripe: transparent;\n  --pf-table-row-hover: transparent;\n}\n\n:host([dense]) {\n  --pf-table-cell-padding-block: var(--space-3);\n}\n\n:host([sticky-header]) {\n  --pf-table-head-position: sticky;\n}\n\n:host([striped]) {\n  --pf-table-row-stripe: color-mix(in srgb, var(--pf-table-bg-subtle) 55%, transparent);\n}\n\n:host([hoverable]) {\n  --pf-table-row-hover: color-mix(in srgb, var(--pf-table-bg-subtle) 70%, transparent);\n}\n\n.caption {\n  align-items: center;\n  border-bottom: 1px solid var(--pf-table-border);\n  color: var(--pf-table-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  min-height: 56px;\n  padding: var(--space-3) var(--space-4);\n}\n\n/*\n * Hidden when nothing is slotted into it, from the class the component sets:\n * `:has(slot)` would always match, and two classes deep so this beats the\n * `display: flex` above whatever the order.\n */\n.caption.empty {\n  display: none;\n}\n\n.table {\n  border-collapse: separate;\n  border-spacing: 0;\n  display: table;\n  min-width: 620px;\n  width: 100%;\n}\n\n/*\n * The one box in a CSS table that spans every column. There is no `colspan`\n * outside a real <table>, and a block child of a table box is wrapped in an\n * anonymous cell in the first column instead of stretching across.\n */\n.empty {\n  caption-side: bottom;\n  color: var(--pf-table-text-muted);\n  display: table-caption;\n  font-size: var(--font-size-sm);\n  padding: var(--pf-table-cell-padding-block) var(--space-3);\n  text-align: center;\n}\n\n@media (--md) {\n  .empty {\n    padding-inline: var(--space-4);\n  }\n}\n","import { ariaSortFor, nextSortState, type SortDirection, type SortState } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A table over `pf-table-row` and `pf-table-cell` children.\n *\n * **It reports a sort rather than performing one.** The rows are the\n * consumer's — they wrote the loop — and reordering them would mean moving\n * elements in their DOM, which their framework would undo on its next render\n * and which would break its reconciliation on the way. So this element owns\n * the header buttons, `aria-sort` and the indicator, and emits `pfSortChange`\n * for the consumer to sort their own data with. `compareSortValues` and\n * `sortRowsBy` are in core precisely so that the order they produce matches\n * the React `Table`, which does sort for itself.\n *\n * The layout is CSS tables rather than a grid, which is what lets a row be a\n * box: a grid needs its rows to be `display: contents` for the cells to line\n * up in columns, and an element with no box takes no `:hover` and no\n * background — so striping and row hover would both have to be pushed down in\n * JS. `display: table-row` gives them for nothing, and column widths size\n * themselves.\n *\n * @slot caption - a heading above the table.\n * @slot - the `pf-table-row` children.\n * @slot empty - what to show when there are no body rows.\n * @part caption - the caption's box.\n * @part table - the table itself.\n * @part empty - the box holding the empty slot.\n */\n@Component({\n  tag: 'pf-table',\n  styleUrl: 'pf-table.css',\n  shadow: true,\n})\nexport class PfTable {\n  @Element() el!: HTMLElement;\n\n  /** Tighter rows. Reflected, and bridged down to the cells' padding. */\n  @Prop({ reflect: true }) dense = false;\n\n  /** Shade every other body row. Reflected, and bridged down. */\n  @Prop({ reflect: true }) striped = false;\n\n  /** Shade the row under the pointer. Reflected, and bridged down. */\n  @Prop({ reflect: true }) hoverable = true;\n\n  /** Keep the header visible while the body scrolls. Reflected and bridged. */\n  @Prop({ reflect: true }) stickyHeader = false;\n\n  /** The column being sorted on, by its `sort-key`. */\n  @Prop({ mutable: true, reflect: true }) sortKey?: string;\n\n  /** Which way that column is sorted. */\n  @Prop({ mutable: true, reflect: true }) sortDirection: SortDirection = 'asc';\n\n  /** The table's accessible name, for a table whose caption is not enough. */\n  @Prop() label?: string;\n\n  /**\n   * Fires when a header is clicked, with the sort the table has moved to.\n   * Sorting the rows is the consumer's to do.\n   */\n  @Event() pfSortChange!: EventEmitter<SortState>;\n\n  /** Whether there are any body rows, which decides the empty state. */\n  @State() isEmpty = false;\n\n  /**\n   * Whether anything is slotted into the caption, which decides whether its\n   * box is drawn. Asked in JS because a box around a slot cannot be collapsed\n   * from CSS: `:has(slot)` always matches, since the slot is itself a child.\n   */\n  @State() hasCaption = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('sortKey')\n  @Watch('sortDirection')\n  handleSortChange() {\n    this.sync();\n  }\n\n  /** Re-reads the rows, 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 table owns its own rows. */\n  private get rows(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-table-row')).filter(\n      (row) => row.parentElement === this.el,\n    );\n  }\n\n  private isHead(row: HTMLElement) {\n    return (row as HTMLElement & { head?: boolean }).head ?? row.hasAttribute('head');\n  }\n\n  private sync() {\n    const rows = this.rows;\n    const bodyRows = rows.filter((row) => !this.isHead(row));\n    this.isEmpty = bodyRows.length === 0;\n\n    this.hasCaption = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'caption',\n    );\n\n    /*\n     * Striping and the last row are the table's to work out: a row cannot\n     * count its siblings without assuming where the header is, and the last\n     * body row is the one whose cells drop their bottom border so the rule\n     * does not double up with the table's own.\n     */\n    for (const [index, row] of bodyRows.entries()) {\n      const node = row as HTMLElement & { odd: boolean; last: boolean };\n      node.odd = index % 2 === 1;\n      node.last = index === bodyRows.length - 1;\n    }\n\n    const current: SortState | undefined =\n      this.sortKey === undefined ? undefined : { key: this.sortKey, direction: this.sortDirection };\n\n    for (const row of rows.filter((candidate) => this.isHead(candidate))) {\n      for (const cell of Array.from(row.querySelectorAll<HTMLElement>('pf-table-cell'))) {\n        const node = cell as HTMLElement & { sort: 'ascending' | 'descending' | 'none' };\n        const key = (cell as HTMLElement & { sortKey?: string }).sortKey;\n        node.sort = key ? ariaSortFor(current, key) : 'none';\n      }\n    }\n  }\n\n  /**\n   * A header asking to sort. The table decides which way — core's rule: a new\n   * column starts ascending and the current one turns round — and reports it.\n   */\n  @Listen('pfTableSort')\n  handleSort(event: CustomEvent<{ key: string }>) {\n    event.stopPropagation();\n\n    const current: SortState | undefined =\n      this.sortKey === undefined ? undefined : { key: this.sortKey, direction: this.sortDirection };\n    const next = nextSortState(current, event.detail.key);\n\n    this.sortKey = next.key;\n    this.sortDirection = next.direction;\n    this.sync();\n    this.pfSortChange.emit(next);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ caption: true, empty: !this.hasCaption }} part=\"caption\">\n          <slot name=\"caption\" onSlotchange={() => this.refresh()} />\n        </div>\n        <div class=\"table\" part=\"table\" role=\"table\" aria-label={this.label}>\n          <slot onSlotchange={() => this.refresh()} />\n          {/*\n            `display: table-caption` with `caption-side: bottom`, which is the\n            one box in a CSS table that spans every column — there is no\n            `colspan` outside a real <table>. It stays inside the role=\"table\"\n            element, so a screen reader still finds it in the table.\n          */}\n          {this.isEmpty && (\n            <div class=\"empty\" part=\"empty\" role=\"row\">\n              <span role=\"cell\">\n                <slot name=\"empty\">No data available.</slot>\n              </span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAqCA,SAASA,EAAcC,EAASC,GAC/B,GAAID,GAASC,MAAQA,EAAK,MAAO,CAChCA,MACAC,UAAW,OAEZ,MAAO,CACND,MACAC,UAAWF,EAAQE,YAAc,MAAQ,OAAS,MAEpD,CAEA,SAASC,EAAYH,EAASC,GAC7B,GAAID,GAASC,MAAQA,EAAK,MAAO,OACjC,OAAOD,EAAQE,YAAc,MAAQ,YAAc,YACpD,CCnDA,MAAME,EAAa,IAAM,krC,MC8CZC,EAAOC,EAAA,MAAAD,UAAAE,E,+IAIOC,MAAQ,MAGRC,QAAU,MAGVC,UAAY,KAGZC,aAAe,MAGAC,QAGAC,cAA+B,MAG/DC,MAMCC,aAGAC,QAAU,MAOVC,WAAa,MAGtB,iBAAAC,GACEC,KAAKC,M,CAGP,gBAAAC,GACEF,KAAKC,M,CAKP,gBAAAE,GACEH,KAAKC,M,CAKP,aAAMG,GACJJ,KAAKC,M,CAIP,QAAYI,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,iBAAiBC,QACtEC,GAAQA,EAAIC,gBAAkBZ,KAAKQ,I,CAIhC,MAAAK,CAAOF,GACb,OAAQA,EAAyCG,MAAQH,EAAII,aAAa,O,CAGpE,IAAAd,GACN,MAAMI,EAAOL,KAAKK,KAClB,MAAMW,EAAWX,EAAKK,QAAQC,IAASX,KAAKa,OAAOF,KACnDX,KAAKH,QAAUmB,EAASC,SAAW,EAEnCjB,KAAKF,WAAaQ,MAAMC,KAAKP,KAAKQ,GAAGU,UAAUC,MAC5CC,GAAUA,EAAMC,aAAa,UAAY,YAS5C,IAAK,MAAOC,EAAOX,KAAQK,EAASO,UAAW,CAC7C,MAAMC,EAAOb,EACba,EAAKC,IAAMH,EAAQ,IAAM,EACzBE,EAAKE,KAAOJ,IAAUN,EAASC,OAAS,C,CAG1C,MAAMpC,EACJmB,KAAKP,UAAYkC,UAAYA,UAAY,CAAE7C,IAAKkB,KAAKP,QAASV,UAAWiB,KAAKN,eAEhF,IAAK,MAAMiB,KAAON,EAAKK,QAAQkB,GAAc5B,KAAKa,OAAOe,KAAa,CACpE,IAAK,MAAMC,KAAQvB,MAAMC,KAAKI,EAAIF,iBAA8B,kBAAmB,CACjF,MAAMe,EAAOK,EACb,MAAM/C,EAAO+C,EAA4CpC,QACzD+B,EAAKM,KAAOhD,EAAME,EAAYH,EAASC,GAAO,M,GAUpD,UAAAiD,CAAWC,GACTA,EAAMC,kBAEN,MAAMpD,EACJmB,KAAKP,UAAYkC,UAAYA,UAAY,CAAE7C,IAAKkB,KAAKP,QAASV,UAAWiB,KAAKN,eAChF,MAAMwC,EAAOtD,EAAcC,EAASmD,EAAMG,OAAOrD,KAEjDkB,KAAKP,QAAUyC,EAAKpD,IACpBkB,KAAKN,cAAgBwC,EAAKnD,UAC1BiB,KAAKC,OACLD,KAAKJ,aAAawC,KAAKF,E,CAGzB,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAzD,IAAA,4CACHwD,EAAA,OAAAxD,IAAA,2CAAK0D,MAAO,CAAEC,QAAS,KAAMC,OAAQ1C,KAAKF,YAAc6C,KAAK,WAC3DL,EAAA,QAAAxD,IAAA,2CAAM8D,KAAK,UAAUC,aAAc,IAAM7C,KAAKI,aAEhDkC,EAAA,OAAAxD,IAAA,2CAAK0D,MAAM,QAAQG,KAAK,QAAQG,KAAK,QAAO,aAAa9C,KAAKL,OAC5D2C,EAAA,QAAAxD,IAAA,2CAAM+D,aAAc,IAAM7C,KAAKI,YAO9BJ,KAAKH,SACJyC,EAAA,OAAAxD,IAAA,2CAAK0D,MAAM,QAAQG,KAAK,QAAQG,KAAK,OACnCR,EAAA,QAAAxD,IAAA,2CAAMgE,KAAK,QACTR,EAAA,QAAAxD,IAAA,2CAAM8D,KAAK,SAAO,yB","ignoreList":[]}

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

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

package/dist/components/pf-tabs.js

@@ -0,0 +1,2 @@
+import{t,p as e,H as s,c as i,h as a,a as n}from"./index.js";import{r}from"./p-CAz7-p8y.js";import{s as o,r as d}from"./p-Fiuz9ck7.js";function l(t,e){return t.find((t=>t.value===e&&!t.disabled))??t.find((t=>!t.disabled))}const h=()=>`:host{display:grid;gap:var(--space-3)}:host([hidden]){display:none}@media (min-width: 768px){:host{gap:var(--space-4)}}.list{display:flex;min-width:0;overflow-x:auto;overflow-y:hidden;position:relative;scrollbar-width:none}.list::-webkit-scrollbar{display:none}:host([full-width]) .list{width:100%}:host([variant='underline']) .list{border-bottom:1px solid var(--pf-tabs-border);gap:var(--space-1)}:host([variant='pills']) .list{background:var(--pf-tabs-bg-subtle);border-radius:var(--radius-md);gap:var(--space-1);padding:var(--space-1)}.indicator{pointer-events:none;position:absolute;transition:left var(--pf-transition-medium),     width var(--pf-transition-medium),     top var(--pf-transition-medium),     height var(--pf-transition-medium)}.indicator[hidden]{display:none}:host([variant='underline']) .indicator{background:var(--pf-tabs-text);border-radius:var(--radius-full);bottom:0;height:var(--pf-tabs-underline-width)}:host([variant='pills']) .indicator{background:var(--pf-tabs-bg);border-radius:var(--radius-sm);box-shadow:var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));z-index:0}.panels{min-width:0}.panels>slot::slotted(pf-tab){display:none}@media (prefers-reduced-motion: reduce){.indicator{transition:none}}`;let c=0;const f=t=>t.value??t.getAttribute("value")??"";const p=t=>t.disabled??t.hasAttribute("disabled");const u=(t,e)=>{if(!t.id)t.id=e;return t.id};const b=e(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange")}get el(){return this}uid=++c;listEl;indicatorEl;observer;observed=[];value="";variant="underline";size="md";fullWidth=false;pfChange;componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}componentDidRender(){this.placeIndicator();this.observe()}disconnectedCallback(){this.observer?.disconnect();this.observer=undefined;this.observed=[]}handleStateChange(){this.sync();this.placeIndicator()}async refresh(){this.sync();this.placeIndicator()}get tabs(){return Array.from(this.el.querySelectorAll("pf-tab")).filter((t=>t.parentElement===this.el))}get panels(){return Array.from(this.el.querySelectorAll("pf-tab-panel")).filter((t=>t.parentElement===this.el))}get descriptors(){return this.tabs.map(((t,e)=>({el:t,index:e,value:f(t),disabled:p(t)})))}get selectedValue(){return l(this.descriptors,this.value)?.value??""}sync(){const t=this.descriptors;const e=this.panels;const s=this.selectedValue;for(const{el:i,index:a,value:n,disabled:r}of t){const t=u(i,`pf-tabs-${this.uid}-tab-${a}`);const o=e.find((t=>f(t)===n));if(o){const e=u(o,`pf-tabs-${this.uid}-panel-${a}`);i.setAttribute("aria-controls",e);o.setAttribute("aria-labelledby",t)}const d=i;d.selected=n===s&&!r;d.variant=this.variant;d.size=this.size;d.fullWidth=this.fullWidth}for(const t of e){t.active=f(t)===s}this.syncTabIndex(t,s)}syncTabIndex(t,e){const s=t.filter((t=>!t.disabled));if(s.length===0)return;const i=s.find((t=>t.value===e));o(s.map((t=>t.el)),(i??s[0]).el);for(const{el:e,disabled:s}of t){if(s)e.tabIndex=-1}}placeIndicator(){const t=this.listEl;const e=this.indicatorEl;if(!t||!e)return;const s=this.selectedValue;const i=this.descriptors.find((t=>t.value===s))?.el;if(!i){e.setAttribute("hidden","");return}e.removeAttribute("hidden");const a=t.getBoundingClientRect();const n=i.getBoundingClientRect();e.style.left=`${n.left-a.left+t.scrollLeft}px`;e.style.width=`${n.width}px`;if(this.variant==="pills"){e.style.top=`${n.top-a.top+t.scrollTop}px`;e.style.height=`${n.height}px`}else{e.style.top="";e.style.height=""}}observe(){if(typeof ResizeObserver==="undefined")return;const t=this.selectedValue;const e=this.descriptors.find((e=>e.value===t))?.el;const s=[this.listEl,e].filter((t=>Boolean(t)));const i=s.length===this.observed.length&&s.every(((t,e)=>t===this.observed[e]));if(this.observer&&i)return;this.observer?.disconnect();this.observer=new ResizeObserver((()=>this.placeIndicator()));for(const t of s)this.observer.observe(t);this.observed=s;document.fonts?.ready.then((()=>this.placeIndicator()))}select(t,{focus:e=false}={}){const s=this.descriptors.find((e=>e.value===t));if(!s||s.disabled)return;const i=t!==this.selectedValue;this.value=t;this.sync();this.placeIndicator();if(e)s.el.focus();if(i)this.pfChange.emit({value:t})}handleTabSelect(t){t.stopPropagation();this.select(t.detail.value)}handleKeyDown(t){if(t.defaultPrevented)return;const e=d(t.key,"horizontal");if(!e)return;const s=this.descriptors.filter((t=>!t.disabled));if(s.length===0)return;const i=s.findIndex((t=>t.el===document.activeElement));if(i===-1)return;const a=r(e,s.map(((t,e)=>e)),i);if(a<0)return;t.preventDefault();this.select(s[a].value,{focus:true})}render(){return a(n,{key:"fba4350cf1bc8d7c9a3373b26c4a174606d097bf"},a("div",{key:"2ab8f90a922b2e5f0bcbc6d3fb5ed9537b4111ae",class:"list",part:"list",role:"tablist","aria-orientation":"horizontal",ref:t=>this.listEl=t},a("span",{key:"82efc96d0d645dd1fb728124032ad838b6b466b1",class:"indicator",part:"indicator","aria-hidden":"true",ref:t=>this.indicatorEl=t}),a("slot",{key:"444830fe87ecf929115ec3f39824f3c4d3bbd297",name:"tab",onSlotchange:()=>this.refresh()})),a("div",{key:"ce4636d0e2eca6db497ea9c1547e0100c3f53454",class:"panels",part:"panels"},a("slot",{key:"4b62a691759a5706f133fb0631f912f3d0874b7d",onSlotchange:()=>this.refresh()})))}static get watchers(){return{value:[{handleStateChange:0}],variant:[{handleStateChange:0}],size:[{handleStateChange:0}],fullWidth:[{handleStateChange:0}]}}static get style(){return h()}},[769,"pf-tabs",{value:[1025],variant:[513],size:[513],fullWidth:[516,"full-width"],refresh:[64]},[[0,"pfTabSelect","handleTabSelect"],[0,"keydown","handleKeyDown"]],{value:[{handleStateChange:0}],variant:[{handleStateChange:0}],size:[{handleStateChange:0}],fullWidth:[{handleStateChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const e=["pf-tabs"];e.forEach((e=>{switch(e){case"pf-tabs":if(!customElements.get(t(e))){customElements.define(t(e),b)}break}}))}v();const m=b;const g=v;export{m as PfTabs,g as defineCustomElement};
+//# sourceMappingURL=pf-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["resolveSelectedTab","tabs","value","find","tab","disabled","pfTabsCss","instances","readValue","el","getAttribute","readDisabled","hasAttribute","ensureId","fallback","id","PfTabs","__stencil_proxyCustomElement","HTMLElement","uid","listEl","indicatorEl","observer","observed","variant","size","fullWidth","pfChange","componentWillLoad","this","sync","componentDidLoad","componentDidRender","placeIndicator","observe","disconnectedCallback","disconnect","undefined","handleStateChange","refresh","Array","from","querySelectorAll","filter","parentElement","panels","panel","descriptors","map","index","selectedValue","selected","tabId","candidate","panelId","setAttribute","active","syncTabIndex","enabled","descriptor","length","current","syncRovingTabIndex","tabIndex","list","indicator","removeAttribute","listRect","getBoundingClientRect","tabRect","style","left","scrollLeft","width","top","scrollTop","height","ResizeObserver","next","node","Boolean","unchanged","every","i","document","fonts","ready","then","select","focus","changed","emit","handleTabSelect","event","stopPropagation","detail","handleKeyDown","defaultPrevented","action","resolveRovingKey","key","currentIndex","findIndex","activeElement","nextIndex","resolveListMove","_","preventDefault","render","h","Host","class","part","role","ref","name","onSlotchange"],"sources":["../core/dist/tabs.js","src/components/pf-tabs/pf-tabs.css?tag=pf-tabs&encapsulation=shadow","src/components/pf-tabs/pf-tabs.tsx"],"sourcesContent":["//#region src/tabs.ts\n/**\n* The tab a given value selects: the enabled tab carrying it, or the first\n* enabled tab when no such tab exists.\n*\n* That fallback covers three cases with one rule — no value asked for at all,\n* a value no tab carries, and a value belonging to a disabled tab — because a\n* tablist with nothing selected shows no panel, which reads as broken. It\n* returns `undefined` only when every tab is disabled or there are none, which\n* are the two cases where there is genuinely nothing to show.\n*/\nfunction resolveSelectedTab(tabs, value) {\n\treturn tabs.find((tab) => tab.value === value && !tab.disabled) ?? tabs.find((tab) => !tab.disabled);\n}\n//#endregion\nexport { resolveSelectedTab };\n",":host {\n  display: grid;\n  gap: var(--space-3);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--md) {\n  :host {\n    gap: var(--space-4);\n  }\n}\n\n.list {\n  display: flex;\n  /*\n   * As a grid item the strip defaults to `min-width: auto`, which refuses to\n   * shrink below its content width -- so it would overflow the viewport\n   * instead of scrolling inside itself.\n   */\n  min-width: 0;\n  /*\n   * Horizontal scroll only. Without pinning overflow-y, `overflow-x: auto`\n   * forces it to compute to `auto` too, so a horizontal scrollbar eats\n   * vertical space and triggers a phantom vertical one.\n   */\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n  /* Hidden so it never draws over the underline; the indicator is the cue. */\n  scrollbar-width: none;\n}\n\n.list::-webkit-scrollbar {\n  display: none;\n}\n\n:host([full-width]) .list {\n  width: 100%;\n}\n\n:host([variant='underline']) .list {\n  border-bottom: 1px solid var(--pf-tabs-border);\n  gap: var(--space-1);\n}\n\n:host([variant='pills']) .list {\n  background: var(--pf-tabs-bg-subtle);\n  border-radius: var(--radius-md);\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n/*\n * One indicator for the whole strip, placed from measurements in\n * `placeIndicator` so it slides between tabs. `left`/`width` (and `top`/\n * `height` for a pill) are written inline; everything else is here.\n */\n.indicator {\n  pointer-events: none;\n  position: absolute;\n  transition:\n    left var(--pf-transition-medium),\n    width var(--pf-transition-medium),\n    top var(--pf-transition-medium),\n    height var(--pf-transition-medium);\n}\n\n.indicator[hidden] {\n  display: none;\n}\n\n:host([variant='underline']) .indicator {\n  background: var(--pf-tabs-text);\n  border-radius: var(--radius-full);\n  bottom: 0;\n  height: var(--pf-tabs-underline-width);\n}\n\n:host([variant='pills']) .indicator {\n  background: var(--pf-tabs-bg);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--pf-tabs-elevation-tab-active-shadow, var(--pf-elevation-tab-active-shadow));\n  z-index: 0;\n}\n\n.panels {\n  min-width: 0;\n}\n\n/*\n * A `pf-tab` assigns itself to the `tab` slot in `connectedCallback`, but a\n * tab added later is briefly assigned to the default slot before that runs.\n * Hiding it there keeps it from flashing in the panel stack. `::slotted` after\n * the slot selector is what scopes this to the default slot's assignments --\n * the `tab` slot's own are untouched.\n */\n.panels > slot::slotted(pf-tab) {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .indicator {\n    transition: none;\n  }\n}\n","import {\n  resolveListMove,\n  resolveRovingKey,\n  resolveSelectedTab,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfTabsVariant = 'underline' | 'pills';\nexport type PfTabsSize = 'sm' | 'md';\n\n/** One `pf-tab`, read the way the group needs it. */\ninterface TabDescriptor {\n  el: HTMLElement;\n  index: number;\n  value: string;\n  disabled: boolean;\n}\n\n/**\n * Distinguishes the ids this element generates. Not `useId`, which has no\n * equivalent here, and not a shadow-scoped literal either: these ids go on\n * *light-DOM* children, so they share the document's namespace with every\n * other tab set on the page.\n */\nlet instances = 0;\n\n/**\n * The property if the element has been upgraded, the attribute if it has not.\n *\n * `componentWillLoad` runs before the children's own upgrade on a page that\n * parsed them as plain HTML, so the first sync can only read attributes; after\n * that the property is the truth, because the generated bindings set props as\n * properties and leave no attribute behind for an unreflected one.\n */\nconst readValue = (el: HTMLElement) =>\n  (el as HTMLElement & { value?: string }).value ?? el.getAttribute('value') ?? '';\n\nconst readDisabled = (el: HTMLElement) =>\n  (el as HTMLElement & { disabled?: boolean }).disabled ?? el.hasAttribute('disabled');\n\nconst ensureId = (el: HTMLElement, fallback: string) => {\n  if (!el.id) el.id = fallback;\n  return el.id;\n};\n\n/**\n * A tab set: a strip of `pf-tab` children over a stack of `pf-tab-panel`\n * children.\n *\n * Children rather than an `items` array (WEB-COMPONENTS-PLAN.md §2.1), because\n * the React `TabsItem` carries a `label` and a `content` that are both\n * `ReactNode` — neither crosses the HTML boundary, so a consumer nests instead\n * and loops in their own template.\n *\n * A `pf-tab` puts itself in the `tab` slot, so the two kinds of child can be\n * written interleaved — one `pf-tab` and one `pf-tab-panel` per item, which is\n * what a loop over data wants — and still land in the right box.\n *\n * The group owns everything the children cannot see on their own: which one is\n * selected, the single tab stop, the id wiring in both directions, and the\n * sliding indicator. Each `pf-tab` only reports that it was chosen, as\n * `pf-radio-button` does to its group.\n *\n * @slot tab - the `pf-tab` children. They assign themselves to it.\n * @slot - the `pf-tab-panel` children.\n * @part list - the tab strip, which is the `tablist`.\n * @part indicator - the bar or pill that slides to the selected tab.\n * @part panels - the box the panels are slotted into.\n */\n@Component({\n  tag: 'pf-tabs',\n  styleUrl: 'pf-tabs.css',\n  shadow: true,\n})\nexport class PfTabs {\n  @Element() el!: HTMLElement;\n\n  private uid = ++instances;\n  private listEl?: HTMLElement;\n  private indicatorEl?: HTMLElement;\n  private observer?: ResizeObserver;\n  private observed: HTMLElement[] = [];\n\n  /**\n   * The selected tab's value.\n   *\n   * Left exactly as the consumer set it, as the React component leaves its\n   * state: a value no tab carries still *shows* the first enabled tab, but it\n   * is not silently rewritten here, so a consumer holding `value` sees only\n   * the changes they made.\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /** Underline or pills. Reflected, and pushed down onto every tab. */\n  @Prop({ reflect: true }) variant: PfTabsVariant = 'underline';\n\n  /** Tab padding and type scale. Reflected, and pushed down onto every tab. */\n  @Prop({ reflect: true }) size: PfTabsSize = 'md';\n\n  /** Stretch the tabs to fill the strip. Reflected, and pushed down. */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /** Fires when the selected tab changes, however it was chosen. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The light DOM is readable here, so first paint already has the right tab\n   * selected and the other panels hidden — the mock DOM never fires\n   * `slotchange`, and a real one fires it after the first render.\n   */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * The indicator is placed from measurements, so it can only be done once the\n   * shadow DOM and the slotted tabs have been laid out.\n   */\n  componentDidRender() {\n    this.placeIndicator();\n    this.observe();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.observer = undefined;\n    this.observed = [];\n  }\n\n  @Watch('value')\n  @Watch('variant')\n  @Watch('size')\n  @Watch('fullWidth')\n  handleStateChange() {\n    this.sync();\n    this.placeIndicator();\n  }\n\n  /**\n   * Re-reads the children.\n   *\n   * Needed because a consumer can change a tab through its *property* —\n   * `tab.disabled = true` — which leaves no attribute, moves no node and so\n   * fires neither `slotchange` nor any watcher here.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n    this.placeIndicator();\n  }\n\n  /** Direct children only: a nested tab set owns its own tabs. */\n  private get tabs(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-tab')).filter(\n      (tab) => tab.parentElement === this.el,\n    );\n  }\n\n  private get panels(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-tab-panel')).filter(\n      (panel) => panel.parentElement === this.el,\n    );\n  }\n\n  private get descriptors(): TabDescriptor[] {\n    return this.tabs.map((el, index) => ({\n      el,\n      index,\n      value: readValue(el),\n      disabled: readDisabled(el),\n    }));\n  }\n\n  /**\n   * The value actually on show: core's rule, so the React `Tabs` falls back to\n   * the same tab for a value no tab carries or one that is disabled.\n   */\n  private get selectedValue(): string {\n    return resolveSelectedTab(this.descriptors, this.value)?.value ?? '';\n  }\n\n  /**\n   * Pushes the group's state down onto the children: which tab is selected,\n   * which panel is shown, the id wiring between the two, and one tab stop.\n   *\n   * The ids go on light-DOM children, which is why they can be referenced at\n   * all: tab and panel share the consumer's tree, so `aria-controls` and\n   * `aria-labelledby` resolve. The pair an overlay cannot have — a trigger\n   * outside pointing at a panel in a shadow root — is the opposite case, and\n   * is why `pf-tooltip` copies its text instead.\n   */\n  private sync() {\n    const descriptors = this.descriptors;\n    const panels = this.panels;\n    const selected = this.selectedValue;\n\n    for (const { el, index, value, disabled } of descriptors) {\n      const tabId = ensureId(el, `pf-tabs-${this.uid}-tab-${index}`);\n      const panel = panels.find((candidate) => readValue(candidate) === value);\n      if (panel) {\n        const panelId = ensureId(panel, `pf-tabs-${this.uid}-panel-${index}`);\n        el.setAttribute('aria-controls', panelId);\n        panel.setAttribute('aria-labelledby', tabId);\n      }\n\n      const tab = el as HTMLElement & {\n        selected: boolean;\n        variant: PfTabsVariant;\n        size: PfTabsSize;\n        fullWidth: boolean;\n      };\n      tab.selected = value === selected && !disabled;\n      /*\n       * Pushed down rather than selected on from above: `:host-context()` is\n       * the only selector that would let a tab see its group's variant, and it\n       * is in neither Firefox nor Safari. Same reason `pf-toolbar` writes its\n       * orientation onto its separators.\n       */\n      tab.variant = this.variant;\n      tab.size = this.size;\n      tab.fullWidth = this.fullWidth;\n    }\n\n    for (const panel of panels) {\n      (panel as HTMLElement & { active: boolean }).active = readValue(panel) === selected;\n    }\n\n    this.syncTabIndex(descriptors, selected);\n  }\n\n  /**\n   * One tab stop for the whole strip, on the selected tab.\n   *\n   * The ARIA tabs pattern puts it there rather than on whichever tab was\n   * focused last, so tabbing in lands on the panel being shown. The React\n   * `Tabs` instead leaves every tab tabbable, which is a gap recorded in\n   * `todo.md` — the arrows already move selection in both.\n   */\n  private syncTabIndex(descriptors: TabDescriptor[], selected: string) {\n    const enabled = descriptors.filter((descriptor) => !descriptor.disabled);\n    if (enabled.length === 0) return;\n\n    const current = enabled.find((descriptor) => descriptor.value === selected);\n    syncRovingTabIndex(\n      enabled.map((descriptor) => descriptor.el),\n      (current ?? enabled[0]).el,\n    );\n    for (const { el, disabled } of descriptors) {\n      if (disabled) el.tabIndex = -1;\n    }\n  }\n\n  /**\n   * Puts the indicator under (or behind) the selected tab.\n   *\n   * Measured with rects rather than `offsetLeft`, which the React component\n   * can use and this one cannot: a slotted element's `offsetParent` is\n   * resolved in its *own* node tree, so it is the nearest positioned ancestor\n   * in the consumer's document and never the shadow box the element is\n   * actually laid out in. Measured twice. Inside a `position: relative`\n   * wrapper the selected tab reported `offsetParent: #wrapper` and\n   * `offsetLeft: 196` where its offset within the strip was 186 — the\n   * wrapper's own padding folded in. And with this placed from `offsetLeft`\n   * in a real build, the indicator painted at 64 against a tab starting at\n   * 32, which is what `scripts/smoke-consumer.mjs` now catches.\n   *\n   * Adding back `scrollLeft` is what makes the result scroll-invariant: the\n   * indicator is a child of the scrolling strip, so it has to be placed in the\n   * strip's scroll coordinates, and both rects move together when it scrolls.\n   */\n  private placeIndicator() {\n    const list = this.listEl;\n    const indicator = this.indicatorEl;\n    if (!list || !indicator) return;\n\n    const selected = this.selectedValue;\n    const tab = this.descriptors.find((descriptor) => descriptor.value === selected)?.el;\n    if (!tab) {\n      indicator.setAttribute('hidden', '');\n      return;\n    }\n    indicator.removeAttribute('hidden');\n\n    const listRect = list.getBoundingClientRect();\n    const tabRect = tab.getBoundingClientRect();\n    indicator.style.left = `${tabRect.left - listRect.left + list.scrollLeft}px`;\n    indicator.style.width = `${tabRect.width}px`;\n\n    if (this.variant === 'pills') {\n      indicator.style.top = `${tabRect.top - listRect.top + list.scrollTop}px`;\n      indicator.style.height = `${tabRect.height}px`;\n    } else {\n      // The underline's own box comes from the stylesheet; an inline value set\n      // by the pills variant would outrank it for good.\n      indicator.style.top = '';\n      indicator.style.height = '';\n    }\n  }\n\n  /**\n   * Re-measures when the strip or the selected tab changes size.\n   *\n   * `document.fonts.ready` as well, because a web font loading can change a\n   * *sibling* tab's width and so move the selected one without resizing it —\n   * which a ResizeObserver on the two of them alone would miss.\n   */\n  private observe() {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const selected = this.selectedValue;\n    const tab = this.descriptors.find((descriptor) => descriptor.value === selected)?.el;\n    const next = [this.listEl, tab].filter((node): node is HTMLElement => Boolean(node));\n    const unchanged =\n      next.length === this.observed.length && next.every((node, i) => node === this.observed[i]);\n    if (this.observer && unchanged) return;\n\n    this.observer?.disconnect();\n    this.observer = new ResizeObserver(() => this.placeIndicator());\n    for (const node of next) this.observer.observe(node);\n    this.observed = next;\n\n    document.fonts?.ready.then(() => this.placeIndicator());\n  }\n\n  private select(next: string, { focus = false } = {}) {\n    const descriptor = this.descriptors.find((candidate) => candidate.value === next);\n    if (!descriptor || descriptor.disabled) return;\n\n    /*\n     * Against the tab actually on show, not against `value`: with `value`\n     * unset the first enabled tab is already selected, and clicking it would\n     * otherwise report a change from '' to its value — a `pfChange` for a\n     * selection that never moved. `value` is still written, so a consumer\n     * reading it back sees what the user picked.\n     *\n     * The React `Tabs` has no such guard and calls `onValueChange` for a\n     * re-click of the selected tab; recorded in `todo.md`.\n     */\n    const changed = next !== this.selectedValue;\n    this.value = next;\n    this.sync();\n    this.placeIndicator();\n    if (focus) descriptor.el.focus();\n    if (changed) this.pfChange.emit({ value: next });\n  }\n\n  /**\n   * A tab asking to be selected — by click, or by Enter or Space on itself.\n   * The group decides, exactly as `pf-radio-group` does for its radios.\n   */\n  @Listen('pfTabSelect')\n  handleTabSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    this.select(event.detail.value);\n  }\n\n  /**\n   * The arrows move *and* select, which the ARIA tabs pattern calls automatic\n   * activation and allows when the panels are already rendered. Home and End\n   * jump to the first and last enabled tab; a disabled tab is skipped rather\n   * than focused, because unlike a calendar's blocked day there is nothing\n   * behind it to reach.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, 'horizontal');\n    if (!action) return;\n\n    const enabled = this.descriptors.filter((descriptor) => !descriptor.disabled);\n    if (enabled.length === 0) return;\n\n    // `activeElement` reports the shallowest host, which is the tab itself.\n    const currentIndex = enabled.findIndex(\n      (descriptor) => descriptor.el === (document.activeElement as HTMLElement),\n    );\n    if (currentIndex === -1) return;\n\n    const nextIndex = resolveListMove(\n      action,\n      enabled.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    this.select(enabled[nextIndex].value, { focus: true });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"list\"\n          part=\"list\"\n          role=\"tablist\"\n          aria-orientation=\"horizontal\"\n          ref={(el) => (this.listEl = el)}\n        >\n          <span\n            class=\"indicator\"\n            part=\"indicator\"\n            aria-hidden=\"true\"\n            ref={(el) => (this.indicatorEl = el)}\n          />\n          <slot name=\"tab\" onSlotchange={() => this.refresh()} />\n        </div>\n        <div class=\"panels\" part=\"panels\">\n          <slot onSlotchange={() => this.refresh()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/pf-tag-input.d.ts

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

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

@@ -0,0 +1,2 @@
+import{t,p as e,H as i,c as a,h as s,a as r}from"./index.js";import{c as o}from"./p-DfpCerXM.js";import{K as n}from"./p-g4FlTDZx.js";import{p as c,f as l,c as d,r as p,s as f}from"./p-BmcsJLdy.js";import{a as h}from"./p-Cr6IXrUk.js";import{c as u}from"./p-Cy_kHPeC.js";import{d as m}from"./p-CkFjPRTe.js";import{d as b}from"./p-Bb-s2aqK.js";const g=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-taginput-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-taginput-invalid-border);margin-inline-start:var(--space-1)}.control{align-items:center;background:var(--pf-taginput-bg);border:1px solid var(--pf-taginput-border);border-radius:var(--radius-md);display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-1) var(--space-2)}.control:focus-within{border-color:var(--pf-taginput-focus-border);box-shadow:var(--pf-focus-ring)}.control--invalid{border-color:var(--pf-taginput-invalid-border)}.input{background:none;border:0;color:var(--pf-taginput-text);flex:1 1 6ch;font-family:inherit;font-size:var(--font-size-sm);min-width:6ch;outline:none;padding:var(--space-1)}.input::placeholder{color:var(--pf-taginput-placeholder)}.input:disabled{cursor:not-allowed}.description{color:var(--pf-taginput-placeholder);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-taginput-invalid-border);font-size:var(--font-size-xs);margin:0}`;const v=e(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.pfChange=a(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";label;description;error;placeholder="Add a tag…";max;allowDuplicates=false;tagVariant="neutral";required=false;disabled=false;validate;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){const t=this.tags();if(t.length===0||!this.name){this.internals.setFormValue(null)}else{const e=new FormData;for(const i of t)e.append(this.name,i);this.internals.setFormValue(e)}h(this.internals,t.length>0,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;const t=this.input;if(t)t.value=""}tags(){return c(this.value)}get input(){return this.el.shadowRoot?.querySelector('[part="input"]')??null}get options(){return{max:this.max,allowDuplicates:this.allowDuplicates,validate:this.validate}}commit(t){this.value=l(t);this.pfChange.emit({value:this.value,values:t})}addDraft(t){const e=d(this.tags(),t,this.options);const i=this.input;if(e.added){this.commit(e.tags);if(i)i.value="";return}if(e.refusal==="duplicate"&&i)i.value=""}remove(t){if(this.disabled)return;this.commit(p(this.tags(),t));this.input?.focus()}onKeyDown=t=>{if(this.disabled)return;const e=t.target;if(t.key===n.Enter||t.key===","){if(e.value.trim()){t.preventDefault();this.addDraft(e.value)}else if(t.key!==n.Enter){t.preventDefault()}return}if(t.key==="Backspace"&&e.value===""&&this.tags().length>0){t.preventDefault();this.remove(this.tags().length-1)}};onPaste=t=>{if(this.disabled)return;const e=f(t.clipboardData?.getData("text")??"");if(e.length===0)return;t.preventDefault();let i=this.tags();for(const t of e)i=d(i,t,this.options).tags;this.commit(i);const a=this.input;if(a)a.value=""};render(){const t=o(this.description&&"description",this.error&&"error");const e=this.tags();const i=this.max!==undefined&&e.length>=this.max;return s(r,{key:"fcd65f00fd3c83168d4aa60792eb082f2f34846b"},s("div",{key:"9d2660af1fd754840ec49eb1a8d4882e5fd1fc34",class:"field",part:"field"},this.label&&s("label",{key:"4bce4bfd9258b72f95dc038be8ad8a34f0684c0c",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&s("span",{key:"9c82d014c88b2d5fd4cbd8be60c1a98834baa8a9",class:"required","aria-hidden":"true"},"*")),s("div",{key:"df92aae8117828f5bd11b7f09aaf64b4c19cefa5",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},e.map(((t,e)=>s("pf-tag",{key:t,part:"tag",variant:this.tagVariant,dismissible:!this.disabled,dismissLabel:`Remove ${t}`,onPfDismiss:()=>this.remove(e)},t))),s("input",{key:"e606fa3fd879dcef2e878e5311b601c4e46860c3",id:"input","aria-label":u(this.el,this.label),part:"input",class:"input",type:"text",autocomplete:"off",disabled:this.disabled||i,required:this.required&&e.length===0,placeholder:i?"":this.placeholder,"aria-invalid":this.error?"true":null,"aria-describedby":t,onKeyDown:this.onKeyDown,onPaste:this.onPaste,onBlur:t=>{const e=t.target;if(e.value.trim())this.addDraft(e.value)}})),this.description&&s("p",{key:"099590e7e19084d8aaaf595bb280ac61118c5a6e",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"0ab0b8ebc4e94ce1eed0ea57747c3c0b21d7d174",class:"error",part:"error",id:"error"},this.error)))}static get formAssociated(){return true}static get watchers(){return{name:[{syncFormState:0}],value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}static get style(){return g()}},[577,"pf-tag-input",{name:[513],value:[1537],label:[1],description:[1],error:[1],placeholder:[1],max:[2],allowDuplicates:[4,"allow-duplicates"],tagVariant:[1,"tag-variant"],required:[516],disabled:[516],validate:[16],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{name:[{syncFormState:0}],value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}]);function y(){if(typeof customElements==="undefined"){return}const e=["pf-tag-input","pf-icon","pf-tag"];e.forEach((e=>{switch(e){case"pf-tag-input":if(!customElements.get(t(e))){customElements.define(t(e),v)}break;case"pf-icon":if(!customElements.get(t(e))){m()}break;case"pf-tag":if(!customElements.get(t(e))){b()}break}}))}y();const k=v;const x=y;export{k as PfTagInput,x as defineCustomElement};
+//# sourceMappingURL=pf-tag-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfTagInputCss","PfTagInput","__stencil_proxyCustomElement","HTMLElement","internals","name","value","label","description","error","placeholder","max","allowDuplicates","tagVariant","required","disabled","validate","pfChange","initialValue","componentWillLoad","this","syncFormState","tags","length","setFormValue","data","FormData","tag","append","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","field","input","parseValueList","el","shadowRoot","querySelector","options","commit","formatValueList","emit","values","addDraft","raw","result","addTag","added","refusal","remove","index","removeTagAt","focus","onKeyDown","event","target","key","Keys","Enter","trim","preventDefault","onPaste","pasted","splitPastedTags","clipboardData","getData","next","candidate","render","describedBy","composeDescribedBy","atMax","undefined","h","Host","class","part","htmlFor","control","Boolean","map","variant","dismissible","dismissLabel","onPfDismiss","id","controlAriaLabel","type","autocomplete","onBlur"],"sources":["src/components/pf-tag-input/pf-tag-input.css?tag=pf-tag-input&encapsulation=shadow","src/components/pf-tag-input/pf-tag-input.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-taginput-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-taginput-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n/*\n * The chips and the draft field share one box that looks like a single input,\n * so clicking anywhere in it lands on the field.\n */\n.control {\n  align-items: center;\n  background: var(--pf-taginput-bg);\n  border: 1px solid var(--pf-taginput-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-2);\n}\n\n.control:focus-within {\n  border-color: var(--pf-taginput-focus-border);\n  box-shadow: var(--pf-focus-ring);\n}\n\n.control--invalid {\n  border-color: var(--pf-taginput-invalid-border);\n}\n\n.input {\n  background: none;\n  border: 0;\n  color: var(--pf-taginput-text);\n  /* Grows to fill the row's remainder, but never forces the box wider. */\n  flex: 1 1 6ch;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  min-width: 6ch;\n  outline: none;\n  padding: var(--space-1);\n}\n\n.input::placeholder {\n  color: var(--pf-taginput-placeholder);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n.description {\n  color: var(--pf-taginput-placeholder);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-taginput-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n","import {\n  addTag,\n  composeDescribedBy,\n  formatValueList,\n  Keys,\n  parseValueList,\n  removeTagAt,\n  splitPastedTags,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport type { PfTagVariant } from '../pf-tag/pf-tag';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated field that collects free-text tags.\n *\n * Unlike the other multi-value controls here the tags are not chosen from a\n * list, so there are no `pf-option` children — the chips are `pf-tag`\n * elements this component renders, and `pf-tag` already has the dismiss\n * button and the event for it.\n *\n * The rules are core's: trimming, the case-insensitive dedup (`React` and\n * `react` are one tag), the maximum, and `validate`. So is the paste split.\n * What stays here is what to do with the draft, which differs per refusal — a\n * duplicate clears it, because the tag asked for is already there, while\n * hitting the maximum leaves it so nothing is lost.\n *\n * Submits one entry per tag under one name, the same way `pf-multi-select`\n * does.\n *\n * @slot - nothing; the chips are rendered from `value`.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the chips and the draft input.\n * @part tag - each chip.\n * @part input - the draft input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-tag-input',\n  styleUrl: 'pf-tag-input.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfTagInput {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name, once per tag. Reflected. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The tags, comma-separated. Reflected, so HTML can set it. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Add a tag…';\n\n  /** Stop accepting tags once there are this many. */\n  @Prop() max?: number;\n\n  /** Accept the same tag twice. The comparison is case-insensitive. */\n  @Prop() allowDuplicates = false;\n\n  /**\n   * Visual variant for the chips, passed through to `pf-tag`.\n   *\n   * The type is imported from `pf-tag` rather than restated, so the two\n   * cannot drift apart — a second copy of the union would compile happily\n   * while offering a variant `pf-tag` has never heard of.\n   */\n  @Prop() tagVariant: PfTagVariant = 'neutral';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Refuse a candidate tag. A property rather than an attribute, because a\n   * function cannot be written in HTML — the generated bindings set props as\n   * properties, so a framework consumer passes it like any other.\n   */\n  @Prop() validate?: (tag: string) => boolean;\n\n  /** Fires when the tags change, with both representations. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  /** See pf-multi-select: the name is built into the FormData, so watch it. */\n  @Watch('name')\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const tags = this.tags();\n\n    if (tags.length === 0 || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      const data = new FormData();\n      for (const tag of tags) data.append(this.name, tag);\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, tags.length > 0, this.required, this.error);\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    const field = this.input;\n    if (field) field.value = '';\n  }\n\n  private tags(): string[] {\n    return parseValueList(this.value);\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector<HTMLInputElement>('[part=\"input\"]') ?? null;\n  }\n\n  private get options() {\n    return { max: this.max, allowDuplicates: this.allowDuplicates, validate: this.validate };\n  }\n\n  private commit(tags: string[]) {\n    this.value = formatValueList(tags);\n    this.pfChange.emit({ value: this.value, values: tags });\n  }\n\n  /** Takes the draft as a tag, and decides what to do with the draft itself. */\n  private addDraft(raw: string) {\n    const result = addTag(this.tags(), raw, this.options);\n    const field = this.input;\n\n    if (result.added) {\n      this.commit(result.tags);\n      if (field) field.value = '';\n      return;\n    }\n\n    // Only a duplicate consumes the draft; `max` leaves it so nothing is lost.\n    if (result.refusal === 'duplicate' && field) field.value = '';\n  }\n\n  private remove(index: number) {\n    if (this.disabled) return;\n    this.commit(removeTagAt(this.tags(), index));\n    this.input?.focus();\n  }\n\n  /**\n   * Enter and comma commit; Backspace on an empty draft removes the last tag,\n   * which is the gesture every tag field has.\n   */\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    const field = event.target as HTMLInputElement;\n\n    if (event.key === Keys.Enter || event.key === ',') {\n      // A bare comma with nothing typed is swallowed rather than committing an\n      // empty tag; Enter is left alone so a form can still be submitted.\n      if (field.value.trim()) {\n        event.preventDefault();\n        this.addDraft(field.value);\n      } else if (event.key !== Keys.Enter) {\n        event.preventDefault();\n      }\n      return;\n    }\n\n    if (event.key === 'Backspace' && field.value === '' && this.tags().length > 0) {\n      event.preventDefault();\n      this.remove(this.tags().length - 1);\n    }\n  };\n\n  /**\n   * A pasted list is folded, not added one at a time, so the maximum and the\n   * dedup see each addition. The React component added them in a loop over\n   * stale state and kept only the last — fixed there too, in the same change.\n   */\n  private onPaste = (event: ClipboardEvent) => {\n    if (this.disabled) return;\n    const pasted = splitPastedTags(event.clipboardData?.getData('text') ?? '');\n    if (pasted.length === 0) return;\n\n    event.preventDefault();\n    let next = this.tags();\n    for (const candidate of pasted) next = addTag(next, candidate, this.options).tags;\n\n    this.commit(next);\n    const field = this.input;\n    if (field) field.value = '';\n  };\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const tags = this.tags();\n    const atMax = this.max !== undefined && tags.length >= this.max;\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n            {tags.map((tag, index) => (\n              <pf-tag\n                key={tag}\n                part=\"tag\"\n                variant={this.tagVariant}\n                dismissible={!this.disabled}\n                dismissLabel={`Remove ${tag}`}\n                onPfDismiss={() => this.remove(index)}\n              >\n                {tag}\n              </pf-tag>\n            ))}\n\n            <input\n              id=\"input\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"input\"\n              class=\"input\"\n              type=\"text\"\n              autocomplete=\"off\"\n              disabled={this.disabled || atMax}\n              required={this.required && tags.length === 0}\n              placeholder={atMax ? '' : this.placeholder}\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              onKeyDown={this.onKeyDown}\n              onPaste={this.onPaste}\n              onBlur={(event) => {\n                // Commit on blur, so a typed tag is not lost by clicking away.\n                const field = event.target as HTMLInputElement;\n                if (field.value.trim()) this.addDraft(field.value);\n              }}\n            />\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/pf-tag.js

@@ -0,0 +1,2 @@
+import{P as s,d as o}from"./p-Bb-s2aqK.js";const t=s;const a=o;export{t as PfTag,a as defineCustomElement};
+//# sourceMappingURL=pf-tag.js.map

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

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

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

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

package/dist/components/pf-textarea.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as r,c as a,h as i,a as s}from"./index.js";import{c as o}from"./p-DfpCerXM.js";import{a as n}from"./p-Cr6IXrUk.js";import{c as d}from"./p-Cy_kHPeC.js";const l=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-textarea-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-textarea-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-textarea-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.textarea{background:var(--pf-textarea-bg);border:1px solid var(--pf-textarea-border);border-radius:var(--radius-md);color:var(--pf-textarea-text);font:inherit;line-height:1.45;min-height:96px;padding:var(--space-2) var(--space-3);resize:vertical;width:100%}.textarea:focus{outline:none}.textarea:focus-visible{border-color:var(--pf-textarea-focus-border);box-shadow:var(--pf-textarea-focus-ring, var(--pf-focus-ring))}.textarea::placeholder{color:var(--pf-textarea-text-muted)}.textarea--invalid{border-color:var(--pf-textarea-invalid-border)}.textarea:disabled{cursor:not-allowed;opacity:0.6}`;const c=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfInput=a(this,"pfInput");this.pfChange=a(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";rows=4;label;description;error;placeholder;required=false;disabled=false;readonly=false;pfInput;pfChange;initialValue="";componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}syncFormState(){this.internals.setFormValue(this.value??"");n(this.internals,Boolean(this.value),this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}onInput=e=>{this.value=e.target.value;this.pfInput.emit({value:this.value})};onChange=()=>{this.pfChange.emit({value:this.value})};componentDidRender(){const e=this.el.shadowRoot?.querySelector("textarea");if(e&&e.value!==(this.value??"")){e.value=this.value??""}}render(){const e=o(this.description&&"description",this.error&&"error");return i(s,{key:"80a5c7f53163f8336121fb8f37b9523e6bed32ab"},i("div",{key:"fa50dbbd2d5f9320d21abf12ee83edce19aee843",class:"field",part:"field"},this.label&&i("label",{key:"f38ae2638abf5eb7f646dac050fa4a8888c03c31",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&i("span",{key:"e7dbd26e3c88a3ab31eb0f2a578d07354c413efe",class:"required","aria-hidden":"true"},"*")),i("textarea",{key:"88c3b5be8039120c49e76a8099be97f2755f73b7",id:"input","aria-label":d(this.el,this.label),part:"textarea",class:{textarea:true,"textarea--invalid":Boolean(this.error)},name:this.name,rows:this.rows,placeholder:this.placeholder,required:this.required,disabled:this.disabled,readOnly:this.readonly,"aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onChange:this.onChange}),this.description&&i("p",{key:"4157ccc35337f16ca15b26e4442e260aa7f47019",class:"description",part:"description",id:"description"},this.description),this.error&&i("p",{key:"04a8583bdde73b69402113a4659e00a316b330fc",class:"error",part:"error",id:"error"},this.error)))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}}static get style(){return l()}},[593,"pf-textarea",{name:[513],value:[1025],rows:[2],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],readonly:[516],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}]}]);function f(){if(typeof customElements==="undefined"){return}const t=["pf-textarea"];t.forEach((t=>{switch(t){case"pf-textarea":if(!customElements.get(e(t))){customElements.define(e(t),c)}break}}))}f();const h=c;const p=f;export{h as PfTextarea,p as defineCustomElement};
+//# sourceMappingURL=pf-textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfTextareaCss","PfTextarea","__stencil_proxyCustomElement","HTMLElement","internals","name","value","rows","label","description","error","placeholder","required","disabled","readonly","pfInput","pfChange","initialValue","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","Boolean","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onInput","event","target","emit","onChange","componentDidRender","control","el","shadowRoot","querySelector","render","describedBy","composeDescribedBy","h","Host","key","class","part","htmlFor","id","controlAriaLabel","textarea","readOnly"],"sources":["src/components/pf-textarea/pf-textarea.css?tag=pf-textarea&encapsulation=shadow","src/components/pf-textarea/pf-textarea.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-textarea-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-textarea-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-textarea-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.textarea {\n  background: var(--pf-textarea-bg);\n  border: 1px solid var(--pf-textarea-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-textarea-text);\n  font: inherit;\n  line-height: 1.45;\n  min-height: 96px;\n  padding: var(--space-2) var(--space-3);\n  resize: vertical;\n  width: 100%;\n}\n\n.textarea:focus {\n  outline: none;\n}\n\n.textarea:focus-visible {\n  border-color: var(--pf-textarea-focus-border);\n  box-shadow: var(--pf-textarea-focus-ring, var(--pf-focus-ring));\n}\n\n.textarea::placeholder {\n  color: var(--pf-textarea-text-muted);\n}\n\n.textarea--invalid {\n  border-color: var(--pf-textarea-invalid-border);\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated multi-line text control.\n *\n * Shares `pf-input`'s field anatomy and form wiring; the control is a\n * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part textarea - the native textarea.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-textarea',\n  styleUrl: 'pf-textarea.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfTextarea {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Visible rows. Mirrors the native attribute. */\n  @Prop() rows = 4;\n\n  /** Visible label. Rendered in the same root as the input, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Fires on every keystroke, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: string }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The value the control had when it was created, which is what a form reset\n   * restores. Captured here because `value` has been overwritten by then.\n   */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /**\n   * Whether the control currently satisfies its constraints.\n   *\n   * A form-associated custom element does not inherit `checkValidity` from\n   * anywhere -- the spec puts it on ElementInternals, so the element has to\n   * forward it or consumers cannot ask.\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * verified against a native `<input value=\"initial\">`, which comes back to\n   * \"initial\" rather than to \"\". Clearing it was a real defect: a\n   * `<pf-textarea value=\"…\">` in a form lost its value on any reset.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private onInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\n  };\n\n  /**\n   * A textarea's value is its text content, not an attribute, so it cannot be\n   * rendered as a JSX child without Stencil replacing that text node on every\n   * keystroke. It is written through the DOM property instead, which is what\n   * the browser itself does.\n   *\n   * Guarded on inequality: assigning the same string still moves the caret to\n   * the end in some engines, which would make typing into the middle of a\n   * paragraph jump the cursor away on every character.\n   */\n  componentDidRender() {\n    const control = this.el.shadowRoot?.querySelector('textarea');\n    if (control && control.value !== (this.value ?? '')) {\n      control.value = this.value ?? '';\n    }\n  }\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal -- the useId()\n    // the React component needs has no counterpart here.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <textarea\n            id=\"input\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"textarea\"\n            class={{ textarea: true, 'textarea--invalid': Boolean(this.error) }}\n            name={this.name}\n            rows={this.rows}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n          />\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAgB,IAAM,smC,MCkCfC,EAAUC,EAAA,MAAAD,UAAAE,E,4MAGFC,UAWMC,KAGAC,MAAQ,GAGzBC,KAAO,EAGPC,MAGAC,YAGAC,MAEAC,YAEiBC,SAAW,MAEXC,SAAW,MAEXC,SAAW,MAG3BC,QAGAC,SAMDC,aAAe,GAEvB,iBAAAC,GACEC,KAAKF,aAAeE,KAAKb,OAAS,GAClCa,KAAKC,e,CAMP,aAAAA,GACED,KAAKf,UAAUiB,aAAaF,KAAKb,OAAS,IAC1CgB,EAAqBH,KAAKf,UAAWmB,QAAQJ,KAAKb,OAAQa,KAAKP,SAAUO,KAAKT,M,CAWhF,mBAAMc,GACJ,OAAOL,KAAKf,UAAUoB,e,CAKxB,oBAAMC,GACJ,OAAON,KAAKf,UAAUqB,gB,CAKxB,0BAAMC,GACJ,OAAOP,KAAKf,UAAUuB,iB,CASxB,iBAAAC,GACET,KAAKb,MAAQa,KAAKF,Y,CAGZY,QAAWC,IACjBX,KAAKb,MAASwB,EAAMC,OAA+BzB,MACnDa,KAAKJ,QAAQiB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAGlC2B,SAAW,KACjBd,KAAKH,SAASgB,KAAK,CAAE1B,MAAOa,KAAKb,OAAQ,EAa3C,kBAAA4B,GACE,MAAMC,EAAUhB,KAAKiB,GAAGC,YAAYC,cAAc,YAClD,GAAIH,GAAWA,EAAQ7B,SAAWa,KAAKb,OAAS,IAAK,CACnD6B,EAAQ7B,MAAQa,KAAKb,OAAS,E,EAIlC,MAAAiC,GAGE,MAAMC,EAAcC,EAClBtB,KAAKV,aAAe,cACpBU,KAAKT,OAAS,SAGhB,OACEgC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACrB3B,KAAKX,OACJkC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQC,QAAQ,SACvC5B,KAAKX,MACLW,KAAKP,UACJ8B,EAAA,QAAAE,IAAA,2CAAMC,MAAM,WAAU,cAAa,QAAM,MAM/CH,EAAA,YAAAE,IAAA,2CACEI,GAAG,QAAO,aACEC,EAAiB9B,KAAKiB,GAAIjB,KAAKX,OAC3CsC,KAAK,WACLD,MAAO,CAAEK,SAAU,KAAM,oBAAqB3B,QAAQJ,KAAKT,QAC3DL,KAAMc,KAAKd,KACXE,KAAMY,KAAKZ,KACXI,YAAaQ,KAAKR,YAClBC,SAAUO,KAAKP,SACfC,SAAUM,KAAKN,SACfsC,SAAUhC,KAAKL,SAAQ,eACTK,KAAKT,MAAQ,OAAS,KAAI,mBACtB8B,EAClBX,QAASV,KAAKU,QACdI,SAAUd,KAAKc,WAEhBd,KAAKV,aACJiC,EAAA,KAAAE,IAAA,2CAAGC,MAAM,cAAcC,KAAK,cAAcE,GAAG,eAC1C7B,KAAKV,aAGTU,KAAKT,OACJgC,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQE,GAAG,SAC9B7B,KAAKT,Q","ignoreList":[]}

package/dist/components/pf-time-picker.d.ts

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

package/dist/components/pf-time-picker.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as i,c as r,h as n,a as o}from"./index.js";import{o as s,p as a}from"./p-CC7AyfOt.js";import{c}from"./p-DfpCerXM.js";import{K as l}from"./p-g4FlTDZx.js";import{a as p}from"./p-Cr6IXrUk.js";import{c as d}from"./p-Cy_kHPeC.js";import{d as u}from"./p-CkFjPRTe.js";var h=e=>String(e).padStart(2,"0");function f(e){const t=/^(\d{1,2}):(\d{2})$/.exec((e??"").trim());if(!t)return{hour:null,minute:null};const i=Number(t[1]);const r=Number(t[2]);if(i>23||r>59)return{hour:null,minute:null};return{hour:i,minute:r}}function m(e){if(e.hour===null||e.minute===null)return"";return`${h(e.hour)}:${h(e.minute)}`}function b(e,t){if(e.hour===null||e.minute===null)return"";if(t===24)return`${h(e.hour)}:${h(e.minute)}`;return`${v(e.hour)}:${h(e.minute)} ${g(e.hour)}`}function g(e){return e<12?"AM":"PM"}function v(e){const t=e%12;return t===0?12:t}function y(e,t){const i=e%12;return t==="PM"?i+12:i}function k(e,t=1){const i=Math.max(1,Math.floor(t));const r=Math.ceil(e/i);return Array.from({length:r},((e,t)=>t*i))}function x(e){return e===24?k(24):k(12).map((e=>e+1))}const w=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-timepicker-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-timepicker-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-timepicker-bg);border:1px solid var(--pf-timepicker-border);border-radius:var(--radius-md);color:var(--pf-timepicker-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:focus-visible{border-color:var(--pf-timepicker-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-timepicker-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-timepicker-placeholder)}.description{color:var(--pf-timepicker-text-muted);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-timepicker-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:var(--pf-timepicker-menu-bg);border:1px solid var(--pf-timepicker-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);display:flex;gap:var(--space-1);padding:var(--space-1)}.panel:popover-open{animation:pf-time-picker-in var(--pf-transition-enter)}@keyframes pf-time-picker-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}.column{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;scrollbar-width:thin}.column:focus-visible{outline:none}.option{background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-timepicker-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;padding:var(--space-1) var(--space-3);text-align:center}.option:hover{background:var(--pf-timepicker-option-hover-bg)}.option:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.option--selected{background:var(--pf-timepicker-option-active-bg);color:var(--pf-timepicker-option-active-text)}`;const C=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=r(this,"pfChange");this.pfOpenChange=r(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";open=false;hourCycle=24;minuteStep=1;label;description;error;placeholder="Select time";required=false;disabled=false;pfChange;pfOpenChange;initialValue="";stopObserving;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}componentDidRender(){if(this.open)this.scrollSelectedIntoView()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){this.internals.setFormValue(this.value||null);p(this.internals,Boolean(this.value),this.required,this.error)}syncOpen(e,t){if(e)this.showPanel();else this.hidePanel();if(e!==t)this.pfOpenChange.emit({open:e})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue}get cycle(){return Number(this.hourCycle)===12?12:24}get panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}get parts(){return f(this.value)}showPanel(){const e=this.panel;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=s({getAnchor:()=>this.trigger,getFloating:()=>e,align:"start",matchAnchorWidth:false,flip:true,onChange:({left:t,top:i})=>a(e,t,i)});this.scrollSelectedIntoView();e.querySelector('[data-selected="true"]')?.focus()}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}scrollSelectedIntoView(){for(const e of Array.from(this.panel?.querySelectorAll('[data-selected="true"]')??[])){if(typeof e.scrollIntoView==="function"){e.scrollIntoView({block:"center"})}}}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t)this.trigger?.focus()};commit(e){const t=m(e);if(!t||t===this.value)return;this.value=t;this.pfChange.emit({value:t})}selectHour(e){const t=this.cycle===24?e:y(e,this.selectedMeridiem()??"AM");this.commit({hour:t,minute:this.parts.minute??0})}selectMinute(e){this.commit({hour:this.parts.hour??0,minute:e})}selectMeridiem(e){const{hour:t,minute:i}=this.parts;this.commit({hour:y(v(t??0),e),minute:i??0})}selectedMeridiem(){const{hour:e}=this.parts;return e===null?null:g(e)}onColumnKeyDown=e=>{if(e.key!==l.ArrowDown&&e.key!==l.ArrowUp)return;const t=e.currentTarget;const i=Array.from(t.querySelectorAll("button"));const r=i.indexOf(this.el.shadowRoot?.activeElement);if(r===-1)return;e.preventDefault();const n=e.key===l.ArrowDown?r+1:r-1;i[Math.min(Math.max(n,0),i.length-1)]?.focus()};renderColumn(e,t){return n("div",{class:"column",part:"column",role:"listbox","aria-label":e,tabindex:-1,onKeyDown:this.onColumnKeyDown},t.map((e=>n("button",{key:e.key,type:"button",part:"option",class:{option:true,"option--selected":e.selected},role:"option","aria-selected":e.selected?"true":"false","data-selected":e.selected?"true":"false",onClick:e.onSelect},e.label))))}render(){const e=c(this.description&&"description",this.error&&"error");const{hour:t,minute:i}=this.parts;const r=b(this.parts,this.cycle);const s=t===null?null:this.cycle===24?t:v(t);const a=this.selectedMeridiem();return n(o,{key:"c26f419605ca45c6180180ebce68bec77fe99676"},n("div",{key:"bf975b4f6ef429212d28be61448df62d54322e90",class:"field",part:"field"},this.label&&n("label",{key:"80b0160476b03992991886c1e0c2f06dd1195931",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&n("span",{key:"5d52003ddf874d68adcaad65012197a5262fe64c",class:"required","aria-hidden":"true"},"*")),n("button",{key:"842fb04fce12e559fc9f7ef541baa60c118c9f9d",id:"trigger","aria-label":d(this.el,this.label),part:"trigger",class:{trigger:true,"trigger--invalid":Boolean(this.error)},type:"button",disabled:this.disabled,"aria-haspopup":"dialog","aria-expanded":this.open?"true":"false","aria-controls":"panel","aria-invalid":this.error?"true":null,"aria-required":this.required?"true":null,"aria-describedby":e,onClick:()=>{if(!this.disabled)this.open=!this.open}},n("span",{key:"2eefe098a48de552dd6c869b4696ce09960abf5e",class:{value:true,"value--placeholder":!r}},r||this.placeholder),n("pf-icon",{key:"881c2760be97dacb6ffd2df9e46f1c66252ff513",name:"clock"})),this.description&&n("p",{key:"c09274524b28fa88034eba28138d0559cc0b60cf",class:"description",part:"description",id:"description"},this.description),this.error&&n("p",{key:"9a7ac33fc684b137684b6925cf44cb2d26c05aa0",class:"error",part:"error",id:"error"},this.error)),n("div",{key:"1c79f18f2078b4d2ae8c2832f8e49f3a33723354",id:"panel",part:"panel",class:"panel",popover:"auto",role:"dialog","aria-label":"Choose a time",onToggle:this.onToggle},this.renderColumn("Hour",x(this.cycle).map((e=>({key:`h-${e}`,label:h(e),selected:s===e,onSelect:()=>this.selectHour(e)})))),this.renderColumn("Minute",k(60,this.minuteStep).map((e=>({key:`m-${e}`,label:h(e),selected:i===e,onSelect:()=>this.selectMinute(e)})))),this.cycle===12&&this.renderColumn("AM or PM",["AM","PM"].map((e=>({key:e,label:e,selected:a===e,onSelect:()=>this.selectMeridiem(e)}))))))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}static get style(){return w()}},[577,"pf-time-picker",{name:[513],value:[1025],open:[1540],hourCycle:[2,"hour-cycle"],minuteStep:[2,"minute-step"],label:[1],description:[1],error:[1],placeholder:[1],required:[516],disabled:[516],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function M(){if(typeof customElements==="undefined"){return}const t=["pf-time-picker","pf-icon"];t.forEach((t=>{switch(t){case"pf-time-picker":if(!customElements.get(e(t))){customElements.define(e(t),C)}break;case"pf-icon":if(!customElements.get(e(t))){u()}break}}))}M();const S=C;const A=M;export{S as PfTimePicker,A as defineCustomElement};
+//# sourceMappingURL=pf-time-picker.js.map

package/dist/components/pf-time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["padTimePart","value","String","padStart","parseTimeValue","match","exec","trim","hour","minute","Number","formatTimeValue","parts","formatTimeDisplay","hourCycle","toHour12","meridiemOf","hour24","face","toHour24","hour12","meridiem","base","timeRange","length","step","safeStep","Math","max","floor","count","ceil","Array","from","_","index","hourOptions","map","pfTimePickerCss","PfTimePicker","__stencil_proxyCustomElement","HTMLElement","internals","name","open","minuteStep","label","description","error","placeholder","required","disabled","pfChange","pfOpenChange","initialValue","stopObserving","componentWillLoad","this","syncFormState","componentDidRender","scrollSelectedIntoView","disconnectedCallback","setFormValue","applyControlValidity","Boolean","syncOpen","next","previous","showPanel","hidePanel","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","cycle","panel","el","shadowRoot","querySelector","trigger","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","align","matchAnchorWidth","flip","onChange","left","top","placePopover","focus","undefined","hidePopover","option","querySelectorAll","scrollIntoView","block","onToggle","event","nowOpen","newState","commit","selectHour","selectedMeridiem","selectMinute","selectMeridiem","onColumnKeyDown","key","Keys","ArrowDown","ArrowUp","column","currentTarget","options","indexOf","activeElement","preventDefault","min","renderColumn","h","class","part","role","tabindex","onKeyDown","type","selected","onClick","onSelect","render","describedBy","composeDescribedBy","display","shownHour","Host","htmlFor","id","controlAriaLabel","popover"],"sources":["../core/dist/time.js","src/components/pf-time-picker/pf-time-picker.css?tag=pf-time-picker&encapsulation=shadow","src/components/pf-time-picker/pf-time-picker.tsx"],"sourcesContent":["//#region src/time.ts\n/**\n* Two digits, which both layers need for the column labels as well as for the\n* canonical value — so it is exported rather than private.\n*/\nvar padTimePart = (value) => String(value).padStart(2, \"0\");\n/**\n* Parses `HH:mm` (or `H:mm`) into hour and minute, or nulls.\n*\n* Out-of-range parts are rejected rather than wrapped: `25:00` is not 1am, it\n* is a mistake, and silently turning it into one hides the mistake.\n*/\nfunction parseTimeValue(value) {\n\tconst match = /^(\\d{1,2}):(\\d{2})$/.exec((value ?? \"\").trim());\n\tif (!match) return {\n\t\thour: null,\n\t\tminute: null\n\t};\n\tconst hour = Number(match[1]);\n\tconst minute = Number(match[2]);\n\tif (hour > 23 || minute > 59) return {\n\t\thour: null,\n\t\tminute: null\n\t};\n\treturn {\n\t\thour,\n\t\tminute\n\t};\n}\n/** The canonical 24-hour `HH:mm`, or `''` when either part is missing. */\nfunction formatTimeValue(parts) {\n\tif (parts.hour === null || parts.minute === null) return \"\";\n\treturn `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;\n}\n/** What the trigger shows: `14:30`, or `2:30 PM` on a 12-hour cycle. */\nfunction formatTimeDisplay(parts, hourCycle) {\n\tif (parts.hour === null || parts.minute === null) return \"\";\n\tif (hourCycle === 24) return `${padTimePart(parts.hour)}:${padTimePart(parts.minute)}`;\n\treturn `${toHour12(parts.hour)}:${padTimePart(parts.minute)} ${meridiemOf(parts.hour)}`;\n}\n/** Which half of the day an hour falls in. */\nfunction meridiemOf(hour24) {\n\treturn hour24 < 12 ? \"AM\" : \"PM\";\n}\n/**\n* The 12-hour face of a 24-hour hour: midnight and midday both read as 12,\n* not 0, which is the one case `hour % 12` gets wrong.\n*/\nfunction toHour12(hour24) {\n\tconst face = hour24 % 12;\n\treturn face === 0 ? 12 : face;\n}\n/** The 24-hour hour for a clock face plus a meridiem. 12 AM is 0, 12 PM is 12. */\nfunction toHour24(hour12, meridiem) {\n\tconst base = hour12 % 12;\n\treturn meridiem === \"PM\" ? base + 12 : base;\n}\n/**\n* The options a column offers: `0, step, 2*step, …` below `length`.\n*\n* A step that does not divide the range leaves a short last stride rather\n* than overshooting — `timeRange(60, 25)` is `[0, 25, 50]`, and 50 is a real\n* minute where 75 is not.\n*/\nfunction timeRange(length, step = 1) {\n\tconst safeStep = Math.max(1, Math.floor(step));\n\tconst count = Math.ceil(length / safeStep);\n\treturn Array.from({ length: count }, (_, index) => index * safeStep);\n}\n/** The hours a column offers: 0–23, or the 1–12 clock face. */\nfunction hourOptions(hourCycle) {\n\treturn hourCycle === 24 ? timeRange(24) : timeRange(12).map((hour) => hour + 1);\n}\n//#endregion\nexport { formatTimeDisplay, formatTimeValue, hourOptions, meridiemOf, padTimePart, parseTimeValue, timeRange, toHour12, toHour24 };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-timepicker-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-timepicker-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-timepicker-bg);\n  border: 1px solid var(--pf-timepicker-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-timepicker-text);\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:focus-visible {\n  border-color: var(--pf-timepicker-focus-border);\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-timepicker-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-timepicker-placeholder);\n}\n\n.description {\n  color: var(--pf-timepicker-text-muted);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-timepicker-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-timepicker-menu-bg);\n  border: 1px solid var(--pf-timepicker-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  display: flex;\n  gap: var(--space-1);\n  padding: var(--space-1);\n}\n\n.panel:popover-open {\n  animation: pf-time-picker-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-time-picker-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel:popover-open {\n    animation: none;\n  }\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  max-height: 220px;\n  overflow-y: auto;\n  scrollbar-width: thin;\n}\n\n.column:focus-visible {\n  outline: none;\n}\n\n.option {\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-timepicker-text);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n  padding: var(--space-1) var(--space-3);\n  text-align: center;\n}\n\n.option:hover {\n  background: var(--pf-timepicker-option-hover-bg);\n}\n\n.option:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.option--selected {\n  background: var(--pf-timepicker-option-active-bg);\n  color: var(--pf-timepicker-option-active-text);\n}\n","import {\n  composeDescribedBy,\n  formatTimeDisplay,\n  formatTimeValue,\n  hourOptions,\n  Keys,\n  meridiemOf,\n  observeAnchoredPosition,\n  padTimePart,\n  parseTimeValue,\n  timeRange,\n  toHour12,\n  toHour24,\n  type HourCycle,\n  type Meridiem,\n  type TimeParts,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated time field: a trigger that opens hour, minute and (on a\n * 12-hour cycle) meridiem columns in a popover.\n *\n * The submitted value is always canonical 24-hour `HH:mm`, whatever\n * `hour-cycle` displays. A control whose submitted value changed with its\n * display would be unusable on a server, so the cycle is a rendering choice\n * and nothing more — all of that arithmetic is core's.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the columns.\n * @part panel - the floating panel.\n * @part column - each of the scrolling columns.\n * @part option - every option button.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-time-picker',\n  styleUrl: 'pf-time-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfTimePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Canonical 24-hour `HH:mm`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the panel is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * 12- or 24-hour display. The value stays 24-hour either way.\n   *\n   * Read through `cycle` below, never directly: Stencil coerces an attribute\n   * using the prop's type as *written*, and it cannot resolve a name it had\n   * to import. Measured: with `HourCycle` imported from core,\n   * `hour-cycle=\"12\"` arrives as the **string** `\"12\"`, so `=== 12` is\n   * false, while `minute-step=\"15\"` — declared `number` — arrives as `15`.\n   * Writing `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`\n   * shows; the alias is kept here because it is the shared type, and the\n   * getter costs nothing.\n   */\n  @Prop() hourCycle: HourCycle = 24;\n\n  /** Granularity of the minutes column. */\n  @Prop() minuteStep = 1;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select time';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the time changes, with the canonical `HH:mm`. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  componentDidRender() {\n    if (this.open) this.scrollSelectedIntoView();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the field started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** `hourCycle` with the attribute case coerced; see the prop's comment. */\n  private get cycle(): HourCycle {\n    return Number(this.hourCycle) === 12 ? 12 : 24;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private get parts(): TimeParts {\n    return parseTimeValue(this.value);\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    this.scrollSelectedIntoView();\n    // Focus the first column's selected option, so the arrows work at once.\n    panel.querySelector<HTMLButtonElement>('[data-selected=\"true\"]')?.focus();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /**\n   * Centres each column on its chosen option.\n   *\n   * `block: 'nearest'` would leave a column that is already scrolled roughly\n   * right alone, which reads as the wrong hour being selected.\n   */\n  private scrollSelectedIntoView() {\n    for (const option of Array.from(\n      this.panel?.querySelectorAll<HTMLElement>('[data-selected=\"true\"]') ?? [],\n    )) {\n      if (typeof option.scrollIntoView === 'function') {\n        option.scrollIntoView({ block: 'center' });\n      }\n    }\n  }\n\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  private commit(next: TimeParts) {\n    const value = formatTimeValue(next);\n    if (!value || value === this.value) return;\n    this.value = value;\n    this.pfChange.emit({ value });\n  }\n\n  private selectHour(hour: number) {\n    const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');\n    this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });\n  }\n\n  private selectMinute(minute: number) {\n    this.commit({ hour: this.parts.hour ?? 0, minute });\n  }\n\n  private selectMeridiem(meridiem: Meridiem) {\n    const { hour, minute } = this.parts;\n    this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });\n  }\n\n  private selectedMeridiem(): Meridiem | null {\n    const { hour } = this.parts;\n    return hour === null ? null : meridiemOf(hour);\n  }\n\n  /**\n   * Up and down move within a column, and stop at its ends rather than\n   * wrapping — a wrap in a scrolling column of 60 minutes reads as the list\n   * having jumped rather than moved.\n   *\n   * The focused option is read from `shadowRoot.activeElement`, because\n   * `document.activeElement` is this host: focus inside a shadow root is\n   * reported as the host from the outside.\n   */\n  private onColumnKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;\n\n    const column = event.currentTarget as HTMLElement;\n    const options = Array.from(column.querySelectorAll<HTMLButtonElement>('button'));\n    const index = options.indexOf(this.el.shadowRoot?.activeElement as HTMLButtonElement);\n    if (index === -1) return;\n\n    event.preventDefault();\n    const next = event.key === Keys.ArrowDown ? index + 1 : index - 1;\n    options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();\n  };\n\n  private renderColumn(\n    name: string,\n    options: Array<{ key: string; label: string; selected: boolean; onSelect: () => void }>,\n  ) {\n    return (\n      <div\n        class=\"column\"\n        part=\"column\"\n        role=\"listbox\"\n        aria-label={name}\n        tabindex={-1}\n        onKeyDown={this.onColumnKeyDown}\n      >\n        {options.map((option) => (\n          <button\n            key={option.key}\n            type=\"button\"\n            part=\"option\"\n            class={{ option: true, 'option--selected': option.selected }}\n            role=\"option\"\n            aria-selected={option.selected ? 'true' : 'false'}\n            data-selected={option.selected ? 'true' : 'false'}\n            onClick={option.onSelect}\n          >\n            {option.label}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const { hour, minute } = this.parts;\n    const display = formatTimeDisplay(this.parts, this.cycle);\n    const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);\n    const meridiem = this.selectedMeridiem();\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <button\n            id=\"trigger\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"trigger\"\n            class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-haspopup=\"dialog\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the panel, so this IDREF resolves. */\n            aria-controls=\"panel\"\n            aria-invalid={this.error ? 'true' : null}\n            aria-required={this.required ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => {\n              if (!this.disabled) this.open = !this.open;\n            }}\n          >\n            <span class={{ value: true, 'value--placeholder': !display }}>\n              {display || this.placeholder}\n            </span>\n            <pf-icon name=\"clock\"></pf-icon>\n          </button>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a time\"\n          onToggle={this.onToggle}\n        >\n          {this.renderColumn(\n            'Hour',\n            hourOptions(this.cycle).map((option) => ({\n              key: `h-${option}`,\n              label: padTimePart(option),\n              selected: shownHour === option,\n              onSelect: () => this.selectHour(option),\n            })),\n          )}\n\n          {this.renderColumn(\n            'Minute',\n            timeRange(60, this.minuteStep).map((option) => ({\n              key: `m-${option}`,\n              label: padTimePart(option),\n              selected: minute === option,\n              onSelect: () => this.selectMinute(option),\n            })),\n          )}\n\n          {this.cycle === 12 &&\n            this.renderColumn(\n              'AM or PM',\n              (['AM', 'PM'] as Meridiem[]).map((option) => ({\n                key: option,\n                label: option,\n                selected: meridiem === option,\n                onSelect: () => this.selectMeridiem(option),\n              })),\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as i,h as a,a as r}from"./index.js";const n=()=>`:host{--pf-timeline-line:1.375rem;--pf-timeline-marker-size:16px;column-gap:var(--space-3);display:grid;grid-template-columns:auto 1fr}:host([hidden]){display:none}.rail{align-items:center;display:flex;flex-direction:column}.marker{align-items:center;border-radius:var(--radius-full);border-style:solid;border-width:2px;display:inline-flex;flex-shrink:0;height:var(--pf-timeline-marker-size);justify-content:center;margin-top:calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);width:var(--pf-timeline-marker-size)}.marker.with-icon{--pf-timeline-marker-size:28px}slot[name='icon']::slotted(*){align-items:center;display:inline-flex;font-size:0.8rem;justify-content:center}:host([tone='default']) .marker{background:var(--pf-timeline-default-bg);border-color:var(--pf-timeline-default-border);color:var(--pf-timeline-default-icon)}:host([tone='success']) .marker{background:var(--pf-timeline-success-bg);border-color:var(--pf-timeline-success-border);color:var(--pf-timeline-success-icon)}:host([tone='warning']) .marker{background:var(--pf-timeline-warning-bg);border-color:var(--pf-timeline-warning-border);color:var(--pf-timeline-warning-icon)}:host([tone='danger']) .marker{background:var(--pf-timeline-danger-bg);border-color:var(--pf-timeline-danger-border);color:var(--pf-timeline-danger-icon)}.connector{background:var(--pf-timeline-connector);flex:1;margin:var(--space-1) 0;min-height:var(--space-4);width:2px}.content{padding-bottom:var(--space-5)}:host([last]) .content{padding-bottom:0}.header{align-items:baseline;column-gap:var(--space-2);display:flex;flex-wrap:wrap;justify-content:space-between}.title{color:var(--pf-timeline-title);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--pf-timeline-line);margin:0}slot[name='timestamp']::slotted(*){color:var(--pf-timeline-timestamp);flex-shrink:0;font-size:var(--font-size-xs);white-space:nowrap}slot[name='description']::slotted(*){color:var(--pf-timeline-description);display:block;font-size:var(--font-size-sm);margin-top:var(--space-1)}`;const o=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}get el(){return this}tone="default";last=false;hasIcon=false;componentWillLoad(){this.readIcon()}readIcon=()=>{this.hasIcon=Array.from(this.el.children).some((e=>e.getAttribute("slot")==="icon"))};render(){return a(r,{key:"91c65e90131294e08445c06cca82fe4dcc3ecb38",role:"listitem"},a("div",{key:"be5e941f568eddc14c8766fc74d4cd095acfa9fc",class:"rail",part:"rail","aria-hidden":"true"},a("span",{key:"40b410122f953312e3643fdf91882b219a6ea2e9",class:{marker:true,"with-icon":this.hasIcon},part:"marker"},a("slot",{key:"b1967cd74ed9468260edfd5375acfa5b8ea91bf6",name:"icon",onSlotchange:this.readIcon})),!this.last&&a("span",{key:"887e7fe2b3b1c22a859e2d0bad2a0769e1bbb3b1",class:"connector",part:"connector"})),a("div",{key:"d25ed21ad5337568a15190d86ccdda8704a09834",class:"content",part:"content"},a("div",{key:"59fa3448d18b10c0efc2d22ee09c0e673dd9cc28",class:"header",part:"header"},a("p",{key:"3458f24b4862ff112e917b9d0e8318ae3bee77f2",class:"title",part:"title"},a("slot",{key:"b220c2ee62e621e47387554a8776b7071e3802e3",name:"title"})),a("slot",{key:"55d4102ca0a1003056e4c5ca830b9161d1fa6ed8",name:"timestamp"})),a("slot",{key:"7ef43f007a4bab89ba3bfdb15ce37b0ebfc9bedd",name:"description"})))}static get style(){return n()}},[769,"pf-timeline-item",{tone:[513],last:[1540],hasIcon:[32]}]);function s(){if(typeof customElements==="undefined"){return}const t=["pf-timeline-item"];t.forEach((t=>{switch(t){case"pf-timeline-item":if(!customElements.get(e(t))){customElements.define(e(t),o)}break}}))}s();const c=o;const l=s;export{c as PfTimelineItem,l as defineCustomElement};
+//# sourceMappingURL=pf-timeline-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["pfTimelineItemCss","PfTimelineItem","__stencil_proxyCustomElement","HTMLElement","tone","last","hasIcon","componentWillLoad","this","readIcon","Array","from","el","children","some","child","getAttribute","render","h","Host","key","role","class","part","marker","name","onSlotchange"],"sources":["src/components/pf-timeline-item/pf-timeline-item.css?tag=pf-timeline-item&encapsulation=shadow","src/components/pf-timeline-item/pf-timeline-item.tsx"],"sourcesContent":[":host {\n  /* The title's line height, which the marker centres itself on. */\n  --pf-timeline-line: 1.375rem;\n  --pf-timeline-marker-size: 16px;\n  column-gap: var(--space-3);\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.rail {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n}\n\n.marker {\n  align-items: center;\n  border-radius: var(--radius-full);\n  border-style: solid;\n  border-width: 2px;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: var(--pf-timeline-marker-size);\n  justify-content: center;\n  /* Centred on the title's first line. */\n  margin-top: calc((var(--pf-timeline-line) - var(--pf-timeline-marker-size)) / 2);\n  width: var(--pf-timeline-marker-size);\n}\n\n/*\n * A marker carrying an icon is larger to fit it. The class comes from JS,\n * because `:has(*)` on a wrapper around a slot always matches -- the slot is\n * itself a child.\n */\n.marker.with-icon {\n  --pf-timeline-marker-size: 28px;\n}\n\nslot[name='icon']::slotted(*) {\n  align-items: center;\n  display: inline-flex;\n  font-size: 0.8rem;\n  justify-content: center;\n}\n\n:host([tone='default']) .marker {\n  background: var(--pf-timeline-default-bg);\n  border-color: var(--pf-timeline-default-border);\n  color: var(--pf-timeline-default-icon);\n}\n\n:host([tone='success']) .marker {\n  background: var(--pf-timeline-success-bg);\n  border-color: var(--pf-timeline-success-border);\n  color: var(--pf-timeline-success-icon);\n}\n\n:host([tone='warning']) .marker {\n  background: var(--pf-timeline-warning-bg);\n  border-color: var(--pf-timeline-warning-border);\n  color: var(--pf-timeline-warning-icon);\n}\n\n:host([tone='danger']) .marker {\n  background: var(--pf-timeline-danger-bg);\n  border-color: var(--pf-timeline-danger-border);\n  color: var(--pf-timeline-danger-icon);\n}\n\n.connector {\n  background: var(--pf-timeline-connector);\n  flex: 1;\n  margin: var(--space-1) 0;\n  min-height: var(--space-4);\n  width: 2px;\n}\n\n.content {\n  padding-bottom: var(--space-5);\n}\n\n:host([last]) .content {\n  padding-bottom: 0;\n}\n\n.header {\n  align-items: baseline;\n  column-gap: var(--space-2);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.title {\n  color: var(--pf-timeline-title);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--pf-timeline-line);\n  margin: 0;\n}\n\nslot[name='timestamp']::slotted(*) {\n  color: var(--pf-timeline-timestamp);\n  flex-shrink: 0;\n  font-size: var(--font-size-xs);\n  white-space: nowrap;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-timeline-description);\n  display: block;\n  font-size: var(--font-size-sm);\n  margin-top: var(--space-1);\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfTimelineTone = 'default' | 'success' | 'warning' | 'danger';\n\n/**\n * One entry in a `pf-timeline`.\n *\n * @slot title - the entry's title.\n * @slot timestamp - short meta text beside the title.\n * @slot description - secondary text below the title.\n * @slot icon - an icon inside the marker, in place of the plain dot.\n * @part rail - the column holding the marker and the connector.\n * @part marker - the dot, or the circle around a slotted icon.\n * @part connector - the line down to the next entry. Absent on the last.\n * @part content - the box holding title, timestamp and description.\n * @part header - the row holding the title and the timestamp.\n * @part title - the title's box.\n */\n@Component({\n  tag: 'pf-timeline-item',\n  styleUrl: 'pf-timeline-item.css',\n  shadow: true,\n})\nexport class PfTimelineItem {\n  @Element() el!: HTMLElement;\n\n  /** Marker colour. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) tone: PfTimelineTone = 'default';\n\n  /** Set by the group: the last entry has no connector and no space below. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /**\n   * Whether anything is slotted into the marker, which decides how big it is.\n   *\n   * Asked in JS rather than selected in CSS: `.marker:has(*)` reads as \"is\n   * anything in here\" and always matches, because the `<slot>` is itself a\n   * child — measured, and the defect it caused in `pf-menu-item`. The marker\n   * is an ancestor of the slotted icon, so `::slotted()` cannot size it\n   * either, which leaves this.\n   */\n  @State() hasIcon = false;\n\n  /**\n   * The light DOM is readable here, so the marker is the right size at first\n   * paint — the mock DOM never fires `slotchange`, and a real one fires it\n   * after the first render.\n   */\n  componentWillLoad() {\n    this.readIcon();\n  }\n\n  private readIcon = () => {\n    this.hasIcon = Array.from(this.el.children).some(\n      (child) => child.getAttribute('slot') === 'icon',\n    );\n  };\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        {/* Decorative: the marker repeats what the content already says. */}\n        <div class=\"rail\" part=\"rail\" aria-hidden=\"true\">\n          <span class={{ marker: true, 'with-icon': this.hasIcon }} part=\"marker\">\n            <slot name=\"icon\" onSlotchange={this.readIcon} />\n          </span>\n          {!this.last && <span class=\"connector\" part=\"connector\" />}\n        </div>\n\n        <div class=\"content\" part=\"content\">\n          <div class=\"header\" part=\"header\">\n            <p class=\"title\" part=\"title\">\n              <slot name=\"title\" />\n            </p>\n            {/*\n              No wrapper around the timestamp or the description: a box around\n              a slot cannot be collapsed from CSS, so an empty one would leave\n              its margin behind on every entry without them. An unassigned slot\n              generates nothing, so the styling goes on `::slotted(*)`.\n            */}\n            <slot name=\"timestamp\" />\n          </div>\n          <slot name=\"description\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAoB,IAAM,2gE,MCuBnBC,EAAcC,EAAA,MAAAD,UAAAE,E,sGAIAC,KAAuB,UAGRC,KAAO,MAWtCC,QAAU,MAOnB,iBAAAC,GACEC,KAAKC,U,CAGCA,SAAW,KACjBD,KAAKF,QAAUI,MAAMC,KAAKH,KAAKI,GAAGC,UAAUC,MACzCC,GAAUA,EAAMC,aAAa,UAAY,QAC3C,EAGH,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YAETH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,OAAOC,KAAK,OAAM,cAAa,QACxCL,EAAA,QAAAE,IAAA,2CAAME,MAAO,CAAEE,OAAQ,KAAM,YAAahB,KAAKF,SAAWiB,KAAK,UAC7DL,EAAA,QAAAE,IAAA,2CAAMK,KAAK,OAAOC,aAAclB,KAAKC,aAErCD,KAAKH,MAAQa,EAAA,QAAAE,IAAA,2CAAME,MAAM,YAAYC,KAAK,eAG9CL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UAAUC,KAAK,WACxBL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SAASC,KAAK,UACvBL,EAAA,KAAAE,IAAA,2CAAGE,MAAM,QAAQC,KAAK,SACpBL,EAAA,QAAAE,IAAA,2CAAMK,KAAK,WAQbP,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAEbP,EAAA,QAAAE,IAAA,2CAAMK,KAAK,iB","ignoreList":[]}

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

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