material-web-evo 10002.10001.10000

package/list/internal/list.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { ListItem as SharedListItem } from './list-navigation-helpers.js';
+interface ListItem extends SharedListItem {
+    type: 'text' | 'button' | 'link';
+}
+export declare class List extends LitElement {
+    /**
+     * An array of activatable and disableable list items. Queries every assigned
+     * element that has the `md-list-item` attribute.
+     *
+     * _NOTE:_ This is a shallow, flattened query via
+     * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct
+     * children / directly slotted elements.
+     */
+    protected slotItems: Array<ListItem | (HTMLElement & {
+        item?: ListItem;
+    })>;
+    /** @export */
+    get items(): ListItem[];
+    private readonly listController;
+    private readonly internals;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem(): ListItem | null;
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem(): ListItem | null;
+}
+export {};

package/list/internal/list.js

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, isServer, LitElement } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { ListController, NavigableKeys } from './list-controller.js';
+const NAVIGABLE_KEY_SET = new Set(Object.values(NavigableKeys));
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+export class List extends LitElement {
+    /** @export */
+    get items() {
+        return this.listController.items;
+    }
+    constructor() {
+        super();
+        this.listController = new ListController({
+            isItem: (item) => item.hasAttribute('md-list-item'),
+            getPossibleItems: () => this.slotItems,
+            isRtl: () => getComputedStyle(this).direction === 'rtl',
+            deactivateItem: (item) => {
+                item.tabIndex = -1;
+            },
+            activateItem: (item) => {
+                item.tabIndex = 0;
+            },
+            isNavigableKey: (key) => NAVIGABLE_KEY_SET.has(key),
+            isActivatable: (item) => !item.disabled && item.type !== 'text',
+        });
+        this.internals = 
+        // Cast needed for closure
+        this.attachInternals();
+        if (!isServer) {
+            this.internals.role = 'list';
+            this.addEventListener('keydown', this.listController.handleKeydown);
+        }
+    }
+    render() {
+        return html `
+      <slot
+        @deactivate-items=${this.listController.onDeactivateItems}
+        @request-activation=${this.listController.onRequestActivation}
+        @slotchange=${this.listController.onSlotchange}>
+      </slot>
+    `;
+    }
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem() {
+        return this.listController.activateNextItem();
+    }
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem() {
+        return this.listController.activatePreviousItem();
+    }
+}
+__decorate([
+    queryAssignedElements({ flatten: true })
+], List.prototype, "slotItems", void 0);
+//# sourceMappingURL=list.js.map

