chore: move list into the new directory

PiperOrigin-RevId: 460539830

list/lib/_list-item-theme.scss

@@ -0,0 +1,229 @@
+//
+// 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';
+
+$selectors: (
+  disabled: '.md3-list-item--disabled',
+);
+
+$light-theme: (
+  container-height: 56px,
+  container-color: transparent,
+  label-text-font: string.unquote('Roboto, sans-serif'),
+  label-text-size: 16px,
+  label-text-tracking: 0.03125rem,
+  label-text-weight: 400,
+  label-text-color: #1f1f1f,
+  supporting-text-font: string.unquote('Roboto, sans-serif'),
+  supporting-text-size: 14px,
+  supporting-text-tracking: 0.015625rem,
+  supporting-text-weight: 300,
+  supporting-text-color: #444746,
+  trailing-supporting-text-font: string.unquote('Roboto, sans-serif'),
+  trailing-supporting-text-size: 12px,
+  trailing-supporting-text-tracking: 0.015625rem,
+  trailing-supporting-text-weight: 300,
+  trailing-supporting-text-color: #646766,
+  icon-color: #444746,
+);
+
+@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-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, list);
+
+  @include _set_container-color(
+    (
+      default: map.get($theme, container-color),
+    )
+  );
+
+  @include _set-label-text-typography(
+    (
+      family: map.get($theme, label-text-font),
+      size: map.get($theme, label-text-size),
+      tracking: map.get($theme, label-text-tracking),
+      weight: map.get($theme, label-text-weight),
+    )
+  );
+
+  @include _set_label-text-ink-color(
+    (
+      default: map.get($theme, label-text-color),
+    )
+  );
+
+  @include _set-supporting-text-typography(
+    (
+      family: map.get($theme, supporting-text-font),
+      size: map.get($theme, supporting-text-size),
+      tracking: map.get($theme, supporting-text-tracking),
+      weight: map.get($theme, supporting-text-weight),
+    )
+  );
+
+  @include _set_supporting-text-ink-color(
+    (
+      default: map.get($theme, supporting-text-color),
+    )
+  );
+
+  @include _set-trailing-supporting-text-typography(
+    (
+      family: map.get($theme, supporting-text-font),
+      size: map.get($theme, supporting-text-size),
+      tracking: map.get($theme, supporting-text-tracking),
+      weight: map.get($theme, supporting-text-weight),
+    )
+  );
+
+  @include _set_trailing-supporting-text-ink-color(
+    (
+      default: map.get($theme, trailing-supporting-text-color),
+    )
+  );
+
+  @include _set-icon-ink-color(
+    (
+      default: map.get($theme, icon-color),
+    )
+  );
+
+  $container-height: map.get($theme, container-height);
+  @include _set-height($container-height);
+}
+
+@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);
+
+  .md3-list-item__label-text {
+    font-family: $family;
+    font-size: $size;
+    letter-spacing: $tracking;
+    font-weight: $weight;
+    text-transform: $transform;
+  }
+}
+
+@mixin _set-label-text-ink-color($colors) {
+  @include state.enabled($selectors) {
+    @include _set-label-text-color(state.get-default-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);
+
+  .md3-list-item__supporting-text {
+    font-family: $family;
+    font-size: $size;
+    letter-spacing: $tracking;
+    font-weight: $weight;
+    text-transform: $transform;
+  }
+}
+
+@mixin _set-supporting-text-ink-color($colors) {
+  @include state.enabled($selectors) {
+    @include _set-supporting-text-color(state.get-default-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);
+
+  .md3-list-item__trailing-supporting-text {
+    font-family: $family;
+    font-size: $size;
+    letter-spacing: $tracking;
+    font-weight: $weight;
+    text-transform: $transform;
+  }
+}
+
+@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-icon-ink-color($colors) {
+  @include state.enabled($selectors) {
+    @include _set-icon-color(state.get-default-state($colors));
+  }
+}
+
+@mixin _set-height($height) {
+  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;
+  }
+}
+
+@mixin _set-icon-color($color) {
+  &.md3-list-item--with-leading-icon .md3-list-item__start {
+    color: $color;
+  }
+}

list/lib/_list-item.scss

@@ -0,0 +1,129 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  :host {
+    @include host-root;
+  }
+
+  .md3-list-item {
+    @include item-root;
+  }
+
+  .md3-list-item--with-leading-icon {
+    @include icon-item-root;
+  }
+
+  .md3-list-item--with-leading-avatar {
+    @include avatar-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__icon {
+    @include icon-root;
+  }
+}
+
+@mixin host-root() {
+  color: unset;
+}
+
+@mixin item-root() {
+  display: flex;
+  flex-flow: row nowrap;
+  width: 100%;
+  justify-content: space-evenly;
+  align-items: center;
+
+  .md3-list-item__start {
+    flex: 0 0 auto;
+  }
+
+  .md3-list-item__body {
+    flex: 1 1 100%;
+  }
+
+  .md3-list-item__end {
+    flex: 0 0 auto;
+  }
+
+  .md3-list-item__label-text {
+    display: block;
+  }
+
+  .md3-list-item__supporting-text {
+    display: block;
+    margin-block-start: 4px;
+  }
+}
+
+@mixin icon-item-root() {
+  .md3-list-item__start {
+    margin-inline-end: 16px;
+  }
+}
+
+@mixin avatar-item-root() {
+  .md3-list-item__start {
+    margin-inline-end: 16px;
+  }
+}
+
+@mixin thumbnail-item-root() {
+  .md3-list-item__start {
+    margin-inline-end: 16px;
+  }
+}
+
+@mixin image-item-root() {
+  .md3-list-item__start {
+    margin-inline-end: 16px;
+  }
+}
+
+@mixin video-item-root() {
+  .md3-list-item__start {
+    margin-inline-end: 8px;
+  }
+}
+
+@mixin icon-root() {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  width: 24px;
+  height: 24px;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

list/lib/_list-theme.scss

@@ -0,0 +1,52 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// TODO(b/228217731): Remove MDC/MWC dependencies
+@use 'sass:map';
+@use '@material/web/compat/theme/state';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+
+$selectors: (
+  disabled: '.md3-list--disabled',
+);
+
+$light-theme: (
+  color: unset,
+);
+
+@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-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, list);
+
+  @include _colors(
+    (
+      default: map.get($theme, color),
+    )
+  );
+}
+
+@mixin _colors($colors) {
+  @include state.enabled($selectors) {
+    @include _set-color(state.get-default-state($colors));
+  }
+}
+
+@mixin _set-color($color) {
+  color: $color;
+}

