@material/web 0.1.0-alpha.0

package/list/lib/list.js

@@ -0,0 +1,168 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { ariaProperty } from '@material/web/decorators/aria-property.js';
+import { html, LitElement } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+const NAVIGATABLE_KEYS = {
+    ArrowDown: 'ArrowDown',
+    ArrowUp: 'ArrowUp',
+    Home: 'Home',
+    End: 'End',
+};
+/** @soyCompatible */
+export class List extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.role = 'list';
+        this.listTabIndex = 0;
+        this.items = [];
+        this.activeListItem = null;
+        this.listItemTagName = 'md-list-item';
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.updateItems();
+    }
+    /** @soyTemplate */
+    render() {
+        return html `
+      <ul class="md3-list"
+          aria-label="${ifDefined(this.ariaLabel)}"
+          tabindex=${this.listTabIndex}
+          role=${this.role}
+          @action=${this.handleAction}
+          @keydown=${this.handleKeydown}
+          >
+        <span><slot></slot></span>
+        <div class="md3-elevation-overlay"></div>
+      </ul>
+    `;
+    }
+    handleKeydown(event) {
+        if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1)
+            return;
+        for (const item of this.items) {
+            if (this.isListItemActive(item)) {
+                this.activeListItem = item;
+            }
+            this.deactivateListItem(item);
+        }
+        if (event.key === NAVIGATABLE_KEYS.ArrowDown) {
+            event.preventDefault();
+            if (this.activeListItem) {
+                this.activeListItem = this.getNextItem(this.activeListItem);
+            }
+            else {
+                this.activeListItem = this.getFirstItem();
+            }
+        }
+        if (event.key === NAVIGATABLE_KEYS.ArrowUp) {
+            event.preventDefault();
+            if (this.activeListItem) {
+                this.activeListItem = this.getPrevItem(this.activeListItem);
+            }
+            else {
+                this.activeListItem = this.getLastItem();
+            }
+        }
+        if (event.key === NAVIGATABLE_KEYS.Home) {
+            event.preventDefault();
+            this.activeListItem = this.getFirstItem();
+        }
+        if (event.key === NAVIGATABLE_KEYS.End) {
+            event.preventDefault();
+            this.activeListItem = this.getLastItem();
+        }
+        if (this.activeListItem) {
+            this.activateListItem(this.activeListItem);
+        }
+    }
+    activateListItem(item) {
+        item.activate();
+    }
+    deactivateListItem(item) {
+        item.deactivate();
+    }
+    isListItemActive(item) {
+        return item.isActive();
+    }
+    handleAction(event) { }
+    activateFirstItem() {
+        this.activeListItem = this.getFirstItem();
+        this.activeListItem.activate();
+    }
+    activateLastItem() {
+        this.activeListItem = this.getLastItem();
+        this.activeListItem.activate();
+    }
+    resetActiveListItem() {
+        this.activeListItem = null;
+    }
+    focusListRoot() {
+        this.listRoot.focus();
+    }
+    /** Updates `this.items` based on slot elements in the DOM. */
+    updateItems() {
+        const elements = this.assignedElements || [];
+        this.items = elements.filter(this.isListItem, this);
+    }
+    /** @return Whether the given element is a list item element. */
+    isListItem(element) {
+        return element.tagName.toLowerCase() === this.listItemTagName;
+    }
+    getFirstItem() {
+        return this.items[0];
+    }
+    getLastItem() {
+        return this.items[this.items.length - 1];
+    }
+    getPrevItem(item) {
+        const curIndex = this.items.indexOf(item);
+        return this.items[curIndex === 0 ? this.items.length - 1 : curIndex - 1];
+    }
+    getNextItem(item) {
+        const curIndex = this.items.indexOf(item);
+        return this.items[(curIndex + 1) % this.items.length];
+    }
+}
+List.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
+    __metadata("design:type", String)
+], List.prototype, "ariaLabel", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'data-aria-activedescendant', noAccessor: true }),
+    __metadata("design:type", String)
+], List.prototype, "ariaActivedescendant", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'data-role', noAccessor: true }),
+    __metadata("design:type", String)
+], List.prototype, "role", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], List.prototype, "listTabIndex", void 0);
+__decorate([
+    query('.md3-list'),
+    __metadata("design:type", HTMLElement)
+], List.prototype, "listRoot", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], List.prototype, "listItemTagName", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true }),
+    __metadata("design:type", Array)
+], List.prototype, "assignedElements", void 0);
+//# sourceMappingURL=list.js.map