package/list/internal/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAC,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAGnE,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAS,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAMxE,gEAAgE;AAChE,MAAM,OAAO,IAAK,SAAQ,UAAU;IAYlC,cAAc;IACd,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;IACnC,CAAC;IAqBD;QACE,KAAK,EAAE,CAAC;QApBO,mBAAc,GAAG,IAAI,cAAc,CAAW;YAC7D,MAAM,EAAE,CAAC,IAAiB,EAAoB,EAAE,CAC9C,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;YACnC,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS;YACtC,KAAK,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK;YACvD,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE;gBACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACrB,CAAC;YACD,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;gBACrB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YACpB,CAAC;YACD,cAAc,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC;YACnD,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;SAChE,CAAC,CAAC;QAEc,cAAS;QACxB,0BAA0B;QACzB,IAAoB,CAAC,eAAe,EAAE,CAAC;QAIxC,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;YAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SACrE;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,cAAc,CAAC,iBAAiB;8BACnC,IAAI,CAAC,cAAc,CAAC,mBAAmB;sBAC/C,IAAI,CAAC,cAAc,CAAC,YAAY;;KAEjD,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACH,gBAAgB;QACd,OAAO,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC;IAChD,CAAC;IAED;;;;;OAKG;IACH,oBAAoB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,oBAAoB,EAAE,CAAC;IACpD,CAAC;CACF;AA/DW;IADT,qBAAqB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCACmC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {ListController, NavigableKeys} from './list-controller.js';\nimport {ListItem as SharedListItem} from './list-navigation-helpers.js';\n\nconst NAVIGABLE_KEY_SET = new Set<string>(Object.values(NavigableKeys));\n\ninterface ListItem extends SharedListItem {\n  type: 'text' | 'button' | 'link';\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  /**\n   * An array of activatable and disableable list items. Queries every assigned\n   * element that has the `md-list-item` attribute.\n   *\n   * _NOTE:_ This is a shallow, flattened query via\n   * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct\n   * children / directly slotted elements.\n   */\n  @queryAssignedElements({flatten: true})\n  protected slotItems!: Array<ListItem | (HTMLElement & {item?: ListItem})>;\n\n  /** @export */\n  get items() {\n    return this.listController.items;\n  }\n\n  private readonly listController = new ListController<ListItem>({\n    isItem: (item: HTMLElement): item is ListItem =>\n      item.hasAttribute('md-list-item'),\n    getPossibleItems: () => this.slotItems,\n    isRtl: () => getComputedStyle(this).direction === 'rtl',\n    deactivateItem: (item) => {\n      item.tabIndex = -1;\n    },\n    activateItem: (item) => {\n      item.tabIndex = 0;\n    },\n    isNavigableKey: (key) => NAVIGABLE_KEY_SET.has(key),\n    isActivatable: (item) => !item.disabled && item.type !== 'text',\n  });\n\n  private readonly internals =\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'list';\n      this.addEventListener('keydown', this.listController.handleKeydown);\n    }\n  }\n\n  protected override render() {\n    return html`\n      <slot\n        @deactivate-items=${this.listController.onDeactivateItems}\n        @request-activation=${this.listController.onRequestActivation}\n        @slotchange=${this.listController.onSlotchange}>\n      </slot>\n    `;\n  }\n\n  /**\n   * Activates the next item in the list. If at the end of the list, the first\n   * item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activateNextItem(): ListItem | null {\n    return this.listController.activateNextItem();\n  }\n\n  /**\n   * Activates the previous item in the list. If at the start of the list, the\n   * last item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activatePreviousItem(): ListItem | null {\n    return this.listController.activatePreviousItem();\n  }\n}\n"]}

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

@@ -0,0 +1,163 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../focus/focus-ring';
+@use '../../../icon/icon';
+@use '../../../ripple/ripple';
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-list-item-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-list-item-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-list-item-values();
+
+  :host {
+    border-radius: map.get($tokens, 'container-shape');
+    display: flex;
+    -webkit-tap-highlight-color: transparent;
+
+    @include ripple.theme(
+      (
+        hover-color: map.get($tokens, 'hover-state-layer-color'),
+        hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
+        pressed-color: map.get($tokens, 'pressed-state-layer-color'),
+        pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
+      )
+    );
+  }
+
+  :host(:is([type='button']:not([disabled]), [type='link'])) {
+    cursor: pointer;
+  }
+
+  md-focus-ring {
+    z-index: 1;
+
+    @include focus-ring.theme(
+      (
+        'shape': 8px,
+      )
+    );
+  }
+
+  a,
+  button,
+  li {
+    // Resets. These can be removed once we're no longer use these tags
+    background: none;
+    border: none;
+    cursor: inherit;
+    padding: 0;
+    margin: 0;
+    text-align: unset;
+    text-decoration: none;
+  }
+
+  .list-item {
+    border-radius: inherit;
+    display: flex;
+    flex: 1;
+    max-width: inherit;
+    min-width: inherit;
+    outline: none;
+    // hide android tap color since we have ripple
+    -webkit-tap-highlight-color: transparent;
+    width: 100%;
+  }
+
+  .list-item.interactive {
+    cursor: pointer;
+  }
+
+  .list-item.disabled {
+    opacity: map.get($tokens, 'disabled-opacity');
+    pointer-events: none;
+  }
+
+  [slot='container'] {
+    pointer-events: none;
+  }
+
+  md-ripple {
+    border-radius: inherit;
+  }
+
+  md-item {
+    border-radius: inherit;
+    flex: 1;
+    height: 100%;
+    color: map.get($tokens, 'label-text-color');
+    font-family: map.get($tokens, 'label-text-font');
+    font-size: map.get($tokens, 'label-text-size');
+    line-height: map.get($tokens, 'label-text-line-height');
+    font-weight: map.get($tokens, 'label-text-weight');
+    min-height: map.get($tokens, 'one-line-container-height');
+    padding-top: map.get($tokens, 'top-space');
+    padding-bottom: map.get($tokens, 'bottom-space');
+    padding-inline-start: map.get($tokens, 'leading-space');
+    padding-inline-end: map.get($tokens, 'trailing-space');
+  }
+
+  md-item[multiline] {
+    min-height: map.get($tokens, 'two-line-container-height');
+  }
+
+  [slot='supporting-text'] {
+    color: map.get($tokens, 'supporting-text-color');
+    font-family: map.get($tokens, 'supporting-text-font');
+    font-size: map.get($tokens, 'supporting-text-size');
+    line-height: map.get($tokens, 'supporting-text-line-height');
+    font-weight: map.get($tokens, 'supporting-text-weight');
+  }
+
+  [slot='trailing-supporting-text'] {
+    color: map.get($tokens, 'trailing-supporting-text-color');
+    font-family: map.get($tokens, 'trailing-supporting-text-font');
+    font-size: map.get($tokens, 'trailing-supporting-text-size');
+    line-height: map.get($tokens, 'trailing-supporting-text-line-height');
+    font-weight: map.get($tokens, 'trailing-supporting-text-weight');
+  }
+
+  :is([slot='start'], [slot='end'])::slotted(*) {
+    fill: currentColor;
+  }
+
+  [slot='start'] {
+    color: map.get($tokens, 'leading-icon-color');
+  }
+
+  [slot='end'] {
+    color: map.get($tokens, 'trailing-icon-color');
+  }
+
+  @media (forced-colors: active) {
+    .disabled slot {
+      color: GrayText;
+    }
+
+    .list-item.disabled {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { Harness } from '../../../testing/harness.js';
+import { NavigableKeys } from '../list-controller.js';
+import { ListItem } from '../list-navigation-helpers.js';
+/**
+ * Keys that are handled by MdList. Keys not included in this are not handled by
+ * MdList and should be dispatched by yourself.
+ */
+export type HandledListKeys = (typeof NavigableKeys)[keyof typeof NavigableKeys];
+/**
+ * Test harness for list item.
+ */
+export declare class ListItemHarness<T extends LitElement = ListItem & LitElement> extends Harness<T> {
+    getInteractiveElement(): Promise<HTMLElement>;
+    /**
+     * Constructs keyboard events that are handled by List and makes sure that
+     * they are constructed in a manner that List understands.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    pressHandledKey<U extends string = HandledListKeys>(key: U): Promise<void>;
+}

package/list/internal/listitem/harness.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../../../testing/harness.js';
+/**
+ * Test harness for list item.
+ */
+export class ListItemHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.list-item');
+    }
+    /**
+     * Constructs keyboard events that are handled by List and makes sure that
+     * they are constructed in a manner that List understands.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    async pressHandledKey(key) {
+        await this.keypress(key, { code: key });
+    }
+}
+//# sourceMappingURL=harness.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAWpD;;GAEG;AACH,MAAM,OAAO,eAEX,SAAQ,OAAU;IACT,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;IAC5E,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,eAAe,CAAqC,GAAM;QAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;IACxC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {Harness} from '../../../testing/harness.js';\nimport {NavigableKeys} from '../list-controller.js';\nimport {ListItem} from '../list-navigation-helpers.js';\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n  (typeof NavigableKeys)[keyof typeof NavigableKeys];\n\n/**\n * Test harness for list item.\n */\nexport class ListItemHarness<\n  T extends LitElement = ListItem & LitElement,\n> extends Harness<T> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.list-item') as HTMLElement;\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<U extends string = HandledListKeys>(key: U) {\n    await this.keypress(key, {code: key});\n  }\n}\n"]}

