@m3e/web 2.0.0 → 2.0.1

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 (147) hide show
  1. package/dist/all.js +1161 -941
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +59 -59
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/bottom-sheet.js +1 -1
  6. package/dist/bottom-sheet.js.map +1 -1
  7. package/dist/bottom-sheet.min.js +1 -1
  8. package/dist/bottom-sheet.min.js.map +1 -1
  9. package/dist/button.js +387 -317
  10. package/dist/button.js.map +1 -1
  11. package/dist/button.min.js +2 -2
  12. package/dist/button.min.js.map +1 -1
  13. package/dist/card.js +73 -73
  14. package/dist/card.js.map +1 -1
  15. package/dist/card.min.js +5 -5
  16. package/dist/card.min.js.map +1 -1
  17. package/dist/checkbox.js +5 -1
  18. package/dist/checkbox.js.map +1 -1
  19. package/dist/checkbox.min.js +1 -1
  20. package/dist/checkbox.min.js.map +1 -1
  21. package/dist/core-a11y.js.map +1 -1
  22. package/dist/core-a11y.min.js.map +1 -1
  23. package/dist/core-bidi.js.map +1 -1
  24. package/dist/core-bidi.min.js.map +1 -1
  25. package/dist/core-layout.js.map +1 -1
  26. package/dist/core-layout.min.js.map +1 -1
  27. package/dist/core-platform.js.map +1 -1
  28. package/dist/core-platform.min.js.map +1 -1
  29. package/dist/core.js +42 -32
  30. package/dist/core.js.map +1 -1
  31. package/dist/core.min.js +2 -2
  32. package/dist/core.min.js.map +1 -1
  33. package/dist/css-custom-data.json +1356 -511
  34. package/dist/custom-elements.json +9890 -9217
  35. package/dist/fab.js +299 -258
  36. package/dist/fab.js.map +1 -1
  37. package/dist/fab.min.js +6 -6
  38. package/dist/fab.min.js.map +1 -1
  39. package/dist/form-field.js +10 -6
  40. package/dist/form-field.js.map +1 -1
  41. package/dist/form-field.min.js +4 -4
  42. package/dist/form-field.min.js.map +1 -1
  43. package/dist/html-custom-data.json +152 -152
  44. package/dist/icon-button.js +288 -232
  45. package/dist/icon-button.js.map +1 -1
  46. package/dist/icon-button.min.js +5 -5
  47. package/dist/icon-button.min.js.map +1 -1
  48. package/dist/list.js +18 -3
  49. package/dist/list.js.map +1 -1
  50. package/dist/list.min.js +8 -8
  51. package/dist/list.min.js.map +1 -1
  52. package/dist/menu.js +23 -12
  53. package/dist/menu.js.map +1 -1
  54. package/dist/menu.min.js +7 -7
  55. package/dist/menu.min.js.map +1 -1
  56. package/dist/nav-bar.js +1 -1
  57. package/dist/nav-bar.js.map +1 -1
  58. package/dist/nav-bar.min.js +1 -1
  59. package/dist/nav-bar.min.js.map +1 -1
  60. package/dist/nav-rail.js +1 -1
  61. package/dist/nav-rail.js.map +1 -1
  62. package/dist/nav-rail.min.js +4 -4
  63. package/dist/nav-rail.min.js.map +1 -1
  64. package/dist/option.js +1 -1
  65. package/dist/option.js.map +1 -1
  66. package/dist/option.min.js +1 -1
  67. package/dist/option.min.js.map +1 -1
  68. package/dist/radio-group.js +4 -0
  69. package/dist/radio-group.js.map +1 -1
  70. package/dist/radio-group.min.js +1 -1
  71. package/dist/radio-group.min.js.map +1 -1
  72. package/dist/slider.js +2 -2
  73. package/dist/slider.js.map +1 -1
  74. package/dist/slider.min.js +3 -3
  75. package/dist/slider.min.js.map +1 -1
  76. package/dist/snackbar.js.map +1 -1
  77. package/dist/snackbar.min.js.map +1 -1
  78. package/dist/split-button.js +1 -0
  79. package/dist/split-button.js.map +1 -1
  80. package/dist/split-button.min.js +1 -1
  81. package/dist/split-button.min.js.map +1 -1
  82. package/dist/src/bottom-sheet/BottomSheetElement.d.ts.map +1 -1
  83. package/dist/src/button/ButtonElement.d.ts +70 -0
  84. package/dist/src/button/ButtonElement.d.ts.map +1 -1
  85. package/dist/src/button/styles/ButtonSizeToken.d.ts.map +1 -1
  86. package/dist/src/button/styles/ButtonVariantToken.d.ts.map +1 -1
  87. package/dist/src/card/styles/CardVariantToken.d.ts.map +1 -1
  88. package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
  89. package/dist/src/core/a11y/AriaDescriber.d.ts +3 -1
  90. package/dist/src/core/a11y/AriaDescriber.d.ts.map +1 -1
  91. package/dist/src/core/a11y/InteractivityChecker.d.ts +3 -1
  92. package/dist/src/core/a11y/InteractivityChecker.d.ts.map +1 -1
  93. package/dist/src/core/a11y/LiveAnnouncer.d.ts +3 -1
  94. package/dist/src/core/a11y/LiveAnnouncer.d.ts.map +1 -1
  95. package/dist/src/core/bidi/Directionality.d.ts +3 -1
  96. package/dist/src/core/bidi/Directionality.d.ts.map +1 -1
  97. package/dist/src/core/layout/BreakpointObserver.d.ts +3 -1
  98. package/dist/src/core/layout/BreakpointObserver.d.ts.map +1 -1
  99. package/dist/src/core/platform/Platform.d.ts +3 -1
  100. package/dist/src/core/platform/Platform.d.ts.map +1 -1
  101. package/dist/src/core/shared/controllers/PressedController.d.ts.map +1 -1
  102. package/dist/src/core/shared/primitives/FocusRingElement.d.ts +2 -0
  103. package/dist/src/core/shared/primitives/FocusRingElement.d.ts.map +1 -1
  104. package/dist/src/core/shared/primitives/FocusRingToken.d.ts +4 -0
  105. package/dist/src/core/shared/primitives/FocusRingToken.d.ts.map +1 -1
  106. package/dist/src/core/shared/primitives/ScrollContainerElement.d.ts.map +1 -1
  107. package/dist/src/fab/FabElement.d.ts +41 -0
  108. package/dist/src/fab/FabElement.d.ts.map +1 -1
  109. package/dist/src/fab/styles/FabSizeToken.d.ts.map +1 -1
  110. package/dist/src/fab/styles/FabVariantToken.d.ts.map +1 -1
  111. package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
  112. package/dist/src/icon-button/IconButtonElement.d.ts +56 -0
  113. package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
  114. package/dist/src/icon-button/styles/IconButtonSizeToken.d.ts.map +1 -1
  115. package/dist/src/icon-button/styles/IconButtonVariantToken.d.ts.map +1 -1
  116. package/dist/src/list/ListItemButtonElement.d.ts +1 -0
  117. package/dist/src/list/ListItemButtonElement.d.ts.map +1 -1
  118. package/dist/src/list/ListItemElement.d.ts.map +1 -1
  119. package/dist/src/list/ListOptionElement.d.ts +1 -0
  120. package/dist/src/list/ListOptionElement.d.ts.map +1 -1
  121. package/dist/src/menu/MenuElement.d.ts +2 -0
  122. package/dist/src/menu/MenuElement.d.ts.map +1 -1
  123. package/dist/src/menu/MenuItemElementBase.d.ts +1 -0
  124. package/dist/src/menu/MenuItemElementBase.d.ts.map +1 -1
  125. package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
  126. package/dist/src/option/OptionPanelElement.d.ts.map +1 -1
  127. package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
  128. package/dist/src/slider/SliderThumbElement.d.ts.map +1 -1
  129. package/dist/src/snackbar/Snackbar.d.ts +3 -1
  130. package/dist/src/snackbar/Snackbar.d.ts.map +1 -1
  131. package/dist/src/split-button/SplitButtonElement.d.ts.map +1 -1
  132. package/dist/src/switch/SwitchElement.d.ts.map +1 -1
  133. package/dist/src/tabs/TabElement.d.ts.map +1 -1
  134. package/dist/src/tabs/TabsElement.d.ts.map +1 -1
  135. package/dist/switch.js +5 -1
  136. package/dist/switch.js.map +1 -1
  137. package/dist/switch.min.js +2 -2
  138. package/dist/switch.min.js.map +1 -1
  139. package/dist/tabs.js +2 -2
  140. package/dist/tabs.js.map +1 -1
  141. package/dist/tabs.min.js +3 -3
  142. package/dist/tabs.min.js.map +1 -1
  143. package/dist/tooltip.js +1 -1
  144. package/dist/tooltip.js.map +1 -1
  145. package/dist/tooltip.min.js +1 -1
  146. package/dist/tooltip.min.js.map +1 -1
  147. package/package.json +1 -1
