@m3e/web 2.5.6 → 2.5.8

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 (62) hide show
  1. package/dist/all.js +3844 -911
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +120 -57
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/card.js +2 -2
  6. package/dist/card.js.map +1 -1
  7. package/dist/card.min.js +1 -1
  8. package/dist/card.min.js.map +1 -1
  9. package/dist/content-pane.js +1 -1
  10. package/dist/content-pane.js.map +1 -1
  11. package/dist/content-pane.min.js +1 -1
  12. package/dist/content-pane.min.js.map +1 -1
  13. package/dist/core.js +20 -4
  14. package/dist/core.js.map +1 -1
  15. package/dist/core.min.js +1 -1
  16. package/dist/core.min.js.map +1 -1
  17. package/dist/css-custom-data.json +307 -292
  18. package/dist/custom-elements.json +2749 -2542
  19. package/dist/drawer-container.js +13 -7
  20. package/dist/drawer-container.js.map +1 -1
  21. package/dist/drawer-container.min.js +1 -1
  22. package/dist/drawer-container.min.js.map +1 -1
  23. package/dist/html-custom-data.json +105 -105
  24. package/dist/loading-indicator.js +8 -8
  25. package/dist/loading-indicator.js.map +1 -1
  26. package/dist/loading-indicator.min.js +1 -1
  27. package/dist/loading-indicator.min.js.map +1 -1
  28. package/dist/slide-group.js +6 -1
  29. package/dist/slide-group.js.map +1 -1
  30. package/dist/slide-group.min.js +1 -1
  31. package/dist/slide-group.min.js.map +1 -1
  32. package/dist/snackbar.js +2 -2
  33. package/dist/snackbar.js.map +1 -1
  34. package/dist/snackbar.min.js +1 -1
  35. package/dist/snackbar.min.js.map +1 -1
  36. package/dist/src/card/styles/CardStyle.d.ts.map +1 -1
  37. package/dist/src/content-pane/ContentPaneElement.d.ts.map +1 -1
  38. package/dist/src/core/shared/controllers/ScrollController.d.ts.map +1 -1
  39. package/dist/src/drawer-container/DrawerContainerElement.d.ts.map +1 -1
  40. package/dist/src/drawer-container/DrawerToggleElement.d.ts.map +1 -1
  41. package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts +1 -1
  42. package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts.map +1 -1
  43. package/dist/src/slide-group/SlideGroupElement.d.ts.map +1 -1
  44. package/dist/src/snackbar/SnackbarElement.d.ts.map +1 -1
  45. package/dist/src/tabs/TabsElement.d.ts +2 -1
  46. package/dist/src/tabs/TabsElement.d.ts.map +1 -1
  47. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  48. package/dist/src/toc/TocElement.d.ts +4 -0
  49. package/dist/src/toc/TocElement.d.ts.map +1 -1
  50. package/dist/tabs.js +186 -15
  51. package/dist/tabs.js.map +1 -1
  52. package/dist/tabs.min.js +1 -1
  53. package/dist/tabs.min.js.map +1 -1
  54. package/dist/theme.js +3564 -846
  55. package/dist/theme.js.map +1 -1
  56. package/dist/theme.min.js +94 -31
  57. package/dist/theme.min.js.map +1 -1
  58. package/dist/toc.js +23 -6
  59. package/dist/toc.js.map +1 -1
  60. package/dist/toc.min.js +1 -1
  61. package/dist/toc.min.js.map +1 -1
  62. package/package.json +2 -2
package/dist/card.min.js.map CHANGED
@@ -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 - 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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"}
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 }\r\n :host([actionable]) .base {\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 :host([actionable]) .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 :host([actionable]) .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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"}
package/dist/content-pane.js CHANGED
@@ -62,7 +62,7 @@ _M3eContentPaneElement_updateScrollbarWidth = function _M3eContentPaneElement_up
62
62
  base.style.setProperty("--_scrollbar-width", `${scrollbarWidth}px`);
63
63
  };
64
64
  /** The styles of the element. */
