@m3e/nav-menu 1.0.0-rc.3 → 1.0.0-rc.4
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 +57 -5
- package/dist/css-custom-data.json +10 -0
- package/dist/custom-elements.json +132 -12
- package/dist/html-custom-data.json +8 -2
- package/dist/index.js +846 -662
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +81 -64
- package/dist/index.min.js.map +1 -1
- package/dist/src/NavMenuElement.d.ts +29 -2
- package/dist/src/NavMenuElement.d.ts.map +1 -1
- package/dist/src/NavMenuItemElement.d.ts +32 -3
- package/dist/src/NavMenuItemElement.d.ts.map +1 -1
- package/dist/src/NavMenuItemGroupElement.d.ts +63 -0
- package/dist/src/NavMenuItemGroupElement.d.ts.map +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -3,7 +3,7 @@ import { SelectionManager, selectionManager } from "@m3e/core/a11y";
|
|
|
3
3
|
import { M3eNavMenuItemElement } from "./NavMenuItemElement";
|
|
4
4
|
declare const M3eNavMenuElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* A hierarchical menu, typically used on larger devices, that allows a user to switch between views.
|
|
7
7
|
*
|
|
8
8
|
* @description
|
|
9
9
|
* The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting
|
|
@@ -12,7 +12,34 @@ declare const M3eNavMenuElement_base: import("node_modules/@m3e/core/dist/src/sh
|
|
|
12
12
|
* and complex menu structures.
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
|
-
* The following example illustrates a
|
|
15
|
+
* The following example illustrates a navigation menu with a top-level group of menu items.
|
|
16
|
+
* ```html
|
|
17
|
+
* <m3e-nav-menu>
|
|
18
|
+
* <m3e-nav-menu-item-group>
|
|
19
|
+
* <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
|
|
20
|
+
* <m3e-nav-menu-item>
|
|
21
|
+
* <m3e-icon slot="icon" name="mail"></m3e-icon>
|
|
22
|
+
* <span slot="label">Inbox</span>
|
|
23
|
+
* <span slot="badge">24</span>
|
|
24
|
+
* </m3e-nav-menu-item>
|
|
25
|
+
* <m3e-nav-menu-item>
|
|
26
|
+
* <m3e-icon slot="icon" name="send"></m3e-icon>
|
|
27
|
+
* <span slot="label">Outbox</span>
|
|
28
|
+
* </m3e-nav-menu-item>
|
|
29
|
+
* <m3e-nav-menu-item>
|
|
30
|
+
* <m3e-icon slot="icon" name="favorite"></m3e-icon>
|
|
31
|
+
* <span slot="label">Favorites</span>
|
|
32
|
+
* </m3e-nav-menu-item>
|
|
33
|
+
* <m3e-nav-menu-item>
|
|
34
|
+
* <m3e-icon slot="icon" name="delete"></m3e-icon>
|
|
35
|
+
* <span slot="label">Trash</span>
|
|
36
|
+
* </m3e-nav-menu-item>
|
|
37
|
+
* </m3e-nav-menu-item-group>
|
|
38
|
+
* </m3e-nav-menu>
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* The next example illustrates a multilevel navigation menu.
|
|
16
43
|
* ```html
|
|
17
44
|
* <m3e-nav-menu>
|
|
18
45
|
* <m3e-nav-menu-item open>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavMenuElement.d.ts","sourceRoot":"","sources":["../../src/NavMenuElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;;AAE7D
|
|
1
|
+
{"version":3,"file":"NavMenuElement.d.ts","sourceRoot":"","sources":["../../src/NavMenuElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBACa,iBAAkB,SAAQ,sBAAwB;;IAC7D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoBpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAI5C,eAAe;IACf,QAAQ,CAAC,CAAC,gBAAgB,CAAC,0CAsBtB;;IAmBL,qCAAqC;IACrC,IAAI,QAAQ,IAAI,qBAAqB,GAAG,IAAI,CAE3C;IAED,iCAAiC;IACjC,IAAI,KAAK,IAAI,SAAS,qBAAqB,EAAE,CAE5C;IAED;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAI7C;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAc/C,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAQrC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAuJrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAC;KACnC;CACF"}
|
|
@@ -2,7 +2,7 @@ import { CSSResultGroup, LitElement, PropertyValues } from "lit";
|
|
|
2
2
|
import { M3eFocusRingElement, M3eRippleElement, M3eStateLayerElement } from "@m3e/core";
|
|
3
3
|
declare const M3eNavMenuItemElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").SelectedMixin> & 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> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
4
4
|
/**
|
|
5
|
-
* An expandable item
|
|
5
|
+
* An expandable item, selectable item within a navigation menu.
|
|
6
6
|
*
|
|
7
7
|
* @description
|
|
8
8
|
* The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.
|
|
@@ -10,8 +10,36 @@ declare const M3eNavMenuItemElement_base: import("node_modules/@m3e/core/dist/sr
|
|
|
10
10
|
* open/close transitions. The component is highly customizable via slots and CSS custom properties, and
|
|
11
11
|
* is designed for accessible, keyboard-navigable menu structures.
|
|
12
12
|
*
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* The following example illustrates a navigation menu with a top-level group of menu items.
|
|
16
|
+
* ```html
|
|
17
|
+
* <m3e-nav-menu>
|
|
18
|
+
* <m3e-nav-menu-item-group>
|
|
19
|
+
* <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
|
|
20
|
+
* <m3e-nav-menu-item>
|
|
21
|
+
* <m3e-icon slot="icon" name="mail"></m3e-icon>
|
|
22
|
+
* <span slot="label">Inbox</span>
|
|
23
|
+
* <span slot="badge">24</span>
|
|
24
|
+
* </m3e-nav-menu-item>
|
|
25
|
+
* <m3e-nav-menu-item>
|
|
26
|
+
* <m3e-icon slot="icon" name="send"></m3e-icon>
|
|
27
|
+
* <span slot="label">Outbox</span>
|
|
28
|
+
* </m3e-nav-menu-item>
|
|
29
|
+
* <m3e-nav-menu-item>
|
|
30
|
+
* <m3e-icon slot="icon" name="favorite"></m3e-icon>
|
|
31
|
+
* <span slot="label">Favorites</span>
|
|
32
|
+
* </m3e-nav-menu-item>
|
|
33
|
+
* <m3e-nav-menu-item>
|
|
34
|
+
* <m3e-icon slot="icon" name="delete"></m3e-icon>
|
|
35
|
+
* <span slot="label">Trash</span>
|
|
36
|
+
* </m3e-nav-menu-item>
|
|
37
|
+
* </m3e-nav-menu-item-group>
|
|
38
|
+
* </m3e-nav-menu>
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
13
41
|
* @example
|
|
14
|
-
* The
|
|
42
|
+
* The next example illustrates a multilevel navigation menu.
|
|
15
43
|
* ```html
|
|
16
44
|
* <m3e-nav-menu>
|
|
17
45
|
* <m3e-nav-menu-item open>
|
|
@@ -40,6 +68,7 @@ declare const M3eNavMenuItemElement_base: import("node_modules/@m3e/core/dist/sr
|
|
|
40
68
|
* @slot - Renders the nested child items.
|
|
41
69
|
* @slot label - Renders the label of the item.
|
|
42
70
|
* @slot icon - Renders the icon of the item.
|
|
71
|
+
* @slot badge - Renders the badge of the item.
|
|
43
72
|
* @slot selected-icon - Renders the icon of the item when selected.
|
|
44
73
|
* @slot toggle-icon - Renders the toggle icon.
|
|
45
74
|
*
|
|
@@ -133,7 +162,7 @@ export declare class M3eNavMenuItemElement extends M3eNavMenuItemElement_base {
|
|
|
133
162
|
/** @inheritdoc */
|
|
134
163
|
disconnectedCallback(): void;
|
|
135
164
|
/** @inheritdoc */
|
|
136
|
-
protected update(changedProperties: PropertyValues
|
|
165
|
+
protected update(changedProperties: PropertyValues): void;
|
|
137
166
|
/** @inheritdoc */
|
|
138
167
|
protected firstUpdated(_changedProperties: PropertyValues<this>): void;
|
|
139
168
|
/** @inheritdoc */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavMenuItemElement.d.ts","sourceRoot":"","sources":["../../src/NavMenuItemElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAIvF,OAAO,EAML,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EAGrB,MAAM,WAAW,CAAC;;AAMnB
|
|
1
|
+
{"version":3,"file":"NavMenuItemElement.d.ts","sourceRoot":"","sources":["../../src/NavMenuItemElement.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement } from "lit";
|
|
2
|
+
declare const M3eNavMenuItemGroupElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
3
|
+
/**
|
|
4
|
+
* A top-level semantic grouping of items in a navigation menu.
|
|
5
|
+
*
|
|
6
|
+
* @description
|
|
7
|
+
* The `m3e-nav-menu-item-group` is a top-level semantic grouping of items in a navigation menu.
|
|
8
|
+
* It encapsulates related items under a shared heading or label, supporting visual hierarchy and accessibility.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* The following example illustrates a navigation menu with a top-level group of menu items.
|
|
12
|
+
* ```html
|
|
13
|
+
* <m3e-nav-menu>
|
|
14
|
+
* <m3e-nav-menu-item-group>
|
|
15
|
+
* <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
|
|
16
|
+
* <m3e-nav-menu-item>
|
|
17
|
+
* <m3e-icon slot="icon" name="mail"></m3e-icon>
|
|
18
|
+
* <span slot="label">Inbox</span>
|
|
19
|
+
* <span slot="badge">24</span>
|
|
20
|
+
* </m3e-nav-menu-item>
|
|
21
|
+
* <m3e-nav-menu-item>
|
|
22
|
+
* <m3e-icon slot="icon" name="send"></m3e-icon>
|
|
23
|
+
* <span slot="label">Outbox</span>
|
|
24
|
+
* </m3e-nav-menu-item>
|
|
25
|
+
* <m3e-nav-menu-item>
|
|
26
|
+
* <m3e-icon slot="icon" name="favorite"></m3e-icon>
|
|
27
|
+
* <span slot="label">Favorites</span>
|
|
28
|
+
* </m3e-nav-menu-item>
|
|
29
|
+
* <m3e-nav-menu-item>
|
|
30
|
+
* <m3e-icon slot="icon" name="delete"></m3e-icon>
|
|
31
|
+
* <span slot="label">Trash</span>
|
|
32
|
+
* </m3e-nav-menu-item>
|
|
33
|
+
* </m3e-nav-menu-item-group>
|
|
34
|
+
* </m3e-nav-menu>
|
|
35
|
+
* ```
|
|
36
|
+
*
|
|
37
|
+
* @tag m3e-nav-menu-item-group
|
|
38
|
+
*
|
|
39
|
+
* @slot - Renders the items of the group.
|
|
40
|
+
* @slot label - Renders the label of the group.
|
|
41
|
+
*
|
|
42
|
+
* @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.
|
|
43
|
+
* @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.
|
|
44
|
+
*/
|
|
45
|
+
export declare class M3eNavMenuItemGroupElement extends M3eNavMenuItemGroupElement_base {
|
|
46
|
+
#private;
|
|
47
|
+
/** The styles of the element. */
|
|
48
|
+
static styles: CSSResultGroup;
|
|
49
|
+
/** @private */ private static __nextId;
|
|
50
|
+
/** @inheritdoc */
|
|
51
|
+
connectedCallback(): void;
|
|
52
|
+
/** @inheritdoc */
|
|
53
|
+
disconnectedCallback(): void;
|
|
54
|
+
/** @inheritdoc */
|
|
55
|
+
protected render(): unknown;
|
|
56
|
+
}
|
|
57
|
+
declare global {
|
|
58
|
+
interface HTMLElementTagNameMap {
|
|
59
|
+
"m3e-nav-menu-item-group": M3eNavMenuItemGroupElement;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
export {};
|
|
63
|
+
//# sourceMappingURL=NavMenuItemGroupElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavMenuItemGroupElement.d.ts","sourceRoot":"","sources":["../../src/NavMenuItemGroupElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,0BAA2B,SAAQ,+BAAyB;;IACvE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAiBpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAI5C,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,IAAI,OAAO;CA0BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,0BAA0B,CAAC;KACvD;CACF"}
|
package/dist/src/index.d.ts
CHANGED
package/dist/src/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@m3e/nav-menu",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.4",
|
|
4
4
|
"description": "Navigation Menu for M3E",
|
|
5
5
|
"author": "matraic <matraic@yahoo.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"clean": "rimraf dist"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
-
"@m3e/core": "1.0.0-rc.
|
|
30
|
+
"@m3e/core": "1.0.0-rc.4",
|
|
31
31
|
"lit": "^3.3.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|