@m3e/card 1.0.0-rc.1 → 1.0.0-rc.3

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 (24) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2939 -7
  3. package/dist/html-custom-data.json +46 -1
  4. package/dist/index.js +14 -3
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +57 -57
  7. package/dist/index.min.js.map +1 -1
  8. package/dist/src/CardElement.d.ts +4 -1
  9. package/dist/src/CardElement.d.ts.map +1 -1
  10. package/package.json +3 -3
  11. package/cem.config.mjs +0 -16
  12. package/demo/index.html +0 -126
  13. package/eslint.config.mjs +0 -13
  14. package/rollup.config.js +0 -32
  15. package/src/CardElement.ts +0 -258
  16. package/src/CardOrientation.ts +0 -2
  17. package/src/CardVariant.ts +0 -2
  18. package/src/index.ts +0 -3
  19. package/src/styles/CardStyle.ts +0 -163
  20. package/src/styles/CardToken.ts +0 -12
  21. package/src/styles/CardVariantStyle.ts +0 -99
  22. package/src/styles/CardVariantToken.ts +0 -205
  23. package/src/styles/index.ts +0 -2
  24. package/tsconfig.json +0 -9
package/src/styles/CardVariantStyle.ts DELETED
@@ -1,99 +0,0 @@
1
- import { css, CSSResult, CSSResultGroup, unsafeCSS } from "lit";
2
-
3
- import { CardVariant } from "../CardVariant";
4
-
5
- import { CardVariantToken } from "./CardVariantToken";
6
-
7
- /** @private */
8
- function cardVariantStyle(variant: CardVariant): CSSResult {
9
- return css`
10
- :host([variant="${unsafeCSS(variant)}"]) .base {
11
- background-color: ${CardVariantToken[variant].containerColor ?? unsafeCSS("unset")};
12
- box-shadow: ${CardVariantToken[variant].containerElevation ?? unsafeCSS("unset")};
13
- border-width: ${CardVariantToken[variant].outlineThickness ?? unsafeCSS("unset")};
14
- }
15
- :host([actionable][variant="${unsafeCSS(variant)}"]) .base {
16
- --m3e-state-layer-hover-color: ${CardVariantToken[variant].hover.stateLayerColor};
17
- --m3e-state-layer-hover-opacity: ${CardVariantToken[variant].hover.stateLayerOpacity};
18
- --m3e-state-layer-focus-color: ${CardVariantToken[variant].focus.stateLayerColor};
19
- --m3e-state-layer-focus-opacity: ${CardVariantToken[variant].focus.stateLayerOpacity};
20
- --m3e-ripple-color: ${CardVariantToken[variant].pressed.stateLayerColor};
21
- --m3e-ripple-opacity: ${CardVariantToken[variant].pressed.stateLayerOpacity};
22
- --m3e-elevation-level: ${CardVariantToken[variant].containerElevation ?? unsafeCSS("unset")};
23
- --m3e-elevation-hover-level: ${CardVariantToken[variant].hover.containerElevation ?? unsafeCSS("unset")};
24
- --m3e-elevation-focus-level: ${CardVariantToken[variant].focus.containerElevation ?? unsafeCSS("unset")};
25
- --m3e-elevation-pressed-level: ${CardVariantToken[variant].pressed.containerElevation ?? unsafeCSS("unset")};
26
- }
27
- :host([variant="${unsafeCSS(variant)}"]) .base {
28
- border-color: ${CardVariantToken[variant].outlineColor ?? unsafeCSS("unset")};
29
- }
30
- :host([actionable][variant="${unsafeCSS(variant)}"]:focus .base) {
31
- border-color: ${CardVariantToken[variant].focus.outlineColor ?? unsafeCSS("unset")};
32
- }
33
- :host([actionable][variant="${unsafeCSS(variant)}"]:hover .base) {
34
- border-color: ${CardVariantToken[variant].hover.outlineColor ?? unsafeCSS("unset")};
35
- }
36
- :host([actionable][variant="${unsafeCSS(variant)}"]) .base.pressed {
37
- border-color: ${CardVariantToken[variant].pressed.outlineColor ?? unsafeCSS("unset")};
38
- }
39
- :host([variant="${unsafeCSS(variant)}"]) .base {
40
- color: ${CardVariantToken[variant].textColor ?? unsafeCSS("unset")};
41
- }
42
- :host([actionable][variant="${unsafeCSS(variant)}"]:focus) .base {
43
- color: ${CardVariantToken[variant].focus.textColor ?? unsafeCSS("unset")};
44
- }
45
- :host([actionable][variant="${unsafeCSS(variant)}"]:hover) .base {
46
- color: ${CardVariantToken[variant].hover.textColor ?? unsafeCSS("unset")};
47
- }
48
- :host([actionable][variant="${unsafeCSS(variant)}"]) .base.pressed {
49
- color: ${CardVariantToken[variant].pressed.textColor ?? unsafeCSS("unset")};
50
- }
51
- :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) .base,
52
- :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) .base {
53
- --m3e-elevation-level: ${CardVariantToken[variant].disabled.containerElevation ?? unsafeCSS("unset")};
54
- --m3e-elevation-color: color-mix(
55
- in srgb,
56
- ${CardVariantToken[variant].disabled.containerElevationColor}
57
- ${CardVariantToken[variant].disabled.containerElevationOpacity},
58
- transparent
59
- );
60
- color: color-mix(
61
- in srgb,
62
- ${CardVariantToken[variant].disabled.textColor} ${CardVariantToken[variant].disabled.textOpacity},
63
- transparent
64
- );
65
- background-color: ${CardVariantToken[variant].disabled.containerColor &&
66
- CardVariantToken[variant].disabled.containerOpacity
67
- ? unsafeCSS(`color-mix(
68
- in srgb,
69
- ${CardVariantToken[variant].disabled.containerColor} ${CardVariantToken[variant].disabled.containerOpacity},
70
- transparent
71
- )`)
72
- : unsafeCSS("unset")};
73
- border-color: ${CardVariantToken[variant].disabled.outlineColor &&
74
- CardVariantToken[variant].disabled.outlineOpacity
75
- ? unsafeCSS(`color-mix(
76
- in srgb,
77
- ${CardVariantToken[variant].disabled.outlineColor} ${CardVariantToken[variant].disabled.outlineOpacity},
78
- transparent
79
- )`)
80
- : unsafeCSS("unset")};
81
- }
82
- :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) ::slotted(img),
83
- :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) ::slotted(img),
84
- :host([actionable][variant="${unsafeCSS(variant)}"]:disabled) ::slotted(video),
85
- :host([actionable][variant="${unsafeCSS(variant)}"][disabled-interactive]) ::slotted(video) {
86
- opacity: ${CardVariantToken[variant].disabled.imageOpacity};
87
- }
88
- `;
89
- }
90
-
91
- /**
92
- * Appearance variant styles for `M3eCardElement`.
93
- * @internal
94
- */
95
- export const CardVariantStyle: CSSResultGroup = [
96
- cardVariantStyle("filled"),
97
- cardVariantStyle("elevated"),
98
- cardVariantStyle("outlined"),
99
- ];
package/src/styles/CardVariantToken.ts DELETED
@@ -1,205 +0,0 @@
1
- import { CSSResult, unsafeCSS } from "lit";
2
-
3
- import { DesignToken } from "@m3e/core";
4
-
5
- import { CardVariant } from "../CardVariant";
6
-
7
- /** @private */
8
- type _CardVariantToken = {
9
- textColor: CSSResult;
10
- containerColor?: CSSResult;
11
- containerElevation: CSSResult;
12
- outlineColor?: CSSResult;
13
- outlineThickness?: CSSResult;
14
- disabled: {
15
- textColor: CSSResult;
16
- textOpacity: CSSResult;
17
- imageOpacity: CSSResult;
18
- containerColor?: CSSResult;
19
- containerOpacity?: CSSResult;
20
- containerElevation: CSSResult;
21
- containerElevationColor: CSSResult;
22
- containerElevationOpacity: CSSResult;
23
- outlineColor?: CSSResult;
24
- outlineOpacity?: CSSResult;
25
- };
26
- hover: {
27
- textColor: CSSResult;
28
- stateLayerColor: CSSResult;
29
- stateLayerOpacity: CSSResult;
30
- containerElevation?: CSSResult;
31
- outlineColor?: CSSResult;
32
- };
33
- focus: {
34
- textColor: CSSResult;
35
- stateLayerColor: CSSResult;
36
- stateLayerOpacity: CSSResult;
37
- containerElevation?: CSSResult;
38
- outlineColor?: CSSResult;
39
- };
40
- pressed: {
41
- textColor: CSSResult;
42
- stateLayerColor: CSSResult;
43
- stateLayerOpacity: CSSResult;
44
- containerElevation?: CSSResult;
45
- outlineColor?: CSSResult;
46
- };
47
- };
48
-
49
- /**
50
- * Component design tokens that control the appearance variants of `M3eCardElement`.
51
- * @internal
52
- */
53
- export const CardVariantToken: Record<CardVariant, _CardVariantToken> = {
54
- filled: {
55
- textColor: unsafeCSS(`var(--m3e-filled-card-text-color, ${DesignToken.color.onSurface})`),
56
- containerColor: unsafeCSS(`var(--m3e-filled-card-container-color, ${DesignToken.color.surfaceContainerHighest})`),
57
- containerElevation: unsafeCSS(`var(--m3e-filled-card-container-elevation, ${DesignToken.elevation.level0})`),
58
- disabled: {
59
- textColor: unsafeCSS(`var(--m3e-filled-card-disabled-text-color, ${DesignToken.color.onSurface})`),
60
- textOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-text-opacity, 38%)`),
61
- imageOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-image-opacity, 38%)`),
62
- containerColor: unsafeCSS(`var(--m3e-filled-card-disabled-container-color, ${DesignToken.color.surfaceVariant})`),
63
- containerElevation: unsafeCSS(
64
- `var(--m3e-filled-card-disabled-container-elevation, ${DesignToken.elevation.level0})`
65
- ),
66
- containerElevationColor: unsafeCSS(
67
- `var(--m3e-filled-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
68
- ),
69
- containerElevationOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)`),
70
- containerOpacity: unsafeCSS(`var(--m3e-filled-card-disabled-container-opacity, 38%)`),
71
- },
72
- hover: {
73
- textColor: unsafeCSS(`var(--m3e-filled-card-hover-text-color, ${DesignToken.color.onSurface})`),
74
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
75
- stateLayerOpacity: unsafeCSS(
76
- `var(--m3e-filled-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
77
- ),
78
- containerElevation: unsafeCSS(
79
- `var(--m3e-filled-card-hover-container-elevation, ${DesignToken.elevation.level1})`
80
- ),
81
- },
82
- focus: {
83
- textColor: unsafeCSS(`var(--m3e-filled-card-focus-text-color, ${DesignToken.color.onSurface})`),
84
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
85
- stateLayerOpacity: unsafeCSS(
86
- `var(--m3e-filled-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
87
- ),
88
- containerElevation: unsafeCSS(
89
- `var(--m3e-filled-card-focus-container-elevation, ${DesignToken.elevation.level0})`
90
- ),
91
- },
92
- pressed: {
93
- textColor: unsafeCSS(`var(--m3e-filled-card-pressed-text-color, ${DesignToken.color.onSurface})`),
94
- stateLayerColor: unsafeCSS(`var(--m3e-filled-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
95
- stateLayerOpacity: unsafeCSS(
96
- `var(--m3e-filled-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
97
- ),
98
- containerElevation: unsafeCSS(
99
- `var(--m3e-filled-card-pressed-container-elevation, ${DesignToken.elevation.level0})`
100
- ),
101
- },
102
- },
103
- elevated: {
104
- textColor: unsafeCSS(`var(--m3e-elevated-card-text-color, ${DesignToken.color.onSurface})`),
105
- containerColor: unsafeCSS(`var(--m3e-elevated-card-container-color, ${DesignToken.color.surfaceContainerLow})`),
106
- containerElevation: unsafeCSS(`var(--m3e-elevated-card-container-elevation, ${DesignToken.elevation.level1})`),
107
- disabled: {
108
- textColor: unsafeCSS(`var(--m3e-elevated-card-disabled-text-color, ${DesignToken.color.onSurface})`),
109
- textOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-text-opacity, 38%)`),
110
- imageOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-image-opacity, 38%)`),
111
- containerColor: unsafeCSS(`var(--m3e-elevated-card-disabled-container-color, ${DesignToken.color.surface})`),
112
- containerElevation: unsafeCSS(
113
- `var(--m3e-elevated-card-disabled-container-elevation, ${DesignToken.elevation.level1})`
114
- ),
115
- containerElevationColor: unsafeCSS(
116
- `var(--m3e-elevated-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
117
- ),
118
- containerElevationOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)`),
119
- containerOpacity: unsafeCSS(`var(--m3e-elevated-card-disabled-container-opacity, 38%)`),
120
- },
121
- hover: {
122
- textColor: unsafeCSS(`var(--m3e-elevated-card-hover-text-color, ${DesignToken.color.onSurface})`),
123
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
124
- stateLayerOpacity: unsafeCSS(
125
- `var(--m3e-elevated-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
126
- ),
127
- containerElevation: unsafeCSS(
128
- `var(--m3e-elevated-card-hover-container-elevation, ${DesignToken.elevation.level2})`
129
- ),
130
- },
131
- focus: {
132
- textColor: unsafeCSS(`var(--m3e-elevated-card-focus-text-color, ${DesignToken.color.onSurface})`),
133
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
134
- stateLayerOpacity: unsafeCSS(
135
- `var(--m3e-elevated-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
136
- ),
137
- containerElevation: unsafeCSS(
138
- `var(--m3e-elevated-card-focus-container-elevation, ${DesignToken.elevation.level1})`
139
- ),
140
- },
141
- pressed: {
142
- textColor: unsafeCSS(`var(--m3e-elevated-card-pressed-text-color, ${DesignToken.color.onSurface})`),
143
- stateLayerColor: unsafeCSS(`var(--m3e-elevated-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
144
- stateLayerOpacity: unsafeCSS(
145
- `var(--m3e-elevated-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
146
- ),
147
- containerElevation: unsafeCSS(
148
- `var(--m3e-elevated-card-pressed-container-elevation, ${DesignToken.elevation.level1})`
149
- ),
150
- },
151
- },
152
- outlined: {
153
- textColor: unsafeCSS(`var(--m3e-outlined-card-text-color, ${DesignToken.color.onSurface})`),
154
- containerElevation: unsafeCSS(`var(--m3e-outlined-card-container-elevation, ${DesignToken.elevation.level0})`),
155
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-outline-color, ${DesignToken.color.outlineVariant})`),
156
- outlineThickness: unsafeCSS("var(--m3e-outlined-card-outline-thickness, 1px)"),
157
- disabled: {
158
- textColor: unsafeCSS(`var(--m3e-outlined-card-disabled-text-color, ${DesignToken.color.onSurface})`),
159
- textOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-text-opacity, 38%)`),
160
- imageOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-image-opacity, 38%)`),
161
- containerElevation: unsafeCSS(
162
- `var(--m3e-outlined-card-disabled-container-elevation, ${DesignToken.elevation.level0})`
163
- ),
164
- containerElevationColor: unsafeCSS(
165
- `var(--m3e-outlined-card-disabled-container-elevation-color, ${DesignToken.color.onSurface})`
166
- ),
167
- containerElevationOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)`),
168
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-color, ${DesignToken.color.outline})`),
169
- outlineOpacity: unsafeCSS(`var(--m3e-outlined-card-disabled-outline-opacity, 12%)`),
170
- },
171
- hover: {
172
- textColor: unsafeCSS(`var(--m3e-outlined-card-hover-text-color, ${DesignToken.color.onSurface})`),
173
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-hover-state-layer-color, ${DesignToken.color.onSurface})`),
174
- stateLayerOpacity: unsafeCSS(
175
- `var(--m3e-outlined-card-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity})`
176
- ),
177
- containerElevation: unsafeCSS(
178
- `var(--m3e-outlined-card-hover-container-elevation, ${DesignToken.elevation.level1})`
179
- ),
180
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-hover-outline-color, ${DesignToken.color.outlineVariant})`),
181
- },
182
- focus: {
183
- textColor: unsafeCSS(`var(--m3e-outlined-card-focus-text-color, ${DesignToken.color.onSurface})`),
184
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-focus-state-layer-color, ${DesignToken.color.onSurface})`),
185
- stateLayerOpacity: unsafeCSS(
186
- `var(--m3e-outlined-card-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity})`
187
- ),
188
- containerElevation: unsafeCSS(
189
- `var(--m3e-outlined-card-focus-container-elevation, ${DesignToken.elevation.level0})`
190
- ),
191
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-focus-outline-color, ${DesignToken.color.onSurface})`),
192
- },
193
- pressed: {
194
- textColor: unsafeCSS(`var(--m3e-outlined-card-pressed-text-color, ${DesignToken.color.onSurface})`),
195
- stateLayerColor: unsafeCSS(`var(--m3e-outlined-card-pressed-state-layer-color, ${DesignToken.color.onSurface})`),
196
- stateLayerOpacity: unsafeCSS(
197
- `var(--m3e-outlined-card-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity})`
198
- ),
199
- containerElevation: unsafeCSS(
200
- `var(--m3e-outlined-card-pressed-container-elevation, ${DesignToken.elevation.level0})`
201
- ),
202
- outlineColor: unsafeCSS(`var(--m3e-outlined-card-pressed-outline-color, ${DesignToken.color.outlineVariant})`),
203
- },
204
- },
205
- } as const;
package/src/styles/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from "./CardStyle";
2
- export * from "./CardVariantStyle";
package/tsconfig.json DELETED
@@ -1,9 +0,0 @@
1
- {
2
- "extends": "../../tsconfig.json",
3
- "compilerOptions": {
4
- "rootDir": "./src",
5
- "outDir": "./dist/src"
6
- },
7
- "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
8
- "exclude": []
9
- }