@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/pitchfork/p-aa615fe9.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as e,H as t}from"./p-Bm6UxEit.js";import{p as r,t as s,g as n,f as l}from"./p-C9jNMqLs.js";var i=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var o=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];function c(a,e,t){const s=a.map((a=>a.date)).filter((a=>r(a)!==null)).sort();const n=r(e??s[0]);const l=r(t??s[s.length-1]);if(!n||!l)return null;if(l<n)return null;return{start:n,end:l}}function p(a,e,t=0){const r=s(a);const i=s(e);const o=(r.getDay()-t+7)%7;const c=[];let p=n(r,-o);while(p<=i&&c.length<400){const a=[];for(let e=0;e<7;e+=1){a.push({iso:l(p),date:p,inRange:p>=r&&p<=i});p=n(p,1)}c.push(a)}return c}function m(a){let e=0;let t=0;for(const r of a){if(!Number.isFinite(r.value))continue;e=Math.max(e,r.value);t+=r.value}return{max:e,total:t}}function d(a,e,t){const r=Math.max(2,Math.floor(t)||2);if(!Number.isFinite(a)||a<=0||!(e>0))return 0;return Math.min(r-1,Math.max(1,Math.ceil(a/e*(r-1))))}function h(a,e){if(a<=0)return"var(--pf-heatmap-empty)";const t=Math.max(2,Math.floor(e)||2);return`color-mix(in srgb, var(--pf-heatmap-color) ${Math.round(Math.min(a,t-1)/(t-1)*100)}%, var(--pf-heatmap-empty))`}function f(a){const e=[];let t=-1;for(const[r,s]of a.entries()){const a=s.find((a=>a.inRange));if(!a)continue;const n=a.date.getMonth();if(n!==t){e.push({column:r+1,label:i[n]});t=n}}return e}const u=()=>`:host{display:inline-block;font-family:var(--font-family-sans);max-width:100%;overflow-x:auto}:host([hidden]){display:none}.empty{color:var(--pf-heatmap-empty-text);font-size:var(--font-size-sm);padding:var(--space-4);text-align:center}.body{display:flex;gap:var(--pf-heatmap-cell-gap)}.weekdays{display:flex;flex-direction:column}.weekday-spacer{display:block;height:calc(var(--font-size-xs) + var(--space-1))}.weekday-grid{display:grid;gap:var(--pf-heatmap-cell-gap);grid-template-rows:repeat(7, var(--pf-heatmap-cell-size))}.weekday{align-items:center;color:var(--pf-heatmap-label-color);display:flex;font-size:var(--font-size-xs);line-height:1;padding-inline-end:var(--space-1)}.main{display:flex;flex-direction:column;gap:var(--space-1)}.months{display:grid;gap:var(--pf-heatmap-cell-gap);height:var(--font-size-xs)}.month{color:var(--pf-heatmap-label-color);font-size:var(--font-size-xs);line-height:1}.grid{display:grid;gap:var(--pf-heatmap-cell-gap);grid-auto-columns:var(--pf-heatmap-cell-size);grid-auto-flow:column;grid-template-rows:repeat(7, var(--pf-heatmap-cell-size))}.cell{animation:pf-heatmap-cell-in var(--duration-moderate) var(--easing-decelerate) both;border-radius:var(--pf-heatmap-cell-radius);height:var(--pf-heatmap-cell-size);width:var(--pf-heatmap-cell-size)}.cell--empty{background:transparent}@keyframes pf-heatmap-cell-in{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.cell{animation:none}}`;const g=class{constructor(e){a(this,e)}data=[];startDate;endDate;levels=5;weekStartsOn=0;cellSize=12;cellGap=3;showWeekdayLabels=true;showMonthLabels=true;label;get entries(){const a=this.data;if(Array.isArray(a))return a;try{const e=JSON.parse(String(a||"[]"));return Array.isArray(e)?e:[]}catch{return[]}}get weekStart(){return Number(this.weekStartsOn)===1?1:0}render(){const a=this.entries;const r=c(a,this.startDate,this.endDate);const s=Number(this.cellSize)||12;const n=Number(this.cellGap)||3;if(!r){return e(t,null,e("div",{class:"empty",part:"empty"},e("slot",{name:"empty"},"No data")))}const{start:i,end:u}=r;const g=Number(this.levels);const y=new Map(a.map((a=>[a.date,a.value])));const{max:v,total:b}=m(a);const w=p(i,u,this.weekStart);const x=f(w);return e(t,{role:"img","aria-label":this.label??`Activity heatmap from ${l(i)} to ${l(u)}, ${b} total`,style:{"--pf-heatmap-cell-size":`${s}px`,"--pf-heatmap-cell-gap":`${n}px`}},e("div",{class:"body"},this.showWeekdayLabels&&e("div",{class:"weekdays",part:"weekdays"},this.showMonthLabels&&e("span",{class:"weekday-spacer","aria-hidden":"true"}),e("div",{class:"weekday-grid"},Array.from({length:7},((a,t)=>e("span",{class:"weekday"},t%2===1?o[(this.weekStart+t)%7]:""))))),e("div",{class:"main"},this.showMonthLabels&&e("div",{class:"months",part:"months","aria-hidden":"true",style:{gridTemplateColumns:`repeat(${w.length}, var(--pf-heatmap-cell-size))`}},x.map((a=>e("span",{class:"month",style:{gridColumnStart:String(a.column)}},a.label)))),e("div",{class:"grid",part:"grid"},w.flatMap(((a,t)=>a.map((a=>a.inRange?e("span",{class:"cell",part:"cell",title:`${a.iso}: ${y.get(a.iso)??0}`,"data-level":String(d(y.get(a.iso)??0,v,g)),style:{background:h(d(y.get(a.iso)??0,v,g),g),animationDelay:`${t*8}ms`}}):e("span",{class:"cell cell--empty"})))))))))}};g.style=u();export{g as pf_heatmap};
+//# sourceMappingURL=p-aa615fe9.entry.js.map

package/dist/pitchfork/p-aa615fe9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HEATMAP_MONTHS","HEATMAP_WEEKDAYS","heatmapRange","data","startDate","endDate","dates","map","item","date","filter","iso","parseISODate","sort","start","end","length","buildHeatmapWeeks","weekStartsOn","from","toMidday","to","offset","getDay","weeks","cursor","addDays","week","day","push","formatISODate","inRange","summariseHeatmap","max","total","Number","isFinite","value","Math","heatmapLevel","levelCount","levels","floor","min","ceil","heatmapCellColor","level","round","heatmapMonthLabels","labels","lastMonth","index","entries","first","find","cell","month","getMonth","column","label","pfHeatmapCss","PfHeatmap","cellSize","cellGap","showWeekdayLabels","showMonthLabels","raw","this","Array","isArray","parsed","JSON","parse","String","weekStart","render","range","h","Host","class","part","name","byDate","Map","entry","months","role","style","_","gridTemplateColumns","gridColumnStart","flatMap","title","get","background","animationDelay"],"sources":["../core/dist/heatmap.js","src/components/pf-heatmap/pf-heatmap.css?tag=pf-heatmap&encapsulation=shadow","src/components/pf-heatmap/pf-heatmap.tsx"],"sourcesContent":["import { addDays, formatISODate, parseISODate, toMidday } from \"./date.js\";\n//#region src/heatmap.ts\n/**\n* The grid behind a calendar heatmap: which days it covers, which column each\n* week is, and how dark a value makes a cell.\n*\n* Shared because all of it is date arithmetic and bucketing, and because the\n* date arithmetic is the part that is easy to get wrong in a way nobody sees\n* until a daylight-saving boundary. It goes through `date.ts`, which pins\n* every date to midday for exactly that reason.\n*/\n/** Short month names, in the order a `Date` reports them. */\nvar HEATMAP_MONTHS = [\n\t\"Jan\",\n\t\"Feb\",\n\t\"Mar\",\n\t\"Apr\",\n\t\"May\",\n\t\"Jun\",\n\t\"Jul\",\n\t\"Aug\",\n\t\"Sep\",\n\t\"Oct\",\n\t\"Nov\",\n\t\"Dec\"\n];\n/** Short weekday names, Sunday first, as `Date.getDay()` numbers them. */\nvar HEATMAP_WEEKDAYS = [\n\t\"Sun\",\n\t\"Mon\",\n\t\"Tue\",\n\t\"Wed\",\n\t\"Thu\",\n\t\"Fri\",\n\t\"Sat\"\n];\n/**\n* The first and last day to draw.\n*\n* The explicit bounds win; otherwise the earliest and latest dates in the\n* data. `null` when there is nothing to draw, which is the caller's signal to\n* show its empty state. A date that does not parse is ignored rather than\n* becoming an `Invalid Date` that poisons every comparison after it.\n*/\nfunction heatmapRange(data, startDate, endDate) {\n\tconst dates = data.map((item) => item.date).filter((iso) => parseISODate(iso) !== null).sort();\n\tconst start = parseISODate(startDate ?? dates[0]);\n\tconst end = parseISODate(endDate ?? dates[dates.length - 1]);\n\tif (!start || !end) return null;\n\tif (end < start) return null;\n\treturn {\n\t\tstart,\n\t\tend\n\t};\n}\n/**\n* The weeks to draw, as columns of seven days.\n*\n* The first column is aligned back to the configured week start, so every row\n* is the same weekday all the way across — which is the whole point of the\n* shape. Days before `start` and after `end` are present but not `inRange`,\n* because the grid has to stay rectangular.\n*\n* Capped at 400 columns: a `start`/`end` pair a consumer got the wrong way\n* round is caught by `heatmapRange`, but a range of twenty years is a\n* legitimate pair of dates and an unbounded loop building 1,040 columns of\n* seven cells each is a frozen tab rather than a chart.\n*/\nfunction buildHeatmapWeeks(start, end, weekStartsOn = 0) {\n\tconst from = toMidday(start);\n\tconst to = toMidday(end);\n\tconst offset = (from.getDay() - weekStartsOn + 7) % 7;\n\tconst weeks = [];\n\tlet cursor = addDays(from, -offset);\n\twhile (cursor <= to && weeks.length < 400) {\n\t\tconst week = [];\n\t\tfor (let day = 0; day < 7; day += 1) {\n\t\t\tweek.push({\n\t\t\t\tiso: formatISODate(cursor),\n\t\t\t\tdate: cursor,\n\t\t\t\tinRange: cursor >= from && cursor <= to\n\t\t\t});\n\t\t\tcursor = addDays(cursor, 1);\n\t\t}\n\t\tweeks.push(week);\n\t}\n\treturn weeks;\n}\n/**\n* The largest and the sum of the values, ignoring the ones that are not\n* numbers.\n*\n* The React `Heatmap` reduced with `Math.max(max, d.value)` and `sum +\n* d.value`, both of which carry one `NaN` through everything: every cell's\n* level came out `NaN` and the accessible summary read \"NaN total\".\n*/\nfunction summariseHeatmap(data) {\n\tlet max = 0;\n\tlet total = 0;\n\tfor (const item of data) {\n\t\tif (!Number.isFinite(item.value)) continue;\n\t\tmax = Math.max(max, item.value);\n\t\ttotal += item.value;\n\t}\n\treturn {\n\t\tmax,\n\t\ttotal\n\t};\n}\n/**\n* Which bucket a value falls in, from `0` (nothing) to `levelCount - 1`.\n*\n* Level 0 is reserved for \"no activity\", so any positive value is at least 1\n* however small — a day with one commit should not look like a day with none.\n*/\nfunction heatmapLevel(value, max, levelCount) {\n\tconst levels = Math.max(2, Math.floor(levelCount) || 2);\n\tif (!Number.isFinite(value) || value <= 0 || !(max > 0)) return 0;\n\treturn Math.min(levels - 1, Math.max(1, Math.ceil(value / max * (levels - 1))));\n}\n/**\n* The colour for a level, as a `color-mix` of the heatmap's own two aliases.\n*\n* A mix rather than a scale of tokens, so one `--pf-heatmap-color` override\n* re-tints the whole chart.\n*/\nfunction heatmapCellColor(level, levelCount) {\n\tif (level <= 0) return \"var(--pf-heatmap-empty)\";\n\tconst levels = Math.max(2, Math.floor(levelCount) || 2);\n\treturn `color-mix(in srgb, var(--pf-heatmap-color) ${Math.round(Math.min(level, levels - 1) / (levels - 1) * 100)}%, var(--pf-heatmap-empty))`;\n}\n/**\n* Where each month's name goes: the column of the first in-range day that\n* belongs to it.\n*\n* `column` is one-based, because it is used as a `grid-column-start`.\n*/\nfunction heatmapMonthLabels(weeks) {\n\tconst labels = [];\n\tlet lastMonth = -1;\n\tfor (const [index, week] of weeks.entries()) {\n\t\tconst first = week.find((cell) => cell.inRange);\n\t\tif (!first) continue;\n\t\tconst month = first.date.getMonth();\n\t\tif (month !== lastMonth) {\n\t\t\tlabels.push({\n\t\t\t\tcolumn: index + 1,\n\t\t\t\tlabel: HEATMAP_MONTHS[month]\n\t\t\t});\n\t\t\tlastMonth = month;\n\t\t}\n\t}\n\treturn labels;\n}\n//#endregion\nexport { HEATMAP_MONTHS, HEATMAP_WEEKDAYS, buildHeatmapWeeks, heatmapCellColor, heatmapLevel, heatmapMonthLabels, heatmapRange, summariseHeatmap };\n",":host {\n  display: inline-block;\n  font-family: var(--font-family-sans);\n  max-width: 100%;\n  /* A full year is wider than a small screen: scroll rather than overflow. */\n  overflow-x: auto;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.empty {\n  color: var(--pf-heatmap-empty-text);\n  font-size: var(--font-size-sm);\n  padding: var(--space-4);\n  text-align: center;\n}\n\n.body {\n  display: flex;\n  gap: var(--pf-heatmap-cell-gap);\n}\n\n.weekdays {\n  display: flex;\n  flex-direction: column;\n}\n\n.weekday-spacer {\n  display: block;\n  height: calc(var(--font-size-xs) + var(--space-1));\n}\n\n.weekday-grid {\n  display: grid;\n  gap: var(--pf-heatmap-cell-gap);\n  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));\n}\n\n.weekday {\n  align-items: center;\n  color: var(--pf-heatmap-label-color);\n  display: flex;\n  font-size: var(--font-size-xs);\n  line-height: 1;\n  padding-inline-end: var(--space-1);\n}\n\n.main {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n}\n\n.months {\n  display: grid;\n  gap: var(--pf-heatmap-cell-gap);\n  height: var(--font-size-xs);\n}\n\n.month {\n  color: var(--pf-heatmap-label-color);\n  font-size: var(--font-size-xs);\n  line-height: 1;\n}\n\n/*\n * Columns of seven, filled top to bottom and then left to right, which is\n * what `grid-auto-flow: column` over seven fixed rows gives.\n */\n.grid {\n  display: grid;\n  gap: var(--pf-heatmap-cell-gap);\n  grid-auto-columns: var(--pf-heatmap-cell-size);\n  grid-auto-flow: column;\n  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));\n}\n\n.cell {\n  animation: pf-heatmap-cell-in var(--duration-moderate) var(--easing-decelerate) both;\n  border-radius: var(--pf-heatmap-cell-radius);\n  height: var(--pf-heatmap-cell-size);\n  width: var(--pf-heatmap-cell-size);\n}\n\n.cell--empty {\n  background: transparent;\n}\n\n/* Its own copy: `@keyframes` do not cross a shadow boundary. */\n@keyframes pf-heatmap-cell-in {\n  from {\n    opacity: 0;\n    transform: scale(0.6);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cell {\n    animation: none;\n  }\n}\n","import {\n  HEATMAP_WEEKDAYS,\n  buildHeatmapWeeks,\n  formatISODate,\n  heatmapCellColor,\n  heatmapLevel,\n  heatmapMonthLabels,\n  heatmapRange,\n  summariseHeatmap,\n  type HeatmapDatumLike,\n} from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A calendar heatmap: one cell per day, darker where the value is higher.\n *\n * All of the arithmetic is core's, and the date stepping goes through\n * `date.ts`, which pins every date to midday — a day step from midnight\n * across a daylight-saving boundary loses or repeats a day, which is\n * invisible under UTC and is why both test projects now run in a timezone\n * that has daylight saving.\n *\n * @slot empty - what to show when there is nothing to draw.\n * @part empty - the empty state's box.\n * @part weekdays - the column of weekday names.\n * @part months - the row of month names.\n * @part grid - the cells.\n * @part cell - one day.\n */\n@Component({\n  tag: 'pf-heatmap',\n  styleUrl: 'pf-heatmap.css',\n  shadow: true,\n})\nexport class PfHeatmap {\n  /**\n   * One entry per day with a value, as `{ date: 'YYYY-MM-DD', value }`.\n   *\n   * An array for a framework consumer, or JSON for plain HTML, because\n   * Stencil coerces an attribute only for the primitive types it recognises\n   * and would otherwise hand this the string verbatim.\n   */\n  @Prop() data: HeatmapDatumLike[] | string = [];\n\n  /** First day to draw. Defaults to the earliest in the data. */\n  @Prop() startDate?: string;\n\n  /** Last day to draw. Defaults to the latest in the data. */\n  @Prop() endDate?: string;\n\n  /** Colour buckets, counting the empty one. */\n  @Prop() levels = 5;\n\n  /** 0 = Sunday, 1 = Monday. Read through a getter, which coerces. */\n  @Prop() weekStartsOn: 0 | 1 = 0;\n\n  @Prop() cellSize = 12;\n\n  @Prop() cellGap = 3;\n\n  @Prop({ reflect: true }) showWeekdayLabels = true;\n\n  @Prop({ reflect: true }) showMonthLabels = true;\n\n  /** The chart's accessible name. One is generated when it has none. */\n  @Prop() label?: string;\n\n  /** The entries, however they arrived. */\n  private get entries(): HeatmapDatumLike[] {\n    const raw = this.data;\n    if (Array.isArray(raw)) return raw;\n\n    try {\n      const parsed = JSON.parse(String(raw || '[]'));\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      // A malformed attribute is an empty heatmap, not a thrown render.\n      return [];\n    }\n  }\n\n  /**\n   * `0 | 1`, coerced.\n   *\n   * Written out as `0 | 1` rather than as an imported alias, which is the\n   * difference that decides whether Stencil coerces the attribute: measured\n   * side by side, this arrives as the **number** `1` while\n   * `pf-time-picker`'s imported `HourCycle` arrives as the string `\"12\"`.\n   * The getter stays anyway — it costs nothing and covers a consumer who\n   * sets the property to a string.\n   */\n  private get weekStart(): 0 | 1 {\n    return Number(this.weekStartsOn) === 1 ? 1 : 0;\n  }\n\n  render() {\n    const entries = this.entries;\n    const range = heatmapRange(entries, this.startDate, this.endDate);\n    const cellSize = Number(this.cellSize) || 12;\n    const cellGap = Number(this.cellGap) || 3;\n\n    if (!range) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n        </Host>\n      );\n    }\n\n    const { start, end } = range;\n    /*\n     * Passed through rather than clamped here: `heatmapLevel` and\n     * `heatmapCellColor` both floor it at two buckets, and a second copy of\n     * that clamp is a second thing to keep in step.\n     */\n    const levelCount = Number(this.levels);\n    const byDate = new Map(entries.map((entry) => [entry.date, entry.value]));\n    const { max, total } = summariseHeatmap(entries);\n    const weeks = buildHeatmapWeeks(start, end, this.weekStart);\n    const months = heatmapMonthLabels(weeks);\n\n    return (\n      <Host\n        role=\"img\"\n        aria-label={\n          this.label ??\n          `Activity heatmap from ${formatISODate(start)} to ${formatISODate(end)}, ${total} total`\n        }\n        style={{\n          '--pf-heatmap-cell-size': `${cellSize}px`,\n          '--pf-heatmap-cell-gap': `${cellGap}px`,\n        }}\n      >\n        <div class=\"body\">\n          {this.showWeekdayLabels && (\n            <div class=\"weekdays\" part=\"weekdays\">\n              {this.showMonthLabels && <span class=\"weekday-spacer\" aria-hidden=\"true\"></span>}\n              <div class=\"weekday-grid\">\n                {Array.from({ length: 7 }, (_, index) => (\n                  <span class=\"weekday\">\n                    {/* Every other name, or seven three-letter labels in a\n                        12px column overlap each other. */}\n                    {index % 2 === 1 ? HEATMAP_WEEKDAYS[(this.weekStart + index) % 7] : ''}\n                  </span>\n                ))}\n              </div>\n            </div>\n          )}\n\n          <div class=\"main\">\n            {this.showMonthLabels && (\n              <div\n                class=\"months\"\n                part=\"months\"\n                aria-hidden=\"true\"\n                style={{\n                  gridTemplateColumns: `repeat(${weeks.length}, var(--pf-heatmap-cell-size))`,\n                }}\n              >\n                {months.map((month) => (\n                  <span class=\"month\" style={{ gridColumnStart: String(month.column) }}>\n                    {month.label}\n                  </span>\n                ))}\n              </div>\n            )}\n\n            <div class=\"grid\" part=\"grid\">\n              {weeks.flatMap((week, column) =>\n                week.map((cell) =>\n                  cell.inRange ? (\n                    <span\n                      class=\"cell\"\n                      part=\"cell\"\n                      title={`${cell.iso}: ${byDate.get(cell.iso) ?? 0}`}\n                      data-level={String(heatmapLevel(byDate.get(cell.iso) ?? 0, max, levelCount))}\n                      style={{\n                        background: heatmapCellColor(\n                          heatmapLevel(byDate.get(cell.iso) ?? 0, max, levelCount),\n                          levelCount,\n                        ),\n                        // Staggered by column, so the grid wipes in oldest first.\n                        animationDelay: `${column * 8}ms`,\n                      }}\n                    ></span>\n                  ) : (\n                    <span class=\"cell cell--empty\"></span>\n                  ),\n                ),\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-aa869013.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,H as s}from"./p-Bm6UxEit.js";import{f as i,c as r}from"./p-DVK0sUX2.js";const t=()=>`:host{align-items:center;background:var(--pf-rating-badge-bg);border:1px solid var(--pf-rating-badge-border);border-radius:var(--radius-full);color:var(--pf-rating-badge-text);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--space-2);line-height:1}:host([hidden]){display:none}:host([size='sm']){min-height:24px;padding:0 var(--space-2)}:host([size='md']){min-height:28px;padding:0 var(--space-3)}.icon{display:block;fill:currentColor;height:14px;width:14px}.value{align-items:center;display:inline-flex;gap:var(--space-1)}.separator{opacity:0.65}.reviews{color:var(--pf-rating-badge-reviews);font-weight:var(--font-weight-medium)}`;const n=class{constructor(a){e(this,a)}value=0;max=5;reviews;size="md";render(){const e=Number(this.max);const t=r(Number(this.value),e);const n=this.reviews;return a(s,{key:"6136e9ef02a72ad066bcd78116ce754d539fcfae"},a("pf-icon",{key:"716cfacb32809c7baed7a0033175e243f4999ff6",class:"icon",part:"icon",name:"star","aria-hidden":"true"}),a("span",{key:"33ac2a3b281d0fb975f94aee3f1f15a7c4ed095c",class:"value",part:"value"},i(t),a("span",{key:"876cd76f0cd653874a258d12f2288ce92ed38f02",class:"separator"},"/"),i(e)),n!==undefined&&n!==null&&a("span",{key:"158525f1ceaf5f08ef158eef1e5e99a521c37620",class:"reviews",part:"reviews"},"(",Number(n).toLocaleString(),")"))}};n.style=t();export{n as pf_rating_badge};
+//# sourceMappingURL=p-aa869013.entry.js.map

