@universal-material/web 3.0.6 → 3.0.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.
- package/button/button.styles.d.ts.map +1 -1
- package/button/button.styles.js +2 -0
- package/button/button.styles.js.map +1 -1
- package/button/icon-button.styles.js +3 -3
- package/button/icon-button.styles.js.map +1 -1
- package/card/card.styles.d.ts.map +1 -1
- package/card/card.styles.js +3 -4
- package/card/card.styles.js.map +1 -1
- package/package.json +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6FlB,CAAC"}
|
package/button/button.styles.js
CHANGED
|
@@ -82,6 +82,8 @@ export const styles = css `
|
|
|
82
82
|
|
|
83
83
|
::slotted([slot=icon]) {
|
|
84
84
|
display: inline-block;
|
|
85
|
+
width: var(--u-common-button-icon-size, 1.125rem);
|
|
86
|
+
height: var(--u-common-button-icon-size, 1.125rem);
|
|
85
87
|
margin-inline-end: 8px;
|
|
86
88
|
font-size: var(--u-common-button-icon-size, 1.125rem);
|
|
87
89
|
line-height: var(--u-common-button-icon-size, 1.125rem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n --_common-button-height: var(--u-common-button-height, 2.5rem);\n --_common-button-padding: var(--u-common-button-padding, 24px);\n --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n font-family: var(--u-font-family-base, system-ui);\n height: var(--u-common-button-height, 40px);\n font-size: var(--u-common-button-font-size);\n font-weight: var(--u-common-button-font-weight);\n padding-inline: var(--_common-button-padding);\n box-sizing: border-box;\n }\n\n :host([variant=filled]),\n :host([variant=filled][color=primary]) {\n background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=secondary]) {\n background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=tertiary]) {\n background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=error]) {\n background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=elevated]) {\n background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:hover:not(:focus-within):not(:active)),\n :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n }\n }\n :host([variant=outlined]),\n :host([variant=text]),\n :host([variant=elevated]) {\n color: var(--_color-primary);\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline-color, );\n }\n\n :host([variant=elevated]) {\n --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host([variant=elevated]:hover) {\n --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n }\n }\n :host([has-icon]) {\n padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n }\n\n :host([has-icon][trailing-icon]) {\n padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n }\n\n ::slotted([slot=icon]) {\n display: inline-block;\n width: var(--u-common-button-icon-size, 1.125rem);\n height: var(--u-common-button-icon-size, 1.125rem);\n margin-inline-end: 8px;\n font-size: var(--u-common-button-icon-size, 1.125rem);\n line-height: var(--u-common-button-icon-size, 1.125rem);\n }\n\n :host([trailing-icon]) ::slotted([slot=icon]) {\n margin-inline: 8px 0;\n }\n`;\n"]}
|
|
@@ -9,9 +9,9 @@ export const styles = css `
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.icon {
|
|
12
|
-
display: inline-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
15
|
font-size: var(--u-icon-button-icon-size, 1.5rem);
|
|
16
16
|
line-height: var(--u-icon-button-icon-size, 1.5rem);
|
|
17
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_surface-container-highest-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n width: var(--u-icon-button-size, 2.5rem);\n height: var(--u-icon-button-size, 2.5rem);\n border-radius: var(--u-icon-button-shape-corner, 9999px);\n font-family: var(--u-font-family-base, system-ui);\n }\n\n .icon {\n display: inline-
|
|
1
|
+
{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_surface-container-highest-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n width: var(--u-icon-button-size, 2.5rem);\n height: var(--u-icon-button-size, 2.5rem);\n border-radius: var(--u-icon-button-shape-corner, 9999px);\n font-family: var(--u-font-family-base, system-ui);\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--u-icon-button-icon-size, 1.5rem);\n line-height: var(--u-icon-button-icon-size, 1.5rem);\n }\n .icon.icon-selected {\n display: none;\n }\n\n :host([selected]) .icon:not(.icon-selected) {\n display: none;\n }\n :host([selected]) .icon.icon-selected {\n display: inline-block;\n }\n\n :host([variant=filled]) {\n background-color: var(--u-filled-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-total-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([selected][variant=filled]),\n :host([variant=filled]:not([has-selection-icon])) {\n background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([selected][variant=tonal]),\n :host([variant=tonal]:not([has-selection-icon])) {\n background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=standard]),\n :host([variant=outlined]) {\n color: var(--u-color-on-surface-variant, rgb(73, 69, 79));\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n }\n\n :host([selected][variant=outlined]) {\n border: none;\n background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-inverse-on-surface, rgb(245, 239, 247)));\n }\n\n :host([selected][variant=standard]) {\n color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyBlB,CAAC"}
|
package/card/card.styles.js
CHANGED
|
@@ -13,6 +13,9 @@ export const styles = css `
|
|
|
13
13
|
:host([variant=elevated]) {
|
|
14
14
|
background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));
|
|
15
15
|
}
|
|
16
|
+
:host([variant=elevated]) u-elevation {
|
|
17
|
+
--u-elevation-level: var(--u-elevated-card-elevation-level, 1);
|
|
18
|
+
}
|
|
16
19
|
|
|
17
20
|
:host([variant=filled]) {
|
|
18
21
|
background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));
|
|
@@ -21,9 +24,5 @@ export const styles = css `
|
|
|
21
24
|
:host([variant=outlined]) {
|
|
22
25
|
border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));
|
|
23
26
|
}
|
|
24
|
-
|
|
25
|
-
u-elevation {
|
|
26
|
-
--u-elevation-level: var(--u-elevated-card-elevation-level, 1);
|
|
27
|
-
}
|
|
28
27
|
`;
|
|
29
28
|
//# sourceMappingURL=card.styles.js.map
|
package/card/card.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n display: block;\n position: relative;\n border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n }\n\n :host(:not(:first-child)) {\n margin-top: 8px;\n }\n\n :host([variant=elevated]) {\n background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n }\n :host([variant=elevated]) u-elevation {\n --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n }\n\n :host([variant=filled]) {\n background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n }\n\n :host([variant=outlined]) {\n border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universal-material/web",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.8",
|
|
4
4
|
"description": "Material web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
"docs:clean": "rimraf ./docs/dist/",
|
|
34
34
|
"docs:build": "gulp -f gulpfile.js docs",
|
|
35
35
|
"docs:watch": "run-p docs:gulp:watch docs:serve",
|
|
36
|
+
"docs:bundle": "gulp -f gulpfile.js docs:bundle",
|
|
36
37
|
"docs:gulp:watch": "gulp -f gulpfile.js docs:watch",
|
|
37
38
|
"docs:serve": "wds --root-dir=docs/dist --node-resolve --watch",
|
|
38
39
|
"analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
|