@universal-material/web 3.6.3 → 3.6.5
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/app-bar/top-app-bar.styles.js +7 -7
- package/app-bar/top-app-bar.styles.js.map +1 -1
- package/button/icon-button.styles.js +5 -5
- package/button/icon-button.styles.js.map +1 -1
- package/custom-elements.json +8087 -8087
- package/list/list-item.styles.d.ts.map +1 -1
- package/list/list-item.styles.js +4 -0
- package/list/list-item.styles.js.map +1 -1
- package/package.json +1 -1
- package/vscode.html-custom-data.json +119 -119
|
@@ -4,13 +4,6 @@ export const styles = css `
|
|
|
4
4
|
display: block;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.leading-icon,
|
|
8
|
-
.trailing-icon {
|
|
9
|
-
display: none;
|
|
10
|
-
align-items: center;
|
|
11
|
-
gap: var(--u-top-app-bar-icons-gap, 8px);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
7
|
slot[name=leading-icon]::slotted(u-icon-button) {
|
|
15
8
|
color: inherit;
|
|
16
9
|
}
|
|
@@ -25,6 +18,13 @@ export const styles = css `
|
|
|
25
18
|
background-color: var(--u-top-app-bar-on-scroll-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));
|
|
26
19
|
}
|
|
27
20
|
|
|
21
|
+
.leading-icon,
|
|
22
|
+
.trailing-icon {
|
|
23
|
+
display: none;
|
|
24
|
+
align-items: center;
|
|
25
|
+
gap: var(--u-top-app-bar-icons-gap, 8px);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
28
|
.has-leading-icon .leading-icon,
|
|
29
29
|
.has-trailing-icon .trailing-icon {
|
|
30
30
|
display: inline-flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"top-app-bar.styles.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n display: block;\n }\n\n
|
|
1
|
+
{"version":3,"file":"top-app-bar.styles.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n display: block;\n }\n\n slot[name=leading-icon]::slotted(u-icon-button) {\n color: inherit;\n }\n\n .container {\n background-color: var(--u-top-app-bar-container-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n }\n\n .scrolled {\n background-color: var(--u-top-app-bar-on-scroll-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n }\n\n .leading-icon,\n .trailing-icon {\n display: none;\n align-items: center;\n gap: var(--u-top-app-bar-icons-gap, 8px);\n }\n\n .has-leading-icon .leading-icon,\n .has-trailing-icon .trailing-icon {\n display: inline-flex;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n inset-inline: 0;\n inset-block-start: 0;\n inset-inline-start: var(--u-app-bar-offset, 0);\n }\n\n .absolute,\n .fixed {\n z-index: var(--u-fixed-app-bar-z-index, 1010);\n }\n\n .spacing {\n padding-top: var(--_content-height);\n }\n\n .extended-content {\n display: flex;\n align-items: flex-end;\n padding-inline: var(--u-extended-content-inline-padding, 16px);\n }\n\n .medium + .extended-content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-extended-content-medium-line-height, var(--u-headline-s-line-height, 2rem));\n font-size: var(--u-extended-content-medium-font-size, var(--u-headline-s-font-size, 1.5rem));\n letter-spacing: var(--u-extended-content-medium-letter-spacing, var(--u-headline-s-letter-spacing, 0rem));\n font-weight: var(--u-extended-content-medium-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400)));\n height: var(--u-extended-content-medium-height, 3.5rem);\n padding-bottom: var(--u-extended-content-medium-padding-bottom, 24px);\n }\n\n .large + .extended-content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-extended-content-large-line-height, var(--u-headline-m-line-height, 2.25rem));\n font-size: var(--u-extended-content-large-font-size, var(--u-headline-m-font-size, 1.75rem));\n letter-spacing: var(--u-extended-content-large-letter-spacing, var(--u-headline-m-letter-spacing, 0rem));\n font-weight: var(--u-extended-content-large-font-weight, var(--u-headline-m-font-weight, var(--u-font-weight-regular, 400)));\n height: var(--u-extended-content-medium-large, 6rem);\n padding-bottom: var(--u-extended-content-large-padding-bottom, 28px);\n }\n\n .content {\n display: flex;\n align-items: center;\n background-color: inherit;\n transition: inherit;\n min-height: var(--u-top-app-bar-min-height, 56px);\n }\n @media (min-width: 840px) {\n .content {\n min-height: var(--u-top-app-bar-extended-min-height, 64px);\n }\n }\n\n .headline {\n overflow: hidden;\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n margin-inline: var(--u-headline-margin, 16px);\n }\n .has-leading-icon .headline {\n margin-inline-start: 0;\n }\n\n .leading-icon {\n margin-inline: var(--u-leading-icon-margin, 8px);\n }\n\n .trailing-icon {\n padding-inline: var(--u-trailing-icon-margin, 8px);\n margin-inline-start: auto;\n }\n`;\n"]}
|
|
@@ -3,11 +3,11 @@ export const styles = css `
|
|
|
3
3
|
:host {
|
|
4
4
|
--_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));
|
|
5
5
|
--_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);
|
|
6
|
-
--_extra-small-size: var(--u-icon-button-extra-small-
|
|
7
|
-
--_small-size: var(--u-icon-button-small-
|
|
8
|
-
--_medium-size: var(--u-icon-button-medium-
|
|
9
|
-
--_large-size: var(--u-icon-button-large-
|
|
10
|
-
--_extra-large-size: var(--u-icon-button-extra-large-
|
|
6
|
+
--_extra-small-size: var(--u-icon-button-extra-small-size, 32px);
|
|
7
|
+
--_small-size: var(--u-icon-button-small-size, 40px);
|
|
8
|
+
--_medium-size: var(--u-icon-button-medium-size, 56px);
|
|
9
|
+
--_large-size: var(--u-icon-button-large-size, 96px);
|
|
10
|
+
--_extra-large-size: var(--u-icon-button-extra-large-size, 136px);
|
|
11
11
|
--_extra-small-narrow-width: var(--u-icon-button-extra-small-narrow-width, 28px);
|
|
12
12
|
--_small-narrow-width: var(--u-icon-button-small-narrow-width, 32px);
|
|
13
13
|
--_medium-narrow-width: var(--u-icon-button-medium-narrow-width, 48px);
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));\n --_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);\n --_extra-small-size: var(--u-icon-button-extra-small-
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_round-shape-corner: var(--u-icon-button-round-shape-corner, calc(var(--_size) / 2));\n --_square-shape-corner: var(--u-icon-button-square-shape-corner, 12px);\n --_extra-small-size: var(--u-icon-button-extra-small-size, 32px);\n --_small-size: var(--u-icon-button-small-size, 40px);\n --_medium-size: var(--u-icon-button-medium-size, 56px);\n --_large-size: var(--u-icon-button-large-size, 96px);\n --_extra-large-size: var(--u-icon-button-extra-large-size, 136px);\n --_extra-small-narrow-width: var(--u-icon-button-extra-small-narrow-width, 28px);\n --_small-narrow-width: var(--u-icon-button-small-narrow-width, 32px);\n --_medium-narrow-width: var(--u-icon-button-medium-narrow-width, 48px);\n --_large-narrow-width: var(--u-icon-button-large-narrow-width, 64px);\n --_extra-large-narrow-width: var(--u-icon-button-extra-large-narrow-width, 104px);\n --_extra-small-wide-width: var(--u-icon-button-extra-small-wide-width, 40px);\n --_small-wide-width: var(--u-icon-button-small-wide-width, 52px);\n --_medium-wide-width: var(--u-icon-button-medium-wide-width, 72px);\n --_large-wide-width: var(--u-icon-button-large-wide-width, 128px);\n --_extra-large-wide-width: var(--u-icon-button-extra-large-wide-width, 184px);\n --_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);\n --_small-icon-size: var(--u-icon-button-small-icon-size, 1.5rem);\n --_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);\n --_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);\n --_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);\n --_extra-small-square-shape-corner: var(--u-icon-button-extra-small-square-shape-corner, 12px);\n --_small-square-shape-corner: var(--u-icon-button-small-square-shape-corner, 12px);\n --_medium-square-shape-corner: var(--u-icon-button-medium-square-shape-corner, 16px);\n --_large-square-shape-corner: var(--u-icon-button-large-square-shape-corner, 28px);\n --_extra-large-square-shape-corner: var(--u-icon-button-extra-large-square-shape-corner, 28px);\n --_extra-small-pressed-shape-corner: var(--u-icon-button-extra-small-pressed-shape-corner, 8px);\n --_small-pressed-shape-corner: var(--u-icon-button-small-pressed-shape-corner, 8px);\n --_medium-pressed-shape-corner: var(--u-icon-button-medium-pressed-shape-corner, 12px);\n --_large-pressed-shape-corner: var(--u-icon-button-large-pressed-shape-corner, 16px);\n --_extra-large-pressed-shape-corner: var(--u-icon-button-extra-large-pressed-shape-corner, 16px);\n --_narrow-width: var(--_small-narrow-width);\n --_wide-width: var(--_small-wide-width);\n }\n\n .container {\n width: var(--_size);\n height: var(--_size);\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n }\n\n .extra-small {\n --_narrow-width: var(--_extra-small-narrow-width);\n --_wide-width: var(--_extra-small-wide-width);\n }\n\n .medium {\n --_narrow-width: var(--_medium-narrow-width);\n --_wide-width: var(--_medium-wide-width);\n }\n\n .large {\n --_narrow-width: var(--_large-narrow-width);\n --_wide-width: var(--_large-wide-width);\n }\n\n .extra-large {\n --_narrow-width: var(--_extra-large-narrow-width);\n --_wide-width: var(--_extra-large-wide-width);\n }\n\n .narrow {\n width: var(--_narrow-width);\n }\n\n .wide {\n width: var(--_wide-width);\n }\n\n .filled, .filled.selected {\n background-color: var(--u-filled-icon-button-container-color, var(--u-color-primary, rgb(103, 80, 164)));\n color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n .filled.toggle {\n background-color: var(--u-filled-icon-button-unselected-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n color: var(--u-filled-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .tonal {\n background-color: var(--u-total-icon-button-unselected-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n .tonal.selected {\n background-color: var(--u-tonal-icon-button-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n .standard {\n color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n .standard.selected {\n color: var(--u-standard-icon-button-selected-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n background-color: var(--u-standard-icon-button-selected-container-color, transparent);\n }\n\n .outlined {\n color: var(--u-outlined-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n .outlined, .outlined.selected.disabled {\n border: 1px solid var(--u-color-outline-variant, rgb(202, 196, 208));\n }\n .outlined.selected {\n border: none;\n background-color: var(--u-outlined-icon-button-selected-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n }\n .outlined.disabled {\n color: var(--u-outlined-icon-button-disabled-icon-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-icon-button-disabled-border-opacity, 10%), transparent)) !important;\n }\n`;\n"]}
|