@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-accordion/pf-accordion.js

@@ -0,0 +1,289 @@
+import { formatValueList, parseValueList, resolveListMove, resolveRovingKey, toggleDisclosureValue, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * A stack of `pf-accordion-item` children, of which either one or several can
+ * be open.
+ *
+ * The group owns which sections are open and the arrow keys; each item owns
+ * its own header, panel and animation. Same division as `pf-radio-group` and
+ * its radios — and for the same reason, since "one open at a time" is not a
+ * thing a section can decide for itself.
+ *
+ * Unlike a tab strip this is **not** a roving tabindex: the ARIA accordion
+ * pattern puts every header in the tab sequence, and the arrows are an extra
+ * way to move between them rather than the only one. A header is a real
+ * `<button>` inside its item's shadow root, so it is tabbable with no help.
+ *
+ * @slot - the `pf-accordion-item` children.
+ */
+export class PfAccordion {
+    el;
+    /**
+     * The open sections, as one comma-separated string — which is what an
+     * attribute can carry. `pfChange` also reports the parsed array, which is
+     * what a framework consumer usually wants.
+     */
+    value = '';
+    /** `single` closes the others when one opens; `multiple` leaves them. */
+    type = 'single';
+    /**
+     * The heading level each item's header is wrapped in.
+     *
+     * A union-literal type defeats Stencil's attribute coercion — measured on
+     * `pf-time-picker`, where `hour-cycle="12"` arrived as the *string* `"12"` —
+     * so the value is coerced before it is pushed down rather than compared
+     * here. The union stays because it is the useful type for a framework
+     * consumer who really does set the number.
+     */
+    headingLevel = 3;
+    /** Fires when the open set changes, however it was changed. */
+    pfChange;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleStateChange() {
+        this.sync();
+    }
+    /**
+     * Re-reads the children, for a consumer who changed one through its
+     * *property* — `item.disabled = true` leaves no attribute, moves no node and
+     * fires no `slotchange`.
+     */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested accordion owns its own sections. */
+    get items() {
+        return Array.from(this.el.querySelectorAll('pf-accordion-item')).filter((item) => item.parentElement === this.el);
+    }
+    get expanded() {
+        return parseValueList(this.value);
+    }
+    /**
+     * The property if the item has been upgraded, the attribute if it has not —
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    itemValue(item) {
+        return item.value ?? item.getAttribute('value') ?? '';
+    }
+    isDisabled(item) {
+        return item.disabled ?? item.hasAttribute('disabled');
+    }
+    sync() {
+        const expanded = this.expanded;
+        const level = Number(this.headingLevel);
+        for (const item of this.items) {
+            const section = item;
+            section.expanded = expanded.includes(this.itemValue(item));
+            section.headingLevel = level;
+        }
+    }
+    setExpanded(next) {
+        this.value = formatValueList(next);
+        this.sync();
+        this.pfChange.emit({ value: this.value, values: next });
+    }
+    /**
+     * A section asking to be opened or closed. The group decides, because in
+     * `single` mode the answer depends on what else is open.
+     */
+    handleToggle(event) {
+        event.stopPropagation();
+        const item = this.items.find((candidate) => this.itemValue(candidate) === event.detail.value);
+        if (!item || this.isDisabled(item))
+            return;
+        this.setExpanded(toggleDisclosureValue(this.expanded, event.detail.value, {
+            multiple: this.type === 'multiple',
+        }));
+    }
+    /**
+     * The arrows move focus between the headers and open nothing: an accordion's
+     * sections are opened deliberately, unlike a tab strip's panels. Home and
+     * End jump to the first and last enabled header.
+     */
+    handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const action = resolveRovingKey(event.key, 'vertical');
+        if (!action)
+            return;
+        const enabled = this.items.filter((item) => !this.isDisabled(item));
+        if (enabled.length === 0)
+            return;
+        /*
+         * `activeElement` reports the shallowest host, which is the item: the
+         * header button it delegates focus to is inside the item's shadow root.
+         */
+        const currentIndex = enabled.indexOf(document.activeElement);
+        if (currentIndex === -1)
+            return;
+        const nextIndex = resolveListMove(action, enabled.map((_, index) => index), currentIndex);
+        if (nextIndex < 0)
+            return;
+        event.preventDefault();
+        enabled[nextIndex].focus();
+    }
+    render() {
+        return (h(Host, { key: 'a9dbb4598a42f30a9d24d361ebedc2ed1e9fa2c9' }, h("slot", { key: 'e0ec68e8f33a2f6db479a5438e7db9df9c9e9b19', onSlotchange: () => this.refresh() })));
+    }
+    static get is() { return "pf-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The open sections, as one comma-separated string \u2014 which is what an\nattribute can carry. `pfChange` also reports the parsed array, which is\nwhat a framework consumer usually wants."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfAccordionType",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {
+                        "PfAccordionType": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-accordion/pf-accordion.tsx",
+                            "id": "src/components/pf-accordion/pf-accordion.tsx::PfAccordionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`single` closes the others when one opens; `multiple` leaves them."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'single'"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfAccordionHeadingLevel",
+                    "resolved": "2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "PfAccordionHeadingLevel": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-accordion/pf-accordion.tsx",
+                            "id": "src/components/pf-accordion/pf-accordion.tsx::PfAccordionHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading level each item's header is wrapped in.\n\nA union-literal type defeats Stencil's attribute coercion \u2014 measured on\n`pf-time-picker`, where `hour-cycle=\"12\"` arrived as the *string* `\"12\"` \u2014\nso the value is coerced before it is pushed down rather than compared\nhere. The union stays because it is the useful type for a framework\nconsumer who really does set the number."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the open set changes, however it was changed."
+                },
+                "complexType": {
+                    "original": "{ value: string; values: string[] }",
+                    "resolved": "{ value: string; values: string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-reads the children, for a consumer who changed one through its\n*property* \u2014 `item.disabled = true` leaves no attribute, moves no node and\nfires no `slotchange`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "type",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "headingLevel",
+                "methodName": "handleStateChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pfAccordionToggle",
+                "method": "handleToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-accordion.js.map

package/dist/collection/components/pf-accordion/pf-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["../../../src/components/pf-accordion/pf-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  formatValueList,\n  parseValueList,\n  resolveListMove,\n  resolveRovingKey,\n  toggleDisclosureValue,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfAccordionType = 'single' | 'multiple';\nexport type PfAccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\n/**\n * A stack of `pf-accordion-item` children, of which either one or several can\n * be open.\n *\n * The group owns which sections are open and the arrow keys; each item owns\n * its own header, panel and animation. Same division as `pf-radio-group` and\n * its radios — and for the same reason, since \"one open at a time\" is not a\n * thing a section can decide for itself.\n *\n * Unlike a tab strip this is **not** a roving tabindex: the ARIA accordion\n * pattern puts every header in the tab sequence, and the arrows are an extra\n * way to move between them rather than the only one. A header is a real\n * `<button>` inside its item's shadow root, so it is tabbable with no help.\n *\n * @slot - the `pf-accordion-item` children.\n */\n@Component({\n  tag: 'pf-accordion',\n  styleUrl: 'pf-accordion.css',\n  shadow: true,\n})\nexport class PfAccordion {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The open sections, as one comma-separated string — which is what an\n   * attribute can carry. `pfChange` also reports the parsed array, which is\n   * what a framework consumer usually wants.\n   */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** `single` closes the others when one opens; `multiple` leaves them. */\n  @Prop({ reflect: true }) type: PfAccordionType = 'single';\n\n  /**\n   * The heading level each item's header is wrapped in.\n   *\n   * A union-literal type defeats Stencil's attribute coercion — measured on\n   * `pf-time-picker`, where `hour-cycle=\"12\"` arrived as the *string* `\"12\"` —\n   * so the value is coerced before it is pushed down rather than compared\n   * here. The union stays because it is the useful type for a framework\n   * consumer who really does set the number.\n   */\n  @Prop() headingLevel: PfAccordionHeadingLevel = 3;\n\n  /** Fires when the open set changes, however it was changed. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Watch('value')\n  @Watch('type')\n  @Watch('headingLevel')\n  handleStateChange() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the children, for a consumer who changed one through its\n   * *property* — `item.disabled = true` leaves no attribute, moves no node and\n   * fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested accordion owns its own sections. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-accordion-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  private get expanded(): string[] {\n    return parseValueList(this.value);\n  }\n\n  /**\n   * The property if the item has been upgraded, the attribute if it has not —\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private itemValue(item: HTMLElement) {\n    return (item as HTMLElement & { value?: string }).value ?? item.getAttribute('value') ?? '';\n  }\n\n  private isDisabled(item: HTMLElement) {\n    return (item as HTMLElement & { disabled?: boolean }).disabled ?? item.hasAttribute('disabled');\n  }\n\n  private sync() {\n    const expanded = this.expanded;\n    const level = Number(this.headingLevel) as PfAccordionHeadingLevel;\n\n    for (const item of this.items) {\n      const section = item as HTMLElement & {\n        expanded: boolean;\n        headingLevel: PfAccordionHeadingLevel;\n      };\n      section.expanded = expanded.includes(this.itemValue(item));\n      section.headingLevel = level;\n    }\n  }\n\n  private setExpanded(next: string[]) {\n    this.value = formatValueList(next);\n    this.sync();\n    this.pfChange.emit({ value: this.value, values: next });\n  }\n\n  /**\n   * A section asking to be opened or closed. The group decides, because in\n   * `single` mode the answer depends on what else is open.\n   */\n  @Listen('pfAccordionToggle')\n  handleToggle(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n\n    const item = this.items.find((candidate) => this.itemValue(candidate) === event.detail.value);\n    if (!item || this.isDisabled(item)) return;\n\n    this.setExpanded(\n      toggleDisclosureValue(this.expanded, event.detail.value, {\n        multiple: this.type === 'multiple',\n      }),\n    );\n  }\n\n  /**\n   * The arrows move focus between the headers and open nothing: an accordion's\n   * sections are opened deliberately, unlike a tab strip's panels. Home and\n   * End jump to the first and last enabled header.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n\n    const action = resolveRovingKey(event.key, 'vertical');\n    if (!action) return;\n\n    const enabled = this.items.filter((item) => !this.isDisabled(item));\n    if (enabled.length === 0) return;\n\n    /*\n     * `activeElement` reports the shallowest host, which is the item: the\n     * header button it delegates focus to is inside the item's shadow root.\n     */\n    const currentIndex = enabled.indexOf(document.activeElement as HTMLElement);\n    if (currentIndex === -1) return;\n\n    const nextIndex = resolveListMove(\n      action,\n      enabled.map((_, index) => index),\n      currentIndex,\n    );\n    if (nextIndex < 0) return;\n\n    event.preventDefault();\n    enabled[nextIndex].focus();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-accordion-item/pf-accordion-item.css

@@ -0,0 +1,94 @@
+/*
+ * The rule between sections lives here rather than in the group's sheet,
+ * because `::slotted()` takes a compound selector and no combinator -- there is
+ * no way to say `::slotted(item + item)` from outside. `:host(:first-child)`
+ * says the same thing from in here, and needs no coordination.
+ */
+:host {
+  border-top: 1px solid var(--pf-accordion-border);
+  display: block;
+}
+
+:host(:first-child) {
+  border-top: 0;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.heading {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+}
+
+.trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--pf-accordion-trigger-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  text-align: start;
+  width: 100%;
+}
+
+.trigger:hover:not(:disabled) {
+  background: var(--pf-accordion-trigger-bg-hover);
+}
+
+.trigger:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.icon {
+  align-items: center;
+  color: var(--pf-accordion-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--pf-transition-fast);
+}
+
+:host([expanded]) .icon {
+  transform: rotate(180deg);
+}
+
+/* The 0fr -> 1fr technique, which animates to the content's own height. */
+.panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pf-transition-medium);
+}
+
+:host([expanded]) .panel {
+  grid-template-rows: 1fr;
+}
+
+.content {
+  color: var(--pf-accordion-content-text);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.inner {
+  padding: 0 var(--space-4) var(--space-4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel,
+  .icon {
+    transition: none;
+  }
+}

package/dist/collection/components/pf-accordion-item/pf-accordion-item.js

@@ -0,0 +1,194 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One section inside a `pf-accordion`.
+ *
+ * It owns its header, its panel and the open/close animation; the group owns
+ * only *which* sections are open, because in `single` mode that depends on
+ * what else is. So this element reports that it was clicked and waits to be
+ * told, exactly as `pf-radio-button` does.
+ *
+ * The header is a real `<button>` in the shadow root, which makes it tabbable
+ * with no help and gives Enter and Space for free. `delegatesFocus` is what
+ * lets the group's arrow keys hand focus to it through the host.
+ *
+ * Both IDREFs here point inside this one shadow root, which is the case where
+ * an IDREF resolves — the header names the panel with `aria-controls` and the
+ * panel names the header back with `aria-labelledby`.
+ *
+ * @slot title - the header's label.
+ * @slot - the section's content.
+ * @part heading - the heading element wrapping the header button.
+ * @part trigger - the header button.
+ * @part title - the label's box inside the header.
+ * @part icon - the chevron.
+ * @part panel - the animating box around the content.
+ * @part content - the region holding the content.
+ */
+export class PfAccordionItem {
+    /**
+     * Identifies the section in the group's open set.
+     *
+     * Reflected because the generated bindings set props as *properties*: an
+     * unreflected prop leaves no attribute, and anything selecting on one — a
+     * consumer's stylesheet, or a test — finds nothing. The group reads the
+     * property.
+     */
+    value = '';
+    /** Reflected; the stylesheet and the group's own filtering both read it. */
+    disabled = false;
+    /** Set by the group. Reflected, so the stylesheet can turn the chevron. */
+    expanded = false;
+    /** Set by the group from its own `headingLevel`. */
+    headingLevel = 3;
+    /** Asks the group to open or close this section. The group decides. */
+    pfAccordionToggle;
+    /**
+     * Coerced, because an attribute of a union-literal type arrives as a string:
+     * `heading-level="2"` would otherwise build an `h2` tag out of `"2"` by luck
+     * and compare false to `2` everywhere else. Clamped, so a level outside
+     * h2–h6 cannot produce a tag that is not a heading at all.
+     */
+    get level() {
+        const asNumber = Math.round(Number(this.headingLevel));
+        if (!Number.isFinite(asNumber))
+            return 3;
+        return Math.min(Math.max(asNumber, 2), 6);
+    }
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.pfAccordionToggle.emit({ value: this.value });
+    };
+    render() {
+        /*
+         * A dynamic intrinsic tag, cast to one of the literals: `h('h' + level,
+         * ...)` does not type-check, because Stencil's overload for a plain string
+         * tag types `class` as a className map and rejects the string.
+         */
+        const Heading = `h${this.level}`;
+        return (h(Host, { key: '35e729954b5bd58447dc4d3bc4f9e57e7bf0bdff' }, h(Heading, { key: '455c96a2d76607ee70cc3f6f81a64f43ccc047c8', class: "heading", part: "heading" }, h("button", { key: '4fdeae121e827c2cab00c9f583b0282be828c743', type: "button", id: "trigger", class: "trigger", part: "trigger", "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": "panel", disabled: this.disabled, onClick: this.onClick }, h("span", { key: '10cabf948a5cbe16ddaeedd379e2c5485f92b568', class: "title", part: "title" }, h("slot", { key: '1d050d2bd6a0ed6f0494cd9b4afa96e9abb21211', name: "title" })), h("span", { key: 'f4a3dd3d8f519538f53623cbb9fe24b03b138db6', class: "icon", part: "icon", "aria-hidden": "true" }, h("pf-icon", { key: '53e79af5f641fc306bb6b80dc8166847d084224f', name: "chevron-down" })))), h("div", { key: '2dc77acf0e8cfe6f9ab01af1adb3cec47de80f2f', class: "panel", part: "panel" }, h("div", { key: 'e1531908c103894b176438690f08578b0ed964b6', class: "content", part: "content", id: "panel", role: "region", "aria-labelledby": "trigger", inert: !this.expanded }, h("div", { key: '9f21bf640cd85cd22fc90d1376140f3f74b9a69b', class: "inner", part: "inner" }, h("slot", { key: '3e92f2c1f5cea1e8ab89f67633b0659935505161' }))))));
+    }
+    static get is() { return "pf-accordion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-accordion-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the section in the group's open set.\n\nReflected because the generated bindings set props as *properties*: an\nunreflected prop leaves no attribute, and anything selecting on one \u2014 a\nconsumer's stylesheet, or a test \u2014 finds nothing. The group reads the\nproperty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflected; the stylesheet and the group's own filtering both read it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the group. Reflected, so the stylesheet can turn the chevron."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "PfAccordionHeadingLevel",
+                    "resolved": "2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "PfAccordionHeadingLevel": {
+                            "location": "import",
+                            "path": "../pf-accordion/pf-accordion",
+                            "id": "src/components/pf-accordion/pf-accordion.tsx::PfAccordionHeadingLevel",
+                            "referenceLocation": "PfAccordionHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the group from its own `headingLevel`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfAccordionToggle",
+                "name": "pfAccordionToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Asks the group to open or close this section. The group decides."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pf-accordion-item.js.map

package/dist/collection/components/pf-accordion-item/pf-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-accordion-item.js","sourceRoot":"","sources":["../../../src/components/pf-accordion-item/pf-accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI9E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAMH,MAAM,OAAO,eAAe;IAC1B;;;;;;;OAOG;IACsB,KAAK,GAAG,EAAE,CAAC;IAEpC,4EAA4E;IACnD,QAAQ,GAAG,KAAK,CAAC;IAE1C,2EAA2E;IACnC,QAAQ,GAAG,KAAK,CAAC;IAEzD,oDAAoD;IAC3B,YAAY,GAA4B,CAAC,CAAC;IAEnE,uEAAuE;IAC9D,iBAAiB,CAAmC;IAE7D;;;;;OAKG;IACH,IAAY,KAAK;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,OAAO,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAA4B,CAAC;IACvE,CAAC;IAEO,OAAO,GAAG,GAAG,EAAE;QACrB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,MAAM;QACJ;;;;WAIG;QACH,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAC;QAEzC,OAAO,CACL,EAAC,IAAI;YACH,EAAC,OAAO,qDAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACrC,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,SAAS,EACZ,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,mBACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBACjC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO;oBAErB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;wBAC9B,6DAAM,IAAI,EAAC,OAAO,GAAG,CAChB;oBACP,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM;wBAC/C,gEAAS,IAAI,EAAC,cAAc,GAAW,CAClC,CACA,CACD;YACV,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAM7B,4DACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,QAAQ,qBACG,SAAS,EACzB,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ;oBAErB,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;wBAC7B,8DAAQ,CACJ,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nimport type { PfAccordionHeadingLevel } from '../pf-accordion/pf-accordion';\n\n/**\n * One section inside a `pf-accordion`.\n *\n * It owns its header, its panel and the open/close animation; the group owns\n * only *which* sections are open, because in `single` mode that depends on\n * what else is. So this element reports that it was clicked and waits to be\n * told, exactly as `pf-radio-button` does.\n *\n * The header is a real `<button>` in the shadow root, which makes it tabbable\n * with no help and gives Enter and Space for free. `delegatesFocus` is what\n * lets the group's arrow keys hand focus to it through the host.\n *\n * Both IDREFs here point inside this one shadow root, which is the case where\n * an IDREF resolves — the header names the panel with `aria-controls` and the\n * panel names the header back with `aria-labelledby`.\n *\n * @slot title - the header's label.\n * @slot - the section's content.\n * @part heading - the heading element wrapping the header button.\n * @part trigger - the header button.\n * @part title - the label's box inside the header.\n * @part icon - the chevron.\n * @part panel - the animating box around the content.\n * @part content - the region holding the content.\n */\n@Component({\n  tag: 'pf-accordion-item',\n  styleUrl: 'pf-accordion-item.css',\n  shadow: { delegatesFocus: true },\n})\nexport class PfAccordionItem {\n  /**\n   * Identifies the section in the group's open set.\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. The group reads the\n   * property.\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 turn the chevron. */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  /** Set by the group from its own `headingLevel`. */\n  @Prop({ mutable: true }) headingLevel: PfAccordionHeadingLevel = 3;\n\n  /** Asks the group to open or close this section. The group decides. */\n  @Event() pfAccordionToggle!: EventEmitter<{ value: string }>;\n\n  /**\n   * Coerced, because an attribute of a union-literal type arrives as a string:\n   * `heading-level=\"2\"` would otherwise build an `h2` tag out of `\"2\"` by luck\n   * and compare false to `2` everywhere else. Clamped, so a level outside\n   * h2–h6 cannot produce a tag that is not a heading at all.\n   */\n  private get level(): PfAccordionHeadingLevel {\n    const asNumber = Math.round(Number(this.headingLevel));\n    if (!Number.isFinite(asNumber)) return 3;\n    return Math.min(Math.max(asNumber, 2), 6) as PfAccordionHeadingLevel;\n  }\n\n  private onClick = () => {\n    if (this.disabled) return;\n    this.pfAccordionToggle.emit({ value: this.value });\n  };\n\n  render() {\n    /*\n     * A dynamic intrinsic tag, cast to one of the literals: `h('h' + level,\n     * ...)` does not type-check, because Stencil's overload for a plain string\n     * tag types `class` as a className map and rejects the string.\n     */\n    const Heading = `h${this.level}` as 'h3';\n\n    return (\n      <Host>\n        <Heading class=\"heading\" part=\"heading\">\n          <button\n            type=\"button\"\n            id=\"trigger\"\n            class=\"trigger\"\n            part=\"trigger\"\n            aria-expanded={this.expanded ? 'true' : 'false'}\n            aria-controls=\"panel\"\n            disabled={this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"title\" part=\"title\">\n              <slot name=\"title\" />\n            </span>\n            <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          </button>\n        </Heading>\n        <div class=\"panel\" part=\"panel\">\n          {/*\n            `inert` as well as the collapsed height, because a panel animating\n            to zero still has focusable content in it: without this, tabbing\n            from a closed section's header lands inside the box it just closed.\n          */}\n          <div\n            class=\"content\"\n            part=\"content\"\n            id=\"panel\"\n            role=\"region\"\n            aria-labelledby=\"trigger\"\n            inert={!this.expanded}\n          >\n            <div class=\"inner\" part=\"inner\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}