@m3e/nav-menu 1.0.0-rc.2 → 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.
Files changed (17) hide show
  1. package/README.md +57 -5
  2. package/dist/css-custom-data.json +10 -0
  3. package/dist/custom-elements.json +143 -52
  4. package/dist/html-custom-data.json +8 -2
  5. package/dist/index.js +846 -662
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.min.js +81 -64
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/src/NavMenuElement.d.ts +113 -0
  10. package/dist/src/NavMenuElement.d.ts.map +1 -0
  11. package/dist/src/NavMenuItemElement.d.ts +189 -0
  12. package/dist/src/NavMenuItemElement.d.ts.map +1 -0
  13. package/dist/src/NavMenuItemGroupElement.d.ts +63 -0
  14. package/dist/src/NavMenuItemGroupElement.d.ts.map +1 -0
  15. package/dist/src/index.d.ts +4 -0
  16. package/dist/src/index.d.ts.map +1 -0
  17. package/package.json +2 -2
package/dist/src/NavMenuElement.d.ts ADDED
@@ -0,0 +1,113 @@
1
+ import { CSSResultGroup, LitElement } from "lit";
2
+ import { SelectionManager, selectionManager } from "@m3e/core/a11y";
3
+ import { M3eNavMenuItemElement } from "./NavMenuItemElement";
4
+ declare const M3eNavMenuElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
5
+ /**
6
+ * A hierarchical menu, typically used on larger devices, that allows a user to switch between views.
7
+ *
8
+ * @description
9
+ * The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting
10
+ * nested expandable items, keyboard navigation, and focus management. It is highly customizable
11
+ * via slots and CSS custom properties, and is designed for use in sidebars, navigation drawers,
12
+ * and complex menu structures.
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
+ *
41
+ * @example
42
+ * The next example illustrates a multilevel navigation menu.
43
+ * ```html
44
+ * <m3e-nav-menu>
45
+ * <m3e-nav-menu-item open>
46
+ * <m3e-icon slot="icon" name="rocket_launch"></m3e-icon>
47
+ * <span slot="label">Getting Started</span>
48
+ * <m3e-nav-menu-item>
49
+ * <m3e-icon slot="icon" name="widgets"></m3e-icon>
50
+ * <span slot="label">Overview</span>
51
+ * </m3e-nav-menu-item>
52
+ * <m3e-nav-menu-item>
53
+ * <m3e-icon slot="icon" name="package_2"></m3e-icon>
54
+ * <span slot="label">Installation</span>
55
+ * </m3e-nav-menu-item>
56
+ * </m3e-nav-menu-item>
57
+ * <m3e-nav-menu-item>
58
+ * <span slot="label">Actions</span>
59
+ * <m3e-nav-menu-item><span slot="label">Button</span></m3e-nav-menu-item>
60
+ * <m3e-nav-menu-item><span slot="label">Icon</span></m3e-nav-menu-item>
61
+ * <m3e-nav-menu-item><span slot="label">Icon Button</span></m3e-nav-menu-item>
62
+ * </m3e-nav-menu-item>
63
+ * </m3e-nav-menu>
64
+ * ```
65
+ *
66
+ * @tag m3e-nav-menu
67
+ *
68
+ * @slot - Renders the items of the menu.
69
+ *
70
+ * @cssprop --m3e-nav-menu-padding-top - Top padding for the menu.
71
+ * @cssprop --m3e-nav-menu-padding-bottom - Bottom padding for the menu.
72
+ * @cssprop --m3e-nav-menu-padding-left - Left padding for the menu.
73
+ * @cssprop --m3e-nav-menu-padding-right - Right padding for the menu.
74
+ * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements in the menu.
75
+ * @cssprop --m3e-nav-menu-scrollbar-width - Width of the menu scrollbar.
76
+ * @cssprop --m3e-nav-menu-scrollbar-color - Color of the menu scrollbar.
77
+ */
78
+ export declare class M3eNavMenuElement extends M3eNavMenuElement_base {
79
+ #private;
80
+ /** The styles of the element. */
81
+ static styles: CSSResultGroup;
82
+ /** @private */ private static __nextId;
83
+ /** @private */
84
+ readonly [selectionManager]: SelectionManager<M3eNavMenuItemElement>;
85
+ constructor();
86
+ /** The selected item of the menu. */
87
+ get selected(): M3eNavMenuItemElement | null;
88
+ /** All the items of the menu. */
89
+ get items(): readonly M3eNavMenuItemElement[];
90
+ /**
91
+ * Expands the specified items, or all items if no items are provided.
92
+ * @param {M3eNavMenuItemElement | undefined} items The items to expand.
93
+ */
94
+ expand(items?: M3eNavMenuItemElement[]): void;
95
+ /**
96
+ * Collapses the specified items, or all items if no items are provided.
97
+ * @param {M3eNavMenuItemElement | undefined} items The items to collapse.
98
+ */
99
+ collapse(items?: M3eNavMenuItemElement[]): void;
100
+ /** @inheritdoc */
101
+ connectedCallback(): void;
102
+ /** @inheritdoc */
103
+ disconnectedCallback(): void;
104
+ /** @inheritdoc */
105
+ protected render(): unknown;
106
+ }
107
+ declare global {
108
+ interface HTMLElementTagNameMap {
109
+ "m3e-nav-menu": M3eNavMenuElement;
110
+ }
111
+ }
112
+ export {};
113
+ //# sourceMappingURL=NavMenuElement.d.ts.map
package/dist/src/NavMenuElement.d.ts.map ADDED
@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
package/dist/src/NavMenuItemElement.d.ts ADDED
@@ -0,0 +1,189 @@
1
+ import { CSSResultGroup, LitElement, PropertyValues } from "lit";
2
+ import { M3eFocusRingElement, M3eRippleElement, M3eStateLayerElement } from "@m3e/core";
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
+ /**
5
+ * An expandable item, selectable item within a navigation menu.
6
+ *
7
+ * @description
8
+ * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.
9
+ * It supports nested child items, selection, disabled and indeterminate states, and emits events for
10
+ * open/close transitions. The component is highly customizable via slots and CSS custom properties, and
11
+ * is designed for accessible, keyboard-navigable menu structures.
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
+ *
41
+ * @example
42
+ * The next example illustrates a multilevel navigation menu.
43
+ * ```html
44
+ * <m3e-nav-menu>
45
+ * <m3e-nav-menu-item open>
46
+ * <m3e-icon slot="icon" name="rocket_launch"></m3e-icon>
47
+ * <span slot="label">Getting Started</span>
48
+ * <m3e-nav-menu-item>
49
+ * <m3e-icon slot="icon" name="widgets"></m3e-icon>
50
+ * <span slot="label">Overview</span>
51
+ * </m3e-nav-menu-item>
52
+ * <m3e-nav-menu-item>
53
+ * <m3e-icon slot="icon" name="package_2"></m3e-icon>
54
+ * <span slot="label">Installation</span>
55
+ * </m3e-nav-menu-item>
56
+ * </m3e-nav-menu-item>
57
+ * <m3e-nav-menu-item>
58
+ * <span slot="label">Actions</span>
59
+ * <m3e-nav-menu-item><span slot="label">Button</span></m3e-nav-menu-item>
60
+ * <m3e-nav-menu-item><span slot="label">Icon</span></m3e-nav-menu-item>
61
+ * <m3e-nav-menu-item><span slot="label">Icon Button</span></m3e-nav-menu-item>
62
+ * </m3e-nav-menu-item>
63
+ * </m3e-nav-menu>
64
+ * ```
65
+ *
66
+ * @tag m3e-nav-menu-item
67
+ *
68
+ * @slot - Renders the nested child items.
69
+ * @slot label - Renders the label of the item.
70
+ * @slot icon - Renders the icon of the item.
71
+ * @slot badge - Renders the badge of the item.
72
+ * @slot selected-icon - Renders the icon of the item when selected.
73
+ * @slot toggle-icon - Renders the toggle icon.
74
+ *
75
+ * @attr disabled - Whether the element is disabled.
76
+ * @attr indeterminate - Whether the element's selected / checked state is indeterminate.
77
+ * @attr open - Whether the item is expanded.
78
+ * @attr selected - Whether the item is selected.
79
+ *
80
+ * @fires opening - Emitted when the item begins to open.
81
+ * @fires opened - Emitted when the item has opened.
82
+ * @fires closing - Emitted when the item begins to close.
83
+ * @fires closed - Emitted when the item has closed.
84
+ * @fires click - Emitted when the element is clicked.
85
+ *
86
+ * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.
87
+ * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.
88
+ * @cssprop --m3e-nav-menu-item-line-height - Line height for the item label.
89
+ * @cssprop --m3e-nav-menu-item-tracking - Letter spacing for the item label.
90
+ * @cssprop --m3e-nav-menu-item-padding - Inline padding for the item.
91
+ * @cssprop --m3e-nav-menu-item-height - Height of the item.
92
+ * @cssprop --m3e-nav-menu-item-spacing - Spacing between icon and label.
93
+ * @cssprop --m3e-nav-menu-item-shape - Border radius of the item and focus ring.
94
+ * @cssprop --m3e-nav-menu-item-icon-size - Size of the icon.
95
+ * @cssprop --m3e-nav-menu-item-inset - Indentation for nested items.
96
+ * @cssprop --m3e-nav-menu-item-label-color - Text color for the item label.
97
+ * @cssprop --m3e-nav-menu-item-selected-label-color - Text color for selected item label.
98
+ * @cssprop --m3e-nav-menu-item-selected-container-color - Background color for selected item.
99
+ * @cssprop --m3e-nav-menu-item-selected-container-focus-color - Focus color for selected item container.
100
+ * @cssprop --m3e-nav-menu-item-selected-container-hover-color - Hover color for selected item container.
101
+ * @cssprop --m3e-nav-menu-item-selected-ripple-color - Ripple color for selected item.
102
+ * @cssprop --m3e-nav-menu-item-unselected-container-focus-color - Focus color for unselected item container.
103
+ * @cssprop --m3e-nav-menu-item-unselected-container-hover-color - Hover color for unselected item container.
104
+ * @cssprop --m3e-nav-menu-item-unselected-ripple-color - Ripple color for unselected item.
105
+ * @cssprop --m3e-nav-menu-item-open-container-color - Background color for open item with children.
106
+ * @cssprop --m3e-nav-menu-item-open-container-focus-color - Focus color for open item container.
107
+ * @cssprop --m3e-nav-menu-item-open-container-hover-color - Hover color for open item container.
108
+ * @cssprop --m3e-nav-menu-item-open-ripple-color - Ripple color for open item.
109
+ * @cssprop --m3e-nav-menu-item-disabled-color - Text color for disabled item.
110
+ * @cssprop --m3e-nav-menu-item-disabled-color-opacity - Opacity for disabled item text color.
111
+ * @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.
112
+ * @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.
113
+ * @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.
114
+ * @cssprop --m3e-nav-menu-badge-item-tracking - Letter spacing for badge slot.
115
+ * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.
116
+ * @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.
117
+ */
118
+ export declare class M3eNavMenuItemElement extends M3eNavMenuItemElement_base {
119
+ #private;
120
+ /** The styles of the element. */
121
+ static styles: CSSResultGroup;
122
+ /** @internal */ readonly stateLayer?: M3eStateLayerElement;
123
+ /** @internal */ readonly focusRing?: M3eFocusRingElement;
124
+ /** @internal */ readonly ripple?: M3eRippleElement;
125
+ /** @private */ private readonly _base?;
126
+ /** @private */ private _hasChildItems;
127
+ /**
128
+ * Whether the item is expanded.
129
+ * @default false
130
+ */
131
+ open: boolean;
132
+ /** A reference to the nested `HTMLAnchorElement`. */
133
+ get link(): HTMLAnchorElement | null;
134
+ /** A reference to the element used to present the label of the item. */
135
+ get label(): HTMLElement | null;
136
+ /** Whether the item is visible. */
137
+ get visible(): boolean;
138
+ /** The full path of the item, starting with the top-most ancestor, including this item. */
139
+ get path(): ReadonlyArray<M3eNavMenuItemElement>;
140
+ /** Whether the item has child items. */
141
+ get hasChildItems(): boolean;
142
+ /** The parenting item. */
143
+ get parentItem(): M3eNavMenuItemElement | null;
144
+ /** The items that immediately descend from this item. */
145
+ get childItems(): readonly M3eNavMenuItemElement[];
146
+ /** The one-based level of the item. */
147
+ get level(): number;
148
+ /**
149
+ * Expands this item, and optionally, all descendants.
150
+ * @param {boolean} [descendants=false] Whether to expand all descendants.
151
+ */
152
+ expand(descendants?: boolean): void;
153
+ /**
154
+ * Collapses this item, and optionally, all descendants.
155
+ * @param {boolean} [descendants=false] Whether to expand all descendants.
156
+ */
157
+ collapse(descendants?: boolean): void;
158
+ /** Toggles the expanded state of the item. */
159
+ toggle(): void;
160
+ /** @inheritdoc */
161
+ connectedCallback(): void;
162
+ /** @inheritdoc */
163
+ disconnectedCallback(): void;
164
+ /** @inheritdoc */
165
+ protected update(changedProperties: PropertyValues): void;
166
+ /** @inheritdoc */
167
+ protected firstUpdated(_changedProperties: PropertyValues<this>): void;
168
+ /** @inheritdoc */
169
+ protected render(): unknown;
170
+ }
171
+ interface M3eNavMenuItemElementEventMap extends HTMLElementEventMap {
172
+ opening: Event;
173
+ opened: Event;
174
+ closing: Event;
175
+ closed: Event;
176
+ }
177
+ export interface M3eNavMenuItemElement {
178
+ addEventListener<K extends keyof M3eNavMenuItemElementEventMap>(type: K, listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
179
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
180
+ removeEventListener<K extends keyof M3eNavMenuItemElementEventMap>(type: K, listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
181
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
182
+ }
183
+ declare global {
184
+ interface HTMLElementTagNameMap {
185
+ "m3e-nav-menu-item": M3eNavMenuItemElement;
186
+ }
187
+ }
188
+ export {};
189
+ //# sourceMappingURL=NavMenuItemElement.d.ts.map
package/dist/src/NavMenuItemElement.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NavMenuItemElement.d.ts","sourceRoot":"","sources":["../../src/NavMenuItemElement.ts"],"names":[],"mappings":"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"}
package/dist/src/NavMenuItemGroupElement.d.ts ADDED
@@ -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
package/dist/src/NavMenuItemGroupElement.d.ts.map ADDED
@@ -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 ADDED
@@ -0,0 +1,4 @@
1
+ export * from "./NavMenuElement";
2
+ export * from "./NavMenuItemElement";
3
+ export * from "./NavMenuItemGroupElement";
4
+ //# sourceMappingURL=index.d.ts.map
package/dist/src/index.d.ts.map ADDED
@@ -0,0 +1 @@
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.2",
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.2",
30
+ "@m3e/core": "1.0.0-rc.4",
31
31
  "lit": "^3.3.0"
32
32
  },
33
33
  "devDependencies": {