@m3e/toolbar 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 +2574 -4
- package/dist/index.js +0 -1
- 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 -120
- package/dist/src/ToolbarElement.d.ts +0 -86
- package/dist/src/ToolbarElement.d.ts.map +0 -1
- package/dist/src/ToolbarShape.d.ts +0 -3
- package/dist/src/ToolbarShape.d.ts.map +0 -1
- package/dist/src/ToolbarVariant.d.ts +0 -3
- package/dist/src/ToolbarVariant.d.ts.map +0 -1
- package/dist/src/index.d.ts +0 -4
- package/dist/src/index.d.ts.map +0 -1
- package/eslint.config.mjs +0 -13
- package/rollup.config.js +0 -32
- package/src/ToolbarElement.ts +0 -199
- package/src/ToolbarShape.ts +0 -2
- package/src/ToolbarVariant.ts +0 -2
- package/src/index.ts +0 -3
- package/tsconfig.json +0 -9
package/demo/index.html
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en" style="overflow-y: auto">
|
|
3
|
-
<head>
|
|
4
|
-
<title>Toolbar for M3E</title>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<meta name="description" content="Toolbar 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
|
-
"@m3e/core/a11y": "../../core/dist/a11y.min.js"
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
</script>
|
|
28
|
-
<script type="module" src="../../button/dist/index.min.js"></script>
|
|
29
|
-
<script type="module" src="../../icon/dist/index.min.js"></script>
|
|
30
|
-
<script type="module" src="../../icon-button/dist/index.min.js"></script>
|
|
31
|
-
<script type="module" src="../../theme/dist/index.min.js"></script>
|
|
32
|
-
<script type="module" src="../dist/index.min.js"></script>
|
|
33
|
-
<style>
|
|
34
|
-
body {
|
|
35
|
-
font-family: "Roboto";
|
|
36
|
-
}
|
|
37
|
-
*:not(:defined) {
|
|
38
|
-
display: none;
|
|
39
|
-
}
|
|
40
|
-
</style>
|
|
41
|
-
</head>
|
|
42
|
-
<body>
|
|
43
|
-
<m3e-theme strong-focus>
|
|
44
|
-
<m3e-toolbar variant="vibrant" shape="rounded">
|
|
45
|
-
<m3e-icon-button>
|
|
46
|
-
<m3e-icon name="arrow_back"></m3e-icon>
|
|
47
|
-
</m3e-icon-button>
|
|
48
|
-
<m3e-icon-button>
|
|
49
|
-
<m3e-icon name="arrow_forward"></m3e-icon>
|
|
50
|
-
</m3e-icon-button>
|
|
51
|
-
<m3e-icon-button width="wide" variant="filled">
|
|
52
|
-
<m3e-icon name="add"></m3e-icon>
|
|
53
|
-
</m3e-icon-button>
|
|
54
|
-
<m3e-icon-button>
|
|
55
|
-
<m3e-icon name="picture_in_picture"></m3e-icon>
|
|
56
|
-
</m3e-icon-button>
|
|
57
|
-
<m3e-icon-button>
|
|
58
|
-
<m3e-icon name="more_vert"></m3e-icon>
|
|
59
|
-
</m3e-icon-button>
|
|
60
|
-
</m3e-toolbar>
|
|
61
|
-
<br /><br />
|
|
62
|
-
|
|
63
|
-
<m3e-toolbar>
|
|
64
|
-
<m3e-icon-button>
|
|
65
|
-
<m3e-icon name="arrow_back"></m3e-icon>
|
|
66
|
-
</m3e-icon-button>
|
|
67
|
-
<m3e-icon-button>
|
|
68
|
-
<m3e-icon name="arrow_forward"></m3e-icon>
|
|
69
|
-
</m3e-icon-button>
|
|
70
|
-
<m3e-icon-button width="wide" variant="filled">
|
|
71
|
-
<m3e-icon name="add"></m3e-icon>
|
|
72
|
-
</m3e-icon-button>
|
|
73
|
-
<m3e-icon-button>
|
|
74
|
-
<m3e-icon name="picture_in_picture"></m3e-icon>
|
|
75
|
-
</m3e-icon-button>
|
|
76
|
-
<m3e-icon-button>
|
|
77
|
-
<m3e-icon name="more_vert"></m3e-icon>
|
|
78
|
-
</m3e-icon-button>
|
|
79
|
-
</m3e-toolbar>
|
|
80
|
-
<br /><br />
|
|
81
|
-
|
|
82
|
-
<m3e-toolbar variant="vibrant" shape="rounded" elevated>
|
|
83
|
-
<m3e-icon-button>
|
|
84
|
-
<m3e-icon name="arrow_back"></m3e-icon>
|
|
85
|
-
</m3e-icon-button>
|
|
86
|
-
<m3e-icon-button>
|
|
87
|
-
<m3e-icon name="arrow_forward"></m3e-icon>
|
|
88
|
-
</m3e-icon-button>
|
|
89
|
-
<m3e-icon-button width="wide" variant="filled">
|
|
90
|
-
<m3e-icon name="add"></m3e-icon>
|
|
91
|
-
</m3e-icon-button>
|
|
92
|
-
<m3e-icon-button>
|
|
93
|
-
<m3e-icon name="picture_in_picture"></m3e-icon>
|
|
94
|
-
</m3e-icon-button>
|
|
95
|
-
<m3e-icon-button>
|
|
96
|
-
<m3e-icon name="more_vert"></m3e-icon>
|
|
97
|
-
</m3e-icon-button>
|
|
98
|
-
</m3e-toolbar>
|
|
99
|
-
<br /><br />
|
|
100
|
-
|
|
101
|
-
<m3e-toolbar variant="vibrant" shape="rounded" elevated vertical>
|
|
102
|
-
<m3e-icon-button>
|
|
103
|
-
<m3e-icon name="arrow_back"></m3e-icon>
|
|
104
|
-
</m3e-icon-button>
|
|
105
|
-
<m3e-icon-button>
|
|
106
|
-
<m3e-icon name="arrow_forward"></m3e-icon>
|
|
107
|
-
</m3e-icon-button>
|
|
108
|
-
<m3e-icon-button width="wide" variant="filled">
|
|
109
|
-
<m3e-icon name="add"></m3e-icon>
|
|
110
|
-
</m3e-icon-button>
|
|
111
|
-
<m3e-icon-button>
|
|
112
|
-
<m3e-icon name="picture_in_picture"></m3e-icon>
|
|
113
|
-
</m3e-icon-button>
|
|
114
|
-
<m3e-icon-button>
|
|
115
|
-
<m3e-icon name="more_vert"></m3e-icon>
|
|
116
|
-
</m3e-icon-button>
|
|
117
|
-
</m3e-toolbar>
|
|
118
|
-
</m3e-theme>
|
|
119
|
-
</body>
|
|
120
|
-
</html>
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { CSSResultGroup, LitElement, PropertyValues } from "lit";
|
|
2
|
-
import { ToolbarVariant } from "./ToolbarVariant";
|
|
3
|
-
import { ToolbarShape } from "./ToolbarShape";
|
|
4
|
-
declare const M3eToolbarElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").VerticalMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
5
|
-
/**
|
|
6
|
-
* @summary
|
|
7
|
-
* Presents frequently used actions relevant to the current page.
|
|
8
|
-
*
|
|
9
|
-
* @description
|
|
10
|
-
* The `m3e-toolbar` component presents contextual actions, navigation, and controls. Designed according to
|
|
11
|
-
* Material 3 principles, it supports vertical and horizontal orientation, shape and variant customization,
|
|
12
|
-
* and adaptive layout via CSS custom properties.
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* The following example illustrates a `vibrant`, `rounded` toolbar containing icon buttons.
|
|
16
|
-
*
|
|
17
|
-
* ```html
|
|
18
|
-
* <m3e-toolbar variant="vibrant" shape="rounded">
|
|
19
|
-
* <m3e-icon-button>
|
|
20
|
-
* <m3e-icon name="arrow_back"></m3e-icon>
|
|
21
|
-
* </m3e-icon-button>
|
|
22
|
-
* <m3e-icon-button>
|
|
23
|
-
* <m3e-icon name="arrow_forward"></m3e-icon>
|
|
24
|
-
* </m3e-icon-button>
|
|
25
|
-
* <m3e-icon-button width="wide" variant="filled">
|
|
26
|
-
* <m3e-icon name="add"></m3e-icon>
|
|
27
|
-
* </m3e-icon-button>
|
|
28
|
-
* <m3e-icon-button>
|
|
29
|
-
* <m3e-icon name="picture_in_picture"></m3e-icon>
|
|
30
|
-
* </m3e-icon-button>
|
|
31
|
-
* <m3e-icon-button>
|
|
32
|
-
* <m3e-icon name="more_vert"></m3e-icon>
|
|
33
|
-
* </m3e-icon-button>
|
|
34
|
-
* </m3e-toolbar>
|
|
35
|
-
* ```
|
|
36
|
-
*
|
|
37
|
-
* @tag m3e-toolbar
|
|
38
|
-
*
|
|
39
|
-
* @slot - Renders the content of the toolbar.
|
|
40
|
-
*
|
|
41
|
-
* @attr elevated - Whether the toolbar is elevated.
|
|
42
|
-
* @attr shape - The shape of the toolbar.
|
|
43
|
-
* @attr variant - The appearance variant of the toolbar.
|
|
44
|
-
* @attr vertical - Whether the element is oriented vertically.
|
|
45
|
-
*
|
|
46
|
-
* @cssprop --m3e-toolbar-size - The size (height or width) of the toolbar.
|
|
47
|
-
* @cssprop --m3e-toolbar-spacing - The gap between toolbar items.
|
|
48
|
-
* @cssprop --m3e-toolbar-rounded-shape - Border radius for rounded shape.
|
|
49
|
-
* @cssprop --m3e-toolbar-rounded-padding - Padding for rounded shape.
|
|
50
|
-
* @cssprop --m3e-toolbar-square-padding - Padding for square shape.
|
|
51
|
-
* @cssprop --m3e-toolbar-standard-container-color - Container color for the standard variant.
|
|
52
|
-
* @cssprop --m3e-toolbar-standard-color - Foreground color for the standard variant.
|
|
53
|
-
* @cssprop --m3e-toolbar-vibrant-container-color - Container color for the vibrant variant.
|
|
54
|
-
* @cssprop --m3e-toolbar-vibrant-color - Foreground color for the vibrant variant.
|
|
55
|
-
*/
|
|
56
|
-
export declare class M3eToolbarElement extends M3eToolbarElement_base {
|
|
57
|
-
#private;
|
|
58
|
-
/** The styles of the element. */
|
|
59
|
-
static styles: CSSResultGroup;
|
|
60
|
-
/**
|
|
61
|
-
* The appearance variant of the toolbar.
|
|
62
|
-
* @default "standard"
|
|
63
|
-
*/
|
|
64
|
-
variant: ToolbarVariant;
|
|
65
|
-
/**
|
|
66
|
-
* The shape of the toolbar.
|
|
67
|
-
* @default "square"
|
|
68
|
-
*/
|
|
69
|
-
shape: ToolbarShape;
|
|
70
|
-
/**
|
|
71
|
-
* Whether the toolbar is elevated.
|
|
72
|
-
* @default false
|
|
73
|
-
*/
|
|
74
|
-
elevated: boolean;
|
|
75
|
-
/** @inheritdoc */
|
|
76
|
-
protected update(changedProperties: PropertyValues<this>): void;
|
|
77
|
-
/** @inheritdoc */
|
|
78
|
-
protected render(): unknown;
|
|
79
|
-
}
|
|
80
|
-
declare global {
|
|
81
|
-
interface HTMLElementTagNameMap {
|
|
82
|
-
"m3e-toolbar": M3eToolbarElement;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
export {};
|
|
86
|
-
//# sourceMappingURL=ToolbarElement.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarElement.d.ts","sourceRoot":"","sources":["../../src/ToolbarElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,iBAAkB,SAAQ,sBAAqC;;IAC1E,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA8DpC;IAIF;;;OAGG;IAC0B,OAAO,EAAE,cAAc,CAAc;IAElE;;;OAGG;IAC0B,KAAK,EAAE,YAAY,CAAY;IAE5D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAmCrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarShape.d.ts","sourceRoot":"","sources":["../../src/ToolbarShape.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarVariant.d.ts","sourceRoot":"","sources":["../../src/ToolbarVariant.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,SAAS,CAAC"}
|
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,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,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", "@m3e/core/a11y", "lit"],
|
|
30
|
-
plugins: [resolve(), typescript()],
|
|
31
|
-
},
|
|
32
|
-
];
|
package/src/ToolbarElement.ts
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
|
|
2
|
-
import { customElement, property } from "lit/decorators.js";
|
|
3
|
-
|
|
4
|
-
import { DesignToken, Role, Vertical } from "@m3e/core";
|
|
5
|
-
import { RovingTabIndexManager, M3eInteractivityChecker } from "@m3e/core/a11y";
|
|
6
|
-
|
|
7
|
-
import { ToolbarVariant } from "./ToolbarVariant";
|
|
8
|
-
import { ToolbarShape } from "./ToolbarShape";
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* @summary
|
|
12
|
-
* Presents frequently used actions relevant to the current page.
|
|
13
|
-
*
|
|
14
|
-
* @description
|
|
15
|
-
* The `m3e-toolbar` component presents contextual actions, navigation, and controls. Designed according to
|
|
16
|
-
* Material 3 principles, it supports vertical and horizontal orientation, shape and variant customization,
|
|
17
|
-
* and adaptive layout via CSS custom properties.
|
|
18
|
-
*
|
|
19
|
-
* @example
|
|
20
|
-
* The following example illustrates a `vibrant`, `rounded` toolbar containing icon buttons.
|
|
21
|
-
*
|
|
22
|
-
* ```html
|
|
23
|
-
* <m3e-toolbar variant="vibrant" shape="rounded">
|
|
24
|
-
* <m3e-icon-button>
|
|
25
|
-
* <m3e-icon name="arrow_back"></m3e-icon>
|
|
26
|
-
* </m3e-icon-button>
|
|
27
|
-
* <m3e-icon-button>
|
|
28
|
-
* <m3e-icon name="arrow_forward"></m3e-icon>
|
|
29
|
-
* </m3e-icon-button>
|
|
30
|
-
* <m3e-icon-button width="wide" variant="filled">
|
|
31
|
-
* <m3e-icon name="add"></m3e-icon>
|
|
32
|
-
* </m3e-icon-button>
|
|
33
|
-
* <m3e-icon-button>
|
|
34
|
-
* <m3e-icon name="picture_in_picture"></m3e-icon>
|
|
35
|
-
* </m3e-icon-button>
|
|
36
|
-
* <m3e-icon-button>
|
|
37
|
-
* <m3e-icon name="more_vert"></m3e-icon>
|
|
38
|
-
* </m3e-icon-button>
|
|
39
|
-
* </m3e-toolbar>
|
|
40
|
-
* ```
|
|
41
|
-
*
|
|
42
|
-
* @tag m3e-toolbar
|
|
43
|
-
*
|
|
44
|
-
* @slot - Renders the content of the toolbar.
|
|
45
|
-
*
|
|
46
|
-
* @attr elevated - Whether the toolbar is elevated.
|
|
47
|
-
* @attr shape - The shape of the toolbar.
|
|
48
|
-
* @attr variant - The appearance variant of the toolbar.
|
|
49
|
-
* @attr vertical - Whether the element is oriented vertically.
|
|
50
|
-
*
|
|
51
|
-
* @cssprop --m3e-toolbar-size - The size (height or width) of the toolbar.
|
|
52
|
-
* @cssprop --m3e-toolbar-spacing - The gap between toolbar items.
|
|
53
|
-
* @cssprop --m3e-toolbar-rounded-shape - Border radius for rounded shape.
|
|
54
|
-
* @cssprop --m3e-toolbar-rounded-padding - Padding for rounded shape.
|
|
55
|
-
* @cssprop --m3e-toolbar-square-padding - Padding for square shape.
|
|
56
|
-
* @cssprop --m3e-toolbar-standard-container-color - Container color for the standard variant.
|
|
57
|
-
* @cssprop --m3e-toolbar-standard-color - Foreground color for the standard variant.
|
|
58
|
-
* @cssprop --m3e-toolbar-vibrant-container-color - Container color for the vibrant variant.
|
|
59
|
-
* @cssprop --m3e-toolbar-vibrant-color - Foreground color for the vibrant variant.
|
|
60
|
-
*/
|
|
61
|
-
@customElement("m3e-toolbar")
|
|
62
|
-
export class M3eToolbarElement extends Vertical(Role(LitElement, "toolbar")) {
|
|
63
|
-
/** The styles of the element. */
|
|
64
|
-
static override styles: CSSResultGroup = css`
|
|
65
|
-
:host {
|
|
66
|
-
display: inline-block;
|
|
67
|
-
position: relative;
|
|
68
|
-
}
|
|
69
|
-
.base {
|
|
70
|
-
display: flex;
|
|
71
|
-
align-items: center;
|
|
72
|
-
box-sizing: border-box;
|
|
73
|
-
border-radius: inherit;
|
|
74
|
-
}
|
|
75
|
-
:host(:not([vertical])) {
|
|
76
|
-
height: fit-content;
|
|
77
|
-
}
|
|
78
|
-
:host(:not([vertical])) .base {
|
|
79
|
-
height: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});
|
|
80
|
-
column-gap: var(--m3e-toolbar-spacing, 0.25rem);
|
|
81
|
-
}
|
|
82
|
-
:host([vertical]) {
|
|
83
|
-
width: fit-content;
|
|
84
|
-
}
|
|
85
|
-
:host([vertical]) .base {
|
|
86
|
-
width: calc(var(--m3e-toolbar-size, 4rem) + ${DesignToken.density.calc(-3)});
|
|
87
|
-
}
|
|
88
|
-
:host([vertical]) .base {
|
|
89
|
-
flex-direction: column;
|
|
90
|
-
justify-content: center;
|
|
91
|
-
row-gap: var(--m3e-toolbar-spacing, 0.25rem);
|
|
92
|
-
}
|
|
93
|
-
:host([shape="rounded"]) {
|
|
94
|
-
border-radius: var(--m3e-toolbar-rounded-shape, ${DesignToken.shape.corner.full});
|
|
95
|
-
}
|
|
96
|
-
:host([shape="rounded"]) .base {
|
|
97
|
-
padding: var(--m3e-toolbar-rounded-padding, 0.5rem);
|
|
98
|
-
}
|
|
99
|
-
:host(:not([vertical])[shape="square"]) .base {
|
|
100
|
-
padding-inline: var(--m3e-toolbar-square-padding, 1rem);
|
|
101
|
-
}
|
|
102
|
-
:host([vertical][shape="square"]) .base {
|
|
103
|
-
padding-block: var(--m3e-toolbar-square-padding, 1rem);
|
|
104
|
-
}
|
|
105
|
-
:host([variant="standard"]) .state-layer {
|
|
106
|
-
background-color: var(--m3e-toolbar-standard-container-color, ${DesignToken.color.surfaceContainer});
|
|
107
|
-
}
|
|
108
|
-
:host([variant="standard"]) .base {
|
|
109
|
-
color: var(--m3e-toolbar-standard-color, ${DesignToken.color.onSurface});
|
|
110
|
-
}
|
|
111
|
-
:host([variant="vibrant"]) .state-layer {
|
|
112
|
-
background-color: var(--m3e-toolbar-vibrant-container-color, ${DesignToken.color.primaryContainer});
|
|
113
|
-
}
|
|
114
|
-
:host([variant="vibrant"]) .base {
|
|
115
|
-
color: var(--m3e-toolbar-vibrant-color, ${DesignToken.color.onPrimaryContainer});
|
|
116
|
-
}
|
|
117
|
-
@media (forced-colors: active) {
|
|
118
|
-
:host([variant]) .state-layer {
|
|
119
|
-
background-color: Canvas;
|
|
120
|
-
}
|
|
121
|
-
:host([variant]) .base {
|
|
122
|
-
color: CanvasText;
|
|
123
|
-
outline: 1px solid CanvasText;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
`;
|
|
127
|
-
|
|
128
|
-
/** @private */ #focusKeyManager = new RovingTabIndexManager().withHomeAndEnd();
|
|
129
|
-
|
|
130
|
-
/**
|
|
131
|
-
* The appearance variant of the toolbar.
|
|
132
|
-
* @default "standard"
|
|
133
|
-
*/
|
|
134
|
-
@property({ reflect: true }) variant: ToolbarVariant = "standard";
|
|
135
|
-
|
|
136
|
-
/**
|
|
137
|
-
* The shape of the toolbar.
|
|
138
|
-
* @default "square"
|
|
139
|
-
*/
|
|
140
|
-
@property({ reflect: true }) shape: ToolbarShape = "square";
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Whether the toolbar is elevated.
|
|
144
|
-
* @default false
|
|
145
|
-
*/
|
|
146
|
-
@property({ type: Boolean, reflect: true }) elevated = false;
|
|
147
|
-
|
|
148
|
-
/** @inheritdoc */
|
|
149
|
-
protected override update(changedProperties: PropertyValues<this>): void {
|
|
150
|
-
super.update(changedProperties);
|
|
151
|
-
|
|
152
|
-
if (changedProperties.has("vertical")) {
|
|
153
|
-
this.#focusKeyManager.vertical = this.vertical;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
/** @inheritdoc */
|
|
158
|
-
protected override render(): unknown {
|
|
159
|
-
return html`<m3e-state-layer class="state-layer"></m3e-state-layer>
|
|
160
|
-
<m3e-elevation class="elevation" level="${this.elevated ? 3 : 0}"></m3e-elevation>
|
|
161
|
-
<div class="base">
|
|
162
|
-
<slot
|
|
163
|
-
@click="${this.#handleClick}"
|
|
164
|
-
@keydown="${this.#handleKeyDown}"
|
|
165
|
-
@slotchange="${this.#handleSlotChange}"
|
|
166
|
-
></slot>
|
|
167
|
-
</div>`;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
/** @private */
|
|
171
|
-
#handleSlotChange(): void {
|
|
172
|
-
const { added } = this.#focusKeyManager.setItems(M3eInteractivityChecker.findInteractiveElements(this));
|
|
173
|
-
if (!this.#focusKeyManager.activeItem) {
|
|
174
|
-
const active = added.find((x) => !x.hasAttribute("disabled"));
|
|
175
|
-
if (active) {
|
|
176
|
-
this.#focusKeyManager.updateActiveItem(active);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/** @private */
|
|
182
|
-
#handleKeyDown(e: KeyboardEvent): void {
|
|
183
|
-
this.#focusKeyManager.onKeyDown(e);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
/** @private */
|
|
187
|
-
#handleClick(e: Event): void {
|
|
188
|
-
const item = e.composedPath().find((x) => x instanceof HTMLElement && this.#focusKeyManager.items.includes(x));
|
|
189
|
-
if (item) {
|
|
190
|
-
this.#focusKeyManager.updateActiveItem(<HTMLElement>item);
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
declare global {
|
|
196
|
-
interface HTMLElementTagNameMap {
|
|
197
|
-
"m3e-toolbar": M3eToolbarElement;
|
|
198
|
-
}
|
|
199
|
-
}
|
package/src/ToolbarShape.ts
DELETED
package/src/ToolbarVariant.ts
DELETED
package/src/index.ts
DELETED