material-web-evo 10002.10001.10000

package/labs/card/internal/_outlined-card.scss

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-outlined-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Outlined card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-card-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .outline {
+    border-color: var(--_outline-color);
+    border-width: var(--_outline-width);
+  }
+}

package/labs/card/internal/_shared.scss

@@ -0,0 +1,62 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../../elevation/elevation';
+// go/keep-sorted end
+
+@mixin styles() {
+  :host {
+    border-radius: var(--_container-shape);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    // Reset z-index for background elements.
+    z-index: 0;
+  }
+
+  md-elevation,
+  .background,
+  .outline {
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  // Separate element will be needed for disabled opacities (b/307361748)
+  .background {
+    background: var(--_container-color);
+    // Place behind content.
+    z-index: -1;
+  }
+
+  // Separate element needed to overlay on top of content as opposed to
+  // background, which is behind content. All cards have an outline for HCM.
+  .outline {
+    // A default transparent border that is visible in HCM
+    border: 1px solid transparent;
+    // Outline should be placed on top of content, such as images.
+    z-index: 1;
+  }
+
+  md-elevation {
+    // Place behind content.
+    z-index: -1;
+
+    @include elevation.theme(
+      (
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color),
+      )
+    );
+  }
+
+  slot {
+    // Allow content to inherit card's border radius
+    border-radius: inherit;
+  }
+}

package/labs/card/internal/card.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../elevation/elevation.js';
+import { LitElement } from 'lit';
+/**
+ * A card component.
+ */
+export declare class Card extends LitElement {
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/labs/card/internal/card.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../elevation/elevation.js';
+import { html, LitElement } from 'lit';
+/**
+ * A card component.
+ */
+export class Card extends LitElement {
+    render() {
+        return html `
+      <md-elevation part="elevation"></md-elevation>
+      <div class="background"></div>
+      <slot></slot>
+      <div class="outline"></div>
+    `;
+    }
+}
+//# sourceMappingURL=card.js.map

package/labs/card/internal/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAErC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IACf,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement} from 'lit';\n\n/**\n * A card component.\n */\nexport class Card extends LitElement {\n  protected override render() {\n    return html`\n      <md-elevation part=\"elevation\"></md-elevation>\n      <div class=\"background\"></div>\n      <slot></slot>\n      <div class=\"outline\"></div>\n    `;\n  }\n}\n"]}

package/labs/card/internal/elevated-styles.css

@@ -0,0 +1 @@
+:host{--_container-color: var(--md-elevated-card-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-card-container-elevation, 1);--_container-shadow-color: var(--md-elevated-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-elevated-card-container-shape, var(--md-sys-shape-corner-medium, 12px))}/*# sourceMappingURL=elevated-styles.css.map */

package/labs/card/internal/elevated-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_elevated-card.scss"],"names":[],"mappings":"AA6BE,MAEI","file":"elevated-styles.css"}

package/labs/card/internal/elevated-styles.d.ts

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

package/labs/card/internal/elevated-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/card/internal/elevated-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{--_container-color: var(--md-elevated-card-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-card-container-elevation, 1);--_container-shadow-color: var(--md-elevated-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-elevated-card-container-shape, var(--md-sys-shape-corner-medium, 12px))}
+`;
+//# sourceMappingURL=elevated-styles.js.map

package/labs/card/internal/elevated-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevated-styles.js","sourceRoot":"","sources":["elevated-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qEAAqE;AACrE,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 ./labs/card/internal/elevated-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-color: var(--md-elevated-card-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-card-container-elevation, 1);--_container-shadow-color: var(--md-elevated-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-elevated-card-container-shape, var(--md-sys-shape-corner-medium, 12px))}\n`;\n"]}

package/labs/card/internal/elevated-styles.scss

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

package/labs/card/internal/filled-styles.css

