@material/web 1.0.0-pre.8 → 1.0.0

package/internal/motion/animation.js

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+export const EASING = {
+    STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',
+    STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',
+    STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',
+    EMPHASIZED: 'cubic-bezier(.3,0,0,1)',
+    EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',
+    EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',
+};
+/**
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
+ *
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
+ *
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
+ *
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
+ *
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
+ */
+export function createAnimationSignal() {
+    // The current animation's AbortController
+    let animationAbortController = null;
+    return {
+        start() {
+            // Tell the previous animation to cancel.
+            animationAbortController?.abort();
+            // Set up a new AbortController for the current animation.
+            animationAbortController = new AbortController();
+            // Provide the AbortSignal so that the caller can check aborted status
+            // and add listeners.
+            return animationAbortController.signal;
+        },
+        finish() {
+            animationAbortController = null;
+        },
+    };
+}
+/**
+ * Returns a function which can be used to throttle function calls
+ * mapped to a key via a given function that should produce a promise that
+ * determines the throttle amount (defaults to requestAnimationFrame).
+ */
+export function createThrottle() {
+    const stack = new Set();
+    return async (key = '', cb, timeout = async () => {
+        await new Promise(requestAnimationFrame);
+    }) => {
+        if (!stack.has(key)) {
+            stack.add(key);
+            await timeout();
+            if (stack.has(key)) {
+                stack.delete(key);
+                cb();
+            }
+        }
+    };
+}
+/**
+ * Parses an number in milliseconds from a css time value
+ */
+export function msFromTimeCSSValue(value) {
+    const match = value.trim().match(/([\d.]+)(\s*s$)?/);
+    const time = match?.[1];
+    const seconds = match?.[2];
+    return Number(time ?? 0) * (seconds ? 1000 : 1);
+}
+//# sourceMappingURL=animation.js.map

package/internal/motion/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["animation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,4BAA4B;IACtC,mBAAmB,EAAE,wBAAwB;IAC7C,mBAAmB,EAAE,uBAAuB;IAC5C,UAAU,EAAE,wBAAwB;IACpC,qBAAqB,EAAE,2BAA2B;IAClD,qBAAqB,EAAE,2BAA2B;CAC1C,CAAC;AAmBX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,qBAAqB;IACnC,0CAA0C;IAC1C,IAAI,wBAAwB,GAAyB,IAAI,CAAC;IAE1D,OAAO;QACL,KAAK;YACH,yCAAyC;YACzC,wBAAwB,EAAE,KAAK,EAAE,CAAC;YAClC,0DAA0D;YAC1D,wBAAwB,GAAG,IAAI,eAAe,EAAE,CAAC;YACjD,sEAAsE;YACtE,qBAAqB;YACrB,OAAO,wBAAwB,CAAC,MAAM,CAAC;QACzC,CAAC;QACD,MAAM;YACJ,wBAAwB,GAAG,IAAI,CAAC;QAClC,CAAC;KACF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;IACxB,OAAO,KAAK,EACD,GAAG,GAAG,EAAE,EAAE,EAAmC,EAC7C,OAAO,GAAG,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE;QACd,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YACnB,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACf,MAAM,OAAO,EAAE,CAAC;YAChB,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBAClB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAClB,EAAE,EAAE,CAAC;aACN;SACF;IACH,CAAC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAa;IAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACrD,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IACxB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,OAAO,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClD,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Easing functions to use for web animations.\n *\n * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.\n *\n * TODO(b/241113345): replace with tokens\n */\nexport const EASING = {\n  STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',\n  STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',\n  STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',\n  EMPHASIZED: 'cubic-bezier(.3,0,0,1)',\n  EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',\n  EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',\n} as const;\n\n/**\n * A signal that is used for abortable tasks.\n */\nexport interface AnimationSignal {\n  /**\n   * Starts the abortable task. Any previous tasks started with this instance\n   * will be aborted.\n   *\n   * @return An `AbortSignal` for the current task.\n   */\n  start(): AbortSignal;\n  /**\n   * Complete the current task.\n   */\n  finish(): void;\n}\n\n/**\n * Creates an `AnimationSignal` that can be used to cancel a previous task.\n *\n * @example\n * class MyClass {\n *   private labelAnimationSignal = createAnimationSignal();\n *\n *   private async animateLabel() {\n *     // Start of the task. Previous tasks will be canceled.\n *     const signal = this.labelAnimationSignal.start();\n *\n *     // Do async work...\n *     if (signal.aborted) {\n *       // Use AbortSignal to check if a request was made to abort after some\n *       // asynchronous work.\n *       return;\n *     }\n *\n *     const animation = this.animate(...);\n *     // Add event listeners to be notified when the task should be canceled.\n *     signal.addEventListener('abort', () => {\n *       animation.cancel();\n *     });\n *\n *     animation.addEventListener('finish', () => {\n *       // Tell the signal that the current task is finished.\n *       this.labelAnimationSignal.finish();\n *     });\n *   }\n * }\n *\n * @return An `AnimationSignal`.\n */\nexport function createAnimationSignal(): AnimationSignal {\n  // The current animation's AbortController\n  let animationAbortController: AbortController|null = null;\n\n  return {\n    start() {\n      // Tell the previous animation to cancel.\n      animationAbortController?.abort();\n      // Set up a new AbortController for the current animation.\n      animationAbortController = new AbortController();\n      // Provide the AbortSignal so that the caller can check aborted status\n      // and add listeners.\n      return animationAbortController.signal;\n    },\n    finish() {\n      animationAbortController = null;\n    },\n  };\n}\n\n/**\n * Returns a function which can be used to throttle function calls\n * mapped to a key via a given function that should produce a promise that\n * determines the throttle amount (defaults to requestAnimationFrame).\n */\nexport function createThrottle() {\n  const stack = new Set();\n  return async (\n             key = '', cb: (...args: unknown[]) => unknown,\n             timeout = async () => {\n               await new Promise(requestAnimationFrame);\n             }) => {\n    if (!stack.has(key)) {\n      stack.add(key);\n      await timeout();\n      if (stack.has(key)) {\n        stack.delete(key);\n        cb();\n      }\n    }\n  };\n}\n\n/**\n * Parses an number in milliseconds from a css time value\n */\nexport function msFromTimeCSSValue(value: string) {\n  const match = value.trim().match(/([\\d.]+)(\\s*s$)?/);\n  const time = match?.[1];\n  const seconds = match?.[2];\n  return Number(time ?? 0) * (seconds ? 1000 : 1);\n}\n"]}

