@momentum-design/components 0.100.1 → 0.101.0

package/dist/components/accordion/accordion.component.d.ts

@@ -0,0 +1,76 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import AccordionButton from '../accordionbutton/accordionbutton.component';
+/**
+ * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ *
+ * The header section contains:
+ * - Prefix Icon
+ * - Header Text
+ * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.
+ * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.
+ *
+ * The body section contains:
+ * - Default slot - User can place any content inside the body section.
+ *
+ * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
+ * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
+ * There are two sizes of accordion, one is small and the other is large.
+ * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ *
+ * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
+ * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ *
+ * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.
+ *
+ * @tagname mdc-accordion
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot leading-controls - The leading controls slot of the accordion on the header section.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section.
+ * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
+ *
+ * @event shown - (React: onShown) This event is triggered when the accordion is expanded.
+ *
+ * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.
+ * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
+ *
+ * @csspart header-section - The header section of the accordion.
+ * @csspart leading-header - The leading header of the accordion.
+ * @csspart trailing-header - The trailing header of the accordion.
+ * @csspart trailing-header__button - The trailing header button of the accordion.
+ * @csspart body-section - The body section of the accordion.
+ */
+declare class Accordion extends AccordionButton {
+    /** @internal */
+    leadingControlsSlot: Array<HTMLElement>;
+    /** @internal */
+    trailingControlsSlot: Array<HTMLElement>;
+    /**
+     * Handles property changes for the accordion.
+     * If the disabled property is updated, applies the same disabled state to all elements in the leading and trailing controls slots.
+     * @param changedProperties - The changed properties of the accordion.
+     */
+    update(changedProperties: PropertyValues): void;
+    /**
+     * Renders the header section of the accordion.
+     * This includes the leading icon, text and controls, and the trailing controls.
+     * The trailing controls include the expand/collapse button.
+     * The button is disabled if the accordion is disabled.
+     * The button is also given the aria-controls attribute set to the id of the body section.
+     * The button is also given the aria-expanded attribute set to the expanded state of the accordion.
+     * The prefix icon of the button is set to the expanded state of the accordion.
+     * @returns The rendered header section of the accordion.
+     */
+    renderHeader(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Accordion;

package/dist/components/accordion/accordion.component.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ROLE } from '../../utils/roles';
+import AccordionButton from '../accordionbutton/accordionbutton.component';
+import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
+import styles from './accordion.styles';
+/**
+ * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
+ *
+ * The header section contains:
+ * - Prefix Icon
+ * - Header Text
+ * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.
+ * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.
+ *
+ * The body section contains:
+ * - Default slot - User can place any content inside the body section.
+ *
+ * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
+ * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
+ * There are two sizes of accordion, one is small and the other is large.
+ * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ *
+ * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
+ * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ *
+ * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.
+ *
+ * @tagname mdc-accordion
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot leading-controls - The leading controls slot of the accordion on the header section.
+ * @slot trailing-controls - The trailing controls slot of the accordion on the header section.
+ * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
+ *
+ * @event shown - (React: onShown) This event is triggered when the accordion is expanded.
+ *
+ * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.
+ * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.
+ *
+ * @csspart header-section - The header section of the accordion.
+ * @csspart leading-header - The leading header of the accordion.
+ * @csspart trailing-header - The trailing header of the accordion.
+ * @csspart trailing-header__button - The trailing header button of the accordion.
+ * @csspart body-section - The body section of the accordion.
+ */
+class Accordion extends AccordionButton {
+    /**
+     * Handles property changes for the accordion.
+     * If the disabled property is updated, applies the same disabled state to all elements in the leading and trailing controls slots.
+     * @param changedProperties - The changed properties of the accordion.
+     */
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('disabled')) {
+            [...this.leadingControlsSlot, ...this.trailingControlsSlot].forEach(element => {
+                if (this.disabled) {
+                    element.setAttribute('disabled', '');
+                }
+                else {
+                    element.removeAttribute('disabled');
+                }
+            });
+        }
+    }
+    /**
+     * Renders the header section of the accordion.
+     * This includes the leading icon, text and controls, and the trailing controls.
+     * The trailing controls include the expand/collapse button.
+     * The button is disabled if the accordion is disabled.
+     * The button is also given the aria-controls attribute set to the id of the body section.
+     * The button is also given the aria-expanded attribute set to the expanded state of the accordion.
+     * The prefix icon of the button is set to the expanded state of the accordion.
+     * @returns The rendered header section of the accordion.
+     */
+    renderHeader() {
+        return html `
+      <div part="header-section">
+        <div part="leading-header">
+          ${this.renderIcon(this.prefixIcon)}
+          <div role="${ROLE.HEADING}" aria-level="${this.dataAriaLevel}">${this.renderHeadingText()}</div>
+          <slot name="leading-controls"></slot>
+        </div>
+        <div part="trailing-header">
+          <slot name="trailing-controls"></slot>
+          <mdc-button
+            part="trailing-header__button"
+            ?disabled="${this.disabled}"
+            @click="${this.handleHeaderClick}"
+            aria-controls="${this.bodySectionId}"
+            aria-expanded="${this.expanded}"
+            title="${ifDefined(this.headerText)}"
+            prefix-icon="${this.getArrowIconName()}"
+            variant="${BUTTON_VARIANTS.TERTIARY}"
+            size="${ICON_BUTTON_SIZES[20]}"
+          ></mdc-button>
+        </div>
+      </div>
+    `;
+    }
+}
+Accordion.styles = [...AccordionButton.styles, ...styles];
+__decorate([
+    queryAssignedElements({ slot: 'leading-controls' }),
+    __metadata("design:type", Array)
+], Accordion.prototype, "leadingControlsSlot", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trailing-controls' }),
+    __metadata("design:type", Array)
+], Accordion.prototype, "trailingControlsSlot", void 0);
+export default Accordion;