@@ -0,0 +1 @@
+:host{--_container-color: var(--md-filled-card-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_container-elevation: var(--md-filled-card-container-elevation, 0);--_container-shadow-color: var(--md-filled-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-card-container-shape, var(--md-sys-shape-corner-medium, 12px))}/*# sourceMappingURL=filled-styles.css.map */

package/labs/card/internal/filled-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_filled-card.scss"],"names":[],"mappings":"AA6BE,MAEI","file":"filled-styles.css"}

package/labs/card/internal/filled-styles.d.ts

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

package/labs/card/internal/filled-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/card/internal/filled-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{--_container-color: var(--md-filled-card-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_container-elevation: var(--md-filled-card-container-elevation, 0);--_container-shadow-color: var(--md-filled-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-card-container-shape, var(--md-sys-shape-corner-medium, 12px))}
+`;
+//# sourceMappingURL=filled-styles.js.map

package/labs/card/internal/filled-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-styles.js","sourceRoot":"","sources":["filled-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,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 ./labs/card/internal/filled-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-color: var(--md-filled-card-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_container-elevation: var(--md-filled-card-container-elevation, 0);--_container-shadow-color: var(--md-filled-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-card-container-shape, var(--md-sys-shape-corner-medium, 12px))}\n`;\n"]}

package/labs/card/internal/filled-styles.scss

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

package/labs/card/internal/outlined-styles.css

@@ -0,0 +1 @@
+:host{--_container-color: var(--md-outlined-card-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-outlined-card-container-elevation, 0);--_container-shadow-color: var(--md-outlined-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-outlined-card-container-shape, var(--md-sys-shape-corner-medium, 12px));--_outline-color: var(--md-outlined-card-outline-color, var(--md-sys-color-outline-variant, #cac4d0));--_outline-width: var(--md-outlined-card-outline-width, 1px)}.outline{border-color:var(--_outline-color);border-width:var(--_outline-width)}/*# sourceMappingURL=outlined-styles.css.map */

package/labs/card/internal/outlined-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_outlined-card.scss"],"names":[],"mappings":"AA6BE,MAEI,6hBAIJ,SACE,mCACA","file":"outlined-styles.css"}

package/labs/card/internal/outlined-styles.d.ts

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

package/labs/card/internal/outlined-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/card/internal/outlined-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{--_container-color: var(--md-outlined-card-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-outlined-card-container-elevation, 0);--_container-shadow-color: var(--md-outlined-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-outlined-card-container-shape, var(--md-sys-shape-corner-medium, 12px));--_outline-color: var(--md-outlined-card-outline-color, var(--md-sys-color-outline-variant, #cac4d0));--_outline-width: var(--md-outlined-card-outline-width, 1px)}.outline{border-color:var(--_outline-color);border-width:var(--_outline-width)}
+`;
+//# sourceMappingURL=outlined-styles.js.map

package/labs/card/internal/outlined-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-styles.js","sourceRoot":"","sources":["outlined-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qEAAqE;AACrE,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 ./labs/card/internal/outlined-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-color: var(--md-outlined-card-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-outlined-card-container-elevation, 0);--_container-shadow-color: var(--md-outlined-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-outlined-card-container-shape, var(--md-sys-shape-corner-medium, 12px));--_outline-color: var(--md-outlined-card-outline-color, var(--md-sys-color-outline-variant, #cac4d0));--_outline-width: var(--md-outlined-card-outline-width, 1px)}.outline{border-color:var(--_outline-color);border-width:var(--_outline-width)}\n`;\n"]}

package/labs/card/internal/outlined-styles.scss

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

package/labs/card/internal/shared-styles.css

@@ -0,0 +1 @@
+:host{border-radius:var(--_container-shape);box-sizing:border-box;display:flex;flex-direction:column;position:relative;z-index:0}md-elevation,.background,.outline{border-radius:inherit;inset:0;pointer-events:none;position:absolute}.background{background:var(--_container-color);z-index:-1}.outline{border:1px solid rgba(0,0,0,0);z-index:1}md-elevation{z-index:-1;--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}slot{border-radius:inherit}/*# sourceMappingURL=shared-styles.css.map */

package/labs/card/internal/shared-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_shared.scss","../../../elevation/internal/_elevation.scss"],"names":[],"mappings":"AAUE,MACE,sCACA,sBACA,aACA,sBACA,kBAEA,UAGF,kCAGE,sBACA,QACA,oBACA,kBAIF,YACE,mCAEA,WAKF,SAEE,+BAEA,UAGF,aAEE,WCzBE,8GDmCJ,KAEE","file":"shared-styles.css"}

package/labs/card/internal/shared-styles.d.ts

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

package/labs/card/internal/shared-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/card/internal/shared-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{border-radius:var(--_container-shape);box-sizing:border-box;display:flex;flex-direction:column;position:relative;z-index:0}md-elevation,.background,.outline{border-radius:inherit;inset:0;pointer-events:none;position:absolute}.background{background:var(--_container-color);z-index:-1}.outline{border:1px solid rgba(0,0,0,0);z-index:1}md-elevation{z-index:-1;--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}slot{border-radius:inherit}
+`;
+//# sourceMappingURL=shared-styles.js.map

package/labs/card/internal/shared-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.js","sourceRoot":"","sources":["shared-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,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 ./labs/card/internal/shared-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{border-radius:var(--_container-shape);box-sizing:border-box;display:flex;flex-direction:column;position:relative;z-index:0}md-elevation,.background,.outline{border-radius:inherit;inset:0;pointer-events:none;position:absolute}.background{background:var(--_container-color);z-index:-1}.outline{border:1px solid rgba(0,0,0,0);z-index:1}md-elevation{z-index:-1;--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}slot{border-radius:inherit}\n`;\n"]}

package/labs/card/internal/shared-styles.scss

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

package/labs/card/outlined-card.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { Card } from './internal/card.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-card': MdOutlinedCard;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdOutlinedCard extends Card {
+    static styles: CSSResultOrNative[];
+}

package/labs/card/outlined-card.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Card } from './internal/card.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdOutlinedCard = class MdOutlinedCard extends Card {
+};
+MdOutlinedCard.styles = [sharedStyles, outlinedStyles];
+MdOutlinedCard = __decorate([
+    customElement('md-outlined-card')
+], MdOutlinedCard);
+//# sourceMappingURL=outlined-card.js.map

package/labs/card/outlined-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-card.js","sourceRoot":"","sources":["outlined-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;GAGG;AAEI,WAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,IAAI;;AACtB,qBAAM,GAAwB,CAAC,YAAY,EAAE,cAAc,CAAC,AAAtD,CAAuD;AADlE,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Card} from './internal/card.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-card': MdOutlinedCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-card')\nexport class MdOutlinedCard extends Card {\n  static override styles: CSSResultOrNative[] = [sharedStyles, outlinedStyles];\n}\n"]}

package/labs/item/internal/_item.scss

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+/// `<md-item>` does not provide `--md-item-*` custom properties. Instead, use
+/// CSS on slotted elements to change their styles.
+///
+/// @example css
+///   md-item {
+///     color: var(--headline-color);
+///     font: var(--headline-font);
+///   }
+///   md-item [slot='supporting-text'] {
+///     color: var(--supporting-text-color);
+///     font: var(--supporting-text-font);
+///   }
+///   // ...
+///
+@mixin styles() {
+  $tokens: tokens.md-comp-item-values();
+
+  :host {
+    color: map.get($tokens, 'label-text-color');
+    font-family: map.get($tokens, 'label-text-font');
+    font-size: map.get($tokens, 'label-text-size');
+    font-weight: map.get($tokens, 'label-text-weight');
+    line-height: map.get($tokens, 'label-text-line-height');
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    gap: 16px;
+    min-height: 56px;
+    overflow: hidden;
+    padding: 12px 16px;
+    position: relative;
+    text-overflow: ellipsis;
+  }
+
+  :host([multiline]) {
+    min-height: 72px;
+  }
+
+  [name='overline'] {
+    color: map.get($tokens, 'overline-color');
+    font-family: map.get($tokens, 'overline-font');
+    font-size: map.get($tokens, 'overline-size');
+    font-weight: map.get($tokens, 'overline-weight');
+    line-height: map.get($tokens, 'overline-line-height');
+  }
+
+  [name='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');
+    font-weight: map.get($tokens, 'supporting-text-weight');
+    line-height: map.get($tokens, 'supporting-text-line-height');
+  }
+
+  [name='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');
+    font-weight: map.get($tokens, 'trailing-supporting-text-weight');
+    line-height: map.get($tokens, 'trailing-supporting-text-line-height');
+  }
+
+  // A slot for background container elements, such as ripples and focus rings.
+  [name='container']::slotted(*) {
+    inset: 0;
+    position: absolute;
+  }
+
+  .default-slot {
+    // Needed since the default slot can have just text content, and ellipsis
+    // need an inline display.
+    display: inline;
+  }
+
+  .default-slot,
+  .text ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}

package/labs/item/internal/item-styles.css

@@ -0,0 +1 @@
+:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}/*# sourceMappingURL=item-styles.css.map */

package/labs/item/internal/item-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_item.scss"],"names":[],"mappings":"AA6BE,MACE,8CACA,0FACA,wDACA,kGACA,mEACA,mBACA,sBACA,aACA,SACA,gBACA,gBACA,kBACA,kBACA,uBAGF,mBACE,gBAGF,gBACE,sDACA,2FACA,8DACA,kGACA,kEAGF,uBACE,sDACA,2FACA,6DACA,mGACA,qEAGF,gCACE,sDACA,2FACA,8DACA,kGACA,kEAIF,6BACE,QACA,kBAGF,cAGE,eAGF,iCAEE,gBACA,uBAGF,MACE,aACA,OACA,sBACA","file":"item-styles.css"}

package/labs/item/internal/item-styles.d.ts

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

package/labs/item/internal/item-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/item/internal/item-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}
+`;
+//# sourceMappingURL=item-styles.js.map

package/labs/item/internal/item-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-styles.js","sourceRoot":"","sources":["item-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iEAAiE;AACjE,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 ./labs/item/internal/item-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}\n`;\n"]}

package/labs/item/internal/item-styles.scss

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

package/labs/item/internal/item.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+/**
+ * An item layout component.
+ */
+export declare class Item extends LitElement {
+    /**
+     * Only needed for SSR.
+     *
+     * Add this attribute when an item has two lines to avoid a Flash Of Unstyled
+     * Content. This attribute is not needed for single line items or items with
+     * three or more lines.
+     */
+    multiline: boolean;
+    private readonly textSlots;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleTextSlotChange;
+}

package/labs/item/internal/item.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, queryAll } from 'lit/decorators.js';
+/**
+ * An item layout component.
+ */
+export class Item extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Only needed for SSR.
+         *
+         * Add this attribute when an item has two lines to avoid a Flash Of Unstyled
+         * Content. This attribute is not needed for single line items or items with
+         * three or more lines.
+         */
+        this.multiline = false;
+    }
+    render() {
+        return html `
+      <slot name="container"></slot>
+      <slot class="non-text" name="start"></slot>
+      <div class="text">
+        <slot name="overline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          class="default-slot"
+          @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="headline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          name="supporting-text"
+          @slotchange=${this.handleTextSlotChange}></slot>
+      </div>
+      <slot class="non-text" name="trailing-supporting-text"></slot>
+      <slot class="non-text" name="end"></slot>
+    `;
+    }
+    handleTextSlotChange() {
+        // Check if there's more than one text slot with content. If so, the item is
+        // multiline, which has a different min-height than single line items.
+        let isMultiline = false;
+        let slotsWithContent = 0;
+        for (const slot of this.textSlots) {
+            if (slotHasContent(slot)) {
+                slotsWithContent += 1;
+            }
+            if (slotsWithContent > 1) {
+                isMultiline = true;
+                break;
+            }
+        }
+        this.multiline = isMultiline;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Item.prototype, "multiline", void 0);
+__decorate([
+    queryAll('.text slot')
+], Item.prototype, "textSlots", void 0);
+function slotHasContent(slot) {
+    for (const node of slot.assignedNodes({ flatten: true })) {
+        // Assume there's content if there's an element slotted in
+        const isElement = node.nodeType === Node.ELEMENT_NODE;
+        // If there's only text nodes for the default slot, check if there's
+        // non-whitespace.
+        const isTextWithContent = node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\S/);
+        if (isElement || isTextWithContent) {
+            return true;
+        }
+    }
+    return false;
+}
+//# sourceMappingURL=item.js.map