package/list/lib/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {ARIARole} from '@material/web/types/aria.js';\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGATABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n};\n\n/** @soyCompatible */\nexport class List extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property(\n      {type: String, attribute: 'data-aria-activedescendant', noAccessor: true})\n  ariaActivedescendant!: string;\n\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  role: ARIARole = 'list';\n\n  @property({type: Number}) listTabIndex: number = 0;\n\n  items: ListItem[] = [];\n  activeListItem: ListItem|null = null;\n\n  @query('.md3-list') listRoot!: HTMLElement;\n\n  @property({type: String}) listItemTagName = 'md-list-item';\n\n  @queryAssignedElements({flatten: true})\n  protected assignedElements!: HTMLElement[]|null;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.updateItems();\n  }\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <ul class=\"md3-list\"\n          aria-label=\"${ifDefined(this.ariaLabel)}\"\n          tabindex=${this.listTabIndex}\n          role=${this.role}\n          @action=${this.handleAction}\n          @keydown=${this.handleKeydown}\n          >\n        <span><slot></slot></span>\n        <div class=\"md3-elevation-overlay\"></div>\n      </ul>\n    `;\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1) return;\n\n    for (const item of this.items) {\n      if (this.isListItemActive(item)) {\n        this.activeListItem = item;\n      }\n\n      this.deactivateListItem(item);\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.ArrowDown) {\n      event.preventDefault();\n      if (this.activeListItem) {\n        this.activeListItem = this.getNextItem(this.activeListItem);\n      } else {\n        this.activeListItem = this.getFirstItem();\n      }\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.ArrowUp) {\n      event.preventDefault();\n      if (this.activeListItem) {\n        this.activeListItem = this.getPrevItem(this.activeListItem);\n      } else {\n        this.activeListItem = this.getLastItem();\n      }\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.Home) {\n      event.preventDefault();\n      this.activeListItem = this.getFirstItem();\n    }\n\n    if (event.key === NAVIGATABLE_KEYS.End) {\n      event.preventDefault();\n      this.activeListItem = this.getLastItem();\n    }\n\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem);\n    }\n  }\n\n  protected activateListItem(item: ListItem) {\n    item.activate();\n  }\n\n  protected deactivateListItem(item: ListItem) {\n    item.deactivate();\n  }\n\n  protected isListItemActive(item: ListItem): boolean {\n    return item.isActive();\n  }\n\n  protected handleAction(event: CustomEvent) {}\n\n  activateFirstItem() {\n    this.activeListItem = this.getFirstItem();\n    this.activeListItem.activate();\n  }\n\n  activateLastItem() {\n    this.activeListItem = this.getLastItem();\n    this.activeListItem.activate();\n  }\n\n  resetActiveListItem() {\n    this.activeListItem = null;\n  }\n\n  focusListRoot() {\n    this.listRoot.focus();\n  }\n\n  /** Updates `this.items` based on slot elements in the DOM. */\n  protected updateItems() {\n    const elements = this.assignedElements || [];\n    this.items = elements.filter(this.isListItem, this);\n  }\n\n  /** @return Whether the given element is a list item element. */\n  private isListItem(element: Element): element is ListItem {\n    return element.tagName.toLowerCase() === this.listItemTagName;\n  }\n\n  private getFirstItem(): ListItem {\n    return this.items[0];\n  }\n\n  private getLastItem(): ListItem {\n    return this.items[this.items.length - 1];\n  }\n\n  private getPrevItem(item: ListItem): ListItem {\n    const curIndex = this.items.indexOf(item);\n    return this.items[curIndex === 0 ? this.items.length - 1 : curIndex - 1];\n  }\n\n  private getNextItem(item: ListItem): ListItem {\n    const curIndex = this.items.indexOf(item);\n    return this.items[(curIndex + 1) % this.items.length];\n  }\n}\n"]}

package/list/lib/listitem/_list-item-theme.scss