package/dist/card.js CHANGED
@@ -449,106 +449,106 @@ const CardToken = {
449
449
  */
450
450
  const CardVariantToken = {
451
451
  filled: {
452
- textColor: unsafeCSS(`var(--m3e-filled-card-text-color, ${DesignToken.color.onSurface})`),
453
- containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, ${DesignToken.color.surfaceContainerHighest})`),
454
- containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, ${DesignToken.elevation.level0})`),
452
+ textColor: unsafeCSS(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`),
453
+ containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerHighest}))`),
454
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`),
455
455
  disabled: {
456
- textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, ${DesignToken.color.onSurface})`),
457
- textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, 38%)`),
458
- imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, 38%)`),
459
- containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, ${DesignToken.color.surfaceVariant})`),
460
- containerElevation: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation, ${DesignToken.elevation.level0})`),
461
- containerElevationColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`),
462
- containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)`),
463
- containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, 38%)`)
456
+ textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`),
457
+ textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
458
+ imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
459
+ containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surfaceVariant}))`),
460
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
461
+ containerElevationColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`),
462
+ containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
463
+ containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
464
464
  },
465
465
  hover: {
466
- textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, ${DesignToken.color.onSurface})`),
467
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
468
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
469
- containerElevation: unsafeCSS(`var(--m3e-filled-card-hover-container-elevation, ${DesignToken.elevation.level1})`)
466
+ textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`),
467
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`),
468
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
469
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`)
470
470
  },