package/internal/sass/_var.scss

@@ -0,0 +1,237 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use './string-ext';
+// go/keep-sorted end
+
+/// Creates a custom property `var()` string.
+///
+/// @param {String} $name - The name of the custom property.
+/// @param {*} $fallback [null] - Optional `var()` fallback value.
+/// @return {String} A custom property `var()` string.
+@function create($name, $fallback: null) {
+  $name: create-name($name);
+  @if $fallback == null {
+    @return var(#{$name});
+  }
+
+  @if is-var($fallback) {
+    $fallback-name: name($fallback);
+    $fallback-fallback: fallback($fallback);
+    @return var(#{$name}, create($fallback-name, $fallback-fallback));
+  }
+
+  @return var(#{$name}, $fallback);
+}
+
+/// Create a custom property variable name.
+///
+/// Providing a custom property name with `--*` will ignore the global prefix.
+///
+/// @example - scss
+///   .foo {
+///     color: var(#{var.create-name(foo)});
+///     background: var(#{var.create-name(--bar)});
+///   }
+///
+/// @example - css
+///   .foo {
+///     color: var(--md-foo);
+///     background: var(--bar);
+///   }
+///
+/// @param {String} $name - The name of the custom property.
+/// @return {String} The full valid CSS custom property variable name.
+@function create-name($name) {
+  @if string-ext.has-prefix($name, '--') {
+    @return $name;
+  }
+
+  @return string.unquote('--md-#{$name}');
+}
+
+/// Returns the custom property variable name of `var()` string.
+///
+/// @throw If the value is not a custom property.
+/// @param {String} $var - A custom property `var()` string.
+/// @return {String} The custom property variable name.
+@function name($var) {
+  $var: _parse-and-validate($var);
+  @return map.get($var, name);
+}
+
+/// Returns the fallback value of a custom property `var()` string. The value
+/// may be null if the `var()` does not have a fallback value.
+///
+/// @example - scss
+///   $fallback: var.fallback(var(--foo, var(--bar, 8px));
+///   // "var(--bar, 8px)"
+///
+/// @throw If the value is not a custom property.
+/// @param {String} $var - A custom property `var()` string.
+/// @return {String} The fallback value of the `var()` string. May be null if
+///     the `var()` does not have a fallback value.
+@function fallback($var) {
+  $var: _parse-and-validate($var);
+  $fallback: map.get($var, fallback);
+  @if is-var($fallback) {
+    @return create(name($fallback), fallback($fallback));
+  }
+
+  @return $fallback;
+}
+
+/// Returns the deep fallback value of a custom property `var()` string. The
+/// value may be null if the `var()` does not have a fallback value.
+///
+/// If a fallback value is another `var()`, this function will return the final
+/// concrete value in the chain.
+///
+/// @example - scss
+///   $fallback: var.deep-fallback(var(--foo, var(--bar, 8px));
+///   // "8px"
+///
+/// @throw If the value is not a custom property.
+/// @param {String} $var - A custom property `var()` string.
+/// @return {String} The deep fallback value of the `var()` string. May be null
+///     if the `var()` does not have a fallback value.
+@function deep-fallback($var) {
+  $fallback: fallback($var);
+  @if is-var($fallback) {
+    @return deep-fallback($fallback);
+  }
+
+  @return $fallback;
+}
+
+/// Creates a new custom property `var()` string and returns it with the
+/// specified new fallback value.
+///
+/// @example - scss
+///   $new-var: set-fallback(var(--foo, var(--bar, 8px)), 16px);
+///   // "var(--foo, 16px)"
+///
+/// @throw If the value is not a custom property.
+/// @param {String} $var - A custom property `var()` string.
+/// @param {*} $new-fallback - The new fallback value. May be null to remove a
+///     value.
+/// @return {String} A custom property `var()` string with the new fallback
+///     value.
+@function set-fallback($var, $new-fallback) {
+  $name: name($var);
+  @return create($name, $new-fallback);
+}
+
+/// Creates a new custom property `var()` string and returns it with the
+/// specified new deep fallback value.
+///
+/// If the provided `var()` string's fallback value is another `var()`, this
+/// function will set the final fallback value in the chain.
+///
+/// @example - scss
+///   $new-var: deep-set-fallback(var(--foo, var(--bar, 8px)), 16px);
+///   // "var(--foo, var(--bar, 16px))"
+///
+/// @throw If the value is not a custom property.
+/// @param {String} $var - A custom property `var()` string.
+/// @param {*} $new-fallback - The new fallback value. May be null to remove a
+///     value.
+/// @return {String} A custom property `var()` string with the new deep
+///     fallback value.
+@function deep-set-fallback($var, $new-fallback) {
+  $old-fallback: fallback($var);
+  @if is-var($old-fallback) {
+    $new-fallback: deep-set-fallback($old-fallback, $new-fallback);
+  }
+
+  @return set-fallback($var, $new-fallback);
+}
+
+/// Indicates whether or not a value is a custom property `var()` string.
+///
+/// @example - scss
+///   $is-var: var.is-var('var(--foo)'); // true
+///
+/// @param {*} $var - The value to test.
+/// @return {Bool} True if the value is a custom property `var()` string, or
+///     false if not.
+@function is-var($var) {
+  @return _parse($var) != null;
+}
+
+/// Indicates whether or not a value is a `var()` string.
+///
+/// @param {*} $var - The value to test.
+/// @return {Bool} True if the value is a custom property `var()` string, or
+///     false if not.
+@function _is-var-string($var) {
+  @return meta.type-of($var) == 'string' and string-ext.has-prefix($var, 'var(');
+}
+
+/// Parses a `var()` string into a Map with `name` and `fallback` keys. This
+/// function returns null if the value is invalid.
+///
+/// @param {*} $var - The value to parse.
+/// @return {Map} A Map containing a string `name` key with the custom property
+///     name and a `fallback` key with the fallback value (which may be null).
+///     The returned Map itself may be null if the provided value is not valid.
+@function _parse($var) {
+  @if meta.type-of($var) ==
+    'map' and
+    map.has-key($var, name) and
+    map.has-key($var, fallback)
+  {
+    @return $var;
+  }
+
+  @if not _is-var-string($var) {
+    @return null;
+  }
+
+  // Remove function name and parens
+  $var: string-ext.trim($var, 'var(', ')');
+
+  $name: string-ext.trim-repeating($var, ' ');
+  $fallback: null;
+  $comma: string.index($var, ',');
+  @if $comma != null {
+    $name: string-ext.trim-repeating(string.slice($var, 1, $comma - 1), ' ');
+    $fallback: string-ext.trim-repeating(string.slice($var, $comma + 1), ' ');
+    @if _is-var-string($fallback) {
+      $fallback: _parse($fallback);
+      @if $fallback == null {
+        // Invalid var() fallback string
+        @return null;
+      }
+    }
+  }
+
+  @if $name == '' or $fallback == '' {
+    @return null;
+  }
+
+  @return (name: $name, fallback: $fallback);
+}
+
+/// Parses a `var()` string into a Map with `name` and `fallback` keys.
+///
+/// @throw If the value is not a custom property.
+/// @param {*} $var - The value to parse.
+/// @return {Map} A Map containing a string `name` key with the custom property
+///     name and a `fallback` key with the fallback value (which may be null).
+@function _parse-and-validate($var) {
+  $var-map: _parse($var);
+  @if $var-map == null {
+    @error '"#{$var}" is not a valid var() string';
+  }
+
+  @return $var-map;
+}

package/labs/README.md

@@ -0,0 +1,6 @@
+# Labs 🚧
+
+> WARNING ⚠️ This folder contains experimental features that are not recommended
+> for production.
+>
+> Breaking changes may occur that do not bump the major version (vX.0.0).

package/labs/badge/_badge.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/badge' show theme;

package/labs/badge/badge.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Badge } from './internal/badge.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-badge': MdBadge;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdBadge extends Badge {
+    static styles: import("lit").CSSResult[];
+}

package/labs/badge/badge.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Badge } from './internal/badge.js';
+import { styles } from './internal/badge-styles.css.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdBadge = class MdBadge extends Badge {
+};
+MdBadge.styles = [styles];
+MdBadge = __decorate([
+    customElement('md-badge')
+], MdBadge);
+//# sourceMappingURL=badge.js.map

