material-web-evo 10002.10001.10000

package/internal/sass/_string-ext.scss

@@ -0,0 +1,195 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:string';
+// go/keep-sorted end
+
+/// Checks if a string starts with a given prefix.
+///
+/// @example - scss
+///   @debug has-prefix('var(--foo)', 'var('); // true
+///
+/// @param {String} $string - The string to test.
+/// @param {String} $prefix - The prefix to check.
+/// @return {Boolean} True if the string starts with the given prefix.
+@function has-prefix($string, $prefix) {
+  @return string.slice($string, 1, string.length($prefix)) == $prefix;
+}
+
+/// Checks if a string ends with a given suffix.
+///
+/// @example - scss
+///   @debug has-suffix('var(--foo)', ')'); // true
+///
+/// @param {String} $string - The string to test.
+/// @param {String} $suffix - The suffix to check.
+/// @return {Boolean} True if the string ends with the given suffix.
+@function has-suffix($string, $suffix) {
+  @return string.slice($string, -1 * string.length($suffix)) == $suffix;
+}
+
+/// Trims a repeating prefix from the start of a string.
+///
+/// @example - scss
+///   @debug trim-repeating-prefix('  foo bar  ', ' '); // "foo bar  "
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $prefix - The repeating prefix string to trim.
+/// @return {String} The string with the prefix trimmed from the start.
+@function trim-repeating-prefix($string, $prefix) {
+  @while has-prefix($string, $prefix) {
+    $string: trim-prefix($string, $prefix);
+  }
+
+  @return $string;
+}
+
+/// Trims a prefix from the start of a string.
+///
+/// @example - scss
+///   @debug trim-prefix('var(--foo)', 'var('); // "--foo)"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $prefix - The prefix string to trim.
+/// @return {String} The string with the prefix trimmed from the start.
+@function trim-prefix($string, $prefix) {
+  @if has-prefix($string, $prefix) {
+    $string: string.slice($string, string.length($prefix) + 1);
+  }
+
+  @return $string;
+}
+
+/// Trims a repeating suffix from the end of a string.
+///
+/// @example - scss
+///   @debug trim-repeating-suffix('  foo bar  ', ' '); // "  foo bar"
+///   @debug trim-repeating-suffix('var(--foo)', ')'); // "var(--foo"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $suffix - The repeating suffix string to trim.
+/// @return {String} The string with the suffix trimmed from the end.
+@function trim-repeating-suffix($string, $suffix) {
+  @while has-suffix($string, $suffix) {
+    $string: trim-suffix($string, $suffix);
+  }
+
+  @return $string;
+}
+
+/// Trims a suffix from the end of a string.
+///
+/// @example - scss
+///   @debug trim-suffix('var(--foo)', ')'); // "var(--foo"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $suffix - The suffix string to trim.
+/// @return {String} The string with the suffix trimmed from the end.
+@function trim-suffix($string, $suffix) {
+  @if has-suffix($string, $suffix) {
+    $string: string.slice($string, 1, -1 * string.length($suffix) - 1);
+  }
+
+  @return $string;
+}
+
+/// Trims a repeating prefix and suffix from the start and end of a string.
+///
+/// If a suffix is not provided, the prefix is used as the suffix to trim.
+///
+/// @example - scss
+///   @debug trim-repeating('  foo bar  ', ' '); // "foo bar"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $prefix - The repeating prefix string to trim.
+/// @param {String} $suffix [$prefix] - The repeating suffix string to trim.
+/// @return {String} The string with the prefix and suffix trimmed.
+@function trim-repeating($string, $prefix, $suffix: $prefix) {
+  @return trim-repeating-prefix(
+    trim-repeating-suffix($string, $suffix),
+    $prefix
+  );
+}
+
+/// Trims a prefix and suffix from the start and end of a string.
+///
+/// If a suffix is not provided, the prefix is used as the suffix to trim.
+///
+/// @example - scss
+///   @debug trim('var(--foo)', 'var(', ')'); // "--foo"
+///
+/// @param {String} $string - The string to trim.
+/// @param {String} $prefix - The prefix string to trim.
+/// @param {String} $suffix [$prefix] - The suffix string to trim.
+/// @return {String} The string with the prefix and suffix trimmed.
+@function trim($string, $prefix, $suffix: $prefix) {
+  @return trim-prefix(trim-suffix($string, $suffix), $prefix);
+}
+
+/// Returns a new string with the first match of a pattern replaced by a
+/// replacement.
+///
+/// @example - scss
+///   @debug trim('foo bar baz', 'bar', 'quux'); // "foo quux baz"
+///
+/// @param {String} $string - The string to be searched.
+/// @param {String} $pattern - The pattern to search for.
+/// @param {String} $replacement - The value to replace the pattern.
+/// @return {String} The string with the first match of pattern replaced by the
+///     replacement or the initial string itself.
+@function replace($string, $pattern, $replacement) {
+  $pattern-index: string.index($string, $pattern);
+  @if not $pattern-index {
+    @return $string;
+  }
+
+  $before: string.slice($string, 1, $pattern-index - 1);
+  $after: string.slice($string, string.length($pattern) + $pattern-index);
+
+  @return $before + $replacement + $after;
+}
+
+/// Divides a string into an ordered list of substrings.
+///
+/// @example - scss
+///   @debug split("1px 2px 3px 4px"); // (1px 2px 3px 4px)
+///   @debug split("1px, 2px, 3px, 4px"); // (1px 2px 3px 4px)
+///   @debug split("1px/2px/3px/4px"); // (1px 2px 3px 4px)
+///
+/// @param {String} $str - The string to split
+/// @return {List} The list of substrings
+@function split($str) {
+  $list: ();
+  $item: '';
+  // list separator precedence is comma, slash, space
+  $separator: ' ';
+  @if string.index($str, ',') {
+    $separator: ',';
+  } @else if string.index($str, '/') {
+    $separator: '/';
+  }
+  @for $i from 1 through string.length($str) {
+    $chr: string.slice($str, $i, $i);
+    @if $chr == $separator {
+      @if $item != '' {
+        // remove surrounding whitespace
+        $item: string.unquote(trim($item, ' '));
+        $list: list.append($list, $item);
+      }
+      $item: '';
+    } @else {
+      $item: $item + $chr;
+    }
+  }
+  // append final item
+  @if $item != '' {
+    // remove surrounding whitespace
+    $item: string.unquote(trim($item, ' '));
+    $list: list.append($list, $item);
+  }
+  @return $list;
+}

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/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,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { Badge } from './internal/badge.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-badge': MdBadge;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdBadge extends Badge {
+    static styles: CSSResultOrNative[];
+}

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.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;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;GAGG;AAEI,WAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,KAAK;;AAChB,cAAM,GAAwB,CAAC,MAAM,CAAC,AAAhC,CAAiC;AAD5C,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 {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Badge} from './internal/badge.js';\nimport {styles} from './internal/badge-styles.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: CSSResultOrNative[] = [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

