@m3e/list 1.0.0-rc.1 → 1.0.0-rc.2
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 +1 -2
- package/dist/custom-elements.json +2551 -6
- package/dist/index.js +0 -2
- package/dist/index.js.map +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +4 -4
- package/cem.config.mjs +0 -16
- package/demo/index.html +0 -53
- package/dist/src/ListElement.d.ts +0 -51
- package/dist/src/ListElement.d.ts.map +0 -1
- package/dist/src/ListItemElement.d.ts +0 -75
- package/dist/src/ListItemElement.d.ts.map +0 -1
- package/dist/src/index.d.ts +0 -3
- package/dist/src/index.d.ts.map +0 -1
- package/eslint.config.mjs +0 -13
- package/rollup.config.js +0 -32
- package/src/ListElement.ts +0 -65
- package/src/ListItemElement.ts +0 -156
- package/src/index.ts +0 -2
- package/tsconfig.json +0 -9
package/cem.config.mjs
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
globs: ["src/**/*.ts"],
|
|
5
|
-
exclude: ["src/**/*.spec.ts"],
|
|
6
|
-
packagejson: true,
|
|
7
|
-
outdir: "dist",
|
|
8
|
-
litelement: true,
|
|
9
|
-
plugins: [
|
|
10
|
-
customElementVsCodePlugin({
|
|
11
|
-
outdir: "dist",
|
|
12
|
-
htmlFileName: "html-custom-data.json",
|
|
13
|
-
cssFileName: "css-custom-data.json",
|
|
14
|
-
}),
|
|
15
|
-
],
|
|
16
|
-
};
|
package/demo/index.html
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" style="overflow-y: auto">
|
|
3
|
-
<head>
|
|
4
|
-
<title>List for M3E</title>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<meta name="description" content="List for M3E" />
|
|
8
|
-
<base href="./" />
|
|
9
|
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
10
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
11
|
-
<link
|
|
12
|
-
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
|
|
13
|
-
rel="stylesheet"
|
|
14
|
-
/>
|
|
15
|
-
<link
|
|
16
|
-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
|
|
17
|
-
rel="stylesheet"
|
|
18
|
-
/>
|
|
19
|
-
<script type="importmap">
|
|
20
|
-
{
|
|
21
|
-
"imports": {
|
|
22
|
-
"lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
|
|
23
|
-
"@m3e/core": "../../core/dist/index.min.js"
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
</script>
|
|
27
|
-
<script type="module" src="../../icon/dist/index.min.js"></script>
|
|
28
|
-
<script type="module" src="../../theme/dist/index.min.js"></script>
|
|
29
|
-
<script type="module" src="../dist/index.min.js"></script>
|
|
30
|
-
<style>
|
|
31
|
-
body {
|
|
32
|
-
font-family: "Roboto";
|
|
33
|
-
}
|
|
34
|
-
*:not(:defined) {
|
|
35
|
-
display: none;
|
|
36
|
-
}
|
|
37
|
-
</style>
|
|
38
|
-
</head>
|
|
39
|
-
<body>
|
|
40
|
-
<m3e-theme strong-focus>
|
|
41
|
-
<m3e-list>
|
|
42
|
-
<m3e-list-item>
|
|
43
|
-
<m3e-icon slot="leading-icon" name="person"></m3e-icon>
|
|
44
|
-
<span slot="overline">Overline</span>
|
|
45
|
-
Headline
|
|
46
|
-
<span slot="supporting-text">Supporting text</span>
|
|
47
|
-
<span slot="trailing-supporting-text">100+</span>
|
|
48
|
-
<m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
|
|
49
|
-
</m3e-list-item>
|
|
50
|
-
</m3e-list>
|
|
51
|
-
</m3e-theme>
|
|
52
|
-
</body>
|
|
53
|
-
</html>
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { CSSResultGroup, LitElement } from "lit";
|
|
2
|
-
declare const M3eListElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
3
|
-
/**
|
|
4
|
-
* @summary
|
|
5
|
-
* A list of items.
|
|
6
|
-
*
|
|
7
|
-
* @description
|
|
8
|
-
* The `m3e-list` component provides a list container for organizing and displaying
|
|
9
|
-
* multiple list items. It supports flexible layout, custom padding, and divider insets
|
|
10
|
-
* via CSS custom properties.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* The following example illustrates a list with a single item using all supported slots.
|
|
14
|
-
*
|
|
15
|
-
* Note: This example uses the `@m3e/icon` package to present Material Design symbols, but any icon package can be
|
|
16
|
-
* substituted depending on your design system or preferences
|
|
17
|
-
*
|
|
18
|
-
* ```html
|
|
19
|
-
* <m3e-list>
|
|
20
|
-
* <m3e-list-item>
|
|
21
|
-
* <m3e-icon slot="leading-icon" name="person"></m3e-icon>
|
|
22
|
-
* <span slot="overline">Overline</span>
|
|
23
|
-
* Headline
|
|
24
|
-
* <span slot="supporting-text">Supporting text</span>
|
|
25
|
-
* <span slot="trailing-supporting-text">100+</span>
|
|
26
|
-
* <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
|
|
27
|
-
* </m3e-list-item>
|
|
28
|
-
* </m3e-list>
|
|
29
|
-
* ```
|
|
30
|
-
*
|
|
31
|
-
* @tag m3e-list
|
|
32
|
-
*
|
|
33
|
-
* @slot - Renders the items of the list.
|
|
34
|
-
*
|
|
35
|
-
* @cssprop --m3e-list-block-padding - Vertical padding for the list container.
|
|
36
|
-
* @cssprop --m3e-list-divider-inset-start-size - Start inset for dividers within the list.
|
|
37
|
-
* @cssprop --m3e-list-divider-inset-end-size - End inset for dividers within the list.
|
|
38
|
-
*/
|
|
39
|
-
export declare class M3eListElement extends M3eListElement_base {
|
|
40
|
-
/** The styles of the element. */
|
|
41
|
-
static styles: CSSResultGroup;
|
|
42
|
-
/** @inheritdoc */
|
|
43
|
-
protected render(): unknown;
|
|
44
|
-
}
|
|
45
|
-
declare global {
|
|
46
|
-
interface HTMLElementTagNameMap {
|
|
47
|
-
"m3e-list": M3eListElement;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
export {};
|
|
51
|
-
//# sourceMappingURL=ListElement.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListElement.d.ts","sourceRoot":"","sources":["../../src/ListElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,cAAe,SAAQ,mBAAwB;IAC1D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAQpC;IAEF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { CSSResultGroup, LitElement } from "lit";
|
|
2
|
-
declare const M3eListItemElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
3
|
-
/**
|
|
4
|
-
* @summary
|
|
5
|
-
* An item in a list.
|
|
6
|
-
*
|
|
7
|
-
* @description
|
|
8
|
-
* The `m3e-list-item` component represents a single item within a list. It supports rich
|
|
9
|
-
* content, leading/trailing icons, overline, supporting text, and trailing supporting text
|
|
10
|
-
* via named slots. The component is highly customizable through CSS custom properties and
|
|
11
|
-
* is designed for accessibility and flexible layout.
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* The following example illustrates a list with a single item using all supported slots.
|
|
15
|
-
*
|
|
16
|
-
* Note: This example uses the `@m3e/icon` package to present Material Design symbols, but any icon package can be
|
|
17
|
-
* substituted depending on your design system or preferences
|
|
18
|
-
*
|
|
19
|
-
* ```html
|
|
20
|
-
* <m3e-list>
|
|
21
|
-
* <m3e-list-item>
|
|
22
|
-
* <m3e-icon slot="leading-icon" name="person"></m3e-icon>
|
|
23
|
-
* <span slot="overline">Overline</span>
|
|
24
|
-
* Headline
|
|
25
|
-
* <span slot="supporting-text">Supporting text</span>
|
|
26
|
-
* <span slot="trailing-supporting-text">100+</span>
|
|
27
|
-
* <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
|
|
28
|
-
* </m3e-list-item>
|
|
29
|
-
* </m3e-list>
|
|
30
|
-
* ```
|
|
31
|
-
*
|
|
32
|
-
* @tag m3e-list-item
|
|
33
|
-
*
|
|
34
|
-
* @slot - Renders the content of the list item.
|
|
35
|
-
* @slot leading-icon - Renders the leading icon of the list item.
|
|
36
|
-
* @slot overline - Renders the overline of the list item.
|
|
37
|
-
* @slot supporting-text - Renders the supporting text of the list item.
|
|
38
|
-
* @slot trailing-supporting-text - Renders the trailing supporting text of the list item.
|
|
39
|
-
* @slot trailing-icon - Renders the trailing icon of the list item.
|
|
40
|
-
*
|
|
41
|
-
* @cssprop --m3e-list-item-spacing - Horizontal gap between elements.
|
|
42
|
-
* @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
|
|
43
|
-
* @cssprop --m3e-list-item-padding-block - Vertical padding for the list item.
|
|
44
|
-
* @cssprop --m3e-list-item-height - Minimum height of the list item.
|
|
45
|
-
* @cssprop --m3e-list-item-font-size - Font size for main content.
|
|
46
|
-
* @cssprop --m3e-list-item-font-weight - Font weight for main content.
|
|
47
|
-
* @cssprop --m3e-list-item-line-height - Line height for main content.
|
|
48
|
-
* @cssprop --m3e-list-item-tracking - Letter spacing for main content.
|
|
49
|
-
* @cssprop --m3e-list-item-overline-font-size - Font size for overline slot.
|
|
50
|
-
* @cssprop --m3e-list-item-overline-font-weight - Font weight for overline slot.
|
|
51
|
-
* @cssprop --m3e-list-item-overline-line-height - Line height for overline slot.
|
|
52
|
-
* @cssprop --m3e-list-item-overline-tracking - Letter spacing for overline slot.
|
|
53
|
-
* @cssprop --m3e-list-item-supporting-text-font-size - Font size for supporting text slot.
|
|
54
|
-
* @cssprop --m3e-list-item-supporting-text-font-weight - Font weight for supporting text slot.
|
|
55
|
-
* @cssprop --m3e-list-item-supporting-text-line-height - Line height for supporting text slot.
|
|
56
|
-
* @cssprop --m3e-list-item-supporting-text-tracking - Letter spacing for supporting text slot.
|
|
57
|
-
* @cssprop --m3e-list-item-trailing-supporting-text-font-size - Font size for trailing supporting text slot.
|
|
58
|
-
* @cssprop --m3e-list-item-trailing-supporting-text-font-weight - Font weight for trailing supporting text slot.
|
|
59
|
-
* @cssprop --m3e-list-item-trailing-supporting-text-line-height - Line height for trailing supporting text slot.
|
|
60
|
-
* @cssprop --m3e-list-item-trailing-supporting-text-tracking - Letter spacing for trailing supporting text slot.
|
|
61
|
-
* @cssprop --m3e-list-item-icon-size - Size for leading/trailing icons.
|
|
62
|
-
*/
|
|
63
|
-
export declare class M3eListItemElement extends M3eListItemElement_base {
|
|
64
|
-
/** The styles of the element. */
|
|
65
|
-
static styles: CSSResultGroup;
|
|
66
|
-
/** @inheritdoc */
|
|
67
|
-
protected render(): unknown;
|
|
68
|
-
}
|
|
69
|
-
declare global {
|
|
70
|
-
interface HTMLElementTagNameMap {
|
|
71
|
-
"m3e-list-item": M3eListItemElement;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
export {};
|
|
75
|
-
//# sourceMappingURL=ListItemElement.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemElement.d.ts","sourceRoot":"","sources":["../../src/ListItemElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBACa,kBAAmB,SAAQ,uBAA4B;IAClE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoEpC;IAEF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAUrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
|
package/dist/src/index.d.ts
DELETED
package/dist/src/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC"}
|
package/eslint.config.mjs
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import eslint from "@eslint/js";
|
|
2
|
-
import tseslint from "typescript-eslint";
|
|
3
|
-
import { fileURLToPath } from "url";
|
|
4
|
-
import { dirname } from "path";
|
|
5
|
-
|
|
6
|
-
export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
|
|
7
|
-
languageOptions: {
|
|
8
|
-
parserOptions: {
|
|
9
|
-
project: true,
|
|
10
|
-
tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
});
|
package/rollup.config.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import resolve from "@rollup/plugin-node-resolve";
|
|
2
|
-
import terser from "@rollup/plugin-terser";
|
|
3
|
-
import typescript from "@rollup/plugin-typescript";
|
|
4
|
-
|
|
5
|
-
const banner = `/**
|
|
6
|
-
* @license MIT
|
|
7
|
-
* Copyright (c) 2025 matraic
|
|
8
|
-
* See LICENSE file in the project root for full license text.
|
|
9
|
-
*/`;
|
|
10
|
-
|
|
11
|
-
export default [
|
|
12
|
-
{
|
|
13
|
-
input: "src/index.ts",
|
|
14
|
-
output: [
|
|
15
|
-
{
|
|
16
|
-
file: "dist/index.js",
|
|
17
|
-
format: "esm",
|
|
18
|
-
sourcemap: true,
|
|
19
|
-
banner: banner,
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
file: "dist/index.min.js",
|
|
23
|
-
format: "esm",
|
|
24
|
-
sourcemap: true,
|
|
25
|
-
banner: banner,
|
|
26
|
-
plugins: [terser({ mangle: true })],
|
|
27
|
-
},
|
|
28
|
-
],
|
|
29
|
-
external: ["@m3e/core", "lit"],
|
|
30
|
-
plugins: [resolve(), typescript()],
|
|
31
|
-
},
|
|
32
|
-
];
|
package/src/ListElement.ts
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { css, CSSResultGroup, html, LitElement } from "lit";
|
|
2
|
-
import { customElement } from "lit/decorators.js";
|
|
3
|
-
|
|
4
|
-
import { Role } from "@m3e/core";
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* @summary
|
|
8
|
-
* A list of items.
|
|
9
|
-
*
|
|
10
|
-
* @description
|
|
11
|
-
* The `m3e-list` component provides a list container for organizing and displaying
|
|
12
|
-
* multiple list items. It supports flexible layout, custom padding, and divider insets
|
|
13
|
-
* via CSS custom properties.
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* The following example illustrates a list with a single item using all supported slots.
|
|
17
|
-
*
|
|
18
|
-
* Note: This example uses the `@m3e/icon` package to present Material Design symbols, but any icon package can be
|
|
19
|
-
* substituted depending on your design system or preferences
|
|
20
|
-
*
|
|
21
|
-
* ```html
|
|
22
|
-
* <m3e-list>
|
|
23
|
-
* <m3e-list-item>
|
|
24
|
-
* <m3e-icon slot="leading-icon" name="person"></m3e-icon>
|
|
25
|
-
* <span slot="overline">Overline</span>
|
|
26
|
-
* Headline
|
|
27
|
-
* <span slot="supporting-text">Supporting text</span>
|
|
28
|
-
* <span slot="trailing-supporting-text">100+</span>
|
|
29
|
-
* <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
|
|
30
|
-
* </m3e-list-item>
|
|
31
|
-
* </m3e-list>
|
|
32
|
-
* ```
|
|
33
|
-
*
|
|
34
|
-
* @tag m3e-list
|
|
35
|
-
*
|
|
36
|
-
* @slot - Renders the items of the list.
|
|
37
|
-
*
|
|
38
|
-
* @cssprop --m3e-list-block-padding - Vertical padding for the list container.
|
|
39
|
-
* @cssprop --m3e-list-divider-inset-start-size - Start inset for dividers within the list.
|
|
40
|
-
* @cssprop --m3e-list-divider-inset-end-size - End inset for dividers within the list.
|
|
41
|
-
*/
|
|
42
|
-
@customElement("m3e-list")
|
|
43
|
-
export class M3eListElement extends Role(LitElement, "list") {
|
|
44
|
-
/** The styles of the element. */
|
|
45
|
-
static override styles: CSSResultGroup = css`
|
|
46
|
-
:host {
|
|
47
|
-
display: block;
|
|
48
|
-
padding-block: var(--m3e-list-block-padding, 0.5rem);
|
|
49
|
-
|
|
50
|
-
--m3e-divider-inset-start-size: var(--m3e-list-divider-inset-start-size, 1rem);
|
|
51
|
-
--m3e-divider-inset-end-size: var(--m3e-list-divider-inset-end-size, 1.5rem);
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
54
|
-
|
|
55
|
-
/** @inheritdoc */
|
|
56
|
-
protected override render(): unknown {
|
|
57
|
-
return html`<slot></slot>`;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
declare global {
|
|
62
|
-
interface HTMLElementTagNameMap {
|
|
63
|
-
"m3e-list": M3eListElement;
|
|
64
|
-
}
|
|
65
|
-
}
|
package/src/ListItemElement.ts
DELETED
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { css, CSSResultGroup, html, LitElement } from "lit";
|
|
2
|
-
import { customElement } from "lit/decorators.js";
|
|
3
|
-
|
|
4
|
-
import { DesignToken, Role } from "@m3e/core";
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* @summary
|
|
8
|
-
* An item in a list.
|
|
9
|
-
*
|
|
10
|
-
* @description
|
|
11
|
-
* The `m3e-list-item` component represents a single item within a list. It supports rich
|
|
12
|
-
* content, leading/trailing icons, overline, supporting text, and trailing supporting text
|
|
13
|
-
* via named slots. The component is highly customizable through CSS custom properties and
|
|
14
|
-
* is designed for accessibility and flexible layout.
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* The following example illustrates a list with a single item using all supported slots.
|
|
18
|
-
*
|
|
19
|
-
* Note: This example uses the `@m3e/icon` package to present Material Design symbols, but any icon package can be
|
|
20
|
-
* substituted depending on your design system or preferences
|
|
21
|
-
*
|
|
22
|
-
* ```html
|
|
23
|
-
* <m3e-list>
|
|
24
|
-
* <m3e-list-item>
|
|
25
|
-
* <m3e-icon slot="leading-icon" name="person"></m3e-icon>
|
|
26
|
-
* <span slot="overline">Overline</span>
|
|
27
|
-
* Headline
|
|
28
|
-
* <span slot="supporting-text">Supporting text</span>
|
|
29
|
-
* <span slot="trailing-supporting-text">100+</span>
|
|
30
|
-
* <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
|
|
31
|
-
* </m3e-list-item>
|
|
32
|
-
* </m3e-list>
|
|
33
|
-
* ```
|
|
34
|
-
*
|
|
35
|
-
* @tag m3e-list-item
|
|
36
|
-
*
|
|
37
|
-
* @slot - Renders the content of the list item.
|
|
38
|
-
* @slot leading-icon - Renders the leading icon of the list item.
|
|
39
|
-
* @slot overline - Renders the overline of the list item.
|
|
40
|
-
* @slot supporting-text - Renders the supporting text of the list item.
|
|
41
|
-
* @slot trailing-supporting-text - Renders the trailing supporting text of the list item.
|
|
42
|
-
* @slot trailing-icon - Renders the trailing icon of the list item.
|
|
43
|
-
*
|
|
44
|
-
* @cssprop --m3e-list-item-spacing - Horizontal gap between elements.
|
|
45
|
-
* @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
|
|
46
|
-
* @cssprop --m3e-list-item-padding-block - Vertical padding for the list item.
|
|
47
|
-
* @cssprop --m3e-list-item-height - Minimum height of the list item.
|
|
48
|
-
* @cssprop --m3e-list-item-font-size - Font size for main content.
|
|
49
|
-
* @cssprop --m3e-list-item-font-weight - Font weight for main content.
|
|
50
|
-
* @cssprop --m3e-list-item-line-height - Line height for main content.
|
|
51
|
-
* @cssprop --m3e-list-item-tracking - Letter spacing for main content.
|
|
52
|
-
* @cssprop --m3e-list-item-overline-font-size - Font size for overline slot.
|
|
53
|
-
* @cssprop --m3e-list-item-overline-font-weight - Font weight for overline slot.
|
|
54
|
-
* @cssprop --m3e-list-item-overline-line-height - Line height for overline slot.
|
|
55
|
-
* @cssprop --m3e-list-item-overline-tracking - Letter spacing for overline slot.
|
|
56
|
-
* @cssprop --m3e-list-item-supporting-text-font-size - Font size for supporting text slot.
|
|
57
|
-
* @cssprop --m3e-list-item-supporting-text-font-weight - Font weight for supporting text slot.
|
|
58
|
-
* @cssprop --m3e-list-item-supporting-text-line-height - Line height for supporting text slot.
|
|
59
|
-
* @cssprop --m3e-list-item-supporting-text-tracking - Letter spacing for supporting text slot.
|
|
60
|
-
* @cssprop --m3e-list-item-trailing-supporting-text-font-size - Font size for trailing supporting text slot.
|
|
61
|
-
* @cssprop --m3e-list-item-trailing-supporting-text-font-weight - Font weight for trailing supporting text slot.
|
|
62
|
-
* @cssprop --m3e-list-item-trailing-supporting-text-line-height - Line height for trailing supporting text slot.
|
|
63
|
-
* @cssprop --m3e-list-item-trailing-supporting-text-tracking - Letter spacing for trailing supporting text slot.
|
|
64
|
-
* @cssprop --m3e-list-item-icon-size - Size for leading/trailing icons.
|
|
65
|
-
*/
|
|
66
|
-
@customElement("m3e-list-item")
|
|
67
|
-
export class M3eListItemElement extends Role(LitElement, "listitem") {
|
|
68
|
-
/** The styles of the element. */
|
|
69
|
-
static override styles: CSSResultGroup = css`
|
|
70
|
-
:host {
|
|
71
|
-
display: flex;
|
|
72
|
-
align-items: center;
|
|
73
|
-
box-sizing: border-box;
|
|
74
|
-
column-gap: var(--m3e-list-item-spacing, 1rem);
|
|
75
|
-
padding-inline: var(--m3e-list-item-padding-inline, 1rem);
|
|
76
|
-
padding-block: var(--m3e-list-item-padding-block, 0.75rem);
|
|
77
|
-
min-height: calc(var(--m3e-list-item-height, 3.5rem) + ${DesignToken.density.calc(-3)});
|
|
78
|
-
}
|
|
79
|
-
.base {
|
|
80
|
-
flex: 1 1 auto;
|
|
81
|
-
display: flex;
|
|
82
|
-
flex-direction: column;
|
|
83
|
-
align-items: unset;
|
|
84
|
-
justify-content: unset;
|
|
85
|
-
}
|
|
86
|
-
::slotted([slot="overline"]) {
|
|
87
|
-
font-size: var(--m3e-list-item-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize});
|
|
88
|
-
font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});
|
|
89
|
-
line-height: var(--m3e-list-item-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});
|
|
90
|
-
letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking});
|
|
91
|
-
}
|
|
92
|
-
::slotted([slot="supporting-text"]) {
|
|
93
|
-
font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken.typescale.standard.body.medium.fontSize});
|
|
94
|
-
font-weight: var(
|
|
95
|
-
--m3e-list-item-supporting-text-font-weight,
|
|
96
|
-
${DesignToken.typescale.standard.body.medium.fontWeight}
|
|
97
|
-
);
|
|
98
|
-
line-height: var(
|
|
99
|
-
--m3e-list-item-supporting-text-line-height,
|
|
100
|
-
${DesignToken.typescale.standard.body.medium.lineHeight}
|
|
101
|
-
);
|
|
102
|
-
letter-spacing: var(
|
|
103
|
-
--m3e-list-item-supporting-text-tracking,
|
|
104
|
-
${DesignToken.typescale.standard.body.medium.tracking}
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
::slotted(:not([slot])) {
|
|
108
|
-
font-size: var(--m3e-list-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize});
|
|
109
|
-
font-weight: var(--m3e-list-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});
|
|
110
|
-
line-height: var(--m3e-list-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});
|
|
111
|
-
letter-spacing: var(--m3e-list-item-tracking, ${DesignToken.typescale.standard.body.large.tracking});
|
|
112
|
-
}
|
|
113
|
-
::slotted([slot="trailing-supporting-text"]) {
|
|
114
|
-
white-space: nowrap;
|
|
115
|
-
font-size: var(
|
|
116
|
-
--m3e-list-item-trailing-supporting-text-font-size,
|
|
117
|
-
${DesignToken.typescale.standard.label.small.fontSize}
|
|
118
|
-
);
|
|
119
|
-
font-weight: var(
|
|
120
|
-
--m3e-list-item-trailing-supporting-text-font-weight,
|
|
121
|
-
${DesignToken.typescale.standard.label.small.fontWeight}
|
|
122
|
-
);
|
|
123
|
-
line-height: var(
|
|
124
|
-
--m3e-list-item-trailing-supporting-text-line-height,
|
|
125
|
-
${DesignToken.typescale.standard.label.small.lineHeight}
|
|
126
|
-
);
|
|
127
|
-
letter-spacing: var(
|
|
128
|
-
--m3e-list-item-trailing-supporting-text-tracking,
|
|
129
|
-
${DesignToken.typescale.standard.label.small.tracking}
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
::slotted([slot="leading-icon"]),
|
|
133
|
-
::slotted([slot="trailing-icon"]) {
|
|
134
|
-
width: 1em;
|
|
135
|
-
font-size: var(--m3e-list-item-icon-size, 1.5rem) !important;
|
|
136
|
-
}
|
|
137
|
-
`;
|
|
138
|
-
|
|
139
|
-
/** @inheritdoc */
|
|
140
|
-
protected override render(): unknown {
|
|
141
|
-
return html`<slot name="leading-icon"></slot>
|
|
142
|
-
<div class="base">
|
|
143
|
-
<slot name="overline"></slot>
|
|
144
|
-
<slot></slot>
|
|
145
|
-
<slot name="supporting-text"></slot>
|
|
146
|
-
</div>
|
|
147
|
-
<slot name="trailing-supporting-text"></slot>
|
|
148
|
-
<slot name="trailing-icon"></slot>`;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
declare global {
|
|
153
|
-
interface HTMLElementTagNameMap {
|
|
154
|
-
"m3e-list-item": M3eListItemElement;
|
|
155
|
-
}
|
|
156
|
-
}
|
package/src/index.ts
DELETED