@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/esm/pf-input.entry.js

@@ -0,0 +1,120 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bm6UxEit.js';
+import { c as composeDescribedBy } from './aria-DfpCerXM.js';
+import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+
+const pfInputCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-input-field-label, var(--pf-field-label));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-input-field-description, var(--pf-field-description));font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-input-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:0}.input{background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);font:inherit;min-height:40px;padding:0 var(--space-3);width:100%;transition:background 0.2s,     border 0.2s,     color 0.2s,     opacity 0.2s}.input:disabled{background:var(--pf-control-bg-disabled);border-color:var(--pf-control-border-disabled);color:var(--pf-control-text-disabled);cursor:not-allowed;opacity:0.6}.input:focus{outline:none}.input:focus-visible{border-color:var(--pf-input-focus-border);box-shadow:var(--pf-input-focus-ring, var(--pf-focus-ring))}.input::placeholder{color:var(--pf-input-placeholder)}.input--invalid{border-color:var(--pf-input-invalid-border)}@media (prefers-reduced-motion: reduce){.input{transition:none}}`;
+
+const PfInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfInput = createEvent(this, "pfInput");
+        this.pfChange = createEvent(this, "pfChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` *content attribute* -- not from this property. A
+     * framework wrapper that sets properties rather than attributes (the
+     * generated React bindings do) would otherwise leave the control nameless
+     * and absent from the submission, with every other sign of working.
+     */
+    name;
+    /** The control's value. */
+    value = '';
+    type = 'text';
+    /** Visible label. Rendered in the same root as the input, so `for` works. */
+    label;
+    /** Hint text below the control. */
+    description;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    placeholder;
+    required = false;
+    disabled = false;
+    readonly = false;
+    /** Fires on every keystroke, like the native `input` event. */
+    pfInput;
+    /** Fires when the value is committed, like the native `change` event. */
+    pfChange;
+    /**
+     * The value the control had when it was created, which is what a form reset
+     * restores. Captured here because `value` has been overwritten by then.
+     */
+    initialValue = '';
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value ?? '');
+        applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    /**
+     * Whether the control currently satisfies its constraints.
+     *
+     * A form-associated custom element does not inherit `checkValidity` from
+     * anywhere -- the spec puts it on ElementInternals, so the element has to
+     * forward it or consumers cannot ask.
+     */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** The message explaining why the control is invalid, or an empty string. */
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /**
+     * A reset restores the value the control started with, not an empty string —
+     * verified against a native `<input value="initial">`, which comes back to
+     * "initial" rather than to "". Clearing it was a real defect: a
+     * `<pf-input value="…">` in a form lost its value on any reset.
+     */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    onInput = (event) => {
+        this.value = event.target.value;
+        this.pfInput.emit({ value: this.value });
+    };
+    onChange = () => {
+        this.pfChange.emit({ value: this.value });
+    };
+    render() {
+        // IDs are scoped to this shadow root, so they can be literal -- the useId()
+        // the React component needs has no counterpart here.
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (h(Host, { key: 'a6d68ce6641fb92407356c94e2181b280bdc03b6' }, h("div", { key: '312ee69f4a661494548b01f598b74ed56bd443fc', class: "field", part: "field" }, this.label && (h("label", { key: '59188fde6b3639105f8ade8b497c764ddd5d658f', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: '4f71679ec6bb99d3f7dc8f941d8c02bb94452c21', class: "required", "aria-hidden": "true" }, "*")))), h("input", { key: '0680b0e5aa0f8ddf9850a212f735f0f8c5b273a3', id: "input", part: "input", class: { input: true, 'input--invalid': Boolean(this.error) }, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readOnly: this.readonly, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onChange: this.onChange }), this.description && (h("p", { key: 'f732742b8602ed6094600065d5036bdad538ad35', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '9d524a204abfb733afaf2bf3cc5ec9a5e1c65b94', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfInput.style = pfInputCss();
+
+export { PfInput as pf_input };
+//# sourceMappingURL=pf-input.entry.js.map
+
+//# sourceMappingURL=pf-input.entry.js.map

package/dist/esm/pf-input.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-input.entry.js","sources":["src/components/pf-input/pf-input.css?tag=pf-input&encapsulation=shadow","src/components/pf-input/pf-input.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-input-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-input-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-input-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.input {\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  font: inherit;\n  min-height: 40px;\n  padding: 0 var(--space-3);\n  width: 100%;\n  transition:\n    background 0.2s,\n    border 0.2s,\n    color 0.2s,\n    opacity 0.2s;\n}\n\n.input:disabled {\n  background: var(--pf-control-bg-disabled);\n  border-color: var(--pf-control-border-disabled);\n  color: var(--pf-control-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--pf-input-focus-border);\n  box-shadow: var(--pf-input-focus-ring, var(--pf-focus-ring));\n}\n\n.input::placeholder {\n  color: var(--pf-input-placeholder);\n}\n\n.input--invalid {\n  border-color: var(--pf-input-invalid-border);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n","import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';\n\n/**\n * A form-associated text input.\n *\n * `formAssociated` plus `ElementInternals` is what makes this participate in a\n * real `<form>`: the value reaches `FormData`, constraint validation works, and\n * Angular's generated value accessor has something to bind to. A plain\n * `<input>` inside a shadow root does none of that.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part input - the native input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-input',\n  styleUrl: 'pf-input.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfInput {\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = '';\n\n  @Prop({ reflect: true }) type: PfInputType = 'text';\n\n  /** Visible label. Rendered in the same root as the input, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Fires on every keystroke, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: string }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The value the control had when it was created, which is what a form reset\n   * restores. Captured here because `value` has been overwritten by then.\n   */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /**\n   * Whether the control currently satisfies its constraints.\n   *\n   * A form-associated custom element does not inherit `checkValidity` from\n   * anywhere -- the spec puts it on ElementInternals, so the element has to\n   * forward it or consumers cannot ask.\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * verified against a native `<input value=\"initial\">`, which comes back to\n   * \"initial\" rather than to \"\". Clearing it was a real defect: a\n   * `<pf-input value=\"…\">` in a form lost its value on any reset.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private onInput = (event: Event) => {\n    this.value = (event.target as HTMLInputElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\n  };\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal -- the useId()\n    // the React component needs has no counterpart here.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <input\n            id=\"input\"\n            part=\"input\"\n            class={{ input: true, 'input--invalid': Boolean(this.error) }}\n            type={this.type}\n            name={this.name}\n            value={this.value}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n          />\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-kbd.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h } from './index-Bm6UxEit.js';
+import { a as formatKeyCombination } from './text-B8ulhYUJ.js';
+
+const pfKbdCss = () => `: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 PfKbd = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** A key combination rendered as one cap, e.g. `["⌘", "K"]`. */
+    keys;
+    size = 'md';
+    /** Separator between keys in a combination. Defaults to `+`. */
+    separator = '+';
+    render() {
+        const combination = this.keys?.length ? formatKeyCombination(this.keys, this.separator) : null;
+        return h("kbd", { key: 'dc9375fb271fa1b60e81c39ec69effd38c7e5723', part: "kbd" }, combination ?? h("slot", { key: '280a222509ba677e5ce6ad2afe99306a5a2bda09' }));
+    }
+};
+PfKbd.style = pfKbdCss();
+
+export { PfKbd as pf_kbd };
+//# sourceMappingURL=pf-kbd.entry.js.map
+
+//# sourceMappingURL=pf-kbd.entry.js.map

package/dist/esm/pf-kbd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-kbd.entry.js","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"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,oiBAAoiB,CAAC;;MCmBhjB,KAAK,GAAA,MAAA;;;;;AAER,IAAA,IAAI;IAEa,IAAI,GAAc,IAAI;;IAGvC,SAAS,GAAG,GAAG;IAEvB,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI;QAE9F,OAAO,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,KAAK,IAAE,WAAW,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CAAO;;;;;;;"}

package/dist/esm/pf-line-chart.entry.js

@@ -0,0 +1,115 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { c as chartSeriesColor, n as niceAxisTicks, C as CHART_VIEW, p as plotY, a as CHART_PADDING, d as CHART_PLOT, f as formatAxisTick, g as plotX, s as smoothSeriesPath, h as straightSeriesPath, i as areaSeriesPath, e as axisLabelStep } from './cartesian-rMXGMSEx.js';
+import './pie-COAc4ZDB.js';
+
+const pfLineChartCss = () => `: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}.dot{opacity:0;transition:opacity 80ms ease}.svg:hover .dot{opacity:1}.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){.dot{transition:none}}`;
+
+const PfLineChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * The rows to plot.
+     *
+     * An array for a framework consumer, or JSON for plain HTML, because
+     * Stencil coerces an attribute only for the primitive types it recognises.
+     */
+    data = [];
+    /** Fill under each line. Reflected. */
+    area = false;
+    /** Curve the lines through their points rather than joining them straight. */
+    curved = true;
+    showLegend = true;
+    /** Printed down the y axis, and used as the chart's name when it has none. */
+    yAxisLabel;
+    /** The chart's accessible name. */
+    label;
+    /** The series, read from the light DOM. */
+    series = [];
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    /** Re-reads the series, for a consumer who changed one through a property. */
+    async refresh() {
+        this.sync();
+    }
+    /**
+     * Direct children only: a nested chart owns its own series.
+     *
+     * Named `seriesElements`, not `children`: a component class's members land
+     * on the custom element itself, so a getter called `children` shadows
+     * `Element.children` and anything that walks it recurses for ever.
+     */
+    get seriesElements() {
+        return Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'pf-chart-series');
+    }
+    get rows() {
+        const raw = this.data;
+        if (Array.isArray(raw))
+            return raw;
+        try {
+            const parsed = JSON.parse(String(raw || '[]'));
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            // A malformed attribute is an empty chart, not a thrown render.
+            return [];
+        }
+    }
+    sync() {
+        const elements = this.seriesElements;
+        this.series = elements.map((element, index) => {
+            const node = element;
+            const color = chartSeriesColor(index, node.color ?? element.getAttribute('color') ?? undefined);
+            element.swatch = color;
+            return {
+                key: node.seriesKey ?? element.getAttribute('series-key') ?? '',
+                color,
+                dashed: node.dashed ?? element.hasAttribute('dashed'),
+            };
+        });
+    }
+    render() {
+        const rows = this.rows;
+        const series = this.series;
+        if (rows.length === 0 || series.length === 0) {
+            return (h(Host, null, h("div", { class: "empty", part: "empty" }, h("slot", { name: "empty" }, "No data")), h("ul", { class: "legend legend--hidden", part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+        }
+        const valueAt = (row, key) => Number(row[key] ?? 0);
+        const highest = Math.max(0, ...series.flatMap((item) => rows.map((row) => valueAt(row, item.key))));
+        const ticks = niceAxisTicks(highest);
+        const maxTick = ticks[ticks.length - 1];
+        const labelStep = axisLabelStep(rows.length);
+        const floor = CHART_PADDING.top + CHART_PLOT.height;
+        return (h(Host, { style: {
+                // Lets the legend's start edge line up with the plot area.
+                '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,
+            } }, h("svg", { class: "svg", part: "svg", viewBox: `0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`, role: "img", "aria-label": this.label ?? this.yAxisLabel ?? 'Line chart' }, ticks.map((tick) => {
+            const y = plotY(tick, maxTick);
+            return (h("g", null, h("line", { class: "grid", part: "grid", x1: CHART_PADDING.left, y1: y, x2: CHART_PADDING.left + CHART_PLOT.width, y2: y }), h("text", { class: "tick tick--y", part: "tick", x: CHART_PADDING.left - 8, y: y }, formatAxisTick(tick))));
+        }), rows.map((row, index) => index % labelStep === 0 ? (h("text", { class: "tick tick--x", part: "tick", x: plotX(index, rows.length), y: floor + 20 }, row.label)) : null), this.yAxisLabel && (h("text", { class: "axis-label", x: -112, y: 14, transform: "rotate(-90)" }, this.yAxisLabel)), series.map((item) => {
+            const points = rows.map((row, index) => ({
+                x: plotX(index, rows.length),
+                y: plotY(valueAt(row, item.key), maxTick),
+            }));
+            const line = this.curved ? smoothSeriesPath(points) : straightSeriesPath(points);
+            return (h("g", null, this.area && (h("path", { class: "area", part: "area", d: areaSeriesPath(line, points), fill: item.color, "fill-opacity": "0.12", stroke: "none" })), h("path", { class: "line", part: "line", d: line, fill: "none", stroke: item.color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-dasharray": item.dashed ? '6 4' : undefined }), points.map((point, index) => (h("circle", { class: "dot", part: "dot", cx: point.x, cy: point.y, r: "3.5", fill: item.color }, h("title", null, `${rows[index].label}: ${formatAxisTick(valueAt(rows[index], item.key))}`))))));
+        })), h("ul", { class: { legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }, part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+    }
+    static get watchers() { return {
+        "data": [{
+                "sync": 0
+            }]
+    }; }
+};
+PfLineChart.style = pfLineChartCss();
+
+export { PfLineChart as pf_line_chart };
+//# sourceMappingURL=pf-line-chart.entry.js.map
+
+//# sourceMappingURL=pf-line-chart.entry.js.map

package/dist/esm/pf-line-chart.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-line-chart.entry.js","sources":["src/components/pf-line-chart/pf-line-chart.css?tag=pf-line-chart&encapsulation=shadow","src/components/pf-line-chart/pf-line-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/* The dots appear on hover, so the line reads cleanly at rest. */\n.dot {\n  opacity: 0;\n  transition: opacity 80ms ease;\n}\n\n.svg:hover .dot {\n  opacity: 1;\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  .dot {\n    transition: none;\n  }\n}\n","import {\n  CHART_PADDING,\n  CHART_PLOT,\n  CHART_VIEW,\n  areaSeriesPath,\n  axisLabelStep,\n  chartSeriesColor,\n  formatAxisTick,\n  niceAxisTicks,\n  plotX,\n  plotY,\n  smoothSeriesPath,\n  straightSeriesPath,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n/** One row of a chart's data: a label and a number per series. */\nexport type PfChartRow = { label: string } & Record<string, string | number>;\n\n/**\n * A line or area chart over `pf-chart-series` children.\n *\n * The split follows what the data is: the rows are bulk numbers and live in a\n * property, while the series are the part with names and colours and live in\n * the light DOM, where a consumer can loop over them and where the legend can\n * reach their labels.\n *\n * Every scale and path is core's, so this and the React `LineChart` draw the\n * same chart — the axis labels and the geometry have to come from the same\n * tick scale, or the gridlines say one thing and the line says another.\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 line - one series' line.\n * @part area - one series' fill, on the area variant.\n * @part dot - one data point.\n * @part legend - the list the series are slotted into.\n * @part empty - the empty state's box.\n */\n@Component({\n  tag: 'pf-line-chart',\n  styleUrl: 'pf-line-chart.css',\n  shadow: true,\n})\nexport class PfLineChart {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The rows to plot.\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   */\n  @Prop() data: PfChartRow[] | string = [];\n\n  /** Fill under each line. Reflected. */\n  @Prop({ reflect: true }) area = false;\n\n  /** Curve the lines through their points rather than joining them straight. */\n  @Prop({ reflect: true }) curved = true;\n\n  @Prop({ reflect: true }) showLegend = true;\n\n  /** Printed down the y axis, and used as the chart's name when it has none. */\n  @Prop() yAxisLabel?: string;\n\n  /** The chart's accessible name. */\n  @Prop() label?: string;\n\n  /** The series, read from the light DOM. */\n  @State() series: { key: string; color: string; dashed: boolean }[] = [];\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /** Re-reads the series, for a consumer who changed one through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /**\n   * Direct children only: a nested chart owns its own series.\n   *\n   * Named `seriesElements`, not `children`: a component class's members land\n   * on the custom element itself, so a getter called `children` shadows\n   * `Element.children` and anything that walks it recurses for ever.\n   */\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      // A malformed attribute is an empty chart, not a thrown render.\n      return [];\n    }\n  }\n\n  @Watch('data')\n  sync() {\n    const elements = this.seriesElements;\n\n    this.series = elements.map((element, index) => {\n      const node = element as HTMLElement & {\n        seriesKey?: string;\n        color?: string;\n        dashed?: boolean;\n      };\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 {\n        key: node.seriesKey ?? element.getAttribute('series-key') ?? '',\n        color,\n        dashed: node.dashed ?? element.hasAttribute('dashed'),\n      };\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          {/* The list stays in the tree, or `slotchange` never fires again. */}\n          <ul class=\"legend legend--hidden\" part=\"legend\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n        </Host>\n      );\n    }\n\n    const valueAt = (row: PfChartRow, key: string) => Number(row[key] ?? 0);\n    const highest = Math.max(\n      0,\n      ...series.flatMap((item) => rows.map((row) => valueAt(row, item.key))),\n    );\n    const ticks = niceAxisTicks(highest);\n    const maxTick = ticks[ticks.length - 1];\n    const labelStep = axisLabelStep(rows.length);\n    const floor = CHART_PADDING.top + CHART_PLOT.height;\n\n    return (\n      <Host\n        style={{\n          // Lets the legend's start edge line up with the plot area.\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 ?? 'Line 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 class=\"tick tick--x\" part=\"tick\" x={plotX(index, rows.length)} y={floor + 20}>\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          {series.map((item) => {\n            const points = rows.map((row, index) => ({\n              x: plotX(index, rows.length),\n              y: plotY(valueAt(row, item.key), maxTick),\n            }));\n            const line = this.curved ? smoothSeriesPath(points) : straightSeriesPath(points);\n\n            return (\n              <g>\n                {this.area && (\n                  <path\n                    class=\"area\"\n                    part=\"area\"\n                    d={areaSeriesPath(line, points)}\n                    fill={item.color}\n                    fill-opacity=\"0.12\"\n                    stroke=\"none\"\n                  />\n                )}\n                <path\n                  class=\"line\"\n                  part=\"line\"\n                  d={line}\n                  fill=\"none\"\n                  stroke={item.color}\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-dasharray={item.dashed ? '6 4' : undefined}\n                />\n                {points.map((point, index) => (\n                  <circle\n                    class=\"dot\"\n                    part=\"dot\"\n                    cx={point.x}\n                    cy={point.y}\n                    r=\"3.5\"\n                    fill={item.color}\n                  >\n                    <title>{`${rows[index].label}: ${formatAxisTick(\n                      valueAt(rows[index], item.key),\n                    )}`}</title>\n                  </circle>\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"],"names":[],"mappings":"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"}

package/dist/esm/pf-loading-dots.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfLoadingDotsCss = () => `@keyframes pf-pulse-dots{0%,80%,100%{opacity:0.35;transform:scale(0.9)}40%{opacity:1;transform:scale(1)}}:host{align-items:center;display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.dot{animation:pf-pulse-dots 1s ease-in-out infinite;background:var(--pf-loading-accent);border-radius:50%;display:inline-block}.dot:nth-child(2){animation-delay:0.16s}.dot:nth-child(3){animation-delay:0.32s}:host([size='sm']) .dot{height:6px;width:6px}:host([size='md']) .dot{height:8px;width:8px}:host([size='lg']) .dot{height:10px;width:10px}.sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion: reduce){.dot{animation-duration:0.01ms;animation-iteration-count:1}}`;
+
+const PfLoadingDots = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Dot size. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    /** Accessible name, announced by the live region. */
+    label = 'Loading';
+    render() {
+        return (h(Host, { key: 'fc64cab922fb015ac60edca82b120cfecf7e59ff', role: "status", "aria-label": this.label }, h("span", { key: 'd1b62c8ba624c0f721df65f194acefd8f883f025', class: "dot", part: "dot", "aria-hidden": "true" }), h("span", { key: 'd3b03fc4fb16bccb8dfdc64283072d41f382945b', class: "dot", part: "dot", "aria-hidden": "true" }), h("span", { key: '755ab236742ab9974834cea364c60d4fc671f40b', class: "dot", part: "dot", "aria-hidden": "true" }), h("span", { key: 'eecce31b0360283eecb8cc06e258835ee4f19e4a', class: "sr-only", part: "label" }, this.label)));
+    }
+};
+PfLoadingDots.style = pfLoadingDotsCss();
+
+export { PfLoadingDots as pf_loading_dots };
+//# sourceMappingURL=pf-loading-dots.entry.js.map
+
+//# sourceMappingURL=pf-loading-dots.entry.js.map

package/dist/esm/pf-loading-dots.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-loading-dots.entry.js","sources":["src/components/pf-loading-dots/pf-loading-dots.css?tag=pf-loading-dots&encapsulation=shadow","src/components/pf-loading-dots/pf-loading-dots.tsx"],"sourcesContent":["/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-pulse-dots {\n  0%,\n  80%,\n  100% {\n    opacity: 0.35;\n    transform: scale(0.9);\n  }\n\n  40% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n:host {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.dot {\n  animation: pf-pulse-dots 1s ease-in-out infinite;\n  background: var(--pf-loading-accent);\n  border-radius: 50%;\n  display: inline-block;\n}\n\n/* The dots are the first three children; the hidden label follows them. */\n.dot:nth-child(2) {\n  animation-delay: 0.16s;\n}\n\n.dot:nth-child(3) {\n  animation-delay: 0.32s;\n}\n\n:host([size='sm']) .dot {\n  height: 6px;\n  width: 6px;\n}\n\n:host([size='md']) .dot {\n  height: 8px;\n  width: 8px;\n}\n\n:host([size='lg']) .dot {\n  height: 10px;\n  width: 10px;\n}\n\n.sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dot {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfLoadingDotsSize = 'sm' | 'md' | 'lg';\n\n/**\n * Three pulsing dots, for an indeterminate wait in a tight space.\n *\n * @part dot - each of the three dots.\n * @part label - the visually hidden text the live region announces.\n */\n@Component({\n  tag: 'pf-loading-dots',\n  styleUrl: 'pf-loading-dots.css',\n  shadow: true,\n})\nexport class PfLoadingDots {\n  /** Dot size. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfLoadingDotsSize = 'md';\n\n  /** Accessible name, announced by the live region. */\n  @Prop() label = 'Loading';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-label={this.label}>\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" />\n        <span class=\"sr-only\" part=\"label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,6xBAA6xB,CAAC;;MCejzB,aAAa,GAAA,MAAA;;;;;IAEC,IAAI,GAAsB,IAAI;;IAG/C,KAAK,GAAG,SAAS;IAEzB,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,aAAA,EAAa,MAAM,EAAA,CAAG,EAClD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,aAAA,EAAa,MAAM,EAAA,CAAG,EAClD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,aAAA,EAAa,MAAM,EAAA,CAAG,EAClD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAA,EAC/B,IAAI,CAAC,KAAK,CACN,CACF;;;;;;;"}

package/dist/esm/pf-loading-skeleton.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfLoadingSkeletonCss = () => `@keyframes pf-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}:host{animation:pf-skeleton-shimmer 1.4s linear infinite;background:linear-gradient(     90deg,     color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 25%,     color-mix(in srgb, var(--pf-loading-border) 72%, var(--pf-mix-base) 28%) 37%,     color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 63%   );background-size:200% 100%;border-radius:var(--radius-sm);display:inline-block;height:var(--pf-skeleton-height, 16px);max-width:100%;width:var(--pf-skeleton-width, 100%)}:host([hidden]){display:none}:host([rounded]){border-radius:var(--radius-full)}.sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion: reduce){:host{animation-duration:0.01ms;animation-iteration-count:1}}`;
+
+const PfLoadingSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Width, as a CSS length. A bare number is read as pixels. */
+    width = '100%';
+    /** Height, as a CSS length. A bare number is read as pixels. */
+    height = 16;
+    /** Use a pill radius instead of the default. Reflected for the stylesheet. */
+    rounded = false;
+    /** Accessible name, announced by the live region. */
+    label = 'Loading content';
+    /**
+     * The React component branches on `typeof width === 'number'`. An attribute
+     * is always a string, so `width="120"` would arrive as `"120"` and be used
+     * as an invalid bare length. Treating a numeric string as pixels keeps
+     * `width="120"` and `width={120}` meaning the same thing, while `width="50%"`
+     * and `width="4rem"` pass through untouched.
+     */
+    static toLength(value) {
+        if (typeof value === 'number')
+            return `${value}px`;
+        return /^-?\d+(\.\d+)?$/.test(value.trim()) ? `${value.trim()}px` : value;
+    }
+    render() {
+        return (h(Host, { key: 'f6eec1b4e1a78bb3fb748255f0a8d44e1c376dc0', role: "status", "aria-label": this.label, style: {
+                '--pf-skeleton-width': PfLoadingSkeleton.toLength(this.width),
+                '--pf-skeleton-height': PfLoadingSkeleton.toLength(this.height),
+            } }, h("span", { key: 'deb41107f434e94ae33feead768728756fc3fa87', class: "sr-only", part: "label" }, this.label)));
+    }
+};
+PfLoadingSkeleton.style = pfLoadingSkeletonCss();
+
+export { PfLoadingSkeleton as pf_loading_skeleton };
+//# sourceMappingURL=pf-loading-skeleton.entry.js.map
+
+//# sourceMappingURL=pf-loading-skeleton.entry.js.map

package/dist/esm/pf-loading-skeleton.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-loading-skeleton.entry.js","sources":["src/components/pf-loading-skeleton/pf-loading-skeleton.css?tag=pf-loading-skeleton&encapsulation=shadow","src/components/pf-loading-skeleton/pf-loading-skeleton.tsx"],"sourcesContent":["/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-skeleton-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n:host {\n  animation: pf-skeleton-shimmer 1.4s linear infinite;\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 25%,\n    color-mix(in srgb, var(--pf-loading-border) 72%, var(--pf-mix-base) 28%) 37%,\n    color-mix(in srgb, var(--pf-loading-bg-subtle) 92%, var(--pf-mix-base) 8%) 63%\n  );\n  background-size: 200% 100%;\n  border-radius: var(--radius-sm);\n  display: inline-block;\n  height: var(--pf-skeleton-height, 16px);\n  max-width: 100%;\n  width: var(--pf-skeleton-width, 100%);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([rounded]) {\n  border-radius: var(--radius-full);\n}\n\n.sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A shimmering placeholder for content that has not arrived.\n *\n * @part label - the visually hidden text the live region announces.\n */\n@Component({\n  tag: 'pf-loading-skeleton',\n  styleUrl: 'pf-loading-skeleton.css',\n  shadow: true,\n})\nexport class PfLoadingSkeleton {\n  /** Width, as a CSS length. A bare number is read as pixels. */\n  @Prop() width: number | string = '100%';\n\n  /** Height, as a CSS length. A bare number is read as pixels. */\n  @Prop() height: number | string = 16;\n\n  /** Use a pill radius instead of the default. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) rounded = false;\n\n  /** Accessible name, announced by the live region. */\n  @Prop() label = 'Loading content';\n\n  /**\n   * The React component branches on `typeof width === 'number'`. An attribute\n   * is always a string, so `width=\"120\"` would arrive as `\"120\"` and be used\n   * as an invalid bare length. Treating a numeric string as pixels keeps\n   * `width=\"120\"` and `width={120}` meaning the same thing, while `width=\"50%\"`\n   * and `width=\"4rem\"` pass through untouched.\n   */\n  private static toLength(value: number | string) {\n    if (typeof value === 'number') return `${value}px`;\n    return /^-?\\d+(\\.\\d+)?$/.test(value.trim()) ? `${value.trim()}px` : value;\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"status\"\n        aria-label={this.label}\n        style={{\n          '--pf-skeleton-width': PfLoadingSkeleton.toLength(this.width),\n          '--pf-skeleton-height': PfLoadingSkeleton.toLength(this.height),\n        }}\n      >\n        <span class=\"sr-only\" part=\"label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,m7BAAm7B,CAAC;;MCY38B,iBAAiB,GAAA,MAAA;;;;;IAEpB,KAAK,GAAoB,MAAM;;IAG/B,MAAM,GAAoB,EAAE;;IAGX,OAAO,GAAG,KAAK;;IAGhC,KAAK,GAAG,iBAAiB;AAEjC;;;;;;AAMG;IACK,OAAO,QAAQ,CAAC,KAAsB,EAAA;QAC5C,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAO,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI;QAClD,OAAO,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAA,EAAG,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,KAAK;;IAG3E,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE;gBACL,qBAAqB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;gBAC7D,sBAAsB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;aAChE,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAA,EAC/B,IAAI,CAAC,KAAK,CACN,CACF;;;;;;;"}

package/dist/esm/pf-loading-spinner.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfLoadingSpinnerCss = () => `@keyframes pf-spin{to{transform:rotate(360deg)}}:host{animation:pf-spin 0.8s linear infinite;border:3px solid color-mix(in srgb, var(--pf-loading-border) 75%, transparent);border-radius:50%;border-top-color:var(--pf-loading-accent);display:inline-block;flex:0 0 auto;height:var(--pf-spinner-size, 24px);min-height:12px;min-width:12px;width:var(--pf-spinner-size, 24px)}:host([hidden]){display:none}.sr-only{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion: reduce){:host{animation-duration:0.01ms;animation-iteration-count:1}}`;
+
+const PfLoadingSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Diameter in pixels. */
+    size = 24;
+    /** Accessible name, announced by the live region. */
+    label = 'Loading';
+    render() {
+        /*
+         * `role` and `aria-label` go on the host so the element is the live region,
+         * and the hidden text gives that region something to announce — an empty
+         * live region named only by `aria-label` is not reliably read out. The
+         * React component carries both for the same reason.
+         */
+        return (h(Host, { key: '34cbe91125995cfa2cca9f4d988214ec9984f860', role: "status", "aria-label": this.label, style: { '--pf-spinner-size': `${this.size}px` } }, h("span", { key: 'd5d50df4e6ec207337f1a418d39724d5c62314af', class: "sr-only", part: "label" }, this.label)));
+    }
+};
+PfLoadingSpinner.style = pfLoadingSpinnerCss();
+
+export { PfLoadingSpinner as pf_loading_spinner };
+//# sourceMappingURL=pf-loading-spinner.entry.js.map
+
+//# sourceMappingURL=pf-loading-spinner.entry.js.map

package/dist/esm/pf-loading-spinner.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-loading-spinner.entry.js","sources":["src/components/pf-loading-spinner/pf-loading-spinner.css?tag=pf-loading-spinner&encapsulation=shadow","src/components/pf-loading-spinner/pf-loading-spinner.tsx"],"sourcesContent":["/*\n * `@keyframes` do not cross a shadow boundary. In the React library pf-spin is\n * declared once in LoadingIndicators.css and every component picks it up from\n * the global sheet; here each shadow root needs its own copy.\n */\n@keyframes pf-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host {\n  animation: pf-spin 0.8s linear infinite;\n  border: 3px solid color-mix(in srgb, var(--pf-loading-border) 75%, transparent);\n  border-radius: 50%;\n  border-top-color: var(--pf-loading-accent);\n  display: inline-block;\n  flex: 0 0 auto;\n  height: var(--pf-spinner-size, 24px);\n  min-height: 12px;\n  min-width: 12px;\n  width: var(--pf-spinner-size, 24px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/*\n * The React library reaches a global `.pf-sr-only` for this. A shadow root\n * cannot, so each of these elements declares its own copy.\n */\n.sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * An indeterminate spinner.\n *\n * @part label - the visually hidden text the live region announces.\n */\n@Component({\n  tag: 'pf-loading-spinner',\n  styleUrl: 'pf-loading-spinner.css',\n  shadow: true,\n})\nexport class PfLoadingSpinner {\n  /** Diameter in pixels. */\n  @Prop() size = 24;\n\n  /** Accessible name, announced by the live region. */\n  @Prop() label = 'Loading';\n\n  render() {\n    /*\n     * `role` and `aria-label` go on the host so the element is the live region,\n     * and the hidden text gives that region something to announce — an empty\n     * live region named only by `aria-label` is not reliably read out. The\n     * React component carries both for the same reason.\n     */\n    return (\n      <Host role=\"status\" aria-label={this.label} style={{ '--pf-spinner-size': `${this.size}px` }}>\n        <span class=\"sr-only\" part=\"label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,6oBAA6oB,CAAC;;MCYpqB,gBAAgB,GAAA,MAAA;;;;;IAEnB,IAAI,GAAG,EAAE;;IAGT,KAAK,GAAG,SAAS;IAEzB,MAAM,GAAA;AACJ;;;;;AAKG;QACH,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI,EAAE,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAA,EAC/B,IAAI,CAAC,KAAK,CACN,CACF;;;;;;;"}

package/dist/esm/pf-menu-item.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bm6UxEit.js';
+import { i as isActivationKey } from './keys-g4FlTDZx.js';
+
+const pfMenuItemCss = () => `:host{align-items:center;border-radius:var(--radius-sm);color:var(--pf-menu-text);cursor:pointer;display:flex;font-size:var(--font-size-sm);gap:var(--space-2);line-height:1.3;padding:var(--space-2) var(--space-3);user-select:none}:host([hidden]){display:none}:host(:hover:not([disabled])),:host(:focus-visible){background:var(--pf-menu-item-active-bg);outline:none}:host([destructive]){color:var(--pf-menu-text-danger)}:host([disabled]){cursor:not-allowed;opacity:0.5}slot[name='icon']::slotted(*){flex-shrink:0}slot[name='shortcut']::slotted(*){color:var(--pf-menu-text-muted);flex-shrink:0;font-size:var(--font-size-xs);margin-inline-start:auto}.label{flex:1;min-width:0}`;
+
+const PfMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfMenuSelect = createEvent(this, "pfMenuSelect");
+    }
+    /**
+     * Identifies the item in the menu's select event.
+     *
+     * Reflected because the generated bindings set props as properties, so
+     * without it a consumer selecting `pf-menu-item[value="..."]` in a React or
+     * Angular app finds nothing. The menus themselves read the property, so this
+     * was not a live defect here -- it is the same trap that was one in
+     * `pf-command-item`.
+     */
+    value = '';
+    /** Reflected so the stylesheet and the menu's item query can select on it. */
+    disabled = false;
+    /** Style as a destructive action. Reflected for the stylesheet. */
+    destructive = false;
+    /** Asks the menu to act on this item. The menu decides and then closes. */
+    pfMenuSelect;
+    handleClick(event) {
+        if (this.disabled) {
+            // A disabled item swallows the click rather than letting the menu's own
+            // handler see it as a selection.
+            event.stopPropagation();
+            return;
+        }
+        this.pfMenuSelect.emit({ value: this.value });
+    }
+    /**
+     * Enter and Space activate, as they do on a menuitem. The arrows are the
+     * menu's: only it knows the other items.
+     */
+    handleKeyDown(event) {
+        if (!isActivationKey(event.key) || this.disabled)
+            return;
+        event.preventDefault();
+        this.pfMenuSelect.emit({ value: this.value });
+    }
+    render() {
+        return (h(Host, { key: 'ee6beb23778f9fb73dd5f97b2392aef59496f126', role: "menuitem", "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: 'a50a636f70d9466f61af00718dd98a8f3fe5695f', name: "icon" }), h("span", { key: '42c033ee45a78affe99ef8ca65e2a415f21612ac', class: "label", part: "label" }, h("slot", { key: 'bfc005d6fcc614b3a1e0ad1f2ed2338d27d97960' })), h("slot", { key: '43d807fad2b7d5f44ab7b1320b198f8dd79e3ab7', name: "shortcut" })));
+    }
+};
+PfMenuItem.style = pfMenuItemCss();
+
+export { PfMenuItem as pf_menu_item };
+//# sourceMappingURL=pf-menu-item.entry.js.map
+
+//# sourceMappingURL=pf-menu-item.entry.js.map

package/dist/esm/pf-menu-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-menu-item.entry.js","sources":["src/components/pf-menu-item/pf-menu-item.css?tag=pf-menu-item&encapsulation=shadow","src/components/pf-menu-item/pf-menu-item.tsx"],"sourcesContent":["/*\n * This element is shared by pf-dropdown and pf-context-menu, whose React\n * counterparts have two separate alias families (--pf-dropdown-* and\n * --pf-contextmenu-*) with different values. Rather than invent a third, or\n * pick one and diverge from the other layer, the item reads a generic set of\n * `--pf-menu-*` properties that each container defines on itself.\n *\n * Custom properties inherit through the shadow boundary, so a slotted item\n * picks up whichever menu it is inside. One element, two themings, no new\n * theme aliases, and exact parity with both React families.\n */\n:host {\n  align-items: center;\n  border-radius: var(--radius-sm);\n  color: var(--pf-menu-text);\n  cursor: pointer;\n  display: flex;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  line-height: 1.3;\n  padding: var(--space-2) var(--space-3);\n  user-select: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:hover:not([disabled])),\n:host(:focus-visible) {\n  background: var(--pf-menu-item-active-bg);\n  outline: none;\n}\n\n:host([destructive]) {\n  color: var(--pf-menu-text-danger);\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/*\n * The icon and the shortcut are styled through `::slotted()` rather than\n * wrapped in a span each, because an *unassigned* slot generates no box at\n * all -- it is `display: contents` -- so the row's `gap` does not open beside\n * nothing.\n *\n * A wrapper cannot be collapsed from CSS. `.icon:not(:has(*))` reads as if it\n * does exactly that and never matches, because the `<slot>` inside the\n * wrapper is itself an element child -- measured. It was costing one\n * `--space-2` in front of the label of every item with no icon, so the labels\n * in a menu that mixed the two did not line up.\n */\nslot[name='icon']::slotted(*) {\n  flex-shrink: 0;\n}\n\nslot[name='shortcut']::slotted(*) {\n  color: var(--pf-menu-text-muted);\n  flex-shrink: 0;\n  font-size: var(--font-size-xs);\n  margin-inline-start: auto;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n}\n","import { isActivationKey } from '@pitchfork-ui/core';\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\n\n/**\n * One action inside a `pf-dropdown` or a `pf-context-menu`.\n *\n * Shared by both, because the React library's `DropdownItem` and\n * `ContextMenuItem` are the same shape and the two menus render them\n * identically — one element rather than two that would drift.\n *\n * It only reports that it was chosen. The menu owns focus, closing and the\n * keyboard pattern, exactly as `pf-radio-group` owns selection for its radios.\n *\n * @slot - the item's label.\n * @slot icon - a leading icon.\n * @slot shortcut - a trailing keyboard hint.\n * @part label - the label's box.\n */\n@Component({\n  tag: 'pf-menu-item',\n  styleUrl: 'pf-menu-item.css',\n  shadow: true,\n})\nexport class PfMenuItem {\n  /**\n   * Identifies the item in the menu's select event.\n   *\n   * Reflected because the generated bindings set props as properties, so\n   * without it a consumer selecting `pf-menu-item[value=\"...\"]` in a React or\n   * Angular app finds nothing. The menus themselves read the property, so this\n   * was not a live defect here -- it is the same trap that was one in\n   * `pf-command-item`.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Reflected so the stylesheet and the menu's item query can select on it. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Style as a destructive action. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) destructive = false;\n\n  /** Asks the menu to act on this item. The menu decides and then closes. */\n  @Event() pfMenuSelect!: EventEmitter<{ value: string }>;\n\n  @Listen('click')\n  handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      // A disabled item swallows the click rather than letting the menu's own\n      // handler see it as a selection.\n      event.stopPropagation();\n      return;\n    }\n    this.pfMenuSelect.emit({ value: this.value });\n  }\n\n  /**\n   * Enter and Space activate, as they do on a menuitem. The arrows are the\n   * menu's: only it knows the other items.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!isActivationKey(event.key) || this.disabled) return;\n    event.preventDefault();\n    this.pfMenuSelect.emit({ value: this.value });\n  }\n\n  render() {\n    return (\n      <Host role=\"menuitem\" aria-disabled={this.disabled ? 'true' : null}>\n        <slot name=\"icon\" />\n        <span class=\"label\" part=\"label\">\n          <slot />\n        </span>\n        <slot name=\"shortcut\" />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,iqBAAiqB,CAAC;;MCuBlrB,UAAU,GAAA,MAAA;;;;;AACrB;;;;;;;;AAQG;IACsB,KAAK,GAAG,EAAE;;IAGV,QAAQ,GAAG,KAAK;;IAGhB,WAAW,GAAG,KAAK;;AAGnC,IAAA,YAAY;AAGrB,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;;;YAGjB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAEF,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAG/C;;;AAGG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ;YAAE;QAClD,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;IAG/C,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,EAAA,eAAA,EAAgB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAA,EAChE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAG,CACnB;;;;;;;"}

package/dist/esm/pf-menu-separator.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfMenuSeparatorCss = () => `:host{background:var(--pf-menu-separator);display:block;height:1px;margin:var(--space-1) 0}:host([hidden]){display:none}`;
+
+const PfMenuSeparator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return h(Host, { key: '2cd9dd808ab1b3f41a19ca8b58299e56c340f7d3', role: "separator", "aria-orientation": "horizontal" });
+    }
+};
+PfMenuSeparator.style = pfMenuSeparatorCss();
+
+export { PfMenuSeparator as pf_menu_separator };
+//# sourceMappingURL=pf-menu-separator.entry.js.map
+
+//# sourceMappingURL=pf-menu-separator.entry.js.map

package/dist/esm/pf-menu-separator.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-menu-separator.entry.js","sources":["src/components/pf-menu-separator/pf-menu-separator.css?tag=pf-menu-separator&encapsulation=shadow","src/components/pf-menu-separator/pf-menu-separator.tsx"],"sourcesContent":["/* Reads the same generic set the items do; see pf-menu-item.css. */\n:host {\n  background: var(--pf-menu-separator);\n  display: block;\n  height: 1px;\n  margin: var(--space-1) 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A rule between groups of menu items.\n *\n * Unlike `pf-toolbar-separator` this needs no orientation: a menu is always a\n * column, so the rule is always horizontal.\n */\n@Component({\n  tag: 'pf-menu-separator',\n  styleUrl: 'pf-menu-separator.css',\n  shadow: true,\n})\nexport class PfMenuSeparator {\n  render() {\n    return <Host role=\"separator\" aria-orientation=\"horizontal\" />;\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,wHAAwH,CAAC;;MCa9I,eAAe,GAAA,MAAA;;;;IAC1B,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,WAAW,EAAA,kBAAA,EAAkB,YAAY,EAAA,CAAG;;;;;;;"}