package/labs/item/internal/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QACE;;;;;;WAMG;QACuC,cAAS,GAAG,KAAK,CAAC;IAyC9D,CAAC;IArCU,MAAM;QACb,OAAO,IAAI,CAAA;;;;4CAI6B,IAAI,CAAC,oBAAoB;;;wBAG7C,IAAI,CAAC,oBAAoB;4CACL,IAAI,CAAC,oBAAoB;;;wBAG7C,IAAI,CAAC,oBAAoB;;;;KAI5C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,4EAA4E;QAC5E,sEAAsE;QACtE,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,gBAAgB,GAAG,CAAC,CAAC;QACzB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YACjC,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE;gBACxB,gBAAgB,IAAI,CAAC,CAAC;aACvB;YAED,IAAI,gBAAgB,GAAG,CAAC,EAAE;gBACxB,WAAW,GAAG,IAAI,CAAC;gBACnB,MAAM;aACP;SACF;QAED,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;IAC/B,CAAC;CACF;AAzC2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAmB;AAEnB;IAAxC,QAAQ,CAAC,YAAY,CAAC;uCAAgD;AAyCzE,SAAS,cAAc,CAAC,IAAqB;IAC3C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE;QACtD,0DAA0D;QAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;QACtD,oEAAoE;QACpE,kBAAkB;QAClB,MAAM,iBAAiB,GACrB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACpE,IAAI,SAAS,IAAI,iBAAiB,EAAE;YAClC,OAAO,IAAI,CAAC;SACb;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property, queryAll} from 'lit/decorators.js';\n\n/**\n * An item layout component.\n */\nexport class Item extends LitElement {\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when an item has two lines to avoid a Flash Of Unstyled\n   * Content. This attribute is not needed for single line items or items with\n   * three or more lines.\n   */\n  @property({type: Boolean, reflect: true}) multiline = false;\n\n  @queryAll('.text slot') private readonly textSlots!: HTMLSlotElement[];\n\n  override render() {\n    return html`\n      <slot name=\"container\"></slot>\n      <slot class=\"non-text\" name=\"start\"></slot>\n      <div class=\"text\">\n        <slot name=\"overline\" @slotchange=${this.handleTextSlotChange}></slot>\n        <slot\n          class=\"default-slot\"\n          @slotchange=${this.handleTextSlotChange}></slot>\n        <slot name=\"headline\" @slotchange=${this.handleTextSlotChange}></slot>\n        <slot\n          name=\"supporting-text\"\n          @slotchange=${this.handleTextSlotChange}></slot>\n      </div>\n      <slot class=\"non-text\" name=\"trailing-supporting-text\"></slot>\n      <slot class=\"non-text\" name=\"end\"></slot>\n    `;\n  }\n\n  private handleTextSlotChange() {\n    // Check if there's more than one text slot with content. If so, the item is\n    // multiline, which has a different min-height than single line items.\n    let isMultiline = false;\n    let slotsWithContent = 0;\n    for (const slot of this.textSlots) {\n      if (slotHasContent(slot)) {\n        slotsWithContent += 1;\n      }\n\n      if (slotsWithContent > 1) {\n        isMultiline = true;\n        break;\n      }\n    }\n\n    this.multiline = isMultiline;\n  }\n}\n\nfunction slotHasContent(slot: HTMLSlotElement) {\n  for (const node of slot.assignedNodes({flatten: true})) {\n    // Assume there's content if there's an element slotted in\n    const isElement = node.nodeType === Node.ELEMENT_NODE;\n    // If there's only text nodes for the default slot, check if there's\n    // non-whitespace.\n    const isTextWithContent =\n      node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\\S/);\n    if (isElement || isTextWithContent) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"]}