@angular/material 19.0.0-next.8 → 19.0.0-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/_index.scss +1 -2
  2. package/autocomplete/_autocomplete-theme.scss +30 -21
  3. package/badge/_badge-theme.scss +31 -21
  4. package/bottom-sheet/_bottom-sheet-theme.scss +25 -17
  5. package/button/_button-theme.scss +220 -100
  6. package/button/_fab-theme.scss +88 -41
  7. package/button/_icon-button-theme.scss +31 -22
  8. package/button/index.d.ts +2 -2
  9. package/button-toggle/_button-toggle-theme.scss +52 -32
  10. package/card/_card-theme.scss +72 -35
  11. package/checkbox/_checkbox-theme.scss +6 -4
  12. package/chips/_chips-theme.scss +57 -27
  13. package/core/_core-theme.scss +51 -30
  14. package/core/_core.scss +1 -1
  15. package/core/option/_optgroup-theme.scss +22 -15
  16. package/core/option/_option-theme.scss +27 -18
  17. package/core/ripple/_ripple-theme.scss +26 -18
  18. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +40 -18
  19. package/core/tokens/_m3-system.scss +34 -6
  20. package/core/tokens/_token-utils.scss +91 -34
  21. package/core/tokens/m2/mat/_badge.scss +12 -3
  22. package/core/tokens/m2/mdc/_radio.scss +1 -1
  23. package/core/tokens/m3/definitions/_md-comp-elevated-card.scss +1 -1
  24. package/core/tokens/m3/mat/_badge.scss +6 -3
  25. package/datepicker/_datepicker-theme.scss +46 -29
  26. package/datepicker/index.d.ts +1 -1
  27. package/dialog/_dialog-theme.scss +39 -20
  28. package/divider/_divider-theme.scss +21 -14
  29. package/expansion/_expansion-theme.scss +29 -21
  30. package/fesm2022/autocomplete.mjs +14 -16
  31. package/fesm2022/autocomplete.mjs.map +1 -1
  32. package/fesm2022/badge.mjs +11 -12
  33. package/fesm2022/badge.mjs.map +1 -1
  34. package/fesm2022/bottom-sheet.mjs +11 -11
  35. package/fesm2022/bottom-sheet.mjs.map +1 -1
  36. package/fesm2022/button-toggle.mjs +11 -12
  37. package/fesm2022/button-toggle.mjs.map +1 -1
  38. package/fesm2022/button.mjs +42 -42
  39. package/fesm2022/button.mjs.map +1 -1
  40. package/fesm2022/card.mjs +49 -60
  41. package/fesm2022/card.mjs.map +1 -1
  42. package/fesm2022/checkbox.mjs +16 -17
  43. package/fesm2022/checkbox.mjs.map +1 -1
  44. package/fesm2022/chips.mjs +48 -54
  45. package/fesm2022/chips.mjs.map +1 -1
  46. package/fesm2022/core.mjs +71 -73
  47. package/fesm2022/core.mjs.map +1 -1
  48. package/fesm2022/datepicker.mjs +95 -105
  49. package/fesm2022/datepicker.mjs.map +1 -1
  50. package/fesm2022/dialog/testing.mjs +0 -1
  51. package/fesm2022/dialog/testing.mjs.map +1 -1
  52. package/fesm2022/dialog.mjs +28 -33
  53. package/fesm2022/dialog.mjs.map +1 -1
  54. package/fesm2022/divider.mjs +8 -8
  55. package/fesm2022/divider.mjs.map +1 -1
  56. package/fesm2022/expansion.mjs +28 -33
  57. package/fesm2022/expansion.mjs.map +1 -1
  58. package/fesm2022/form-field.mjs +38 -45
  59. package/fesm2022/form-field.mjs.map +1 -1
  60. package/fesm2022/grid-list.mjs +26 -29
  61. package/fesm2022/grid-list.mjs.map +1 -1
  62. package/fesm2022/icon/testing.mjs +7 -7
  63. package/fesm2022/icon/testing.mjs.map +1 -1
  64. package/fesm2022/icon.mjs +11 -11
  65. package/fesm2022/icon.mjs.map +1 -1
  66. package/fesm2022/input.mjs +7 -8
  67. package/fesm2022/input.mjs.map +1 -1
  68. package/fesm2022/list.mjs +57 -66
  69. package/fesm2022/list.mjs.map +1 -1
  70. package/fesm2022/menu.mjs +18 -20
  71. package/fesm2022/menu.mjs.map +1 -1
  72. package/fesm2022/paginator.mjs +11 -11
  73. package/fesm2022/paginator.mjs.map +1 -1
  74. package/fesm2022/progress-bar.mjs +8 -8
  75. package/fesm2022/progress-bar.mjs.map +1 -1
  76. package/fesm2022/progress-spinner.mjs +8 -8
  77. package/fesm2022/progress-spinner.mjs.map +1 -1
  78. package/fesm2022/radio.mjs +11 -12
  79. package/fesm2022/radio.mjs.map +1 -1
  80. package/fesm2022/select.mjs +12 -13
  81. package/fesm2022/select.mjs.map +1 -1
  82. package/fesm2022/sidenav.mjs +28 -30
  83. package/fesm2022/sidenav.mjs.map +1 -1
  84. package/fesm2022/slide-toggle.mjs +16 -17
  85. package/fesm2022/slide-toggle.mjs.map +1 -1
  86. package/fesm2022/slider.mjs +18 -20
  87. package/fesm2022/slider.mjs.map +1 -1
  88. package/fesm2022/snack-bar.mjs +25 -28
  89. package/fesm2022/snack-bar.mjs.map +1 -1
  90. package/fesm2022/sort.mjs +14 -15
  91. package/fesm2022/sort.mjs.map +1 -1
  92. package/fesm2022/stepper.mjs +34 -39
  93. package/fesm2022/stepper.mjs.map +1 -1
  94. package/fesm2022/table.mjs +57 -73
  95. package/fesm2022/table.mjs.map +1 -1
  96. package/fesm2022/tabs.mjs +51 -56
  97. package/fesm2022/tabs.mjs.map +1 -1
  98. package/fesm2022/timepicker.mjs +17 -18
  99. package/fesm2022/timepicker.mjs.map +1 -1
  100. package/fesm2022/toolbar.mjs +11 -12
  101. package/fesm2022/toolbar.mjs.map +1 -1
  102. package/fesm2022/tooltip.mjs +11 -12
  103. package/fesm2022/tooltip.mjs.map +1 -1
  104. package/fesm2022/tree.mjs +26 -32
  105. package/fesm2022/tree.mjs.map +1 -1
  106. package/form-field/_form-field-theme.scss +105 -56
  107. package/form-field/index.d.ts +1 -1
  108. package/grid-list/_grid-list-theme.scss +18 -12
  109. package/icon/_icon-theme.scss +15 -11
  110. package/input/_input-theme.scss +11 -8
  111. package/list/_list-theme.scss +82 -44
  112. package/menu/_menu-theme.scss +26 -18
  113. package/package.json +2 -2
  114. package/paginator/_paginator-theme.scss +32 -20
  115. package/prebuilt-themes/azure-blue.css +1 -1
  116. package/prebuilt-themes/cyan-orange.css +1 -1
  117. package/prebuilt-themes/deeppurple-amber.css +1 -1
  118. package/prebuilt-themes/indigo-pink.css +1 -1
  119. package/prebuilt-themes/magenta-violet.css +1 -1
  120. package/prebuilt-themes/pink-bluegrey.css +1 -1
  121. package/prebuilt-themes/purple-green.css +1 -1
  122. package/prebuilt-themes/rose-red.css +1 -1
  123. package/progress-bar/_progress-bar-theme.scss +13 -11
  124. package/progress-spinner/_progress-spinner-theme.scss +34 -20
  125. package/radio/_radio-theme.scss +50 -26
  126. package/schematics/collection.json +3 -3
  127. package/schematics/ng-add/index.js +1 -1
  128. package/schematics/ng-add/index.mjs +1 -1
  129. package/schematics/ng-generate/{m3-theme → theme-color}/index_bundled.js +454 -288
  130. package/schematics/ng-generate/theme-color/index_bundled.js.map +7 -0
  131. package/schematics/ng-generate/{m3-theme → theme-color}/schema.json +7 -13
  132. package/select/_select-theme.scss +31 -22
  133. package/sidenav/_sidenav-theme.scss +21 -14
  134. package/slide-toggle/_slide-toggle-theme.scss +42 -22
  135. package/slider/_slider-theme.scss +55 -35
  136. package/snack-bar/_snack-bar-theme.scss +22 -14
  137. package/sort/_sort-theme.scss +26 -18
  138. package/stepper/_stepper-theme.scss +33 -24
  139. package/table/_table-theme.scss +29 -20
  140. package/tabs/_tabs-theme.scss +89 -46
  141. package/tabs/index.d.ts +2 -2
  142. package/timepicker/_timepicker-theme.scss +30 -21
  143. package/toolbar/_toolbar-theme.scss +28 -19
  144. package/tooltip/_tooltip-theme.scss +11 -12
  145. package/tree/_tree-theme.scss +26 -18
  146. package/schematics/ng-generate/m3-theme/index_bundled.js.map +0 -7