@@ -0,0 +1 @@
+:host{--_color: var(--md-badge-color, var(--md-badge-color, var(--md-sys-color-error, #b3261e)));--_large-color: var(--md-badge-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-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-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-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-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-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, var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px)));--_large-size: var(--md-badge-large-size, var(--md-badge-large-size, 16px));--_shape: var(--md-badge-shape, var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px)));--_size: var(--md-badge-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 */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_badge.scss"],"names":[],"mappings":"AA6BE,MAEI,u3CAIJ,WACE,uBACA,wBACA,uBACA,kBACA,sBACA,+BACA,4BACA,oBAEA,kCAEE,mBAGF,4BACE,aACA,sBACA,uBACA,wBACA,uBACA,qCACA,kCACA,0BACA,6BACA,qCAEA,8CACE,gBACA,kBAKN,kBACE,0CACA,wCACA,iDACA","file":"badge-styles.css"}

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/badge/internal/badge-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{--_color: var(--md-badge-color, var(--md-badge-color, var(--md-sys-color-error, #b3261e)));--_large-color: var(--md-badge-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-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-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-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-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-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, var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px)));--_large-size: var(--md-badge-large-size, var(--md-badge-large-size, 16px));--_shape: var(--md-badge-shape, var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px)));--_size: var(--md-badge-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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge-styles.js","sourceRoot":"","sources":["badge-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/badge/internal/badge-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_color: var(--md-badge-color, var(--md-badge-color, var(--md-sys-color-error, #b3261e)));--_large-color: var(--md-badge-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-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-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-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-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-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, var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px)));--_large-size: var(--md-badge-large-size, var(--md-badge-large-size, 16px));--_shape: var(--md-badge-shape, var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px)));--_size: var(--md-badge-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)}\n`;\n"]}

package/labs/badge/internal/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/internal/badge.d.ts

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

package/labs/badge/internal/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';
+/**
+ * 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/internal/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 * 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"]}