@momentum-design/components 0.100.1 → 0.101.0

package/dist/components/accordionbutton/accordionbutton.styles.js

@@ -0,0 +1,121 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    --mdc-accordionbutton-border-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-accordionbutton-hover-color: var(--mds-color-theme-background-primary-hover);
+    --mdc-accordionbutton-active-color: var(--mds-color-theme-background-primary-active);
+    --mdc-accordionbutton-disabled-color: var(--mds-color-theme-text-primary-disabled);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  :host::part(header-section) {
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+  }
+
+  :host::part(header-button-section) {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  :host::part(body-section) {
+    width: 100%;
+  }
+
+  :host([variant='default'][expanded])::part(header-section) {
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+
+  :host::part(header-section):hover {
+    background-color: var(--mdc-accordionbutton-hover-color);
+  }
+
+  :host::part(header-section):active {
+    background-color: var(--mdc-accordionbutton-active-color);
+  }
+
+  :host([disabled])::part(header-section) {
+    color: var(--mdc-accordionbutton-disabled-color);
+  }
+
+  :host([disabled][expanded])::part(header-section) {
+    border-bottom: unset;
+  }
+
+  :host([disabled])::part(header-section):active,
+  :host([disabled])::part(header-section):hover {
+    background-color: unset;
+  }
+
+  :host([size='small'])::part(header-section),
+  :host([size='small'])::part(body-section) {
+    padding: 1rem;
+  }
+
+  :host([size='large'])::part(header-section),
+  :host([size='large'])::part(body-section) {
+    padding: 1.5rem;
+  }
+
+  :host::part(leading-header),
+  :host::part(trailing-header) {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  :host::part(trailing-header__icon) {
+    padding: 0.25rem;
+  }
+
+  :host([variant='default']) {
+    border: 1px solid var(--mdc-accordionbutton-border-color);
+    border-radius: 0.5rem;
+  }
+
+  :host([expanded])::part(header-section) {
+    border-bottom: 1px solid var(--mdc-accordionbutton-border-color);
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+
+  :host(:is([variant='default'], [variant='stacked']):not([expanded]))::part(header-section) {
+    border-radius: 0.5rem;
+  }
+
+  :host([variant='contained'])::part(header-section) {
+    border-radius: inherit;
+  }
+
+  :host([variant='default'])::part(header-section) {
+    border-radius: 0.5rem;
+  }
+
+  :host([variant='borderless']) {
+    border: none;
+    border-radius: 0;
+  }
+
+  :host([variant='borderless'])::part(header-section) {
+    border-radius: 0;
+  }
+
+  :host([variant='borderless']:not([expanded]))::part(header-section) {
+    border-bottom: 1px solid var(--mdc-accordionbutton-border-color);
+    border-radius: 0;
+  }
+
+  :host([variant='default']:not([expanded]))::part(header-section) {
+    border-bottom: none;
+  }
+`;
+export default [styles, ...hostFocusRingStyles(true)];

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

@@ -0,0 +1,8 @@
+import type { ValueOf } from '../../utils/types';
+import { ICON_NAME, VARIANT } from './accordionbutton.constants';
+type Variant = ValueOf<typeof VARIANT>;
+type IconName = ValueOf<typeof ICON_NAME>;
+interface Events {
+    onShownEvent: Event;
+}
+export type { Variant, IconName, Events };

package/dist/components/accordionbutton/accordionbutton.types.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/accordionbutton/index.js

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

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

@@ -0,0 +1,73 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import { Component } from '../../models';
+import type { Size, Variant } from './accordiongroup.types';
+/**
+ * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.
+ * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.
+ * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+ *
+ * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ *
+ * There are three types of variants:
+ * - Stacked - Each accordion will have a gap of 1.5rem (24px).
+ * - Borderless - Each accordion will not have any border and the group will also not have any border.
+ * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.
+ *
+ * There are two types of sizes:
+ * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.
+ * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.
+ *
+ * The variant and size will be applied to all accordions inside this accordion group.
+ * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.
+ *
+ * @tagname mdc-accordiongroup
+ *
+ * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.
+ *
+ * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup
+ */
+declare class AccordionGroup extends Component {
+    /**
+     * 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 'stacked'
+     */
+    variant: Variant;
+    /**
+     * If true, multiple accordion items can be visible at the same time.
+     * @default false
+     */
+    allowMultiple: boolean;
+    /** @internal */
+    private accordionItems;
+    /** @internal */
+    private accordionButtonItems;
+    constructor();
+    /**
+     * Handles the 'shown' event for accordion items.
+     * If `allowMultiple` is false, ensures that only one accordion item
+     * remains expanded by collapsing all other expanded items when a new item is expanded.
+     *
+     * @param event - The event object from the 'shown' event.
+     */
+    private handleAccordionExpanded;
+    /**
+     * Sets the given attribute on all child accordion or accordionbutton components.
+     *
+     * @param attributeName - The name of the attribute to set.
+     * @param attributeValue - The value to set the attribute to.
+     */
+    private setChildrenAccordionAttributes;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default AccordionGroup;

package/dist/components/accordiongroup/accordiongroup.component.js

@@ -0,0 +1,134 @@
+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 { property, queryAssignedElements } from 'lit/decorators.js';
+import { TAG_NAME as ACCORDION_TAGNAME } from '../accordion/accordion.constants';
+import { TAG_NAME as ACCORDIONBUTTON_TAGNAME } from '../accordionbutton/accordionbutton.constants';
+import { Component } from '../../models';
+import { DEFAULTS } from './accordiongroup.constants';
+import styles from './accordiongroup.styles';
+/**
+ * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.
+ * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.
+ * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
+ *
+ * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.
+ *
+ * There are three types of variants:
+ * - Stacked - Each accordion will have a gap of 1.5rem (24px).
+ * - Borderless - Each accordion will not have any border and the group will also not have any border.
+ * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.
+ *
+ * There are two types of sizes:
+ * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.
+ * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.
+ *
+ * The variant and size will be applied to all accordions inside this accordion group.
+ * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.
+ *
+ * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.
+ *
+ * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.
+ *
+ * @tagname mdc-accordiongroup
+ *
+ * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.
+ *
+ * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup
+ */
+class AccordionGroup extends Component {
+    constructor() {
+        super();
+        /**
+         * 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 'stacked'
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * If true, multiple accordion items can be visible at the same time.
+         * @default false
+         */
+        this.allowMultiple = false;
+        this.addEventListener('shown', this.handleAccordionExpanded);
+    }
+    /**
+     * Handles the 'shown' event for accordion items.
+     * If `allowMultiple` is false, ensures that only one accordion item
+     * remains expanded by collapsing all other expanded items when a new item is expanded.
+     *
+     * @param event - The event object from the 'shown' event.
+     */
+    handleAccordionExpanded(event) {
+        if (this.allowMultiple)
+            return;
+        [...this.accordionItems, ...this.accordionButtonItems].forEach(accordionItem => {
+            if (accordionItem !== event.target && accordionItem.hasAttribute('expanded')) {
+                accordionItem.toggleAttribute('expanded');
+            }
+        });
+    }
+    /**
+     * Sets the given attribute on all child accordion or accordionbutton components.
+     *
+     * @param attributeName - The name of the attribute to set.
+     * @param attributeValue - The value to set the attribute to.
+     */
+    setChildrenAccordionAttributes(attributeName, attributeValue) {
+        [...this.accordionItems].forEach(accordion => {
+            accordion.setAttribute(attributeName, attributeValue);
+        });
+        [...this.accordionButtonItems].forEach(accordion => {
+            accordion.setAttribute(attributeName, attributeValue);
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('size')) {
+            if (!this.size)
+                this.size = DEFAULTS.SIZE;
+            this.setChildrenAccordionAttributes('size', this.size);
+        }
+        if (changedProperties.has('variant')) {
+            if (!this.variant)
+                this.variant = DEFAULTS.VARIANT;
+            this.setChildrenAccordionAttributes('variant', this.variant);
+        }
+    }
+    render() {
+        return html ` <slot></slot> `;
+    }
+}
+AccordionGroup.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], AccordionGroup.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], AccordionGroup.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'allow-multiple' }),
+    __metadata("design:type", Object)
+], AccordionGroup.prototype, "allowMultiple", void 0);
+__decorate([
+    queryAssignedElements({ selector: ACCORDION_TAGNAME }),
+    __metadata("design:type", Array)
+], AccordionGroup.prototype, "accordionItems", void 0);
+__decorate([
+    queryAssignedElements({ selector: ACCORDIONBUTTON_TAGNAME }),
+    __metadata("design:type", Array)
+], AccordionGroup.prototype, "accordionButtonItems", void 0);
+export default AccordionGroup;

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

@@ -0,0 +1,15 @@
+declare const TAG_NAME: "mdc-accordiongroup";
+declare const SIZE: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
+declare const VARIANT: {
+    readonly BORDERLESS: "borderless";
+    readonly CONTAINED: "contained";
+    readonly STACKED: "stacked";
+};
+declare const DEFAULTS: {
+    readonly SIZE: "small";
+    readonly VARIANT: "stacked";
+};
+export { DEFAULTS, SIZE, VARIANT, TAG_NAME };

package/dist/components/accordiongroup/accordiongroup.constants.js

@@ -0,0 +1,16 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('accordiongroup');
+const SIZE = {
+    SMALL: 'small',
+    LARGE: 'large',
+};
+const VARIANT = {
+    BORDERLESS: 'borderless',
+    CONTAINED: 'contained',
+    STACKED: 'stacked',
+};
+const DEFAULTS = {
+    SIZE: SIZE.SMALL,
+    VARIANT: VARIANT.STACKED,
+};
+export { DEFAULTS, SIZE, VARIANT, TAG_NAME };

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

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

package/dist/components/accordiongroup/accordiongroup.styles.js

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    --mdc-accordiongroup-border-color: var(--mds-color-theme-outline-secondary-normal);
+
+    display: flex;
+    flex-direction: column;
+  }
+  :host([variant='stacked']) {
+    row-gap: 1.5rem;
+  }
+  :host([variant='stacked']) ::slotted(mdc-accordion),
+  :host([variant='stacked']) ::slotted(mdc-accordionbutton) {
+    border: 1px solid var(--mdc-accordiongroup-border-color);
+    border-radius: 0.5rem;
+  }
+  :host([variant='stacked']) ::slotted(mdc-accordion:not[expanded]),
+  :host([variant='stacked']) ::slotted(mdc-accordionbutton:not[expanded]) {
+    border-bottom: none;
+  }
+  :host([variant='contained']) {
+    border: 1px solid var(--mdc-accordiongroup-border-color);
+    border-radius: 0.5rem;
+  }
+  :host([variant='contained']) ::slotted(mdc-accordion),
+  :host([variant='contained']) ::slotted(mdc-accordionbutton) {
+    border-bottom: 1px solid var(--mdc-accordiongroup-border-color);
+  }
+  :host([variant='contained']) ::slotted(mdc-accordion:first-child),
+  :host([variant='contained']) ::slotted(mdc-accordionbutton:first-child) {
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+  :host([variant='contained']) ::slotted(mdc-accordion:last-child),
+  :host([variant='contained']) ::slotted(mdc-accordionbutton:last-child) {
+    border-bottom: none;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+  :host([variant='contained']) ::slotted(mdc-accordion[expanded]:last-child),
+  :host([variant='contained']) ::slotted(mdc-accordionbutton[expanded]:last-child) {
+    border-radius: inherit;
+  }
+  :host([variant='borderless']) ::slotted(mdc-accordion[expanded]),
+  :host([variant='borderless']) ::slotted(mdc-accordionbutton[expanded]) {
+    border-bottom: 1px solid var(--mdc-accordiongroup-border-color);
+  }
+`;
+export default [styles, ...hostFocusRingStyles()];

package/dist/components/accordiongroup/accordiongroup.types.d.ts

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { SIZE, VARIANT } from './accordiongroup.constants';
+type Size = ValueOf<typeof SIZE>;
+type Variant = ValueOf<typeof VARIANT>;
+export type { Size, Variant };

package/dist/components/accordiongroup/accordiongroup.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import AccordionGroup from './accordiongroup.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-accordiongroup']: AccordionGroup;
+    }
+}
+export default AccordionGroup;

package/dist/components/accordiongroup/index.js

@@ -0,0 +1,4 @@
+import AccordionGroup from './accordiongroup.component';
+import { TAG_NAME } from './accordiongroup.constants';
+AccordionGroup.register(TAG_NAME);
+export default AccordionGroup;