@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/internal/sass/_theme.scss

@@ -0,0 +1,249 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+// go/keep-sorted end
+// go/keep-sorted start
+@use './string-ext';
+@use './var';
+// go/keep-sorted end
+
+/// Transform a user-provided `$theme` map's values into `var()` custom property
+/// values.
+///
+/// Use this function in `theme-styles()` mixins to transform values into
+/// custom property `var()` "slots" that can subsequently be styled via
+/// `theme.emit-theme-vars()` in the `theme()` mixin by the user.
+///
+/// @example - scss
+///   $light-theme: (
+///     label-color: purple
+///   );
+///
+///   @mixin theme-styles($theme) {
+///     $theme: theme.create-theme-vars($theme, button);
+///
+///     .foo {
+///       color: map.get($theme, label-color);
+///     }
+///   }
+///
+/// @example - css
+///     .foo {
+///       color: var(--md-button-label-color, purple);
+///     }
+///
+/// @param {Map} $theme - The theme Map to transform values into custom property
+///     `var()`s.
+/// @param {String} $prefix - Component and variant prefix to prepend for each
+///     token's custom property name.
+/// @return {Map} The provided `$theme` Map whose values are replaced with the
+///     `var()` custom properties.
+@function create-theme-vars($theme, $prefix) {
+  @each $key, $value in $theme {
+    @if $value != null {
+      $token: combine-tokens($prefix, $key);
+
+      @if meta.type-of($value) == 'map' {
+        $value: create-theme-vars($value, $token);
+      } @else {
+        $value: var.create($token, $value);
+      }
+
+      $theme: map.set($theme, $key, $value);
+    }
+  }
+
+  @return $theme;
+}
+
+/// Emits CSS declaration values for a theme map that has been transformed with
+/// `create-theme-vars()`.
+///
+/// Use this in `theme()` mixins to set user-provided token customizations.
+///
+/// @example - scss
+///   $light-theme: (
+///     label-color: purple
+///   );
+///
+///   @mixin theme($theme) {
+///     $theme: theme.create-theme-vars($theme, button);
+///
+///     @include theme.emit-theme-vars($theme);
+///   }
+///
+///   .my-button {
+///     @include theme((label-color: teal));
+///   }
+///
+/// @example - css
+///   .my-button {
+///     --md-button-label-color: teal;
+///   }
+///
+/// @param {Map} $theme - The theme Map to emit custom property declarations
+///     for.
+@mixin emit-theme-vars($theme) {
+  @each $token, $value in $theme {
+    @if $value {
+      @if meta.type-of($value) == 'map' {
+        @include emit-theme-vars($value);
+      } @else if not var.is-var($value) {
+        @error '"#{$token}": #{$value} is not a var(). Call create-theme-vars($theme) before emit-theme-vars($theme).';
+      } @else {
+        #{var.name($value)}: #{var.fallback($value)};
+      }
+    }
+  }
+}
+
+/// Combines one or more token parts into a token.
+///
+/// @example - scss
+///   $key: combine(body, font-size);
+///   // body-font-size
+///
+/// @param {String...} $parts - Arbitrary number of string token parts to
+///     combine.
+/// @return {String} A combined token string.
+@function combine-tokens($parts...) {
+  // Allow extra keywords to be passed to other functions without impacting this
+  // function, which does not expect any keywords.
+  $unused: meta.keywords($parts);
+  $token: '';
+  @each $part in $parts {
+    @if $part {
+      @if $token == '' {
+        $token: $part;
+      } @else {
+        $token: #{$token}-#{$part};
+      }
+    }
+  }
+
+  @return $token;
+}
+
+/// Validates a theme's tokens and values and throws an error if incorrect
+/// tokens are present or invalid values are provided.
+///
+/// Use this in `theme()` mixins to validate user-provided `$theme` maps before
+/// providing the value to `theme.create-theme-vars()`.
+///
+/// @example - scss
+///   @mixin theme($theme) {
+///     $theme: theme.validate-theme($light-theme, $theme);
+///     $theme: theme.create-theme-vars($theme, checkbox);
+///   }
+///
+/// @throw If any tokens or values are invalid.
+/// @param {Map} $reference-theme - A reference theme Map whose token keys will
+///     be used to validate the user-provided theme.
+/// @param {Map} $theme - User-provided theme Map to validate.
+/// @return {Map} The validated user-provided theme Map.
+@function validate-theme($reference-theme, $theme) {
+  $theme: _validate-theme-tokens(
+    map.keys($reference-theme),
+    $theme,
+    $require-all: false
+  );
+
+  @return $theme;
+}
+
+/// Validates a theme's tokens and throws an error if incorrect tokens are
+/// present or any tokens are missing.
+///
+/// Use this in internal `theme-styles()` mixins to validate library-provided
+/// `$theme` maps and ensure that all tokens are correct and present.
+///
+/// @example - scss
+///   @mixin theme-styles($theme) {
+///     $theme: theme.validate-theme-styles($light-theme, $theme);
+///     $theme: theme.create-theme-vars($theme, checkbox);
+///   }
+///
+/// @throw If any tokens are invalid or missing.
+/// @param {Map|List} $reference-theme - A complete reference theme Map (or List
+///     of tokens) to validate the theme.
+/// @param {Map} $theme - The theme Map to validate.
+/// @return {Map} The validated theme Map.
+@function validate-theme-styles($reference-theme, $theme, $require-all: true) {
+  $valid-tokens: $reference-theme;
+  @if meta.type-of($reference-theme) == 'map' {
+    $valid-tokens: map.keys($reference-theme);
+  }
+
+  @return _validate-theme-tokens(
+    $valid-tokens,
+    $theme,
+    $require-all: $require-all
+  );
+}
+
+/// Validates a theme's tokens and throws an error if incorrect tokens are
+/// present or optionally missing if `$require-all` is true.
+///
+/// @throw If any tokens are invalid or optionally missing.
+/// @param {List} $valid-tokens - A List of token keys to validate the theme.
+/// @param {Map} $theme - The theme Map to validate.
+/// @param {Bool} $require-all [false] - If true, throw an error if the theme
+///     is missing tokens from the list.
+/// @return {Map} The validated theme Map.
+@function _validate-theme-tokens($valid-tokens, $theme, $require-all: false) {
+  $missing-tokens: ();
+  $unsupported-tokens: ();
+
+  @each $token, $value in $theme {
+    @if list.index($valid-tokens, $token) == null {
+      $unsupported-tokens: list.append(
+        $unsupported-tokens,
+        $token,
+        $separator: comma
+      );
+    }
+  }
+
+  @if $require-all {
+    // TODO(b/203778922): Remove when type composite tokens are removed
+    $ignore-suffix: (
+      // Ignore composite font tokens
+      '-type'
+    );
+
+    @each $token in $valid-tokens {
+      $missing: map.get($theme, $token) == null;
+      @if $missing {
+        @each $suffix in $ignore-suffix {
+          @if string-ext.has-suffix($token, $suffix) {
+            $missing: false;
+          }
+        }
+      }
+
+      @if $missing {
+        $missing-tokens: list.append(
+          $missing-tokens,
+          $token,
+          $separator: comma
+        );
+      }
+    }
+  }
+
+  @if list.length($unsupported-tokens) > 0 {
+    @error 'The following tokens are invalid: #{$unsupported-tokens}.';
+  }
+
+  @if list.length($missing-tokens) > 0 {
+    @error 'The following required tokens are missing: #{$missing-tokens}.';
+  }
+
+  @return $theme;
+}

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.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Badge } from './lib/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,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Badge } from './lib/badge.js';
+import { styles } from './lib/badge-styles.css.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+let MdBadge = class MdBadge extends Badge {
+};
+MdBadge.styles = [styles];
+MdBadge = __decorate([
+    customElement('md-badge')
+], MdBadge);
+export { 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,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD;;;GAGG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,KAAK;;AAChB,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","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 './lib/badge.js';\nimport {styles} from './lib/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/lib/_badge.scss

@@ -0,0 +1,69 @@
+//
+// 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 '../../../internal/sass/theme';
+@use '../../../tokens';
+// go/keep-sorted end
+
+$_custom-property-prefix: 'badge';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-badge-values(), $tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-badge-values();
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$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;
+      }
+    }
+  }
+
+  .md3-badge__value {
+    font: var(--_large-label-text-type);
+  }
+}