package/list/internal/listitem/list-item-styles.css

@@ -0,0 +1 @@
+:host{display:flex;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}/*# sourceMappingURL=list-item-styles.css.map */

package/list/internal/listitem/list-item-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_list-item.scss","../../../ripple/internal/_ripple.scss","../../../focus/internal/_focus-ring.scss"],"names":[],"mappings":"AAiCE,MAEE,aACA,0CCfE,kYD2BJ,sDACE,eAGF,cACE,UE9BE,2BFuCJ,YAIE,gBACA,YACA,eACA,UACA,SACA,iBACA,qBAGF,WACE,sBACA,aACA,OACA,kBACA,kBACA,aAEA,0CACA,WAGF,uBACE,eAGF,oBACE,kDACA,oBAGF,iBACE,oBAGF,UACE,sBAGF,QACE,sBACA,OACA,YACA,oFACA,+HACA,6FACA,+GACA,yIACA,+DACA,gDACA,sDACA,6DACA,4DAGF,mBACE,+DAGF,uBACE,iGACA,qIACA,uGACA,sHACA,+IAGF,gCACE,0GACA,8IACA,iHACA,4HACA,uJAGF,yCACE,kBAGF,aACE,8FAGF,WACE,+FAGF,8BACE,eACE,eAGF,oBACE,eACA","file":"list-item-styles.css"}