package/_index.scss CHANGED
@@ -20,8 +20,7 @@
20
20
  @forward './core/tokens/m2' show m2-tokens-from-theme;
21
21
  @forward './core/tokens/m3-system' show system-level-colors,
22
22
  system-level-typography, system-level-elevation, system-level-shape,
23
- system-level-motion, system-level-state;
24
- @forward './core/tokens/m3-system' as private-experimental-* show private-experimental-theme;
23
+ system-level-motion, system-level-state, theme, theme-overrides;
25
24
 
26
25
  // Private/Internal
27
26
  @forward './core/density/private/all-density' show all-component-densities;
@@ -10,11 +10,12 @@
10
10
  @mixin base($theme) {
11
11
  @if inspection.get-theme-version($theme) == 1 {
12
12
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
13
- }
14
- @else {
13
+ } @else {
15
14
  @include sass-utils.current-selector-or-root() {
16
- @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
17
- tokens-mat-autocomplete.get-unthemable-tokens());
15
+ @include token-utils.create-token-values(
16
+ tokens-mat-autocomplete.$prefix,
17
+ tokens-mat-autocomplete.get-unthemable-tokens()
18
+ );
18
19
  }
19
20
  }
20
21
  }
@@ -22,11 +23,12 @@
22
23
  @mixin color($theme) {
23
24
  @if inspection.get-theme-version($theme) == 1 {
24
25
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
25
- }
26
- @else {
26
+ } @else {
27
27
  @include sass-utils.current-selector-or-root() {
28
- @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
29
- tokens-mat-autocomplete.get-color-tokens($theme));
28
+ @include token-utils.create-token-values(
29
+ tokens-mat-autocomplete.$prefix,
30
+ tokens-mat-autocomplete.get-color-tokens($theme)
31
+ );
30
32
  }
31
33
  }
