@maicol07/material-web 2.3.0 → 2.5.0

package/{internal/sass → sass/ext}/_var.scss

@@ -3,90 +3,79 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// go/keep-sorted start
+// Utility functions for "var()" custom property string manipulation.
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-// go/keep-sorted end
-// go/keep-sorted start
-@use './string-ext';
+@use 'assert';
+@use 'string_ext';
+@use 'throw';
 // go/keep-sorted end
 
 /// Creates a custom property `var()` string.
 ///
-/// @param {String} $name - The name of the custom property.
+/// @example scss
+///   @debug var.create(--foo); // "var(--foo)"
+///   @debug var.create(--foo, 8px); // "var(--foo, 8px)"
+///
+/// @param {string} $name - The name of the custom property.
 /// @param {*} $fallback [null] - Optional `var()` fallback value.
-/// @return {String} A custom property `var()` string.
+/// @return {string} A custom property `var()` string.
 @function create($name, $fallback: null) {
-  $name: create-name($name);
-  @if $fallback == null {
-    @return var(#{$name});
+  $name: assert.is-type($name, 'string');
+  @if throw.get-error($name) {
+    @return $name;
   }
-
-  @if is-var($fallback) {
-    $fallback-name: name($fallback);
-    $fallback-fallback: fallback($fallback);
-    @return var(#{$name}, create($fallback-name, $fallback-fallback));
+  @if not string_ext.starts-with($name, '--') {
+    @return throw.error(
+      'Custom property names must start with "--". $name: #{meta.inspect($name)}',
+      $source: 'var.create'
+    );
   }
 
-  @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;
+  @if $fallback == null {
+    @return var(#{$name});
   }
 
-  @return string.unquote('--md-#{$name}');
+  @return var(#{$name}, #{$fallback});
 }
 
 /// Returns the custom property variable name of `var()` string.
 ///
+/// @example scss
+///   $var: var(--foo);
+///   @debug var.name($var); // "--foo"
+///
+/// @param {string} $var - A custom property `var()` string.
+/// @return {string} The custom property variable name.
 /// @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);
+  @if throw.get-error($var) {
+    @return $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)"
+/// @example scss
+///   $var: var(--foo, var(--bar, 8px));
+///   @debug var.fallback($var); // "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
+/// @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.
+/// @throw If the value is not a custom property.
 @function fallback($var) {
   $var: _parse-and-validate($var);
-  $fallback: map.get($var, fallback);
-  @if is-var($fallback) {
-    @return create(name($fallback), fallback($fallback));
+  @if throw.get-error($var) {
+    @return $var;
   }
-
-  @return $fallback;
+  @return map.get($var, 'fallback');
 }
 
 /// Returns the deep fallback value of a custom property `var()` string. The
@@ -95,18 +84,18 @@
 /// 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"
+/// @example scss
+///   $var: var(--foo, var(--bar, 8px));
+///   @debug var.deep-fallback($var); // "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
+/// @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.
+/// @throw If the value is not a custom property.
 @function deep-fallback($var) {
   $fallback: fallback($var);
-  @if is-var($fallback) {
-    @return deep-fallback($fallback);
+  @while is-var($fallback) {
+    $fallback: fallback($fallback);
   }
 
   @return $fallback;
@@ -115,16 +104,17 @@
 /// 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)"
+/// @example scss
+///   $var: var(--foo, var(--bar, 8px));
+///   $new-var: set-fallback($var, 16px);
+///   @debug $new-var; // "var(--foo, 16px)"
 ///
-/// @throw If the value is not a custom property.
-/// @param {String} $var - A custom property `var()` string.
+/// @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
+/// @return {string} A custom property `var()` string with the new fallback
 ///     value.
+/// @throw If the value is not a custom property.
 @function set-fallback($var, $new-fallback) {
   $name: name($var);
   @return create($name, $new-fallback);
@@ -136,16 +126,17 @@
 /// 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))"
+/// @example scss
+///   $var: var(--foo, var(--bar, 8px));
+///   $new-var: var.deep-set-fallback($var, 16px);
+///   @debug $new-var; // "var(--foo, var(--bar, 16px))"
 ///
-/// @throw If the value is not a custom property.
-/// @param {String} $var - A custom property `var()` string.
+/// @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
+/// @return {string} A custom property `var()` string with the new deep
 ///     fallback value.
+/// @throw If the value is not a custom property.
 @function deep-set-fallback($var, $new-fallback) {
   $old-fallback: fallback($var);
   @if is-var($old-fallback) {
@@ -157,11 +148,12 @@
 
 /// Indicates whether or not a value is a custom property `var()` string.
 ///
-/// @example - scss
-///   $is-var: var.is-var('var(--foo)'); // true
+/// @example scss
+///   $var: var(--foo);
+///   @debug var.is-var($var); // true
 ///
 /// @param {*} $var - The value to test.
-/// @return {Bool} True if the value is a custom property `var()` string, or
+/// @return {boolean} True if the value is a custom property `var()` string, or
 ///     false if not.
 @function is-var($var) {
   @return _parse($var) != null;
@@ -170,24 +162,25 @@
 /// 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
+/// @return {boolean} 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(');
+  @return meta.type-of($var) == 'string' and
+    string_ext.starts-with($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
+/// @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)
+    map.has-key($var, 'name') and
+    map.has-key($var, 'fallback')
   {
     @return $var;
   }
@@ -197,40 +190,37 @@
   }
 
   // Remove function name and parens
-  $var: string-ext.trim($var, 'var(', ')');
+  $var: string_ext.replace-start($var, 'var(', '');
+  $var: string_ext.replace-end($var, ')', '');
 
-  $name: string-ext.trim-repeating($var, ' ');
+  $name: string_ext.trim($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;
-      }
-    }
+    $name: string_ext.trim(string.slice($var, 1, $comma - 1));
+    $fallback: string_ext.trim(string.slice($var, $comma + 1));
   }
 
   @if $name == '' or $fallback == '' {
     @return null;
   }
 
-  @return (name: $name, fallback: $fallback);
+  @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
+/// @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).
+/// @throw If the value is not a custom property.
 @function _parse-and-validate($var) {
   $var-map: _parse($var);
   @if $var-map == null {
-    @error '"#{$var}" is not a valid var() string';
+    @return throw.error(
+      '#{meta.inspect($var)} is not a valid var() string',
+      $source: 'var._parse-and-validate'
+    );
   }
 
   @return $var-map;

package/sass/ext/tests.scss

@@ -0,0 +1,18 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'true' as test with (
+  $catch-errors: true
+);
+
+// go/keep-sorted start
+@use 'assert_test';
+@use 'list_ext_test';
+@use 'map_ext_test';
+@use 'string_ext_test';
+@use 'throw_test';
+@use 'type_test';
+@use 'var_test';
+// go/keep-sorted end

package/slider/internal/_slider.scss

@@ -121,6 +121,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     pointer-events: none;
     // ensure scrolling is prevented on mobile.
     touch-action: none;
+    user-select: none;
   }
 
   .track,

package/switch/internal/_switch.scss

@@ -78,6 +78,7 @@
     // Input is also touch target
     input {
       appearance: none;
+      background: none; // Needed for Firefox v150+
       height: max(100%, map.get($tokens, 'touch-target-size'));
       outline: none;
       margin: 0;

package/tabs/internal/_tab.scss

@@ -10,7 +10,6 @@
 // go/keep-sorted start
 @use '../../elevation/elevation';
 @use '../../focus/focus-ring';
-@use '../../internal/sass/string-ext';
 @use '../../ripple/ripple';
 @use '../../tokens';
 // go/keep-sorted end

package/tokens/_index.scss

@@ -4,63 +4,63 @@
 //
 
 // go/keep-sorted start
-@forward './md-comp-assist-chip' as md-comp-assist-chip-*;
-@forward './md-comp-badge' as md-comp-badge-*;
-@forward './md-comp-checkbox' as md-comp-checkbox-*;
-@forward './md-comp-circular-progress' as md-comp-circular-progress-*;
-@forward './md-comp-dialog' as md-comp-dialog-*;
-@forward './md-comp-divider' as md-comp-divider-*;
-@forward './md-comp-elevated-button' as md-comp-elevated-button-*;
-@forward './md-comp-elevated-card' as md-comp-elevated-card-*;
-@forward './md-comp-elevation' as md-comp-elevation-*;
-@forward './md-comp-fab' as md-comp-fab-*;
-@forward './md-comp-fab-branded' as md-comp-fab-branded-*;
-@forward './md-comp-filled-button' as md-comp-filled-button-*;
-@forward './md-comp-filled-card' as md-comp-filled-card-*;
-@forward './md-comp-filled-field' as md-comp-filled-field-*;
-@forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;
-@forward './md-comp-filled-select' as md-comp-filled-select-*;
-@forward './md-comp-filled-text-field' as md-comp-filled-text-field-*;
-@forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
-@forward './md-comp-filled-tonal-icon-button' as
+@forward 'md-comp-assist-chip' as md-comp-assist-chip-*;
+@forward 'md-comp-badge' as md-comp-badge-*;
+@forward 'md-comp-checkbox' as md-comp-checkbox-*;
+@forward 'md-comp-circular-progress' as md-comp-circular-progress-*;
+@forward 'md-comp-dialog' as md-comp-dialog-*;
+@forward 'md-comp-divider' as md-comp-divider-*;
+@forward 'md-comp-elevated-button' as md-comp-elevated-button-*;
+@forward 'md-comp-elevated-card' as md-comp-elevated-card-*;
+@forward 'md-comp-elevation' as md-comp-elevation-*;
+@forward 'md-comp-fab' as md-comp-fab-*;
+@forward 'md-comp-fab-branded' as md-comp-fab-branded-*;
+@forward 'md-comp-filled-button' as md-comp-filled-button-*;
+@forward 'md-comp-filled-card' as md-comp-filled-card-*;
+@forward 'md-comp-filled-field' as md-comp-filled-field-*;
+@forward 'md-comp-filled-icon-button' as md-comp-filled-icon-button-*;
+@forward 'md-comp-filled-select' as md-comp-filled-select-*;
+@forward 'md-comp-filled-text-field' as md-comp-filled-text-field-*;
+@forward 'md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
+@forward 'md-comp-filled-tonal-icon-button' as
   md-comp-filled-tonal-icon-button-*;
-@forward './md-comp-filter-chip' as md-comp-filter-chip-*;
-@forward './md-comp-focus-ring' as md-comp-focus-ring-*;
-@forward './md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;
-@forward './md-comp-icon' as md-comp-icon-*;
-@forward './md-comp-icon-button' as md-comp-icon-button-*;
-@forward './md-comp-input-chip' as md-comp-input-chip-*;
-@forward './md-comp-item' as md-comp-item-*;
-@forward './md-comp-linear-progress' as md-comp-linear-progress-*;
-@forward './md-comp-list' as md-comp-list-*;
-@forward './md-comp-list-item' as md-comp-list-item-*;
-@forward './md-comp-menu' as md-comp-menu-*;
-@forward './md-comp-menu-item' as md-comp-menu-item-*;
-@forward './md-comp-navigation-bar' as md-comp-navigation-bar-*;
-@forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*;
-@forward './md-comp-outlined-button' as md-comp-outlined-button-*;
-@forward './md-comp-outlined-card' as md-comp-outlined-card-*;
-@forward './md-comp-outlined-field' as md-comp-outlined-field-*;
-@forward './md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*;
-@forward './md-comp-outlined-segmented-button' as
+@forward 'md-comp-filter-chip' as md-comp-filter-chip-*;
+@forward 'md-comp-focus-ring' as md-comp-focus-ring-*;
+@forward 'md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;
+@forward 'md-comp-icon' as md-comp-icon-*;
+@forward 'md-comp-icon-button' as md-comp-icon-button-*;
+@forward 'md-comp-input-chip' as md-comp-input-chip-*;
+@forward 'md-comp-item' as md-comp-item-*;
+@forward 'md-comp-linear-progress' as md-comp-linear-progress-*;
+@forward 'md-comp-list' as md-comp-list-*;
+@forward 'md-comp-list-item' as md-comp-list-item-*;
+@forward 'md-comp-menu' as md-comp-menu-*;
+@forward 'md-comp-menu-item' as md-comp-menu-item-*;
+@forward 'md-comp-navigation-bar' as md-comp-navigation-bar-*;
+@forward 'md-comp-navigation-drawer' as md-comp-navigation-drawer-*;
+@forward 'md-comp-outlined-button' as md-comp-outlined-button-*;
+@forward 'md-comp-outlined-card' as md-comp-outlined-card-*;
+@forward 'md-comp-outlined-field' as md-comp-outlined-field-*;
+@forward 'md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*;
+@forward 'md-comp-outlined-segmented-button' as
   md-comp-outlined-segmented-button-*;
-@forward './md-comp-outlined-select' as md-comp-outlined-select-*;
-@forward './md-comp-outlined-text-field' as md-comp-outlined-text-field-*;
-@forward './md-comp-primary-tab' as md-comp-primary-tab-*;
-@forward './md-comp-radio' as md-comp-radio-*;
-@forward './md-comp-ripple' as md-comp-ripple-*;
-@forward './md-comp-secondary-tab' as md-comp-secondary-tab-*;
-@forward './md-comp-slider' as md-comp-slider-*;
-@forward './md-comp-suggestion-chip' as md-comp-suggestion-chip-*;
-@forward './md-comp-switch' as md-comp-switch-*;
-@forward './md-comp-test-table' as md-comp-test-table-*;
-@forward './md-comp-text-button' as md-comp-text-button-*;
-@forward './md-ref-palette' as md-ref-palette-*;
-@forward './md-ref-typeface' as md-ref-typeface-*;
-@forward './md-sys-color' as md-sys-color-*;
-@forward './md-sys-elevation' as md-sys-elevation-*;
-@forward './md-sys-motion' as md-sys-motion-*;
-@forward './md-sys-shape' as md-sys-shape-*;
-@forward './md-sys-state' as md-sys-state-*;
-@forward './md-sys-typescale' as md-sys-typescale-*;
+@forward 'md-comp-outlined-select' as md-comp-outlined-select-*;
+@forward 'md-comp-outlined-text-field' as md-comp-outlined-text-field-*;
+@forward 'md-comp-primary-tab' as md-comp-primary-tab-*;
+@forward 'md-comp-radio' as md-comp-radio-*;
+@forward 'md-comp-ripple' as md-comp-ripple-*;
+@forward 'md-comp-secondary-tab' as md-comp-secondary-tab-*;
+@forward 'md-comp-slider' as md-comp-slider-*;
+@forward 'md-comp-suggestion-chip' as md-comp-suggestion-chip-*;
+@forward 'md-comp-switch' as md-comp-switch-*;
+@forward 'md-comp-test-table' as md-comp-test-table-*;
+@forward 'md-comp-text-button' as md-comp-text-button-*;
+@forward 'md-ref-palette' as md-ref-palette-*;
+@forward 'md-ref-typeface' as md-ref-typeface-*;
+@forward 'md-sys-color' as md-sys-color-*;
+@forward 'md-sys-elevation' as md-sys-elevation-*;
+@forward 'md-sys-motion' as md-sys-motion-*;
+@forward 'md-sys-shape' as md-sys-shape-*;
+@forward 'md-sys-state' as md-sys-state-*;
+@forward 'md-sys-typescale' as md-sys-typescale-*;
 // go/keep-sorted end

package/tokens/_md-comp-assist-chip.scss

@@ -8,14 +8,14 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './internal/shape';
-@use './internal/validate';
-@use './md-sys-color';
-@use './md-sys-elevation';
-@use './md-sys-shape';
-@use './md-sys-state';
-@use './md-sys-typescale';
-@use './v0_192/md-comp-assist-chip';
+@use 'internal/shape';
+@use 'internal/validate';
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-typescale';
+@use 'versions/v0_192/md-comp-assist-chip';
 // go/keep-sorted end
 
 $supported-tokens: (

package/tokens/_md-comp-badge.scss

@@ -7,10 +7,10 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './md-sys-color';
-@use './md-sys-shape';
-@use './md-sys-typescale';
-@use './v0_192/md-comp-badge';
+@use 'md-sys-color';
+@use 'md-sys-shape';
+@use 'md-sys-typescale';
+@use 'versions/v0_192/md-comp-badge';
 // go/keep-sorted end
 
 $_default: (

package/tokens/_md-comp-checkbox.scss

@@ -8,12 +8,12 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './internal/shape';
-@use './internal/validate';
-@use './md-sys-color';
-@use './md-sys-shape';
-@use './md-sys-state';
-@use './v0_192/md-comp-checkbox';
+@use 'internal/shape';
+@use 'internal/validate';
+@use 'md-sys-color';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'versions/v0_192/md-comp-checkbox';
 // go/keep-sorted end
 
 $supported-tokens: (

package/tokens/_md-comp-circular-progress.scss

@@ -8,10 +8,10 @@
 @use 'sass:math';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './internal/validate';
-@use './md-sys-color';
-@use './md-sys-shape';
-@use './v0_192/md-comp-circular-progress-indicator';
+@use 'internal/validate';
+@use 'md-sys-color';
+@use 'md-sys-shape';
+@use 'versions/v0_192/md-comp-circular-progress-indicator';
 // go/keep-sorted end
 
 $supported-tokens: (

package/tokens/_md-comp-dialog.scss

@@ -8,14 +8,14 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './internal/shape';
-@use './internal/validate';
-@use './md-sys-color';
-@use './md-sys-elevation';
-@use './md-sys-shape';
-@use './md-sys-state';
-@use './md-sys-typescale';
-@use './v0_192/md-comp-dialog';
+@use 'internal/shape';
+@use 'internal/validate';
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-typescale';
+@use 'versions/v0_192/md-comp-dialog';
 // go/keep-sorted end
 
 $supported-tokens: (

package/tokens/_md-comp-divider.scss

@@ -7,9 +7,9 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './internal/validate';
-@use './md-sys-color';
-@use './v0_192/md-comp-divider';
+@use 'internal/validate';
+@use 'md-sys-color';
+@use 'versions/v0_192/md-comp-divider';
 // go/keep-sorted end
 
 $supported-tokens: (

package/tokens/_md-comp-elevated-button.scss

@@ -8,14 +8,14 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './internal/shape';
-@use './internal/validate';
-@use './md-sys-color';
-@use './md-sys-elevation';
-@use './md-sys-shape';
-@use './md-sys-state';
-@use './md-sys-typescale';
-@use './v0_192/md-comp-elevated-button';
+@use 'internal/shape';
+@use 'internal/validate';
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-typescale';
+@use 'versions/v0_192/md-comp-elevated-button';
 // go/keep-sorted end
 
 $supported-tokens: (

package/tokens/_md-comp-elevated-card.scss

@@ -7,12 +7,12 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './internal/validate';
-@use './md-sys-color';
-@use './md-sys-elevation';
-@use './md-sys-shape';
-@use './md-sys-state';
-@use './v0_192/md-comp-elevated-card';
+@use 'internal/validate';
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'versions/v0_192/md-comp-elevated-card';
 // go/keep-sorted end
 
 $supported-tokens: (

package/tokens/_md-comp-elevation.scss

@@ -7,9 +7,9 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use './internal/validate';
-@use './md-sys-color';
-@use './md-sys-elevation';
+@use 'internal/validate';
+@use 'md-sys-color';
+@use 'md-sys-elevation';
 // go/keep-sorted end
 
 $supported-tokens: (