@aurelia-mdc-web/all 9.2.3-au2 → 9.3.1-au2

package/src/list/mdc-deprecated-list/mdc-deprecated-list-divider/mdc-deprecated-list-divider.html

@@ -0,0 +1,4 @@
+<template role="separator"
+  class="mdc-deprecated-list-divider ${padded ? 'mdc-deprecated-list-divider--padded' : ''} ${inset ? 'mdc-deprecated-list-divider--inset' : ''}">
+  <au-slot></au-slot>
+</template>

package/src/list/mdc-deprecated-list/mdc-deprecated-list-divider/mdc-deprecated-list-divider.ts

@@ -0,0 +1,18 @@
+import { booleanAttr } from '../../../base';
+import { customElement, bindable } from 'aurelia';
+import template from './mdc-deprecated-list-divider.html?raw';
+
+/**
+ * Optional, for list divider element
+ * @selector mdc-list-divider
+ */
+@customElement({ name: 'mdc-deprecated-list-divider', template })
+export class MdcDeprecatedListDivider {
+  /** To make a divider match the padding of list items */
+  @bindable({ set: booleanAttr })
+  padded: boolean;
+
+  /** Increases the leading margin of the divider so that it does not intersect the avatar column */
+  @bindable({ set: booleanAttr })
+  inset: boolean;
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-group.ts

@@ -0,0 +1,27 @@
+import { customElement, customAttribute, slotted, inject } from 'aurelia';
+
+/**
+ * Optional. Wrapper around two or more mdc-list elements to be grouped together.
+ * @selector mdc-deprecated-list-group
+ */
+@customElement({
+  name: 'mdc-deprecated-list-group',
+  template: '<template class="mdc-deprecated-list-group"><au-slot></au-slot></template>'
+})
+export class MdcDeprecatedListGroup {
+  @slotted({ query: 'h1,h2,h3,h4,h5,h6' })
+  headers: HTMLElement[];
+  headersChanged() {
+    this.headers.forEach(x => x.classList.add('mdc-deprecated-list-group__subheader'));
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-deprecated-list-group-subheader')
+export class MdcDeprecatedListGroupSubheader {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.classList.add('mdc-deprecated-list-group__subheader');
+  }
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/enhance-mdc-deprecated-list-item.ts

@@ -0,0 +1,8 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceMdcDeprecatedListItem {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML.replaceAll('mdc-deprecated-list-item=""','as-element="mdc-deprecated-list-item"');
+  }
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item-graphic.ts

@@ -0,0 +1,15 @@
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * Optional. The first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.
+ * @selector [mdc-deprecated-list-item-graphic]
+ */
+@inject(Element)
+@customAttribute('mdc-deprecated-list-item-graphic')
+export class MdcDeprecatedListItemGraphic {
+  constructor(private root: Element) { }
+
+  attached() {
+    this.root.classList.add('mdc-deprecated-list-item__graphic');
+  }
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item-meta.ts

@@ -0,0 +1,15 @@
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * Optional. The last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.
+ * @selector [mdc-deprecated-list-item-meta]
+ */
+@inject(Element)
+@customAttribute('mdc-deprecated-list-item-meta')
+export class MdcDeprecatedListItemMeta {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.classList.add('mdc-deprecated-list-item__meta');
+  }
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.html

@@ -0,0 +1,8 @@
+<template class="mdc-deprecated-list-item
+    ${disabled ? 'mdc-deprecated-list-item--disabled' : ''}
+    ${activated ? 'mdc-deprecated-list-item--activated' : ''}
+  " mdc-ripple="disabled.bind: disabled || disableRipple"
+  keydown.trigger="onKeydown($event)" click.trigger="onClick()" tabindex="-1">
+  <div class="mdc-deprecated-list-item__ripple"></div>
+  <au-slot></au-slot>
+</template>

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.ts

@@ -0,0 +1,108 @@
+import { cssClasses, strings } from '@material/list';
+import { customElement, bindable, inject, INode } from 'aurelia';
+import { booleanAttr } from '../../../base';
+import { processContent } from '@aurelia/runtime-html';
+import template from './mdc-deprecated-list-item.html?raw';
+
+// let listItemId = 0;
+
+const ENTER = 13;
+const SPACE = 32;
+const LIST_ITEM_ACTION = 'mdclistitem:action';
+let id = 0;
+
+/**
+ * @selector mdc-deprecated-list-item
+ */
+@inject(Element)
+@customElement({ name: 'mdc-deprecated-list-item', template })
+@processContent(function processContent(node: INode) {
+  const element = node as HTMLElement;
+  const graphic = element.querySelector('mdc-checkbox:not([mdc-deprecated-list-item-meta]),[mdc-deprecated-list-item-graphic]');
+  if (graphic) {
+    element.removeChild(graphic);
+  }
+  const meta = element.querySelector('[mdc-deprecated-list-item-meta]');
+  if (meta) {
+    element.removeChild(meta);
+  }
+  const itemText = document.createElement('span');
+  itemText.classList.add('mdc-deprecated-list-item__text');
+  const children = [].slice.call(element.childNodes) as ChildNode[];
+  for (let i = 0; i < children.length; ++i) {
+    itemText.appendChild(children[i]);
+  }
+  if (graphic) {
+    element.appendChild(graphic);
+  }
+  element.appendChild(itemText);
+  if (meta) {
+    element.appendChild(meta);
+  }
+}
+)
+export class MdcDeprecatedListItem {
+  constructor(public root: HTMLElement) {
+    this.root.id = `mdc-deprecated-list-item-${this.id}`;
+  }
+
+  cssClasses = cssClasses;
+
+  id = `mdc-deprecated-list-item-${++id}`;
+
+  /** Disables the list item */
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+
+  /** Styles the row in an activated state */
+  @bindable({ set: booleanAttr })
+  activated: boolean;
+
+  /** Random data associated with the list item. Passed in events payload. */
+  @bindable()
+  value: unknown;
+
+  /** Disables ripple effect */
+  @bindable({ set: booleanAttr })
+  disableRipple: boolean;
+
+  attached() {
+    // Child button/a elements are not tabbable until the list item is focused.
+    Array.from(this.root.querySelectorAll(strings.FOCUSABLE_CHILD_ELEMENTS))
+      .forEach(el => el.setAttribute('tabindex', '-1'));
+  }
+
+  onKeydown(evt: KeyboardEvent) {
+    if ((evt.keyCode === ENTER || evt.keyCode === SPACE) && !this.disabled) {
+      this.root.dispatchEvent(new CustomEvent(LIST_ITEM_ACTION, { detail: { item: this, data: this.value }, bubbles: true }));
+    }
+    return true;
+  }
+
+  onClick() {
+    if (!this.disabled) {
+      this.root.dispatchEvent(new CustomEvent(LIST_ITEM_ACTION, { detail: { item: this, data: this.value }, bubbles: true }));
+    }
+    return true;
+  }
+
+}
+
+/** @hidden */
+export interface IMdcListItemElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcDeprecatedListItem;
+    };
+  };
+}
+
+export interface IMdcListActionEventDetail {
+  index: number;
+  data: unknown;
+}
+
+/** @hidden */
+export interface IMdcListActionEvent extends Event {
+  detail: IMdcListActionEventDetail;
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item-primary-text.ts

@@ -0,0 +1,11 @@
+import { customElement } from 'aurelia';
+
+/**
+ * Optional, primary text for the list item
+ * @selector mdc-deprecated-list-item-primary-text
+ */
+@customElement({
+  name: 'mdc-deprecated-list-item-primary-text',
+  template: '<template class="mdc-deprecated-list-item__primary-text"><au-slot></au-slot></template>'
+})
+export class MdcDeprecatedListItemPrimaryText { }

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item-secondary-text.ts

@@ -0,0 +1,11 @@
+import { customElement } from 'aurelia';
+
+/**
+ * Optional, secondary text for the list item. Displayed below the primary text.
+ * @selector mdc-deprecated-list-item-secondary-text
+ */
+@customElement({
+  name: 'mdc-deprecated-list-item-secondary-text',
+  template: '<template class="mdc-deprecated-list-item__secondary-text"><au-slot></au-slot></template>'
+})
+export class MdcDeprecatedListItemSecondaryText { }

package/src/list/mdc-deprecated-list/mdc-deprecated-list.html

@@ -0,0 +1,15 @@
+<template class="
+    mdc-deprecated-list
+    ${twoLine ? 'mdc-deprecated-list--two-line' : ''}
+    ${dense ? 'mdc-deprecated-list--dense' : ''}
+    ${textual ? 'mdc-deprecated-list--textual-list' : ''}
+    ${avatar ? 'mdc-deprecated-list--avatar-list' : ''}
+    ${icon ? 'mdc-deprecated-list--icon-list' : ''}
+    ${image ? 'mdc-deprecated-list--image-list' : ''}
+    ${thumbnail ? 'mdc-deprecated-list--thumbnail-list' : ''}
+    ${video ? 'mdc-deprecated-list--video-list' : ''}
+  " keydown.trigger="handleKeydownEvent_($event)" click.trigger="handleClickEvent_($event)"
+  focusin.trigger="handleFocusInEvent_($event)" focusout.trigger="handleFocusOutEvent_($event)"
+  aria-orientation="${vertical ? 'vertical' : 'horizontal' }">
+  <au-slot></au-slot>
+</template>

package/src/list/mdc-deprecated-list/mdc-deprecated-list.ts

@@ -0,0 +1,331 @@
+import { booleanAttr, MdcComponent } from '../../base';
+import { MDCListFoundation, MDCListAdapter, strings, MDCListIndex, MDCListSelectionChangeDetail } from '@material/list';
+import { closest, matches } from '@material/dom/ponyfill';
+import { MdcDeprecatedListItem, IMdcListActionEventDetail } from './mdc-deprecated-list-item/mdc-deprecated-list-item';
+import { inject, customElement, bindable, CustomElement, slotted } from 'aurelia';
+import template from './mdc-deprecated-list.html?raw';
+
+strings.ACTION_EVENT = strings.ACTION_EVENT.toLowerCase();
+
+export const mdcListStrings = {
+  ITEMS_CHANGED: 'mdclist:itemschanged'
+};
+
+/**
+ * @selector mdc-deprecated-list
+ * @emits mdclist:action | Indicates that a list item with the specified index has been activated
+ * @emits mdclist:itemschanged | Indicates that the list of items has changed
+ */
+@inject(Element)
+@customElement({ name: 'mdc-deprecated-list', template })
+export class MdcDeprecatedList extends MdcComponent<MDCListFoundation>{
+
+  /** Increases the height of the row to give it greater visual separation from adjacent rows */
+  @bindable({ set: booleanAttr })
+  twoLine: boolean;
+
+  /** When enabled, the space and enter keys (or click event) will trigger an single list item to become selected and any other previous selected element to become deselected */
+  @bindable({ set: booleanAttr })
+  singleSelection: boolean;
+  async singleSelectionChanged() {
+    await this.initialised;
+    this.foundation?.setSingleSelection(this.singleSelection);
+  }
+
+  /** Sets the selection logic to apply/remove the mdc-list-item--activated class */
+  @bindable({ set: booleanAttr })
+  activated: boolean;
+  async activatedChanged() {
+    await this.initialised;
+    this.foundation?.setUseActivatedClass(this.activated);
+  }
+
+  /** Sets the list to an orientation causing the keys used for navigation to change. true results in the Up/Down arrow keys being used. If false, the Left/Right arrow keys are used. */
+  @bindable({ set: booleanAttr })
+  vertical: boolean = true;
+
+  /** Increases the density of the list, making it appear more compact */
+  @bindable({ set: booleanAttr })
+  dense: boolean;
+
+  /** Optional, configures lists that start with text */
+  @bindable({ set: booleanAttr })
+  textual: boolean;
+
+  /** Configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger. */
+  @bindable({ set: booleanAttr })
+  avatar: boolean;
+
+  /** Optional, configures the leading tile of each row to display icons */
+  @bindable({ set: booleanAttr })
+  icon: boolean;
+
+  /** Optional, configures the leading tile of each row to display images */
+  @bindable({ set: booleanAttr })
+  image: boolean;
+
+  /** Optional, configures the leading tile of each row to display smaller images (this is analogous to an avatar list but the image will	not be rounded) */
+  @bindable({ set: booleanAttr })
+  thumbnail: boolean;
+
+  /** Optional, configures the leading tile of each row to display videos */
+  @bindable({ set: booleanAttr })
+  video: boolean;
+
+  @slotted({ query: 'mdc-deprecated-list-item' })
+  itemElements: HTMLElement[];
+  itemsChanged() {
+    this.emit(mdcListStrings.ITEMS_CHANGED, { items: this.itemElements }, true);
+  }
+
+  get items(): MdcDeprecatedListItem[] {
+    return (this.itemElements ?? []).map(x => CustomElement.for<MdcDeprecatedListItem>(x).viewModel);
+  }
+
+  @bindable({ set: booleanAttr })
+  typeahead: boolean;
+  async typeaheadChanged(hasTypeahead: boolean) {
+    await this.initialised;
+    this.foundation?.setHasTypeahead(hasTypeahead);
+  }
+
+  /** Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa */
+  @bindable({ set: booleanAttr })
+  wrapFocus: boolean;
+  async wrapFocusChanged() {
+    await this.initialised;
+    this.foundation?.setWrapFocus(this.wrapFocus);
+  }
+
+  initialSyncWithDOM() {
+    this.layout();
+    this.initializeListType();
+  }
+
+  get listElements(): Element[] {
+    return Array.from(this.root.querySelectorAll('.mdc-deprecated-list-item'));
+  }
+
+  /**
+   * Extracts the primary text from a list item.
+   * @param item The list item element.
+   * @return The primary text in the element.
+   */
+  getPrimaryText(item: Element): string {
+    const primaryText = item.querySelector('.mdc-deprecated-list-item__primary-text');
+    if (primaryText) {
+      return primaryText.textContent ?? '';
+    }
+
+    const singleLineText = item.querySelector('.mdc-deprecated-list-item__text');
+    return singleLineText?.textContent ?? '';
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCListAdapter = {
+      addClassForElementIndex: (index, className) => {
+        const element = this.listElements[index];
+        if (element) {
+          element.classList.add(className);
+        }
+      },
+      focusItemAtIndex: (index) => {
+        const element = this.listElements[index] as HTMLElement | undefined;
+        if (element) {
+          element.focus();
+        }
+      },
+      getAttributeForElementIndex: (index, attr) => this.listElements[index].getAttribute(attr),
+      getFocusedElementIndex: () => this.listElements.indexOf(document.activeElement!),
+      getListItemCount: () => this.listElements.length,
+      getPrimaryTextAtIndex: (index) => this.getPrimaryText(this.listElements[index]),
+      hasCheckboxAtIndex: (index) => {
+        const listItem = this.listElements[index];
+        return !!listItem.querySelector(strings.CHECKBOX_SELECTOR);
+      },
+      hasRadioAtIndex: (index) => {
+        const listItem = this.listElements[index];
+        return !!listItem.querySelector(strings.RADIO_SELECTOR);
+      },
+      isCheckboxCheckedAtIndex: (index) => {
+        const listItem = this.listElements[index];
+        const toggleEl = listItem.querySelector<HTMLInputElement>(strings.CHECKBOX_SELECTOR);
+        return toggleEl!.checked;
+      },
+      isFocusInsideList: () => {
+        return this.root !== document.activeElement && this.root.contains(document.activeElement);
+      },
+      isRootFocused: () => document.activeElement === this.root,
+      listItemAtIndexHasClass: (index, className) => this.listElements[index].classList.contains(className),
+      notifyAction: (index) => {
+        const listItem = this.listElements[index];
+        if (!listItem.hasAttribute('no-list-action')) {
+          const data = CustomElement.for<MdcDeprecatedListItem>(listItem).viewModel.value;
+          this.emit<IMdcListActionEventDetail>(strings.ACTION_EVENT, { index, data }, /** shouldBubble */ true);
+        }
+      },
+      notifySelectionChange: (changedIndices: number[]) => {
+        this.emit<MDCListSelectionChangeDetail>(strings.SELECTION_CHANGE_EVENT,
+          { changedIndices }, /** shouldBubble */ true);
+      },
+      removeClassForElementIndex: (index, className) => {
+        const element = this.listElements[index];
+        if (element) {
+          element.classList.remove(className);
+        }
+      },
+      setAttributeForElementIndex: (index, attr, value) => {
+        const element = this.listElements[index];
+        if (element) {
+          element.setAttribute(attr, value);
+        }
+      },
+      setCheckedCheckboxOrRadioAtIndex: (index, isChecked) => {
+        const listItem = this.listElements[index];
+        const toggleEl = listItem.querySelector<HTMLInputElement>(strings.CHECKBOX_RADIO_SELECTOR);
+        if (toggleEl?.disabled) {
+          return;
+        }
+        toggleEl!.checked = isChecked;
+
+        const event = document.createEvent('Event');
+        event.initEvent('change', true, true);
+        toggleEl!.dispatchEvent(event);
+      },
+      setTabIndexForListItemChildren: (listItemIndex, tabIndexValue) => {
+        const element = this.listElements[listItemIndex];
+        const listItemChildren: Element[] =
+          [].slice.call(element.querySelectorAll(strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
+        listItemChildren.forEach((el) => el.setAttribute('tabindex', tabIndexValue));
+      },
+    };
+    return new MDCListFoundation(adapter);
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which list item this event is targetting. Or returns -1 if
+   * there is no list item
+   */
+  private getListItemIndex_(evt: Event) {
+    const eventTarget = evt.target as Element;
+    const nearestParent = closest(eventTarget, '.mdc-deprecated-list-item, .mdc-deprecated-list');
+
+    // Get the index of the element if it is a list item.
+    if (nearestParent && matches(nearestParent, '.mdc-deprecated-list-item')) {
+      return this.listElements.indexOf(nearestParent);
+    }
+
+    return -1;
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   */
+  handleFocusInEvent_(evt: FocusEvent) {
+    const index = this.getListItemIndex_(evt);
+    this.foundation?.handleFocusIn(index);
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   */
+  handleFocusOutEvent_(evt: FocusEvent) {
+    const index = this.getListItemIndex_(evt);
+    this.foundation?.handleFocusOut(index);
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which element was focused when keydown event occurred before sending the event to the
+   * foundation.
+   */
+  handleKeydownEvent_(evt: KeyboardEvent) {
+    const index = this.getListItemIndex_(evt);
+    const target = evt.target as Element;
+    if (!target.hasAttribute('not-selectable')) {
+      this.foundation?.handleKeydown(evt, target.classList.contains('mdc-deprecated-list-item'), index);
+    }
+    return true;
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   */
+  handleClickEvent_(evt: MouseEvent) {
+    const index = this.getListItemIndex_(evt);
+    const target = evt.target as Element;
+    // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
+    const toggleCheckbox = !matches(target, strings.CHECKBOX_RADIO_SELECTOR);
+    this.foundation?.handleClick(index, toggleCheckbox);
+    return true;
+  }
+
+  /**
+   * @hidden
+   * @return Whether typeahead is currently matching a user-specified prefix.
+   */
+  get typeaheadInProgress(): boolean {
+    return this.foundation!.isTypeaheadInProgress();
+  }
+
+  /**
+   * @hidden
+   * Given the next desired character from the user, adds it to the typeahead
+   * buffer. Then, attempts to find the next option matching the buffer. Wraps
+   * around if at the end of options.
+   *
+   * @param nextChar The next character to add to the prefix buffer.
+   * @param startingIndex The index from which to start matching. Defaults to
+   *     the currently focused index.
+   * @return The index of the matched item.
+   */
+  typeaheadMatchItem(nextChar: string, startingIndex?: number): number {
+    return this.foundation!.typeaheadMatchItem(nextChar, startingIndex, /** skipFocus */ true);
+  }
+
+  layout() {
+    const direction = this.root.getAttribute(strings.ARIA_ORIENTATION);
+    this.vertical = direction !== strings.ARIA_ORIENTATION_HORIZONTAL;
+    this.foundation?.layout();
+  }
+
+  get selectedIndex(): MDCListIndex {
+    return this.foundation!.getSelectedIndex();
+  }
+
+  set selectedIndex(index: MDCListIndex) {
+    this.foundation?.setSelectedIndex(index);
+  }
+
+  /**
+   * @hidden
+   * Initialize selectedIndex value based on pre-selected checkbox list items, single selection or radio.
+   */
+  initializeListType() {
+    const checkboxListItems = this.root.querySelectorAll(strings.ARIA_ROLE_CHECKBOX_SELECTOR);
+    const radioSelectedListItem = this.root.querySelector(strings.ARIA_CHECKED_RADIO_SELECTOR);
+
+    if (checkboxListItems.length) {
+      const preselectedItems = this.root.querySelectorAll(strings.ARIA_CHECKED_CHECKBOX_SELECTOR);
+      this.selectedIndex = [].map.call(preselectedItems, (listItem: Element) => this.listElements.indexOf(listItem)) as number[];
+    } else if (radioSelectedListItem) {
+      this.selectedIndex = this.listElements.indexOf(radioSelectedListItem);
+    }
+  }
+}
+
+/** @hidden */
+export interface IMdcDeprecatedListElement extends HTMLElement {
+  au: {
+    controller: {
+      viewModel: MdcDeprecatedList;
+    };
+  };
+}
+

package/src/list/mdc-list-divider/mdc-list-divider.html

@@ -0,0 +1,7 @@
+<template role="separator" class="
+  mdc-list-divider
+  ${leadingType ? 'mdc-list-divider--with-leading-inset mdc-list-divider--with-leading-' + leadingType : ''}
+  ${trailingType ? 'mdc-list-divider--with-trailing-inset mdc-list-divider--with-trailing-' + trailingType : ''}
+  ${padded ? 'mdc-list-divider--with-leading-padding' : ''}
+  ">
+</template>

package/src/list/mdc-list-divider/mdc-list-divider.ts

@@ -0,0 +1,24 @@
+import { booleanAttr } from '../../base';
+import { customElement, bindable } from 'aurelia';
+import { MdcListItemLeading } from '../mdc-list-item/mdc-list-item-leading';
+import { MdcListItemTrailing } from '../mdc-list-item/mdc-list-item-trailing';
+import template from './mdc-list-divider.html?raw';
+
+/**
+ * Optional, for list divider element
+ * @selector mdc-list-divider
+ */
+@customElement({ name: 'mdc-list-divider', template })
+export class MdcListDivider {
+  /** To make a divider match the padding of list items */
+  @bindable({ set: booleanAttr })
+  padded: boolean;
+
+  /** Aligns the divider’s leading edge with the item’s content block */
+  @bindable()
+  leadingType: MdcListItemLeading['value'];
+
+  /** Aligns the divider’s leading edge with the item’s trailing padding */
+  @bindable()
+  trailingType: MdcListItemTrailing['value'];
+}

package/src/list/mdc-list-group.ts

@@ -0,0 +1,27 @@
+import { customElement, customAttribute, inject, slotted } from 'aurelia';
+
+/**
+ * Optional. Wrapper around two or more mdc-list elements to be grouped together.
+ * @selector mdc-list-group
+ */
+@customElement({
+  name: 'mdc-list-group',
+  template: '<template class="mdc-list-group"><au-slot></au-slot></template>'
+})
+export class MdcListGroup {
+  @slotted({ query: 'h1,h2,h3,h4,h5,h6' })
+  headers: HTMLElement[];
+  headersChanged() {
+    this.headers.forEach(x => x.classList.add('mdc-list-group__subheader'));
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-list-group-subheader')
+export class MdcListGroupSubheader {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.classList.add('mdc-list-group__subheader');
+  }
+}

package/src/list/mdc-list-item/enhance-mdc-list-item.ts

@@ -0,0 +1,8 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceMdcListItem {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML.replaceAll('mdc-list-item=""','as-element="mdc-list-item"');
+  }
+}