@patternfly/elements 1.0.0

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@patternfly/elements",
+  "license": "MIT",
+  "version": "1.0.0",
+  "description": "PatternFly Elements",
+  "customElements": "custom-elements.json",
+  "type": "module",
+  "main": "./pfe.min.js",
+  "module": "./pfe.js",
+  "types": "./pfe.d.ts",
+  "exports": {
+    ".": "./pfe.js",
+    "./*": "./*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "analyze": "cem analyze",
+    "build": "wireit",
+    "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js"
+  },
+  "wireit": {
+    "build": {
+      "command": "ttsc -b . --pretty",
+      "dependencies": [
+        "analyze"
+      ]
+    }
+  },
+  "keywords": [
+    "web-components",
+    "date time",
+    "html"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "github:patternfly/patternfly-elements",
+    "directory": "elements"
+  },
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-elements/issues"
+  },
+  "files": [
+    "!*.ts",
+    "custom-elements.json",
+    "**/*.LEGAL.txt",
+    "**/*.css",
+    "**/*.d.ts",
+    "**/*.js",
+    "**/*.js.map",
+    "!custom-elements-manifest.config.js",
+    "!demo/*",
+    "!docs/*",
+    "!test/*"
+  ],
+  "contributors": [
+    "Benny Powers <bennyp@redhat.com>",
+    "Daniel Faucette",
+    "Diwanshi Pandey <diwanshipandey@gmail.com> (https://github.com/diwanshi)",
+    "Ivana Rodriguez (https://github.com/eyevana)",
+    "Kendall Totten",
+    "Kyle Buchanan <kylebuch8@gmail.com> (https://github.com/kylebuch8)",
+    "Luke Dary",
+    "Mark Caron <mark@redhat.com> (https://github.com/markcaron)",
+    "Michael Clayton <mclayton@redhat.com>",
+    "Michael Potter",
+    "Steven Spriggs <sspriggs@redhat.com",
+    "castastrophe (https://github.com/castastrophe)",
+    "Wes Ruvalcaba"
+  ],
+  "dependencies": {
+    "@patternfly/pfe-core": "^2.0.0-beta.14",
+    "lit": "2.3.0",
+    "tslib": "^2.4.1"
+  }
+}

package/pf-accordion/BaseAccordion.css

@@ -0,0 +1,5 @@
+:host {
+  transition-property: box-shadow, border;
+  transition-timing-function: ease-out;
+  transition-duration: 1ms;
+}

package/pf-accordion/BaseAccordion.d.ts

@@ -0,0 +1,60 @@
+import type { TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+import { ComposedEvent } from '@patternfly/pfe-core';
+import { BaseAccordionHeader } from './BaseAccordionHeader.js';
+import { BaseAccordionPanel } from './BaseAccordionPanel.js';
+export declare class AccordionExpandEvent extends ComposedEvent {
+    toggle: BaseAccordionHeader;
+    panel: BaseAccordionPanel;
+    constructor(toggle: BaseAccordionHeader, panel: BaseAccordionPanel);
+}
+export declare class AccordionCollapseEvent extends ComposedEvent {
+    toggle: BaseAccordionHeader;
+    panel: BaseAccordionPanel;
+    constructor(toggle: BaseAccordionHeader, panel: BaseAccordionPanel);
+}
+export declare abstract class BaseAccordion extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    static isAccordion(target: EventTarget | null): target is BaseAccordion;
+    static isHeader(target: EventTarget | null): target is BaseAccordionHeader;
+    static isPanel(target: EventTarget | null): target is BaseAccordionPanel;
+    /**
+     * Sets and reflects the currently expanded accordion 0-based indexes.
+     * Use commas to separate multiple indexes.
+     * ```html
+     * <pf-accordion expanded-index="1,2">
+     *   ...
+     * </pf-accordion>
+     * ```
+     */
+    expandedIndex: number[];
+    get headers(): BaseAccordionHeader[];
+    get panels(): BaseAccordionPanel[];
+    protected expandedSets: Set<number>;
+    protected getUpdateComplete(): Promise<boolean>;
+    connectedCallback(): void;
+    render(): TemplateResult;
+    firstUpdated(): Promise<void>;
+    updateAccessibility(): void;
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.
+     */
+    toggle(index: number): Promise<void>;
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to expand.
+     */
+    expand(index: number, parentAccordion?: BaseAccordion): Promise<void>;
+    /**
+     * Expands all accordion items.
+     */
+    expandAll(): Promise<void>;
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to collapse.
+     */
+    collapse(index: number): Promise<void>;
+    /**
+     * Collapses all accordion items.
+     */
+    collapseAll(): Promise<void>;
+}