65
- M3eContentPaneElement.styles = css`:host { display: block; } .base { width: 100%; height: 100%; overflow: hidden; border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge}); background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface}); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)}; } .scroll-container { width: inherit; height: inherit; border-radius: inherit; box-sizing: border-box; overflow-y: auto; outline: none; padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}); padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}); padding-inline-end: calc( var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var( --_scrollbar-width, 0px ) ); scrollbar-color: ${DesignToken.scrollbar.color}; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } @media (prefers-reduced-motion) { .base { transition: none; } }`;
65
+ M3eContentPaneElement.styles = css`:host { display: block; } .base { width: 100%; height: 100%; overflow: hidden; border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge}); background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface}); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`)}; } .scroll-container { width: inherit; height: inherit; border-radius: inherit; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; outline: none; padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}); padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}); padding-inline-end: calc( var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var( --_scrollbar-width, 0px ) ); scrollbar-color: ${DesignToken.scrollbar.color}; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } @media (prefers-reduced-motion) { .base { transition: none; } }`;
66
66
  M3eContentPaneElement = __decorate([customElement("m3e-content-pane")], M3eContentPaneElement);
67
67
 
68
68
  export { M3eContentPaneElement };
package/dist/content-pane.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"content-pane.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n * <p>This is some scrollable content.</p>\r\n * <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n }\r\n .base {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n transition: ${unsafeCSS(\r\n `border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n .scroll-container {\r\n width: inherit;\r\n height: inherit;\r\n border-radius: inherit;\r\n box-sizing: border-box;\r\n overflow-y: auto;\r\n outline: none;\r\n padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n padding-inline-end: calc(\r\n var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n --_scrollbar-width,\r\n 0px\r\n )\r\n );\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#updateScrollbarWidth();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#updateScrollbarWidth();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <div class=\"scroll-container\"><slot></slot></div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #updateScrollbarWidth(): void {\r\n const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n if (!base) return;\r\n\r\n const style = getComputedStyle(base);\r\n const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n ? parseFloat(scrollbarThinWidth)\r\n : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-content-pane\": M3eContentPaneElement;\r\n }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","__classPrivateFieldGet","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","style","getComputedStyle","scrollbarThinWidth","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","unsafeCSS","motion","duration","medium2","easing","standard","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAMA,qBAAqB,GAA3B,MAAMA,qBAAsB,SAAQC,mBAAmB,CAACC,UAAU,CAAC,CAAA;AAAnEC,EAAAA,WAAAA,GAAA;;;AAyEP,EAAA;AAhCE;AACSC,EAAAA,mBAAmBA,GAAA;IAC1B,KAAK,CAACA,mBAAmB,EAAE;AAC3BC,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;EACmBC,YAAYA,CAACC,kBAAkC,EAAA;AAChE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtCL,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;AACmBG,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,yEAAA,CAEJ;AACT,EAAA;;;;EAIE,MAAMC,IAAI,GAAG,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAc,OAAO,CAAC;EACjE,IAAI,CAACF,IAAI,EAAE;AAEX,EAAA,MAAMG,KAAK,GAAGC,gBAAgB,CAACJ,IAAI,CAAC;AACpC,EAAA,MAAMK,kBAAkB,GAAGF,KAAK,CAACG,gBAAgB,CAAC,4BAA4B,CAAC;EAC/E,MAAMC,cAAc,GAAGF,kBAAkB,CAACG,QAAQ,CAAC,IAAI,CAAC,GACpDC,UAAU,CAACJ,kBAAkB,CAAC,GAC9BK,iBAAiB,CAAC,CAACL,kBAAkB,IAAIA,kBAAkB,KAAK,MAAM,CAAC;EAE3EL,IAAI,CAACG,KAAK,CAACQ,WAAW,CAAC,oBAAoB,EAAE,CAAA,EAAGJ,cAAc,CAAA,EAAA,CAAI,CAAC;AACrE,CAAC;AAvED;AACgBpB,qBAAA,CAAAyB,MAAM,GAAmBC,GAAG,CAAA,sIAAA,EAQiBC,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,UAAU,CAAA,6DAAA,EAChCH,WAAW,CAACI,KAAK,CAACC,OAAO,CAAA,eAAA,EACvEC,SAAS,CACrB,iBAAiBN,WAAW,CAACO,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIT,WAAW,CAACO,MAAM,CAACG,MAAM,CAACC,QAAQ,EAAE,CAC7F,CAAA,mMAAA,EAS0DX,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,CAAA,mEAAA,EAClCH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,CAAA,uEAAA,EAE7DH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,0DAKpEH,WAAW,CAACa,SAAS,CAACT,KAAK,CAAA,mBAAA,EAC3BJ,WAAW,CAACa,SAAS,CAACC,SAAS,CAAA,mEAAA,CA9BhC;AAFXzC,qBAAqB,GAAA0C,UAAA,CAAA,CADjCC,aAAa,CAAC,kBAAkB,CAAC,CACrB,EAAA3C,qBAAqB,CAyEjC;;;;"}
1
+ {"version":3,"file":"content-pane.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n * <p>This is some scrollable content.</p>\r\n * <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n }\r\n .base {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n transition: ${unsafeCSS(\r\n `border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n .scroll-container {\r\n width: inherit;\r\n height: inherit;\r\n border-radius: inherit;\r\n box-sizing: border-box;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n outline: none;\r\n padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n padding-inline-end: calc(\r\n var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n --_scrollbar-width,\r\n 0px\r\n )\r\n );\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#updateScrollbarWidth();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#updateScrollbarWidth();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <div class=\"scroll-container\"><slot></slot></div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #updateScrollbarWidth(): void {\r\n const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n if (!base) return;\r\n\r\n const style = getComputedStyle(base);\r\n const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n ? parseFloat(scrollbarThinWidth)\r\n : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-content-pane\": M3eContentPaneElement;\r\n }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","__classPrivateFieldGet","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","style","getComputedStyle","scrollbarThinWidth","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","unsafeCSS","motion","duration","medium2","easing","standard","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAMA,qBAAqB,GAA3B,MAAMA,qBAAsB,SAAQC,mBAAmB,CAACC,UAAU,CAAC,CAAA;AAAnEC,EAAAA,WAAAA,GAAA;;;AA0EP,EAAA;AAhCE;AACSC,EAAAA,mBAAmBA,GAAA;IAC1B,KAAK,CAACA,mBAAmB,EAAE;AAC3BC,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;EACmBC,YAAYA,CAACC,kBAAkC,EAAA;AAChE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;AACtCL,IAAAA,sBAAA,CAAA,IAAI,EAAAC,gCAAA,EAAA,GAAA,EAAAC,2CAAA,CAAsB,CAAAC,IAAA,CAA1B,IAAI,CAAwB;AAC9B,EAAA;AAEA;AACmBG,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,yEAAA,CAEJ;AACT,EAAA;;;;EAIE,MAAMC,IAAI,GAAG,IAAI,CAACC,UAAU,EAAEC,aAAa,CAAc,OAAO,CAAC;EACjE,IAAI,CAACF,IAAI,EAAE;AAEX,EAAA,MAAMG,KAAK,GAAGC,gBAAgB,CAACJ,IAAI,CAAC;AACpC,EAAA,MAAMK,kBAAkB,GAAGF,KAAK,CAACG,gBAAgB,CAAC,4BAA4B,CAAC;EAC/E,MAAMC,cAAc,GAAGF,kBAAkB,CAACG,QAAQ,CAAC,IAAI,CAAC,GACpDC,UAAU,CAACJ,kBAAkB,CAAC,GAC9BK,iBAAiB,CAAC,CAACL,kBAAkB,IAAIA,kBAAkB,KAAK,MAAM,CAAC;EAE3EL,IAAI,CAACG,KAAK,CAACQ,WAAW,CAAC,oBAAoB,EAAE,CAAA,EAAGJ,cAAc,CAAA,EAAA,CAAI,CAAC;AACrE,CAAC;AAxED;AACgBpB,qBAAA,CAAAyB,MAAM,GAAmBC,GAAG,CAAA,sIAAA,EAQiBC,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,UAAU,CAAA,6DAAA,EAChCH,WAAW,CAACI,KAAK,CAACC,OAAO,CAAA,eAAA,EACvEC,SAAS,CACrB,iBAAiBN,WAAW,CAACO,MAAM,CAACC,QAAQ,CAACC,OAAO,CAAA,CAAA,EAAIT,WAAW,CAACO,MAAM,CAACG,MAAM,CAACC,QAAQ,EAAE,CAC7F,CAAA,uNAAA,EAU0DX,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,CAAA,mEAAA,EAClCH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,CAAA,uEAAA,EAE7DH,WAAW,CAACC,KAAK,CAACC,MAAM,CAACU,KAAK,CAACT,UAAU,0DAKpEH,WAAW,CAACa,SAAS,CAACT,KAAK,CAAA,mBAAA,EAC3BJ,WAAW,CAACa,SAAS,CAACC,SAAS,CAAA,mEAAA,CA/BhC;AAFXzC,qBAAqB,GAAA0C,UAAA,CAAA,CADjCC,aAAa,CAAC,kBAAkB,CAAC,CACrB,EAAA3C,qBAAqB,CA0EjC;;;;"}
package/dist/content-pane.min.js CHANGED
@@ -3,5 +3,5 @@
3
3
  * Copyright (c) 2025–2026 matraic