list/lib/_list.scss

@@ -0,0 +1,30 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  :host {
+    @include host-root;
+  }
+
+  .md3-list {
+    @include root;
+  }
+}
+
+@mixin host-root() {
+  color: unset;
+}
+
+@mixin root() {
+  display: block;
+  margin: 0;
+  padding: 0;
+  padding-block: 8px;
+  list-style-type: none;
+  min-width: 300px;
+}

list/lib/constants.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ListItemState} from './state';
+
+/**
+ * ListItemInteractionEventDetail provides details for the interaction
+ * event.
+ */
+export interface ListItemInteractionEventDetail {
+  state: ListItemState;
+}
+
+/**
+ * ListItemInteractionEvent is the custom event for the interaction event.
+ */
+export type ListItemInteractionEvent =
+    CustomEvent<ListItemInteractionEventDetail>;

list/lib/list-item-icon.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, LitElement, TemplateResult} from 'lit';
+import {property} from 'lit/decorators';
+
+/** @soyCompatible */
+export class ListItemIcon extends LitElement {
+  @property({type: String, reflect: true}) media = 'icon';
+
+  /** @soyTemplate */
+  override render(): TemplateResult {
+    return html`
+      <span class="md3-list-item__icon"><slot></slot></span>
+    `;
+  }
+}

list/lib/list-item-styles.scss

@@ -0,0 +1,16 @@
+//
+// 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 './list-item-theme';
+@use './list-item';
+
+@include list-item.static-styles;
+
+.md3-list-item {
+  @include list-item-theme.theme-styles(list-item-theme.$light-theme);
+}

list/lib/list-item.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ARIARole} from '@material/web/types/aria';
+import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
+import {property, queryAssignedElements, state} from 'lit/decorators';
+import {ClassInfo, classMap} from 'lit/directives/class-map';
+
+/** @soyCompatible */
+export class ListItem extends LitElement {
+  @property({type: String}) supportingText = '';
+  @property({type: String}) trailingSupportingText = '';
+
+  @queryAssignedElements(
+      {slot: 'start', flatten: true, selector: '[media=icon]'})
+  protected leadingIcon!: HTMLElement[];
+
+  @queryAssignedElements({slot: 'end', flatten: true, selector: '[media=icon]'})
+  protected trailingIcon!: HTMLElement[];
+
+  @property() hasLeadingIcon = false;
+  @property() hasTrailingIcon = false;
+
+  /** @soyTemplate */
+  override render(): TemplateResult {
+    return html`
+      <li
+          tabindex="0"
+          role=${this.getAriaRole()}
+          class="md3-list-item ${classMap(this.getRenderClasses())}"
+          @click=${this.handleClick}>
+        ${this.renderStart()}
+        ${this.renderBody()}
+        ${this.renderEnd()}
+      </li>`;
+  }
+
+  /** @soyTemplate */
+  protected getAriaRole(): ARIARole {
+    return 'listitem';
+  }
+
+  /** @soyTemplate */
+  protected getRenderClasses(): ClassInfo {
+    return {
+      'md3-list-item--with-one-line': this.supportingText === '',
+      'md3-list-item--with-two-lines': this.supportingText !== '',
+      'md3-list-item--with-leading-icon': this.hasLeadingIcon,
+      'md3-list-item--with-trailing-icon': this.hasTrailingIcon,
+    };
+  }
+
+  /** @soyTemplate */
+  protected renderStart(): TemplateResult {
+    return html`<div class="md3-list-item__start"><!--
+      --><slot name="start" @slotchange=${this.handleSlotChange}></slot><!--
+    --></div>`;
+  }
+
+  /** @soyTemplate */
+  protected renderBody(): TemplateResult {
+    return html`<div class="md3-list-item__body"><!--
+       --><span class="md3-list-item__label-text"><!--
+          --><slot @slotchange=${this.handleSlotChange}></slot><!--
+       --></span><!--
+        -->${this.supportingText !== '' ? this.renderSupportingText() : ''}<!--
+    --></div>`;
+  }
+
+  /** @soyTemplate */
+  protected renderSupportingText(): TemplateResult {
+    return html`<span class="md3-list-item__supporting-text"><!--
+          -->${this.supportingText}<!--
+       --></span>`;
+  }
+
+  /** @soyTemplate */
+  protected renderEnd(): TemplateResult {
+    return html`<div class="md3-list-item__end"><!--
+      --><slot name="end" @slotchange=${this.handleSlotChange}><!--
+        -->${
+        this.trailingSupportingText !== '' ?
+            this.renderTrailingSupportingText() :
+            ''}<!--
+      --></slot><!--
+    --></div>`;
+  }
+
+  /** @soyTemplate */
+  protected renderTrailingSupportingText(): TemplateResult {
+    return html`<span class="md3-list-item__trailing-supporting-text"><!--
+          -->${this.trailingSupportingText}<!--
+       --></span>`;
+  }
+
+  protected handleSlotChange() {
+    this.requestUpdate();
+  }
+
+  handleClick() {}
+
+  override update(changedProperties: PropertyValues<this>) {
+    this.updateMetadata();
+    super.update(changedProperties);
+  }
+
+  private updateMetadata() {
+    this.hasLeadingIcon = this.leadingIcon.length > 0;
+    this.hasTrailingIcon = this.trailingIcon.length > 0;
+  }
+}