471
471
  focus: {
472
- textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, ${DesignToken.color.onSurface})`),
473
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
474
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
475
- containerElevation: unsafeCSS(`var(--m3e-filled-card-focus-container-elevation, ${DesignToken.elevation.level0})`)
472
+ textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`),
473
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`),
474
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
475
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`)
476
476
  },
477
477
  pressed: {
478
- textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, ${DesignToken.color.onSurface})`),
479
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
480
- stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
481
- containerElevation: unsafeCSS(`var(--m3e-filled-card-pressed-container-elevation, ${DesignToken.elevation.level0})`)
478
+ textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`),
479
+ stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`),
480
+ stateLayerOpacity: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
481
+ containerElevation: unsafeCSS(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`)
482
482
  }
483
483
  },
484
484
  elevated: {
485
- textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, ${DesignToken.color.onSurface})`),
486
- containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, ${DesignToken.color.surfaceContainerLow})`),
487
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, ${DesignToken.elevation.level1})`),
485
+ textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`),
486
+ containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerLow}))`),
487
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level1}))`),
488
488
  disabled: {
489
- textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, ${DesignToken.color.onSurface})`),
490
- textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, 38%)`),
491
- imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, 38%)`),
492
- containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, ${DesignToken.color.surface})`),
493
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation, ${DesignToken.elevation.level1})`),
494
- containerElevationColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`),
495
- containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)`),
496
- containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, 38%)`)
489
+ textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`),
490
+ textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
491
+ imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
492
+ containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surface}))`),
493
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level1}))`),
494
+ containerElevationColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`),
495
+ containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
496
+ containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`)
497
497
  },
498
498
  hover: {
499
- textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, ${DesignToken.color.onSurface})`),
500
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
501
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
502
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-hover-container-elevation, ${DesignToken.elevation.level2})`)
499
+ textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`),
500
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`),
501
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
502
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level2}))`)
503
503
  },
504
504
  focus: {
505
- textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, ${DesignToken.color.onSurface})`),
506
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
507
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
508
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-focus-container-elevation, ${DesignToken.elevation.level1})`)
505
+ textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`),
506
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`),
507
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
508
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level1}))`)
509
509
  },
510
510
  pressed: {
511
- textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, ${DesignToken.color.onSurface})`),
512
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
513
- stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
514
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-pressed-container-elevation, ${DesignToken.elevation.level1})`)
511
+ textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`),
512
+ stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`),
513
+ stateLayerOpacity: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
514
+ containerElevation: unsafeCSS(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level1}))`)
515
515
  }
516
516
  },
517
517
  outlined: {
518
- textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, ${DesignToken.color.onSurface})`),
519
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, ${DesignToken.elevation.level0})`),
520
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, ${DesignToken.color.outlineVariant})`),
521
- outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, 1px)"),
518
+ textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`),
519
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`),
520
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken.color.outlineVariant}))`),
521
+ outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),
522
522
  disabled: {
523
- textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, ${DesignToken.color.onSurface})`),
524
- textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, 38%)`),
525
- imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, 38%)`),
526
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation, ${DesignToken.elevation.level0})`),
527
- containerElevationColor: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`),
528
- containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)`),
529
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, ${DesignToken.color.outline})`),
530
- outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, 12%)`)
523
+ textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`),
524
+ textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`),
525
+ imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`),
526
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`),
527
+ containerElevationColor: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`),
528
+ containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`),
529
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken.color.outline}))`),
530
+ outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`)
531
531
  },
532
532
  hover: {
533
- textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, ${DesignToken.color.onSurface})`),
534
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
535
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`),
536
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-hover-container-elevation, ${DesignToken.elevation.level1})`),
537
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, ${DesignToken.color.outlineVariant})`)
533
+ textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`),
534
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`),
535
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`),
536
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`),
537
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken.color.outlineVariant}))`)
538
538
  },
539
539
  focus: {
540
- textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, ${DesignToken.color.onSurface})`),
541
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
542
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`),
543
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-focus-container-elevation, ${DesignToken.elevation.level0})`),
544
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, ${DesignToken.color.onSurface})`)
540
+ textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`),
541
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`),
542
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`),
543
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`),
544
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken.color.onSurface}))`)
545
545
  },
546
546
  pressed: {
547
- textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, ${DesignToken.color.onSurface})`),
548
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
549
- stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`),
550
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-pressed-container-elevation, ${DesignToken.elevation.level0})`),
551
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, ${DesignToken.color.outlineVariant})`)
547
+ textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`),
548
+ stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`),
549
+ stateLayerOpacity: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`),
550
+ containerElevation: unsafeCSS(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`),
551
+ outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken.color.outlineVariant}))`)
552
552
  }
553
553
  }
554
554
  };