4
4
  * See LICENSE file in the project root for full license text.
5
5
  */
6
- import{__classPrivateFieldGet as e,__decorate as r}from"tslib";import{LitElement as t,html as o,unsafeCSS as a,css as n}from"lit";import{ReconnectedCallback as i,getScrollbarWidth as s,DesignToken as l,customElement as c}from"@m3e/web/core";var d,p;let h=class extends(i(t)){constructor(){super(...arguments),d.add(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,d,"m",p).call(this)}firstUpdated(r){super.firstUpdated(r),e(this,d,"m",p).call(this)}render(){return o`<div class="base"><div class="scroll-container"><slot></slot></div></div>`}};d=new WeakSet,p=function(){const e=this.shadowRoot?.querySelector(".base");if(!e)return;const r=getComputedStyle(e).getPropertyValue("--m3e-scrollbar-thin-width"),t=r.endsWith("px")?parseFloat(r):s(!r||"thin"===r);e.style.setProperty("--_scrollbar-width",`${t}px`)},h.styles=n`:host { display: block; } .base { width: 100%; height: 100%; overflow: hidden; border-radius: var(--m3e-content-pane-container-shape, ${l.shape.corner.extraLarge}); background-color: var(--m3e-content-pane-container-color, ${l.color.surface}); transition: ${a(`border-radius ${l.motion.duration.medium2} ${l.motion.easing.standard}`)}; } .scroll-container { width: inherit; height: inherit; border-radius: inherit; box-sizing: border-box; overflow-y: auto; outline: none; padding-block: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-start: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-end: calc( var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}) - var( --_scrollbar-width, 0px ) ); scrollbar-color: ${l.scrollbar.color}; scrollbar-width: ${l.scrollbar.thinWidth}; } @media (prefers-reduced-motion) { .base { transition: none; } }`,h=r([c("m3e-content-pane")],h);export{h as M3eContentPaneElement};
6
+ import{__classPrivateFieldGet as e,__decorate as r}from"tslib";import{LitElement as t,html as o,unsafeCSS as n,css as a}from"lit";import{ReconnectedCallback as i,getScrollbarWidth as s,DesignToken as l,customElement as d}from"@m3e/web/core";var c,p;let h=class extends(i(t)){constructor(){super(...arguments),c.add(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,c,"m",p).call(this)}firstUpdated(r){super.firstUpdated(r),e(this,c,"m",p).call(this)}render(){return o`<div class="base"><div class="scroll-container"><slot></slot></div></div>`}};c=new WeakSet,p=function(){const e=this.shadowRoot?.querySelector(".base");if(!e)return;const r=getComputedStyle(e).getPropertyValue("--m3e-scrollbar-thin-width"),t=r.endsWith("px")?parseFloat(r):s(!r||"thin"===r);e.style.setProperty("--_scrollbar-width",`${t}px`)},h.styles=a`:host { display: block; } .base { width: 100%; height: 100%; overflow: hidden; border-radius: var(--m3e-content-pane-container-shape, ${l.shape.corner.extraLarge}); background-color: var(--m3e-content-pane-container-color, ${l.color.surface}); transition: ${n(`border-radius ${l.motion.duration.medium2} ${l.motion.easing.standard}`)}; } .scroll-container { width: inherit; height: inherit; border-radius: inherit; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; outline: none; padding-block: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-start: var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}); padding-inline-end: calc( var(--m3e-content-pane-container-padding, ${l.shape.corner.value.extraLarge}) - var( --_scrollbar-width, 0px ) ); scrollbar-color: ${l.scrollbar.color}; scrollbar-width: ${l.scrollbar.thinWidth}; } @media (prefers-reduced-motion) { .base { transition: none; } }`,h=r([d("m3e-content-pane")],h);export{h as M3eContentPaneElement};
7
7
  //# sourceMappingURL=content-pane.min.js.map