list/lib/list-styles.scss

@@ -0,0 +1,16 @@
+//
+// 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 './list-theme';
+@use './list';
+
+@include list.static-styles;
+
+.md3-list {
+  @include list-theme.theme-styles(list-theme.$light-theme);
+}

list/lib/list.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ARIARole} from '@material/web/types/aria';
+import {html, LitElement, TemplateResult} from 'lit';
+
+import {ListItemInteractionEvent} from './constants';
+
+/** @soyCompatible */
+export class List extends LitElement {
+  static override shadowRootOptions:
+      ShadowRootInit = {mode: 'open', delegatesFocus: true};
+
+  /** @soyTemplate */
+  protected getAriaRole(): ARIARole {
+    return 'list';
+  }
+
+  /** @soyTemplate */
+  override render(): TemplateResult {
+    return html`
+      <ul class="md3-list"
+          tabindex="0"
+          role=${this.getAriaRole()}
+          @list-item-interaction=${this.handleItemInteraction}>
+        <slot></slot>
+      </ul>
+    `;
+  }
+
+
+  handleItemInteraction(event: ListItemInteractionEvent) {
+    if (event.detail.state.isSelected) {
+      // TODO: manage selection state.
+    }
+  }
+}

list/lib/option-list-item.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ARIARole} from '@material/web/types/aria';
+
+import {ListItem} from './list-item';
+
+/** @soyCompatible */
+export class OptionListItem extends ListItem {
+  /** @soyTemplate */
+  protected override getAriaRole(): ARIARole {
+    return 'option';
+  }
+
+  override handleClick() {
+    this.dispatchEvent(new CustomEvent(
+        'list-item-interaction',
+        {detail: {state: {isSelected: false}}, bubbles: true, composed: true}));
+  }
+}

list/lib/option-list.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ARIARole} from '@material/web/types/aria';
+
+import {List} from './list';
+
+/** @soyCompatible */
+export class OptionList extends List {
+  /** @soyTemplate */
+  protected override getAriaRole(): ARIARole {
+    return 'listbox';
+  }
+}

list/lib/state.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The state of a list item.
+ */
+export interface ListItemState {
+  /**
+   * Whether the item is currently selected.
+   */
+  isSelected: boolean;
+}

list/list-item-icon.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {ListItemIcon} from './lib/list-item-icon';
+import {styles} from './lib/list-item-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-list-item-icon': MdListItemIcon;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-list-item-icon')
+export class MdListItemIcon extends ListItemIcon {
+  static override styles = [styles];
+}

list/list-item.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {ListItem} from './lib/list-item';
+import {styles} from './lib/list-item-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-list-item': MdListItem;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-list-item')
+export class MdListItem extends ListItem {
+  static override styles = [styles];
+}

list/list.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {List} from './lib/list';
+import {styles} from './lib/list-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-list': MdList;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-list')
+export class MdList extends List {
+  static override styles = [styles];
+}

list/option-list-item.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {styles} from './lib/list-item-styles.css'
+import {OptionListItem} from './lib/option-list-item';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-option-list-item': MdOptionListItem;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-option-list-item')
+export class MdOptionListItem extends OptionListItem {
+  static override styles = [styles];
+}

list/option-list.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {styles} from './lib/list-styles.css';
+import {OptionList} from './lib/option-list';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-option-list': MdOptionList;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-option-list')
+export class MdOptionList extends OptionList {
+  static override styles = [styles];
+}