@m3e/theme 1.0.0-rc.3 → 1.0.0-rc.4
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.
- package/README.md +4 -4
- package/dist/custom-elements.json +30 -19
- package/dist/index.js +596 -39
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +153 -25
- package/dist/index.min.js.map +1 -1
- package/dist/src/ThemeElement.d.ts +3 -3
- package/dist/src/ThemeElement.d.ts.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
|
|
|
29
29
|
}
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
## 🚀
|
|
32
|
+
## 🚀 Native Module Support
|
|
33
33
|
|
|
34
34
|
This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
|
|
35
35
|
|
|
@@ -62,7 +62,7 @@ The following example adds a top-level `m3e-theme` directly beneath a document's
|
|
|
62
62
|
|
|
63
63
|
```html
|
|
64
64
|
<body>
|
|
65
|
-
<m3e-theme color="#
|
|
65
|
+
<m3e-theme color="#6750A4" scheme="auto" motion="expressive" strong-focus>
|
|
66
66
|
<!-- App content here -->
|
|
67
67
|
</m3e-theme>
|
|
68
68
|
</body>
|
|
@@ -74,8 +74,8 @@ The following example adds a top-level `m3e-theme` directly beneath a document's
|
|
|
74
74
|
|
|
75
75
|
| Attribute | Type | Default | Description |
|
|
76
76
|
| -------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------- |
|
|
77
|
-
| `color` | `string` | `"#
|
|
78
|
-
| `variant` | `"monochrome" \| "neutral" \| "tonal-spot" \| "vibrant" \| "expressive" \| "fidelity" \| "rainbow" \| "fruit-salad" \| "content"` | `"
|
|
77
|
+
| `color` | `string` | `"#6750A4"` | The hex color from which to derive dynamic color palettes. |
|
|
78
|
+
| `variant` | `"monochrome" \| "neutral" \| "tonal-spot" \| "vibrant" \| "expressive" \| "fidelity" \| "rainbow" \| "fruit-salad" \| "content"` | `"content"` | The color variant of the theme. |
|
|
79
79
|
| `scheme` | `"auto" \| "light" \| "dark"` | `"auto"` | The color scheme of the theme. |
|
|
80
80
|
| `contrast` | `"standard" \| "medium" \| "high"` | `"standard"` | The contrast level of the theme. |
|
|
81
81
|
| `strong-focus` | `boolean` | `false` | Whether to enable strong focus indicators. |
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
"type": {
|
|
128
128
|
"text": "string"
|
|
129
129
|
},
|
|
130
|
-
"default": "\"#
|
|
130
|
+
"default": "\"#6750A4\"",
|
|
131
131
|
"description": "The hex color from which to derive dynamic color palettes.",
|
|
132
132
|
"attribute": "color"
|
|
133
133
|
},
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
"type": {
|
|
138
138
|
"text": "ThemeVariant"
|
|
139
139
|
},
|
|
140
|
-
"default": "\"
|
|
140
|
+
"default": "\"content\"",
|
|
141
141
|
"description": "The color variant of the theme.",
|
|
142
142
|
"attribute": "variant"
|
|
143
143
|
},
|
|
@@ -202,21 +202,29 @@
|
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
204
|
"kind": "method",
|
|
205
|
-
"name": "#
|
|
205
|
+
"name": "#createScheme",
|
|
206
206
|
"privacy": "private",
|
|
207
207
|
"return": {
|
|
208
208
|
"type": {
|
|
209
|
-
"text": "
|
|
209
|
+
"text": "DynamicScheme"
|
|
210
210
|
}
|
|
211
|
-
}
|
|
211
|
+
},
|
|
212
|
+
"parameters": [
|
|
213
|
+
{
|
|
214
|
+
"name": "sourceColor",
|
|
215
|
+
"type": {
|
|
216
|
+
"text": "Hct"
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
]
|
|
212
220
|
},
|
|
213
221
|
{
|
|
214
222
|
"kind": "method",
|
|
215
|
-
"name": "#
|
|
223
|
+
"name": "#apply",
|
|
216
224
|
"privacy": "private",
|
|
217
225
|
"return": {
|
|
218
226
|
"type": {
|
|
219
|
-
"text": "
|
|
227
|
+
"text": "void"
|
|
220
228
|
}
|
|
221
229
|
}
|
|
222
230
|
},
|
|
@@ -247,7 +255,7 @@
|
|
|
247
255
|
"type": {
|
|
248
256
|
"text": "string"
|
|
249
257
|
},
|
|
250
|
-
"default": "\"#
|
|
258
|
+
"default": "\"#6750A4\"",
|
|
251
259
|
"fieldName": "color"
|
|
252
260
|
},
|
|
253
261
|
{
|
|
@@ -292,7 +300,7 @@
|
|
|
292
300
|
"type": {
|
|
293
301
|
"text": "ThemeVariant"
|
|
294
302
|
},
|
|
295
|
-
"default": "\"
|
|
303
|
+
"default": "\"content\"",
|
|
296
304
|
"fieldName": "variant"
|
|
297
305
|
},
|
|
298
306
|
{
|
|
@@ -2036,6 +2044,11 @@
|
|
|
2036
2044
|
"kind": "javascript-module",
|
|
2037
2045
|
"path": "../core/src/shared/mixins/Labelled.ts",
|
|
2038
2046
|
"declarations": [
|
|
2047
|
+
{
|
|
2048
|
+
"kind": "variable",
|
|
2049
|
+
"name": "updateLabels",
|
|
2050
|
+
"description": "A symbol through which to update labels to reflect a control's current state."
|
|
2051
|
+
},
|
|
2039
2052
|
{
|
|
2040
2053
|
"kind": "function",
|
|
2041
2054
|
"name": "isLabelledMixin",
|
|
@@ -2085,16 +2098,6 @@
|
|
|
2085
2098
|
},
|
|
2086
2099
|
"description": "The label elements that the element is associated with.",
|
|
2087
2100
|
"readonly": true
|
|
2088
|
-
},
|
|
2089
|
-
{
|
|
2090
|
-
"kind": "method",
|
|
2091
|
-
"name": "[_updateLabels]",
|
|
2092
|
-
"privacy": "private",
|
|
2093
|
-
"return": {
|
|
2094
|
-
"type": {
|
|
2095
|
-
"text": "void"
|
|
2096
|
-
}
|
|
2097
|
-
}
|
|
2098
2101
|
}
|
|
2099
2102
|
],
|
|
2100
2103
|
"parameters": [
|
|
@@ -2109,6 +2112,14 @@
|
|
|
2109
2112
|
}
|
|
2110
2113
|
],
|
|
2111
2114
|
"exports": [
|
|
2115
|
+
{
|
|
2116
|
+
"kind": "js",
|
|
2117
|
+
"name": "updateLabels",
|
|
2118
|
+
"declaration": {
|
|
2119
|
+
"name": "updateLabels",
|
|
2120
|
+
"module": "../core/src/shared/mixins/Labelled.ts"
|
|
2121
|
+
}
|
|
2122
|
+
},
|
|
2112
2123
|
{
|
|
2113
2124
|
"kind": "js",
|
|
2114
2125
|
"name": "isLabelledMixin",
|