32
34
  }
@@ -34,11 +36,12 @@
34
36
  @mixin typography($theme) {
35
37
  @if inspection.get-theme-version($theme) == 1 {
36
38
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
37
- }
38
- @else {
39
+ } @else {
39
40
  @include sass-utils.current-selector-or-root() {
40
- @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
41
- tokens-mat-autocomplete.get-typography-tokens($theme));
41
+ @include token-utils.create-token-values(
42
+ tokens-mat-autocomplete.$prefix,
43
+ tokens-mat-autocomplete.get-typography-tokens($theme)
44
+ );
42
45
  }
43
46
  }
44
47
  }
@@ -46,11 +49,12 @@
46
49
  @mixin density($theme) {
47
50
  @if inspection.get-theme-version($theme) == 1 {
48
51
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
49
- }
50
- @else {
52
+ } @else {
51
53
  @include sass-utils.current-selector-or-root() {
52
- @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
53
- tokens-mat-autocomplete.get-density-tokens($theme));
54
+ @include token-utils.create-token-values(
55
+ tokens-mat-autocomplete.$prefix,
56
+ tokens-mat-autocomplete.get-density-tokens($theme)
57
+ );
54
58
  }
55
59
  }
56
60
  }
@@ -58,7 +62,10 @@
58
62
  @mixin overrides($tokens: ()) {
59
63
  @include token-utils.batch-create-token-values(
60
64
  $tokens,
61
- (prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()),
65
+ (
66
+ namespace: tokens-mat-autocomplete.$prefix,
67
+ tokens: tokens-mat-autocomplete.get-token-slots(),
68
+ )
62
69
  );
63
70
  }
