@universal-material/web 3.0.147 → 3.0.149
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/icon-button.d.ts +2 -0
- package/button/icon-button.d.ts.map +1 -1
- package/button/icon-button.js +3 -0
- package/button/icon-button.js.map +1 -1
- package/button/icon-button.styles.d.ts.map +1 -1
- package/button/icon-button.styles.js +40 -0
- package/button/icon-button.styles.js.map +1 -1
- package/card/card.styles.d.ts.map +1 -1
- package/card/card.styles.js +2 -0
- package/card/card.styles.js.map +1 -1
- package/custom-elements.json +5886 -5805
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/navigation/drawer-headline.d.ts +11 -0
- package/navigation/drawer-headline.d.ts.map +1 -0
- package/navigation/drawer-headline.js +19 -0
- package/navigation/drawer-headline.js.map +1 -0
- package/navigation/drawer-headline.styles.d.ts +2 -0
- package/navigation/drawer-headline.styles.d.ts.map +1 -0
- package/navigation/drawer-headline.styles.js +13 -0
- package/navigation/drawer-headline.styles.js.map +1 -0
- package/navigation/drawer-item.styles.d.ts.map +1 -1
- package/navigation/drawer-item.styles.js +2 -1
- package/navigation/drawer-item.styles.js.map +1 -1
- package/package.json +1 -1
package/button/icon-button.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { HTMLTemplateResult } from 'lit';
|
|
2
2
|
import { UmToggleButton } from './toggle-button.js';
|
|
3
3
|
export type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
|
|
4
|
+
export type UmIconButtonWidth = 'default' | 'narrow' | 'wide' | undefined;
|
|
4
5
|
export declare class UmIconButton extends UmToggleButton {
|
|
5
6
|
static styles: import("lit").CSSResultGroup[];
|
|
6
7
|
variant: UmIconButtonVariant;
|
|
8
|
+
width: UmIconButtonWidth;
|
|
7
9
|
protected renderContent(): HTMLTemplateResult;
|
|
8
10
|
}
|
|
9
11
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1E,qBACa,YAAa,SAAQ,cAAc;IAE9C,OAAgB,MAAM,iCAAmC;IAE5B,OAAO,EAAE,mBAAmB,CAAc;IAC1C,KAAK,EAAE,iBAAiB,CAAC;cAEnC,aAAa,IAAI,kBAAkB;CAavD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
|
package/button/icon-button.js
CHANGED
|
@@ -25,6 +25,9 @@ let UmIconButton = class UmIconButton extends UmToggleButton {
|
|
|
25
25
|
__decorate([
|
|
26
26
|
property({ reflect: true })
|
|
27
27
|
], UmIconButton.prototype, "variant", void 0);
|
|
28
|
+
__decorate([
|
|
29
|
+
property({ reflect: true })
|
|
30
|
+
], UmIconButton.prototype, "width", void 0);
|
|
28
31
|
UmIconButton = __decorate([
|
|
29
32
|
customElement('u-icon-button')
|
|
30
33
|
], UmIconButton);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../src/button/icon-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAM7C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,cAAc;IAAzC;;QAIwB,YAAO,GAAwB,UAAU,CAAC;IAgBzE,CAAC;aAlBiB,WAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;IAKtC,aAAa;QAE9B,OAAO,IAAI,CAAA;;;;;;+CAMgC,IAAI,CAAC,4BAA4B;;;KAG3E,CAAC;IACJ,CAAC;;AAf4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAA2C;AAC1C;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA0B;AAL3C,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoBxB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './icon-button.styles.js';\nimport { UmToggleButton } from './toggle-button.js';\n\nexport type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';\nexport type UmIconButtonWidth = 'default' | 'narrow' | 'wide' | undefined;\n\n@customElement('u-icon-button')\nexport class UmIconButton extends UmToggleButton {\n\n static override styles = [UmToggleButton.styles, styles];\n\n @property({ reflect: true }) variant: UmIconButtonVariant = 'standard';\n @property({ reflect: true }) width: UmIconButtonWidth;\n\n protected override renderContent(): HTMLTemplateResult {\n\n return html`\n <span class=\"icon-container\" aria-hidden=\"true\">\n <span class=\"icon icon-default\">\n <slot></slot>\n </span>\n <span class=\"icon icon-selected\">\n <slot name=\"selected\" @slotchange=\"${this.handleSelectedIconSlotChange}\"></slot>\n </span>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-icon-button': UmIconButton;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.styles.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"icon-button.styles.d.ts","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkHlB,CAAC"}
|
|
@@ -8,6 +8,16 @@ export const styles = css `
|
|
|
8
8
|
--_medium-size: var(--u-icon-button-medium-height, 56px);
|
|
9
9
|
--_large-size: var(--u-icon-button-large-height, 96px);
|
|
10
10
|
--_extra-large-size: var(--u-icon-button-extra-large-height, 136px);
|
|
11
|
+
--_extra-small-narrow-width: var(--u-icon-button-extra-small-narrow-width, 28px);
|
|
12
|
+
--_small-narrow-width: var(--u-icon-button-small-narrow-width, 32px);
|
|
13
|
+
--_medium-narrow-width: var(--u-icon-button-medium-narrow-width, 48px);
|
|
14
|
+
--_large-narrow-width: var(--u-icon-button-large-narrow-width, 64px);
|
|
15
|
+
--_extra-large-narrow-width: var(--u-icon-button-extra-large-narrow-width, 104px);
|
|
16
|
+
--_extra-small-wide-width: var(--u-icon-button-extra-small-wide-width, 40px);
|
|
17
|
+
--_small-wide-width: var(--u-icon-button-small-wide-width, 52px);
|
|
18
|
+
--_medium-wide-width: var(--u-icon-button-medium-wide-width, 72px);
|
|
19
|
+
--_large-wide-width: var(--u-icon-button-large-wide-width, 128px);
|
|
20
|
+
--_extra-large-wide-width: var(--u-icon-button-extra-large-wide-width, 184px);
|
|
11
21
|
--_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);
|
|
12
22
|
--_small-icon-size: var(--u-icon-button-small-icon-size, 1.5rem);
|
|
13
23
|
--_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);
|
|
@@ -23,11 +33,41 @@ export const styles = css `
|
|
|
23
33
|
--_medium-pressed-shape-corner: var(--u-icon-button-medium-pressed-shape-corner, 12px);
|
|
24
34
|
--_large-pressed-shape-corner: var(--u-icon-button-large-pressed-shape-corner, 16px);
|
|
25
35
|
--_extra-large-pressed-shape-corner: var(--u-icon-button-extra-large-pressed-shape-corner, 16px);
|
|
36
|
+
--_narrow-width: var(--_small-narrow-width);
|
|
37
|
+
--_wide-width: var(--_small-wide-width);
|
|
26
38
|
width: var(--_size);
|
|
27
39
|
height: var(--_size);
|
|
28
40
|
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");
|
|
29
41
|
}
|
|
30
42
|
|
|
43
|
+
:host([size=extra-small]) {
|
|
44
|
+
--_narrow-width: var(--_extra-small-narrow-width);
|
|
45
|
+
--_wide-width: var(--_extra-small-wide-width);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host([size=medium]) {
|
|
49
|
+
--_narrow-width: var(--_medium-narrow-width);
|
|
50
|
+
--_wide-width: var(--_medium-wide-width);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:host([size=large]) {
|
|
54
|
+
--_narrow-width: var(--_large-narrow-width);
|
|
55
|
+
--_wide-width: var(--_large-wide-width);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:host([size=extra-large]) {
|
|
59
|
+
--_narrow-width: var(--_extra-large-narrow-width);
|
|
60
|
+
--_wide-width: var(--_extra-large-wide-width);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:host([width=narrow]) {
|
|
64
|
+
width: var(--_narrow-width);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:host([width=wide]) {
|
|
68
|
+
width: var(--_wide-width);
|
|
69
|
+
}
|
|
70
|
+
|
|
31
71
|
:host([variant=filled]) {
|
|
32
72
|
background-color: var(--u-filled-icon-button-unselected-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));
|
|
33
73
|
color: var(--u-filled-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
@@ -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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHzB,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-height, 32px);\n --_small-size: var(--u-icon-button-small-height, 40px);\n --_medium-size: var(--u-icon-button-medium-height, 56px);\n --_large-size: var(--u-icon-button-large-height, 96px);\n --_extra-large-size: var(--u-icon-button-extra-large-height, 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 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 :host([size=extra-small]) {\n --_narrow-width: var(--_extra-small-narrow-width);\n --_wide-width: var(--_extra-small-wide-width);\n }\n\n :host([size=medium]) {\n --_narrow-width: var(--_medium-narrow-width);\n --_wide-width: var(--_medium-wide-width);\n }\n\n :host([size=large]) {\n --_narrow-width: var(--_large-narrow-width);\n --_wide-width: var(--_large-wide-width);\n }\n\n :host([size=extra-large]) {\n --_narrow-width: var(--_extra-large-narrow-width);\n --_wide-width: var(--_extra-large-wide-width);\n }\n\n :host([width=narrow]) {\n width: var(--_narrow-width);\n }\n\n :host([width=wide]) {\n width: var(--_wide-width);\n }\n\n :host([variant=filled]) {\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 :host([variant=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\n :host([selected][variant=filled]),\n :host([variant=filled]:not([toggle])) {\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\n :host([selected][variant=tonal]) {\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 :host([variant=standard]) {\n color: var(--u-standard-icon-button-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 color: var(--u-outlined-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([selected][variant=outlined]) {\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\n :host([selected][variant=standard]) {\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 :host([disabled][variant=outlined]) {\n background-color: transparent !important;\n border-color: var(--u-outlined-icon-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-icon-button-disabled-border-opacity, 12%), transparent)) !important;\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,yBA8BlB,CAAC"}
|
package/card/card.styles.js
CHANGED
|
@@ -20,6 +20,8 @@ export const styles = css `
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
:host([variant=outlined]) {
|
|
23
|
+
--u-current-bg-color: var(--u-card-outlined-bg-color, var(--u-color-surface, rgb(254, 247, 255)));
|
|
24
|
+
background-color: var(--u-current-bg-color);
|
|
23
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)));
|
|
24
26
|
}
|
|
25
27
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BzB,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([variant=elevated]) {\n --u-current-bg-color: var(--u-card-elevated-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n background-color: var(--u-current-bg-color);\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 --u-current-bg-color: var(--u-card-filled-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n background-color: var(--u-current-bg-color);\n }\n\n :host([variant=outlined]) {\n --u-current-bg-color: var(--u-card-outlined-bg-color, var(--u-color-surface, rgb(254, 247, 255)));\n background-color: var(--u-current-bg-color);\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 u-card-content,\n slot {\n border-radius: inherit;\n }\n`;\n"]}
|