@m3e/web 2.5.5 → 2.5.7

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 (211) hide show
  1. package/README.md +1 -1
  2. package/dist/all.js +511 -248
  3. package/dist/all.js.map +1 -1
  4. package/dist/all.min.js +31 -31
  5. package/dist/all.min.js.map +1 -1
  6. package/dist/autocomplete.js +3 -3
  7. package/dist/autocomplete.js.map +1 -1
  8. package/dist/autocomplete.min.js.map +1 -1
  9. package/dist/bottom-sheet.js +5 -5
  10. package/dist/bottom-sheet.js.map +1 -1
  11. package/dist/bottom-sheet.min.js.map +1 -1
  12. package/dist/breadcrumb.js +1 -1
  13. package/dist/breadcrumb.js.map +1 -1
  14. package/dist/breadcrumb.min.js.map +1 -1
  15. package/dist/button.js +7 -8
  16. package/dist/button.js.map +1 -1
  17. package/dist/button.min.js +1 -1
  18. package/dist/button.min.js.map +1 -1
  19. package/dist/calendar.js +1 -1
  20. package/dist/calendar.js.map +1 -1
  21. package/dist/calendar.min.js.map +1 -1
  22. package/dist/card.js +1 -1
  23. package/dist/card.js.map +1 -1
  24. package/dist/card.min.js.map +1 -1
  25. package/dist/checkbox.js +10 -9
  26. package/dist/checkbox.js.map +1 -1
  27. package/dist/checkbox.min.js +1 -1
  28. package/dist/checkbox.min.js.map +1 -1
  29. package/dist/chips.js +17 -16
  30. package/dist/chips.js.map +1 -1
  31. package/dist/chips.min.js +1 -1
  32. package/dist/chips.min.js.map +1 -1
  33. package/dist/core.js +5 -5
  34. package/dist/core.js.map +1 -1
  35. package/dist/core.min.js.map +1 -1
  36. package/dist/css-custom-data.json +314 -314
  37. package/dist/custom-elements.json +5222 -4838
  38. package/dist/datepicker.js +26 -2
  39. package/dist/datepicker.js.map +1 -1
  40. package/dist/datepicker.min.js +1 -1
  41. package/dist/datepicker.min.js.map +1 -1
  42. package/dist/dialog.js +5 -5
  43. package/dist/dialog.js.map +1 -1
  44. package/dist/dialog.min.js.map +1 -1
  45. package/dist/drawer-container.js +1 -1
  46. package/dist/drawer-container.js.map +1 -1
  47. package/dist/drawer-container.min.js.map +1 -1
  48. package/dist/expansion-panel.js +5 -5
  49. package/dist/expansion-panel.js.map +1 -1
  50. package/dist/expansion-panel.min.js.map +1 -1
  51. package/dist/fab-menu.js +1 -1
  52. package/dist/fab-menu.js.map +1 -1
  53. package/dist/fab-menu.min.js.map +1 -1
  54. package/dist/fab.js +1 -1
  55. package/dist/fab.js.map +1 -1
  56. package/dist/fab.min.js.map +1 -1
  57. package/dist/html-custom-data.json +296 -291
  58. package/dist/icon-button.js +7 -8
  59. package/dist/icon-button.js.map +1 -1
  60. package/dist/icon-button.min.js +1 -1
  61. package/dist/icon-button.min.js.map +1 -1
  62. package/dist/list.js +17 -16
  63. package/dist/list.js.map +1 -1
  64. package/dist/list.min.js +1 -1
  65. package/dist/list.min.js.map +1 -1
  66. package/dist/menu.js +3 -3
  67. package/dist/menu.js.map +1 -1
  68. package/dist/menu.min.js.map +1 -1
  69. package/dist/nav-bar.js +12 -9
  70. package/dist/nav-bar.js.map +1 -1
  71. package/dist/nav-bar.min.js +1 -1
  72. package/dist/nav-bar.min.js.map +1 -1
  73. package/dist/nav-menu.js +5 -5
  74. package/dist/nav-menu.js.map +1 -1
  75. package/dist/nav-menu.min.js.map +1 -1
  76. package/dist/nav-rail.js +3 -1
  77. package/dist/nav-rail.js.map +1 -1
  78. package/dist/nav-rail.min.js.map +1 -1
  79. package/dist/paginator.js +1 -1
  80. package/dist/paginator.js.map +1 -1
  81. package/dist/paginator.min.js.map +1 -1
  82. package/dist/radio-group.js +12 -9
  83. package/dist/radio-group.js.map +1 -1
  84. package/dist/radio-group.min.js +1 -1
  85. package/dist/radio-group.min.js.map +1 -1
  86. package/dist/segmented-button.js +12 -11
  87. package/dist/segmented-button.js.map +1 -1
  88. package/dist/segmented-button.min.js +1 -1
  89. package/dist/segmented-button.min.js.map +1 -1
  90. package/dist/select.js +9 -9
  91. package/dist/select.js.map +1 -1
  92. package/dist/select.min.js +1 -1
  93. package/dist/select.min.js.map +1 -1
  94. package/dist/slide-group.js +6 -1
  95. package/dist/slide-group.js.map +1 -1
  96. package/dist/slide-group.min.js +1 -1
  97. package/dist/slide-group.min.js.map +1 -1
  98. package/dist/slider.js +46 -25
  99. package/dist/slider.js.map +1 -1
  100. package/dist/slider.min.js +1 -1
  101. package/dist/slider.min.js.map +1 -1
  102. package/dist/split-pane.js +17 -19
  103. package/dist/split-pane.js.map +1 -1
  104. package/dist/split-pane.min.js +1 -1
  105. package/dist/split-pane.min.js.map +1 -1
  106. package/dist/src/autocomplete/AutocompleteElement.d.ts +3 -3
  107. package/dist/src/autocomplete/AutocompleteQueryEventDetail.d.ts +1 -1
  108. package/dist/src/autocomplete/QueryEventDetail.d.ts +1 -1
  109. package/dist/src/bottom-sheet/BottomSheetElement.d.ts +5 -5
  110. package/dist/src/breadcrumb/BreadcrumbItemElement.d.ts +1 -1
  111. package/dist/src/button/ButtonElement.d.ts +2 -1
  112. package/dist/src/button/ButtonElement.d.ts.map +1 -1
  113. package/dist/src/calendar/CalendarElement.d.ts +1 -1
  114. package/dist/src/card/CardElement.d.ts +1 -1
  115. package/dist/src/checkbox/CheckboxElement.d.ts +5 -4
  116. package/dist/src/checkbox/CheckboxElement.d.ts.map +1 -1
  117. package/dist/src/chips/AssistChipElement.d.ts +1 -1
  118. package/dist/src/chips/FilterChipElement.d.ts +4 -3
  119. package/dist/src/chips/FilterChipElement.d.ts.map +1 -1
  120. package/dist/src/chips/FilterChipSetElement.d.ts +3 -2
  121. package/dist/src/chips/FilterChipSetElement.d.ts.map +1 -1
  122. package/dist/src/chips/InputChipElement.d.ts +2 -2
  123. package/dist/src/chips/InputChipSetElement.d.ts +1 -1
  124. package/dist/src/chips/SuggestionChipElement.d.ts +1 -1
  125. package/dist/src/core/shared/primitives/CollapsibleElement.d.ts +4 -4
  126. package/dist/src/core/shared/primitives/TextHighlightElement.d.ts +1 -1
  127. package/dist/src/datepicker/DatepickerElement.d.ts +6 -0
  128. package/dist/src/datepicker/DatepickerElement.d.ts.map +1 -1
  129. package/dist/src/dialog/DialogElement.d.ts +5 -5
  130. package/dist/src/drawer-container/DrawerContainerElement.d.ts +1 -1
  131. package/dist/src/expansion-panel/ExpansionHeaderElement.d.ts +1 -1
  132. package/dist/src/expansion-panel/ExpansionPanelElement.d.ts +4 -4
  133. package/dist/src/fab/FabElement.d.ts +1 -1
  134. package/dist/src/fab-menu/FabMenuItemElement.d.ts +1 -1
  135. package/dist/src/icon-button/IconButtonElement.d.ts +2 -1
  136. package/dist/src/icon-button/IconButtonElement.d.ts.map +1 -1
  137. package/dist/src/list/ExpandableListItemElement.d.ts +4 -4
  138. package/dist/src/list/ListActionElement.d.ts +1 -1
  139. package/dist/src/list/ListOptionElement.d.ts +4 -3
  140. package/dist/src/list/ListOptionElement.d.ts.map +1 -1
  141. package/dist/src/list/SelectionListElement.d.ts +3 -2
  142. package/dist/src/list/SelectionListElement.d.ts.map +1 -1
  143. package/dist/src/menu/MenuItemCheckboxElement.d.ts +1 -1
  144. package/dist/src/menu/MenuItemElement.d.ts +1 -1
  145. package/dist/src/menu/MenuItemRadioElement.d.ts +1 -1
  146. package/dist/src/nav-bar/NavBarElement.d.ts +3 -1
  147. package/dist/src/nav-bar/NavBarElement.d.ts.map +1 -1
  148. package/dist/src/nav-bar/NavItemElement.d.ts +4 -3
  149. package/dist/src/nav-bar/NavItemElement.d.ts.map +1 -1
  150. package/dist/src/nav-menu/NavMenuItemElement.d.ts +5 -5
  151. package/dist/src/nav-rail/NavRailElement.d.ts +3 -1
  152. package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
  153. package/dist/src/paginator/PageEventDetail.d.ts +1 -1
  154. package/dist/src/paginator/PaginatorElement.d.ts +1 -1
  155. package/dist/src/paginator/PaginatorPageEventDetail.d.ts +1 -1
  156. package/dist/src/paginator/PaginatorPageEventDetail.d.ts.map +1 -1
  157. package/dist/src/radio-group/RadioElement.d.ts +4 -3
  158. package/dist/src/radio-group/RadioElement.d.ts.map +1 -1
  159. package/dist/src/radio-group/RadioGroupElement.d.ts +3 -1
  160. package/dist/src/radio-group/RadioGroupElement.d.ts.map +1 -1
  161. package/dist/src/search/SearchViewQueryEventDetail.d.ts +1 -1
  162. package/dist/src/segmented-button/ButtonSegmentElement.d.ts +4 -3
  163. package/dist/src/segmented-button/ButtonSegmentElement.d.ts.map +1 -1
  164. package/dist/src/segmented-button/SegmentedButtonElement.d.ts +3 -2
  165. package/dist/src/segmented-button/SegmentedButtonElement.d.ts.map +1 -1
  166. package/dist/src/select/SelectElement.d.ts +3 -2
  167. package/dist/src/select/SelectElement.d.ts.map +1 -1
  168. package/dist/src/slide-group/SlideGroupElement.d.ts.map +1 -1
  169. package/dist/src/slider/SliderElement.d.ts +4 -0
  170. package/dist/src/slider/SliderElement.d.ts.map +1 -1
  171. package/dist/src/slider/SliderThumbElement.d.ts +4 -3
  172. package/dist/src/slider/SliderThumbElement.d.ts.map +1 -1
  173. package/dist/src/split-pane/SplitPaneElement.d.ts +3 -2
  174. package/dist/src/split-pane/SplitPaneElement.d.ts.map +1 -1
  175. package/dist/src/stepper/StepElement.d.ts +4 -3
  176. package/dist/src/stepper/StepElement.d.ts.map +1 -1
  177. package/dist/src/stepper/StepperElement.d.ts +5 -1
  178. package/dist/src/stepper/StepperElement.d.ts.map +1 -1
  179. package/dist/src/switch/SwitchElement.d.ts +4 -3
  180. package/dist/src/switch/SwitchElement.d.ts.map +1 -1
  181. package/dist/src/tabs/TabElement.d.ts +4 -3
  182. package/dist/src/tabs/TabElement.d.ts.map +1 -1
  183. package/dist/src/tabs/TabsElement.d.ts +5 -2
  184. package/dist/src/tabs/TabsElement.d.ts.map +1 -1
  185. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  186. package/dist/src/toc/TocItemElement.d.ts +1 -1
  187. package/dist/src/tree/TreeElement.d.ts +1 -1
  188. package/dist/src/tree/TreeItemElement.d.ts +5 -5
  189. package/dist/stepper.js +26 -17
  190. package/dist/stepper.js.map +1 -1
  191. package/dist/stepper.min.js +1 -1
  192. package/dist/stepper.min.js.map +1 -1
  193. package/dist/switch.js +9 -8
  194. package/dist/switch.js.map +1 -1
  195. package/dist/switch.min.js +1 -1
  196. package/dist/switch.min.js.map +1 -1
  197. package/dist/tabs.js +198 -24
  198. package/dist/tabs.js.map +1 -1
  199. package/dist/tabs.min.js +1 -1
  200. package/dist/tabs.min.js.map +1 -1
  201. package/dist/theme.js +34 -13
  202. package/dist/theme.js.map +1 -1
  203. package/dist/theme.min.js +23 -23
  204. package/dist/theme.min.js.map +1 -1
  205. package/dist/toc.js +1 -1
  206. package/dist/toc.js.map +1 -1
  207. package/dist/toc.min.js.map +1 -1
  208. package/dist/tree.js +6 -6
  209. package/dist/tree.js.map +1 -1
  210. package/dist/tree.min.js.map +1 -1
  211. package/package.json +1 -1
