@m3e/fab 1.0.0-rc.1 → 1.0.0-rc.3

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.
Files changed (24) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2912 -12
  3. package/dist/html-custom-data.json +3 -3
  4. package/dist/index.js +2 -1
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js.map +1 -1
  7. package/dist/src/FabElement.d.ts +2 -1
  8. package/dist/src/FabElement.d.ts.map +1 -1
  9. package/package.json +3 -3
  10. package/cem.config.mjs +0 -16
  11. package/demo/index.html +0 -80
  12. package/eslint.config.mjs +0 -13
  13. package/rollup.config.js +0 -32
  14. package/src/FabElement.ts +0 -448
  15. package/src/FabSize.ts +0 -2
  16. package/src/FabVariant.ts +0 -9
  17. package/src/index.ts +0 -3
  18. package/src/styles/FabSizeStyle.ts +0 -45
  19. package/src/styles/FabSizeToken.ts +0 -102
  20. package/src/styles/FabStyle.ts +0 -155
  21. package/src/styles/FabVariantStyle.ts +0 -95
  22. package/src/styles/FabVariantToken.ts +0 -1068
  23. package/src/styles/index.ts +0 -3
  24. package/tsconfig.json +0 -9
package/dist/src/FabElement.d.ts CHANGED
@@ -3,7 +3,6 @@ import { FabSize } from "./FabSize";
3
3
  import { FabVariant } from "./FabVariant";
4
4
  declare const M3eFabElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LinkButtonMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormSubmitterMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledInteractiveMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
