@maicol07/material-web 2.2.0 → 2.5.0

package/labs/gb/styles/typography/internal/_typography-tokens.scss

@@ -0,0 +1,149 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use '../../../../../sass/ext/map_ext';
+@use '../../../../../tokens/versions/latest/sass/md-ref-typeface';
+@use '../../../../../tokens/versions/latest/sass/md-sys-typescale';
+@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-emphasized';
+@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-emphasized-meta';
+@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-meta';
+// go/keep-sorted end
+
+@mixin emit-custom-properties(
+  $typescale-vars: meta.module-variables(md-sys-typescale),
+  $typescale-meta: meta.module-variables(md-sys-typescale-meta),
+  $typescale-emphasized-vars: meta.module-variables(md-sys-typescale-emphasized),
+  $typescale-emphasized-meta:
+    meta.module-variables(md-sys-typescale-emphasized-meta),
+  $typeface-vars:
+    map.merge(
+      meta.module-variables(md-ref-typeface),
+      (
+        'plain': (
+          'Roboto Flex',
+          'Roboto',
+          'Noto Sans',
+          system-ui,
+          sans-serif,
+        ),
+        'brand': var(--md-ref-typeface-plain),
+      )
+    )
+) {
+  --md-ref-typeface-brand: #{map_ext.get-strict($typeface-vars, 'brand')};
+  --md-ref-typeface-plain: #{map_ext.get-strict($typeface-vars, 'plain')};
+  --md-ref-typeface-weight-regular: #{map_ext.get-strict(
+      $typeface-vars,
+      'weight-regular'
+    )};
+  --md-ref-typeface-weight-medium: #{map_ext.get-strict(
+      $typeface-vars,
+      'weight-medium'
+    )};
+  --md-ref-typeface-weight-bold: #{map_ext.get-strict(
+      $typeface-vars,
+      'weight-bold'
+    )};
+
+  $scales: ('label', 'body', 'title', 'headline', 'display');
+  $sizes: (
+    'small': 'sm',
+    'medium': 'md',
+    'large': 'lg',
+  );
+
+  @each $scale in $scales {
+    @each $long-size, $short-size in $sizes {
+      $typescale: '#{$scale}-#{$long-size}';
+
+      $font: _font($typescale, $typescale-vars, $typescale-meta);
+      $tracking: map_ext.get-strict($typescale-vars, '#{$typescale}-tracking');
+      $axes: _axes($typescale, $typescale-vars);
+      $emphasized-font: _font(
+        $typescale,
+        $typescale-emphasized-vars,
+        $typescale-emphasized-meta
+      );
+      $emphasized-axes: _axes-emphasized(
+        $typescale,
+        $typescale-emphasized-vars
+      );
+
+      --md-sys-typescale-#{$scale}-#{$short-size}: #{$font};
+      --md-sys-typescale-#{$scale}-#{$short-size}-tracking: #{$tracking};
+      --md-sys-typescale-#{$scale}-#{$short-size}-axes: #{$axes};
+      --md-sys-typescale-emphasized-#{$scale}-#{$short-size}: #{$emphasized-font};
+      --md-sys-typescale-emphasized-#{$scale}-#{$short-size}-axes: #{$emphasized-axes};
+    }
+  }
+}
+
+/// Returns the `font` shorthand for a typescale from the provided token and
+/// metadata variable maps.
+@function _font($typescale, $vars, $meta) {
+  $weight: map_ext.get-strict($meta, '#{$typescale}-weight--resolved');
+  $size: map_ext.get-strict($vars, '#{$typescale}-size');
+  $line-height: map_ext.get-strict($vars, '#{$typescale}-line-height');
+  $family: map_ext.get-strict($meta, '#{$typescale}-font--resolved');
+  @return #{$weight} #{$size} / #{$line-height} #{$family};
+}
+
+/// Returns the `font-variation-settings` value for a typescale from the
+/// provided token variable map. Returns `normal` if no axes are changed from
+/// their default values.
+@function _axes($typescale, $vars) {
+  $axes: ();
+  $axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-rond'));
+  $axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-grad'));
+  @if list.length($axes) == 0 {
+    @return normal;
+  }
+  @return $axes;
+}
+
+// TODO: Remove this function once emphasized tokens are fixed to use `'ROND' 100`
+@function _axes-emphasized($typescale, $vars) {
+  $axes: ();
+  $axes: _append-axis($axes, ('ROND' 100));
+  $axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-grad'));
+  @return $axes;
+}
+
+/// Appends a font axis to a list if it is not the default value for the axis.
+@function _append-axis($axes, $axis) {
+  // Not all axes from Carbon are supported in gBreeze.
+  // - 'opsz': use `font-size`
+  // - 'slnt': use `font-style`
+  // - 'wdth': use `font-stretch`/`font-width`
+  // - 'wght': use `font-weight`
+  $default-axes: (
+    'ROND': 0,
+    'GRAD': 0,
+    // These axes are unused in Material, but included for Carbon completeness.
+    'CRSV': 0,
+    'FILL': 0,
+    'HEXP': 0,
+  );
+  $axis-tag: list.nth($axis, 1);
+  $axis-value: list.nth($axis, 2);
+  @if not map.has-key($default-axes, $axis-tag) {
+    // Do not append unsupported axes.
+    @return $axes;
+  }
+  @if map.get($default-axes, $axis-tag) == $axis-value {
+    // Do not append axes with default values.
+    @return $axes;
+  }
+
+  // Manually add quotes since Sass removes them for custom property values,
+  // even with string.quote().
+  $axis: '"#{$axis-tag}" #{$axis-value}';
+  @return list.append($axes, $axis, $separator: comma);
+}