package/pf-accordion/BaseAccordion.js

@@ -0,0 +1,332 @@
+var _BaseAccordion_instances, _BaseAccordion_logger, _BaseAccordion_styles, _BaseAccordion_transitionDuration, _BaseAccordion_initialized, _BaseAccordion_mo, _BaseAccordion_init, _BaseAccordion_panelForHeader, _BaseAccordion_expandHeader, _BaseAccordion_expandPanel, _BaseAccordion_collapseHeader, _BaseAccordion_collapsePanel, _BaseAccordion_getAnimationDuration, _BaseAccordion_animate, _BaseAccordion_onChange, _BaseAccordion_onKeydown, _BaseAccordion_allHeaders, _BaseAccordion_allPanels, _BaseAccordion_previousHeader, _BaseAccordion_nextHeader, _BaseAccordion_firstHeader, _BaseAccordion_lastHeader, _BaseAccordion_getIndex;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { observed } from '@patternfly/pfe-core/decorators.js';
+import { NumberListConverter, ComposedEvent } from '@patternfly/pfe-core';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { AccordionHeaderChangeEvent, BaseAccordionHeader } from './BaseAccordionHeader.js';
+import { BaseAccordionPanel } from './BaseAccordionPanel.js';
+import { css } from "lit";
+const style = css `:host {\n  transition-property: box-shadow, border;\n  transition-timing-function: ease-out;\n  transition-duration: 1ms;\n}\n`;
+const CSS_TIMING_UNITS_RE = /^[0-9.]+(?<unit>[a-zA-Z]+)/g;
+export class AccordionExpandEvent extends ComposedEvent {
+    constructor(toggle, panel) {
+        super('expand');
+        this.toggle = toggle;
+        this.panel = panel;
+    }
+}
+export class AccordionCollapseEvent extends ComposedEvent {
+    constructor(toggle, panel) {
+        super('collapse');
+        this.toggle = toggle;
+        this.panel = panel;
+    }
+}
+export class BaseAccordion extends LitElement {
+    constructor() {
+        super(...arguments);
+        _BaseAccordion_instances.add(this);
+        /**
+         * Sets and reflects the currently expanded accordion 0-based indexes.
+         * Use commas to separate multiple indexes.
+         * ```html
+         * <pf-accordion expanded-index="1,2">
+         *   ...
+         * </pf-accordion>
+         * ```
+         */
+        this.expandedIndex = [];
+        this.expandedSets = new Set();
+        _BaseAccordion_logger.set(this, new Logger(this));
+        _BaseAccordion_styles.set(this, getComputedStyle(this));
+        _BaseAccordion_transitionDuration.set(this, __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_getAnimationDuration).call(this));
+        // actually is read in #init, by the `||=` operator
+        _BaseAccordion_initialized.set(this, false);
+        _BaseAccordion_mo.set(this, new MutationObserver(() => __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_init).call(this)));
+    }
+    static isAccordion(target) {
+        return target instanceof BaseAccordion;
+    }
+    static isHeader(target) {
+        return target instanceof BaseAccordionHeader;
+    }
+    static isPanel(target) {
+        return target instanceof BaseAccordionPanel;
+    }
+    get headers() {
+        return __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_allHeaders).call(this);
+    }
+    get panels() {
+        return __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_allPanels).call(this);
+    }
+    async getUpdateComplete() {
+        const c = await super.getUpdateComplete();
+        const results = await Promise.all([
+            ...__classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_allHeaders).call(this).map(x => x.updateComplete),
+            ...__classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_allPanels).call(this).map(x => x.updateComplete),
+        ]);
+        return c && results.every(Boolean);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('change', __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_onChange));
+        this.addEventListener('keydown', __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_onKeydown));
+        __classPrivateFieldGet(this, _BaseAccordion_mo, "f").observe(this, { childList: true });
+        __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_init).call(this);
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+    async firstUpdated() {
+        const { headers } = this;
+        for (const header of headers.filter(x => x.expanded)) {
+            await this.expand(headers.indexOf(header));
+        }
+    }
+    updateAccessibility() {
+        const { headers } = this;
+        // For each header in the accordion, attach the aria connections
+        headers.forEach(header => {
+            const panel = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_panelForHeader).call(this, header);
+            if (panel) {
+                header.setAttribute('aria-controls', panel.id);
+                panel.setAttribute('aria-labelledby', header.id);
+                panel.hidden = !panel.expanded;
+            }
+        });
+    }
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.
+     */
+    async toggle(index) {
+        const { headers } = this;
+        const header = headers[index];
+        if (!header.expanded) {
+            await this.expand(index);
+        }
+        else {
+            await this.collapse(index);
+        }
+    }
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to expand.
+     */
+    async expand(index, parentAccordion) {
+        if (index === -1) {
+            return;
+        }
+        const allHeaders = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_allHeaders).call(this, parentAccordion);
+        const header = allHeaders[index];
+        if (!header) {
+            return;
+        }
+        const panel = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_panelForHeader).call(this, header);
+        if (!panel) {
+            return;
+        }
+        // If the header and panel exist, open both
+        __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_expandHeader).call(this, header, index),
+            __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_expandPanel).call(this, panel),
+            header.focus();
+        this.dispatchEvent(new AccordionExpandEvent(header, panel));
+        await this.updateComplete;
+    }
+    /**
+     * Expands all accordion items.
+     */
+    async expandAll() {
+        this.headers.forEach(header => __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_expandHeader).call(this, header));
+        this.panels.forEach(panel => __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_expandPanel).call(this, panel));
+        await this.updateComplete;
+    }
+    /**
+     * Accepts a 0-based index value (integer) for the set of accordion items to collapse.
+     */
+    async collapse(index) {
+        const header = this.headers.at(index);
+        const panel = this.panels.at(index);
+        if (!header || !panel) {
+            return;
+        }
+        __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_collapseHeader).call(this, header);
+        __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_collapsePanel).call(this, panel);
+        this.dispatchEvent(new AccordionCollapseEvent(header, panel));
+        await this.updateComplete;
+    }
+    /**
+     * Collapses all accordion items.
+     */
+    async collapseAll() {
+        this.headers.forEach(header => __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_collapseHeader).call(this, header));
+        this.panels.forEach(panel => __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_collapsePanel).call(this, panel));
+        await this.updateComplete;
+    }
+}
+_BaseAccordion_logger = new WeakMap(), _BaseAccordion_styles = new WeakMap(), _BaseAccordion_transitionDuration = new WeakMap(), _BaseAccordion_initialized = new WeakMap(), _BaseAccordion_mo = new WeakMap(), _BaseAccordion_instances = new WeakSet(), _BaseAccordion_init = 
+/**
+ * Initialize the accordion by connecting headers and panels
+ * with aria controls and labels; set up the default disclosure
+ * state if not set by the author; and check the URL for default
+ * open
+ */
+async function _BaseAccordion_init() {
+    __classPrivateFieldSet(this, _BaseAccordion_initialized, __classPrivateFieldGet(this, _BaseAccordion_initialized, "f") || !!await this.updateComplete, "f");
+    this.updateAccessibility();
+}, _BaseAccordion_panelForHeader = function _BaseAccordion_panelForHeader(header) {
+    const next = header.nextElementSibling;
+    if (!BaseAccordion.isPanel(next)) {
+        return void __classPrivateFieldGet(this, _BaseAccordion_logger, "f").error('Sibling element to a header needs to be a panel');
+    }
+    else {
+        return next;
+    }
+}, _BaseAccordion_expandHeader = function _BaseAccordion_expandHeader(header, index = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_getIndex).call(this, header)) {
+    // If this index is not already listed in the expandedSets array, add it
+    this.expandedSets.add(index);
+    header.expanded = true;
+}, _BaseAccordion_expandPanel = async function _BaseAccordion_expandPanel(panel) {
+    panel.expanded = true;
+    panel.hidden = false;
+    await panel.updateComplete;
+    const rect = panel.getBoundingClientRect();
+    __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_animate).call(this, panel, 0, rect.height);
+}, _BaseAccordion_collapseHeader = async function _BaseAccordion_collapseHeader(header, index = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_getIndex).call(this, header)) {
+    if (!this.expandedSets) {
+        await this.updateComplete;
+    }
+    this.expandedSets.delete(index);
+    header.expanded = false;
+    await header.updateComplete;
+}, _BaseAccordion_collapsePanel = async function _BaseAccordion_collapsePanel(panel) {
+    await panel.updateComplete;
+    if (!panel.expanded) {
+        return;
+    }
+    const rect = panel.getBoundingClientRect();
+    panel.expanded = false;
+    panel.hidden = true;
+    __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_animate).call(this, panel, rect.height, 0);
+    await panel.updateComplete;
+}, _BaseAccordion_getAnimationDuration = function _BaseAccordion_getAnimationDuration() {
+    if ('computedStyleMap' in this) {
+        // @ts-expect-error: https://caniuse.com/?search=computedStyleMap
+        return this.computedStyleMap().get('transition-duration')?.to('ms').value;
+    }
+    else {
+        const { transitionDuration } = __classPrivateFieldGet(this, _BaseAccordion_styles, "f");
+        const groups = CSS_TIMING_UNITS_RE.exec(transitionDuration)?.groups;
+        if (!groups) {
+            return 0;
+        }
+        const parsed = parseFloat(transitionDuration);
+        if (groups.unit === 's') {
+            return parsed * 1000;
+        }
+        else {
+            return parsed;
+        }
+    }
+}, _BaseAccordion_animate = async function _BaseAccordion_animate(panel, start, end) {
+    if (panel) {
+        const header = panel.previousElementSibling;
+        const transitionDuration = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_getAnimationDuration).call(this);
+        if (transitionDuration) {
+            __classPrivateFieldSet(this, _BaseAccordion_transitionDuration, transitionDuration, "f");
+        }
+        const duration = __classPrivateFieldGet(this, _BaseAccordion_transitionDuration, "f") ?? 0;
+        header?.classList.add('animating');
+        panel.classList.add('animating');
+        const animation = panel.animate({ height: [`${start}px`, `${end}px`] }, { duration });
+        animation.play();
+        await animation.finished;
+        header?.classList.remove('animating');
+        panel.classList.remove('animating');
+        panel.style.removeProperty('height');
+        panel.hidden = !panel.expanded;
+    }
+}, _BaseAccordion_onChange = function _BaseAccordion_onChange(event) {
+    if (this.classList.contains('animating')) {
+        return;
+    }
+    const index = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_getIndex).call(this, event.target);
+    if (event.expanded) {
+        this.expand(index, event.accordion);
+    }
+    else {
+        this.collapse(index);
+    }
+}, _BaseAccordion_onKeydown = 
+/**
+ * @see https://www.w3.org/TR/wai-aria-practices/#accordion
+ */
+async function _BaseAccordion_onKeydown(evt) {
+    const currentHeader = evt.target;
+    if (!BaseAccordion.isHeader(currentHeader)) {
+        return;
+    }
+    let newHeader;
+    switch (evt.key) {
+        case 'ArrowDown':
+            evt.preventDefault();
+            newHeader = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_nextHeader).call(this);
+            break;
+        case 'ArrowUp':
+            evt.preventDefault();
+            newHeader = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_previousHeader).call(this);
+            break;
+        case 'Home':
+            evt.preventDefault();
+            newHeader = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_firstHeader).call(this);
+            break;
+        case 'End':
+            evt.preventDefault();
+            newHeader = __classPrivateFieldGet(this, _BaseAccordion_instances, "m", _BaseAccordion_lastHeader).call(this);
+            break;
+    }
+    newHeader?.focus?.();
+}, _BaseAccordion_allHeaders = function _BaseAccordion_allHeaders(accordion = this) {
+    return Array.from(accordion.children).filter(BaseAccordion.isHeader);
+}, _BaseAccordion_allPanels = function _BaseAccordion_allPanels(accordion = this) {
+    return Array.from(accordion.children).filter(BaseAccordion.isPanel);
+}, _BaseAccordion_previousHeader = function _BaseAccordion_previousHeader() {
+    const { headers } = this;
+    const newIndex = headers.findIndex(header => header.matches(':focus,:focus-within')) - 1;
+    return headers[(newIndex + headers.length) % headers.length];
+}, _BaseAccordion_nextHeader = function _BaseAccordion_nextHeader() {
+    const { headers } = this;
+    const newIndex = headers.findIndex(header => header.matches(':focus,:focus-within')) + 1;
+    return headers[newIndex % headers.length];
+}, _BaseAccordion_firstHeader = function _BaseAccordion_firstHeader() {
+    return this.headers.at(0);
+}, _BaseAccordion_lastHeader = function _BaseAccordion_lastHeader() {
+    return this.headers.at(-1);
+}, _BaseAccordion_getIndex = function _BaseAccordion_getIndex(el) {
+    if (BaseAccordion.isHeader(el)) {
+        return this.headers.findIndex(header => header.id === el.id);
+    }
+    if (BaseAccordion.isPanel(el)) {
+        return this.panels.findIndex(panel => panel.id === el.id);
+    }
+    __classPrivateFieldGet(this, _BaseAccordion_logger, "f").warn('The #getIndex method expects to receive a header or panel element.');
+    return -1;
+};
+BaseAccordion.styles = [style];
+__decorate([
+    observed(async function expandedIndexChanged(oldVal, newVal) {
+        if (oldVal && oldVal !== newVal) {
+            await this.collapseAll();
+            for (const i of this.expandedIndex) {
+                await this.expand(i, this);
+            }
+        }
+    }),
+    property({
+        attribute: 'expanded-index',
+        converter: NumberListConverter
+    })
+], BaseAccordion.prototype, "expandedIndex", void 0);
+//# sourceMappingURL=BaseAccordion.js.map