package/labs/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;GAGG;AAEI,WAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,KAAK;;AAChB,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Badge} from './internal/badge.js';\nimport {styles} from './internal/badge-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-badge': MdBadge;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-badge')\nexport class MdBadge extends Badge {\n  static override styles = [styles];\n}\n"]}

package/labs/badge/internal/_badge.scss

@@ -0,0 +1,76 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  // $supported-tokens: tokens.$md-comp-badge-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-badge-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-badge-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-badge-#{$token}, #{$value});
+    }
+  }
+
+  .md3-badge {
+    inset-inline-start: 50%;
+    margin-inline-start: 6px;
+    margin-block-start: 4px;
+    position: absolute;
+    inset-block-start: 0px;
+    background-color: var(--_color);
+    border-radius: var(--_shape);
+    height: var(--_size);
+
+    &:not(.md3-badge--large) {
+      // Separate selector since large uses min-width
+      width: var(--_size);
+    }
+
+    &.md3-badge--large {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-inline-start: 2px;
+      margin-block-start: 1px;
+      background-color: var(--_large-color);
+      border-radius: var(--_large-shape);
+      height: var(--_large-size);
+      min-width: var(--_large-size);
+      color: var(--_large-label-text-color);
+
+      .md3-badge__value {
+        padding: 0px 4px;
+        text-align: center;
+      }
+    }
+  }
+
+  .md3-badge__value {
+    font-family: var(--_large-label-text-font);
+    font-size: var(--_large-label-text-size);
+    line-height: var(--_large-label-text-line-height);
+    font-weight: var(--_large-label-text-weight);
+  }
+}

package/labs/badge/internal/badge-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}/*# sourceMappingURL=badge-styles.css.map */
+`;
+//# sourceMappingURL=badge-styles.css.js.map

package/labs/badge/internal/badge-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-styles.css.js","sourceRoot":"","sources":["badge-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-shape: var(--md-badge-large-shape, 9999px);--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, 9999px);--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}/*# sourceMappingURL=badge-styles.css.map */\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,
+  ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+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,::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}/*# sourceMappingURL=item-styles.css.map */
+`;
+//# sourceMappingURL=item-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-styles.css.js","sourceRoot":"","sources":["item-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n 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,::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}/*# sourceMappingURL=item-styles.css.map */\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;
+}