@@ -0,0 +1,337 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// TODO(b/228217731): Remove compat dependencies
+@use 'sass:map';
+@use 'sass:string';
+@use '@material/web/compat/theme/state';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+@use '../icon/list-item-icon-theme';
+@use '../image/list-item-image-theme';
+@use '../video/list-item-video-theme';
+@use '../tokens';
+
+$selectors: (
+  disabled: '.md3-list-item--disabled',
+);
+
+$light-theme: tokens.md-comp-list-values();
+
+@function _resolve-theme($theme, $resolvers) {
+  @return $theme;
+}
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, list);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, list);
+
+  @include _set-container-color(
+    (
+      default: map.get($theme, list-item-container-color),
+    )
+  );
+
+  @include _set-label-text-typography(
+    (
+      family: map.get($theme, list-item-label-text-font),
+      size: map.get($theme, list-item-label-text-size),
+      tracking: map.get($theme, list-item-label-text-tracking),
+      weight: map.get($theme, list-item-label-text-weight),
+      line-height: map.get($theme, list-item-label-text-line-height),
+    )
+  );
+
+  @include _set-label-text-ink-color(
+    (
+      default: map.get($theme, list-item-label-text-color),
+      disabled: map.get($theme, list-item-disabled-label-text-color),
+    )
+  );
+  @include _set-disabled-label-text-opacity(
+    map.get($theme, list-item-disabled-label-text-opacity)
+  );
+
+  @include _set-supporting-text-typography(
+    (
+      family: map.get($theme, list-item-supporting-text-font),
+      size: map.get($theme, list-item-supporting-text-size),
+      tracking: map.get($theme, list-item-supporting-text-tracking),
+      weight: map.get($theme, list-item-supporting-text-weight),
+      line-height: map.get($theme, list-item-supporting-text-line-height),
+    )
+  );
+
+  @include _set-supporting-text-ink-color(
+    (
+      default: map.get($theme, list-item-supporting-text-color),
+      disabled: map.get($theme, list-item-disabled-supporting-text-color),
+    )
+  );
+  @include _set-disabled-supporting-text-opacity(
+    map.get($theme, list-item-disabled-supporting-text-opacity)
+  );
+
+  @include _set-trailing-supporting-text-typography(
+    (
+      family: map.get($theme, list-item-trailing-supporting-text-font),
+      size: map.get($theme, list-item-trailing-supporting-text-size),
+      tracking: map.get($theme, list-item-trailing-supporting-text-tracking),
+      weight: map.get($theme, list-item-trailing-supporting-text-weight),
+      line-height:
+        map.get($theme, list-item-trailing-supporting-text-line-height),
+    )
+  );
+  @include _set-trailing-supporting-text-ink-color(
+    (
+      default: map.get($theme, list-item-trailing-supporting-text-color),
+    )
+  );
+
+  @include _set-one-line-container-height(
+    map.get($theme, list-item-one-line-container-height)
+  );
+  @include _set-two-line-container-height(
+    map.get($theme, list-item-two-line-container-height)
+  );
+  @include _set-three-line-container-height(
+    map.get($theme, list-item-three-line-container-height)
+  );
+  @include _set-container-shape(map.get($theme, list-item-container-shape));
+  @include list-item-image-theme.theme(
+    (
+      list-item-leading-image-height:
+        map.get($theme, list-item-leading-image-height),
+      list-item-leading-image-width:
+        map.get($theme, list-item-leading-image-width),
+      list-item-leading-image-shape:
+        map.get($theme, list-item-leading-image-shape),
+    )
+  );
+  @include list-item-video-theme.theme(
+    (
+      list-item-leading-video-height:
+        map.get($theme, list-item-leading-video-height),
+      list-item-leading-video-width:
+        map.get($theme, list-item-leading-video-width),
+      list-item-leading-video-shape:
+        map.get($theme, list-item-leading-video-shape),
+    )
+  );
+
+  .md3-list-item__start {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color: map.get($theme, list-item-leading-icon-color),
+        list-item-icon-size: map.get($theme, list-item-leading-icon-size),
+      )
+    );
+  }
+
+  .md3-list-item__end {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color: map.get($theme, list-item-trailing-icon-color),
+        list-item-icon-size: map.get($theme, list-item-trailing-icon-size),
+      )
+    );
+  }
+
+  &.md3-list-item--disabled .md3-list-item__start {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color:
+          map.get($theme, list-item-disabled-leading-icon-color),
+        list-item-icon-opacity:
+          map.get($theme, list-item-disabled-leading-icon-opacity),
+      )
+    );
+  }
+
+  &.md3-list-item--disabled .md3-list-item__end {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color:
+          map.get($theme, list-item-disabled-trailing-icon-color),
+        list-item-icon-opacity:
+          map.get($theme, list-item-disabled-trailing-icon-opacity),
+      )
+    );
+  }
+
+  &:hover .md3-list-item__start {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color:
+          map.get($theme, list-item-hover-leading-icon-color),
+      )
+    );
+  }
+
+  &:hover .md3-list-item__end {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color:
+          map.get($theme, list-item-hover-trailing-icon-color),
+      )
+    );
+  }
+}
+
+@mixin _set-disabled-label-text-opacity($opacity) {
+  &.md3-list-item--disabled .md3-list-item__label-text {
+    opacity: $opacity;
+  }
+}
+
+@mixin _set-disabled-supporting-text-opacity($opacity) {
+  &.md3-list-item--disabled .md3-list-item__supporting-text {
+    opacity: $opacity;
+  }
+}
+
+@mixin _set-container-shape($shape) {
+  border-radius: $shape;
+}
+
+@mixin _set-container-color($colors) {
+  @include state.enabled($selectors) {
+    @include _set-container-background-color(state.get-default-state($colors));
+  }
+}
+
+@mixin _set-label-text-typography($typography-map) {
+  $family: map.get($typography-map, family);
+  $size: map.get($typography-map, size);
+  $tracking: map.get($typography-map, tracking);
+  $weight: map.get($typography-map, weight);
+  $transform: map.get($typography-map, transform);
+  $line-height: map.get($typography-map, line-height);
+
+  .md3-list-item__label-text {
+    font-family: $family;
+    font-size: $size;
+    letter-spacing: $tracking;
+    font-weight: $weight;
+    text-transform: $transform;
+    line-height: $line-height;
+  }
+}
+
+@mixin _set-label-text-ink-color($colors) {
+  @include state.enabled($selectors) {
+    @include _set-label-text-color(state.get-default-state($colors));
+  }
+
+  &.md3-list-item--disabled {
+    @include _set-label-text-color(state.get-disabled-state($colors));
+  }
+}
+
+@mixin _set-supporting-text-typography($typography-map) {
+  $family: map.get($typography-map, family);
+  $size: map.get($typography-map, size);
+  $tracking: map.get($typography-map, tracking);
+  $weight: map.get($typography-map, weight);
+  $transform: map.get($typography-map, transform);
+  $line-height: map.get($typography-map, line-height);
+
+  .md3-list-item__supporting-text {
+    font-family: $family;
+    font-size: $size;
+    letter-spacing: $tracking;
+    font-weight: $weight;
+    text-transform: $transform;
+    line-height: $line-height;
+  }
+}
+
+@mixin _set-supporting-text-ink-color($colors) {
+  @include state.enabled($selectors) {
+    @include _set-supporting-text-color(state.get-default-state($colors));
+  }
+
+  &.md3-list-item--disabled {
+    @include _set-supporting-text-color(state.get-disabled-state($colors));
+  }
+}
+
+@mixin _set-trailing-supporting-text-typography($typography-map) {
+  $family: map.get($typography-map, family);
+  $size: map.get($typography-map, size);
+  $tracking: map.get($typography-map, tracking);
+  $weight: map.get($typography-map, weight);
+  $transform: map.get($typography-map, transform);
+  $line-height: map.get($typography-map, line-height);
+
+  .md3-list-item__trailing-supporting-text {
+    font-family: $family;
+    font-size: $size;
+    letter-spacing: $tracking;
+    font-weight: $weight;
+    text-transform: $transform;
+    line-height: $line-height;
+  }
+}
+
+@mixin _set-trailing-supporting-text-ink-color($colors) {
+  @include state.enabled($selectors) {
+    @include _set-trailing-supporting-text-color(
+      state.get-default-state($colors)
+    );
+  }
+}
+
+@mixin _set-one-line-container-height($height) {
+  &.md3-list-item--with-one-line {
+    min-height: $height;
+  }
+}
+
+@mixin _set-two-line-container-height($height) {
+  &.md3-list-item--with-two-line {
+    min-height: $height;
+  }
+}
+
+@mixin _set-three-line-container-height($height) {
+  &.md3-list-item--with-three-line {
+    min-height: $height;
+  }
+}
+
+@mixin _set-container-background-color($color) {
+  background-color: $color;
+}
+
+@mixin _set-label-text-color($color) {
+  .md3-list-item__label-text {
+    color: $color;
+  }
+}
+
+@mixin _set-supporting-text-color($color) {
+  .md3-list-item__supporting-text {
+    color: $color;
+  }
+}
+
+@mixin _set-trailing-supporting-text-color($color) {
+  .md3-list-item__trailing-supporting-text {
+    color: $color;
+  }
+}