package/dist/content-pane.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"content-pane.min.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n * <p>This is some scrollable content.</p>\r\n * <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n }\r\n .base {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n transition: ${unsafeCSS(\r\n `border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n .scroll-container {\r\n width: inherit;\r\n height: inherit;\r\n border-radius: inherit;\r\n box-sizing: border-box;\r\n overflow-y: auto;\r\n outline: none;\r\n padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n padding-inline-end: calc(\r\n var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n --_scrollbar-width,\r\n 0px\r\n )\r\n );\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#updateScrollbarWidth();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#updateScrollbarWidth();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <div class=\"scroll-container\"><slot></slot></div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #updateScrollbarWidth(): void {\r\n const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n if (!base) return;\r\n\r\n const style = getComputedStyle(base);\r\n const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n ? parseFloat(scrollbarThinWidth)\r\n : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-content-pane\": M3eContentPaneElement;\r\n }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","super","__classPrivateFieldGet","this","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","scrollbarThinWidth","getComputedStyle","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","style","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","unsafeCSS","motion","duration","medium2","easing","standard","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;yPA6BO,IAAMA,EAAN,cAAoCC,EAAoBC,IAAxDC,WAAAA,kCAyEP,CA/BWC,mBAAAA,GACPC,MAAMD,sBACNE,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBI,YAAAA,CAAaC,GAC9BP,MAAMM,aAAaC,GACnBN,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBM,MAAAA,GACjB,OAAOC,CAAI,2EAGb,8BAIE,MAAMC,EAAOR,KAAKS,YAAYC,cAA2B,SACzD,IAAKF,EAAM,OAEX,MACMG,EADQC,iBAAiBJ,GACEK,iBAAiB,8BAC5CC,EAAiBH,EAAmBI,SAAS,MAC/CC,WAAWL,GACXM,GAAmBN,GAA6C,SAAvBA,GAE7CH,EAAKU,MAAMC,YAAY,qBAAsB,GAAGL,MAClD,EAtEgBrB,EAAA2B,OAAyBC,CAAG,yIAQiBC,EAAYC,MAAMC,OAAOC,0EACtBH,EAAYI,MAAMC,yBAChEC,EACZ,iBAAiBN,EAAYO,OAAOC,SAASC,WAAWT,EAAYO,OAAOG,OAAOC,iNAUzBX,EAAYC,MAAMC,OAAOU,MAAMT,gFACxBH,EAAYC,MAAMC,OAAOU,MAAMT,oFAEnDH,EAAYC,MAAMC,OAAOU,MAAMT,oEAK1DH,EAAYa,UAAUT,2BACtBJ,EAAYa,UAAUC,+EAhClC3C,EAAqB4C,EAAA,CADjCC,EAAc,qBACF7C"}
1
+ {"version":3,"file":"content-pane.min.js","sources":["../../src/content-pane/ContentPaneElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\n\r\nimport { customElement, DesignToken, getScrollbarWidth, ReconnectedCallback } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A shaped surface for vertically scrollable content.\r\n *\r\n * @description\r\n * The `m3e-content-pane` component renders a shaped surface with padding and vertical\r\n * scrolling for document‑like content.\r\n *\r\n * @example\r\n * The following example illustrates basic usage of the content pane.\r\n * ```html\r\n * <m3e-content-pane>\r\n * <p>This is some scrollable content.</p>\r\n * <p>More content here...</p>\r\n * </m3e-content-pane>\r\n * ```\r\n *\r\n * @tag m3e-content-pane\r\n *\r\n * @slot - Renders the content of the pane.\r\n *\r\n * @cssprop --m3e-content-pane-container-shape - Corner radius applied to the pane’s outer surface.\r\n * @cssprop --m3e-content-pane-container-color - Background color of the pane’s surface.\r\n * @cssprop --m3e-content-pane-container-padding - Internal padding applied to all sides of the scrollable content.\r\n */\r\n@customElement(\"m3e-content-pane\")\r\nexport class M3eContentPaneElement extends ReconnectedCallback(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n }\r\n .base {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n border-radius: var(--m3e-content-pane-container-shape, ${DesignToken.shape.corner.extraLarge});\r\n background-color: var(--m3e-content-pane-container-color, ${DesignToken.color.surface});\r\n transition: ${unsafeCSS(\r\n `border-radius ${DesignToken.motion.duration.medium2} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n .scroll-container {\r\n width: inherit;\r\n height: inherit;\r\n border-radius: inherit;\r\n box-sizing: border-box;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n outline: none;\r\n padding-block: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n padding-inline-start: var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge});\r\n padding-inline-end: calc(\r\n var(--m3e-content-pane-container-padding, ${DesignToken.shape.corner.value.extraLarge}) - var(\r\n --_scrollbar-width,\r\n 0px\r\n )\r\n );\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#updateScrollbarWidth();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#updateScrollbarWidth();\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <div class=\"scroll-container\"><slot></slot></div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #updateScrollbarWidth(): void {\r\n const base = this.shadowRoot?.querySelector<HTMLElement>(\".base\");\r\n if (!base) return;\r\n\r\n const style = getComputedStyle(base);\r\n const scrollbarThinWidth = style.getPropertyValue(\"--m3e-scrollbar-thin-width\");\r\n const scrollbarWidth = scrollbarThinWidth.endsWith(\"px\")\r\n ? parseFloat(scrollbarThinWidth)\r\n : getScrollbarWidth(!scrollbarThinWidth || scrollbarThinWidth === \"thin\");\r\n\r\n base.style.setProperty(\"--_scrollbar-width\", `${scrollbarWidth}px`);\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-content-pane\": M3eContentPaneElement;\r\n }\r\n}\r\n"],"names":["M3eContentPaneElement","ReconnectedCallback","LitElement","constructor","reconnectedCallback","super","__classPrivateFieldGet","this","_M3eContentPaneElement_instances","_M3eContentPaneElement_updateScrollbarWidth","call","firstUpdated","_changedProperties","render","html","base","shadowRoot","querySelector","scrollbarThinWidth","getComputedStyle","getPropertyValue","scrollbarWidth","endsWith","parseFloat","getScrollbarWidth","style","setProperty","styles","css","DesignToken","shape","corner","extraLarge","color","surface","unsafeCSS","motion","duration","medium2","easing","standard","value","scrollbar","thinWidth","__decorate","customElement"],"mappings":";;;;;yPA6BO,IAAMA,EAAN,cAAoCC,EAAoBC,IAAxDC,WAAAA,kCA0EP,CA/BWC,mBAAAA,GACPC,MAAMD,sBACNE,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBI,YAAAA,CAAaC,GAC9BP,MAAMM,aAAaC,GACnBN,EAAAC,KAAIC,EAAA,IAAAC,GAAsBC,KAA1BH,KACF,CAGmBM,MAAAA,GACjB,OAAOC,CAAI,2EAGb,8BAIE,MAAMC,EAAOR,KAAKS,YAAYC,cAA2B,SACzD,IAAKF,EAAM,OAEX,MACMG,EADQC,iBAAiBJ,GACEK,iBAAiB,8BAC5CC,EAAiBH,EAAmBI,SAAS,MAC/CC,WAAWL,GACXM,GAAmBN,GAA6C,SAAvBA,GAE7CH,EAAKU,MAAMC,YAAY,qBAAsB,GAAGL,MAClD,EAvEgBrB,EAAA2B,OAAyBC,CAAG,yIAQiBC,EAAYC,MAAMC,OAAOC,0EACtBH,EAAYI,MAAMC,yBAChEC,EACZ,iBAAiBN,EAAYO,OAAOC,SAASC,WAAWT,EAAYO,OAAOG,OAAOC,qOAWzBX,EAAYC,MAAMC,OAAOU,MAAMT,gFACxBH,EAAYC,MAAMC,OAAOU,MAAMT,oFAEnDH,EAAYC,MAAMC,OAAOU,MAAMT,oEAK1DH,EAAYa,UAAUT,2BACtBJ,EAAYa,UAAUC,+EAjClC3C,EAAqB4C,EAAA,CADjCC,EAAc,qBACF7C"}
package/dist/core.js CHANGED
@@ -1446,7 +1446,7 @@ function debounce(timeout) {
1446
1446
  };