package/dist/components/accordion/accordion.constants.d.ts

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-accordion";
+export { TAG_NAME };

package/dist/components/accordion/accordion.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('accordion');
+export { TAG_NAME };

package/dist/components/accordion/accordion.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/accordion/accordion.styles.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+const styles = css `
+  :host::part(header-section) {
+    display: flex;
+    align-items: center;
+    cursor: unset;
+    justify-content: space-between;
+  }
+  :host::part(header-section):hover,
+  :host::part(header-section):active {
+    background-color: unset;
+  }
+  :host::part(trailing-header__button) {
+    margin: 0.125rem;
+  }
+`;
+export default [styles];

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,10 @@
+import '../button';
+import '../icon';
+import '../text';
+import Accordion from './accordion.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-accordion']: Accordion;
+    }
+}
+export default Accordion;

package/dist/components/accordion/index.js

@@ -0,0 +1,7 @@
+import '../button';
+import '../icon';
+import '../text';
+import Accordion from './accordion.component';
+import { TAG_NAME } from './accordion.constants';
+Accordion.register(TAG_NAME);
+export default Accordion;

package/dist/components/accordionbutton/accordionbutton.component.d.ts

@@ -0,0 +1,121 @@
+import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
+import { nothing } from 'lit';
+import { Component } from '../../models';
+import type { Size } from '../accordiongroup/accordiongroup.types';
+import type { IconNames } from '../icon/icon.types';
+import type { IconName, Variant } from './accordionbutton.types';
+declare const AccordionButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+/**
+ * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
+ *
+ * The header section contains:
+ * - Prefix Icon
+ * - Header Text
+ *
+ * The body section contains:
+ * - Default slot - User can place any content inside the body section.
+ *
+ * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
+ * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
+ * There are two sizes of accordion, one is small and the other is large.
+ * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ *
+ * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
+ * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ *
+ * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
+ *
+ * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.
+ *
+ * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.
+ *
+ * @tagname mdc-accordionbutton
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
+ *
+ * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.
+ *
+ * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
+ *
+ * @csspart header-section - The header section of the accordion button.
+ * @csspart header-button-section - The header button section of the accordion button.
+ * @csspart leading-header - The leading header of the accordion button.
+ * @csspart trailing-header - The trailing header of the accordion button.
+ * @csspart trailing-header__icon - The trailing header icon of the accordion button.
+ * @csspart body-section - The body section of the accordion button.
+ */
+declare class AccordionButton extends AccordionButton_base {
+    /**
+     * The size of the accordion item.
+     * @default 'small'
+     */
+    size: Size;
+    /**
+     * The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.
+     * @default 'default'
+     */
+    variant: Variant;
+    /**
+     * The aria level of the accordion component.
+     * @default 3
+     */
+    dataAriaLevel: number;
+    /**
+     * The visibility of the accordion button.
+     * @default false
+     */
+    expanded: boolean;
+    /**
+     * The header text of the accordion item.
+     */
+    headerText?: string;
+    /**
+     * The leading icon that is displayed before the header text.
+     */
+    prefixIcon?: IconNames;
+    /** @internal */
+    private headSectionId;
+    /** @internal */
+    protected bodySectionId: string;
+    /**
+     * Handles the click event of the header section.
+     * If the accordion is disabled, it will not toggle the expanded state.
+     * It will dispatch the `shown` event with the current expanded state.
+     */
+    protected handleHeaderClick(): void;
+    /**
+     * Dispatches the `shown` event with the current expanded state.
+     * The event is cancelable and bubbles.
+     * The event detail contains the current expanded state.
+     */
+    private dispatchHeaderClickEvent;
+    /**
+     * Handles the keydown event of the component.
+     * If the key pressed is either Enter or Space, it calls the handleHeaderClick method.
+     * This allows keyboard users to toggle the accordion button using these keys.
+     * @param event - The KeyboardEvent fired.
+     */
+    private handleKeyDown;
+    protected renderIcon(iconName?: IconNames): TemplateResult | typeof nothing;
+    protected renderHeadingText(): TemplateResult | typeof nothing;
+    protected renderHeader(): TemplateResult;
+    /**
+     * Returns the icon name based on the expanded state.
+     * If the accordion button is disabled, it always returns the arrow down icon.
+     * Otherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.
+     * @returns The icon name based on the expanded state.
+     */
+    protected getArrowIconName(): IconName;
+    protected renderBody(): TemplateResult | typeof nothing;
+    updated(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default AccordionButton;

package/dist/components/accordionbutton/accordionbutton.component.js

@@ -0,0 +1,240 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { v4 as uuidv4 } from 'uuid';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { KEYS } from '../../utils/keys';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { ROLE } from '../../utils/roles';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { DEFAULTS, ICON_NAME } from './accordionbutton.constants';
+import styles from './accordionbutton.styles';
+/**
+ * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
+ *
+ * The header section contains:
+ * - Prefix Icon
+ * - Header Text
+ *
+ * The body section contains:
+ * - Default slot - User can place any content inside the body section.
+ *
+ * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>
+ * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>
+ * There are two sizes of accordion, one is small and the other is large.
+ * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.
+ *
+ * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.
+ * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.
+ *
+ * An accordion can be disabled, and when it's disabled, the header section will not be clickable.
+ *
+ * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.
+ *
+ * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.
+ *
+ * @tagname mdc-accordionbutton
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.
+ *
+ * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.
+ *
+ * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.
+ * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.
+ *
+ * @csspart header-section - The header section of the accordion button.
+ * @csspart header-button-section - The header button section of the accordion button.
+ * @csspart leading-header - The leading header of the accordion button.
+ * @csspart trailing-header - The trailing header of the accordion button.
+ * @csspart trailing-header__icon - The trailing header icon of the accordion button.
+ * @csspart body-section - The body section of the accordion button.
+ */
+class AccordionButton extends DisabledMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * The size of the accordion item.
+         * @default 'small'
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.
+         * @default 'default'
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * The aria level of the accordion component.
+         * @default 3
+         */
+        this.dataAriaLevel = DEFAULTS.DATA_ARIA_LEVEL;
+        /**
+         * The visibility of the accordion button.
+         * @default false
+         */
+        this.expanded = DEFAULTS.EXPANDED;
+        /** @internal */
+        this.headSectionId = `head-section-${uuidv4()}`;
+        /** @internal */
+        this.bodySectionId = `body-section-${uuidv4()}`;
+    }
+    /**
+     * Handles the click event of the header section.
+     * If the accordion is disabled, it will not toggle the expanded state.
+     * It will dispatch the `shown` event with the current expanded state.
+     */
+    handleHeaderClick() {
+        if (this.disabled)
+            return;
+        this.expanded = !this.expanded;
+        this.dispatchHeaderClickEvent();
+    }
+    /**
+     * Dispatches the `shown` event with the current expanded state.
+     * The event is cancelable and bubbles.
+     * The event detail contains the current expanded state.
+     */
+    dispatchHeaderClickEvent() {
+        const event = new CustomEvent('shown', {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                expanded: this.expanded,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Handles the keydown event of the component.
+     * If the key pressed is either Enter or Space, it calls the handleHeaderClick method.
+     * This allows keyboard users to toggle the accordion button using these keys.
+     * @param event - The KeyboardEvent fired.
+     */
+    handleKeyDown(event) {
+        if (event.key === KEYS.ENTER || event.key === KEYS.SPACE) {
+            this.handleHeaderClick();
+        }
+    }
+    renderIcon(iconName) {
+        return iconName ? html `<mdc-icon name="${iconName}" length-unit="rem" size="1"></mdc-icon>` : nothing;
+    }
+    renderHeadingText() {
+        return this.headerText
+            ? html `<mdc-text id="${this.headSectionId}" type="${TYPE.BODY_LARGE_REGULAR}" tagname=${VALID_TEXT_TAGS.SPAN}
+          >${this.headerText}</mdc-text
+        >`
+            : nothing;
+    }
+    renderHeader() {
+        return html `
+      <div
+        part="header-section"
+        class="mdc-focus-ring"
+        @click="${this.handleHeaderClick}"
+        @keydown="${this.handleKeyDown}"
+        role="${ROLE.HEADING}"
+        aria-level="${this.dataAriaLevel}"
+        tabindex="${this.disabled ? -1 : 0}"
+      >
+        <div
+          part="header-button-section"
+          role="${ROLE.BUTTON}"
+          aria-expanded="${this.expanded}"
+          aria-controls="${this.bodySectionId}"
+        >
+          <div part="leading-header">${this.renderIcon(this.prefixIcon)} ${this.renderHeadingText()}</div>
+          <div part="trailing-header">
+            <div part="trailing-header__icon">${this.renderIcon(this.getArrowIconName())}</div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Returns the icon name based on the expanded state.
+     * If the accordion button is disabled, it always returns the arrow down icon.
+     * Otherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.
+     * @returns The icon name based on the expanded state.
+     */
+    getArrowIconName() {
+        if (this.disabled) {
+            return ICON_NAME.ARROW_DOWN;
+        }
+        return this.expanded ? ICON_NAME.ARROW_UP : ICON_NAME.ARROW_DOWN;
+    }
+    renderBody() {
+        // When disabled, then the body section should not be visible,
+        // even if the expanded attribute is set true.
+        if (this.disabled) {
+            return nothing;
+        }
+        if (this.expanded) {
+            return html `<div
+        id="${this.bodySectionId}"
+        aria-labelledby="${this.headSectionId}"
+        part="body-section"
+        role="${ROLE.REGION}"
+      >
+        <slot></slot>
+      </div>`;
+        }
+        return nothing;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.setAttribute('aria-disabled', `${this.disabled}`);
+        }
+        if (changedProperties.has('dataAriaLevel') && !this.dataAriaLevel) {
+            this.dataAriaLevel = DEFAULTS.DATA_ARIA_LEVEL;
+        }
+        if (changedProperties.has('size') && !this.size) {
+            this.size = DEFAULTS.SIZE;
+        }
+        if (changedProperties.has('variant') && !this.variant) {
+            this.variant = DEFAULTS.VARIANT;
+        }
+    }
+    render() {
+        return html ` ${this.renderHeader()} ${this.renderBody()} `;
+    }
+}
+AccordionButton.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], AccordionButton.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], AccordionButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'data-aria-level' }),
+    __metadata("design:type", Number)
+], AccordionButton.prototype, "dataAriaLevel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], AccordionButton.prototype, "expanded", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'header-text' }),
+    __metadata("design:type", String)
+], AccordionButton.prototype, "headerText", void 0);
+__decorate([
+    property({ type: String, attribute: 'prefix-icon' }),
+    __metadata("design:type", String)
+], AccordionButton.prototype, "prefixIcon", void 0);
+export default AccordionButton;

package/dist/components/accordionbutton/accordionbutton.constants.d.ts

@@ -0,0 +1,17 @@
+declare const TAG_NAME: "mdc-accordionbutton";
+declare const ICON_NAME: {
+    readonly ARROW_UP: "arrow-up-bold";
+    readonly ARROW_DOWN: "arrow-down-bold";
+};
+declare const VARIANT: {
+    readonly DEFAULT: "default";
+    readonly BORDERLESS: "borderless";
+};
+declare const DEFAULTS: {
+    readonly EXPANDED: false;
+    readonly SIZE: "small";
+    readonly DATA_ARIA_LEVEL: 3;
+    readonly VARIANT: "default";
+    readonly ICON_NAME: "arrow-up-bold";
+};
+export { TAG_NAME, ICON_NAME, DEFAULTS, VARIANT };

package/dist/components/accordionbutton/accordionbutton.constants.js

@@ -0,0 +1,19 @@
+import utils from '../../utils/tag-name';
+import { SIZE } from '../accordiongroup/accordiongroup.constants';
+const TAG_NAME = utils.constructTagName('accordionbutton');
+const ICON_NAME = {
+    ARROW_UP: 'arrow-up-bold',
+    ARROW_DOWN: 'arrow-down-bold',
+};
+const VARIANT = {
+    DEFAULT: 'default',
+    BORDERLESS: 'borderless',
+};
+const DEFAULTS = {
+    EXPANDED: false,
+    SIZE: SIZE.SMALL,
+    DATA_ARIA_LEVEL: 3,
+    VARIANT: VARIANT.DEFAULT,
+    ICON_NAME: ICON_NAME.ARROW_UP,
+};
+export { TAG_NAME, ICON_NAME, DEFAULTS, VARIANT };

package/dist/components/accordionbutton/accordionbutton.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;