64
71
 
@@ -66,8 +73,7 @@
66
73
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
67
74
  @if inspection.get-theme-version($theme) == 1 {
68
75
  @include _theme-from-tokens(inspection.get-theme-tokens($theme));
69
- }
70
- @else {
76
+ } @else {
71
77
  @include base($theme);
72
78
  @if inspection.theme-has($theme, color) {
73
79
  @include color($theme);
@@ -84,9 +90,12 @@
84
90
 
85
91
  @mixin _theme-from-tokens($tokens) {
86
92
  @include validation.selector-defined(
87
- 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
93
+ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
94
+ );
88
95
  @if ($tokens != ()) {
89
96
  @include token-utils.create-token-values(
90
- tokens-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
97
+ tokens-mat-autocomplete.$prefix,
98
+ map.get($tokens, tokens-mat-autocomplete.$prefix)
99
+ );
91
100
  }
92
101
  }
@@ -13,11 +13,12 @@
13
13
  @mixin base($theme) {
14
14
  @if inspection.get-theme-version($theme) == 1 {
15
15
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
16
- }
17
- @else {
16
+ } @else {
18
17
  @include sass-utils.current-selector-or-root() {
19
- @include token-utils.create-token-values(tokens-mat-badge.$prefix,
20
- tokens-mat-badge.get-unthemable-tokens());
18
+ @include token-utils.create-token-values(
19
+ tokens-mat-badge.$prefix,
20
+ tokens-mat-badge.get-unthemable-tokens()
21
+ );
21
22
  }
22
23
  }
23
24
  }
@@ -30,21 +31,26 @@
30
31
  @mixin color($theme, $options...) {
31
32
  @if inspection.get-theme-version($theme) == 1 {
32
33
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
33
- }
34
- @else {
34
+ } @else {
35
35
  @include sass-utils.current-selector-or-root() {
36
- @include token-utils.create-token-values(tokens-mat-badge.$prefix,
37
- tokens-mat-badge.get-color-tokens($theme));
36
+ @include token-utils.create-token-values(
37
+ tokens-mat-badge.$prefix,
38
+ tokens-mat-badge.get-color-tokens($theme)
39
+ );
38
40
  }
39
41
 
40
42
  .mat-badge-accent {
41
- @include token-utils.create-token-values(tokens-mat-badge.$prefix,
42
- tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
43
+ @include token-utils.create-token-values(
44
+ tokens-mat-badge.$prefix,
45
+ tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
46
+ );
43
47
  }
44
48
 
45
49
  .mat-badge-warn {
46
- @include token-utils.create-token-values(tokens-mat-badge.$prefix,
47
- tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
50
+ @include token-utils.create-token-values(
51
+ tokens-mat-badge.$prefix,
52
+ tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
53
+ );
48
54
  }
49
55
  }
50
56
  }
@@ -54,11 +60,12 @@
54
60
  @mixin typography($theme) {
55
61
  @if inspection.get-theme-version($theme) == 1 {
56
62
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
57
- }
58
- @else {
63
+ } @else {
59
64
  @include sass-utils.current-selector-or-root() {
60
- @include token-utils.create-token-values(tokens-mat-badge.$prefix,
61
- tokens-mat-badge.get-typography-tokens($theme));
65
+ @include token-utils.create-token-values(
66
+ tokens-mat-badge.$prefix,
67
+ tokens-mat-badge.get-typography-tokens($theme)
68
+ );
62
69
  }
63
70
  }
64
71
  }
@@ -68,8 +75,8 @@
68
75
  @mixin density($theme) {
69
76
  @if inspection.get-theme-version($theme) == 1 {
70
77
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
78
+ } @else {
71
79
  }
72
- @else {}
73
80
  }
74
81
 
75
82
  /// Outputs the CSS variable values for the given tokens.
@@ -77,7 +84,10 @@
77
84
  @mixin overrides($tokens: ()) {
78
85
  @include token-utils.batch-create-token-values(
79
86
  $tokens,
80
- (prefix: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots()),
87
+ (
88
+ namespace: tokens-mat-badge.$prefix,
89
+ tokens: tokens-mat-badge.get-token-slots(),
90
+ )
81
91
  );
82
92
  }
83
93
 
@@ -90,8 +100,7 @@
90
100
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
91
101
  @if inspection.get-theme-version($theme) == 1 {
92
102
  @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
93
- }
94
- @else {
103
+ } @else {
95
104
  @include base($theme);
96
105
  @if inspection.theme-has($theme, color) {
97
106
  @include color($theme);
@@ -108,7 +117,8 @@
108
117
 
109
118
  @mixin _theme-from-tokens($tokens, $options...) {
110
119
  @include validation.selector-defined(
111
- 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
120
+ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
121
+ );
112
122
  $mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
113
123
  @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
114
124
  }
@@ -10,11 +10,12 @@
10
10
  @mixin base($theme) {
11
11
  @if inspection.get-theme-version($theme) == 1 {
12
12
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
13
- }
14
- @else {
13
+ } @else {
15
14
  @include sass-utils.current-selector-or-root() {
16
15
  @include token-utils.create-token-values(
17
- tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens());
16
+ tokens-mat-bottom-sheet.$prefix,
17
+ tokens-mat-bottom-sheet.get-unthemable-tokens()
18
+ );
18
19
  }
19
20
  }
20
21
  }
@@ -22,11 +23,12 @@
22
23
  @mixin color($theme) {
23
24
  @if inspection.get-theme-version($theme) == 1 {
24
25
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
25
- }
26
- @else {
26
+ } @else {
27
27
  @include sass-utils.current-selector-or-root() {
28
- @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
29
- tokens-mat-bottom-sheet.get-color-tokens($theme));
28
+ @include token-utils.create-token-values(
29
+ tokens-mat-bottom-sheet.$prefix,
30
+ tokens-mat-bottom-sheet.get-color-tokens($theme)
31
+ );
30
32
  }
31
33
  }
32
34
  }
@@ -34,11 +36,12 @@
34
36
  @mixin typography($theme) {
35
37
  @if inspection.get-theme-version($theme) == 1 {
36
38
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
37
- }
38
- @else {
39
+ } @else {
39
40
  @include sass-utils.current-selector-or-root() {
40
- @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
41
- tokens-mat-bottom-sheet.get-typography-tokens($theme));
41
+ @include token-utils.create-token-values(
42
+ tokens-mat-bottom-sheet.$prefix,
43
+ tokens-mat-bottom-sheet.get-typography-tokens($theme)
44
+ );
42
45
  }
43
46
  }
44
47
  }
@@ -46,14 +49,17 @@
46
49
  @mixin density($theme) {
47
50
  @if inspection.get-theme-version($theme) == 1 {
48
51
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
52
+ } @else {
49
53
  }
50
- @else {}
51
54
  }
52
55
 
53
56
  @mixin overrides($tokens: ()) {
54
57
  @include token-utils.batch-create-token-values(
55
58
  $tokens,
56
- (prefix: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots()),
59
+ (
60
+ namespace: tokens-mat-bottom-sheet.$prefix,
61
+ tokens: tokens-mat-bottom-sheet.get-token-slots(),
62
+ )
57
63
  );
58
64
  }
59
65
 
@@ -61,8 +67,7 @@
61
67
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
62
68
  @if inspection.get-theme-version($theme) == 1 {
63
69
  @include _theme-from-tokens(inspection.get-theme-tokens($theme));
64
- }
65
- @else {
70
+ } @else {
66
71
  @include base($theme);
67
72
  @if inspection.theme-has($theme, color) {
68
73
  @include color($theme);
@@ -79,9 +84,12 @@
79
84
 
80
85
  @mixin _theme-from-tokens($tokens) {
81
86
  @include validation.selector-defined(
82
- 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
87
+ 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
88
+ );
83
89
  @if ($tokens != ()) {
84
90
  @include token-utils.create-token-values(
85
- tokens-mat-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix));
91
+ tokens-mat-bottom-sheet.$prefix,
92
+ map.get($tokens, tokens-mat-bottom-sheet.$prefix)
93
+ );
86
94
  }
87
95
  }