package/list/lib/listitem/_list-item.scss

@@ -0,0 +1,133 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use '@material/web/focus/lib/focus-ring-theme';
+
+@mixin static-styles() {
+  :host {
+    @include host-root;
+    @include focus-ring-theme.theme(
+      (
+        container-outer-padding-vertical: -2px,
+        container-outer-padding-horizontal: -4px,
+      )
+    );
+  }
+
+  .md3-list-item {
+    @include item-root;
+  }
+
+  .md3-list-item--with-leading-thumbnail {
+    @include thumbnail-item-root;
+  }
+
+  .md3-list-item--with-leading-image {
+    @include image-item-root;
+  }
+
+  .md3-list-item--with-leading-video {
+    @include video-item-root;
+  }
+
+  .md3-list-item__ripple {
+    display: inline-flex;
+    inset: 0;
+    position: absolute;
+    z-index: 0;
+  }
+
+  .md3-list-item__focus-ring {
+    z-index: 1;
+  }
+}
+
+@mixin host-root() {
+  color: unset;
+}
+
+@mixin item-root() {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  outline: none;
+  position: relative;
+  width: 100%;
+
+  &.md3-list-item--enabled {
+    cursor: pointer;
+  }
+
+  .md3-list-item__start {
+    flex: 0 0 auto;
+    z-index: 1;
+  }
+
+  .md3-list-item__body {
+    box-sizing: border-box;
+    flex: 1 0 0;
+    padding-inline-start: 16px;
+    width: 100%;
+    z-index: 1;
+  }
+
+  .md3-list-item__end {
+    flex: 0 0 auto;
+    padding-inline-end: 24px;
+    z-index: 1;
+  }
+
+  .md3-list-item__label-text {
+    display: flex;
+  }
+
+  .md3-list-item__supporting-text {
+    display: block;
+    padding-block-start: 4px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .md3-list-item__supporting-text--multi-line {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    overflow: hidden;
+    white-space: normal;
+  }
+
+  .md3-list-item__trailing-supporting-text {
+    padding-inline-start: 16px;
+  }
+}
+
+@mixin icon-item-root() {
+  .md3-list-item__start {
+    padding-inline-start: 16px;
+  }
+}
+
+@mixin thumbnail-item-root() {
+  .md3-list-item__start {
+    padding-inline-start: 16px;
+  }
+}
+
+@mixin image-item-root() {
+  .md3-list-item__start {
+    padding-inline-start: 16px;
+  }
+}
+
+@mixin video-item-root() {
+  .md3-list-item__start {
+    padding-inline-start: 0;
+  }
+}

package/list/lib/listitem/harness.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+import { ListItem } from './list-item.js';
+/**
+ * Test harness for list item.
+ */
+export declare class ListItemHarness extends Harness<ListItem> {
+    getInteractiveElement(): Promise<HTMLElement>;
+}

package/list/lib/listitem/harness.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+/**
+ * Test harness for list item.
+ */
+export class ListItemHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('li');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/list/lib/listitem/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAIzD;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,OAAiB;IAC3C,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAgB,CAAC;IACpE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '@material/web/testing/harness.js';\n\nimport {ListItem} from './list-item.js';\n\n/**\n * Test harness for list item.\n */\nexport class ListItemHarness extends Harness<ListItem> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('li') as HTMLElement;\n  }\n}\n"]}

package/list/lib/listitem/list-item-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;