package/labs/gb/styles/typography/md-typography-tokens.scss

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'internal/typography-tokens';
+// go/keep-sorted end
+
+@layer md.sys.typescale {
+  :root {
+    @include typography-tokens.emit-custom-properties;
+  }
+}

package/list/internal/listitem/_list-item.scss

@@ -34,6 +34,7 @@
   :host {
     border-radius: map.get($tokens, 'container-shape');
     display: flex;
+    gap: 16px;
     -webkit-tap-highlight-color: transparent;
 
     @include ripple.theme(
@@ -77,6 +78,7 @@
     border-radius: inherit;
     display: flex;
     flex: 1;
+    gap: inherit;
     max-width: inherit;
     min-width: inherit;
     outline: none;
@@ -116,6 +118,7 @@
     padding-bottom: map.get($tokens, 'bottom-space');
     padding-inline-start: map.get($tokens, 'leading-space');
     padding-inline-end: map.get($tokens, 'trailing-space');
+    gap: inherit;
   }
 
   md-item[multiline] {

package/menu/internal/menuitem/_menu-item.scss

@@ -24,7 +24,7 @@
       @error 'Token `#{$token}` is not a supported token.';
     }
 
-    @if $value and list.index($supported-tokens, $token) == null {
+    @if $value {
       --md-menu-item-#{$token}: #{$value};
     }
   }
@@ -36,6 +36,7 @@
   :host {
     border-radius: map.get($tokens, 'container-shape');
     display: flex;
+    gap: 16px;
 
     @include ripple.theme(
       (
@@ -78,6 +79,7 @@
     border-radius: inherit;
     display: flex;
     flex: 1;
+    gap: inherit;
     max-width: inherit;
     min-width: inherit;
     outline: none;
@@ -110,6 +112,7 @@
     padding-bottom: map.get($tokens, 'bottom-space');
     padding-inline-start: map.get($tokens, 'leading-space');
     padding-inline-end: map.get($tokens, 'trailing-space');
+    gap: inherit;
   }
 
   md-item[multiline] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maicol07/material-web",
-  "version": "2.2.0",
+  "version": "2.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -27,14 +27,17 @@
     "build:ts": "wireit",
     "build:css-to-ts": "wireit",
     "build:sass": "wireit",
+    "build:manifest": "wireit",
     "test": "wireit",
     "build:catalog": "wireit",
     "build:scripts": "wireit",
     "update-docs": "wireit",
+    "update-docs:components": "wireit",
+    "update-docs:sass-ext": "wireit",
     "update-size": "wireit"
   },
-  "customElement": "custom-elements.json",
   "type": "module",
+  "customElements": "custom-elements.json",
   "files": [
     "**/*.js",
     "**/*.js.map",
@@ -55,18 +58,24 @@
     "testing/harness.{js,js.map,d.ts}",
     "testing/transform-pseudo-classes.{js,js.map,d.ts}"
   ],
-  "workspaces": ["catalog"],
+  "workspaces": [
+    "catalog"
+  ],
   "dependencies": {
+    "@lit/context": "^1.1.6",
     "lit": "^2.8.0 || ^3.0.0",
+    "safevalues": "^1.2.0",
     "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@lit-labs/analyzer": "npm:@maicol07/lit-labs-analyzer@0.13.2",
-    "@lit-labs/gen-manifest": "npm:@maicol07/lit-labs-gen-manifest@0.4.1-1",
+    "@lit-labs/analyzer": "^0.14.0",
+    "@lit-labs/gen-manifest": "^0.3.6",
+    "@lit-labs/gen-utils": "^0.3.4",
     "@rollup/plugin-multi-entry": "^6.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@types/jasmine": "^4.0.3",
+    "@types/node": "^24.10.1",
     "@web/test-runner": "^0.18.2",
     "@web/test-runner-playwright": "^0.11.0",
     "custom-element-jet-brains-integration": "^1.6.2",
@@ -75,23 +84,34 @@
     "jasmine": "^4.5.0",
     "playwright": "^1.49.0",
     "rollup": "^2.79.1",
-    "sass": "^1.52.3",
+    "sass": "^1.93.2",
     "sass-true": "^6.1.0",
-    "typescript": "5.6.2",
+    "typescript": "5.9.2",
     "web-test-runner-jasmine": "^0.0.6",
-    "wireit": "^0.13.0"
+    "wireit": "^0.14.12"
   },
   "wireit": {
     "build": {
-      "dependencies": ["build:ts"]
+      "dependencies": [
+        "build:ts",
+        "build:manifest"
+      ]
     },
     "build:ts": {
+      "dependencies": [
+        "build:ts:main",
+        "build:ts:labs-gb"
+      ]
+    },
+    "build:ts:main": {
       "command": "tsc --pretty",
       "files": [
         "tsconfig.json",
+        "tsconfig.base.json",
         "**/*.ts",
         "!**/*.d.ts",
-        "!**/*-styles.ts",
+        "!**/*.cssresult.ts",
+        "!labs/gb/**",
         "!catalog/",
         "!scripts/"
       ],
@@ -103,39 +123,113 @@
         "!web-test-runner.config.js",
         "!commitlint.config.js",
         "!types/",
+        "!labs/gb/**",
         "!catalog/",
         "!scripts/"
       ],
       "clean": "if-file-deleted",
-      "dependencies": ["build:css-to-ts"]
+      "dependencies": [
+        "build:css-to-ts"
+      ]
+    },
+    "build:ts:labs-gb": {
+      "command": "tsc --pretty -p labs/gb/tsconfig.json",
+      "files": [
+        "tsconfig.base.json",
+        "labs/gb/tsconfig.json",
+        "labs/gb/**/*.ts",
+        "!labs/gb/**/*.d.ts"
+      ],
+      "output": [
+        ".tsbuildinfo",
+        "labs/gb/**/*.js",
+        "labs/gb/**/*.js.map",
+        "labs/gb/**/*.d.ts"
+      ],
+      "clean": "if-file-deleted",
+      "dependencies": [
+        "build:css-to-ts"
+      ]
     },
     "build:css-to-ts": {
-      "command": "find . \\( -path ./.wireit -o -path ./node_modules -o -path ./catalog \\) -prune -o -name '*-styles.css' -print | xargs -L1 node scripts/css-to-ts.js",
-      "files": ["**/*-styles.css", "!catalog/"],
-      "output": ["**/*-styles.ts", "!catalog/"],
-      "dependencies": ["build:scripts", "build:sass"]
+      "command": "find . \\( -path ./.wireit -o -path ./node_modules -o -path ./catalog \\) -prune -o -name '*.css' -print | xargs -L1 node scripts/css-to-ts.js --suffix=.cssresult",
+      "files": [
+        "**/*.css",
+        "!catalog/"
+      ],
+      "output": [
+        "**/*.cssresult.ts",
+        "!catalog/"
+      ],
+      "clean": "if-file-deleted",
+      "dependencies": [
+        "build:scripts",
+        "build:sass"
+      ]
     },
     "build:sass": {
       "command": "sass --style=compressed --load-path=node_modules --load-path=node_modules/sass-true/sass $(ls -d */ | grep -vE 'node_modules|catalog')",
-      "files": ["**/*.scss", "!catalog/"],
-      "output": ["**/*.css", "**/*.css.map", "!catalog/"]
+      "files": [
+        "**/*.scss",
+        "!catalog/"
+      ],
+      "output": [
+        "**/*.css",
+        "**/*.css.map",
+        "!catalog/"
+      ],
+      "dependencies": [
+        "build:sass:generate"
+      ]
+    },
+    "build:sass:generate": {
+      "command": "find tokens/versions/ -type f -name '_md-*.scss' ! -name '*-meta.scss' -print0 | xargs -0 node scripts/generate-sass-token-meta.js",
+      "files": [
+        "tokens/versions/**/_md-*.scss",
+        "!tokens/versions/**/*-meta.scss"
+      ],
+      "output": [
+        "tokens/versions/**/*-meta.scss"
+      ],
+      "dependencies": [
+        "build:scripts"
+      ]
+    },
+    "build:manifest": {
+      "command": "node scripts/analyzer/generate-manifest.js",
+      "files": [
+        "**/*.ts"
+      ],
+      "output": [
+        "custom-elements.json",
+        "web-types.json"
+      ],
+      "dependencies": [
+        "build:scripts",
+        "build:ts"
+      ]
     },
     "test": {
       "command": "wtr",
-      "dependencies": ["build:ts"],
-      "files": ["web-test-runner.config.js"],
+      "dependencies": [
+        "build:ts"
+      ],
+      "files": [
+        "web-test-runner.config.js"
+      ],
       "output": []
     },
     "build:catalog": {
-      "dependencies": ["./catalog:build:prod"]
+      "dependencies": [
+        "./catalog:build:prod"
+      ]
     },
     "build:scripts": {
       "command": "tsc -b scripts/tsconfig.json --pretty",
       "files": [
         "scripts/tsconfig.json",
         "scripts/**/*.ts",
-        "!**/*.d.ts",
-        "!**/*-styles.ts"
+        "!**/*.d.ts"
       ],
       "output": [
         "scripts/.tsbuildinfo",
@@ -146,22 +240,46 @@
       "clean": "if-file-deleted"
     },
     "update-docs": {
+      "dependencies": [
+        "update-docs:components",
+        "update-docs:sass-ext"
+      ]
+    },
+    "update-docs:components": {
       "command": "node scripts/analyzer/update-docs.js",
       "files": [
         "docs/components/*.md",
         "**/*.ts",
         "!**/*.d.ts",
-        "!**/*-styles.ts",
+        "!**/*.cssresult.ts",
         "!catalog/",
         "!scripts/",
         "scripts/analyzer/update-docs.js"
       ],
-      "output": ["custom-elements.json", "web-types.json"],
-      "dependencies": ["build:scripts"]
+      "output": [],
+      "dependencies": [
+        "build:scripts"
+      ]
+    },
+    "update-docs:sass-ext": {
+      "command": "node scripts/update-sass-ext-docs.js --input=./sass/ext/ --output=./docs/sass/sass-ext.md",
+      "files": [
+        "docs/sass/sass-ext.md",
+        "sass/ext/_*.scss",
+        "!sass/ext/*_test.scss",
+        "scripts/update-sass-ext-docs.js"
+      ],
+      "output": [],
+      "dependencies": [
+        "build:scripts"
+      ]
     },
     "update-size": {
       "command": "node scripts/size/update-size.js",
-      "dependencies": ["build:scripts", "build"]
+      "dependencies": [
+        "build:scripts",
+        "build"
+      ]
     }
   },
   "web-types": "./web-types.json"

package/sass/ext/_assert.scss

@@ -0,0 +1,82 @@
+//
+// Copyright 2025 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Utility assert functions that throw errors.
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'sass:meta';
+@use 'throw';
+@use 'type';
+// go/keep-sorted end
+
+/// Asserts that the argument is a specific type. If it is, the argument is
+/// returned, otherwise an error is thrown.
+///
+/// @example scss
+///   @mixin multiply($a, $b) {
+///     $a: assert.is-type($a, 'number');
+///     $b: assert.is-type($b, 'number');
+///     @return $a * $b;
+///   }
+///
+///   @function is-empty($value) {
+///     $value: assert.is-type(
+///       $value,
+///       'list|map|null',
+///       $message: '$value must be a list, map, or null',
+///       $source: 'is-empty'
+///     );
+///     @return $value and list.length($value) == 0;
+///   }
+///
+/// @param {*} $arg - The argument to check.
+/// @param {string} $type - The string type to assert the argument matches.
+///     Multiple types may be separated by '|'.
+/// @param {string} $message - Optional custom error message.
+/// @param {string} $source - Optional source of the error message.
+/// @return {*} The argument if it matches the type string.
+/// @throw Error if the argument does not match the type string.
+@function is-type(
+  $arg,
+  $type,
+  $message: 'Argument must be type #{meta.inspect($type)}. $arg: #{meta.inspect($arg)}',
+  $source: 'assert.is-type'
+) {
+  @if type.matches($arg, $type) {
+    @return $arg;
+  }
+  @return throw.error($message, $source);
+}
+
+/// Asserts that the argument is not a specific type. The argument is returned
+/// if it does not match. An error is thrown if the argument matches the type.
+///
+/// @example scss
+///   @function get-strict($map, $key) {
+///     @return assert.not-type(
+///       map.get($map, $key),
+///       'null',
+///       $message: 'Key must be in the map'
+///     );
+///   }
+///
+/// @param {*} $arg - The argument to check.
+/// @param {string} $type - The string type to assert the argument does not
+///     match. Multiple types may be separated by '|'.
+/// @param {string} $message - Optional custom error message.
+/// @param {string} $source - Optional source of the error message.
+/// @return {*} The argument if it does not match the type string.
+/// @throw Error if the argument matches the type string.
+@function not-type(
+  $arg,
+  $type,
+  $message: 'Argument may not be type #{meta.inspect($type)}. $arg: #{meta.inspect($arg)}',
+  $source: 'assert.not-type'
+) {
+  @if type.matches($arg, $type) {
+    @return throw.error($message, $source);
+  }
+  @return $arg;
+}

package/sass/ext/_list_ext.scss

@@ -0,0 +1,114 @@
+//
+// Copyright 2025 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Extensions to the go/sass:list built-in module.
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'sass:list';
+@use 'assert';
+@use 'throw';
+// go/keep-sorted end
+
+/// Returns the difference between two lists.
+///
+/// @example scss
+///   $listA: ('apple', 'banana', 'cherry', 'date');
+///   $listB: ('banana', 'cherry', 'apple');
+///   $listC: ('apple', 'banana', 'date');
+///
+///   @debug list_ext.difference($listA, $listB); // ('date')
+///   @debug list_ext.difference($listA, $listC); // ('cherry')
+///
+/// @param {list} $listA - The first list to compare.
+/// @param {list} $listB - The second list to compare.
+/// @return {list} All items in $listA that are not in $listB.
+@function difference($listA, $listB) {
+  $listA: assert.is-type($listA, 'list', $source: 'list_ext.difference');
+  $listB: assert.is-type($listB, 'list', $source: 'list_ext.difference');
+  $error: throw.get-error($listA, $listB);
+  @if $error {
+    @return $error;
+  }
+
+  $result: ();
+  @each $item in $listA {
+    @if not list.index($listB, $item) {
+      $result: list.append($result, $item, list.separator($listA));
+    }
+  }
+  @return $result;
+}
+
+/// Checks if two lists contain the same elements, regardless of their order.
+///
+/// The function iterates through each list and verifies that every element in
+/// one list is present in the other. The order of elements does not affect the
+/// result.
+///
+/// @example scss
+///   $listA: ('apple', 'banana', 'cherry');
+///   $listB: ('banana', 'cherry', 'apple');
+///   $listC: ('apple', 'banana', 'date');
+///
+///   @debug list_ext.are-equal($listA, $listB); // true
+///   @debug list_ext.are-equal($listA, $listC); // false
+///
+/// @param {list} $listA - The first list to compare.
+/// @param {list} $listB - The second list to compare.
+/// @return {boolean} `true` if the lists contain the same elements, otherwise
+///     `false`.
+@function are-equal($listA, $listB) {
+  $listA: assert.is-type($listA, 'list', $source: 'list_ext.are-equal');
+  $listB: assert.is-type($listB, 'list', $source: 'list_ext.are-equal');
+  $error: throw.get-error($listA, $listB);
+  @if $error {
+    @return $error;
+  }
+  @if list.length($listA) != list.length($listB) {
+    @return false;
+  }
+  $result: true;
+  @each $key in $listA {
+    @if not list.index($listB, $key) {
+      $result: false;
+    }
+  }
+
+  @each $key in $listB {
+    @if not list.index($listA, $key) {
+      $result: false;
+    }
+  }
+  @return $result;
+}
+
+/// Returns the intersection of two lists.
+///
+/// @example scss
+///   $listA: ('apple', 'banana', 'cherry', 'date');
+///   $listB: ('banana', 'cherry', 'apple');
+///   $listC: ('apple', 'banana', 'date');
+///
+///   @debug list_ext.intersection($listA, $listB); // ('apple', 'banana', 'cherry')
+///   @debug list_ext.intersection($listA, $listC); // ('apple', 'banana')
+///
+/// @param {list} $listA - The first list to compare.
+/// @param {list} $listB - The second list to compare.
+/// @return {list} All items in $listA that are also in $listB.
+@function intersection($listA, $listB) {
+  $listA: assert.is-type($listA, 'list', $source: 'list_ext.intersection');
+  $listB: assert.is-type($listB, 'list', $source: 'list_ext.intersection');
+  $error: throw.get-error($listA, $listB);
+  @if $error {
+    @return $error;
+  }
+  $result: ();
+  @each $item in $listA {
+    @if list.index($listB, $item) {
+      $result: list.append($result, $item, list.separator($listA));
+    }
+  }
+  @return $result;
+}