@material/web 1.0.0-pre.8 → 1.0.0

package/sass/_dom.scss

@@ -1,52 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-///
-/// Emits necessary layout styles to set a transparent border around an element
-/// without interfering with the rest of its component layout. The border is
-/// only visible in high-contrast mode. The target element should be a child of
-/// a relatively positioned top-level element (i.e. a ::before pseudo-element).
-///
-/// @param {number} $border-width - The width of the transparent border.
-/// @param {string} $border-style - The style of the transparent border.
-///
-@mixin transparent-border($border-width: 1px, $border-style: solid) {
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border: $border-width $border-style transparent;
-  border-radius: inherit;
-  content: '';
-  pointer-events: none;
-}
-
-///
-/// Visually hides text content for accessibility. This text should only be
-/// visible to screen reader users.
-/// See https://a11yproject.com/posts/how-to-hide-content/
-///
-@mixin visually-hidden() {
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap; /* added line */
-  width: 1px;
-}
-
-///
-/// While in `forced-colors` mode, only system colors should be used.
-///
-/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors
-/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
-/// @content styles to emit in `forced-colors` mode
-@mixin forced-colors-mode() {
-  @media screen and (forced-colors: active) {
-    @content;
-  }
-}

package/sass/_feature-flags.scss

@@ -1,119 +0,0 @@
-//
-// 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
-
-/// Valid configuration values for each config option.
-$_valid-values: (
-  // - all: var(--foo, var(--bar, 8px))
-  // - none: var(--foo)
-  // - vars: var(--foo, var(--bar))
-  var-fallbacks: (all, none, vars)
-);
-
-/// Initial configuration for Sass options.
-$_initial-config: (
-  var-name-prefix: 'md',
-  var-fallbacks: all,
-);
-
-/// The current configuration.
-$_current-config: $_initial-config;
-
-/// Set configuration options for Sass. Setting an option to `null` will reset
-/// the option to its initial value.
-///
-/// The options will only be set within the scope of the content provided to the
-/// mixin.
-///
-/// @example - scss
-///   @include feature-flags.with($var-fallbacks: none) {
-///     // No fallback values will be emitted within this mixin scope
-///     @include another-mixin();
-///   }
-///
-/// All parameters must be provided as argument lists.
-///
-/// @link https://sass-lang.com/documentation/values/lists#argument-lists
-///
-/// @throw If any option is not a valid configuration option.
-/// @throw If any value is not a valid configuration option value.
-/// @content The scope of the configuration.
-/// @param {String} $var-name-prefix [md] - The prefix to use for custom
-///     properties.
-/// @param {String} $var-fallbacks [all] - What to emit for custom property
-///     fallback values. (`all`, `none`, `vars`)
-@mixin with($config...) {
-  @if not meta.content-exists() {
-    @error 'Content scope is required: feature-flags.with($options...) { /* scope */ }';
-  }
-
-  $config: meta.keywords($config);
-  @each $option, $value in $config {
-    @if $value == null {
-      $value: map.get($_initial-config, $option);
-    }
-
-    $value: _validate-value($option, $value);
-  }
-
-  $previous-config: $_current-config;
-  // Use !global to avoid shadowing
-  // https://sass-lang.com/documentation/variables#shadowing
-  $_current-config: map.merge($_current-config, $config) !global;
-  // Restore previous config after content scope ends
-  @content;
-  $_current-config: $previous-config !global;
-}
-
-/// Retrieves the current configuration value for the given option.
-///
-/// @throw If the option is not a valid configuration option.
-/// @param {String} option - The config option to get a value for.
-/// @return {*} - The current value for the config option.
-@function get($option) {
-  $option: _validate-option($option);
-  @return map.get($_current-config, $option);
-}
-
-/// Checks that an option is valid and returns it.
-///
-/// @throw If the option is not a valid configuration option.
-/// @param {String} option - The option to check.
-/// @return {String} The provided option.
-@function _validate-option($option) {
-  $valid-options: map.keys($_initial-config);
-  @if list.index($valid-options, $option) == null {
-    @error '"#{$option}" is not a valid configuration option';
-  }
-
-  @return $option;
-}
-
-/// Checks that an option and value are valid and returns the value.
-///
-/// @throw If any option is not a valid configuration option.
-/// @throw If any value is not a valid configuration option value.
-/// @param {String} option - The option to check.
-/// @param {*} option - The value to check.
-/// @return {*} - The provided value option.
-@function _validate-value($option, $value) {
-  $option: _validate-option($option);
-  $valid-values: map.get($_valid-values, $option);
-  @if $valid-values == null {
-    // Any value is acceptable
-    @return $value;
-  }
-
-  @if list.index($valid-values, $value) == null {
-    @error '"#{$option}": "#{$value}" is not a valid configuration value (must be one of #{$valid-values})';
-  }
-
-  @return $value;
-}

package/sass/_map-ext.scss

@@ -1,51 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-
-/// Picks only specified items in a map.
-///
-/// @example - scss
-///   @debug pick((one: 1, two: 2, three: 3), (two, three));
-///          // (two: 2, three: 3)
-///
-/// @param {Map} $map - Map input to pick.
-/// @param {List} $list - List containing items to pick.
-/// @return {Map} Returns a map containing items specified in `$list`.
-@function pick($map, $list) {
-  $result: ();
-  @each $key in $list {
-    $value: map.get($map, $key);
-    $result: map.set($result, $key, $value);
-  }
-
-  @return $result;
-}
-
-/// Duplicates a key in the map with a new name.
-///
-/// Throws an error if key is not in map.
-///
-/// @example - scss
-///   @debug duplicate-key((width: 2, height: 3), width, container-width);
-///          // (width: 2, height: 3, container-width: 2)
-///
-/// @example - scss
-///   @debug duplicate-key((width: 2, height: 3), width, height);
-///          // (width: 2, height: 2)
-///
-/// @param {Map} $map - Map input to duplicate key.
-/// @param {String} $name - Name of key to duplicate.
-/// @param {String} $new-name - Name of duplicated key.
-/// @return {Map} Returns a map containing the duplicated key.
-@function duplicate-key($map, $name, $new-name) {
-  $value: map.get($map, $name);
-  @if not map.has-key($map, $name) {
-    @error "Key " + $name + " does not exist in map " + $map;
-  }
-  @return map.set($map, $new-name, $value);
-}

package/sass/_theme.scss

@@ -1,249 +0,0 @@
-//
-// 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/sass/_touch-target.scss

@@ -1,22 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-$_default-touch-target-height: 48px !default;
-$_default-touch-target-width: 48px !default;
-
-/// Styles applied to the component's inner touch target element.
-/// @param $height [$_default-touch-target-height] - Touch target height.
-/// @param $width [$_default-touch-target-width] - Touch target width.
-@mixin touch-target(
-  $height: $_default-touch-target-height,
-  $width: $_default-touch-target-width
-) {
-  position: absolute;
-  top: 50%;
-  height: $height;
-  left: 50%;
-  width: $width;
-  transform: translate(-50%, -50%);
-}