package/dist/card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"card.js","sources":["../../src/card/styles/CardToken.ts","../../src/card/styles/CardVariantToken.ts","../../src/card/styles/CardStyle.ts","../../src/card/styles/CardVariantStyle.ts","../../src/card/CardElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardToken = {\r\n padding: unsafeCSS(\"var(--m3e-card-padding, 1rem)\"),\r\n shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken.shape.corner.medium});`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\n/** @private */\r\ntype _CardVariantToken = {\r\n textColor: CSSResult;\r\n containerColor: CSSResult;\r\n containerElevation: CSSResult;\r\n outlineColor?: CSSResult;\r\n outlineThickness?: CSSResult;\r\n disabled: {\r\n textColor: CSSResult;\r\n textOpacity: CSSResult;\r\n imageOpacity: CSSResult;\r\n containerColor?: CSSResult;\r\n containerOpacity?: CSSResult;\r\n containerElevation: CSSResult;\r\n containerElevationColor: CSSResult;\r\n containerElevationOpacity: CSSResult;\r\n outlineColor?: CSSResult;\r\n outlineOpacity?: CSSResult;\r\n };\r\n hover: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n focus: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n pressed: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n};\r\n\r\n/**\r\n * Component design tokens that control the appearance variants of `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantToken: Record<CardVariant, _CardVariantToken> = {\r\n filled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerHighest}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surfaceVariant}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n containerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n },\r\n },\r\n elevated: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerLow}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surface}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n containerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level2}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n },\r\n outlined: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surface}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n outlineThickness: unsafeCSS(\"var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))\"),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken.color.outline}))`,\r\n ),\r\n outlineOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n },\r\n },\r\n} as const;\r\n","import { css, CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardToken } from \"./CardToken\";\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardStyle: CSSResult = css`\r\n :host {\r\n outline: none;\r\n }\r\n :host(:not([inline])) {\r\n display: block;\r\n }\r\n :host(:not([inline])) .base {\r\n display: flex;\r\n }\r\n :host([inline]) {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n :host([inline]) .base {\r\n display: inline-flex;\r\n }\r\n .base {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n box-sizing: border-box;\r\n border-radius: ${CardToken.shape};\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n :host([actionable]) {\r\n user-select: none;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n :host([actionable]:not(:disabled):not([disabled-interactive])) {\r\n cursor: pointer;\r\n }\r\n :host([actionable][disabled-interactive]) {\r\n cursor: not-allowed;\r\n }\r\n :host(:not([actionable])) .focus-ring,\r\n :host(:not([actionable])) .state-layer,\r\n :host(:not([actionable])) .ripple {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]) .base {\r\n border-style: solid;\r\n }\r\n ::slotted([slot=\"content\"]) {\r\n flex: 1 1 auto;\r\n }\r\n ::slotted(img),\r\n ::slotted(video) {\r\n inset: 0;\r\n object-fit: cover;\r\n }\r\n ::slotted(img[slot=\"header\"]),\r\n ::slotted(video[slot=\"header\"]) {\r\n border-radius: ${CardToken.shape};\r\n }\r\n ::slotted([slot=\"actions\"][end]) {\r\n justify-content: flex-end;\r\n }\r\n ::slotted([slot=\"header\"]),\r\n ::slotted([slot=\"actions\"]),\r\n ::slotted([slot=\"footer\"]) {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n }\r\n :host([orientation=\"vertical\"]) .base,\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"header\"]),\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"actions\"]),\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"footer\"]) {\r\n flex-direction: column;\r\n }\r\n :host([orientation=\"horizontal\"]) .base,\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"header\"]),\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"actions\"]),\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"footer\"]) {\r\n flex-direction: row;\r\n }\r\n :host([orientation=\"horizontal\"]) ::slotted(img),\r\n :host([orientation=\"horizontal\"]) ::slotted(video) {\r\n aspect-ratio: 16 / 9;\r\n }\r\n .has-content:not(.has-default) slot[name=\"content\"],\r\n .has-content.has-default slot:not([name]) {\r\n display: inherit;\r\n flex-direction: inherit;\r\n flex: 1 1 auto;\r\n }\r\n .has-header slot[name=\"header\"],\r\n .has-actions slot[name=\"actions\"],\r\n .has-footer slot[name=\"footer\"] {\r\n display: inherit;\r\n flex-direction: inherit;\r\n flex: none;\r\n }\r\n :host([orientation=\"vertical\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n margin-inline: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n margin-block-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"])\r\n .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n slot[name=\"content\"] {\r\n margin-block-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n margin-block: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n margin-inline-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"])\r\n .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n slot[name=\"content\"] {\r\n margin-inline-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n margin-inline-start: ${CardToken.padding};\r\n margin-block: ${CardToken.padding};\r\n }\r\n .has-actions slot[name=\"actions\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-footer slot[name=\"footer\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-footer slot[name=\"footer\"] {\r\n margin-block: ${CardToken.padding};\r\n margin-inline-end: ${CardToken.padding};\r\n }\r\n a {\r\n all: unset;\r\n display: block;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n z-index: 1;\r\n }\r\n @media (forced-colors: active) {\r\n .base {\r\n transition: none;\r\n }\r\n :host([variant]) .base {\r\n border-style: solid;\r\n border-color: CanvasText;\r\n border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant]:disabled) .base,\r\n :host([actionable][variant][disabled-interactive]) .base {\r\n color: GrayText;\r\n border-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base {\r\n transition: none;\r\n }\r\n }\r\n`;\r\n","import { css, CSSResult, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/** @private */\r\nfunction cardVariantStyle(variant: CardVariant): CSSResult {\r\n return css`\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS(\"unset\")};\r\n box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base {\r\n --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor};\r\n --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity};\r\n --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor};\r\n --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity};\r\n --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor};\r\n --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity};\r\n --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus .base) {\r\n border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover .base) {\r\n border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n color: ${CardVariantToken[variant].textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus) .base {\r\n color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover) .base {\r\n color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) .base,\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) .base {\r\n --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-color: color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.containerElevationColor}\r\n ${CardVariantToken[variant].disabled.containerElevationOpacity},\r\n transparent\r\n );\r\n color: color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity},\r\n transparent\r\n );\r\n background-color: ${CardVariantToken[variant].disabled.containerColor &&\r\n CardVariantToken[variant].disabled.containerOpacity\r\n ? unsafeCSS(`color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},\r\n transparent\r\n )`)\r\n : unsafeCSS(\"unset\")};\r\n border-color: ${CardVariantToken[variant].disabled.outlineColor &&\r\n CardVariantToken[variant].disabled.outlineOpacity\r\n ? unsafeCSS(`color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},\r\n transparent\r\n )`)\r\n : unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(img),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(img),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(video),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(video) {\r\n opacity: ${CardVariantToken[variant].disabled.imageOpacity};\r\n }\r\n `;\r\n}\r\n\r\n/**\r\n * Appearance variant styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantStyle: CSSResultGroup = [\r\n cardVariantStyle(\"filled\"),\r\n cardVariantStyle(\"elevated\"),\r\n cardVariantStyle(\"outlined\"),\r\n];\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n renderPseudoLink,\r\n AttachInternals,\r\n Disabled,\r\n DisabledInteractive,\r\n Focusable,\r\n FormSubmitter,\r\n LinkButton,\r\n M3eElevationElement,\r\n M3eFocusRingElement,\r\n M3eRippleElement,\r\n M3eStateLayerElement,\r\n PressedController,\r\n KeyboardClick,\r\n hasAssignedNodes,\r\n customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"./CardVariant\";\r\n\r\nimport { CardStyle, CardVariantStyle } from \"./styles\";\r\nimport { CardOrientation } from \"./CardOrientation\";\r\n\r\n/**\r\n * A content container for text, images (or other media), and actions in the context of a single subject.\r\n *\r\n * @description\r\n * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,\r\n * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the\r\n * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),\r\n * and `elevated` (for depth and motion with shadow elevation).\r\n *\r\n * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be\r\n * presented inline with surrounding content using the `inline` attribute.\r\n *\r\n * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is\r\n * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default\r\n * slot for custom layouts.\r\n *\r\n * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states\r\n * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,\r\n * and a cohesive user experience in accordance with Material Design 3 guidelines.\r\n *\r\n * @example\r\n * The following example illustrates each of the dedicated slots of a card.\r\n * ```html\r\n * <m3e-card>\r\n * <div slot=\"header\">Header section</div>\r\n * <div slot=\"content\">Content section</div>\r\n * <div slot=\"actions\">Actions section</div>\r\n * <div slot=\"footer\">Footer section</div>\r\n * </m3e-card>\r\n * ```\r\n *\r\n * @tag m3e-card\r\n *\r\n * @slot - Renders the content of the card without padding.\r\n * @slot header - Renders the header of the card.\r\n * @slot content - Renders the content of the card with padding.\r\n * @slot actions - Renders the actions of the card.\r\n * @slot footer - Renders the footer of the card.\r\n *\r\n * @attr actionable - Whether the card is \"actionable\" and will respond to use interaction.\r\n * @attr inline - Whether to present the card inline with surrounding content.\r\n * @attr orientation - The orientation of the card.\r\n * @attr variant - The appearance variant of the card.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-card-padding - Internal spacing for all slotted regions\r\n * @cssprop --m3e-card-shape - Corner radius of the card container.\r\n * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.\r\n * @cssprop --m3e-filled-card-container-color - Background color of the filled card container.\r\n * @cssprop --m3e-filled-card-container-elevation - Elevation level for filled card container.\r\n * @cssprop --m3e-filled-card-disabled-text-color - Text color when filled card is disabled.\r\n * @cssprop --m3e-filled-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-filled-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-filled-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-filled-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-filled-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-filled-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-filled-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-elevated-card-text-color - Foreground color for text content in elevated cards.\r\n * @cssprop --m3e-elevated-card-container-color - Background color of the elevated card container.\r\n * @cssprop --m3e-elevated-card-container-elevation - Elevation level for elevated card container.\r\n * @cssprop --m3e-elevated-card-disabled-text-color - Text color when elevated card is disabled.\r\n * @cssprop --m3e-elevated-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-elevated-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-elevated-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-elevated-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-elevated-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.\r\n * @cssprop --m3e-outlined-card-container-color - Background color of the outlined card container.\r\n * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.\r\n * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.\r\n * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.\r\n * @cssprop --m3e-outlined-card-disabled-text-color - Text color when outlined card is disabled.\r\n * @cssprop --m3e-outlined-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-color - Border color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-opacity - Border opacity when disabled.\r\n * @cssprop --m3e-outlined-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-outlined-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-outlined-card-hover-outline-color - Border color on hover.\r\n * @cssprop --m3e-outlined-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-outlined-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-outlined-card-focus-outline-color - Border color on focus.\r\n * @cssprop --m3e-outlined-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.\r\n */\r\n@customElement(\"m3e-card\")\r\nexport class M3eCardElement extends KeyboardClick(\r\n LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(LitElement), true))))),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = [CardVariantStyle, CardStyle];\r\n\r\n /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n new PressedController(this, {\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed) => {\r\n if (this.actionable && !this.disabled && !this.disabledInteractive) {\r\n this._base?.classList.toggle(\"pressed\", pressed);\r\n }\r\n },\r\n });\r\n }\r\n\r\n /**\r\n * Whether to present the card inline with surrounding content.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) inline = false;\r\n\r\n /**\r\n * Whether the card is \"actionable\" and will respond to use interaction.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) actionable = false;\r\n\r\n /**\r\n * The appearance variant of the card.\r\n * @default \"filled\"\r\n */\r\n @property({ reflect: true }) variant: CardVariant = \"filled\";\r\n\r\n /**\r\n * The orientation of the card.\r\n * @default \"vertical\"\r\n */\r\n @property({ reflect: true }) orientation: CardOrientation = \"vertical\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n if (this.hasAttribute(\"actionable\")) {\r\n // If href is specified, the LinkButton mixin changes this to \"link\" if role is \"button\".\r\n this.role = \"button\";\r\n }\r\n\r\n super.connectedCallback();\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this._base?.classList.toggle(\"pressed\", false);\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <m3e-elevation\r\n class=\"elevation\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-elevation>\r\n <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${!this.actionable || this.disabled}\"></m3e-focus-ring>\r\n <m3e-state-layer\r\n class=\"state-layer\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-state-layer>\r\n <m3e-ripple\r\n class=\"ripple\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-ripple>\r\n ${this[renderPseudoLink]()}\r\n <slot name=\"header\" @slotchange=\"${this.#handleHeaderSlotChange}\"></slot>\r\n <slot name=\"content\" @slotchange=\"${this.#handleContentSlotChange}\">\r\n <slot @slotchange=\"${this.#handleDefaultSlotChange}\"></slot>\r\n </slot>\r\n <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n <slot name=\"footer\" @slotchange=\"${this.#handleFooterSlotChange}\"></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleHeaderSlotChange(e: Event): void {\r\n const assignedNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true });\r\n const base = this.shadowRoot?.querySelector(\".base\");\r\n base?.classList.toggle(\"has-header\", assignedNodes.length > 0);\r\n base?.classList.toggle(\r\n \"has-header-media\",\r\n assignedNodes.some((x) => x instanceof HTMLElement && (x.tagName === \"IMG\" || x.tagName === \"VIDEO\")),\r\n );\r\n }\r\n\r\n /** @private */\r\n #handleContentSlotChange(): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-content\", this.querySelector(\"[slot='content']\") !== null);\r\n }\r\n\r\n /** @private */\r\n #handleDefaultSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\r\n \"has-default\",\r\n hasAssignedNodes(e.target as HTMLSlotElement) && this.querySelector(\"[slot='content']\") === null,\r\n );\r\n }\r\n\r\n /** @private */\r\n #handleActionsSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @private */\r\n #handleFooterSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-footer\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n\r\n [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n\r\n if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n this.removeAttribute(\"tabindex\");\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n this.removeAttribute(\"tabindex\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (this.disabled || this.disabledInteractive) {\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-card\": M3eCardElement;\r\n }\r\n}\r\n"],"names":["CardToken","padding","unsafeCSS","shape","DesignToken","corner","medium","CardVariantToken","filled","textColor","color","onSurface","containerColor","surfaceContainerHighest","containerElevation","elevation","level0","disabled","textOpacity","imageOpacity","surfaceVariant","containerElevationColor","containerElevationOpacity","containerOpacity","hover","stateLayerColor","stateLayerOpacity","state","hoverStateLayerOpacity","level1","focus","focusStateLayerOpacity","pressed","pressedStateLayerOpacity","elevated","surfaceContainerLow","surface","level2","outlined","outlineColor","outlineVariant","outlineThickness","outline","outlineOpacity","CardStyle","css","motion","duration","short4","easing","standard","cardVariantStyle","variant","CardVariantStyle","M3eCardElement","KeyboardClick","LinkButton","FormSubmitter","Focusable","DisabledInteractive","Disabled","AttachInternals","LitElement","constructor","_M3eCardElement_clickHandler","set","e","__classPrivateFieldGet","call","inline","actionable","orientation","PressedController","isPressedKey","key","callback","disabledInteractive","_base","classList","toggle","connectedCallback","hasAttribute","role","addEventListener","disconnectedCallback","removeEventListener","render","html","renderPseudoLink","_M3eCardElement_instances","_M3eCardElement_handleHeaderSlotChange","_M3eCardElement_handleContentSlotChange","_M3eCardElement_handleDefaultSlotChange","_M3eCardElement_handleActionsSlotChange","_M3eCardElement_handleFooterSlotChange","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","removeAttribute","update","changedProperties","assignedNodes","target","flatten","base","shadowRoot","querySelector","length","some","HTMLElement","tagName","hasAssignedNodes","preventDefault","stopImmediatePropagation","styles","__decorate","query","prototype","property","type","Boolean","reflect","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"card.js","sources":["../../src/card/styles/CardToken.ts","../../src/card/styles/CardVariantToken.ts","../../src/card/styles/CardStyle.ts","../../src/card/styles/CardVariantStyle.ts","../../src/card/CardElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardToken = {\r\n padding: unsafeCSS(\"var(--m3e-card-padding, 1rem)\"),\r\n shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken.shape.corner.medium});`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\n/** @private */\r\ntype _CardVariantToken = {\r\n textColor: CSSResult;\r\n containerColor: CSSResult;\r\n containerElevation: CSSResult;\r\n outlineColor?: CSSResult;\r\n outlineThickness?: CSSResult;\r\n disabled: {\r\n textColor: CSSResult;\r\n textOpacity: CSSResult;\r\n imageOpacity: CSSResult;\r\n containerColor?: CSSResult;\r\n containerOpacity?: CSSResult;\r\n containerElevation: CSSResult;\r\n containerElevationColor: CSSResult;\r\n containerElevationOpacity: CSSResult;\r\n outlineColor?: CSSResult;\r\n outlineOpacity?: CSSResult;\r\n };\r\n hover: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n focus: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n pressed: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n};\r\n\r\n/**\r\n * Component design tokens that control the appearance variants of `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantToken: Record<CardVariant, _CardVariantToken> = {\r\n filled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerHighest}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surfaceVariant}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n containerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n },\r\n },\r\n elevated: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerLow}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surface}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n containerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level2}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n },\r\n outlined: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surface}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n outlineThickness: unsafeCSS(\"var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))\"),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken.color.outline}))`,\r\n ),\r\n outlineOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n },\r\n },\r\n} as const;\r\n","import { css, CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardToken } from \"./CardToken\";\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardStyle: CSSResult = css`\r\n :host {\r\n outline: none;\r\n }\r\n :host(:not([inline])) {\r\n display: block;\r\n }\r\n :host(:not([inline])) .base {\r\n display: flex;\r\n }\r\n :host([inline]) {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n :host([inline]) .base {\r\n display: inline-flex;\r\n }\r\n .base {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n box-sizing: border-box;\r\n border-radius: ${CardToken.shape};\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n :host([actionable]) {\r\n user-select: none;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n :host([actionable]:not(:disabled):not([disabled-interactive])) {\r\n cursor: pointer;\r\n }\r\n :host([actionable][disabled-interactive]) {\r\n cursor: not-allowed;\r\n }\r\n :host(:not([actionable])) .focus-ring,\r\n :host(:not([actionable])) .state-layer,\r\n :host(:not([actionable])) .ripple {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]) .base {\r\n border-style: solid;\r\n }\r\n ::slotted([slot=\"content\"]) {\r\n flex: 1 1 auto;\r\n }\r\n ::slotted(img),\r\n ::slotted(video) {\r\n inset: 0;\r\n object-fit: cover;\r\n }\r\n ::slotted(img[slot=\"header\"]),\r\n ::slotted(video[slot=\"header\"]) {\r\n border-radius: ${CardToken.shape};\r\n }\r\n ::slotted([slot=\"actions\"][end]) {\r\n justify-content: flex-end;\r\n }\r\n ::slotted([slot=\"header\"]),\r\n ::slotted([slot=\"actions\"]),\r\n ::slotted([slot=\"footer\"]) {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n }\r\n :host([orientation=\"vertical\"]) .base,\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"header\"]),\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"actions\"]),\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"footer\"]) {\r\n flex-direction: column;\r\n }\r\n :host([orientation=\"horizontal\"]) .base,\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"header\"]),\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"actions\"]),\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"footer\"]) {\r\n flex-direction: row;\r\n }\r\n :host([orientation=\"horizontal\"]) ::slotted(img),\r\n :host([orientation=\"horizontal\"]) ::slotted(video) {\r\n aspect-ratio: 16 / 9;\r\n }\r\n .has-content:not(.has-default) slot[name=\"content\"],\r\n .has-content.has-default slot:not([name]) {\r\n display: inherit;\r\n flex-direction: inherit;\r\n flex: 1 1 auto;\r\n }\r\n .has-header slot[name=\"header\"],\r\n .has-actions slot[name=\"actions\"],\r\n .has-footer slot[name=\"footer\"] {\r\n display: inherit;\r\n flex-direction: inherit;\r\n flex: none;\r\n }\r\n :host([orientation=\"vertical\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n margin-inline: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n margin-block-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"])\r\n .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n slot[name=\"content\"] {\r\n margin-block-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n margin-block: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n margin-inline-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"])\r\n .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n slot[name=\"content\"] {\r\n margin-inline-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n margin-inline-start: ${CardToken.padding};\r\n margin-block: ${CardToken.padding};\r\n }\r\n .has-actions slot[name=\"actions\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-footer slot[name=\"footer\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-footer slot[name=\"footer\"] {\r\n margin-block: ${CardToken.padding};\r\n margin-inline-end: ${CardToken.padding};\r\n }\r\n a {\r\n all: unset;\r\n display: block;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n z-index: 1;\r\n }\r\n @media (forced-colors: active) {\r\n .base {\r\n transition: none;\r\n }\r\n :host([variant]) .base {\r\n border-style: solid;\r\n border-color: CanvasText;\r\n border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant]:disabled) .base,\r\n :host([actionable][variant][disabled-interactive]) .base {\r\n color: GrayText;\r\n border-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base {\r\n transition: none;\r\n }\r\n }\r\n`;\r\n","import { css, CSSResult, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/** @private */\r\nfunction cardVariantStyle(variant: CardVariant): CSSResult {\r\n return css`\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS(\"unset\")};\r\n box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base {\r\n --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor};\r\n --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity};\r\n --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor};\r\n --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity};\r\n --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor};\r\n --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity};\r\n --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus .base) {\r\n border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover .base) {\r\n border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n color: ${CardVariantToken[variant].textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus) .base {\r\n color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover) .base {\r\n color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) .base,\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) .base {\r\n --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-color: color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.containerElevationColor}\r\n ${CardVariantToken[variant].disabled.containerElevationOpacity},\r\n transparent\r\n );\r\n color: color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity},\r\n transparent\r\n );\r\n background-color: ${CardVariantToken[variant].disabled.containerColor &&\r\n CardVariantToken[variant].disabled.containerOpacity\r\n ? unsafeCSS(`color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},\r\n transparent\r\n )`)\r\n : unsafeCSS(\"unset\")};\r\n border-color: ${CardVariantToken[variant].disabled.outlineColor &&\r\n CardVariantToken[variant].disabled.outlineOpacity\r\n ? unsafeCSS(`color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},\r\n transparent\r\n )`)\r\n : unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(img),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(img),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(video),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(video) {\r\n opacity: ${CardVariantToken[variant].disabled.imageOpacity};\r\n }\r\n `;\r\n}\r\n\r\n/**\r\n * Appearance variant styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantStyle: CSSResultGroup = [\r\n cardVariantStyle(\"filled\"),\r\n cardVariantStyle(\"elevated\"),\r\n cardVariantStyle(\"outlined\"),\r\n];\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n renderPseudoLink,\r\n AttachInternals,\r\n Disabled,\r\n DisabledInteractive,\r\n Focusable,\r\n FormSubmitter,\r\n LinkButton,\r\n M3eElevationElement,\r\n M3eFocusRingElement,\r\n M3eRippleElement,\r\n M3eStateLayerElement,\r\n PressedController,\r\n KeyboardClick,\r\n hasAssignedNodes,\r\n customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"./CardVariant\";\r\n\r\nimport { CardStyle, CardVariantStyle } from \"./styles\";\r\nimport { CardOrientation } from \"./CardOrientation\";\r\n\r\n/**\r\n * A content container for text, images (or other media), and actions in the context of a single subject.\r\n *\r\n * @description\r\n * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,\r\n * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the\r\n * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),\r\n * and `elevated` (for depth and motion with shadow elevation).\r\n *\r\n * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be\r\n * presented inline with surrounding content using the `inline` attribute.\r\n *\r\n * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is\r\n * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default\r\n * slot for custom layouts.\r\n *\r\n * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states\r\n * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,\r\n * and a cohesive user experience in accordance with Material Design 3 guidelines.\r\n *\r\n * @example\r\n * The following example illustrates each of the dedicated slots of a card.\r\n * ```html\r\n * <m3e-card>\r\n * <div slot=\"header\">Header section</div>\r\n * <div slot=\"content\">Content section</div>\r\n * <div slot=\"actions\">Actions section</div>\r\n * <div slot=\"footer\">Footer section</div>\r\n * </m3e-card>\r\n * ```\r\n *\r\n * @tag m3e-card\r\n *\r\n * @slot - Renders the content of the card without padding.\r\n * @slot header - Renders the header of the card.\r\n * @slot content - Renders the content of the card with padding.\r\n * @slot actions - Renders the actions of the card.\r\n * @slot footer - Renders the footer of the card.\r\n *\r\n * @attr actionable - Whether the card is \"actionable\" and will respond to use interaction.\r\n * @attr inline - Whether to present the card inline with surrounding content.\r\n * @attr orientation - The orientation of the card.\r\n * @attr variant - The appearance variant of the card.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-card-padding - Internal spacing for all slotted regions\r\n * @cssprop --m3e-card-shape - Corner radius of the card container.\r\n * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.\r\n * @cssprop --m3e-filled-card-container-color - Background color of the filled card container.\r\n * @cssprop --m3e-filled-card-container-elevation - Elevation level for filled card container.\r\n * @cssprop --m3e-filled-card-disabled-text-color - Text color when filled card is disabled.\r\n * @cssprop --m3e-filled-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-filled-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-filled-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-filled-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-filled-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-filled-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-filled-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-elevated-card-text-color - Foreground color for text content in elevated cards.\r\n * @cssprop --m3e-elevated-card-container-color - Background color of the elevated card container.\r\n * @cssprop --m3e-elevated-card-container-elevation - Elevation level for elevated card container.\r\n * @cssprop --m3e-elevated-card-disabled-text-color - Text color when elevated card is disabled.\r\n * @cssprop --m3e-elevated-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-elevated-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-elevated-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-elevated-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-elevated-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.\r\n * @cssprop --m3e-outlined-card-container-color - Background color of the outlined card container.\r\n * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.\r\n * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.\r\n * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.\r\n * @cssprop --m3e-outlined-card-disabled-text-color - Text color when outlined card is disabled.\r\n * @cssprop --m3e-outlined-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-color - Border color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-opacity - Border opacity when disabled.\r\n * @cssprop --m3e-outlined-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-outlined-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-outlined-card-hover-outline-color - Border color on hover.\r\n * @cssprop --m3e-outlined-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-outlined-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-outlined-card-focus-outline-color - Border color on focus.\r\n * @cssprop --m3e-outlined-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.\r\n */\r\n@customElement(\"m3e-card\")\r\nexport class M3eCardElement extends KeyboardClick(\r\n LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(LitElement), true))))),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = [CardVariantStyle, CardStyle];\r\n\r\n /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n new PressedController(this, {\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed) => {\r\n if (this.actionable && !this.disabled && !this.disabledInteractive) {\r\n this._base?.classList.toggle(\"pressed\", pressed);\r\n }\r\n },\r\n });\r\n }\r\n\r\n /**\r\n * Whether to present the card inline with surrounding content.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) inline = false;\r\n\r\n /**\r\n * Whether the card is \"actionable\" and will respond to use interaction.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) actionable = false;\r\n\r\n /**\r\n * The appearance variant of the card.\r\n * @default \"filled\"\r\n */\r\n @property({ reflect: true }) variant: CardVariant = \"filled\";\r\n\r\n /**\r\n * The orientation of the card.\r\n * @default \"vertical\"\r\n */\r\n @property({ reflect: true }) orientation: CardOrientation = \"vertical\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n if (this.hasAttribute(\"actionable\")) {\r\n // If href is specified, the LinkButton mixin changes this to \"link\" if role is \"button\".\r\n this.role = \"button\";\r\n }\r\n\r\n super.connectedCallback();\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this._base?.classList.toggle(\"pressed\", false);\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <m3e-elevation\r\n class=\"elevation\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-elevation>\r\n <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${!this.actionable || this.disabled}\"></m3e-focus-ring>\r\n <m3e-state-layer\r\n class=\"state-layer\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-state-layer>\r\n <m3e-ripple\r\n class=\"ripple\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-ripple>\r\n ${this[renderPseudoLink]()}\r\n <slot name=\"header\" @slotchange=\"${this.#handleHeaderSlotChange}\"></slot>\r\n <slot name=\"content\" @slotchange=\"${this.#handleContentSlotChange}\">\r\n <slot @slotchange=\"${this.#handleDefaultSlotChange}\"></slot>\r\n </slot>\r\n <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n <slot name=\"footer\" @slotchange=\"${this.#handleFooterSlotChange}\"></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleHeaderSlotChange(e: Event): void {\r\n const assignedNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true });\r\n const base = this.shadowRoot?.querySelector(\".base\");\r\n base?.classList.toggle(\"has-header\", assignedNodes.length > 0);\r\n base?.classList.toggle(\r\n \"has-header-media\",\r\n assignedNodes.some((x) => x instanceof HTMLElement && (x.tagName === \"IMG\" || x.tagName === \"VIDEO\")),\r\n );\r\n }\r\n\r\n /** @private */\r\n #handleContentSlotChange(): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-content\", this.querySelector(\"[slot='content']\") !== null);\r\n }\r\n\r\n /** @private */\r\n #handleDefaultSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\r\n \"has-default\",\r\n hasAssignedNodes(e.target as HTMLSlotElement) && this.querySelector(\"[slot='content']\") === null,\r\n );\r\n }\r\n\r\n /** @private */\r\n #handleActionsSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @private */\r\n #handleFooterSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-footer\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n\r\n [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n\r\n if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n this.removeAttribute(\"tabindex\");\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n this.removeAttribute(\"tabindex\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (this.disabled || this.disabledInteractive) {\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-card\": M3eCardElement;\r\n }\r\n}\r\n"],"names":["CardToken","padding","unsafeCSS","shape","DesignToken","corner","medium","CardVariantToken","filled","textColor","color","onSurface","containerColor","surfaceContainerHighest","containerElevation","elevation","level0","disabled","textOpacity","imageOpacity","surfaceVariant","containerElevationColor","containerElevationOpacity","containerOpacity","hover","stateLayerColor","stateLayerOpacity","state","hoverStateLayerOpacity","level1","focus","focusStateLayerOpacity","pressed","pressedStateLayerOpacity","elevated","surfaceContainerLow","surface","level2","outlined","outlineColor","outlineVariant","outlineThickness","outline","outlineOpacity","CardStyle","css","motion","duration","short4","easing","standard","cardVariantStyle","variant","CardVariantStyle","M3eCardElement","KeyboardClick","LinkButton","FormSubmitter","Focusable","DisabledInteractive","Disabled","AttachInternals","LitElement","constructor","_M3eCardElement_clickHandler","set","e","__classPrivateFieldGet","call","inline","actionable","orientation","PressedController","isPressedKey","key","callback","disabledInteractive","_base","classList","toggle","connectedCallback","hasAttribute","role","addEventListener","disconnectedCallback","removeEventListener","render","html","renderPseudoLink","_M3eCardElement_instances","_M3eCardElement_handleHeaderSlotChange","_M3eCardElement_handleContentSlotChange","_M3eCardElement_handleDefaultSlotChange","_M3eCardElement_handleActionsSlotChange","_M3eCardElement_handleFooterSlotChange","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","removeAttribute","update","changedProperties","assignedNodes","target","flatten","base","shadowRoot","querySelector","length","some","HTMLElement","tagName","hasAssignedNodes","preventDefault","stopImmediatePropagation","styles","__decorate","query","prototype","property","type","Boolean","reflect","customElement"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"card.min.js","sources":["../../src/card/styles/CardToken.ts","../../src/card/styles/CardVariantToken.ts","../../src/card/styles/CardStyle.ts","../../src/card/styles/CardVariantStyle.ts","../../src/card/CardElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardToken = {\r\n padding: unsafeCSS(\"var(--m3e-card-padding, 1rem)\"),\r\n shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken.shape.corner.medium});`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\n/** @private */\r\ntype _CardVariantToken = {\r\n textColor: CSSResult;\r\n containerColor: CSSResult;\r\n containerElevation: CSSResult;\r\n outlineColor?: CSSResult;\r\n outlineThickness?: CSSResult;\r\n disabled: {\r\n textColor: CSSResult;\r\n textOpacity: CSSResult;\r\n imageOpacity: CSSResult;\r\n containerColor?: CSSResult;\r\n containerOpacity?: CSSResult;\r\n containerElevation: CSSResult;\r\n containerElevationColor: CSSResult;\r\n containerElevationOpacity: CSSResult;\r\n outlineColor?: CSSResult;\r\n outlineOpacity?: CSSResult;\r\n };\r\n hover: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n focus: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n pressed: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n};\r\n\r\n/**\r\n * Component design tokens that control the appearance variants of `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantToken: Record<CardVariant, _CardVariantToken> = {\r\n filled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerHighest}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surfaceVariant}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n containerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n },\r\n },\r\n elevated: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerLow}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surface}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n containerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level2}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n },\r\n outlined: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surface}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n outlineThickness: unsafeCSS(\"var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))\"),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken.color.outline}))`,\r\n ),\r\n outlineOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n },\r\n },\r\n} as const;\r\n","import { css, CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardToken } from \"./CardToken\";\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardStyle: CSSResult = css`\r\n :host {\r\n outline: none;\r\n }\r\n :host(:not([inline])) {\r\n display: block;\r\n }\r\n :host(:not([inline])) .base {\r\n display: flex;\r\n }\r\n :host([inline]) {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n :host([inline]) .base {\r\n display: inline-flex;\r\n }\r\n .base {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n box-sizing: border-box;\r\n border-radius: ${CardToken.shape};\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n :host([actionable]) {\r\n user-select: none;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n :host([actionable]:not(:disabled):not([disabled-interactive])) {\r\n cursor: pointer;\r\n }\r\n :host([actionable][disabled-interactive]) {\r\n cursor: not-allowed;\r\n }\r\n :host(:not([actionable])) .focus-ring,\r\n :host(:not([actionable])) .state-layer,\r\n :host(:not([actionable])) .ripple {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]) .base {\r\n border-style: solid;\r\n }\r\n ::slotted([slot=\"content\"]) {\r\n flex: 1 1 auto;\r\n }\r\n ::slotted(img),\r\n ::slotted(video) {\r\n inset: 0;\r\n object-fit: cover;\r\n }\r\n ::slotted(img[slot=\"header\"]),\r\n ::slotted(video[slot=\"header\"]) {\r\n border-radius: ${CardToken.shape};\r\n }\r\n ::slotted([slot=\"actions\"][end]) {\r\n justify-content: flex-end;\r\n }\r\n ::slotted([slot=\"header\"]),\r\n ::slotted([slot=\"actions\"]),\r\n ::slotted([slot=\"footer\"]) {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n }\r\n :host([orientation=\"vertical\"]) .base,\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"header\"]),\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"actions\"]),\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"footer\"]) {\r\n flex-direction: column;\r\n }\r\n :host([orientation=\"horizontal\"]) .base,\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"header\"]),\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"actions\"]),\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"footer\"]) {\r\n flex-direction: row;\r\n }\r\n :host([orientation=\"horizontal\"]) ::slotted(img),\r\n :host([orientation=\"horizontal\"]) ::slotted(video) {\r\n aspect-ratio: 16 / 9;\r\n }\r\n .has-content:not(.has-default) slot[name=\"content\"],\r\n .has-content.has-default slot:not([name]) {\r\n display: inherit;\r\n flex-direction: inherit;\r\n flex: 1 1 auto;\r\n }\r\n .has-header slot[name=\"header\"],\r\n .has-actions slot[name=\"actions\"],\r\n .has-footer slot[name=\"footer\"] {\r\n display: inherit;\r\n flex-direction: inherit;\r\n flex: none;\r\n }\r\n :host([orientation=\"vertical\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n margin-inline: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n margin-block-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"])\r\n .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n slot[name=\"content\"] {\r\n margin-block-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n margin-block: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n margin-inline-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"])\r\n .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n slot[name=\"content\"] {\r\n margin-inline-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n margin-inline-start: ${CardToken.padding};\r\n margin-block: ${CardToken.padding};\r\n }\r\n .has-actions slot[name=\"actions\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-footer slot[name=\"footer\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-footer slot[name=\"footer\"] {\r\n margin-block: ${CardToken.padding};\r\n margin-inline-end: ${CardToken.padding};\r\n }\r\n a {\r\n all: unset;\r\n display: block;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n z-index: 1;\r\n }\r\n @media (forced-colors: active) {\r\n .base {\r\n transition: none;\r\n }\r\n :host([variant]) .base {\r\n border-style: solid;\r\n border-color: CanvasText;\r\n border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant]:disabled) .base,\r\n :host([actionable][variant][disabled-interactive]) .base {\r\n color: GrayText;\r\n border-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base {\r\n transition: none;\r\n }\r\n }\r\n`;\r\n","import { css, CSSResult, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/** @private */\r\nfunction cardVariantStyle(variant: CardVariant): CSSResult {\r\n return css`\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS(\"unset\")};\r\n box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base {\r\n --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor};\r\n --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity};\r\n --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor};\r\n --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity};\r\n --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor};\r\n --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity};\r\n --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus .base) {\r\n border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover .base) {\r\n border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n color: ${CardVariantToken[variant].textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus) .base {\r\n color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover) .base {\r\n color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) .base,\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) .base {\r\n --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-color: color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.containerElevationColor}\r\n ${CardVariantToken[variant].disabled.containerElevationOpacity},\r\n transparent\r\n );\r\n color: color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity},\r\n transparent\r\n );\r\n background-color: ${CardVariantToken[variant].disabled.containerColor &&\r\n CardVariantToken[variant].disabled.containerOpacity\r\n ? unsafeCSS(`color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},\r\n transparent\r\n )`)\r\n : unsafeCSS(\"unset\")};\r\n border-color: ${CardVariantToken[variant].disabled.outlineColor &&\r\n CardVariantToken[variant].disabled.outlineOpacity\r\n ? unsafeCSS(`color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},\r\n transparent\r\n )`)\r\n : unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(img),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(img),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(video),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(video) {\r\n opacity: ${CardVariantToken[variant].disabled.imageOpacity};\r\n }\r\n `;\r\n}\r\n\r\n/**\r\n * Appearance variant styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantStyle: CSSResultGroup = [\r\n cardVariantStyle(\"filled\"),\r\n cardVariantStyle(\"elevated\"),\r\n cardVariantStyle(\"outlined\"),\r\n];\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n renderPseudoLink,\r\n AttachInternals,\r\n Disabled,\r\n DisabledInteractive,\r\n Focusable,\r\n FormSubmitter,\r\n LinkButton,\r\n M3eElevationElement,\r\n M3eFocusRingElement,\r\n M3eRippleElement,\r\n M3eStateLayerElement,\r\n PressedController,\r\n KeyboardClick,\r\n hasAssignedNodes,\r\n customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"./CardVariant\";\r\n\r\nimport { CardStyle, CardVariantStyle } from \"./styles\";\r\nimport { CardOrientation } from \"./CardOrientation\";\r\n\r\n/**\r\n * A content container for text, images (or other media), and actions in the context of a single subject.\r\n *\r\n * @description\r\n * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,\r\n * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the\r\n * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),\r\n * and `elevated` (for depth and motion with shadow elevation).\r\n *\r\n * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be\r\n * presented inline with surrounding content using the `inline` attribute.\r\n *\r\n * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is\r\n * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default\r\n * slot for custom layouts.\r\n *\r\n * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states\r\n * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,\r\n * and a cohesive user experience in accordance with Material Design 3 guidelines.\r\n *\r\n * @example\r\n * The following example illustrates each of the dedicated slots of a card.\r\n * ```html\r\n * <m3e-card>\r\n * <div slot=\"header\">Header section</div>\r\n * <div slot=\"content\">Content section</div>\r\n * <div slot=\"actions\">Actions section</div>\r\n * <div slot=\"footer\">Footer section</div>\r\n * </m3e-card>\r\n * ```\r\n *\r\n * @tag m3e-card\r\n *\r\n * @slot - Renders the content of the card without padding.\r\n * @slot header - Renders the header of the card.\r\n * @slot content - Renders the content of the card with padding.\r\n * @slot actions - Renders the actions of the card.\r\n * @slot footer - Renders the footer of the card.\r\n *\r\n * @attr actionable - Whether the card is \"actionable\" and will respond to use interaction.\r\n * @attr inline - Whether to present the card inline with surrounding content.\r\n * @attr orientation - The orientation of the card.\r\n * @attr variant - The appearance variant of the card.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-card-padding - Internal spacing for all slotted regions\r\n * @cssprop --m3e-card-shape - Corner radius of the card container.\r\n * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.\r\n * @cssprop --m3e-filled-card-container-color - Background color of the filled card container.\r\n * @cssprop --m3e-filled-card-container-elevation - Elevation level for filled card container.\r\n * @cssprop --m3e-filled-card-disabled-text-color - Text color when filled card is disabled.\r\n * @cssprop --m3e-filled-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-filled-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-filled-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-filled-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-filled-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-filled-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-filled-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-elevated-card-text-color - Foreground color for text content in elevated cards.\r\n * @cssprop --m3e-elevated-card-container-color - Background color of the elevated card container.\r\n * @cssprop --m3e-elevated-card-container-elevation - Elevation level for elevated card container.\r\n * @cssprop --m3e-elevated-card-disabled-text-color - Text color when elevated card is disabled.\r\n * @cssprop --m3e-elevated-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-elevated-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-elevated-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-elevated-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-elevated-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.\r\n * @cssprop --m3e-outlined-card-container-color - Background color of the outlined card container.\r\n * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.\r\n * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.\r\n * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.\r\n * @cssprop --m3e-outlined-card-disabled-text-color - Text color when outlined card is disabled.\r\n * @cssprop --m3e-outlined-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-color - Border color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-opacity - Border opacity when disabled.\r\n * @cssprop --m3e-outlined-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-outlined-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-outlined-card-hover-outline-color - Border color on hover.\r\n * @cssprop --m3e-outlined-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-outlined-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-outlined-card-focus-outline-color - Border color on focus.\r\n * @cssprop --m3e-outlined-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.\r\n */\r\n@customElement(\"m3e-card\")\r\nexport class M3eCardElement extends KeyboardClick(\r\n LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(LitElement), true))))),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = [CardVariantStyle, CardStyle];\r\n\r\n /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n new PressedController(this, {\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed) => {\r\n if (this.actionable && !this.disabled && !this.disabledInteractive) {\r\n this._base?.classList.toggle(\"pressed\", pressed);\r\n }\r\n },\r\n });\r\n }\r\n\r\n /**\r\n * Whether to present the card inline with surrounding content.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) inline = false;\r\n\r\n /**\r\n * Whether the card is \"actionable\" and will respond to use interaction.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) actionable = false;\r\n\r\n /**\r\n * The appearance variant of the card.\r\n * @default \"filled\"\r\n */\r\n @property({ reflect: true }) variant: CardVariant = \"filled\";\r\n\r\n /**\r\n * The orientation of the card.\r\n * @default \"vertical\"\r\n */\r\n @property({ reflect: true }) orientation: CardOrientation = \"vertical\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n if (this.hasAttribute(\"actionable\")) {\r\n // If href is specified, the LinkButton mixin changes this to \"link\" if role is \"button\".\r\n this.role = \"button\";\r\n }\r\n\r\n super.connectedCallback();\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this._base?.classList.toggle(\"pressed\", false);\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <m3e-elevation\r\n class=\"elevation\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-elevation>\r\n <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${!this.actionable || this.disabled}\"></m3e-focus-ring>\r\n <m3e-state-layer\r\n class=\"state-layer\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-state-layer>\r\n <m3e-ripple\r\n class=\"ripple\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-ripple>\r\n ${this[renderPseudoLink]()}\r\n <slot name=\"header\" @slotchange=\"${this.#handleHeaderSlotChange}\"></slot>\r\n <slot name=\"content\" @slotchange=\"${this.#handleContentSlotChange}\">\r\n <slot @slotchange=\"${this.#handleDefaultSlotChange}\"></slot>\r\n </slot>\r\n <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n <slot name=\"footer\" @slotchange=\"${this.#handleFooterSlotChange}\"></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleHeaderSlotChange(e: Event): void {\r\n const assignedNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true });\r\n const base = this.shadowRoot?.querySelector(\".base\");\r\n base?.classList.toggle(\"has-header\", assignedNodes.length > 0);\r\n base?.classList.toggle(\r\n \"has-header-media\",\r\n assignedNodes.some((x) => x instanceof HTMLElement && (x.tagName === \"IMG\" || x.tagName === \"VIDEO\")),\r\n );\r\n }\r\n\r\n /** @private */\r\n #handleContentSlotChange(): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-content\", this.querySelector(\"[slot='content']\") !== null);\r\n }\r\n\r\n /** @private */\r\n #handleDefaultSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\r\n \"has-default\",\r\n hasAssignedNodes(e.target as HTMLSlotElement) && this.querySelector(\"[slot='content']\") === null,\r\n );\r\n }\r\n\r\n /** @private */\r\n #handleActionsSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @private */\r\n #handleFooterSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-footer\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n\r\n [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n\r\n if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n this.removeAttribute(\"tabindex\");\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n this.removeAttribute(\"tabindex\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (this.disabled || this.disabledInteractive) {\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-card\": M3eCardElement;\r\n }\r\n}\r\n"],"names":["CardToken","unsafeCSS","DesignToken","shape","corner","medium","CardVariantToken","filled","textColor","color","onSurface","containerColor","surfaceContainerHighest","containerElevation","elevation","level0","disabled","textOpacity","imageOpacity","surfaceVariant","containerElevationColor","containerElevationOpacity","containerOpacity","hover","stateLayerColor","stateLayerOpacity","state","hoverStateLayerOpacity","level1","focus","focusStateLayerOpacity","pressed","pressedStateLayerOpacity","elevated","surfaceContainerLow","surface","level2","outlined","outlineColor","outlineVariant","outlineThickness","outline","outlineOpacity","CardStyle","css","motion","duration","short4","easing","standard","cardVariantStyle","variant","CardVariantStyle","M3eCardElement","KeyboardClick","LinkButton","FormSubmitter","Focusable","DisabledInteractive","Disabled","AttachInternals","LitElement","constructor","super","_M3eCardElement_clickHandler","set","this","e","__classPrivateFieldGet","call","inline","actionable","orientation","PressedController","isPressedKey","key","callback","disabledInteractive","_base","classList","toggle","connectedCallback","hasAttribute","role","addEventListener","disconnectedCallback","removeEventListener","render","html","renderPseudoLink","_M3eCardElement_instances","_M3eCardElement_handleHeaderSlotChange","_M3eCardElement_handleContentSlotChange","_M3eCardElement_handleDefaultSlotChange","_M3eCardElement_handleActionsSlotChange","_M3eCardElement_handleFooterSlotChange","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","removeAttribute","update","changedProperties","assignedNodes","target","flatten","base","shadowRoot","querySelector","length","some","HTMLElement","tagName","hasAssignedNodes","preventDefault","stopImmediatePropagation","styles","__decorate","query","prototype","property","type","Boolean","reflect","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"card.min.js","sources":["../../src/card/styles/CardToken.ts","../../src/card/styles/CardVariantToken.ts","../../src/card/styles/CardStyle.ts","../../src/card/styles/CardVariantStyle.ts","../../src/card/CardElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardToken = {\r\n padding: unsafeCSS(\"var(--m3e-card-padding, 1rem)\"),\r\n shape: unsafeCSS(`var(--m3e-card-shape, ${DesignToken.shape.corner.medium});`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\n/** @private */\r\ntype _CardVariantToken = {\r\n textColor: CSSResult;\r\n containerColor: CSSResult;\r\n containerElevation: CSSResult;\r\n outlineColor?: CSSResult;\r\n outlineThickness?: CSSResult;\r\n disabled: {\r\n textColor: CSSResult;\r\n textOpacity: CSSResult;\r\n imageOpacity: CSSResult;\r\n containerColor?: CSSResult;\r\n containerOpacity?: CSSResult;\r\n containerElevation: CSSResult;\r\n containerElevationColor: CSSResult;\r\n containerElevationOpacity: CSSResult;\r\n outlineColor?: CSSResult;\r\n outlineOpacity?: CSSResult;\r\n };\r\n hover: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n focus: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n pressed: {\r\n textColor: CSSResult;\r\n stateLayerColor: CSSResult;\r\n stateLayerOpacity: CSSResult;\r\n containerElevation?: CSSResult;\r\n outlineColor?: CSSResult;\r\n };\r\n};\r\n\r\n/**\r\n * Component design tokens that control the appearance variants of `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantToken: Record<CardVariant, _CardVariantToken> = {\r\n filled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerHighest}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surfaceVariant}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n containerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n },\r\n },\r\n elevated: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surfaceContainerLow}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${DesignToken.color.surface}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n containerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level2}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n },\r\n },\r\n outlined: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${DesignToken.color.surface}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n outlineThickness: unsafeCSS(\"var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))\"),\r\n disabled: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n textOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))`,\r\n ),\r\n imageOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n containerElevationColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n containerElevationOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${DesignToken.color.outline}))`,\r\n ),\r\n outlineOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))`,\r\n ),\r\n },\r\n hover: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${DesignToken.elevation.level1}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n },\r\n focus: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n },\r\n pressed: {\r\n textColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${DesignToken.color.onSurface}))`,\r\n ),\r\n stateLayerOpacity: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity}))`,\r\n ),\r\n containerElevation: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${DesignToken.elevation.level0}))`,\r\n ),\r\n outlineColor: unsafeCSS(\r\n `var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${DesignToken.color.outlineVariant}))`,\r\n ),\r\n },\r\n },\r\n} as const;\r\n","import { css, CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { CardToken } from \"./CardToken\";\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardStyle: CSSResult = css`\r\n :host {\r\n outline: none;\r\n }\r\n :host(:not([inline])) {\r\n display: block;\r\n }\r\n :host(:not([inline])) .base {\r\n display: flex;\r\n }\r\n :host([inline]) {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n :host([inline]) .base {\r\n display: inline-flex;\r\n }\r\n .base {\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n box-sizing: border-box;\r\n border-radius: ${CardToken.shape};\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n :host([actionable]) {\r\n user-select: none;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n :host([actionable]:not(:disabled):not([disabled-interactive])) {\r\n cursor: pointer;\r\n }\r\n :host([actionable][disabled-interactive]) {\r\n cursor: not-allowed;\r\n }\r\n :host(:not([actionable])) .focus-ring,\r\n :host(:not([actionable])) .state-layer,\r\n :host(:not([actionable])) .ripple {\r\n display: none;\r\n }\r\n :host([variant=\"outlined\"]) .base {\r\n border-style: solid;\r\n }\r\n ::slotted([slot=\"content\"]) {\r\n flex: 1 1 auto;\r\n }\r\n ::slotted(img),\r\n ::slotted(video) {\r\n inset: 0;\r\n object-fit: cover;\r\n }\r\n ::slotted(img[slot=\"header\"]),\r\n ::slotted(video[slot=\"header\"]) {\r\n border-radius: ${CardToken.shape};\r\n }\r\n ::slotted([slot=\"actions\"][end]) {\r\n justify-content: flex-end;\r\n }\r\n ::slotted([slot=\"header\"]),\r\n ::slotted([slot=\"actions\"]),\r\n ::slotted([slot=\"footer\"]) {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n }\r\n :host([orientation=\"vertical\"]) .base,\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"header\"]),\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"actions\"]),\r\n :host([orientation=\"horizontal\"]) ::slotted([slot=\"footer\"]) {\r\n flex-direction: column;\r\n }\r\n :host([orientation=\"horizontal\"]) .base,\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"header\"]),\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"actions\"]),\r\n :host([orientation=\"vertical\"]) ::slotted([slot=\"footer\"]) {\r\n flex-direction: row;\r\n }\r\n :host([orientation=\"horizontal\"]) ::slotted(img),\r\n :host([orientation=\"horizontal\"]) ::slotted(video) {\r\n aspect-ratio: 16 / 9;\r\n }\r\n .has-content:not(.has-default) slot[name=\"content\"],\r\n .has-content.has-default slot:not([name]) {\r\n display: inherit;\r\n flex-direction: inherit;\r\n flex: 1 1 auto;\r\n }\r\n .has-header slot[name=\"header\"],\r\n .has-actions slot[name=\"actions\"],\r\n .has-footer slot[name=\"footer\"] {\r\n display: inherit;\r\n flex-direction: inherit;\r\n flex: none;\r\n }\r\n :host([orientation=\"vertical\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n margin-inline: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n margin-block-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"])\r\n .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n slot[name=\"content\"] {\r\n margin-block-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-content:not(.has-default) slot[name=\"content\"] {\r\n margin-block: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-content:not(.has-default):not(.has-header) slot[name=\"content\"] {\r\n margin-inline-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"])\r\n .has-content:not(.has-default):not(.has-actions):not(.has-footer)\r\n slot[name=\"content\"] {\r\n margin-inline-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block-start: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-header:not(.has-header-media) slot[name=\"header\"] {\r\n margin-inline-start: ${CardToken.padding};\r\n margin-block: ${CardToken.padding};\r\n }\r\n .has-actions slot[name=\"actions\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block: ${CardToken.padding};\r\n }\r\n :host([orientation=\"vertical\"]) .has-footer slot[name=\"footer\"] {\r\n margin-inline: ${CardToken.padding};\r\n margin-block-end: ${CardToken.padding};\r\n }\r\n :host([orientation=\"horizontal\"]) .has-footer slot[name=\"footer\"] {\r\n margin-block: ${CardToken.padding};\r\n margin-inline-end: ${CardToken.padding};\r\n }\r\n a {\r\n all: unset;\r\n display: block;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n z-index: 1;\r\n }\r\n @media (forced-colors: active) {\r\n .base {\r\n transition: none;\r\n }\r\n :host([variant]) .base {\r\n border-style: solid;\r\n border-color: CanvasText;\r\n border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant]:disabled) .base,\r\n :host([actionable][variant][disabled-interactive]) .base {\r\n color: GrayText;\r\n border-color: GrayText;\r\n }\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base {\r\n transition: none;\r\n }\r\n }\r\n`;\r\n","import { css, CSSResult, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { CardVariant } from \"../CardVariant\";\r\n\r\nimport { CardVariantToken } from \"./CardVariantToken\";\r\n\r\n/** @private */\r\nfunction cardVariantStyle(variant: CardVariant): CSSResult {\r\n return css`\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS(\"unset\")};\r\n box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base {\r\n --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor};\r\n --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity};\r\n --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor};\r\n --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity};\r\n --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor};\r\n --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity};\r\n --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus .base) {\r\n border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover .base) {\r\n border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([variant=\"${unsafeCSS(variant)}\"]) .base {\r\n color: ${CardVariantToken[variant].textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:focus) .base {\r\n color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:hover) .base {\r\n color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]) .base.pressed {\r\n color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) .base,\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) .base {\r\n --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS(\"unset\")};\r\n --m3e-elevation-color: color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.containerElevationColor}\r\n ${CardVariantToken[variant].disabled.containerElevationOpacity},\r\n transparent\r\n );\r\n color: color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity},\r\n transparent\r\n );\r\n background-color: ${CardVariantToken[variant].disabled.containerColor &&\r\n CardVariantToken[variant].disabled.containerOpacity\r\n ? unsafeCSS(`color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},\r\n transparent\r\n )`)\r\n : unsafeCSS(\"unset\")};\r\n border-color: ${CardVariantToken[variant].disabled.outlineColor &&\r\n CardVariantToken[variant].disabled.outlineOpacity\r\n ? unsafeCSS(`color-mix(\r\n in srgb,\r\n ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},\r\n transparent\r\n )`)\r\n : unsafeCSS(\"unset\")};\r\n }\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(img),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(img),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"]:disabled) ::slotted(video),\r\n :host([actionable][variant=\"${unsafeCSS(variant)}\"][disabled-interactive]) ::slotted(video) {\r\n opacity: ${CardVariantToken[variant].disabled.imageOpacity};\r\n }\r\n `;\r\n}\r\n\r\n/**\r\n * Appearance variant styles for `M3eCardElement`.\r\n * @internal\r\n */\r\nexport const CardVariantStyle: CSSResultGroup = [\r\n cardVariantStyle(\"filled\"),\r\n cardVariantStyle(\"elevated\"),\r\n cardVariantStyle(\"outlined\"),\r\n];\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n renderPseudoLink,\r\n AttachInternals,\r\n Disabled,\r\n DisabledInteractive,\r\n Focusable,\r\n FormSubmitter,\r\n LinkButton,\r\n M3eElevationElement,\r\n M3eFocusRingElement,\r\n M3eRippleElement,\r\n M3eStateLayerElement,\r\n PressedController,\r\n KeyboardClick,\r\n hasAssignedNodes,\r\n customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { CardVariant } from \"./CardVariant\";\r\n\r\nimport { CardStyle, CardVariantStyle } from \"./styles\";\r\nimport { CardOrientation } from \"./CardOrientation\";\r\n\r\n/**\r\n * A content container for text, images (or other media), and actions in the context of a single subject.\r\n *\r\n * @description\r\n * The `m3e-card` component is a flexible, expressive container for presenting a unified subject—text,\r\n * media, and actions—on a visually distinct surface. It supports multiple appearance variants via the\r\n * `variant` attribute: `filled` (default, for solid emphasis), `outlined` (for subtle framing with a border),\r\n * and `elevated` (for depth and motion with shadow elevation).\r\n *\r\n * Cards can be made actionable, responding to user interaction when the `actionable` attribute is set, and can be\r\n * presented inline with surrounding content using the `inline` attribute.\r\n *\r\n * It supports both vertical and horizontal layouts through the `orientation` attribute. Content organization is\r\n * enabled via dedicated slots for `header`, `content`, `actions`, and `footer`, or developers can use the default\r\n * slot for custom layouts.\r\n *\r\n * The component provides dynamic elevation, adaptive shape, and expressive color theming, and responds to interaction states\r\n * (hover, focus, press, disabled) with smooth motion and visual feedback, ensuring clarity, accessibility,\r\n * and a cohesive user experience in accordance with Material Design 3 guidelines.\r\n *\r\n * @example\r\n * The following example illustrates each of the dedicated slots of a card.\r\n * ```html\r\n * <m3e-card>\r\n * <div slot=\"header\">Header section</div>\r\n * <div slot=\"content\">Content section</div>\r\n * <div slot=\"actions\">Actions section</div>\r\n * <div slot=\"footer\">Footer section</div>\r\n * </m3e-card>\r\n * ```\r\n *\r\n * @tag m3e-card\r\n *\r\n * @slot - Renders the content of the card without padding.\r\n * @slot header - Renders the header of the card.\r\n * @slot content - Renders the content of the card with padding.\r\n * @slot actions - Renders the actions of the card.\r\n * @slot footer - Renders the footer of the card.\r\n *\r\n * @attr actionable - Whether the card is \"actionable\" and will respond to use interaction.\r\n * @attr inline - Whether to present the card inline with surrounding content.\r\n * @attr orientation - The orientation of the card.\r\n * @attr variant - The appearance variant of the card.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-card-padding - Internal spacing for all slotted regions\r\n * @cssprop --m3e-card-shape - Corner radius of the card container.\r\n * @cssprop --m3e-filled-card-text-color - Foreground color for text content in filled cards.\r\n * @cssprop --m3e-filled-card-container-color - Background color of the filled card container.\r\n * @cssprop --m3e-filled-card-container-elevation - Elevation level for filled card container.\r\n * @cssprop --m3e-filled-card-disabled-text-color - Text color when filled card is disabled.\r\n * @cssprop --m3e-filled-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-filled-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-filled-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-filled-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-filled-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-filled-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-filled-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-filled-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-filled-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-filled-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-filled-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-elevated-card-text-color - Foreground color for text content in elevated cards.\r\n * @cssprop --m3e-elevated-card-container-color - Background color of the elevated card container.\r\n * @cssprop --m3e-elevated-card-container-elevation - Elevation level for elevated card container.\r\n * @cssprop --m3e-elevated-card-disabled-text-color - Text color when elevated card is disabled.\r\n * @cssprop --m3e-elevated-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-color - Background color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-elevated-card-disabled-container-opacity - Overall container opacity when disabled.\r\n * @cssprop --m3e-elevated-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-elevated-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-elevated-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-elevated-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-elevated-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-elevated-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-elevated-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-elevated-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-text-color - Foreground color for text content in outlined cards.\r\n * @cssprop --m3e-outlined-card-container-color - Background color of the outlined card container.\r\n * @cssprop --m3e-outlined-card-container-elevation - Elevation level for outlined card container.\r\n * @cssprop --m3e-outlined-card-outline-color - Border color for outlined cards.\r\n * @cssprop --m3e-outlined-card-outline-thickness - Border thickness for outlined cards.\r\n * @cssprop --m3e-outlined-card-disabled-text-color - Text color when outlined card is disabled.\r\n * @cssprop --m3e-outlined-card-disabled-text-opacity - Opacity applied to text when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation - Elevation level when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-color - Shadow color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-container-elevation-opacity - Shadow opacity when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-color - Border color when disabled.\r\n * @cssprop --m3e-outlined-card-disabled-outline-opacity - Border opacity when disabled.\r\n * @cssprop --m3e-outlined-card-hover-text-color - Text color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-color - State layer color on hover.\r\n * @cssprop --m3e-outlined-card-hover-state-layer-opacity - State layer opacity on hover.\r\n * @cssprop --m3e-outlined-card-hover-container-elevation - Elevation level on hover.\r\n * @cssprop --m3e-outlined-card-hover-outline-color - Border color on hover.\r\n * @cssprop --m3e-outlined-card-focus-text-color - Text color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-color - State layer color on focus.\r\n * @cssprop --m3e-outlined-card-focus-state-layer-opacity - State layer opacity on focus.\r\n * @cssprop --m3e-outlined-card-focus-container-elevation - Elevation level on focus.\r\n * @cssprop --m3e-outlined-card-focus-outline-color - Border color on focus.\r\n * @cssprop --m3e-outlined-card-pressed-text-color - Text color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-color - State layer color on press.\r\n * @cssprop --m3e-outlined-card-pressed-state-layer-opacity - State layer opacity on press.\r\n * @cssprop --m3e-outlined-card-pressed-container-elevation - Elevation level on press.\r\n * @cssprop --m3e-outlined-card-pressed-outline-color - Border color on press.\r\n */\r\n@customElement(\"m3e-card\")\r\nexport class M3eCardElement extends KeyboardClick(\r\n LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(LitElement), true))))),\r\n) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = [CardVariantStyle, CardStyle];\r\n\r\n /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n new PressedController(this, {\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed) => {\r\n if (this.actionable && !this.disabled && !this.disabledInteractive) {\r\n this._base?.classList.toggle(\"pressed\", pressed);\r\n }\r\n },\r\n });\r\n }\r\n\r\n /**\r\n * Whether to present the card inline with surrounding content.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) inline = false;\r\n\r\n /**\r\n * Whether the card is \"actionable\" and will respond to use interaction.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) actionable = false;\r\n\r\n /**\r\n * The appearance variant of the card.\r\n * @default \"filled\"\r\n */\r\n @property({ reflect: true }) variant: CardVariant = \"filled\";\r\n\r\n /**\r\n * The orientation of the card.\r\n * @default \"vertical\"\r\n */\r\n @property({ reflect: true }) orientation: CardOrientation = \"vertical\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n if (this.hasAttribute(\"actionable\")) {\r\n // If href is specified, the LinkButton mixin changes this to \"link\" if role is \"button\".\r\n this.role = \"button\";\r\n }\r\n\r\n super.connectedCallback();\r\n this.addEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this._base?.classList.toggle(\"pressed\", false);\r\n this.removeEventListener(\"click\", this.#clickHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <m3e-elevation\r\n class=\"elevation\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-elevation>\r\n <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${!this.actionable || this.disabled}\"></m3e-focus-ring>\r\n <m3e-state-layer\r\n class=\"state-layer\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-state-layer>\r\n <m3e-ripple\r\n class=\"ripple\"\r\n ?disabled=\"${!this.actionable || this.disabled || this.disabledInteractive}\"\r\n ></m3e-ripple>\r\n ${this[renderPseudoLink]()}\r\n <slot name=\"header\" @slotchange=\"${this.#handleHeaderSlotChange}\"></slot>\r\n <slot name=\"content\" @slotchange=\"${this.#handleContentSlotChange}\">\r\n <slot @slotchange=\"${this.#handleDefaultSlotChange}\"></slot>\r\n </slot>\r\n <slot name=\"actions\" @slotchange=\"${this.#handleActionsSlotChange}\"></slot>\r\n <slot name=\"footer\" @slotchange=\"${this.#handleFooterSlotChange}\"></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleHeaderSlotChange(e: Event): void {\r\n const assignedNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true });\r\n const base = this.shadowRoot?.querySelector(\".base\");\r\n base?.classList.toggle(\"has-header\", assignedNodes.length > 0);\r\n base?.classList.toggle(\r\n \"has-header-media\",\r\n assignedNodes.some((x) => x instanceof HTMLElement && (x.tagName === \"IMG\" || x.tagName === \"VIDEO\")),\r\n );\r\n }\r\n\r\n /** @private */\r\n #handleContentSlotChange(): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-content\", this.querySelector(\"[slot='content']\") !== null);\r\n }\r\n\r\n /** @private */\r\n #handleDefaultSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\r\n \"has-default\",\r\n hasAssignedNodes(e.target as HTMLSlotElement) && this.querySelector(\"[slot='content']\") === null,\r\n );\r\n }\r\n\r\n /** @private */\r\n #handleActionsSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-actions\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @private */\r\n #handleFooterSlotChange(e: Event): void {\r\n this.shadowRoot\r\n ?.querySelector(\".base\")\r\n ?.classList.toggle(\"has-footer\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n\r\n [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n\r\n if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n this.removeAttribute(\"tabindex\");\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (!this.actionable && this.hasAttribute(\"tabindex\")) {\r\n this.removeAttribute(\"tabindex\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(e: Event): void {\r\n if (this.disabled || this.disabledInteractive) {\r\n e.preventDefault();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-card\": M3eCardElement;\r\n }\r\n}\r\n"],"names":["CardToken","unsafeCSS","DesignToken","shape","corner","medium","CardVariantToken","filled","textColor","color","onSurface","containerColor","surfaceContainerHighest","containerElevation","elevation","level0","disabled","textOpacity","imageOpacity","surfaceVariant","containerElevationColor","containerElevationOpacity","containerOpacity","hover","stateLayerColor","stateLayerOpacity","state","hoverStateLayerOpacity","level1","focus","focusStateLayerOpacity","pressed","pressedStateLayerOpacity","elevated","surfaceContainerLow","surface","level2","outlined","outlineColor","outlineVariant","outlineThickness","outline","outlineOpacity","CardStyle","css","motion","duration","short4","easing","standard","cardVariantStyle","variant","CardVariantStyle","M3eCardElement","KeyboardClick","LinkButton","FormSubmitter","Focusable","DisabledInteractive","Disabled","AttachInternals","LitElement","constructor","super","_M3eCardElement_clickHandler","set","this","e","__classPrivateFieldGet","call","inline","actionable","orientation","PressedController","isPressedKey","key","callback","disabledInteractive","_base","classList","toggle","connectedCallback","hasAttribute","role","addEventListener","disconnectedCallback","removeEventListener","render","html","renderPseudoLink","_M3eCardElement_instances","_M3eCardElement_handleHeaderSlotChange","_M3eCardElement_handleContentSlotChange","_M3eCardElement_handleDefaultSlotChange","_M3eCardElement_handleActionsSlotChange","_M3eCardElement_handleFooterSlotChange","firstUpdated","_changedProperties","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","attach","removeAttribute","update","changedProperties","assignedNodes","target","flatten","base","shadowRoot","querySelector","length","some","HTMLElement","tagName","hasAssignedNodes","preventDefault","stopImmediatePropagation","styles","__decorate","query","prototype","property","type","Boolean","reflect","customElement"],"mappings":"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"}