package/dist/pitchfork/p-aa869013.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfRatingBadgeCss","PfRatingBadge","value","max","reviews","size","render","Number","this","clampRating","h","Host","key","class","part","name","formatRating","undefined","toLocaleString"],"sources":["src/components/pf-rating-badge/pf-rating-badge.css?tag=pf-rating-badge&encapsulation=shadow","src/components/pf-rating-badge/pf-rating-badge.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  background: var(--pf-rating-badge-bg);\n  border: 1px solid var(--pf-rating-badge-border);\n  border-radius: var(--radius-full);\n  color: var(--pf-rating-badge-text);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  gap: var(--space-2);\n  line-height: 1;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='sm']) {\n  min-height: 24px;\n  padding: 0 var(--space-2);\n}\n\n:host([size='md']) {\n  min-height: 28px;\n  padding: 0 var(--space-3);\n}\n\n.icon {\n  display: block;\n  fill: currentColor;\n  height: 14px;\n  width: 14px;\n}\n\n.value {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-1);\n}\n\n.separator {\n  opacity: 0.65;\n}\n\n.reviews {\n  color: var(--pf-rating-badge-reviews);\n  font-weight: var(--font-weight-medium);\n}\n","import { clampRating, formatRating } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfRatingBadgeSize = 'sm' | 'md';\n\n/**\n * A rating as a compact pill: one star, the number out of the maximum, and\n * optionally how many reviews it came from.\n *\n * @part icon - the star.\n * @part value - the rating and the maximum.\n * @part reviews - the review count, when `reviews` is set.\n */\n@Component({\n  tag: 'pf-rating-badge',\n  styleUrl: 'pf-rating-badge.css',\n  shadow: true,\n})\nexport class PfRatingBadge {\n  /** The rating. Clamped into 0..max. */\n  @Prop() value = 0;\n\n  /** The top of the scale. */\n  @Prop() max = 5;\n\n  /**\n   * How many reviews the rating came from. Omit it to show no count at all —\n   * which is different from `0`, a product nobody has reviewed yet.\n   */\n  @Prop() reviews?: number;\n\n  /** Padding and height. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfRatingBadgeSize = 'md';\n\n  render() {\n    const max = Number(this.max);\n    const value = clampRating(Number(this.value), max);\n    const reviews = this.reviews;\n\n    return (\n      <Host>\n        <pf-icon class=\"icon\" part=\"icon\" name=\"star\" aria-hidden=\"true\"></pf-icon>\n        <span class=\"value\" part=\"value\">\n          {formatRating(value)}\n          <span class=\"separator\">/</span>\n          {formatRating(max)}\n        </span>\n        {reviews !== undefined && reviews !== null && (\n          <span class=\"reviews\" part=\"reviews\">\n            ({Number(reviews).toLocaleString()})\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,IAAM,6qB,MCkBlBC,EAAa,M,yBAEhBC,MAAQ,EAGRC,IAAM,EAMNC,QAGiBC,KAA0B,KAEnD,MAAAC,GACE,MAAMH,EAAMI,OAAOC,KAAKL,KACxB,MAAMD,EAAQO,EAAYF,OAAOC,KAAKN,OAAQC,GAC9C,MAAMC,EAAUI,KAAKJ,QAErB,OACEM,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WAAAE,IAAA,2CAASC,MAAM,OAAOC,KAAK,OAAOC,KAAK,OAAM,cAAa,SAC1DL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,QAAQC,KAAK,SACtBE,EAAad,GACdQ,EAAA,QAAAE,IAAA,2CAAMC,MAAM,aAAW,KACtBG,EAAab,IAEfC,IAAYa,WAAab,IAAY,MACpCM,EAAA,QAAAE,IAAA,2CAAMC,MAAM,UAAUC,KAAK,WAAS,IAChCP,OAAOH,GAASc,iBAAgB,K","ignoreList":[]}

package/dist/pitchfork/p-aac27e62.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,H as t}from"./p-Bm6UxEit.js";import{g as r,c as i}from"./p-BA6CMosJ.js";const s=()=>`:host{align-items:center;display:inline-flex;justify-content:center;position:relative}:host([hidden]){display:none}.svg{inset:0;position:absolute}.track{stroke:var(--pf-gauge-track-color)}.fill{animation:pf-gauge-fill var(--duration-slow) var(--easing-decelerate);stroke-dashoffset:var(--pf-gauge-offset);transition:stroke-dashoffset var(--pf-transition-medium)}@keyframes pf-gauge-fill{from{stroke-dashoffset:var(--pf-gauge-circumference)}}@media (prefers-reduced-motion: reduce){.fill{animation:none;transition:none}}.center{align-items:center;background:var(--pf-gauge-center-bg);border-radius:var(--radius-full);display:flex;flex-direction:column;gap:var(--space-1);justify-content:center;padding:var(--space-2);position:relative;text-align:center;z-index:1}.label{color:var(--pf-gauge-label-color);font-size:var(--pf-gauge-label-size);font-weight:var(--font-weight-semibold);line-height:1}::slotted([slot='sub']){color:var(--pf-gauge-sub-label-color);font-size:var(--font-size-sm);line-height:1}`;const c=class{constructor(a){e(this,a)}value=0;max=100;size=200;strokeWidth=16;color;label="Gauge";render(){const e=Number(this.size)||200;const s=Number(this.strokeWidth)||16;const c=Math.round(i(Number(this.value),Number(this.max)));const{radius:o,circumference:n,dashOffset:l,center:f}=r(e,s,c);const d=this.color??"var(--pf-gauge-color)";return a(t,{key:"4b68ce456d9e35a64fa2eb16dbcaf7b3d7d8c39a",role:"meter","aria-label":this.label,"aria-valuenow":String(this.value),"aria-valuemin":"0","aria-valuemax":String(this.max),"aria-valuetext":`${c}%`,style:{width:`${e}px`,height:`${e}px`}},a("svg",{key:"cfec8943ae89a32ebb53b7590a16a5cb9c7650bd",class:"svg",part:"svg",width:e,height:e,viewBox:`0 0 ${e} ${e}`,"aria-hidden":"true"},a("circle",{key:"1b582bd780e9eef61d64fd9422881c3bd2980410",class:"track",part:"track",cx:f,cy:f,r:o,fill:"none","stroke-width":s}),a("circle",{key:"f1b871cc4f6c0e30f1f0ed2f97ed947f0733d197",class:"fill",part:"fill",cx:f,cy:f,r:o,fill:"none",stroke:d,"stroke-width":s,"stroke-linecap":"round","stroke-dasharray":n,style:{transform:"rotate(-90deg)",transformOrigin:`${f}px ${f}px`,"--pf-gauge-circumference":String(n),"--pf-gauge-offset":String(l)}})),a("div",{key:"ca9e8e0cbad4c53bd7b6d1f2cb032ac0e655e728",class:"center",part:"center","aria-hidden":"true"},a("span",{key:"c41cc2ff253f428c8f5a23ec1d8e63aa905ac7d5",class:"label",part:"label"},a("slot",{key:"491591bff197590cf4dc3431603494879f24652e",name:"center"},c,"%")),a("slot",{key:"2027cd831a0e13b89616a3a2e667a1a952fcdf5d",name:"sub"})))}};c.style=s();export{c as pf_gauge_chart};
+//# sourceMappingURL=p-aac27e62.entry.js.map

package/dist/pitchfork/p-aac27e62.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfGaugeChartCss","PfGaugeChart","value","max","size","strokeWidth","color","label","render","Number","this","percent","Math","round","clampProgressPercent","radius","circumference","dashOffset","center","getProgressCircleGeometry","stroke","h","Host","key","role","String","style","width","height","class","part","viewBox","cx","cy","r","fill","transform","transformOrigin","name"],"sources":["src/components/pf-gauge-chart/pf-gauge-chart.css?tag=pf-gauge-chart&encapsulation=shadow","src/components/pf-gauge-chart/pf-gauge-chart.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  inset: 0;\n  position: absolute;\n}\n\n.track {\n  stroke: var(--pf-gauge-track-color);\n}\n\n.fill {\n  /*\n   * The animation and the transition together: the first fills the arc in on\n   * first paint, the second carries it between values afterwards. A\n   * `--pf-transition-*` alias where the raw duration tokens would do, because\n   * an alias cannot be half-right.\n   */\n  animation: pf-gauge-fill var(--duration-slow) var(--easing-decelerate);\n  stroke-dashoffset: var(--pf-gauge-offset);\n  transition: stroke-dashoffset var(--pf-transition-medium);\n}\n\n/*\n * Its own copy: `@keyframes` do not cross a shadow boundary, so the React\n * library's global declaration is invisible here.\n */\n@keyframes pf-gauge-fill {\n  from {\n    stroke-dashoffset: var(--pf-gauge-circumference);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    animation: none;\n    transition: none;\n  }\n}\n\n.center {\n  align-items: center;\n  background: var(--pf-gauge-center-bg);\n  border-radius: var(--radius-full);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  justify-content: center;\n  padding: var(--space-2);\n  position: relative;\n  text-align: center;\n  z-index: 1;\n}\n\n.label {\n  color: var(--pf-gauge-label-color);\n  font-size: var(--pf-gauge-label-size);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1;\n}\n\n/*\n * The slotted sub-label itself, with no wrapper of ours around it: an\n * unassigned slot is `display: contents` and generates nothing, so a gauge\n * with no sub-label lays out nothing extra. A wrapper would still be a flex\n * item costing the `--space-1` gap, and could not be collapsed from CSS —\n * `:has()` cannot ask whether a slot has assigned content, because assigned\n * nodes are not the slot's children.\n */\n::slotted([slot='sub']) {\n  color: var(--pf-gauge-sub-label-color);\n  font-size: var(--font-size-sm);\n  line-height: 1;\n}\n","import { clampProgressPercent, getProgressCircleGeometry } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single value drawn as a filled arc, with a label in the middle.\n *\n * The geometry is `getProgressCircleGeometry`, which `pf-progress-circle` and\n * the React `ProgressCircle` already share: the dash offset only lands on the\n * right angle if it and the circumference came from the same radius, and the\n * radius has to be inset by half the stroke or half of it paints outside the\n * viewBox.\n *\n * It names itself with `label` where the React `GaugeChart` puts the\n * percentage in `aria-label`. A meter's name should say what is being\n * measured; the value belongs in `aria-valuetext`, which is where a reader\n * looks for it, and announcing \"73%\" as the name of a thing leaves a reader\n * with no idea what is 73% full.\n *\n * @slot center - replaces the percentage in the middle.\n * @slot sub - a second line under it.\n * @part svg - the arc's canvas.\n * @part track - the unfilled ring.\n * @part fill - the filled arc.\n * @part center - the box in the middle.\n * @part label - the big number.\n */\n@Component({\n  tag: 'pf-gauge-chart',\n  styleUrl: 'pf-gauge-chart.css',\n  shadow: true,\n})\nexport class PfGaugeChart {\n  @Prop() value = 0;\n\n  @Prop() max = 100;\n\n  /** Diameter, in pixels. */\n  @Prop() size = 200;\n\n  /** The arc's thickness, in pixels. */\n  @Prop() strokeWidth = 16;\n\n  /** Overrides the token colour. */\n  @Prop() color?: string;\n\n  /** What is being measured. The meter's accessible name. */\n  @Prop() label = 'Gauge';\n\n  render() {\n    const size = Number(this.size) || 200;\n    const strokeWidth = Number(this.strokeWidth) || 16;\n    const percent = Math.round(clampProgressPercent(Number(this.value), Number(this.max)));\n    const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(\n      size,\n      strokeWidth,\n      percent,\n    );\n    const stroke = this.color ?? 'var(--pf-gauge-color)';\n\n    return (\n      <Host\n        role=\"meter\"\n        aria-label={this.label}\n        aria-valuenow={String(this.value)}\n        aria-valuemin=\"0\"\n        aria-valuemax={String(this.max)}\n        aria-valuetext={`${percent}%`}\n        style={{ width: `${size}px`, height: `${size}px` }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          width={size}\n          height={size}\n          viewBox={`0 0 ${size} ${size}`}\n          aria-hidden=\"true\"\n        >\n          <circle\n            class=\"track\"\n            part=\"track\"\n            cx={center}\n            cy={center}\n            r={radius}\n            fill=\"none\"\n            stroke-width={strokeWidth}\n          />\n          {/* Rotated so the arc starts at twelve o'clock rather than at three. */}\n          <circle\n            class=\"fill\"\n            part=\"fill\"\n            cx={center}\n            cy={center}\n            r={radius}\n            fill=\"none\"\n            stroke={stroke}\n            stroke-width={strokeWidth}\n            stroke-linecap=\"round\"\n            stroke-dasharray={circumference}\n            style={{\n              transform: 'rotate(-90deg)',\n              transformOrigin: `${center}px ${center}px`,\n              '--pf-gauge-circumference': String(circumference),\n              '--pf-gauge-offset': String(dashOffset),\n            }}\n          />\n        </svg>\n\n        <div class=\"center\" part=\"center\" aria-hidden=\"true\">\n          <span class=\"label\" part=\"label\">\n            <slot name=\"center\">{percent}%</slot>\n          </span>\n          {/*\n            No wrapper around this slot. An *unassigned* slot is\n            `display: contents` and generates nothing, so nothing is laid out\n            when there is no sub-label — where a wrapper would still be a flex\n            item and still cost the `--space-1` gap above it, and could not be\n            collapsed from CSS: `:has()` on a slot's assigned content is not\n            expressible, because assigned nodes are not the slot's children.\n          */}\n          <slot name=\"sub\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,IAAM,2+B,MC+BjBC,EAAY,M,yBACfC,MAAQ,EAERC,IAAM,IAGNC,KAAO,IAGPC,YAAc,GAGdC,MAGAC,MAAQ,QAEhB,MAAAC,GACE,MAAMJ,EAAOK,OAAOC,KAAKN,OAAS,IAClC,MAAMC,EAAcI,OAAOC,KAAKL,cAAgB,GAChD,MAAMM,EAAUC,KAAKC,MAAMC,EAAqBL,OAAOC,KAAKR,OAAQO,OAAOC,KAAKP,OAChF,MAAMY,OAAEA,EAAMC,cAAEA,EAAaC,WAAEA,EAAUC,OAAEA,GAAWC,EACpDf,EACAC,EACAM,GAEF,MAAMS,EAASV,KAAKJ,OAAS,wBAE7B,OACEe,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,QAAO,aACAd,KAAKH,MAAK,gBACPkB,OAAOf,KAAKR,OAAM,gBACnB,IAAG,gBACFuB,OAAOf,KAAKP,KAAI,iBACf,GAAGQ,KACnBe,MAAO,CAAEC,MAAO,GAAGvB,MAAUwB,OAAQ,GAAGxB,QAExCiB,EAAA,OAAAE,IAAA,2CACEM,MAAM,MACNC,KAAK,MACLH,MAAOvB,EACPwB,OAAQxB,EACR2B,QAAS,OAAO3B,KAAQA,IAAM,cAClB,QAEZiB,EAAA,UAAAE,IAAA,2CACEM,MAAM,QACNC,KAAK,QACLE,GAAId,EACJe,GAAIf,EACJgB,EAAGnB,EACHoB,KAAK,OAAM,eACG9B,IAGhBgB,EAAA,UAAAE,IAAA,2CACEM,MAAM,OACNC,KAAK,OACLE,GAAId,EACJe,GAAIf,EACJgB,EAAGnB,EACHoB,KAAK,OACLf,OAAQA,EAAM,eACAf,EAAW,iBACV,QAAO,mBACJW,EAClBU,MAAO,CACLU,UAAW,iBACXC,gBAAiB,GAAGnB,OAAYA,MAChC,2BAA4BO,OAAOT,GACnC,oBAAqBS,OAAOR,OAKlCI,EAAA,OAAAE,IAAA,2CAAKM,MAAM,SAASC,KAAK,SAAQ,cAAa,QAC5CT,EAAA,QAAAE,IAAA,2CAAMM,MAAM,QAAQC,KAAK,SACvBT,EAAA,QAAAE,IAAA,2CAAMe,KAAK,UAAU3B,EAAO,MAU9BU,EAAA,QAAAE,IAAA,2CAAMe,KAAK,S","ignoreList":[]}

package/dist/pitchfork/p-ab6c09e7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as i,H as r}from"./p-Bm6UxEit.js";import{o as s,p as n}from"./p-CC7AyfOt.js";import{c as o}from"./p-DfpCerXM.js";import{p as l}from"./p-C9jNMqLs.js";import{K as d}from"./p-g4FlTDZx.js";import{a as p}from"./p-Cr6IXrUk.js";import{c}from"./p-Cy_kHPeC.js";const h=()=>`:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-field-label-text, var(--pf-input-label-text));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-input-invalid-border);margin-inline-start:var(--space-1)}.row{align-items:center;display:flex;gap:var(--space-2)}.trigger{align-items:center;background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);cursor:pointer;display:flex;flex:1;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;min-width:0;padding:var(--space-2) var(--space-3);text-align:start}.trigger:hover:not(:disabled){border-color:var(--pf-input-border-hover)}.trigger:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-input-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-input-placeholder-text)}.clear{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-input-text-muted, var(--pf-input-placeholder-text));cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;padding:var(--space-1)}.clear:hover:not(:disabled){color:var(--pf-input-text)}.clear:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.description{color:var(--pf-input-description-text);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-input-invalid-border);font-size:var(--font-size-xs);margin:0}.panel{inset:auto;margin:0;background:none;border:0;overflow:visible;padding:0}.panel:popover-open{animation:pf-date-picker-in var(--pf-transition-enter)}@keyframes pf-date-picker-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.panel:popover-open{animation:none}}`;const f=class{constructor(a){e(this,a);this.pfChange=t(this,"pfChange");this.pfOpenChange=t(this,"pfOpenChange");if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}}get el(){return a(this)}internals;name;value="";open=false;label;description;error;placeholder="Select a date";required=false;disabled=false;allowClear=false;min;max;startYear;endYear;showOutsideDays=true;isDateDisabled;pfChange;pfOpenChange;initialValue="";stopObserving;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState()}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 panel(){return this.el.shadowRoot?.querySelector('[part="panel"]')??null}get trigger(){return this.el.shadowRoot?.querySelector('[part="trigger"]')??null}get calendar(){return this.el.shadowRoot?.querySelector("pf-calendar")??null}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:a})=>n(e,t,a)});void this.calendar?.focusSelectedDay()}hidePanel(){this.stopObserving?.();this.stopObserving=undefined;const e=this.panel;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t)this.trigger?.focus()};bindCalendar=e=>{if(!e||e===this.boundCalendar)return;this.boundCalendar=e;e.addEventListener("pfChange",this.onCalendarChange)};boundCalendar;onCalendarChange=e=>{e.stopPropagation();this.value=e.detail.value;this.pfChange.emit({value:this.value});this.open=false;this.trigger?.focus()};clear=e=>{e.stopPropagation();if(!this.value)return;this.value="";this.pfChange.emit({value:""})};onTriggerKeyDown=e=>{if(this.open||this.disabled)return;if(e.key===d.ArrowDown||e.key===d.Enter||e.key===d.Space){if(e.key===d.ArrowDown){e.preventDefault();this.open=true}}};formatted(){const e=l(this.value);if(!e)return"";return new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric"}).format(e)}render(){const e=o(this.description&&"description",this.error&&"error");const t=this.formatted();return i(r,{key:"e12dc3b1467bfa1b6b47ad6ecde5ff3740f84191"},i("div",{key:"da81455cc8034d76ee9a5632bf3d7bba8a59ca36",class:"field",part:"field"},this.label&&i("label",{key:"7d5e93bbb12ebaec62e541e1e7ff7051ffd1d9ba",class:"label",part:"label",htmlFor:"trigger"},this.label,this.required&&i("span",{key:"96da5bb4885737801b0934459809761016eff84b",class:"required","aria-hidden":"true"},"*")),i("div",{key:"7d4bb358df9ec3477847a7456aea8aaede3c6bd1",class:"row"},i("button",{key:"6f0c8095438a87284f339c58cf2bd37ac6d6e8c3",id:"trigger","aria-label":c(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},onKeyDown:this.onTriggerKeyDown},i("span",{key:"7d163538c024cb22bf62556ac45fe2c6412df31b",class:{value:true,"value--placeholder":!t}},t||this.placeholder),i("pf-icon",{key:"0453fc920b7ae38e155a09e355b7a3d574604d14",name:"calendar"})),this.allowClear&&this.value&&i("button",{key:"2e933393553ad120ee949673477b7106e94915cb",class:"clear",part:"clear",type:"button","aria-label":"Clear selected date",disabled:this.disabled,onClick:this.clear},i("pf-icon",{key:"dc784a97f467297a6cb0cb691c52006fa1e32c24",name:"circle-xmark"}))),this.description&&i("p",{key:"087d6e84fc1a653b8e5b92a2bf4c8148f4d16f39",class:"description",part:"description",id:"description"},this.description),this.error&&i("p",{key:"292095f16e9328828a7f821b42d47827ce0d5335",class:"error",part:"error",id:"error"},this.error)),i("div",{key:"a3f5435249a41d602f160e195a8a551d7f40e23a",id:"panel",part:"panel",class:"panel",popover:"auto",role:"dialog","aria-label":"Choose a date",onToggle:this.onToggle},i("pf-calendar",{key:"8db356ae8180b9eaae81df8c560a0f8db68664f8",ref:this.bindCalendar,part:"calendar",value:this.value||undefined,min:this.min,max:this.max,startYear:this.startYear,endYear:this.endYear,showOutsideDays:this.showOutsideDays,isDateDisabled:this.isDateDisabled})))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}};f.style=h();export{f as pf_date_picker};
+//# sourceMappingURL=p-ab6c09e7.entry.js.map

package/dist/pitchfork/p-ab6c09e7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfDatePickerCss","PfDatePicker","internals","name","value","open","label","description","error","placeholder","required","disabled","allowClear","min","max","startYear","endYear","showOutsideDays","isDateDisabled","pfChange","pfOpenChange","initialValue","stopObserving","componentWillLoad","this","syncFormState","disconnectedCallback","setFormValue","applyControlValidity","Boolean","syncOpen","next","previous","showPanel","hidePanel","emit","show","hide","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","panel","el","shadowRoot","querySelector","trigger","calendar","matches","showPopover","observeAnchoredPosition","getAnchor","getFloating","align","matchAnchorWidth","flip","onChange","left","top","placePopover","focusSelectedDay","undefined","hidePopover","onToggle","event","nowOpen","newState","focus","bindCalendar","element","boundCalendar","addEventListener","onCalendarChange","stopPropagation","detail","clear","onTriggerKeyDown","key","Keys","ArrowDown","Enter","Space","preventDefault","formatted","date","parseISODate","Intl","DateTimeFormat","month","day","year","format","render","describedBy","composeDescribedBy","text","h","Host","class","part","htmlFor","id","controlAriaLabel","type","onClick","onKeyDown","popover","role","ref"],"sources":["src/components/pf-date-picker/pf-date-picker.css?tag=pf-date-picker&encapsulation=shadow","src/components/pf-date-picker/pf-date-picker.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-field-label-text, var(--pf-input-label-text));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-input-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.row {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-text);\n  cursor: pointer;\n  display: flex;\n  flex: 1;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  min-width: 0;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n}\n\n.trigger:hover:not(:disabled) {\n  border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\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-input-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-input-placeholder-text);\n}\n\n.clear {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-input-text-muted, var(--pf-input-placeholder-text));\n  cursor: pointer;\n  display: inline-flex;\n  flex-shrink: 0;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.clear:hover:not(:disabled) {\n  color: var(--pf-input-text);\n}\n\n.clear:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.description {\n  color: var(--pf-input-description-text);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-input-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 * Declared here and set inline, because no test project applies this file.\n */\n.panel {\n  inset: auto;\n  margin: 0;\n  background: none;\n  border: 0;\n  overflow: visible;\n  padding: 0;\n}\n\n.panel:popover-open {\n  animation: pf-date-picker-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-date-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","import {\n  composeDescribedBy,\n  Keys,\n  observeAnchoredPosition,\n  parseISODate,\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 date field: a trigger that opens `pf-calendar` in a\n * popover.\n *\n * Form-associated, which the React `DatePicker` is not — it is a button and a\n * portal, so its value reaches a surrounding `<form>` only if the consumer\n * wires it there themselves. Here the value is submitted as `YYYY-MM-DD`,\n * constraint validation works, and Angular's generated accessor has something\n * to bind to.\n *\n * The panel is a `popover`, so light dismiss and Escape are the browser's.\n * Unlike `pf-dropdown`, the trigger and the panel are both in *this* shadow\n * root, so `aria-controls` resolves and is worth setting — a same-root IDREF\n * is the one case that works, measured.\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 calendar.\n * @part clear - the clear button.\n * @part panel - the floating panel holding the calendar.\n * @part calendar - the calendar itself.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-date-picker',\n  styleUrl: 'pf-date-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfDatePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because the submission name comes\n   * from the content attribute and the generated bindings set properties.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The selected date as `YYYY-MM-DD`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the calendar is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Visible label. In the same root as the trigger, 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 = 'Select a date';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Offer a button that empties the field. */\n  @Prop() allowClear = false;\n\n  /** Earliest selectable date, as `YYYY-MM-DD`. */\n  @Prop() min?: string;\n\n  /** Latest selectable date, as `YYYY-MM-DD`. */\n  @Prop() max?: string;\n\n  @Prop() startYear?: number;\n\n  @Prop() endYear?: number;\n\n  @Prop() showOutsideDays = true;\n\n  /** A predicate for days that cannot be chosen; see `pf-calendar`. */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires when a date is chosen or cleared. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the calendar opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** What a form reset restores; `value` has been overwritten by then. */\n  private initialValue = '';\n\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\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  /** The one place an open or close is announced, whatever caused it. */\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  /** Opens the calendar. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the calendar. */\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  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 calendar() {\n    return (\n      this.el.shadowRoot?.querySelector<HTMLElement & { focusSelectedDay(): Promise<void> }>(\n        'pf-calendar',\n      ) ?? null\n    );\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    // Focus the grid, not the panel: the calendar owns its own tab stop, and\n    // it asks for focus through a method rather than having it reached for.\n    void this.calendar?.focusSelectedDay();\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   * Mirrors a browser-driven close — a light dismiss or Escape — back into\n   * `open`, which is what then announces it.\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  /**\n   * Listens on the calendar element itself, not on the host.\n   *\n   * Both were tried. A `@Listen('pfChange')` on the host sees the calendar's\n   * event *and* this element's own — a Stencil event is composed, so by then\n   * both have been retargeted to the host and `event.target` cannot tell them\n   * apart. Worse, `stopPropagation()` there does not help: the consumer's\n   * listener is on that same node, and stopping propagation never stops\n   * same-node listeners, so every pick reported twice. Caught by a test that\n   * counted them.\n   *\n   * On the calendar, the event is stopped before it reaches the host at all,\n   * which does not depend on listener registration order the way\n   * `stopImmediatePropagation` would.\n   */\n  private bindCalendar = (element?: HTMLElement) => {\n    if (!element || element === this.boundCalendar) return;\n    this.boundCalendar = element;\n    element.addEventListener('pfChange', this.onCalendarChange as EventListener);\n  };\n\n  private boundCalendar?: HTMLElement;\n\n  private onCalendarChange = (event: CustomEvent<{ value: string }>) => {\n    event.stopPropagation();\n\n    this.value = event.detail.value;\n    this.pfChange.emit({ value: this.value });\n    this.open = false;\n    this.trigger?.focus();\n  };\n\n  private clear = (event: MouseEvent) => {\n    event.stopPropagation();\n    if (!this.value) return;\n    this.value = '';\n    this.pfChange.emit({ value: '' });\n  };\n\n  /**\n   * Down opens the calendar from a closed trigger, as a popup button should.\n   * Escape is the browser's while the panel is open — `popover=\"auto\"` handles\n   * it — so there is nothing to do here for it.\n   */\n  private onTriggerKeyDown = (event: KeyboardEvent) => {\n    if (this.open || this.disabled) return;\n    if (event.key === Keys.ArrowDown || event.key === Keys.Enter || event.key === Keys.Space) {\n      if (event.key === Keys.ArrowDown) {\n        event.preventDefault();\n        this.open = true;\n      }\n    }\n  };\n\n  /** `MMM D, YYYY`, matching the React component's trigger text. */\n  private formatted(): string {\n    const date = parseISODate(this.value);\n    if (!date) return '';\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    }).format(date);\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const text = this.formatted();\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          <div class=\"row\">\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              onKeyDown={this.onTriggerKeyDown}\n            >\n              <span class={{ value: true, 'value--placeholder': !text }}>\n                {text || this.placeholder}\n              </span>\n              <pf-icon name=\"calendar\"></pf-icon>\n            </button>\n\n            {this.allowClear && this.value && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label=\"Clear selected date\"\n                disabled={this.disabled}\n                onClick={this.clear}\n              >\n                <pf-icon name=\"circle-xmark\"></pf-icon>\n              </button>\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\n        <div\n          id=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a date\"\n          onToggle={this.onToggle}\n        >\n          <pf-calendar\n            ref={this.bindCalendar}\n            part=\"calendar\"\n            value={this.value || undefined}\n            min={this.min}\n            max={this.max}\n            startYear={this.startYear}\n            endYear={this.endYear}\n            showOutsideDays={this.showOutsideDays}\n            isDateDisabled={this.isDateDisabled}\n          ></pf-calendar>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-ac3fcb57.entry.js

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

package/dist/pitchfork/p-ac3fcb57.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfTabCss","PfTab","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":"+FAAA,MAAMA,EAAW,IAAM,grC,MC8BVC,EAAK,M,wFAWSC,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/pitchfork/p-ad93b614.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i}from"./p-Bm6UxEit.js";import{a as s}from"./p-B8ulhYUJ.js";const o=()=>`:host{display:inline-flex}:host([hidden]){display:none}kbd{align-items:center;background:var(--pf-kbd-bg);border:1px solid var(--pf-kbd-border);border-bottom-width:2px;border-radius:var(--radius-sm);color:var(--pf-kbd-text);display:inline-flex;font-family:var(--font-family-mono, ui-monospace, monospace);font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap}:host([size='md']) kbd{font-size:var(--font-size-xs);min-width:1.5em;padding:3px 6px}:host([size='sm']) kbd{font-size:var(--font-size-2xs);min-width:1.35em;padding:2px 5px}`;const t=class{constructor(i){e(this,i)}keys;size="md";separator="+";render(){const e=this.keys?.length?s(this.keys,this.separator):null;return i("kbd",{key:"dc9375fb271fa1b60e81c39ec69effd38c7e5723",part:"kbd"},e??i("slot",{key:"280a222509ba677e5ce6ad2afe99306a5a2bda09"}))}};t.style=o();export{t as pf_kbd};
+//# sourceMappingURL=p-ad93b614.entry.js.map

package/dist/pitchfork/p-ad93b614.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfKbdCss","PfKbd","keys","size","separator","render","combination","this","length","formatKeyCombination","h","key","part"],"sources":["src/components/pf-kbd/pf-kbd.css?tag=pf-kbd&encapsulation=shadow","src/components/pf-kbd/pf-kbd.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nkbd {\n  align-items: center;\n  background: var(--pf-kbd-bg);\n  border: 1px solid var(--pf-kbd-border);\n  border-bottom-width: 2px;\n  border-radius: var(--radius-sm);\n  color: var(--pf-kbd-text);\n  display: inline-flex;\n  font-family: var(--font-family-mono, ui-monospace, monospace);\n  font-weight: var(--font-weight-medium);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n:host([size='md']) kbd {\n  font-size: var(--font-size-xs);\n  min-width: 1.5em;\n  padding: 3px 6px;\n}\n\n:host([size='sm']) kbd {\n  font-size: var(--font-size-2xs);\n  min-width: 1.35em;\n  padding: 2px 5px;\n}\n","import { formatKeyCombination } from '@pitchfork-ui/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nexport type PfKbdSize = 'sm' | 'md';\n\n/**\n * A keyboard key or a combination of them, as `<kbd>` elements.\n *\n * `keys` renders one cap per entry with separators between; a single key can\n * be slotted instead.\n *\n * @slot - a single key, when `keys` is not given.\n * @part kbd - the native kbd element.\n */\n@Component({\n  tag: 'pf-kbd',\n  styleUrl: 'pf-kbd.css',\n  shadow: true,\n})\nexport class PfKbd {\n  /** A key combination rendered as one cap, e.g. `[\"⌘\", \"K\"]`. */\n  @Prop() keys?: string[];\n\n  @Prop({ reflect: true }) size: PfKbdSize = 'md';\n\n  /** Separator between keys in a combination. Defaults to `+`. */\n  @Prop() separator = '+';\n\n  render() {\n    const combination = this.keys?.length ? formatKeyCombination(this.keys, this.separator) : null;\n\n    return <kbd part=\"kbd\">{combination ?? <slot />}</kbd>;\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAW,IAAM,uiB,MCmBVC,EAAK,M,yBAERC,KAEiBC,KAAkB,KAGnCC,UAAY,IAEpB,MAAAC,GACE,MAAMC,EAAcC,KAAKL,MAAMM,OAASC,EAAqBF,KAAKL,KAAMK,KAAKH,WAAa,KAE1F,OAAOM,EAAA,OAAAC,IAAA,2CAAKC,KAAK,OAAON,GAAeI,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/pitchfork/p-ae5fd08e.entry.js

@@ -0,0 +1,2 @@
+import{r as a,c as t,h as e,H as i}from"./p-Bm6UxEit.js";function n(a,t){if(!(t>0))return 1;return Math.min(Math.max(a,1),t)}function s(a,t,e,i){const s=Math.max(t,1);const o=n(a,s);const r=Math.max(e,0);const p=Math.max(i,0);const c=new Set;const l=a=>{if(a>=1&&a<=s)c.add(a)};for(let a=1;a<=Math.min(p,s);a+=1)l(a);for(let a=s-p+1;a<=s;a+=1)l(a);for(let a=o-r;a<=o+r;a+=1)l(a);const d=[...c].sort(((a,t)=>a-t));for(let a=0;a<d.length-1;a+=1)if(d[a+1]-d[a]===2)l(d[a]+1);if(d[0]===2)l(1);if(d[d.length-1]===s-1)l(s);const f=[...c].sort(((a,t)=>a-t));const g=[];const h=a=>a<=o?"ellipsis-left":"ellipsis-right";if(f.length>0&&f[0]>1)g.push(h(f[0]));for(let a=0;a<f.length;a+=1){g.push(f[a]);const t=f[a+1];if(t!==void 0&&t-f[a]>1)g.push(h(t))}if(f.length>0&&f[f.length-1]<s)g.push("ellipsis-right");return g.length>0?g:[1]}const o=()=>`:host{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}:host([hidden]){display:none}@media (min-width: 640px){:host{gap:var(--space-3)}}:host([disabled]){opacity:0.65}.list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;list-style:none;margin:0;padding:0}.page,.nav{align-items:center;background:var(--pf-pagination-bg);border:1px solid var(--pf-pagination-border);border-radius:var(--radius-md);color:var(--pf-pagination-text);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);justify-content:center;line-height:1;transition:box-shadow 140ms ease}.page{height:var(--pf-pagination-page-size);min-width:var(--pf-pagination-page-size);padding:0 var(--space-2);transition:none}.nav{height:var(--pf-control-height-sm);min-width:var(--pf-control-height-sm);padding:0 var(--space-2)}@media (min-width: 640px){.nav{padding:0 var(--space-3)}}.page:hover,.nav:hover{border-color:var(--pf-pagination-active-border)}.page:focus-visible,.nav:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.page--active{background:var(--pf-pagination-active-bg);border-color:var(--pf-pagination-active-border);color:var(--pf-pagination-active-text)}.page--active:hover{background:var(--pf-pagination-active-hover-bg)}.page:disabled,.nav:disabled{cursor:not-allowed;opacity:0.5}.ellipsis{color:var(--pf-pagination-text-muted);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-width:20px}@media (prefers-reduced-motion: reduce){.page,.nav{transition:none}}`;const r=class{constructor(e){a(this,e);this.pfPageChange=t(this,"pfPageChange")}page=1;totalPages=1;siblingCount=1;boundaryCount=1;showPrevNext=true;disabled=false;label="Pagination";pfPageChange;goTo(a){if(this.disabled)return;const t=n(a,Math.max(this.totalPages,1));if(t===this.page)return;this.page=t;this.pfPageChange.emit({page:t})}render(){const a=Math.max(this.totalPages,1);const t=n(this.page,a);const o=s(t,a,this.siblingCount,this.boundaryCount);return e(i,{key:"7ddd3d35eb175a4ccedbebdbd75dba3046c94a01",role:"navigation","aria-label":this.label},this.showPrevNext&&e("button",{key:"c6ca9616468f6880fe2122f6f528faa26e43393a",class:"nav",part:"nav previous",type:"button",disabled:this.disabled||t<=1,onClick:()=>this.goTo(t-1)},e("slot",{key:"af06d4de8bc34089517c2aad15b8b08c8822743c",name:"previous"},"Previous")),e("ol",{key:"f82b6a3700a50ea0dad8d4416940428955a06c8f",class:"list",part:"list"},o.map(((a,i)=>typeof a==="number"?e("li",{key:a},e("button",{class:{page:true,"page--active":a===t},part:a===t?"page current":"page",type:"button",disabled:this.disabled,"aria-current":a===t?"page":null,onClick:()=>this.goTo(a)},a)):e("li",{key:`${a}-${i}`,class:"ellipsis",part:"ellipsis","aria-hidden":"true"},"...")))),this.showPrevNext&&e("button",{key:"7d6f1907a2b8ffd6cf8bfab1bc77f044d784bb94",class:"nav",part:"nav next",type:"button",disabled:this.disabled||t>=a,onClick:()=>this.goTo(t+1)},e("slot",{key:"5886d2d27c67b79f399e1bac4359a2cf3876c6c2",name:"next"},"Next")))}};r.style=o();export{r as pf_pagination};
+//# sourceMappingURL=p-ae5fd08e.entry.js.map

package/dist/pitchfork/p-ae5fd08e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampPage","page","totalPages","Math","min","max","getPaginationItems","currentPage","siblingCount","boundaryCount","safeTotal","safeCurrent","safeSiblingCount","safeBoundaryCount","shown","Set","add","pages","sort","a","b","index","length","finalPages","items","gapFor","nextPage","push","next","pfPaginationCss","PfPagination","showPrevNext","disabled","label","pfPageChange","goTo","this","clamped","emit","render","total","current","h","Host","key","role","class","part","type","onClick","name","map","item"],"sources":["../core/dist/pagination.js","src/components/pf-pagination/pf-pagination.css?tag=pf-pagination&encapsulation=shadow","src/components/pf-pagination/pf-pagination.tsx"],"sourcesContent":["//#region src/pagination.ts\n/**\n* Keep `page` inside 1..totalPages. A total of zero or less has no page to\n* land on, so it reports page 1 — a pager always shows something.\n*/\nfunction clampPage(page, totalPages) {\n\tif (!(totalPages > 0)) return 1;\n\treturn Math.min(Math.max(page, 1), totalPages);\n}\n/**\n* The run of items to render: `boundaryCount` pages pinned at each end,\n* `siblingCount` pages either side of the current one, and an ellipsis\n* wherever that leaves pages genuinely hidden.\n*\n* Built by collecting the pages to show and then walking them, rather than by\n* placing gaps from the window's indexes. The index version got two cases\n* wrong, both of which this shape cannot express:\n*\n* - **A gap standing for nothing.** At 1 of 6 with `boundaryCount: 3` the two\n*   boundaries meet in the middle, and it still emitted `1 2 3 … 4 5 6` — an\n*   ellipsis between two consecutive pages, because it compared the window\n*   against the boundary edges rather than asking which pages were actually\n*   missing.\n* - **A gap hiding exactly one page.** An ellipsis costs the same room as the\n*   page it stands for and says less, so `1 … 3 4 5 … 7` is strictly worse\n*   than `1 2 3 4 5 6 7`. A single-page hole is filled instead.\n*\n* The `[1]` fallback at the end is insurance, not a path: the window always\n* contains the clamped current page, so `shown` is never empty. It stays\n* because a pager with no buttons would read as broken.\n*/\nfunction getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {\n\tconst safeTotal = Math.max(totalPages, 1);\n\tconst safeCurrent = clampPage(currentPage, safeTotal);\n\tconst safeSiblingCount = Math.max(siblingCount, 0);\n\tconst safeBoundaryCount = Math.max(boundaryCount, 0);\n\tconst shown = /* @__PURE__ */ new Set();\n\tconst add = (page) => {\n\t\tif (page >= 1 && page <= safeTotal) shown.add(page);\n\t};\n\tfor (let page = 1; page <= Math.min(safeBoundaryCount, safeTotal); page += 1) add(page);\n\tfor (let page = safeTotal - safeBoundaryCount + 1; page <= safeTotal; page += 1) add(page);\n\tfor (let page = safeCurrent - safeSiblingCount; page <= safeCurrent + safeSiblingCount; page += 1) add(page);\n\tconst pages = [...shown].sort((a, b) => a - b);\n\tfor (let index = 0; index < pages.length - 1; index += 1) if (pages[index + 1] - pages[index] === 2) add(pages[index] + 1);\n\tif (pages[0] === 2) add(1);\n\tif (pages[pages.length - 1] === safeTotal - 1) add(safeTotal);\n\tconst finalPages = [...shown].sort((a, b) => a - b);\n\tconst items = [];\n\tconst gapFor = (nextPage) => nextPage <= safeCurrent ? \"ellipsis-left\" : \"ellipsis-right\";\n\tif (finalPages.length > 0 && finalPages[0] > 1) items.push(gapFor(finalPages[0]));\n\tfor (let index = 0; index < finalPages.length; index += 1) {\n\t\titems.push(finalPages[index]);\n\t\tconst next = finalPages[index + 1];\n\t\tif (next !== void 0 && next - finalPages[index] > 1) items.push(gapFor(next));\n\t}\n\tif (finalPages.length > 0 && finalPages[finalPages.length - 1] < safeTotal) items.push(\"ellipsis-right\");\n\treturn items.length > 0 ? items : [1];\n}\n//#endregion\nexport { clampPage, getPaginationItems };\n",":host {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    gap: var(--space-3);\n  }\n}\n\n:host([disabled]) {\n  opacity: 0.65;\n}\n\n.list {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  justify-content: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.page,\n.nav {\n  align-items: center;\n  background: var(--pf-pagination-bg);\n  border: 1px solid var(--pf-pagination-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-pagination-text);\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  justify-content: center;\n  line-height: 1;\n  transition: box-shadow 140ms ease;\n}\n\n.page {\n  height: var(--pf-pagination-page-size);\n  min-width: var(--pf-pagination-page-size);\n  padding: 0 var(--space-2);\n  transition: none;\n}\n\n.nav {\n  height: var(--pf-control-height-sm);\n  min-width: var(--pf-control-height-sm);\n  padding: 0 var(--space-2);\n}\n\n@media (--sm) {\n  .nav {\n    padding: 0 var(--space-3);\n  }\n}\n\n.page:hover,\n.nav:hover {\n  border-color: var(--pf-pagination-active-border);\n}\n\n.page:focus-visible,\n.nav:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.page--active {\n  background: var(--pf-pagination-active-bg);\n  border-color: var(--pf-pagination-active-border);\n  color: var(--pf-pagination-active-text);\n}\n\n.page--active:hover {\n  background: var(--pf-pagination-active-hover-bg);\n}\n\n.page:disabled,\n.nav:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.ellipsis {\n  color: var(--pf-pagination-text-muted);\n  display: inline-flex;\n  font-size: var(--font-size-sm);\n  justify-content: center;\n  min-width: 20px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .page,\n  .nav {\n    transition: none;\n  }\n}\n","import { clampPage, getPaginationItems } from '@pitchfork-ui/core';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * A pager: boundary pages pinned at each end, a window around the current\n * page, and an ellipsis wherever that leaves a gap.\n *\n * Controlled or not, like `pf-input`: `page` is mutable, so leaving it alone\n * lets the element advance itself, and setting it on every `pfPageChange`\n * keeps the consumer in charge.\n *\n * @slot previous - the previous button's label. Defaults to \"Previous\".\n * @slot next - the next button's label. Defaults to \"Next\".\n * @part nav - either of the previous/next buttons.\n * @part previous - the previous button.\n * @part next - the next button.\n * @part list - the ordered list of pages.\n * @part page - each page button.\n * @part current - the page button for the current page.\n * @part ellipsis - each gap.\n */\n@Component({\n  tag: 'pf-pagination',\n  styleUrl: 'pf-pagination.css',\n  shadow: true,\n})\nexport class PfPagination {\n  /** The current page, 1-based. Mutable so the element can advance itself. */\n  @Prop({ mutable: true }) page = 1;\n\n  /** How many pages there are in total. */\n  @Prop() totalPages = 1;\n\n  /** Pages to show either side of the current one. */\n  @Prop() siblingCount = 1;\n\n  /** Pages to pin at each end. */\n  @Prop() boundaryCount = 1;\n\n  /** Show the previous/next buttons. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) showPrevNext = true;\n\n  /** Disable every button. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the navigation landmark. */\n  @Prop() label = 'Pagination';\n\n  /** Emitted with the page the user asked for, already clamped to the range. */\n  @Event() pfPageChange!: EventEmitter<{ page: number }>;\n\n  private goTo(next: number) {\n    if (this.disabled) return;\n\n    const clamped = clampPage(next, Math.max(this.totalPages, 1));\n    if (clamped === this.page) return;\n\n    this.page = clamped;\n    this.pfPageChange.emit({ page: clamped });\n  }\n\n  render() {\n    const total = Math.max(this.totalPages, 1);\n    // Both layers go through core, so the same inputs offer the same pages.\n    const current = clampPage(this.page, total);\n    const items = getPaginationItems(current, total, this.siblingCount, this.boundaryCount);\n\n    return (\n      <Host role=\"navigation\" aria-label={this.label}>\n        {this.showPrevNext && (\n          <button\n            class=\"nav\"\n            part=\"nav previous\"\n            type=\"button\"\n            disabled={this.disabled || current <= 1}\n            onClick={() => this.goTo(current - 1)}\n          >\n            {/*\n              Slot fallback is the web-component answer to React's\n              `prevLabel = 'Previous'` default: the consumer overrides it by\n              slotting something, and gets the text if they do not.\n            */}\n            <slot name=\"previous\">Previous</slot>\n          </button>\n        )}\n\n        <ol class=\"list\" part=\"list\">\n          {items.map((item, index) =>\n            typeof item === 'number' ? (\n              <li key={item}>\n                <button\n                  class={{ page: true, 'page--active': item === current }}\n                  part={item === current ? 'page current' : 'page'}\n                  type=\"button\"\n                  disabled={this.disabled}\n                  aria-current={item === current ? 'page' : null}\n                  onClick={() => this.goTo(item)}\n                >\n                  {item}\n                </button>\n              </li>\n            ) : (\n              // The gap is decorative: a screen reader walking the list gets\n              // the page numbers, and \"...\" would only interrupt them.\n              <li key={`${item}-${index}`} class=\"ellipsis\" part=\"ellipsis\" aria-hidden=\"true\">\n                ...\n              </li>\n            ),\n          )}\n        </ol>\n\n        {this.showPrevNext && (\n          <button\n            class=\"nav\"\n            part=\"nav next\"\n            type=\"button\"\n            disabled={this.disabled || current >= total}\n            onClick={() => this.goTo(current + 1)}\n          >\n            <slot name=\"next\">Next</slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-b26df5a0.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as e,a as n,h as t,H as a}from"./p-Bm6UxEit.js";const o=()=>`:host{align-items:flex-start;background:var(--pf-inline-cta-bg);border:1px solid var(--pf-inline-cta-border);border-radius:var(--radius-md);display:grid;gap:var(--space-3);grid-template-columns:auto 1fr;padding:var(--space-3);position:relative}:host([hidden]){display:none}:host([dismissible]){padding-inline-end:var(--space-12)}@media (min-width: 768px){:host{align-items:center;grid-template-columns:auto 1fr auto}}.action.empty{display:none}.icon{align-items:center;color:var(--pf-inline-cta-text-muted);display:inline-flex;font-size:var(--font-size-md);justify-content:center}.content{display:grid;gap:2px;min-width:0}.heading{color:var(--pf-inline-cta-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0}slot[name='description']::slotted(*){color:var(--pf-inline-cta-text-muted);display:block;font-size:var(--font-size-sm);margin:0}.action{align-items:center;display:inline-flex;gap:var(--space-2);grid-column:1 / -1;justify-content:flex-start}@media (min-width: 768px){.action{grid-column:auto;justify-content:initial}}.dismiss{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--pf-inline-cta-text-muted);cursor:pointer;display:inline-flex;height:28px;inset-inline-end:var(--space-3);justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:28px}.dismiss:hover,.dismiss:focus-visible{background:var(--pf-inline-cta-bg-subtle);color:var(--pf-inline-cta-text);outline:none}:host([exiting]){animation:pf-inline-cta-out var(--duration-moderate) var(--easing-accelerate) forwards;overflow:hidden;pointer-events:none}@keyframes pf-inline-cta-out{from{opacity:1;max-height:480px}to{margin-bottom:0;margin-top:0;max-height:0;opacity:0;padding-bottom:0;padding-top:0}}@media (prefers-reduced-motion: reduce){:host([exiting]){animation:none}}:host([tone='info']){background:color-mix(in srgb, var(--pf-inline-cta-info-bg) 70%, var(--pf-mix-base));border-color:var(--pf-inline-cta-info-border)}:host([tone='info']) .icon{color:var(--pf-inline-cta-info-icon)}:host([tone='info']) .heading{color:var(--pf-inline-cta-info-heading)}:host([tone='info']) slot[name='description']::slotted(*){color:var(--pf-inline-cta-info-description)}:host([tone='success']){background:color-mix(in srgb, var(--pf-inline-cta-success-bg) 55%, var(--pf-mix-base));border-color:var(--pf-inline-cta-success-border)}:host([tone='warning']){background:color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--pf-mix-base));border-color:var(--pf-inline-cta-warning-border)}:host([tone='danger']){background:color-mix(in srgb, var(--pf-inline-cta-danger-bg) 55%, var(--pf-mix-base));border-color:var(--pf-inline-cta-danger-border)}`;const s=class{constructor(n){i(this,n);this.pfDismiss=e(this,"pfDismiss")}get el(){return n(this)}tone="default";icon="circle-question";dismissible=false;dismissLabel="Dismiss";pfDismiss;exiting=false;hasIcon=false;hasAction=false;componentWillLoad(){this.read()}read=()=>{const i=i=>Array.from(this.el.children).some((e=>e.getAttribute("slot")===i));this.hasIcon=i("icon");this.hasAction=i("action")};async dismiss(){if(this.exiting)return;this.exiting=true;await new Promise((i=>requestAnimationFrame(i)));await this.waitForExit();this.pfDismiss.emit()}async waitForExit(){if(typeof this.el.getAnimations!=="function")return;const i=this.el.getAnimations().filter((i=>i.playState!=="finished"));if(i.length===0)return;await Promise.all(i.map((i=>i.finished.catch((()=>undefined)))))}render(){return t(a,{key:"6b8a8263476927209ca5c1c05f24e58a7dd777ec"},t("span",{key:"9cd6869009c50e63ee36c0c287f7aefe3c019ca5",class:"icon",part:"icon","aria-hidden":"true"},!this.hasIcon&&t("pf-icon",{key:"059bdd88a62913b71b1f3e1fa63b89ce2b574609",name:this.icon}),t("slot",{key:"d5993b4894092a586edce721e8016df0b9c4697c",name:"icon",onSlotchange:this.read})),t("div",{key:"1ef82a343a25cae1e912f4e01e8523c46930eeff",class:"content",part:"content"},t("p",{key:"e317f0f4205bfff48c40909bb6418dc3f5c97018",class:"heading",part:"heading"},t("slot",{key:"5f3a555de994165444e256fd1149a50ce941e7b2"})),t("slot",{key:"423e8b3c9cd45fd43c065f8bc11e7e0f2a5ff910",name:"description"})),t("div",{key:"6bdbddc484b7efe0262b5f4d263a235d3bcfc689",class:{action:true,empty:!this.hasAction},part:"action"},t("slot",{key:"0bb52dec765e6511209e2837c3c50d6aa63e0c63",name:"action",onSlotchange:this.read})),this.dismissible&&t("button",{key:"d8d54c43bc7a5641aba52637dcc641eadfd51c92",type:"button",class:"dismiss",part:"dismiss","aria-label":this.dismissLabel,onClick:()=>void this.dismiss()},t("pf-icon",{key:"4208ea0b4e6c99ed4025bdd2db2b1df2bcd8ef5c",name:"circle-xmark","aria-hidden":"true"})))}};s.style=o();export{s as pf_inline_cta};
+//# sourceMappingURL=p-b26df5a0.entry.js.map

package/dist/pitchfork/p-b26df5a0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfInlineCtaCss","PfInlineCta","tone","icon","dismissible","dismissLabel","pfDismiss","exiting","hasIcon","hasAction","componentWillLoad","this","read","slotted","name","Array","from","el","children","some","child","getAttribute","dismiss","Promise","resolve","requestAnimationFrame","waitForExit","emit","getAnimations","running","filter","animation","playState","length","all","map","finished","catch","undefined","render","h","Host","key","class","part","onSlotchange","action","empty","type","onClick"],"sources":["src/components/pf-inline-cta/pf-inline-cta.css?tag=pf-inline-cta&encapsulation=shadow","src/components/pf-inline-cta/pf-inline-cta.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  background: var(--pf-inline-cta-bg);\n  border: 1px solid var(--pf-inline-cta-border);\n  border-radius: var(--radius-md);\n  display: grid;\n  gap: var(--space-3);\n  grid-template-columns: auto 1fr;\n  padding: var(--space-3);\n  position: relative;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Room for the centred dismiss button, so the content does not crowd it. */\n:host([dismissible]) {\n  padding-inline-end: var(--space-12);\n}\n\n@media (--md) {\n  :host {\n    align-items: center;\n    grid-template-columns: auto 1fr auto;\n  }\n}\n\n/* Two classes deep, because the box sets its own `display` below. */\n.action.empty {\n  display: none;\n}\n\n.icon {\n  align-items: center;\n  color: var(--pf-inline-cta-text-muted);\n  display: inline-flex;\n  font-size: var(--font-size-md);\n  justify-content: center;\n}\n\n.content {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n}\n\n.heading {\n  color: var(--pf-inline-cta-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-inline-cta-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.action {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n  grid-column: 1 / -1;\n  justify-content: flex-start;\n}\n\n@media (--md) {\n  .action {\n    grid-column: auto;\n    justify-content: initial;\n  }\n}\n\n.dismiss {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-inline-cta-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  height: 28px;\n  inset-inline-end: var(--space-3);\n  justify-content: center;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n}\n\n.dismiss:hover,\n.dismiss:focus-visible {\n  background: var(--pf-inline-cta-bg-subtle);\n  color: var(--pf-inline-cta-text);\n  outline: none;\n}\n\n/*\n * The exit fades and collapses, so the page reflows as it goes. Each element\n * needs its own copy of the keyframes: they do not cross a shadow boundary.\n */\n:host([exiting]) {\n  animation: pf-inline-cta-out var(--duration-moderate) var(--easing-accelerate) forwards;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n@keyframes pf-inline-cta-out {\n  from {\n    opacity: 1;\n    max-height: 480px;\n  }\n  to {\n    margin-bottom: 0;\n    margin-top: 0;\n    max-height: 0;\n    opacity: 0;\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([exiting]) {\n    animation: none;\n  }\n}\n\n:host([tone='info']) {\n  background: color-mix(in srgb, var(--pf-inline-cta-info-bg) 70%, var(--pf-mix-base));\n  border-color: var(--pf-inline-cta-info-border);\n}\n\n/*\n * Only `info` tints its text in the React component, so only `info` does here\n * -- faithful rather than tidied, because changing the other three is a design\n * decision and not part of a port.\n */\n:host([tone='info']) .icon {\n  color: var(--pf-inline-cta-info-icon);\n}\n\n:host([tone='info']) .heading {\n  color: var(--pf-inline-cta-info-heading);\n}\n\n:host([tone='info']) slot[name='description']::slotted(*) {\n  color: var(--pf-inline-cta-info-description);\n}\n\n:host([tone='success']) {\n  background: color-mix(in srgb, var(--pf-inline-cta-success-bg) 55%, var(--pf-mix-base));\n  border-color: var(--pf-inline-cta-success-border);\n}\n\n:host([tone='warning']) {\n  background: color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--pf-mix-base));\n  border-color: var(--pf-inline-cta-warning-border);\n}\n\n:host([tone='danger']) {\n  background: color-mix(in srgb, var(--pf-inline-cta-danger-bg) 55%, var(--pf-mix-base));\n  border-color: var(--pf-inline-cta-danger-border);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type PfInlineCtaTone = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * A prompt in the flow of a page: an icon, a line or two, something to do, and\n * optionally a way to send it away.\n *\n * Dismissal waits on `Animation.finished` rather than a timeout. The React\n * `useExitAnimation` guesses 220ms and calls back then, which is wrong twice\n * over: it fires too early or too late if the stylesheet's duration changes,\n * and it fires at all when nothing animated. Reading `getAnimations()` after a\n * frame answers both — the same arrangement `pf-notification.dismiss()` uses,\n * and for the same measured reason: an `animationend` listener never fires\n * when no animation started, which is the ordinary case under\n * `prefers-reduced-motion` or with the stylesheet unloaded.\n *\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot action - what to do about it, usually a button.\n * @slot icon - an icon, in place of the `icon` name.\n * @part icon - the icon's box.\n * @part heading - the heading's box.\n * @part content - the box holding the heading and the description.\n * @part action - the box holding the action slot.\n * @part dismiss - the dismiss button, when `dismissible` is set.\n */\n@Component({\n  tag: 'pf-inline-cta',\n  styleUrl: 'pf-inline-cta.css',\n  shadow: true,\n})\nexport class PfInlineCta {\n  @Element() el!: HTMLElement;\n\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) tone: PfInlineCtaTone = 'default';\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon = 'circle-question';\n\n  /** Offer a dismiss button. Reflected: it changes the padding. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** The dismiss button's accessible name. */\n  @Prop() dismissLabel = 'Dismiss';\n\n  /** Fires once the prompt has finished leaving. */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  /** Whether the exit animation is running. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) exiting = false;\n\n  /** Whether anything is slotted into the boxes that carry layout. */\n  @State() hasIcon = false;\n  @State() hasAction = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasIcon = slotted('icon');\n    this.hasAction = slotted('action');\n  };\n\n  /**\n   * Plays the exit animation and resolves once it has finished, then reports.\n   *\n   * `getAnimations()` read after a frame, so the class the stylesheet animates\n   * has landed; an empty list resolves at once, which is what makes this\n   * correct with no stylesheet, under `prefers-reduced-motion`, and in both\n   * test projects.\n   */\n  @Method()\n  async dismiss(): Promise<void> {\n    if (this.exiting) return;\n    this.exiting = true;\n\n    // A frame, so the reflected `exiting` attribute has landed and the\n    // animation it starts has actually been created.\n    await new Promise((resolve) => requestAnimationFrame(resolve));\n    await this.waitForExit();\n\n    this.pfDismiss.emit();\n  }\n\n  /**\n   * Waits for the exit animation, or returns straight away when there is not\n   * one.\n   *\n   * The `typeof` guard is for the mock DOM, which has no `getAnimations` at\n   * all — one more of its gaps, alongside the missing `toggleAttribute`. It\n   * surfaced here rather than vanishing because a `TypeError` inside an\n   * `@Method` rejects the promise it returned, where Stencil's `safeCall`\n   * swallows one thrown from a lifecycle method.\n   *\n   * A cancelled animation rejects, which is still \"done leaving\".\n   */\n  private async waitForExit(): Promise<void> {\n    if (typeof this.el.getAnimations !== 'function') return;\n\n    const running = this.el\n      .getAnimations()\n      .filter((animation) => animation.playState !== 'finished');\n    if (running.length === 0) return;\n\n    await Promise.all(running.map((animation) => animation.finished.catch(() => undefined)));\n  }\n\n  render() {\n    return (\n      <Host>\n        {/*\n          The icon box always has something in it — the named icon stands in\n          when nothing is slotted — so it needs no hiding. The action box does.\n        */}\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n          {!this.hasIcon && <pf-icon name={this.icon}></pf-icon>}\n          <slot name=\"icon\" onSlotchange={this.read} />\n        </span>\n\n        <div class=\"content\" part=\"content\">\n          <p class=\"heading\" part=\"heading\">\n            <slot />\n          </p>\n          <slot name=\"description\" />\n        </div>\n\n        <div class={{ action: true, empty: !this.hasAction }} part=\"action\">\n          <slot name=\"action\" onSlotchange={this.read} />\n        </div>\n\n        {this.dismissible && (\n          <button\n            type=\"button\"\n            class=\"dismiss\"\n            part=\"dismiss\"\n            aria-label={this.dismissLabel}\n            onClick={() => void this.dismiss()}\n          >\n            <pf-icon name=\"circle-xmark\" aria-hidden=\"true\"></pf-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,IAAM,kpF,MC0ChBC,EAAW,M,oFAIGC,KAAwB,UAGzCC,KAAO,kBAGUC,YAAc,MAG/BC,aAAe,UAGdC,UAG+BC,QAAU,MAGzCC,QAAU,MACVC,UAAY,MAGrB,iBAAAC,GACEC,KAAKC,M,CAGCA,KAAO,KACb,MAAMC,EAAWC,GACfC,MAAMC,KAAKL,KAAKM,GAAGC,UAAUC,MAAMC,GAAUA,EAAMC,aAAa,UAAYP,IAE9EH,KAAKH,QAAUK,EAAQ,QACvBF,KAAKF,UAAYI,EAAQ,SAAS,EAYpC,aAAMS,GACJ,GAAIX,KAAKJ,QAAS,OAClBI,KAAKJ,QAAU,WAIT,IAAIgB,SAASC,GAAYC,sBAAsBD,WAC/Cb,KAAKe,cAEXf,KAAKL,UAAUqB,M,CAeT,iBAAMD,GACZ,UAAWf,KAAKM,GAAGW,gBAAkB,WAAY,OAEjD,MAAMC,EAAUlB,KAAKM,GAClBW,gBACAE,QAAQC,GAAcA,EAAUC,YAAc,aACjD,GAAIH,EAAQI,SAAW,EAAG,aAEpBV,QAAQW,IAAIL,EAAQM,KAAKJ,GAAcA,EAAUK,SAASC,OAAM,IAAMC,c,CAG9E,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CAKHF,EAAA,QAAAE,IAAA,2CAAMC,MAAM,OAAOC,KAAK,OAAM,cAAa,SACvCjC,KAAKH,SAAWgC,EAAA,WAAAE,IAAA,2CAAS5B,KAAMH,KAAKR,OACtCqC,EAAA,QAAAE,IAAA,2CAAM5B,KAAK,OAAO+B,aAAclC,KAAKC,QAGvC4B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUC,KAAK,WACxBJ,EAAA,KAAAE,IAAA,2CAAGC,MAAM,UAAUC,KAAK,WACtBJ,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAM5B,KAAK,iBAGb0B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEG,OAAQ,KAAMC,OAAQpC,KAAKF,WAAamC,KAAK,UACzDJ,EAAA,QAAAE,IAAA,2CAAM5B,KAAK,SAAS+B,aAAclC,KAAKC,QAGxCD,KAAKP,aACJoC,EAAA,UAAAE,IAAA,2CACEM,KAAK,SACLL,MAAM,UACNC,KAAK,UAAS,aACFjC,KAAKN,aACjB4C,QAAS,SAAWtC,KAAKW,WAEzBkB,EAAA,WAAAE,IAAA,2CAAS5B,KAAK,eAAc,cAAa,U","ignoreList":[]}

package/dist/pitchfork/p-b2df1ecb.entry.js

@@ -0,0 +1,2 @@
+import{r as t,a as e,h as s,H as a}from"./p-Bm6UxEit.js";import{c as i,n as r,b as n,C as l,p as o,a as c,d,f as h,e as p}from"./p-CmX-kVk-.js";import"./p-COAc4ZDB.js";const f=()=>`:host{display:flex;flex-direction:column;gap:var(--space-3);width:100%}:host([hidden]){display:none}.svg{display:block;height:auto;overflow:visible;width:100%}.empty{align-items:center;color:var(--pf-chart-text-muted);display:flex;font-size:var(--font-size-sm);height:120px;justify-content:center}.grid{stroke:var(--pf-chart-grid);stroke-width:1}.tick{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs)}.tick--y{dominant-baseline:middle;text-anchor:end}.tick--x{dominant-baseline:hanging;text-anchor:middle}.axis-label{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs);text-anchor:middle}.bar{transition:opacity 80ms ease}.bar:hover{opacity:0.75}.legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;margin:0;padding:0;padding-inline-start:var(--pf-chart-plot-inset-left, 0)}.legend.legend--hidden{display:none}.legend slot{display:contents}@media (prefers-reduced-motion: reduce){.bar{transition:none}}`;const g=class{constructor(e){t(this,e)}get el(){return e(this)}data=[];stacked=false;showLegend=true;yAxisLabel;label;series=[];componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}async refresh(){this.sync()}get seriesElements(){return Array.from(this.el.children).filter((t=>t.tagName.toLowerCase()==="pf-chart-series"))}get rows(){const t=this.data;if(Array.isArray(t))return t;try{const e=JSON.parse(String(t||"[]"));return Array.isArray(e)?e:[]}catch{return[]}}sync(){this.series=this.seriesElements.map(((t,e)=>{const s=t;const a=i(e,s.color??t.getAttribute("color")??undefined);t.swatch=a;return{key:s.seriesKey??t.getAttribute("series-key")??"",color:a}}))}render(){const t=this.rows;const e=this.series;if(t.length===0||e.length===0){return s(a,null,s("div",{class:"empty",part:"empty"},s("slot",{name:"empty"},"No data")),s("ul",{class:"legend legend--hidden",part:"legend"},s("slot",{onSlotchange:()=>this.refresh()})))}const i=(t,e)=>Math.max(0,Number(t[e]??0)||0);const f=this.stacked?t.map((t=>e.reduce(((e,s)=>e+i(t,s.key)),0))):e.flatMap((e=>t.map((t=>i(t,e.key)))));const g=r(Math.max(0,...f));const y=g[g.length-1];const m=n(t.length,e.length,this.stacked);const u=p(t.length);const x=c.top+d.height;return s(a,{style:{"--pf-chart-plot-inset-left":`${c.left/l.width*100}%`}},s("svg",{class:"svg",part:"svg",viewBox:`0 0 ${l.width} ${l.height}`,role:"img","aria-label":this.label??this.yAxisLabel??"Bar chart"},g.map((t=>{const e=o(t,y);return s("g",null,s("line",{class:"grid",part:"grid",x1:c.left,y1:e,x2:c.left+d.width,y2:e}),s("text",{class:"tick tick--y",part:"tick",x:c.left-8,y:e},h(t)))})),t.map(((t,e)=>e%u===0?s("text",{class:"tick tick--x",part:"tick",x:m.groupCenters[e],y:x+20},t.label):null)),this.yAxisLabel&&s("text",{class:"axis-label",x:-112,y:14,transform:"rotate(-90)"},this.yAxisLabel),t.map(((t,a)=>{let r=0;return s("g",null,e.map(((e,n)=>{const l=i(t,e.key);const c=l/(y>0?y:1)*d.height;const p=this.stacked?m.groupLefts[a]:m.groupLefts[a]+n*(m.barWidth+m.gap);const f=this.stacked?o(r+l,y):x-c;if(this.stacked)r+=l;return s("rect",{class:"bar",part:"bar",x:p,y:f,width:m.barWidth,height:c,rx:"2",fill:e.color},s("title",null,`${t.label} — ${e.key}: ${h(l)}`))})))}))),s("ul",{class:{legend:true,"legend--hidden":!this.showLegend||e.length<2},part:"legend"},s("slot",{onSlotchange:()=>this.refresh()})))}static get watchers(){return{data:[{sync:0}]}}};g.style=f();export{g as pf_bar_chart};
+//# sourceMappingURL=p-b2df1ecb.entry.js.map

package/dist/pitchfork/p-b2df1ecb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfBarChartCss","PfBarChart","data","stacked","showLegend","yAxisLabel","label","series","componentWillLoad","this","sync","componentDidLoad","refresh","seriesElements","Array","from","el","children","filter","child","tagName","toLowerCase","rows","raw","isArray","parsed","JSON","parse","String","map","element","index","node","color","chartSeriesColor","getAttribute","undefined","swatch","key","seriesKey","render","length","h","Host","class","part","name","onSlotchange","valueAt","row","Math","max","Number","totals","reduce","sum","item","flatMap","ticks","niceAxisTicks","maxTick","geometry","barGeometry","labelStep","axisLabelStep","floor","CHART_PADDING","top","CHART_PLOT","height","style","left","CHART_VIEW","width","viewBox","role","tick","y","plotY","x1","y1","x2","y2","x","formatAxisTick","groupCenters","transform","groupIndex","base","seriesIndex","value","groupLefts","barWidth","gap","rx","fill","legend"],"sources":["src/components/pf-bar-chart/pf-bar-chart.css?tag=pf-bar-chart&encapsulation=shadow","src/components/pf-bar-chart/pf-bar-chart.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  display: block;\n  height: auto;\n  /* The y-axis label is drawn outside the plot, so the box must not clip. */\n  overflow: visible;\n  width: 100%;\n}\n\n.empty {\n  align-items: center;\n  color: var(--pf-chart-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  height: 120px;\n  justify-content: center;\n}\n\n.grid {\n  stroke: var(--pf-chart-grid);\n  stroke-width: 1;\n}\n\n.tick {\n  fill: var(--pf-chart-text-muted);\n  font-family: inherit;\n  font-size: var(--font-size-2xs);\n}\n\n.tick--y {\n  dominant-baseline: middle;\n  text-anchor: end;\n}\n\n.tick--x {\n  dominant-baseline: hanging;\n  text-anchor: middle;\n}\n\n.axis-label {\n  fill: var(--pf-chart-text-muted);\n  font-family: inherit;\n  font-size: var(--font-size-2xs);\n  text-anchor: middle;\n}\n\n.bar {\n  transition: opacity 80ms ease;\n}\n\n.bar:hover {\n  opacity: 0.75;\n}\n\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  list-style: none;\n  margin: 0;\n  /*\n   * Lines the legend's start edge up with the plot area: the SVG is inset by\n   * the y-axis gutter, and the inset is set inline from the chart's geometry.\n   */\n  padding: 0;\n  padding-inline-start: var(--pf-chart-plot-inset-left, 0);\n}\n\n/*\n * Hidden rather than dropped, so the series stay slotted and `slotchange`\n * still fires. Two classes deep, because the tie breaks on source order.\n */\n.legend.legend--hidden {\n  display: none;\n}\n\n/* The series are flex children of the list, not of a box inside it. */\n.legend slot {\n  display: contents;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bar {\n    transition: none;\n  }\n}\n","import {\n  CHART_PADDING,\n  CHART_PLOT,\n  CHART_VIEW,\n  axisLabelStep,\n  barGeometry,\n  chartSeriesColor,\n  formatAxisTick,\n  niceAxisTicks,\n  plotY,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { PfChartRow } from '../pf-line-chart/pf-line-chart';\n\n/**\n * A grouped or stacked bar chart over `pf-chart-series` children.\n *\n * The same split as `pf-line-chart`: the rows are bulk numbers in a property,\n * the series are named and coloured and live in the light DOM so the legend\n * can reach their labels.\n *\n * @slot - the `pf-chart-series` children.\n * @slot empty - what to show when there is nothing to draw.\n * @part svg - the drawing.\n * @part grid - one gridline.\n * @part tick - one axis label.\n * @part bar - one bar.\n * @part legend - the list the series are slotted into.\n * @part empty - the empty state's box.\n */\n@Component({\n  tag: 'pf-bar-chart',\n  styleUrl: 'pf-bar-chart.css',\n  shadow: true,\n})\nexport class PfBarChart {\n  @Element() el!: HTMLElement;\n\n  /** The rows to plot. An array, or JSON for plain HTML. */\n  @Prop() data: PfChartRow[] | string = [];\n\n  /** Stack each group's series rather than standing them side by side. */\n  @Prop({ reflect: true }) stacked = false;\n\n  @Prop({ reflect: true }) showLegend = true;\n\n  @Prop() yAxisLabel?: string;\n\n  @Prop() label?: string;\n\n  @State() series: { key: string; color: string }[] = [];\n\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only; named to avoid shadowing `Element.children`. */\n  private get seriesElements(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pf-chart-series',\n    ) as HTMLElement[];\n  }\n\n  private get rows(): PfChartRow[] {\n    const raw = this.data;\n    if (Array.isArray(raw)) return raw;\n\n    try {\n      const parsed = JSON.parse(String(raw || '[]'));\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n\n  @Watch('data')\n  sync() {\n    this.series = this.seriesElements.map((element, index) => {\n      const node = element as HTMLElement & { seriesKey?: string; color?: string };\n      const color = chartSeriesColor(\n        index,\n        node.color ?? element.getAttribute('color') ?? undefined,\n      );\n\n      (element as HTMLElement & { swatch: string }).swatch = color;\n\n      return { key: node.seriesKey ?? element.getAttribute('series-key') ?? '', color };\n    });\n  }\n\n  render() {\n    const rows = this.rows;\n    const series = this.series;\n\n    if (rows.length === 0 || series.length === 0) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n          <ul class=\"legend legend--hidden\" part=\"legend\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n        </Host>\n      );\n    }\n\n    /*\n     * Clamped here and nowhere else. A negative value must not pull a stack\n     * down, and it must not give a `<rect>` a negative `height` — which is\n     * an error the browser drops the element for. One clamp rather than two,\n     * so there is one thing to keep right.\n     */\n    const valueAt = (row: PfChartRow, key: string) => Math.max(0, Number(row[key] ?? 0) || 0);\n    /*\n     * A stacked chart's scale is the tallest *stack*, not the tallest bar —\n     * otherwise the top of the stack is drawn above the plot.\n     */\n    const totals = this.stacked\n      ? rows.map((row) => series.reduce((sum, item) => sum + valueAt(row, item.key), 0))\n      : series.flatMap((item) => rows.map((row) => valueAt(row, item.key)));\n\n    const ticks = niceAxisTicks(Math.max(0, ...totals));\n    const maxTick = ticks[ticks.length - 1];\n    const geometry = barGeometry(rows.length, series.length, this.stacked);\n    const labelStep = axisLabelStep(rows.length);\n    const floor = CHART_PADDING.top + CHART_PLOT.height;\n\n    return (\n      <Host\n        style={{\n          '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,\n        }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`}\n          role=\"img\"\n          aria-label={this.label ?? this.yAxisLabel ?? 'Bar chart'}\n        >\n          {ticks.map((tick) => {\n            const y = plotY(tick, maxTick);\n            return (\n              <g>\n                <line\n                  class=\"grid\"\n                  part=\"grid\"\n                  x1={CHART_PADDING.left}\n                  y1={y}\n                  x2={CHART_PADDING.left + CHART_PLOT.width}\n                  y2={y}\n                />\n                <text class=\"tick tick--y\" part=\"tick\" x={CHART_PADDING.left - 8} y={y}>\n                  {formatAxisTick(tick)}\n                </text>\n              </g>\n            );\n          })}\n\n          {rows.map((row, index) =>\n            index % labelStep === 0 ? (\n              <text\n                class=\"tick tick--x\"\n                part=\"tick\"\n                x={geometry.groupCenters[index]}\n                y={floor + 20}\n              >\n                {row.label}\n              </text>\n            ) : null,\n          )}\n\n          {this.yAxisLabel && (\n            <text\n              class=\"axis-label\"\n              x={-(CHART_PADDING.top + CHART_PLOT.height / 2)}\n              y={14}\n              transform=\"rotate(-90)\"\n            >\n              {this.yAxisLabel}\n            </text>\n          )}\n\n          {rows.map((row, groupIndex) => {\n            let base = 0;\n\n            return (\n              <g>\n                {series.map((item, seriesIndex) => {\n                  const value = valueAt(row, item.key);\n                  const height = (value / (maxTick > 0 ? maxTick : 1)) * CHART_PLOT.height;\n                  const x = this.stacked\n                    ? geometry.groupLefts[groupIndex]\n                    : geometry.groupLefts[groupIndex] +\n                      seriesIndex * (geometry.barWidth + geometry.gap);\n                  const y = this.stacked ? plotY(base + value, maxTick) : floor - height;\n\n                  if (this.stacked) base += value;\n\n                  return (\n                    <rect\n                      class=\"bar\"\n                      part=\"bar\"\n                      x={x}\n                      y={y}\n                      width={geometry.barWidth}\n                      height={height}\n                      rx=\"2\"\n                      fill={item.color}\n                    >\n                      <title>{`${row.label} — ${item.key}: ${formatAxisTick(value)}`}</title>\n                    </rect>\n                  );\n                })}\n              </g>\n            );\n          })}\n        </svg>\n\n        <ul\n          class={{ legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }}\n          part=\"legend\"\n        >\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/pitchfork/p-b442330b.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,a,h as s,H as r}from"./p-Bm6UxEit.js";import{s as n,t as i,p as o,c as d,i as c,f as l,m as h,r as u,a as p,b as f,W as b,C as y,d as v}from"./p-C9jNMqLs.js";import{K as g}from"./p-g4FlTDZx.js";const m=()=>`:host{display:inline-block}:host([hidden]){display:none}.calendar{background:var(--pf-calendar-bg);border:1px solid var(--pf-calendar-border);border-radius:var(--radius-md);color:var(--pf-calendar-text);display:grid;gap:var(--space-3);padding:var(--space-3)}.header{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.controls{display:flex;gap:var(--space-2);min-width:0}.select{background:var(--pf-calendar-bg);border:1px solid var(--pf-calendar-border);border-radius:var(--radius-sm);color:var(--pf-calendar-text);font-family:inherit;font-size:var(--font-size-sm);padding:var(--space-1) var(--space-2)}.select:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.nav{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-calendar-text-muted);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1)}.nav:hover:not(:disabled){background:var(--pf-calendar-bg-subtle);color:var(--pf-calendar-text)}.nav:disabled{cursor:not-allowed;opacity:0.4}.nav:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.grid{display:grid;gap:2px}.row{display:contents}.grid{grid-template-columns:repeat(7, 1fr)}.weekday{color:var(--pf-calendar-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--space-1) 0;text-align:center}.day,.empty{aspect-ratio:1;display:flex;min-width:var(--space-8)}.day{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-calendar-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);justify-content:center}.day:hover:not([aria-disabled='true']){background:var(--pf-calendar-bg-subtle)}.day:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.day--outside{color:var(--pf-calendar-text-muted)}.day--today{background:var(--pf-calendar-today-bg);border-color:var(--pf-calendar-today-border)}.day--selected{background:var(--pf-calendar-selected-bg);border-color:var(--pf-calendar-selected-bg);color:var(--pf-calendar-selected-text)}.day--selected:hover{background:var(--pf-calendar-selected-bg-hover)}.day[aria-disabled='true']{cursor:not-allowed;opacity:0.4}`;const w=class{constructor(a){e(this,a);this.pfChange=t(this,"pfChange")}get el(){return a(this)}value;min;max;startYear;endYear;showOutsideDays=true;label="Calendar";isDateDisabled;pfChange;displayMonth=n(new Date);focusedDate=i(new Date);shouldRestoreFocus=false;componentWillLoad(){const e=this.selectedDate();const t=e??i(new Date);this.focusedDate=t;this.displayMonth=this.clamp(n(t))}componentDidRender(){if(!this.shouldRestoreFocus)return;this.shouldRestoreFocus=false;this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus()}syncValue(){const e=this.selectedDate();if(!e)return;this.focusedDate=e;this.displayMonth=this.clamp(n(e))}async goToMonth(e){const t=typeof e==="string"?o(e):i(e);if(!t)return;this.displayMonth=this.clamp(n(t));this.focusedDate=t}async focusSelectedDay(){this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus()}selectedDate(){return o(this.value)}get years(){const e=(new Date).getFullYear();const t=this.startYear??e-50;const a=this.endYear??e+50;return{start:Math.min(t,a),end:Math.max(t,a)}}clamp(e){const{start:t,end:a}=this.years;return d(e,t,a)}isDisabled(e){const t=o(this.min);const a=o(this.max);if(c(e,t,a))return true;return this.isDateDisabled?.(e)??false}select(e){if(this.isDisabled(e))return;this.value=l(e);this.focusedDate=e;this.displayMonth=this.clamp(n(e));this.pfChange.emit({value:this.value})}moveFocus(e){const t=h(this.focusedDate,e);const{start:a,end:s}=this.years;if(t.getFullYear()<a||t.getFullYear()>s)return;this.focusedDate=t;this.displayMonth=this.clamp(n(t));this.shouldRestoreFocus=true}onKeyDown=e=>{const t=u(e.key);if(t){e.preventDefault();this.moveFocus(t);return}if(e.key===g.Enter||e.key===g.Space){e.preventDefault();this.select(this.focusedDate);this.shouldRestoreFocus=true}};showMonth(e){const t=this.clamp(n(e));const a=new Date(t.getFullYear(),t.getMonth()+1,0,12).getDate();this.displayMonth=t;this.focusedDate=new Date(t.getFullYear(),t.getMonth(),Math.min(this.focusedDate.getDate(),a),12)}stepMonth(e){this.showMonth(p(this.displayMonth,e))}renderHeader(){const{start:e,end:t}=this.years;const a=Array.from({length:t-e+1},((t,a)=>e+a));const r=Array.from({length:12},((e,t)=>new Intl.DateTimeFormat("en-US",{month:"long"}).format(new Date(2024,t,1))));const n=this.displayMonth.getFullYear()===e&&this.displayMonth.getMonth()===0;const i=this.displayMonth.getFullYear()===t&&this.displayMonth.getMonth()===11;return s("div",{class:"header",part:"header"},s("button",{type:"button",class:"nav","aria-label":"Previous month",disabled:n,onClick:()=>this.stepMonth(-1)},s("pf-icon",{name:"square-caret-left"})),s("div",{class:"controls"},s("select",{class:"select","aria-label":"Month",onChange:e=>{const t=Number(e.target.value);this.showMonth(new Date(this.displayMonth.getFullYear(),t,1,12))}},r.map(((e,t)=>s("option",{key:e,value:String(t),selected:t===this.displayMonth.getMonth()},e)))),s("select",{class:"select","aria-label":"Year",onChange:e=>{const t=Number(e.target.value);this.showMonth(new Date(t,this.displayMonth.getMonth(),1,12))}},a.map((e=>s("option",{key:e,value:String(e),selected:e===this.displayMonth.getFullYear()},e))))),s("button",{type:"button",class:"nav","aria-label":"Next month",disabled:i,onClick:()=>this.stepMonth(1)},s("pf-icon",{name:"square-caret-right"})))}render(){const e=f(this.displayMonth);const t=this.selectedDate();const a=i(new Date);const n=new Intl.DateTimeFormat("en-US",{month:"long",year:"numeric"}).format(this.displayMonth);return s(r,{key:"1fe86f7b2c22bd62d06e6f2ea54c0a59e747fab1"},s("div",{key:"d073839e9b2dfb4d4de7c688590462d992f95944",class:"calendar",part:"calendar"},this.renderHeader(),s("div",{key:"56fe4cb44559fd5bf43cff0eb8575178f7dc47ea",class:"grid",part:"grid",role:"grid","aria-label":`${this.label}, ${n}`,onKeyDown:this.onKeyDown},s("div",{key:"d5d7d1afee29cb39f6640da24829ec85def3c886",class:"row",role:"row"},b.map((e=>s("span",{key:e,class:"weekday",role:"columnheader","aria-label":e},e)))),Array.from({length:y/7},((r,n)=>s("div",{key:n,class:"row",role:"row"},e.slice(n*7,n*7+7).map((({date:e,inCurrentMonth:r})=>{if(!this.showOutsideDays&&!r){return s("span",{key:l(e),class:"empty",role:"gridcell"})}const n=t?v(t,e):false;const i=v(a,e);const o=v(this.focusedDate,e);const d=this.isDisabled(e);return s("button",{key:l(e),type:"button",role:"gridcell","data-day":l(e),part:`day${n?" selected":""}${i?" today":""}`,class:{day:true,"day--outside":!r,"day--today":i,"day--selected":n},tabindex:o?0:-1,"aria-selected":n?"true":"false","aria-current":i?"date":null,"aria-disabled":d?"true":null,"aria-label":new Intl.DateTimeFormat("en-US",{weekday:"long",month:"long",day:"numeric",year:"numeric"}).format(e),onClick:()=>{this.select(e);this.shouldRestoreFocus=true}},e.getDate())}))))))))}static get watchers(){return{value:[{syncValue:0}]}}};w.style=m();export{w as pf_calendar};
+//# sourceMappingURL=p-b442330b.entry.js.map

package/dist/pitchfork/p-b442330b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfCalendarCss","PfCalendar","value","min","max","startYear","endYear","showOutsideDays","label","isDateDisabled","pfChange","displayMonth","startOfMonth","Date","focusedDate","toMidday","shouldRestoreFocus","componentWillLoad","selected","this","selectedDate","base","clamp","componentDidRender","el","shadowRoot","querySelector","focus","syncValue","goToMonth","date","target","parseISODate","focusSelectedDay","years","now","getFullYear","start","end","Math","clampMonthToYearRange","isDisabled","isOutsideDateRange","select","formatISODate","emit","moveFocus","move","next","moveCalendarDate","onKeyDown","event","resolveCalendarKey","key","preventDefault","Keys","Enter","Space","showMonth","month","lastDay","getMonth","getDate","stepMonth","amount","addMonths","renderHeader","Array","from","length","_","index","months","Intl","DateTimeFormat","format","atFirst","atLast","h","class","part","type","disabled","onClick","name","onChange","Number","map","String","year","render","days","buildCalendarDays","today","monthLabel","Host","role","WEEKDAY_LABELS","day","CALENDAR_CELL_COUNT","week","slice","inCurrentMonth","isSelected","isSameDay","isToday","isFocused","tabindex","weekday"],"sources":["src/components/pf-calendar/pf-calendar.css?tag=pf-calendar&encapsulation=shadow","src/components/pf-calendar/pf-calendar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.calendar {\n  background: var(--pf-calendar-bg);\n  border: 1px solid var(--pf-calendar-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-calendar-text);\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n.header {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n  justify-content: space-between;\n}\n\n.controls {\n  display: flex;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n.select {\n  background: var(--pf-calendar-bg);\n  border: 1px solid var(--pf-calendar-border);\n  border-radius: var(--radius-sm);\n  color: var(--pf-calendar-text);\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  padding: var(--space-1) var(--space-2);\n}\n\n.select:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.nav {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: var(--pf-calendar-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  padding: var(--space-1);\n}\n\n.nav:hover:not(:disabled) {\n  background: var(--pf-calendar-bg-subtle);\n  color: var(--pf-calendar-text);\n}\n\n.nav:disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.nav:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.grid {\n  display: grid;\n  gap: 2px;\n}\n\n/*\n * `display: contents` so each row's seven cells join the grid's own columns\n * rather than forming a nested box. The rows exist for the `role=\"row\"` the\n * grid pattern requires, not for layout.\n */\n.row {\n  display: contents;\n}\n\n.grid {\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.weekday {\n  color: var(--pf-calendar-text-muted);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  padding: var(--space-1) 0;\n  text-align: center;\n}\n\n.day,\n.empty {\n  aspect-ratio: 1;\n  display: flex;\n  min-width: var(--space-8);\n}\n\n.day {\n  align-items: center;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-sm);\n  color: var(--pf-calendar-text);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  justify-content: center;\n}\n\n.day:hover:not([aria-disabled='true']) {\n  background: var(--pf-calendar-bg-subtle);\n}\n\n.day:focus-visible {\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.day--outside {\n  color: var(--pf-calendar-text-muted);\n}\n\n.day--today {\n  background: var(--pf-calendar-today-bg);\n  border-color: var(--pf-calendar-today-border);\n}\n\n/* After today, so a selected day that is also today reads as selected. */\n.day--selected {\n  background: var(--pf-calendar-selected-bg);\n  border-color: var(--pf-calendar-selected-bg);\n  color: var(--pf-calendar-selected-text);\n}\n\n.day--selected:hover {\n  background: var(--pf-calendar-selected-bg-hover);\n}\n\n.day[aria-disabled='true'] {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n","import {\n  addMonths,\n  buildCalendarDays,\n  CALENDAR_CELL_COUNT,\n  clampMonthToYearRange,\n  formatISODate,\n  isOutsideDateRange,\n  isSameDay,\n  Keys,\n  moveCalendarDate,\n  parseISODate,\n  resolveCalendarKey,\n  startOfMonth,\n  toMidday,\n  WEEKDAY_LABELS,\n  type CalendarMove,\n} from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A month grid for picking a date.\n *\n * **It has a keyboard, which the React component does not.** `Calendar`\n * renders 42 buttons and no key handling, so reaching the end of a month means\n * 42 presses of Tab and there is no way to move by week at all. This grid is\n * the ARIA pattern instead: one tab stop, arrows to move a day, up and down a\n * week, Home and End to the ends of the week, PageUp/PageDown a month. The\n * arithmetic is core's `moveCalendarDate`, so the React component can adopt it\n * without the two disagreeing — recorded in `todo.md`.\n *\n * Month and year are native `<select>`s rather than two `pf-dropdown`s. A year\n * range of a century would mean a hundred custom elements rendered into this\n * shadow root for one control, and a `<select>` brings its own keyboard and\n * its platform picker on a phone.\n *\n * @part calendar - the root box.\n * @part header - the month and year controls row.\n * @part grid - the month grid.\n * @part day - every day cell.\n * @part selected - the selected day.\n * @part today - today's cell.\n */\n@Component({\n  tag: 'pf-calendar',\n  styleUrl: 'pf-calendar.css',\n  shadow: true,\n})\nexport class PfCalendar {\n  @Element() el!: HTMLElement;\n\n  /** The selected date, as `YYYY-MM-DD`. Reflected, so a selector can find it. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Earliest selectable date, as `YYYY-MM-DD`. */\n  @Prop() min?: string;\n\n  /** Latest selectable date, as `YYYY-MM-DD`. */\n  @Prop() max?: string;\n\n  /** First year offered in the year picker. Defaults to 50 years back. */\n  @Prop() startYear?: number;\n\n  /** Last year offered in the year picker. Defaults to 50 years on. */\n  @Prop() endYear?: number;\n\n  /** Render the days borrowed from the neighbouring months. */\n  @Prop() showOutsideDays = true;\n\n  /** Accessible name for the grid. */\n  @Prop() label = 'Calendar';\n\n  /**\n   * A predicate for days that cannot be chosen, beyond `min` and `max`.\n   *\n   * A property rather than an attribute, because a function cannot be written\n   * in HTML — the generated bindings set props as properties, so a React or\n   * Angular consumer passes it as they would any other prop, and a plain-HTML\n   * consumer uses `min`/`max` or assigns it in script.\n   */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires with the chosen date, as `YYYY-MM-DD`. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The month on screen. */\n  @State() displayMonth: Date = startOfMonth(new Date());\n\n  /** The day the grid's single tab stop sits on. */\n  @State() focusedDate: Date = toMidday(new Date());\n\n  /** Set once a key or a click has moved focus, so the first paint does not steal it. */\n  private shouldRestoreFocus = false;\n\n  componentWillLoad() {\n    const selected = this.selectedDate();\n    const base = selected ?? toMidday(new Date());\n    this.focusedDate = base;\n    this.displayMonth = this.clamp(startOfMonth(base));\n  }\n\n  componentDidRender() {\n    if (!this.shouldRestoreFocus) return;\n    this.shouldRestoreFocus = false;\n    // The grid has one tab stop, so after a move the new one has to be given\n    // focus explicitly — the old button may not even exist any more.\n    this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n  }\n\n  /** Follows a value set from outside, so the grid shows what it is told. */\n  @Watch('value')\n  syncValue() {\n    const selected = this.selectedDate();\n    if (!selected) return;\n    this.focusedDate = selected;\n    this.displayMonth = this.clamp(startOfMonth(selected));\n  }\n\n  /** Moves the grid to the month holding `date` (a `Date` or `YYYY-MM-DD`). */\n  @Method()\n  async goToMonth(date: string | Date): Promise<void> {\n    const target = typeof date === 'string' ? parseISODate(date) : toMidday(date);\n    if (!target) return;\n    this.displayMonth = this.clamp(startOfMonth(target));\n    this.focusedDate = target;\n  }\n\n  /**\n   * Puts focus on the grid's single tab stop.\n   *\n   * A method rather than something a container does for itself: the tab stop\n   * is inside this shadow root, and reaching into another component's shadow\n   * root to find it is exactly the coupling `::part()` and `@Method()` exist\n   * to avoid. `pf-date-picker` calls this when its popover opens.\n   */\n  @Method()\n  async focusSelectedDay(): Promise<void> {\n    this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n  }\n\n  private selectedDate(): Date | null {\n    return parseISODate(this.value);\n  }\n\n  private get years() {\n    const now = new Date().getFullYear();\n    const start = this.startYear ?? now - 50;\n    const end = this.endYear ?? now + 50;\n    return { start: Math.min(start, end), end: Math.max(start, end) };\n  }\n\n  private clamp(date: Date): Date {\n    const { start, end } = this.years;\n    return clampMonthToYearRange(date, start, end);\n  }\n\n  private isDisabled(date: Date): boolean {\n    const min = parseISODate(this.min);\n    const max = parseISODate(this.max);\n    if (isOutsideDateRange(date, min, max)) return true;\n    return this.isDateDisabled?.(date) ?? false;\n  }\n\n  private select(date: Date) {\n    if (this.isDisabled(date)) return;\n    this.value = formatISODate(date);\n    this.focusedDate = date;\n    this.displayMonth = this.clamp(startOfMonth(date));\n    this.pfChange.emit({ value: this.value });\n  }\n\n  /**\n   * Moves the focused day, bringing the grid with it.\n   *\n   * A disabled day can still be focused — skipping it would make a long\n   * blocked stretch impossible to cross, and the ARIA pattern is that focus\n   * moves freely while activation is refused.\n   */\n  private moveFocus(move: CalendarMove) {\n    const next = moveCalendarDate(this.focusedDate, move);\n    const { start, end } = this.years;\n    if (next.getFullYear() < start || next.getFullYear() > end) return;\n\n    this.focusedDate = next;\n    this.displayMonth = this.clamp(startOfMonth(next));\n    this.shouldRestoreFocus = true;\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    // The key map is core's, so the React `Calendar` cannot disagree with this\n    // grid about what PageUp means.\n    const move = resolveCalendarKey(event.key);\n    if (move) {\n      event.preventDefault();\n      this.moveFocus(move);\n      return;\n    }\n\n    if (event.key === Keys.Enter || event.key === Keys.Space) {\n      event.preventDefault();\n      this.select(this.focusedDate);\n      this.shouldRestoreFocus = true;\n    }\n  };\n\n  /**\n   * Shows a month and brings the tab stop with it.\n   *\n   * Both halves, always. Moving `displayMonth` alone leaves `focusedDate` on a\n   * day that is no longer rendered, so no cell carries `tabindex=\"0\"` and the\n   * grid drops out of the tab order altogether — reachable by mouse and by\n   * nothing else. The year picker did exactly that until a test went looking.\n   */\n  private showMonth(month: Date) {\n    const target = this.clamp(startOfMonth(month));\n    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0, 12).getDate();\n    this.displayMonth = target;\n    this.focusedDate = new Date(\n      target.getFullYear(),\n      target.getMonth(),\n      Math.min(this.focusedDate.getDate(), lastDay),\n      12,\n    );\n  }\n\n  private stepMonth(amount: number) {\n    this.showMonth(addMonths(this.displayMonth, amount));\n  }\n\n  private renderHeader() {\n    const { start, end } = this.years;\n    const years = Array.from({ length: end - start + 1 }, (_, index) => start + index);\n    const months = Array.from({ length: 12 }, (_, month) =>\n      new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date(2024, month, 1)),\n    );\n\n    const atFirst = this.displayMonth.getFullYear() === start && this.displayMonth.getMonth() === 0;\n    const atLast = this.displayMonth.getFullYear() === end && this.displayMonth.getMonth() === 11;\n\n    return (\n      <div class=\"header\" part=\"header\">\n        <button\n          type=\"button\"\n          class=\"nav\"\n          aria-label=\"Previous month\"\n          disabled={atFirst}\n          onClick={() => this.stepMonth(-1)}\n        >\n          <pf-icon name=\"square-caret-left\"></pf-icon>\n        </button>\n\n        <div class=\"controls\">\n          <select\n            class=\"select\"\n            aria-label=\"Month\"\n            onChange={(event) => {\n              const month = Number((event.target as HTMLSelectElement).value);\n              this.showMonth(new Date(this.displayMonth.getFullYear(), month, 1, 12));\n            }}\n          >\n            {months.map((name, month) => (\n              <option\n                key={name}\n                value={String(month)}\n                selected={month === this.displayMonth.getMonth()}\n              >\n                {name}\n              </option>\n            ))}\n          </select>\n\n          <select\n            class=\"select\"\n            aria-label=\"Year\"\n            onChange={(event) => {\n              const year = Number((event.target as HTMLSelectElement).value);\n              this.showMonth(new Date(year, this.displayMonth.getMonth(), 1, 12));\n            }}\n          >\n            {years.map((year) => (\n              <option\n                key={year}\n                value={String(year)}\n                selected={year === this.displayMonth.getFullYear()}\n              >\n                {year}\n              </option>\n            ))}\n          </select>\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"nav\"\n          aria-label=\"Next month\"\n          disabled={atLast}\n          onClick={() => this.stepMonth(1)}\n        >\n          <pf-icon name=\"square-caret-right\"></pf-icon>\n        </button>\n      </div>\n    );\n  }\n\n  render() {\n    const days = buildCalendarDays(this.displayMonth);\n    const selected = this.selectedDate();\n    const today = toMidday(new Date());\n    const monthLabel = new Intl.DateTimeFormat('en-US', {\n      month: 'long',\n      year: 'numeric',\n    }).format(this.displayMonth);\n\n    return (\n      <Host>\n        <div class=\"calendar\" part=\"calendar\">\n          {this.renderHeader()}\n\n          <div\n            class=\"grid\"\n            part=\"grid\"\n            role=\"grid\"\n            aria-label={`${this.label}, ${monthLabel}`}\n            onKeyDown={this.onKeyDown}\n          >\n            <div class=\"row\" role=\"row\">\n              {WEEKDAY_LABELS.map((day) => (\n                <span key={day} class=\"weekday\" role=\"columnheader\" aria-label={day}>\n                  {day}\n                </span>\n              ))}\n            </div>\n\n            {Array.from({ length: CALENDAR_CELL_COUNT / 7 }, (_, week) => (\n              <div key={week} class=\"row\" role=\"row\">\n                {days.slice(week * 7, week * 7 + 7).map(({ date, inCurrentMonth }) => {\n                  if (!this.showOutsideDays && !inCurrentMonth) {\n                    return <span key={formatISODate(date)} class=\"empty\" role=\"gridcell\"></span>;\n                  }\n\n                  const isSelected = selected ? isSameDay(selected, date) : false;\n                  const isToday = isSameDay(today, date);\n                  const isFocused = isSameDay(this.focusedDate, date);\n                  const disabled = this.isDisabled(date);\n\n                  return (\n                    <button\n                      key={formatISODate(date)}\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-day={formatISODate(date)}\n                      part={`day${isSelected ? ' selected' : ''}${isToday ? ' today' : ''}`}\n                      class={{\n                        day: true,\n                        'day--outside': !inCurrentMonth,\n                        'day--today': isToday,\n                        'day--selected': isSelected,\n                      }}\n                      /* One tab stop for the whole grid: the arrows do the rest. */\n                      tabindex={isFocused ? 0 : -1}\n                      aria-selected={isSelected ? 'true' : 'false'}\n                      aria-current={isToday ? 'date' : null}\n                      aria-disabled={disabled ? 'true' : null}\n                      aria-label={new Intl.DateTimeFormat('en-US', {\n                        weekday: 'long',\n                        month: 'long',\n                        day: 'numeric',\n                        year: 'numeric',\n                      }).format(date)}\n                      onClick={() => {\n                        this.select(date);\n                        this.shouldRestoreFocus = true;\n                      }}\n                    >\n                      {date.getDate()}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uNAAA,MAAMA,EAAgB,IAAM,mpE,MC2DfC,EAAU,M,kFAImBC,MAGhCC,IAGAC,IAGAC,UAGAC,QAGAC,gBAAkB,KAGlBC,MAAQ,WAURC,eAGCC,SAGAC,aAAqBC,EAAa,IAAIC,MAGtCC,YAAoBC,EAAS,IAAIF,MAGlCG,mBAAqB,MAE7B,iBAAAC,GACE,MAAMC,EAAWC,KAAKC,eACtB,MAAMC,EAAOH,GAAYH,EAAS,IAAIF,MACtCM,KAAKL,YAAcO,EACnBF,KAAKR,aAAeQ,KAAKG,MAAMV,EAAaS,G,CAG9C,kBAAAE,GACE,IAAKJ,KAAKH,mBAAoB,OAC9BG,KAAKH,mBAAqB,MAG1BG,KAAKK,GAAGC,YAAYC,cAAiC,mCAAmCC,O,CAK1F,SAAAC,GACE,MAAMV,EAAWC,KAAKC,eACtB,IAAKF,EAAU,OACfC,KAAKL,YAAcI,EACnBC,KAAKR,aAAeQ,KAAKG,MAAMV,EAAaM,G,CAK9C,eAAMW,CAAUC,GACd,MAAMC,SAAgBD,IAAS,SAAWE,EAAaF,GAAQf,EAASe,GACxE,IAAKC,EAAQ,OACbZ,KAAKR,aAAeQ,KAAKG,MAAMV,EAAamB,IAC5CZ,KAAKL,YAAciB,C,CAYrB,sBAAME,GACJd,KAAKK,GAAGC,YAAYC,cAAiC,mCAAmCC,O,CAGlF,YAAAP,GACN,OAAOY,EAAab,KAAKjB,M,CAG3B,SAAYgC,GACV,MAAMC,GAAM,IAAItB,MAAOuB,cACvB,MAAMC,EAAQlB,KAAKd,WAAa8B,EAAM,GACtC,MAAMG,EAAMnB,KAAKb,SAAW6B,EAAM,GAClC,MAAO,CAAEE,MAAOE,KAAKpC,IAAIkC,EAAOC,GAAMA,IAAKC,KAAKnC,IAAIiC,EAAOC,G,CAGrD,KAAAhB,CAAMQ,GACZ,MAAMO,MAAEA,EAAKC,IAAEA,GAAQnB,KAAKe,MAC5B,OAAOM,EAAsBV,EAAMO,EAAOC,E,CAGpC,UAAAG,CAAWX,GACjB,MAAM3B,EAAM6B,EAAab,KAAKhB,KAC9B,MAAMC,EAAM4B,EAAab,KAAKf,KAC9B,GAAIsC,EAAmBZ,EAAM3B,EAAKC,GAAM,OAAO,KAC/C,OAAOe,KAAKV,iBAAiBqB,IAAS,K,CAGhC,MAAAa,CAAOb,GACb,GAAIX,KAAKsB,WAAWX,GAAO,OAC3BX,KAAKjB,MAAQ0C,EAAcd,GAC3BX,KAAKL,YAAcgB,EACnBX,KAAKR,aAAeQ,KAAKG,MAAMV,EAAakB,IAC5CX,KAAKT,SAASmC,KAAK,CAAE3C,MAAOiB,KAAKjB,O,CAU3B,SAAA4C,CAAUC,GAChB,MAAMC,EAAOC,EAAiB9B,KAAKL,YAAaiC,GAChD,MAAMV,MAAEA,EAAKC,IAAEA,GAAQnB,KAAKe,MAC5B,GAAIc,EAAKZ,cAAgBC,GAASW,EAAKZ,cAAgBE,EAAK,OAE5DnB,KAAKL,YAAckC,EACnB7B,KAAKR,aAAeQ,KAAKG,MAAMV,EAAaoC,IAC5C7B,KAAKH,mBAAqB,I,CAGpBkC,UAAaC,IAGnB,MAAMJ,EAAOK,EAAmBD,EAAME,KACtC,GAAIN,EAAM,CACRI,EAAMG,iBACNnC,KAAK2B,UAAUC,GACf,M,CAGF,GAAII,EAAME,MAAQE,EAAKC,OAASL,EAAME,MAAQE,EAAKE,MAAO,CACxDN,EAAMG,iBACNnC,KAAKwB,OAAOxB,KAAKL,aACjBK,KAAKH,mBAAqB,I,GAYtB,SAAA0C,CAAUC,GAChB,MAAM5B,EAASZ,KAAKG,MAAMV,EAAa+C,IACvC,MAAMC,EAAU,IAAI/C,KAAKkB,EAAOK,cAAeL,EAAO8B,WAAa,EAAG,EAAG,IAAIC,UAC7E3C,KAAKR,aAAeoB,EACpBZ,KAAKL,YAAc,IAAID,KACrBkB,EAAOK,cACPL,EAAO8B,WACPtB,KAAKpC,IAAIgB,KAAKL,YAAYgD,UAAWF,GACrC,G,CAII,SAAAG,CAAUC,GAChB7C,KAAKuC,UAAUO,EAAU9C,KAAKR,aAAcqD,G,CAGtC,YAAAE,GACN,MAAM7B,MAAEA,EAAKC,IAAEA,GAAQnB,KAAKe,MAC5B,MAAMA,EAAQiC,MAAMC,KAAK,CAAEC,OAAQ/B,EAAMD,EAAQ,IAAK,CAACiC,EAAGC,IAAUlC,EAAQkC,IAC5E,MAAMC,EAASL,MAAMC,KAAK,CAAEC,OAAQ,KAAM,CAACC,EAAGX,IAC5C,IAAIc,KAAKC,eAAe,QAAS,CAAEf,MAAO,SAAUgB,OAAO,IAAI9D,KAAK,KAAM8C,EAAO,MAGnF,MAAMiB,EAAUzD,KAAKR,aAAayB,gBAAkBC,GAASlB,KAAKR,aAAakD,aAAe,EAC9F,MAAMgB,EAAS1D,KAAKR,aAAayB,gBAAkBE,GAAOnB,KAAKR,aAAakD,aAAe,GAE3F,OACEiB,EAAA,OAAKC,MAAM,SAASC,KAAK,UACvBF,EAAA,UACEG,KAAK,SACLF,MAAM,MAAK,aACA,iBACXG,SAAUN,EACVO,QAAS,IAAMhE,KAAK4C,WAAU,IAE9Be,EAAA,WAASM,KAAK,uBAGhBN,EAAA,OAAKC,MAAM,YACTD,EAAA,UACEC,MAAM,SAAQ,aACH,QACXM,SAAWlC,IACT,MAAMQ,EAAQ2B,OAAQnC,EAAMpB,OAA6B7B,OACzDiB,KAAKuC,UAAU,IAAI7C,KAAKM,KAAKR,aAAayB,cAAeuB,EAAO,EAAG,IAAI,GAGxEa,EAAOe,KAAI,CAACH,EAAMzB,IACjBmB,EAAA,UACEzB,IAAK+B,EACLlF,MAAOsF,OAAO7B,GACdzC,SAAUyC,IAAUxC,KAAKR,aAAakD,YAErCuB,MAKPN,EAAA,UACEC,MAAM,SAAQ,aACH,OACXM,SAAWlC,IACT,MAAMsC,EAAOH,OAAQnC,EAAMpB,OAA6B7B,OACxDiB,KAAKuC,UAAU,IAAI7C,KAAK4E,EAAMtE,KAAKR,aAAakD,WAAY,EAAG,IAAI,GAGpE3B,EAAMqD,KAAKE,GACVX,EAAA,UACEzB,IAAKoC,EACLvF,MAAOsF,OAAOC,GACdvE,SAAUuE,IAAStE,KAAKR,aAAayB,eAEpCqD,OAMTX,EAAA,UACEG,KAAK,SACLF,MAAM,MAAK,aACA,aACXG,SAAUL,EACVM,QAAS,IAAMhE,KAAK4C,UAAU,IAE9Be,EAAA,WAASM,KAAK,wB,CAMtB,MAAAM,GACE,MAAMC,EAAOC,EAAkBzE,KAAKR,cACpC,MAAMO,EAAWC,KAAKC,eACtB,MAAMyE,EAAQ9E,EAAS,IAAIF,MAC3B,MAAMiF,EAAa,IAAIrB,KAAKC,eAAe,QAAS,CAClDf,MAAO,OACP8B,KAAM,YACLd,OAAOxD,KAAKR,cAEf,OACEmE,EAACiB,EAAI,CAAA1C,IAAA,4CACHyB,EAAA,OAAAzB,IAAA,2CAAK0B,MAAM,WAAWC,KAAK,YACxB7D,KAAK+C,eAENY,EAAA,OAAAzB,IAAA,2CACE0B,MAAM,OACNC,KAAK,OACLgB,KAAK,OAAM,aACC,GAAG7E,KAAKX,UAAUsF,IAC9B5C,UAAW/B,KAAK+B,WAEhB4B,EAAA,OAAAzB,IAAA,2CAAK0B,MAAM,MAAMiB,KAAK,OACnBC,EAAeV,KAAKW,GACnBpB,EAAA,QAAMzB,IAAK6C,EAAKnB,MAAM,UAAUiB,KAAK,eAAc,aAAaE,GAC7DA,MAKN/B,MAAMC,KAAK,CAAEC,OAAQ8B,EAAsB,IAAK,CAAC7B,EAAG8B,IACnDtB,EAAA,OAAKzB,IAAK+C,EAAMrB,MAAM,MAAMiB,KAAK,OAC9BL,EAAKU,MAAMD,EAAO,EAAGA,EAAO,EAAI,GAAGb,KAAI,EAAGzD,OAAMwE,qBAC/C,IAAKnF,KAAKZ,kBAAoB+F,EAAgB,CAC5C,OAAOxB,EAAA,QAAMzB,IAAKT,EAAcd,GAAOiD,MAAM,QAAQiB,KAAK,Y,CAG5D,MAAMO,EAAarF,EAAWsF,EAAUtF,EAAUY,GAAQ,MAC1D,MAAM2E,EAAUD,EAAUX,EAAO/D,GACjC,MAAM4E,EAAYF,EAAUrF,KAAKL,YAAagB,GAC9C,MAAMoD,EAAW/D,KAAKsB,WAAWX,GAEjC,OACEgD,EAAA,UACEzB,IAAKT,EAAcd,GACnBmD,KAAK,SACLe,KAAK,WAAU,WACLpD,EAAcd,GACxBkD,KAAM,MAAMuB,EAAa,YAAc,KAAKE,EAAU,SAAW,KACjE1B,MAAO,CACLmB,IAAK,KACL,gBAAiBI,EACjB,aAAcG,EACd,gBAAiBF,GAGnBI,SAAUD,EAAY,GAAI,EAAE,gBACbH,EAAa,OAAS,QAAO,eAC9BE,EAAU,OAAS,KAAI,gBACtBvB,EAAW,OAAS,KAAI,aAC3B,IAAIT,KAAKC,eAAe,QAAS,CAC3CkC,QAAS,OACTjD,MAAO,OACPuC,IAAK,UACLT,KAAM,YACLd,OAAO7C,GACVqD,QAAS,KACPhE,KAAKwB,OAAOb,GACZX,KAAKH,mBAAqB,IAAI,GAG/Bc,EAAKgC,UACC,S","ignoreList":[]}

package/dist/pitchfork/p-b4480baf.entry.js

@@ -0,0 +1,2 @@
+import{r,a as o,h as t,H as a}from"./p-Bm6UxEit.js";const e=()=>`:host{display:block;scrollbar-color:var(--pf-scrollarea-thumb) transparent;scrollbar-width:thin;scrollbar-gutter:stable}:host([hidden]){display:none}:host(:focus-visible){border-radius:var(--radius-sm);box-shadow:var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));outline:none}:host([orientation='vertical']){overflow-x:hidden;overflow-y:auto}:host([orientation='horizontal']){overflow-x:auto;overflow-y:hidden}:host([orientation='both']){overflow:auto}:host::-webkit-scrollbar{height:10px;width:10px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:var(--pf-scrollarea-thumb);background-clip:padding-box;border:2px solid transparent;border-radius:var(--radius-full)}:host::-webkit-scrollbar-thumb:hover{background:var(--pf-scrollarea-thumb-hover);background-clip:padding-box}:host::-webkit-scrollbar-corner{background:transparent}`;const s=class{constructor(o){r(this,o)}get el(){return o(this)}orientation="vertical";focusable=true;componentWillLoad(){if(this.focusable&&!this.el.hasAttribute("tabindex")){this.el.setAttribute("tabindex","0")}}render(){return t(a,{key:"1981de11e7e17cb513ca642b180062c3767fbf41"},t("slot",{key:"1260c995e6571cc826038be07fffc584343675c7"}))}};s.style=e();export{s as pf_scroll_area};
+//# sourceMappingURL=p-b4480baf.entry.js.map

package/dist/pitchfork/p-b4480baf.entry.js.map

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

package/dist/pitchfork/p-b4774cba.entry.js

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

package/dist/pitchfork/p-b4774cba.entry.js.map

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

package/dist/pitchfork/p-b6b18062.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as e,H as s}from"./p-Bm6UxEit.js";const t=()=>`:host{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}:host([hidden]){display:none}:host(:not([drawn])){display:none}.label{color:var(--pf-radar-legend-text);font-size:var(--font-size-sm)}.value{color:var(--pf-radar-legend-value);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}`;const r=class{constructor(e){a(this,e)}label="";value=0;drawn=false;render(){return e(s,{key:"41f13fdd1cdc8cf1bf0ae402af0007047cfa0545",role:"listitem"},e("span",{key:"061bc65887e2bdac027a2bb4e15f0e03512e7add",class:"label",part:"label"},this.label),e("span",{key:"c9edf254f3998b842bd62eb0c071366ac6082a40",class:"value",part:"value"},this.value))}};r.style=t();export{r as pf_radar_axis};
+//# sourceMappingURL=p-b6b18062.entry.js.map

package/dist/pitchfork/p-b6b18062.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pfRadarAxisCss","PfRadarAxis","label","value","drawn","render","h","Host","key","role","class","part","this"],"sources":["src/components/pf-radar-axis/pf-radar-axis.css?tag=pf-radar-axis&encapsulation=shadow","src/components/pf-radar-axis/pf-radar-axis.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: flex;\n  gap: var(--space-2);\n  justify-content: space-between;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* An axis the chart did not draw is not a legend row either. */\n:host(:not([drawn])) {\n  display: none;\n}\n\n.label {\n  color: var(--pf-radar-legend-text);\n  font-size: var(--font-size-sm);\n}\n\n.value {\n  color: var(--pf-radar-legend-value);\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One axis of a `pf-radar-chart`, and its own row in the legend.\n *\n * The name is a `label` **attribute** rather than slotted content, which is\n * the one place this differs from the React `RadarChart`'s `ReactNode`: the\n * chart draws each name inside its own SVG as a `<text>`, and an SVG `<text>`\n * cannot hold arbitrary markup in either layer. The legend row the axis draws\n * for itself uses the same string, so the two always agree.\n *\n * @part label - the legend row's name.\n * @part value - the legend row's number.\n */\n@Component({\n  tag: 'pf-radar-axis',\n  styleUrl: 'pf-radar-axis.css',\n  shadow: true,\n})\nexport class PfRadarAxis {\n  /** The axis's name, drawn in the chart and in the legend. */\n  @Prop({ reflect: true }) label = '';\n\n  /** How far along this axis the shape reaches. */\n  @Prop({ reflect: true }) value = 0;\n\n  /**\n   * Set by the chart: whether this axis is in the drawing.\n   *\n   * An axis with an unusable value is not drawn, so it is not a legend row\n   * either — a legend naming an axis that appears nowhere is worse than a\n   * shorter legend. Reflected, because that is what the stylesheet hides it\n   * with.\n   */\n  @Prop({ mutable: true, reflect: true }) drawn = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"label\" part=\"label\">\n          {this.label}\n        </span>\n        <span class=\"value\" part=\"value\">\n          {this.value}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,IAAM,0U,MCmBhBC,EAAW,M,yBAEGC,MAAQ,GAGRC,MAAQ,EAUOC,MAAQ,MAEhD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACtBC,KAAKV,OAERI,EAAA,QAAAE,IAAA,2CAAME,MAAM,QAAQC,KAAK,SACtBC,KAAKT,O","ignoreList":[]}

package/dist/pitchfork/p-be2c6150.entry.js

@@ -0,0 +1,2 @@
+import{r as t,a as e,h as r,H as a}from"./p-Bm6UxEit.js";var n=3;function s(t,e,r){return{x:t+e*Math.cos(r),y:t+e*Math.sin(r)}}function i(t){if(!(t>0))return[];const e=2*Math.PI/t;return Array.from({length:t},((t,r)=>-Math.PI/2+r*e))}function o(t){return t.filter((t=>Number.isFinite(t.value)&&t.value>=0))}function l(t,e){if(typeof e==="number"&&e>0)return e;const r=Math.max(...o(t).map((t=>t.value)),1);return r>0?r:1}function d(t){return t.map((t=>`${t.x.toFixed(2)},${t.y.toFixed(2)}`)).join(" ")}function c(t,e,r,a){const n=Math.max(2,Math.floor(a)||2);return Array.from({length:n},((a,i)=>{const o=(i+1)/n;return d(t.map((t=>s(e,r*o,t))))}))}function h(t,e,r,a,n){const i=e>0?e:1;return r.map(((e,r)=>{const o=t[r];return s(a,n*(Number.isFinite(o)?Math.max(0,Math.min(1,o/i)):0),e)}))}const p=()=>`:host{align-items:stretch;display:inline-flex;flex-direction:column;gap:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row;gap:var(--space-6)}}.svg{display:block;height:auto;overflow:visible;width:min(100%, 320px)}.grid{fill:none;stroke:var(--pf-radar-grid-stroke);stroke-width:1}.axis{stroke:var(--pf-radar-axis-stroke);stroke-width:1}.area{fill:var(--pf-radar-fill);stroke:var(--pf-radar-stroke);stroke-width:2}.point{fill:var(--pf-radar-stroke);stroke:var(--pf-radar-point-stroke);stroke-width:1.5}.axis-label{fill:var(--pf-radar-label);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium)}.value{animation:pf-radar-grow var(--duration-slow) var(--easing-decelerate)}@keyframes pf-radar-grow{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.value{animation:none}}.legend{display:grid;gap:var(--space-2);list-style:none;margin:0;min-width:0;padding:0;width:100%}@media (min-width: 640px){.legend{min-width:140px;width:auto}}.legend.legend--hidden{display:none}.legend slot{display:contents}.empty{align-items:center;border:1px dashed var(--pf-radar-empty-border);border-radius:var(--radius-md);color:var(--pf-radar-empty-text);display:inline-flex;font-size:var(--font-size-sm);justify-content:center;min-height:180px;min-width:260px;padding:var(--space-4);text-align:center}`;const u=class{constructor(e){t(this,e)}get el(){return e(this)}size=280;max;levels=4;showAxes=true;showLegend=true;label="Radar chart";axes=[];componentWillLoad(){this.sync()}componentDidLoad(){this.sync()}async refresh(){this.sync()}get axisElements(){return Array.from(this.el.children).filter((t=>t.tagName.toLowerCase()==="pf-radar-axis"))}sync(){const t=this.axisElements;const e=t.map((t=>{const e=t;return{label:e.label??t.getAttribute("label")??"",value:Number(e.value??t.getAttribute("value"))}}));const r=o(e);const a=r.length>=n;this.axes=a?r:[];const s=new Set(r);for(const[r,n]of t.entries()){n.drawn=a&&s.has(e[r])}}render(){const t=Math.max(Number(this.size)||280,180);const e=t/2;const o=e-36;if(this.axes.length<n){return r(a,null,r("div",{class:"empty",part:"empty"},r("slot",{name:"empty"},"A radar chart needs at least ",n," axes.")),r("ul",{class:"legend legend--hidden",part:"legend"},r("slot",{onSlotchange:()=>this.refresh()})))}const p=l(this.axes,this.max);const u=i(this.axes.length);const m=c(u,e,o,Number(this.levels));const f=h(this.axes.map((t=>t.value)),p,u,e,o);return r(a,null,r("svg",{class:"svg",part:"svg",viewBox:`0 0 ${t} ${t}`,role:"img","aria-label":this.label},m.map((t=>r("polygon",{class:"grid",part:"grid",points:t}))),this.showAxes&&u.map((t=>{const a=s(e,o,t);return r("line",{class:"axis",part:"axis",x1:e,y1:e,x2:a.x,y2:a.y})})),r("g",{class:"value",style:{transformBox:"view-box",transformOrigin:`${e}px ${e}px`}},r("polygon",{class:"area",part:"area",points:d(f)}),f.map((t=>r("circle",{class:"point",part:"point",cx:t.x,cy:t.y,r:"3"})))),u.map(((t,a)=>{const n=s(e,o+18,t);return r("text",{class:"axis-label",part:"axis-label",x:n.x,y:n.y,"text-anchor":"middle","dominant-baseline":"middle"},this.axes[a].label)}))),r("ul",{class:{legend:true,"legend--hidden":!this.showLegend},part:"legend"},r("slot",{onSlotchange:()=>this.refresh()})))}static get watchers(){return{max:[{sync:0}]}}};u.style=p();export{u as pf_radar_chart};
+//# sourceMappingURL=p-be2c6150.entry.js.map