package/labs/badge/lib/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-type: var(--md-badge-large-label-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_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}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */
+`;
+//# sourceMappingURL=badge-styles.css.js.map

package/labs/badge/lib/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-type: var(--md-badge-large-label-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_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}.md3-badge__value{font:var(--_large-label-text-type)}/*# sourceMappingURL=badge-styles.css.map */\n`;\n "]}

package/labs/badge/lib/badge-styles.scss

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

package/labs/badge/lib/badge.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+/**
+ * TODO(b/265340196): add docs
+ */
+export declare class Badge extends LitElement {
+    value: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/labs/badge/lib/badge.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * TODO(b/265340196): add docs
+ */
+export class Badge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+    }
+    render() {
+        const classes = { 'md3-badge--large': this.value };
+        return html `<div class="md3-badge ${classMap(classes)}">
+      <p class="md3-badge__value">${this.value}</p>
+    </div>`;
+    }
+}
+__decorate([
+    property()
+], Badge.prototype, "value", void 0);
+//# sourceMappingURL=badge.js.map

package/labs/badge/lib/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["badge.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QACc,UAAK,GAAG,EAAE,CAAC;IASzB,CAAC;IAPoB,MAAM;QACvB,MAAM,OAAO,GAAG,EAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC;QAEjD,OAAO,IAAI,CAAA,yBAAyB,QAAQ,CAAC,OAAO,CAAC;oCACrB,IAAI,CAAC,KAAK;WACnC,CAAC;IACV,CAAC;CACF;AATa;IAAX,QAAQ,EAAE;oCAAY","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\n/**\n * TODO(b/265340196): add docs\n */\nexport class Badge extends LitElement {\n  @property() value = '';\n\n  protected override render() {\n    const classes = {'md3-badge--large': this.value};\n\n    return html`<div class=\"md3-badge ${classMap(classes)}\">\n      <p class=\"md3-badge__value\">${this.value}</p>\n    </div>`;\n  }\n}\n"]}