5
5
  /**
6
- * @summary
7
6
  * A floating action button (FAB) used to present important actions.
8
7
  *
9
8
  * @description
@@ -58,6 +57,8 @@ declare const M3eFabElement_base: import("node_modules/@m3e/core/dist/src/shared
58
57
  * @attr value - The value associated with the element's name when it's submitted with form data.
59
58
  * @attr variant - The appearance variant of the button.
60
59
  *
60
+ * @fires click - Emitted when the element is clicked.
61
+ *
61
62
  * @cssprop --m3e-fab-small-container-height - Height of the small FAB container.
62
63
  * @cssprop --m3e-fab-small-label-text-font-size - Font size for the small FAB label text.
63
64
  * @cssprop --m3e-fab-small-label-text-font-weight - Font weight for the small FAB label text.
package/dist/src/FabElement.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FabElement.d.ts","sourceRoot":"","sources":["../../src/FabElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAoBvE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgTG;AACH,qBACa,aAAc,SAAQ,kBAElC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAA6C;IAEnF,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACrE,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;;IAgB9E;;;OAGG;IAC0B,OAAO,EAAE,UAAU,CAAuB;IAEvE;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IAC0B,IAAI,EAAE,OAAO,CAAY;IAEtD;;;OAGG;IACyC,QAAQ,UAAS;IAE7D,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY1E,kBAAkB;IACT,MAAM,IAAI,OAAO;CAgC3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}
1
+ {"version":3,"file":"FabElement.d.ts","sourceRoot":"","sources":["../../src/FabElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAoBvE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiTG;AACH,qBACa,aAAc,SAAQ,kBAElC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAA6C;IAEnF,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACrE,eAAe,CAAsB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACvF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;;IAgB9E;;;OAGG;IAC0B,OAAO,EAAE,UAAU,CAAuB;IAEvE;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IAC0B,IAAI,EAAE,OAAO,CAAY;IAEtD;;;OAGG;IACyC,QAAQ,UAAS;IAE7D,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY1E,kBAAkB;IACT,MAAM,IAAI,OAAO;CAgC3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@m3e/fab",
3
- "version": "1.0.0-rc.1",
3
+ "version": "1.0.0-rc.3",
4
4
  "description": "FAB for M3E",
5
5
  "author": "matraic <matraic@yahoo.com>",
6
6
  "license": "MIT",
7
- "homepage": "https://matraic.github.io/m3e/",
7
+ "homepage": "https://matraic.github.io/m3e/#/components/fab.html",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/matraic/m3e.git"
@@ -28,7 +28,7 @@
28
28
  "clean": "rimraf dist"
29
29
  },
30
30
  "peerDependencies": {
31
- "@m3e/core": "1.0.0-rc.1",
31
+ "@m3e/core": "1.0.0-rc.3",
32
32
  "lit": "^3.3.0"
33
33
  },
34
34
  "devDependencies": {
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,80 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" style="overflow-y: auto">
3
- <head>
4
- <title>Floating Action Button for M3E</title>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="description" content="Floating Action Button 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-fab aria-label="Fab" variant="primary-container"><m3e-icon name="edit"></m3e-icon></m3e-fab>
42
- <m3e-fab aria-label="Fab" variant="secondary-container"><m3e-icon name="edit"></m3e-icon></m3e-fab>
43
- <m3e-fab aria-label="Fab" variant="tertiary-container"><m3e-icon name="edit"></m3e-icon></m3e-fab>
44
- <m3e-fab aria-label="Fab" variant="primary"><m3e-icon name="edit"></m3e-icon></m3e-fab>
45
- <m3e-fab aria-label="Fab" variant="secondary"><m3e-icon name="edit"></m3e-icon></m3e-fab>
46
- <m3e-fab aria-label="Fab" variant="tertiary"><m3e-icon name="edit"></m3e-icon></m3e-fab>
47
- <m3e-fab aria-label="Fab" variant="surface"><m3e-icon name="edit"></m3e-icon></m3e-fab>
48
- <br /><br />
49
-
50
- <m3e-fab size="small"><m3e-icon name="edit"></m3e-icon></m3e-fab>
51
- <m3e-fab size="medium"><m3e-icon name="edit"></m3e-icon></m3e-fab>
52
- <m3e-fab size="large"><m3e-icon name="edit"></m3e-icon></m3e-fab>
53
- <br /><br />
54
-
55
- <m3e-fab>
56
- <m3e-icon name="edit"></m3e-icon>
57
- <span slot="label">Extended</span>
58
- </m3e-fab>
59
- <m3e-fab extended>
60
- <span slot="label">Extended</span>
61
- </m3e-fab>
62
- <br /><br />
63
-
64
- <m3e-fab href="https://m3.material.io/components/floating-action-button/overview" target="_blank" extended>
65
- <m3e-icon name="edit"></m3e-icon>
66
- <span slot="label">Link Button</span>
67
- </m3e-fab>
68
- <m3e-fab
69
- href="https://m3.material.io/components/floating-action-button/overview"
70
- target="_blank"
71
- aria-label="Fab"
72
- >
73
- <m3e-icon name="edit"></m3e-icon>
74
- </m3e-fab>
75
- <br /><br />
76
- <m3e-fab aria-label="Fab" disabled><m3e-icon name="edit"></m3e-icon></m3e-fab>
77
- <m3e-fab aria-label="Fab" disabled-interactive><m3e-icon name="edit"></m3e-icon></m3e-fab>
78
- </m3e-theme>
79
- </body>
80
- </html>
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/FabElement.ts DELETED
@@ -1,448 +0,0 @@
1
- import { CSSResultGroup, html, LitElement, PropertyValues } from "lit";
2
- import { customElement, property, query } from "lit/decorators.js";
3
-
4
- import {
5
- renderPseudoLink,
6
- AttachInternals,
7
- Disabled,
8
- DisabledInteractive,
9
- Focusable,
10
- FormSubmitter,
11
- LinkButton,
12
- M3eElevationElement,
13
- M3eFocusRingElement,
14
- M3eRippleElement,
15
- M3eStateLayerElement,
16
- PressedController,
17
- Role,
18
- KeyboardClick,
19
- } from "@m3e/core";
20
-
21
- import { FabSize } from "./FabSize";
22
- import { FabVariant } from "./FabVariant";
23
-
24
- import { FabSizeStyle, FabStyle, FabVariantStyle } from "./styles";
25
-
26
- /**
27
- * @summary
28
- * A floating action button (FAB) used to present important actions.
29
- *
30
- * @description
31
- * The `m3e-fab` component is a prominent, expressive UI component that represents the primary action on a screen.
32
- * Designed according to Material Design 3 guidelines, it supports seven visual variants, specified using the
33
- * `variant` attribute—`primary`, `primary-container`, `secondary`, `secondary-container`, `tertiary`, `tertiary-container`
34
- * and `surface`—each with dynamic elevation and adaptive color theming.
35
- *
36
- * The component is accessible by default, with ARIA roles, contrast-safe color tokens, and strong focus indicators.
37
- * It can be extended to display a label alongside its icon, and responds to interaction states (hover, focus, press, disabled)
38
- * with smooth motion transitions, elevation changes, and adaptive color theming. It can also function as a link or be
39
- * used to submit form data.
40
- *
41
- * Native disabled `<button>` elements cannot receive focus. This can be problematic in some cases because it can prevent you
42
- * from telling the user why the button is disabled. You can use the `disabled-interactive` attribute to style a `m3e-fab`
43
- * as disabled but allow for it to receive focus. The button will have `aria-disabled="true"` for assistive technology.
44
- *
45
- * @example
46
- * The following example illustrates a basic floating action button.
47
- * ```html
48
- * <m3e-fab>
49
- * <m3e-icon>add</m3e-icon>
50
- * </m3e-fab>
51
- * ```
52
- *
53
- * @example
54
- * The next example illustrates an extended floating action button.
55
- * ```html
56
- * <m3e-fab extended>
57
- * <m3e-icon>add</m3e-icon>
58
- * <span slot="label">Add</span>
59
- * </m3e-fab>
60
- * ```
61
- *
62
- * @tag m3e-fab
63
- *
64
- * @slot - Renders the icon of the button.
65
- * @slot label - Renders the label of an extended button.
66
- * @slot close-icon - Renders the close icon when used to open a FAB menu.
67
- *
68
- * @attr disabled - Whether the element is disabled.
69
- * @attr disabled-interactive - Whether the element is disabled and interactive.
70
- * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
71
- * @attr extended - Whether the button is extended to show the label.
72
- * @attr href - The URL to which the link button points.
73
- * @attr lowered - Whether to present a lowered elevation.
74
- * @attr name - The name of the element, submitted as a pair with the element's `value` as part of form data, when the element is used to submit a form.
75
- * @attr rel - The relationship between the `target` of the link button and the document.
76
- * @attr size - The size of the button.
77
- * @attr target - The target of the link button.
78
- * @attr type - The type of the element.
79
- * @attr value - The value associated with the element's name when it's submitted with form data.
80
- * @attr variant - The appearance variant of the button.
81
- *
82
- * @cssprop --m3e-fab-small-container-height - Height of the small FAB container.
83
- * @cssprop --m3e-fab-small-label-text-font-size - Font size for the small FAB label text.
84
- * @cssprop --m3e-fab-small-label-text-font-weight - Font weight for the small FAB label text.
85
- * @cssprop --m3e-fab-small-label-text-line-height - Line height for the small FAB label text.
86
- * @cssprop --m3e-fab-small-label-text-tracking - Letter spacing (tracking) for the small FAB label text.
87
- * @cssprop --m3e-fab-small-icon-size - Icon size for the small FAB.
88
- * @cssprop --m3e-fab-small-shape - Border radius for the small FAB.
89
- * @cssprop --m3e-fab-small-leading-space - Leading space for the small FAB.
90
- * @cssprop --m3e-fab-small-trailing-space - Trailing space for the small FAB.
91
- * @cssprop --m3e-fab-small-icon-label-space - Space between icon and label for the small FAB.
92
- * @cssprop --m3e-fab-medium-container-height - Height of the medium FAB container.
93
- * @cssprop --m3e-fab-medium-label-text-font-size - Font size for the medium FAB label text.
94
- * @cssprop --m3e-fab-medium-label-text-font-weight - Font weight for the medium FAB label text.
95
- * @cssprop --m3e-fab-medium-label-text-line-height - Line height for the medium FAB label text.
96
- * @cssprop --m3e-fab-medium-label-text-tracking - Letter spacing (tracking) for the medium FAB label text.
97
- * @cssprop --m3e-fab-medium-icon-size - Icon size for the medium FAB.
98
- * @cssprop --m3e-fab-medium-shape - Border radius for the medium FAB.
99
- * @cssprop --m3e-fab-medium-leading-space - Leading space for the medium FAB.
100
- * @cssprop --m3e-fab-medium-trailing-space - Trailing space for the medium FAB.
101
- * @cssprop --m3e-fab-medium-icon-label-space - Space between icon and label for the medium FAB.
102
- * @cssprop --m3e-fab-large-container-height - Height of the large FAB container.
103
- * @cssprop --m3e-fab-large-label-text-font-size - Font size for the large FAB label text.
104
- * @cssprop --m3e-fab-large-label-text-font-weight - Font weight for the large FAB label text.
105
- * @cssprop --m3e-fab-large-label-text-line-height - Line height for the large FAB label text.
106
- * @cssprop --m3e-fab-large-label-text-tracking - Letter spacing (tracking) for the large FAB label text.
107
- * @cssprop --m3e-fab-large-icon-size - Icon size for the large FAB.
108
- * @cssprop --m3e-fab-large-shape - Border radius for the large FAB.
109
- * @cssprop --m3e-fab-large-leading-space - Leading space for the large FAB.
110
- * @cssprop --m3e-fab-large-trailing-space - Trailing space for the large FAB.
111
- * @cssprop --m3e-fab-large-icon-label-space - Space between icon and label for the large FAB.
112
- * @cssprop --m3e-primary-fab-label-text-color - Default label text color for primary FAB.
113
- * @cssprop --m3e-primary-fab-icon-color - Default icon color for primary FAB.
114
- * @cssprop --m3e-primary-fab-container-color - Default container background color for primary FAB.
115
- * @cssprop --m3e-primary-fab-container-elevation - Resting elevation for primary FAB.
116
- * @cssprop --m3e-primary-fab-lowered-container-elevation - Lowered resting elevation for primary FAB.
117
- * @cssprop --m3e-primary-fab-disabled-container-color - Container background color when disabled (primary).
118
- * @cssprop --m3e-primary-fab-disabled-container-opacity - Opacity of container when disabled (primary).
119
- * @cssprop --m3e-primary-fab-disabled-icon-color - Icon color when disabled (primary).
120
- * @cssprop --m3e-primary-fab-disabled-icon-opacity - Icon opacity when disabled (primary).
121
- * @cssprop --m3e-primary-fab-disabled-label-text-color - Label text color when disabled (primary).
122
- * @cssprop --m3e-primary-fab-disabled-label-text-opacity - Label text opacity when disabled (primary).
123
- * @cssprop --m3e-primary-fab-disabled-container-elevation - Elevation when disabled (primary).
124
- * @cssprop --m3e-primary-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (primary).
125
- * @cssprop --m3e-primary-fab-hover-icon-color - Icon color on hover (primary).
126
- * @cssprop --m3e-primary-fab-hover-label-text-color - Label text color on hover (primary).
127
- * @cssprop --m3e-primary-fab-hover-state-layer-color - State layer color on hover (primary).
128
- * @cssprop --m3e-primary-fab-hover-state-layer-opacity - State layer opacity on hover (primary).
129
- * @cssprop --m3e-primary-fab-hover-container-elevation - Elevation on hover (primary).
130
- * @cssprop --m3e-primary-fab-lowered-hover-container-elevation - Lowered elevation on hover (primary).
131
- * @cssprop --m3e-primary-fab-focus-icon-color - Icon color on focus (primary).
132
- * @cssprop --m3e-primary-fab-focus-label-text-color - Label text color on focus (primary).
133
- * @cssprop --m3e-primary-fab-focus-state-layer-color - State layer color on focus (primary).
134
- * @cssprop --m3e-primary-fab-focus-state-layer-opacity - State layer opacity on focus (primary).
135
- * @cssprop --m3e-primary-fab-focus-container-elevation - Elevation on focus (primary).
136
- * @cssprop --m3e-primary-fab-lowered-focus-container-elevation - Lowered elevation on focus (primary).
137
- * @cssprop --m3e-primary-fab-pressed-icon-color - Icon color on pressed (primary).
138
- * @cssprop --m3e-primary-fab-pressed-label-text-color - Label text color on pressed (primary).
139
- * @cssprop --m3e-primary-fab-pressed-state-layer-color - State layer color on pressed (primary).
140
- * @cssprop --m3e-primary-fab-pressed-state-layer-opacity - State layer opacity on pressed (primary).
141
- * @cssprop --m3e-primary-fab-pressed-container-elevation - Elevation on pressed (primary).
142
- * @cssprop --m3e-primary-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (primary).
143
- * @cssprop --m3e-secondary-fab-label-text-color - Default label text color for secondary FAB.
144
- * @cssprop --m3e-secondary-fab-icon-color - Default icon color for secondary FAB.
145
- * @cssprop --m3e-secondary-fab-container-color - Default container background color for secondary FAB.
146
- * @cssprop --m3e-secondary-fab-container-elevation - Resting elevation for secondary FAB.
147
- * @cssprop --m3e-secondary-fab-lowered-container-elevation - Lowered resting elevation for secondary FAB.
148
- * @cssprop --m3e-secondary-fab-disabled-container-color - Container background color when disabled (secondary).
149
- * @cssprop --m3e-secondary-fab-disabled-container-opacity - Opacity of container when disabled (secondary).
150
- * @cssprop --m3e-secondary-fab-disabled-icon-color - Icon color when disabled (secondary).
151
- * @cssprop --m3e-secondary-fab-disabled-icon-opacity - Icon opacity when disabled (secondary).
152
- * @cssprop --m3e-secondary-fab-disabled-label-text-color - Label text color when disabled (secondary).
153
- * @cssprop --m3e-secondary-fab-disabled-label-text-opacity - Label text opacity when disabled (secondary).
154
- * @cssprop --m3e-secondary-fab-disabled-container-elevation - Elevation when disabled (secondary).
155
- * @cssprop --m3e-secondary-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (secondary).
156
- * @cssprop --m3e-secondary-fab-hover-icon-color - Icon color on hover (secondary).
157
- * @cssprop --m3e-secondary-fab-hover-label-text-color - Label text color on hover (secondary).
158
- * @cssprop --m3e-secondary-fab-hover-state-layer-color - State layer color on hover (secondary).
159
- * @cssprop --m3e-secondary-fab-hover-state-layer-opacity - State layer opacity on hover (secondary).
160
- * @cssprop --m3e-secondary-fab-hover-container-elevation - Elevation on hover (secondary).
161
- * @cssprop --m3e-secondary-fab-lowered-hover-container-elevation - Lowered elevation on hover (secondary).
162
- * @cssprop --m3e-secondary-fab-focus-icon-color - Icon color on focus (secondary).
163
- * @cssprop --m3e-secondary-fab-focus-label-text-color - Label text color on focus (secondary).
164
- * @cssprop --m3e-secondary-fab-focus-state-layer-color - State layer color on focus (secondary).
165
- * @cssprop --m3e-secondary-fab-focus-state-layer-opacity - State layer opacity on focus (secondary).
166
- * @cssprop --m3e-secondary-fab-focus-container-elevation - Elevation on focus (secondary).
167
- * @cssprop --m3e-secondary-fab-lowered-focus-container-elevation - Lowered elevation on focus (secondary).
168
- * @cssprop --m3e-secondary-fab-pressed-icon-color - Icon color on pressed (secondary).
169
- * @cssprop --m3e-secondary-fab-pressed-label-text-color - Label text color on pressed (secondary).
170
- * @cssprop --m3e-secondary-fab-pressed-state-layer-color - State layer color on pressed (secondary).
171
- * @cssprop --m3e-secondary-fab-pressed-state-layer-opacity - State layer opacity on pressed (secondary).
172
- * @cssprop --m3e-secondary-fab-pressed-container-elevation - Elevation on pressed (secondary).
173
- * @cssprop --m3e-secondary-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (secondary).
174
- * @cssprop --m3e-tertiary-fab-label-text-color - Default label text color for tertiary FAB.
175
- * @cssprop --m3e-tertiary-fab-icon-color - Default icon color for tertiary FAB.
176
- * @cssprop --m3e-tertiary-fab-container-color - Default container background color for tertiary FAB.
177
- * @cssprop --m3e-tertiary-fab-container-elevation - Resting elevation for tertiary FAB.
178
- * @cssprop --m3e-tertiary-fab-lowered-container-elevation - Lowered resting elevation for tertiary FAB.
179
- * @cssprop --m3e-tertiary-fab-disabled-container-color - Container background color when disabled (tertiary).
180
- * @cssprop --m3e-tertiary-fab-disabled-container-opacity - Opacity of container when disabled (tertiary).
181
- * @cssprop --m3e-tertiary-fab-disabled-icon-color - Icon color when disabled (tertiary).
182
- * @cssprop --m3e-tertiary-fab-disabled-icon-opacity - Icon opacity when disabled (tertiary).
183
- * @cssprop --m3e-tertiary-fab-disabled-label-text-color - Label text color when disabled (tertiary).
184
- * @cssprop --m3e-tertiary-fab-disabled-label-text-opacity - Label text opacity when disabled (tertiary).
185
- * @cssprop --m3e-tertiary-fab-disabled-container-elevation - Elevation when disabled (tertiary).
186
- * @cssprop --m3e-tertiary-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (tertiary).
187
- * @cssprop --m3e-tertiary-fab-hover-icon-color - Icon color on hover (tertiary).
188
- * @cssprop --m3e-tertiary-fab-hover-label-text-color - Label text color on hover (tertiary).
189
- * @cssprop --m3e-tertiary-fab-hover-state-layer-color - State layer color on hover (tertiary).
190
- * @cssprop --m3e-tertiary-fab-hover-state-layer-opacity - State layer opacity on hover (tertiary).
191
- * @cssprop --m3e-tertiary-fab-hover-container-elevation - Elevation on hover (tertiary).
192
- * @cssprop --m3e-tertiary-fab-lowered-hover-container-elevation - Lowered elevation on hover (tertiary).
193
- * @cssprop --m3e-tertiary-fab-focus-icon-color - Icon color on focus (tertiary).
194
- * @cssprop --m3e-tertiary-fab-focus-label-text-color - Label text color on focus (tertiary).
195
- * @cssprop --m3e-tertiary-fab-focus-state-layer-color - State layer color on focus (tertiary).
196
- * @cssprop --m3e-tertiary-fab-focus-state-layer-opacity - State layer opacity on focus (tertiary).
197
- * @cssprop --m3e-tertiary-fab-focus-container-elevation - Elevation on focus (tertiary).
198
- * @cssprop --m3e-tertiary-fab-lowered-focus-container-elevation - Lowered elevation on focus (tertiary).
199
- * @cssprop --m3e-tertiary-fab-pressed-icon-color - Icon color on pressed (tertiary).
200
- * @cssprop --m3e-tertiary-fab-pressed-label-text-color - Label text color on pressed (tertiary).
201
- * @cssprop --m3e-tertiary-fab-pressed-state-layer-color - State layer color on pressed (tertiary).
202
- * @cssprop --m3e-tertiary-fab-pressed-state-layer-opacity - State layer opacity on pressed (tertiary).
203
- * @cssprop --m3e-tertiary-fab-pressed-container-elevation - Elevation on pressed (tertiary).
204
- * @cssprop --m3e-tertiary-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (tertiary).
205
- * @cssprop --m3e-primary-container-fab-label-text-color - Default label text color for primary-container FAB.
206
- * @cssprop --m3e-primary-container-fab-icon-color - Default icon color for primary-container FAB.
207
- * @cssprop --m3e-primary-container-fab-container-color - Default container background color for primary-container FAB.
208
- * @cssprop --m3e-primary-container-fab-container-elevation - Resting elevation for primary-container FAB.
209
- * @cssprop --m3e-primary-container-fab-lowered-container-elevation - Lowered resting elevation for primary-container FAB.
210
- * @cssprop --m3e-primary-container-fab-disabled-container-color - Container background color when disabled (primary-container).
211
- * @cssprop --m3e-primary-container-fab-disabled-container-opacity - Opacity of container when disabled (primary-container).
212
- * @cssprop --m3e-primary-container-fab-disabled-icon-color - Icon color when disabled (primary-container).
213
- * @cssprop --m3e-primary-container-fab-disabled-icon-opacity - Icon opacity when disabled (primary-container).
214
- * @cssprop --m3e-primary-container-fab-disabled-label-text-color - Label text color when disabled (primary-container).
215
- * @cssprop --m3e-primary-container-fab-disabled-label-text-opacity - Label text opacity when disabled (primary-container).
216
- * @cssprop --m3e-primary-container-fab-disabled-container-elevation - Elevation when disabled (primary-container).
217
- * @cssprop --m3e-primary-container-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (primary-container).
218
- * @cssprop --m3e-primary-container-fab-hover-icon-color - Icon color on hover (primary-container).
219
- * @cssprop --m3e-primary-container-fab-hover-label-text-color - Label text color on hover (primary-container).
220
- * @cssprop --m3e-primary-container-fab-hover-state-layer-color - State layer color on hover (primary-container).
221
- * @cssprop --m3e-primary-container-fab-hover-state-layer-opacity - State layer opacity on hover (primary-container).
222
- * @cssprop --m3e-primary-container-fab-hover-container-elevation - Elevation on hover (primary-container).
223
- * @cssprop --m3e-primary-container-fab-lowered-hover-container-elevation - Lowered elevation on hover (primary-container).
224
- * @cssprop --m3e-primary-container-fab-focus-icon-color - Icon color on focus (primary-container).
225
- * @cssprop --m3e-primary-container-fab-focus-label-text-color - Label text color on focus (primary-container).
226
- * @cssprop --m3e-primary-container-fab-focus-state-layer-color - State layer color on focus (primary-container).
227
- * @cssprop --m3e-primary-container-fab-focus-state-layer-opacity - State layer opacity on focus (primary-container).
228
- * @cssprop --m3e-primary-container-fab-focus-container-elevation - Elevation on focus (primary-container).
229
- * @cssprop --m3e-primary-container-fab-lowered-focus-container-elevation - Lowered elevation on focus (primary-container).
230
- * @cssprop --m3e-primary-container-fab-pressed-icon-color - Icon color on pressed (primary-container).
231
- * @cssprop --m3e-primary-container-fab-pressed-label-text-color - Label text color on pressed (primary-container).
232
- * @cssprop --m3e-primary-container-fab-pressed-state-layer-color - State layer color on pressed (primary-container).
233
- * @cssprop --m3e-primary-container-fab-pressed-state-layer-opacity - State layer opacity on pressed (primary-container).
234
- * @cssprop --m3e-primary-container-fab-pressed-container-elevation - Elevation on pressed (primary-container).
235
- * @cssprop --m3e-primary-container-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (primary-container).
236
- * @cssprop --m3e-secondary-container-fab-label-text-color - Default label text color for secondary-container FAB.
237
- * @cssprop --m3e-secondary-container-fab-icon-color - Default icon color for secondary-container FAB.
238
- * @cssprop --m3e-secondary-container-fab-container-color - Default container background color for secondary-container FAB.
239
- * @cssprop --m3e-secondary-container-fab-container-elevation - Resting elevation for secondary-container FAB.
240
- * @cssprop --m3e-secondary-container-fab-lowered-container-elevation - Lowered resting elevation for secondary-container FAB.
241
- * @cssprop --m3e-secondary-container-fab-disabled-container-color - Container background color when disabled (secondary-container).
242
- * @cssprop --m3e-secondary-container-fab-disabled-container-opacity - Opacity of container when disabled (secondary-container).
243
- * @cssprop --m3e-secondary-container-fab-disabled-icon-color - Icon color when disabled (secondary-container).
244
- * @cssprop --m3e-secondary-container-fab-disabled-icon-opacity - Icon opacity when disabled (secondary-container).
245
- * @cssprop --m3e-secondary-container-fab-disabled-label-text-color - Label text color when disabled (secondary-container).
246
- * @cssprop --m3e-secondary-container-fab-disabled-label-text-opacity - Label text opacity when disabled (secondary-container).
247
- * @cssprop --m3e-secondary-container-fab-disabled-container-elevation - Elevation when disabled (secondary-container).
248
- * @cssprop --m3e-secondary-container-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (secondary-container).
249
- * @cssprop --m3e-secondary-container-fab-hover-icon-color - Icon color on hover (secondary-container).
250
- * @cssprop --m3e-secondary-container-fab-hover-label-text-color - Label text color on hover (secondary-container).
251
- * @cssprop --m3e-secondary-container-fab-hover-state-layer-color - State layer color on hover (secondary-container).
252
- * @cssprop --m3e-secondary-container-fab-hover-state-layer-opacity - State layer opacity on hover (secondary-container).
253
- * @cssprop --m3e-secondary-container-fab-hover-container-elevation - Elevation on hover (secondary-container).
254
- * @cssprop --m3e-secondary-container-fab-lowered-hover-container-elevation - Lowered elevation on hover (secondary-container).
255
- * @cssprop --m3e-secondary-container-fab-focus-icon-color - Icon color on focus (secondary-container).
256
- * @cssprop --m3e-secondary-container-fab-focus-label-text-color - Label text color on focus (secondary-container).
257
- * @cssprop --m3e-secondary-container-fab-focus-state-layer-color - State layer color on focus (secondary-container).
258
- * @cssprop --m3e-secondary-container-fab-focus-state-layer-opacity - State layer opacity on focus (secondary-container).
259
- * @cssprop --m3e-secondary-container-fab-focus-container-elevation - Elevation on focus (secondary-container).
260
- * @cssprop --m3e-secondary-container-fab-lowered-focus-container-elevation - Lowered elevation on focus (secondary-container).
261
- * @cssprop --m3e-secondary-container-fab-pressed-icon-color - Icon color on pressed (secondary-container).
262
- * @cssprop --m3e-secondary-container-fab-pressed-label-text-color - Label text color on pressed (secondary-container).
263
- * @cssprop --m3e-secondary-container-fab-pressed-state-layer-color - State layer color on pressed (secondary-container).
264
- * @cssprop --m3e-secondary-container-fab-pressed-state-layer-opacity - State layer opacity on pressed (secondary-container).
265
- * @cssprop --m3e-secondary-container-fab-pressed-container-elevation - Elevation on pressed (secondary-container).
266
- * @cssprop --m3e-secondary-container-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (secondary-container).
267
- * @cssprop --m3e-tertiary-container-fab-label-text-color - Default label text color for tertiary-container FAB.
268
- * @cssprop --m3e-tertiary-container-fab-icon-color - Default icon color for tertiary-container FAB.
269
- * @cssprop --m3e-tertiary-container-fab-container-color - Default container background color for tertiary-container FAB.
270
- * @cssprop --m3e-tertiary-container-fab-container-elevation - Resting elevation for tertiary-container FAB.
271
- * @cssprop --m3e-tertiary-container-fab-lowered-container-elevation - Lowered resting elevation for tertiary-container FAB.
272
- * @cssprop --m3e-tertiary-container-fab-disabled-container-color - Container background color when disabled (tertiary-container).
273
- * @cssprop --m3e-tertiary-container-fab-disabled-container-opacity - Opacity of container when disabled (tertiary-container).
274
- * @cssprop --m3e-tertiary-container-fab-disabled-icon-color - Icon color when disabled (tertiary-container).
275
- * @cssprop --m3e-tertiary-container-fab-disabled-icon-opacity - Icon opacity when disabled (tertiary-container).
276
- * @cssprop --m3e-tertiary-container-fab-disabled-label-text-color - Label text color when disabled (tertiary-container).
277
- * @cssprop --m3e-tertiary-container-fab-disabled-label-text-opacity - Label text opacity when disabled (tertiary-container).
278
- * @cssprop --m3e-tertiary-container-fab-disabled-container-elevation - Elevation when disabled (tertiary-container).
279
- * @cssprop --m3e-tertiary-container-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (tertiary-container).
280
- * @cssprop --m3e-tertiary-container-fab-hover-icon-color - Icon color on hover (tertiary-container).
281
- * @cssprop --m3e-tertiary-container-fab-hover-label-text-color - Label text color on hover (tertiary-container).
282
- * @cssprop --m3e-tertiary-container-fab-hover-state-layer-color - State layer color on hover (tertiary-container).
283
- * @cssprop --m3e-tertiary-container-fab-hover-state-layer-opacity - State layer opacity on hover (tertiary-container).
284
- * @cssprop --m3e-tertiary-container-fab-hover-container-elevation - Elevation on hover (tertiary-container).
285
- * @cssprop --m3e-tertiary-container-fab-lowered-hover-container-elevation - Lowered elevation on hover (tertiary-container).
286
- * @cssprop --m3e-tertiary-container-fab-focus-icon-color - Icon color on focus (tertiary-container).
287
- * @cssprop --m3e-tertiary-container-fab-focus-label-text-color - Label text color on focus (tertiary-container).
288
- * @cssprop --m3e-tertiary-container-fab-focus-state-layer-color - State layer color on focus (tertiary-container).
289
- * @cssprop --m3e-tertiary-container-fab-focus-state-layer-opacity - State layer opacity on focus (tertiary-container).
290
- * @cssprop --m3e-tertiary-container-fab-focus-container-elevation - Elevation on focus (tertiary-container).
291
- * @cssprop --m3e-tertiary-container-fab-lowered-focus-container-elevation - Lowered elevation on focus (tertiary-container).
292
- * @cssprop --m3e-tertiary-container-fab-pressed-icon-color - Icon color on pressed (tertiary-container).
293
- * @cssprop --m3e-tertiary-container-fab-pressed-label-text-color - Label text color on pressed (tertiary-container).
294
- * @cssprop --m3e-tertiary-container-fab-pressed-state-layer-color - State layer color on pressed (tertiary-container).
295
- * @cssprop --m3e-tertiary-container-fab-pressed-state-layer-opacity - State layer opacity on pressed (tertiary-container).
296
- * @cssprop --m3e-tertiary-container-fab-pressed-container-elevation - Elevation on pressed (tertiary-container).
297
- * @cssprop --m3e-tertiary-container-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (tertiary-container).
298
- * @cssprop --m3e-surface-fab-label-text-color - Default label text color for surface FAB.
299
- * @cssprop --m3e-surface-fab-icon-color - Default icon color for surface FAB.
300
- * @cssprop --m3e-surface-fab-container-color - Default container background color for surface FAB.
301
- * @cssprop --m3e-surface-fab-container-elevation - Resting elevation for surface FAB.
302
- * @cssprop --m3e-surface-fab-lowered-container-elevation - Lowered resting elevation for surface FAB.
303
- * @cssprop --m3e-surface-fab-lowered-container-color - Lowered container background color for surface FAB.
304
- * @cssprop --m3e-surface-fab-disabled-container-color - Container background color when disabled (surface).
305
- * @cssprop --m3e-surface-fab-disabled-container-opacity - Opacity of container when disabled (surface).
306
- * @cssprop --m3e-surface-fab-disabled-icon-color - Icon color when disabled (surface).
307
- * @cssprop --m3e-surface-fab-disabled-icon-opacity - Icon opacity when disabled (surface).
308
- * @cssprop --m3e-surface-fab-disabled-label-text-color - Label text color when disabled (surface).
309
- * @cssprop --m3e-surface-fab-disabled-label-text-opacity - Label text opacity when disabled (surface).
310
- * @cssprop --m3e-surface-fab-disabled-container-elevation - Elevation when disabled (surface).
311
- * @cssprop --m3e-surface-fab-lowered-disabled-container-elevation - Lowered elevation when disabled (surface).
312
- * @cssprop --m3e-surface-fab-hover-icon-color - Icon color on hover (surface).
313
- * @cssprop --m3e-surface-fab-hover-label-text-color - Label text color on hover (surface).
314
- * @cssprop --m3e-surface-fab-hover-state-layer-color - State layer color on hover (surface).
315
- * @cssprop --m3e-surface-fab-hover-state-layer-opacity - State layer opacity on hover (surface).
316
- * @cssprop --m3e-surface-fab-hover-container-elevation - Elevation on hover (surface).
317
- * @cssprop --m3e-surface-fab-lowered-hover-container-elevation - Lowered elevation on hover (surface).
318
- * @cssprop --m3e-surface-fab-focus-icon-color - Icon color on focus (surface).
319
- * @cssprop --m3e-surface-fab-focus-label-text-color - Label text color on focus (surface).
320
- * @cssprop --m3e-surface-fab-focus-state-layer-color - State layer color on focus (surface).
321
- * @cssprop --m3e-surface-fab-focus-state-layer-opacity - State layer opacity on focus (surface).
322
- * @cssprop --m3e-surface-fab-focus-container-elevation - Elevation on focus (surface).
323
- * @cssprop --m3e-surface-fab-lowered-focus-container-elevation - Lowered elevation on focus (surface).
324
- * @cssprop --m3e-surface-fab-pressed-icon-color - Icon color on pressed (surface).
325
- * @cssprop --m3e-surface-fab-pressed-label-text-color - Label text color on pressed (surface).
326
- * @cssprop --m3e-surface-fab-pressed-state-layer-color - State layer color on pressed (surface).
327
- * @cssprop --m3e-surface-fab-pressed-state-layer-opacity - State layer opacity on pressed (surface).
328
- * @cssprop --m3e-surface-fab-pressed-container-elevation - Elevation on pressed (surface).
329
- * @cssprop --m3e-surface-fab-lowered-pressed-container-elevation - Lowered elevation on pressed (surface).
330
- */
331
- @customElement("m3e-fab")
332
- export class M3eFabElement extends KeyboardClick(
333
- LinkButton(FormSubmitter(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, "button"), true))))))
334
- ) {
335
- /** The styles of the element. */
336
- static override styles: CSSResultGroup = [FabSizeStyle, FabVariantStyle, FabStyle];
337
-
338
- /** @private */ @query(".base") private readonly _base?: HTMLElement;
339
- /** @private */ @query(".elevation") private readonly _elevation?: M3eElevationElement;
340
- /** @private */ @query(".focus-ring") private readonly _focusRing?: M3eFocusRingElement;
341
- /** @private */ @query(".state-layer") private readonly _stateLayer?: M3eStateLayerElement;
342
- /** @private */ @query(".ripple") private readonly _ripple?: M3eRippleElement;
343
-
344
- constructor() {
345
- super();
346
-
347
- new PressedController(this, {
348
- isPressedKey: (key) => key === " " || key === "Enter",
349
- callback: (pressed) => {
350
- if (!this.disabled && !this.disabledInteractive) {
351
- this._base?.classList.toggle("pressed", pressed);
352
- this._base?.classList.toggle("resting", !pressed);
353
- }
354
- },
355
- });
356
- }
357
-
358
- /**
359
- * The appearance variant of the button.
360
- * @default "primary-container"
361
- */
362
- @property({ reflect: true }) variant: FabVariant = "primary-container";
363
-
364
- /**
365
- * Whether to present a lowered elevation.
366
- * @default false
367
- */
368
- @property({ type: Boolean, reflect: true }) lowered = false;
369
-
370
- /**
371
- * The size of the button.
372
- * @default "medium"
373
- */
374
- @property({ reflect: true }) size: FabSize = "medium";
375
-
376
- /**
377
- * Whether the button is extended to show the label.
378
- * @default false
379
- */
380
- @property({ type: Boolean, reflect: true }) extended = false;
381
-
382
- /** @inheritdoc */
383
- override disconnectedCallback(): void {
384
- super.disconnectedCallback();
385
-
386
- this._base?.classList.toggle("pressed", false);
387
- this._base?.classList.toggle("resting", false);
388
- }
389
-
390
- /** @inheritdoc */
391
- protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
392
- super.firstUpdated(_changedProperties);
393
- [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
394
- }
395
-
396
- /** @inheritdoc */
397
- protected override updated(_changedProperties: PropertyValues<this>): void {
398
- super.updated(_changedProperties);
399
-
400
- if (
401
- (_changedProperties.has("disabled") && this.disabled) ||
402
- (_changedProperties.has("disabledInteractive") && this.disabledInteractive)
403
- ) {
404
- this._base?.classList.toggle("pressed", false);
405
- this._base?.classList.toggle("resting", false);
406
- }
407
- }
408
-
409
- /** @inheritdoc */
410
- override render(): unknown {
411
- return html`<div class="base">
412
- <m3e-elevation class="elevation" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-elevation>
413
- <m3e-state-layer class="state-layer" ?disabled="${this.disabled || this.disabledInteractive}"></m3e-state-layer>
414
- <m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring>
415
- <m3e-ripple
416
- class="ripple"
417
- ?centered="${!this.extended}"
418
- ?disabled="${this.disabled || this.disabledInteractive}"
419
- ></m3e-ripple>
420
- <div class="touch" aria-hidden="true"></div>
421
- ${this[renderPseudoLink]()}
422
- <div class="wrapper">
423
- <slot class="icon" aria-hidden="true" @slotchange="${this.#handleSlotChange}"></slot>
424
- <slot class="icon" aria-hidden="true" name="close-icon">
425
- <svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor">
426
- <path
427
- d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
428
- />
429
- </svg>
430
- </slot>
431
- <div class="label">
432
- <slot name="label" @slotchange="${this.#handleSlotChange}"></slot>
433
- </div>
434
- </div>
435
- </div>`;
436
- }
437
-
438
- /** @private */
439
- #handleSlotChange(): void {
440
- this._base?.classList.toggle("-with-menu", this.querySelector("m3e-fab-menu-trigger") !== null);
441
- }
442
- }
443
-
444
- declare global {
445
- interface HTMLElementTagNameMap {
446
- "m3e-fab": M3eFabElement;
447
- }
448
- }