@momentum-design/components 0.89.1 → 0.91.0

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

@@ -0,0 +1,9 @@
+import Listheader from './listheader.component';
+import '../icon';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-listheader']: Listheader;
+    }
+}
+export default Listheader;

package/dist/components/listheader/index.js

@@ -0,0 +1,6 @@
+import Listheader from './listheader.component';
+import { TAG_NAME } from './listheader.constants';
+import '../icon';
+import '../text';
+Listheader.register(TAG_NAME);
+export default Listheader;

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

@@ -0,0 +1,45 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { IconNames } from '../icon/icon.types';
+/**
+ * Listheader component is used to display a header in a list.
+ * It can include icons before and after the header text, and allows for additional content via slots.
+ *
+ * @tagname mdc-listheader
+ *
+ * @slot default - to pass in actionable content like buttons or links
+ *
+ * @cssproperty --mdc-listheader-height - height of the header
+ * @cssproperty --mdc-listheader-padding - padding around the header content
+ * @cssproperty --mdc-listheader-gap - gap between content
+ */
+declare class Listheader extends Component {
+    /**
+     * Name of the icon rendered before the text
+     *
+     * If not provided, no icon will be rendered and text will be aligned to the start.
+     */
+    prefixIcon?: IconNames;
+    /**
+     * Name of the icon rendered after the slot & text
+     *
+     * If not provided, no icon will be rendered and content will be aligned to the end.
+     */
+    postfixIcon?: IconNames;
+    /**
+     * Text to be rendered in the header
+     */
+    headerText?: string;
+    /**
+     * Disables the header, making it visually styled as disabled.
+     *
+     * NOTE: slot content will still be interactive unless individually disabled.
+     * Make sure to handle the disabled state of any actionable elements inside the slot.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Listheader;

package/dist/components/listheader/listheader.component.js

@@ -0,0 +1,85 @@
+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 { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import styles from './listheader.styles';
+/**
+ * Listheader component is used to display a header in a list.
+ * It can include icons before and after the header text, and allows for additional content via slots.
+ *
+ * @tagname mdc-listheader
+ *
+ * @slot default - to pass in actionable content like buttons or links
+ *
+ * @cssproperty --mdc-listheader-height - height of the header
+ * @cssproperty --mdc-listheader-padding - padding around the header content
+ * @cssproperty --mdc-listheader-gap - gap between content
+ */
+class Listheader extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the header, making it visually styled as disabled.
+         *
+         * NOTE: slot content will still be interactive unless individually disabled.
+         * Make sure to handle the disabled state of any actionable elements inside the slot.
+         *
+         * @default false
+         */
+        this.disabled = false;
+    }
+    render() {
+        return html `
+      ${this.prefixIcon
+            ? html `<mdc-icon
+            part="prefix-icon"
+            name="${this.prefixIcon}"
+            aria-hidden="true"
+            size="1"
+            length-unit="rem"
+          ></mdc-icon>`
+            : nothing}
+      ${this.headerText
+            ? html `<mdc-text part="header-text" type="body-midsize-bold" tagname="span" aria-hidden="true"
+            >${this.headerText}</mdc-text
+          >`
+            : nothing}
+      <slot></slot>
+      ${this.postfixIcon
+            ? html `<mdc-icon
+            part="postfix-icon"
+            name="${this.postfixIcon}"
+            aria-hidden="true"
+            size="1"
+            length-unit="rem"
+          ></mdc-icon>`
+            : nothing}
+    `;
+    }
+}
+Listheader.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, attribute: 'prefix-icon' }),
+    __metadata("design:type", String)
+], Listheader.prototype, "prefixIcon", void 0);
+__decorate([
+    property({ type: String, attribute: 'postfix-icon' }),
+    __metadata("design:type", String)
+], Listheader.prototype, "postfixIcon", void 0);
+__decorate([
+    property({ type: String, attribute: 'header-text' }),
+    __metadata("design:type", String)
+], Listheader.prototype, "headerText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Listheader.prototype, "disabled", void 0);
+export default Listheader;

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

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

package/dist/components/listheader/listheader.constants.js

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

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

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

package/dist/components/listheader/listheader.styles.js

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-listheader-padding: 0.5rem 0.75rem;
+    --mdc-listheader-gap: 0.5rem;
+    --mdc-listheader-color-disabled: var(--mds-color-theme-text-primary-disabled);
+
+    display: flex;
+    align-items: center;
+    padding: var(--mdc-listheader-padding);
+    gap: var(--mdc-listheader-gap);
+  }
+
+  :host([disabled]) {
+    color: var(--mdc-listheader-color-disabled);
+  }
+
+  ::slotted(*) {
+    flex-shrink: 0;
+  }
+
+  :host::part(header-text) {
+    width: 100%;
+  }
+  :host::part(prefix-icon),
+  :host::part(postfix-icon) {
+    flex-shrink: 0;
+  }
+`;
+export default [styles];

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

@@ -1,4 +1,5 @@
 import MenuSection from './menusection.component';
+import '../listheader';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-menusection']: MenuSection;

package/dist/components/menusection/index.js

@@ -1,4 +1,5 @@
 import MenuSection from './menusection.component';
 import { TAG_NAME } from './menusection.constants';
+import '../listheader';
 MenuSection.register(TAG_NAME);
 export default MenuSection;

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

@@ -1,5 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
+import type { IconNames } from '../icon/icon.types';
 /**
  * `mdc-menusection` is a container element used to group a set of menu items.
  *
@@ -17,8 +18,9 @@ import { Component } from '../../models';
  */
 declare class MenuSection extends Component {
     /**
-     * The primary headerText of the list item.
-     * This appears on the leading side of the list item.
+     * The aria-label for the section.
+     * This is used for accessibility purposes to describe the section.
+     * If not provided, it defaults to the `headerText`.
      */
     ariaLabel: string | null;
     /**
@@ -26,9 +28,15 @@ declare class MenuSection extends Component {
      * This appears on the leading side of the list item.
      */
     headerText: string | null;
+    /**
+     * Name of the icon rendered before the text
+     *
+     * If not provided, no icon will be rendered and text will be aligned to the start.
+     */
+    prefixIcon?: IconNames;
     connectedCallback(): void;
     update(changedProperties: PropertyValues): void;
-    private renderLabel;
+    private renderHeader;
     render(): import("lit-html").TemplateResult<1>;
     static styles: CSSResult[];
 }

package/dist/components/menusection/menusection.component.js

@@ -9,9 +9,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { ROLE } from '../../utils/roles';
-import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import styles from './menusection.styles';
 /**
  * `mdc-menusection` is a container element used to group a set of menu items.
@@ -32,8 +32,9 @@ class MenuSection extends Component {
     constructor() {
         super(...arguments);
         /**
-         * The primary headerText of the list item.
-         * This appears on the leading side of the list item.
+         * The aria-label for the section.
+         * This is used for accessibility purposes to describe the section.
+         * If not provided, it defaults to the `headerText`.
          */
         this.ariaLabel = null;
         /**
@@ -57,16 +58,19 @@ class MenuSection extends Component {
             this.ariaLabel = this.headerText || '';
         }
     }
-    renderLabel() {
+    renderHeader() {
         if (this.headerText) {
-            return html `<mdc-text part="header-text" type=${TYPE.BODY_MIDSIZE_BOLD} tagname=${VALID_TEXT_TAGS.DIV}>
-        ${this.headerText}
-      </mdc-text> `;
+            return html ` <mdc-listheader
+        part="header"
+        header-text="${this.headerText}"
+        prefix-icon="${ifDefined(this.prefixIcon)}"
+      >
+      </mdc-listheader>`;
         }
         return null;
     }
     render() {
-        return html `${this.renderLabel()}<slot></slot>`;
+        return html `${this.renderHeader()}<slot></slot>`;
     }
 }
 MenuSection.styles = [...Component.styles, ...styles];
@@ -78,4 +82,8 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'header-text' }),
     __metadata("design:type", Object)
 ], MenuSection.prototype, "headerText", void 0);
+__decorate([
+    property({ type: String, attribute: 'prefix-icon' }),
+    __metadata("design:type", String)
+], MenuSection.prototype, "prefixIcon", void 0);
 export default MenuSection;

package/dist/components/menusection/menusection.styles.js

@@ -1,7 +1,9 @@
 import { css } from 'lit';
 const styles = css `
-  :host > .mdc-menusection__label {
-    padding: 0.5rem 0.75rem;
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
   }
 
   ::slotted(mdc-divider) {