package/pf-accordion/BaseAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAccordion.js","sourceRoot":"","sources":["BaseAccordion.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { NumberListConverter, ComposedEvent } from '@patternfly/pfe-core';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { AccordionHeaderChangeEvent, BaseAccordionHeader } from './BaseAccordionHeader.js';\nimport { BaseAccordionPanel } from './BaseAccordionPanel.js';\n\nimport style from './BaseAccordion.css';\n\nconst CSS_TIMING_UNITS_RE = /^[0-9.]+(?<unit>[a-zA-Z]+)/g;\n\nexport class AccordionExpandEvent extends ComposedEvent {\n  constructor(\n    public toggle: BaseAccordionHeader,\n    public panel: BaseAccordionPanel,\n  ) {\n    super('expand');\n  }\n}\n\nexport class AccordionCollapseEvent extends ComposedEvent {\n  constructor(\n    public toggle: BaseAccordionHeader,\n    public panel: BaseAccordionPanel,\n  ) {\n    super('collapse');\n  }\n}\n\nexport abstract class BaseAccordion extends LitElement {\n  static readonly styles = [style];\n\n  static isAccordion(target: EventTarget | null): target is BaseAccordion {\n    return target instanceof BaseAccordion;\n  }\n\n  static isHeader(target: EventTarget | null): target is BaseAccordionHeader {\n    return target instanceof BaseAccordionHeader;\n  }\n\n  static isPanel(target: EventTarget | null): target is BaseAccordionPanel {\n    return target instanceof BaseAccordionPanel;\n  }\n\n  /**\n   * Sets and reflects the currently expanded accordion 0-based indexes.\n   * Use commas to separate multiple indexes.\n   * ```html\n   * <pf-accordion expanded-index=\"1,2\">\n   *   ...\n   * </pf-accordion>\n   * ```\n   */\n  @observed(async function expandedIndexChanged(this: BaseAccordion, oldVal: unknown, newVal: unknown) {\n    if (oldVal && oldVal !== newVal) {\n      await this.collapseAll();\n      for (const i of this.expandedIndex) {\n        await this.expand(i, this);\n      }\n    }\n  })\n  @property({\n    attribute: 'expanded-index',\n    converter: NumberListConverter\n  }) expandedIndex: number[] = [];\n\n  get headers() {\n    return this.#allHeaders();\n  }\n\n  get panels() {\n    return this.#allPanels();\n  }\n\n  protected expandedSets = new Set<number>();\n\n  #logger = new Logger(this);\n\n  #styles = getComputedStyle(this);\n\n  #transitionDuration = this.#getAnimationDuration();\n\n  // actually is read in #init, by the `||=` operator\n  #initialized = false;\n\n  protected override async getUpdateComplete(): Promise<boolean> {\n    const c = await super.getUpdateComplete();\n    const results = await Promise.all([\n      ...this.#allHeaders().map(x => x.updateComplete),\n      ...this.#allPanels().map(x => x.updateComplete),\n    ]);\n    return c && results.every(Boolean);\n  }\n\n  #mo = new MutationObserver(() => this.#init());\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('change', this.#onChange as EventListener);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.#mo.observe(this, { childList: true });\n    this.#init();\n  }\n\n  render(): TemplateResult {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  async firstUpdated() {\n    const { headers } = this;\n    for (const header of headers.filter(x => x.expanded)) {\n      await this.expand(headers.indexOf(header));\n    }\n  }\n\n  /**\n   * Initialize the accordion by connecting headers and panels\n   * with aria controls and labels; set up the default disclosure\n   * state if not set by the author; and check the URL for default\n   * open\n   */\n  async #init() {\n    this.#initialized ||= !!await this.updateComplete;\n    this.updateAccessibility();\n  }\n\n  #panelForHeader(header: BaseAccordionHeader) {\n    const next = header.nextElementSibling;\n    if (!BaseAccordion.isPanel(next)) {\n      return void this.#logger.error('Sibling element to a header needs to be a panel');\n    } else {\n      return next;\n    }\n  }\n\n  #expandHeader(header: BaseAccordionHeader, index = this.#getIndex(header)) {\n    // If this index is not already listed in the expandedSets array, add it\n    this.expandedSets.add(index);\n    header.expanded = true;\n  }\n\n  async #expandPanel(panel: BaseAccordionPanel) {\n    panel.expanded = true;\n    panel.hidden = false;\n\n    await panel.updateComplete;\n\n    const rect = panel.getBoundingClientRect();\n\n    this.#animate(panel, 0, rect.height);\n  }\n\n  async #collapseHeader(header: BaseAccordionHeader, index = this.#getIndex(header)) {\n    if (!this.expandedSets) {\n      await this.updateComplete;\n    }\n    this.expandedSets.delete(index);\n    header.expanded = false;\n    await header.updateComplete;\n  }\n\n  async #collapsePanel(panel: BaseAccordionPanel) {\n    await panel.updateComplete;\n    if (!panel.expanded) {\n      return;\n    }\n\n    const rect = panel.getBoundingClientRect();\n\n    panel.expanded = false;\n    panel.hidden = true;\n\n    this.#animate(panel, rect.height, 0);\n    await panel.updateComplete;\n  }\n\n  #getAnimationDuration(): number {\n    if ('computedStyleMap' in this) {\n      // @ts-expect-error: https://caniuse.com/?search=computedStyleMap\n      return this.computedStyleMap().get('transition-duration')?.to('ms').value;\n    } else {\n      const { transitionDuration } = this.#styles;\n\n      const groups = CSS_TIMING_UNITS_RE.exec(transitionDuration)?.groups;\n\n      if (!groups) {\n        return 0;\n      }\n\n      const parsed = parseFloat(transitionDuration);\n\n      if (groups.unit === 's') {\n        return parsed * 1000;\n      } else {\n        return parsed;\n      }\n    }\n  }\n\n  async #animate(panel: BaseAccordionPanel, start: number, end: number) {\n    if (panel) {\n      const header = panel.previousElementSibling;\n\n      const transitionDuration = this.#getAnimationDuration();\n      if (transitionDuration) {\n        this.#transitionDuration = transitionDuration;\n      }\n\n      const duration = this.#transitionDuration ?? 0;\n\n      header?.classList.add('animating');\n      panel.classList.add('animating');\n\n      const animation = panel.animate({ height: [`${start}px`, `${end}px`] }, { duration });\n      animation.play();\n      await animation.finished;\n\n      header?.classList.remove('animating');\n      panel.classList.remove('animating');\n\n      panel.style.removeProperty('height');\n      panel.hidden = !panel.expanded;\n    }\n  }\n\n  #onChange(event: AccordionHeaderChangeEvent) {\n    if (this.classList.contains('animating')) {\n      return;\n    }\n\n    const index = this.#getIndex(event.target as Element);\n\n    if (event.expanded) {\n      this.expand(index, event.accordion);\n    } else {\n      this.collapse(index);\n    }\n  }\n\n  /**\n   * @see https://www.w3.org/TR/wai-aria-practices/#accordion\n   */\n  async #onKeydown(evt: KeyboardEvent) {\n    const currentHeader = evt.target as Element;\n\n    if (!BaseAccordion.isHeader(currentHeader)) {\n      return;\n    }\n\n    let newHeader: BaseAccordionHeader | undefined;\n\n    switch (evt.key) {\n      case 'ArrowDown':\n        evt.preventDefault();\n        newHeader = this.#nextHeader();\n        break;\n      case 'ArrowUp':\n        evt.preventDefault();\n        newHeader = this.#previousHeader();\n        break;\n      case 'Home':\n        evt.preventDefault();\n        newHeader = this.#firstHeader();\n        break;\n      case 'End':\n        evt.preventDefault();\n        newHeader = this.#lastHeader();\n        break;\n    }\n\n    newHeader?.focus?.();\n  }\n\n  #allHeaders(accordion: BaseAccordion = this): BaseAccordionHeader[] {\n    return Array.from(accordion.children).filter(BaseAccordion.isHeader);\n  }\n\n  #allPanels(accordion: BaseAccordion = this): BaseAccordionPanel[] {\n    return Array.from(accordion.children).filter(BaseAccordion.isPanel);\n  }\n\n  #previousHeader() {\n    const { headers } = this;\n    const newIndex = headers.findIndex(header => header.matches(':focus,:focus-within')) - 1;\n    return headers[(newIndex + headers.length) % headers.length];\n  }\n\n  #nextHeader() {\n    const { headers } = this;\n    const newIndex = headers.findIndex(header => header.matches(':focus,:focus-within')) + 1;\n    return headers[newIndex % headers.length];\n  }\n\n  #firstHeader() {\n    return this.headers.at(0);\n  }\n\n  #lastHeader() {\n    return this.headers.at(-1);\n  }\n\n  #getIndex(el: Element | null) {\n    if (BaseAccordion.isHeader(el)) {\n      return this.headers.findIndex(header => header.id === el.id);\n    }\n\n    if (BaseAccordion.isPanel(el)) {\n      return this.panels.findIndex(panel => panel.id === el.id);\n    }\n\n    this.#logger.warn('The #getIndex method expects to receive a header or panel element.');\n    return -1;\n  }\n\n  public updateAccessibility() {\n    const { headers } = this;\n\n    // For each header in the accordion, attach the aria connections\n    headers.forEach(header => {\n      const panel = this.#panelForHeader(header);\n      if (panel) {\n        header.setAttribute('aria-controls', panel.id);\n        panel.setAttribute('aria-labelledby', header.id);\n        panel.hidden = !panel.expanded;\n      }\n    });\n  }\n\n  /**\n   * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n   */\n  public async toggle(index: number) {\n    const { headers } = this;\n    const header = headers[index];\n\n    if (!header.expanded) {\n      await this.expand(index);\n    } else {\n      await this.collapse(index);\n    }\n  }\n\n  /**\n   * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n   */\n  public async expand(index: number, parentAccordion?: BaseAccordion) {\n    if (index === -1) {\n      return;\n    }\n\n    const allHeaders: Array<BaseAccordionHeader> = this.#allHeaders(parentAccordion);\n\n    const header = allHeaders[index];\n    if (!header) {\n      return;\n    }\n\n    const panel = this.#panelForHeader(header);\n    if (!panel) {\n      return;\n    }\n\n    // If the header and panel exist, open both\n    this.#expandHeader(header, index),\n    this.#expandPanel(panel),\n\n    header.focus();\n\n    this.dispatchEvent(new AccordionExpandEvent(header, panel));\n\n    await this.updateComplete;\n  }\n\n  /**\n   * Expands all accordion items.\n   */\n  public async expandAll() {\n    this.headers.forEach(header => this.#expandHeader(header));\n    this.panels.forEach(panel => this.#expandPanel(panel));\n    await this.updateComplete;\n  }\n\n  /**\n   * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n   */\n  public async collapse(index: number) {\n    const header = this.headers.at(index);\n    const panel = this.panels.at(index);\n\n    if (!header || !panel) {\n      return;\n    }\n\n    this.#collapseHeader(header);\n    this.#collapsePanel(panel);\n\n    this.dispatchEvent(new AccordionCollapseEvent(header, panel));\n    await this.updateComplete;\n  }\n\n  /**\n   * Collapses all accordion items.\n   */\n  public async collapseAll() {\n    this.headers.forEach(header => this.#collapseHeader(header));\n    this.panels.forEach(panel => this.#collapsePanel(panel));\n    await this.updateComplete;\n  }\n}\n"]}

package/pf-accordion/BaseAccordionHeader.css

@@ -0,0 +1,39 @@
+#heading {
+  font-size: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+button,
+a {
+  cursor: pointer;
+}
+
+.toggle,
+.toggle:before,
+.toggle:after {
+  padding: 0;
+  margin: 0;
+}
+
+.toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border: 0;
+}
+
+.toggle:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/pf-accordion/BaseAccordionHeader.d.ts

@@ -0,0 +1,27 @@
+import type { TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+import { BaseAccordion } from './BaseAccordion.js';
+import { ComposedEvent } from '@patternfly/pfe-core';
+export declare class AccordionHeaderChangeEvent extends ComposedEvent {
+    expanded: boolean;
+    toggle: BaseAccordionHeader;
+    accordion: BaseAccordion;
+    constructor(expanded: boolean, toggle: BaseAccordionHeader, accordion: BaseAccordion);
+}
+export declare abstract class BaseAccordionHeader extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+    };
+    expanded: boolean;
+    headingText: string;
+    headingTag: string;
+    connectedCallback(): void;
+    /** Template hook: before </button> */
+    renderAfterButton?(): TemplateResult;
+    render(): TemplateResult;
+}