1447
1447
  }
1448
1448
 
1449
- var _ScrollController_instances, _ScrollController_debounce, _ScrollController_callback, _ScrollController_scrollHandler, _ScrollController_scrollContainers, _ScrollController_getScrollContainers, _ScrollController_handleScroll;
1449
+ var _ScrollController_instances, _ScrollController_debounce, _ScrollController_callback, _ScrollController_scrollHandler, _ScrollController_scrollContainers, _ScrollController_getShadowScrollContainer, _ScrollController_isScrollable, _ScrollController_getScrollContainers, _ScrollController_handleScroll;
1450
1450
  /** A `ReactiveController` used to monitor when a scroll event is emitted from a scrollable ancestor. */
1451
1451
  class ScrollController extends MonitorControllerBase {
1452
1452
  /**
@@ -1502,12 +1502,28 @@ class ScrollController extends MonitorControllerBase {
1502
1502
  __classPrivateFieldGet(this, _ScrollController_callback, "f").call(this, target);
1503
1503
  }
1504
1504
  }
1505
- _ScrollController_debounce = new WeakMap(), _ScrollController_callback = new WeakMap(), _ScrollController_scrollHandler = new WeakMap(), _ScrollController_scrollContainers = new WeakMap(), _ScrollController_instances = new WeakSet(), _ScrollController_getScrollContainers = function _ScrollController_getScrollContainers(element) {
1505
+ _ScrollController_debounce = new WeakMap(), _ScrollController_callback = new WeakMap(), _ScrollController_scrollHandler = new WeakMap(), _ScrollController_scrollContainers = new WeakMap(), _ScrollController_instances = new WeakSet(), _ScrollController_getShadowScrollContainer = function _ScrollController_getShadowScrollContainer(element) {
1506
+ const root = element.shadowRoot;
1507
+ if (!root) return null;
1508
+ const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
1509
+ let node = walker.currentNode;
1510
+ while (node) {
1511
+ if (node instanceof Element && __classPrivateFieldGet(this, _ScrollController_instances, "m", _ScrollController_isScrollable).call(this, node)) return node;
1512
+ node = walker.nextNode();
1513
+ }
1514
+ return null;
1515
+ }, _ScrollController_isScrollable = function _ScrollController_isScrollable(element) {
1516
+ const style = getComputedStyle(element);
1517
+ return /(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX);
1518
+ }, _ScrollController_getScrollContainers = function _ScrollController_getScrollContainers(element) {
1506
1519
  const ancestors = new Array();
1520
+ const shadowScrollContainer = __classPrivateFieldGet(this, _ScrollController_instances, "m", _ScrollController_getShadowScrollContainer).call(this, element);
1521
+ if (shadowScrollContainer) {
1522
+ ancestors.push(shadowScrollContainer);
1523
+ }
1507
1524
  let ancestor = element;
1508
1525
  while (ancestor) {
1509
- const style = getComputedStyle(ancestor);
1510
- if (/(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX)) {
1526
+ if (__classPrivateFieldGet(this, _ScrollController_instances, "m", _ScrollController_isScrollable).call(this, ancestor)) {
1511
1527
  ancestors.push(ancestor);
1512
1528
  }
1513
1529
  ancestor = ancestor.parentElement;