package/list/internal/listitem/list-item-styles.d.ts

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

package/list/internal/listitem/list-item-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./list/internal/listitem/list-item-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{display:flex;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}
+`;
+//# sourceMappingURL=list-item-styles.js.map

package/list/internal/listitem/list-item-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-styles.js","sourceRoot":"","sources":["list-item-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,0EAA0E;AAC1E,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./list/internal/listitem/list-item-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{display:flex;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}\n`;\n"]}

package/list/internal/listitem/list-item-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './list-item';
+// go/keep-sorted end
+
+@include list-item.styles;

package/list/internal/listitem/list-item.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../focus/md-focus-ring.js';
+import '../../../labs/item/item.js';
+import '../../../ripple/ripple.js';
+import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { ListItem } from '../list-navigation-helpers.js';
+/**
+ * Supported behaviors for a list item.
+ */
+export type ListItemType = 'text' | 'button' | 'link';
+declare const listItemBaseClass: import("../../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
+/**
+ * @fires request-activation {Event} Requests the list to set `tabindex=0` on
+ * the item and focus it. --bubbles --composed
+ */
+export declare class ListItemEl extends listItemBaseClass implements ListItem {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /**
+     * Disables the item and makes it non-selectable and non-interactive.
+     */
+    disabled: boolean;
+    /**
+     * Sets the behavior of the list item, defaults to "text". Change to "link" or
+     * "button" for interactive items.
+     */
+    type: ListItemType;
+    /**
+     * READONLY. Sets the `md-list-item` attribute on the element.
+     */
+    isListItem: boolean;
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+     */
+    href: string;
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
+     * set.
+     */
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    protected readonly listItemRoot: HTMLElement | null;
+    private get isDisabled();
+    protected willUpdate(changed: PropertyValues<ListItemEl>): void;
+    protected render(): TemplateResult;
+    /**
+     * Renders the root list item.
+     *
+     * @param content the child content of the list item.
+     */
+    protected renderListItem(content: unknown): TemplateResult;
+    /**
+     * Handles rendering of the ripple element.
+     */
+    protected renderRipple(): TemplateResult | typeof nothing;
+    /**
+     * Handles rendering of the focus ring.
+     */
+    protected renderFocusRing(): TemplateResult | typeof nothing;
+    protected onFocusRingVisibilityChanged(e: Event): void;
+    /**
+     * Classes applied to the list item root.
+     */
+    protected getRenderClasses(): ClassInfo;
+    /**
+     * Handles rendering the headline and supporting text.
+     */
+    protected renderBody(): TemplateResult<1>;
+    protected onFocus(): void;
+    focus(): void;
+}
+export {};