@m3e/expansion-panel 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.
Files changed (46) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2729 -17
  3. package/dist/html-custom-data.json +6 -1
  4. package/dist/index.js +6 -6
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +24 -24
  7. package/dist/index.min.js.map +1 -1
  8. package/package.json +3 -3
  9. package/cem.config.mjs +0 -16
  10. package/demo/index.html +0 -60
  11. package/dist/src/AccordionElement.d.ts +0 -56
  12. package/dist/src/AccordionElement.d.ts.map +0 -1
  13. package/dist/src/ExpansionHeaderElement.d.ts +0 -60
  14. package/dist/src/ExpansionHeaderElement.d.ts.map +0 -1
  15. package/dist/src/ExpansionPanelElement.d.ts +0 -121
  16. package/dist/src/ExpansionPanelElement.d.ts.map +0 -1
  17. package/dist/src/ExpansionToggleDirection.d.ts +0 -3
  18. package/dist/src/ExpansionToggleDirection.d.ts.map +0 -1
  19. package/dist/src/ExpansionTogglePosition.d.ts +0 -3
  20. package/dist/src/ExpansionTogglePosition.d.ts.map +0 -1
  21. package/dist/src/index.d.ts +0 -6
  22. package/dist/src/index.d.ts.map +0 -1
  23. package/dist/src/styles/ExpansionHeaderStyle.d.ts +0 -6
  24. package/dist/src/styles/ExpansionHeaderStyle.d.ts.map +0 -1
  25. package/dist/src/styles/ExpansionHeaderToken.d.ts +0 -17
  26. package/dist/src/styles/ExpansionHeaderToken.d.ts.map +0 -1
  27. package/dist/src/styles/ExpansionPanelStyle.d.ts +0 -6
  28. package/dist/src/styles/ExpansionPanelStyle.d.ts.map +0 -1
  29. package/dist/src/styles/ExpansionPanelToken.d.ts +0 -21
  30. package/dist/src/styles/ExpansionPanelToken.d.ts.map +0 -1
  31. package/dist/src/styles/index.d.ts +0 -3
  32. package/dist/src/styles/index.d.ts.map +0 -1
  33. package/eslint.config.mjs +0 -13
  34. package/rollup.config.js +0 -32
  35. package/src/AccordionElement.ts +0 -115
  36. package/src/ExpansionHeaderElement.ts +0 -99
  37. package/src/ExpansionPanelElement.ts +0 -260
  38. package/src/ExpansionToggleDirection.ts +0 -2
  39. package/src/ExpansionTogglePosition.ts +0 -2
  40. package/src/index.ts +0 -5
  41. package/src/styles/ExpansionHeaderStyle.ts +0 -85
  42. package/src/styles/ExpansionHeaderToken.ts +0 -24
  43. package/src/styles/ExpansionPanelStyle.ts +0 -85
  44. package/src/styles/ExpansionPanelToken.ts +0 -28
  45. package/src/styles/index.ts +0 -2
  46. package/tsconfig.json +0 -9
package/demo/index.html DELETED
@@ -1,60 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" style="overflow-y: auto">
3
- <head>
4
- <title>Expansion Panel for M3E</title>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="description" content="Expansion Panel 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="../../button/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-accordion>
42
- <m3e-expansion-panel>
43
- <span slot="header">Expansion panel 1 title</span>
44
- <div>I am content for the first expansion panel</div>
45
- </m3e-expansion-panel>
46
- <m3e-expansion-panel disabled>
47
- <span slot="header">Expansion panel 2 title</span>
48
- <div>I am content for the second expansion panel</div>
49
- </m3e-expansion-panel>
50
- <m3e-expansion-panel>
51
- <span slot="header">Expansion panel 2 title</span>
52
- <div>I am content for the third expansion panel</div>
53
- <div slot="actions">
54
- <m3e-button>Action</m3e-button>
55
- </div>
56
- </m3e-expansion-panel>
57
- </m3e-accordion>
58
- </m3e-theme>
59
- </body>
60
- </html>
package/dist/src/AccordionElement.d.ts DELETED
@@ -1,56 +0,0 @@
1
- import { CSSResultGroup, LitElement } from "lit";
2
- import { M3eExpansionPanelElement } from "./ExpansionPanelElement";
3
- declare const M3eAccordionElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
4
- /**
5
- * @summary
6
- * Combines multiple expansion panels in to an accordion.
7
- *
8
- * @description
9
- * The `m3e-accordion` component organizes multiple expansion panels into a coordinated, accessible group.
10
- * It supports single or multiple open panels via the `multi` attribute, and provides expressive theming
11
- * and shape control for grouped layouts. The accordion manages open/close state across its child panels,
12
- * enabling interactive disclosure patterns for complex content.
13
- *
14
- * @example
15
- * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.
16
- *
17
- * ```html
18
- * <m3e-accordion>
19
- * <m3e-expansion-panel>
20
- * <span slot="header">Panel 1</span>
21
- * I am content for the first expansion panel
22
- * </m3e-expansion-panel>
23
- * <m3e-expansion-panel>
24
- * <span slot="header">Panel 2</span>
25
- * I am content for the second expansion panel
26
- * </m3e-expansion-panel>
27
- * </m3e-accordion>
28
- * ```
29
- *
30
- * @tag m3e-accordion
31
- *
32
- * @slot - Renders the panels of the accordion.
33
- *
34
- * @attr multi - Whether multiple expansion panels can be open at the same time.
35
- */
36
- export declare class M3eAccordionElement extends M3eAccordionElement_base {
37
- #private;
38
- /** The styles of the element. */
39
- static styles: CSSResultGroup;
40
- /**
41
- * Whether multiple expansion panels can be open at the same time.
42
- * @default false
43
- */
44
- multi: boolean;
45
- /** The panels of the accordion. */
46
- get panels(): M3eExpansionPanelElement[];
47
- /** @inheritdoc */
48
- protected render(): unknown;
49
- }
50
- declare global {
51
- interface HTMLElementTagNameMap {
52
- "m3e-accordion": M3eAccordionElement;
53
- }
54
- }
55
- export {};
56
- //# sourceMappingURL=AccordionElement.d.ts.map
package/dist/src/AccordionElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionElement.d.ts","sourceRoot":"","sources":["../../src/AccordionElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,mBAAoB,SAAQ,wBAAwB;;IAC/D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAqBpC;IAIF;;;OAGG;IAC0B,KAAK,UAAS;IAE3C,mCAAmC;IACnC,IAAI,MAAM,+BAET;IAED,kBAAkB;cACC,MAAM,IAAI,OAAO;CA6BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
package/dist/src/ExpansionHeaderElement.d.ts DELETED
@@ -1,60 +0,0 @@
1
- import { CSSResultGroup, LitElement, PropertyValues } from "lit";
2
- import { ExpansionTogglePosition } from "./ExpansionTogglePosition";
3
- import { ExpansionToggleDirection } from "./ExpansionToggleDirection";
4
- declare const M3eExpansionHeaderElement_base: 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").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
5
- /**
6
- * A button used to toggle the expanded state of an expansion panel.
7
- *
8
- * @tag m3e-expansion-header
9
- *
10
- * @slot - Renders the content of the header.
11
- * @slot toggle-icon - Renders the icon of the expansion toggle.
12
- *
13
- * @attr hide-toggle - Whether to hide the expansion toggle.
14
- * @attr toggle-direction - The direction of the expansion toggle.
15
- * @attr toggle-position - The position of the expansion toggle.
16
- *
17
- * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
18
- * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.
19
- * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.
20
- * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.
21
- * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.
22
- * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).
23
- * @cssprop --m3e-expansion-header-font-size - The font size of the header text.
24
- * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.
25
- * @cssprop --m3e-expansion-header-line-height - The line height of the header text.
26
- * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.
27
- */
28
- export declare class M3eExpansionHeaderElement extends M3eExpansionHeaderElement_base {
29
- #private;
30
- /** The styles of the element. */
31
- static styles: CSSResultGroup;
32
- /** @private */ private readonly _focusRing?;
33
- /** @private */ private readonly _stateLayer?;
34
- /**
35
- * The direction of the expansion toggle.
36
- * @default "vertical"
37
- */
38
- toggleDirection: ExpansionToggleDirection;
39
- /**
40
- * The position of the expansion toggle.
41
- * @default "after"
42
- */
43
- togglePosition: ExpansionTogglePosition;
44
- /**
45
- * Whether to hide the expansion toggle.
46
- * @default false
47
- */
48
- hideToggle: boolean;
49
- /** @inheritdoc */
50
- protected firstUpdated(_changedProperties: PropertyValues<this>): void;
51
- /** @inheritdoc */
52
- protected render(): unknown;
53
- }
54
- declare global {
55
- interface HTMLElementTagNameMap {
56
- "m3e-expansion-header": M3eExpansionHeaderElement;
57
- }
58
- }
59
- export {};
60
- //# sourceMappingURL=ExpansionHeaderElement.d.ts.map
package/dist/src/ExpansionHeaderElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionHeaderElement.d.ts","sourceRoot":"","sources":["../../src/ExpansionHeaderElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAahF,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAItE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,yBAA0B,SAAQ,8BAE9C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAE3F;;;OAGG;IACyD,eAAe,EAAE,wBAAwB,CAAc;IAEnH;;;OAGG;IACwD,cAAc,EAAE,uBAAuB,CAAW;IAE7G;;;OAGG;IACmE,UAAU,UAAS;IAEzF,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAgBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}
package/dist/src/ExpansionPanelElement.d.ts DELETED
@@ -1,121 +0,0 @@
1
- import { CSSResultGroup, LitElement } from "lit";
2
- import { ExpansionTogglePosition } from "./ExpansionTogglePosition";
3
- import { ExpansionToggleDirection } from "./ExpansionToggleDirection";
4
- declare const M3eExpansionPanelElement_base: 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;
5
- /**
6
- * @summary
7
- * An expandable details-summary view.
8
- *
9
- * @description
10
- * The `m3e-expansion-panel` component provides an accessible, animated details-summary view for
11
- * organizing content in collapsible sections. It supports custom header, content, actions, and
12
- * toggle icon slots, and offers configurable toggle position and direction. The panel responds to
13
- * open/close states, emits lifecycle events, and supports rich theming via CSS custom properties
14
- * for elevation, shape, spacing, and color.
15
- *
16
- * @example
17
- * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.
18
- *
19
- * ```html
20
- * <m3e-accordion>
21
- * <m3e-expansion-panel>
22
- * <span slot="header">Panel 1</span>
23
- * I am content for the first expansion panel
24
- * </m3e-expansion-panel>
25
- * <m3e-expansion-panel>
26
- * <span slot="header">Panel 2</span>
27
- * I am content for the second expansion panel
28
- * </m3e-expansion-panel>
29
- * </m3e-accordion>
30
- * ```
31
- *
32
- * @tag m3e-expansion-panel
33
- *
34
- * @slot - Renders the detail of the panel.
35
- * @slot actions- Renders the actions bar of the panel.
36
- * @slot header - Renders the header content.
37
- * @slot toggle-icon - Renders the expansion toggle icon.
38
- *
39
- * @attr disabled - Whether the element is disabled.
40
- * @attr hide-toggle - Whether to hide the expansion toggle.
41
- * @attr open - Whether the panel is expanded.
42
- * @attr toggle-direction - The direction of the expansion toggle.
43
- * @attr toggle-position - The position of the expansion toggle.
44
- *
45
- * @fires opening - Emitted when the expansion panel begins to open.
46
- * @fires opened - Emitted when the expansion panel has opened.
47
- * @fires closing - Emitted when the expansion panel begins to close.
48
- * @fires closed - Emitted when the expansion panel has closed.
49
- *
50
- * @cssprop --m3e-expansion-header-collapsed-height - Height of the header when the panel is collapsed.
51
- * @cssprop --m3e-expansion-header-expanded-height - Height of the header when the panel is expanded.
52
- * @cssprop --m3e-expansion-header-padding-left - Left padding inside the header.
53
- * @cssprop --m3e-expansion-header-padding-right - Right padding inside the header.
54
- * @cssprop --m3e-expansion-header-spacing - Spacing between header elements.
55
- * @cssprop --m3e-expansion-header-toggle-icon-size - Size of the toggle icon (e.g. chevron).
56
- * @cssprop --m3e-expansion-header-font-size - The font size of the header text.
57
- * @cssprop --m3e-expansion-header-font-weight - The font weight of the header text.
58
- * @cssprop --m3e-expansion-header-line-height - The line height of the header text.
59
- * @cssprop --m3e-expansion-header-tracking - Letter spacing (tracking) of the header text.
60
- * @cssprop --m3e-expansion-panel-text-color - Color of the panel's text content.
61
- * @cssprop --m3e-expansion-panel-disabled-text-color - Color of the panel's text content, when disabled.
62
- * @cssprop --m3e-expansion-panel-disabled-text-opacity - Opacity of the panel's text content, when disabled.
63
- * @cssprop --m3e-expansion-panel-container-color - Background color of the panel container.
64
- * @cssprop --m3e-expansion-panel-elevation - Elevation level when the panel is collapsed.
65
- * @cssprop --m3e-expansion-panel-shape - Shape (e.g. border radius) of the panel when collapsed.
66
- * @cssprop --m3e-expansion-panel-open-elevation - Elevation level when the panel is expanded.
67
- * @cssprop --m3e-expansion-panel-open-shape - Shape (e.g. border radius) of the panel when expanded.
68
- * @cssprop --m3e-expansion-panel-content-padding - Padding around the panel's content area.
69
- * @cssprop --m3e-expansion-panel-actions-spacing - Spacing between action buttons or elements.
70
- * @cssprop --m3e-expansion-panel-actions-padding - Padding around the actions section.
71
- * @cssprop --m3e-expansion-panel-actions-divider-thickness - Thickness of the divider above actions.
72
- * @cssprop --m3e-expansion-panel-actions-divider-color - Color of the divider above actions.
73
- */
74
- export declare class M3eExpansionPanelElement extends M3eExpansionPanelElement_base {
75
- #private;
76
- /** The styles of the element. */
77
- static styles: CSSResultGroup;
78
- /** @private */ private static __nextId;
79
- /** @private */ private readonly _header?;
80
- /**
81
- * Whether the panel is expanded.
82
- * @default false
83
- */
84
- open: boolean;
85
- /**
86
- * The direction of the expansion toggle.
87
- * @default "vertical"
88
- */
89
- toggleDirection: ExpansionToggleDirection;
90
- /**
91
- * The position of the expansion toggle.
92
- * @default "after"
93
- */
94
- togglePosition: ExpansionTogglePosition;
95
- /**
96
- * Whether to hide the expansion toggle.
97
- * @default false
98
- */
99
- hideToggle: boolean;
100
- /** @inheritdoc */
101
- protected render(): unknown;
102
- }
103
- interface M3eExpansionPanelElementEventMap extends HTMLElementEventMap {
104
- opening: Event;
105
- opened: Event;
106
- closing: Event;
107
- closed: Event;
108
- }
109
- export interface M3eExpansionPanelElement {
110
- addEventListener<K extends keyof M3eExpansionPanelElementEventMap>(type: K, listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
111
- addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
112
- removeEventListener<K extends keyof M3eExpansionPanelElementEventMap>(type: K, listener: (this: M3eExpansionPanelElement, ev: M3eExpansionPanelElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
113
- removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
114
- }
115
- declare global {
116
- interface HTMLElementTagNameMap {
117
- "m3e-expansion-panel": M3eExpansionPanelElement;
118
- }
119
- }
120
- export {};
121
- //# sourceMappingURL=ExpansionPanelElement.d.ts.map
package/dist/src/ExpansionPanelElement.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionPanelElement.d.ts","sourceRoot":"","sources":["../../src/ExpansionPanelElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAKtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBACa,wBAAyB,SAAQ,6BAM7C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAuB;IAE7D,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAK5C,eAAe,CAAgC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAA4B;IAEpG;;;OAGG;IACyC,IAAI,UAAS;IAEzD;;;OAGG;IACyD,eAAe,EAAE,wBAAwB,CAAc;IAEnH;;;OAGG;IACwD,cAAc,EAAE,uBAAuB,CAAW;IAE7G;;;OAGG;IACmE,UAAU,UAAS;IAEzF,kBAAkB;cACC,MAAM,IAAI,OAAO;CA+FrC;AAED,UAAU,gCAAiC,SAAQ,mBAAmB;IACpE,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,gBAAgB,CAAC,CAAC,SAAS,MAAM,gCAAgC,EAC/D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,wBAAwB,EAAE,EAAE,EAAE,gCAAgC,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3F,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,gCAAgC,EAClE,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,wBAAwB,EAAE,EAAE,EAAE,gCAAgC,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3F,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
package/dist/src/ExpansionToggleDirection.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /** Specifies the possible directions of an expansion toggle. */
2
- export type ExpansionToggleDirection = "vertical" | "horizontal";
3
- //# sourceMappingURL=ExpansionToggleDirection.d.ts.map
package/dist/src/ExpansionToggleDirection.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionToggleDirection.d.ts","sourceRoot":"","sources":["../../src/ExpansionToggleDirection.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG,YAAY,CAAC"}
package/dist/src/ExpansionTogglePosition.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /** Specifies the possible positions of an expansion toggle. */
2
- export type ExpansionTogglePosition = "before" | "after";
3
- //# sourceMappingURL=ExpansionTogglePosition.d.ts.map
package/dist/src/ExpansionTogglePosition.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionTogglePosition.d.ts","sourceRoot":"","sources":["../../src/ExpansionTogglePosition.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,OAAO,CAAC"}
package/dist/src/index.d.ts DELETED
@@ -1,6 +0,0 @@
1
- export * from "./AccordionElement";
2
- export * from "./ExpansionHeaderElement";
3
- export * from "./ExpansionPanelElement";
4
- export * from "./ExpansionToggleDirection";
5
- export * from "./ExpansionTogglePosition";
6
- //# sourceMappingURL=index.d.ts.map
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,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC"}
package/dist/src/styles/ExpansionHeaderStyle.d.ts DELETED
@@ -1,6 +0,0 @@
1
- /**
2
- * Styles for `M3eExpansionHeaderElement`.
3
- * @internal
4
- */
5
- export declare const ExpansionHeaderStyle: import("lit").CSSResult;
6
- //# sourceMappingURL=ExpansionHeaderStyle.d.ts.map
package/dist/src/styles/ExpansionHeaderStyle.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionHeaderStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/ExpansionHeaderStyle.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,yBA0EhC,CAAC"}
package/dist/src/styles/ExpansionHeaderToken.d.ts DELETED
@@ -1,17 +0,0 @@
1
- /**
2
- * Component design tokens for `M3eExpansionHeaderElement`.
3
- * @internal
4
- */
5
- export declare const ExpansionHeaderToken: {
6
- readonly collapsedHeight: import("lit").CSSResult;
7
- readonly expandedHeight: import("lit").CSSResult;
8
- readonly paddingLeft: import("lit").CSSResult;
9
- readonly paddingRight: import("lit").CSSResult;
10
- readonly spacing: import("lit").CSSResult;
11
- readonly toggleIconSize: import("lit").CSSResult;
12
- readonly fontSize: import("lit").CSSResult;
13
- readonly fontWeight: import("lit").CSSResult;
14
- readonly lineHeight: import("lit").CSSResult;
15
- readonly tracking: import("lit").CSSResult;
16
- };
17
- //# sourceMappingURL=ExpansionHeaderToken.d.ts.map
package/dist/src/styles/ExpansionHeaderToken.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionHeaderToken.d.ts","sourceRoot":"","sources":["../../../src/styles/ExpansionHeaderToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAevB,CAAC"}
package/dist/src/styles/ExpansionPanelStyle.d.ts DELETED
@@ -1,6 +0,0 @@
1
- /**
2
- * Styles for `M3eExpansionPanelElement`.
3
- * @internal
4
- */
5
- export declare const ExpansionPanelStyle: import("lit").CSSResult;
6
- //# sourceMappingURL=ExpansionPanelStyle.d.ts.map
package/dist/src/styles/ExpansionPanelStyle.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionPanelStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/ExpansionPanelStyle.ts"],"names":[],"mappings":"AAOA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,yBAyE/B,CAAC"}
package/dist/src/styles/ExpansionPanelToken.d.ts DELETED
@@ -1,21 +0,0 @@
1
- /**
2
- * Component design tokens for `M3eExpansionPanelElement`.
3
- * @internal
4
- */
5
- export declare const ExpansionPanelToken: {
6
- readonly textColor: import("lit").CSSResult;
7
- readonly disabledTextColor: import("lit").CSSResult;
8
- readonly disabledTextOpacity: import("lit").CSSResult;
9
- readonly containerColor: import("lit").CSSResult;
10
- readonly collapsedElevation: import("lit").CSSResult;
11
- readonly collapsedShape: import("lit").CSSResult;
12
- readonly expandedElevation: import("lit").CSSResult;
13
- readonly expandedShape: import("lit").CSSResult;
14
- readonly expandedSpace: import("lit").CSSResult;
15
- readonly contentPadding: import("lit").CSSResult;
16
- readonly actionsSpacing: import("lit").CSSResult;
17
- readonly actionsPadding: import("lit").CSSResult;
18
- readonly actionsDividerThickness: import("lit").CSSResult;
19
- readonly actionsDividerColor: import("lit").CSSResult;
20
- };
21
- //# sourceMappingURL=ExpansionPanelToken.d.ts.map
package/dist/src/styles/ExpansionPanelToken.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionPanelToken.d.ts","sourceRoot":"","sources":["../../../src/styles/ExpansionPanelToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;CAmBtB,CAAC"}
package/dist/src/styles/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export * from "./ExpansionHeaderStyle";
2
- export * from "./ExpansionPanelStyle";
3
- //# sourceMappingURL=index.d.ts.map
package/dist/src/styles/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}
package/eslint.config.mjs DELETED
@@ -1,13 +0,0 @@
1
- import eslint from "@eslint/js";
2
- import tseslint from "typescript-eslint";
3
- import { fileURLToPath } from "url";
4
- import { dirname } from "path";
5
-
6
- export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
7
- languageOptions: {
8
- parserOptions: {
9
- project: true,
10
- tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
11
- },
12
- },
13
- });
package/rollup.config.js DELETED
@@ -1,32 +0,0 @@
1
- import resolve from "@rollup/plugin-node-resolve";
2
- import terser from "@rollup/plugin-terser";
3
- import typescript from "@rollup/plugin-typescript";
4
-
5
- const banner = `/**
6
- * @license MIT
7
- * Copyright (c) 2025 matraic
8
- * See LICENSE file in the project root for full license text.
9
- */`;
10
-
11
- export default [
12
- {
13
- input: "src/index.ts",
14
- output: [
15
- {
16
- file: "dist/index.js",
17
- format: "esm",
18
- sourcemap: true,
19
- banner: banner,
20
- },
21
- {
22
- file: "dist/index.min.js",
23
- format: "esm",
24
- sourcemap: true,
25
- banner: banner,
26
- plugins: [terser({ mangle: true })],
27
- },
28
- ],
29
- external: ["@m3e/core", "lit"],
30
- plugins: [resolve(), typescript()],
31
- },
32
- ];
package/src/AccordionElement.ts DELETED
@@ -1,115 +0,0 @@
1
- import { css, CSSResultGroup, html, LitElement } from "lit";
2
- import { customElement, property } from "lit/decorators.js";
3
-
4
- import { DesignToken, Role } from "@m3e/core";
5
-
6
- import { M3eExpansionPanelElement } from "./ExpansionPanelElement";
7
-
8
- /**
9
- * @summary
10
- * Combines multiple expansion panels in to an accordion.
11
- *
12
- * @description
13
- * The `m3e-accordion` component organizes multiple expansion panels into a coordinated, accessible group.
14
- * It supports single or multiple open panels via the `multi` attribute, and provides expressive theming
15
- * and shape control for grouped layouts. The accordion manages open/close state across its child panels,
16
- * enabling interactive disclosure patterns for complex content.
17
- *
18
- * @example
19
- * The following example illustrates the basic use of the `m3e-accordion` and `m3e-expansion-panel` components.
20
- *
21
- * ```html
22
- * <m3e-accordion>
23
- * <m3e-expansion-panel>
24
- * <span slot="header">Panel 1</span>
25
- * I am content for the first expansion panel
26
- * </m3e-expansion-panel>
27
- * <m3e-expansion-panel>
28
- * <span slot="header">Panel 2</span>
29
- * I am content for the second expansion panel
30
- * </m3e-expansion-panel>
31
- * </m3e-accordion>
32
- * ```
33
- *
34
- * @tag m3e-accordion
35
- *
36
- * @slot - Renders the panels of the accordion.
37
- *
38
- * @attr multi - Whether multiple expansion panels can be open at the same time.
39
- */
40
- @customElement("m3e-accordion")
41
- export class M3eAccordionElement extends Role(LitElement, "none") {
42
- /** The styles of the element. */
43
- static override styles: CSSResultGroup = css`
44
- :host {
45
- display: block;
46
- }
47
- ::slotted(m3e-expansion-panel) {
48
- --m3e-expansion-panel-container-color: ${DesignToken.color.surfaceContainerLow};
49
- --m3e-expansion-panel-elevation: ${DesignToken.elevation.level2};
50
- --m3e-expansion-panel-open-shape: ${DesignToken.shape.corner.medium};
51
- --_expansion-panel-open-spacing: 1rem;
52
- }
53
- ::slotted(m3e-expansion-panel:first-of-type:last-of-type) {
54
- --m3e-expansion-panel-shape: ${DesignToken.shape.corner.medium};
55
- }
56
- ::slotted(m3e-expansion-panel:first-of-type:not(:last-of-type)) {
57
- --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium}
58
- ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none};
59
- }
60
- ::slotted(m3e-expansion-panel:last-of-type:not(:first-of-type)) {
61
- --m3e-expansion-panel-shape: ${DesignToken.shape.corner.value.none} ${DesignToken.shape.corner.value.none}
62
- ${DesignToken.shape.corner.value.medium} ${DesignToken.shape.corner.value.medium};
63
- }
64
- `;
65
-
66
- /** @private */ #panels: Array<M3eExpansionPanelElement> = [];
67
-
68
- /**
69
- * Whether multiple expansion panels can be open at the same time.
70
- * @default false
71
- */
72
- @property({ type: Boolean }) multi = false;
73
-
74
- /** The panels of the accordion. */
75
- get panels() {
76
- return this.#panels;
77
- }
78
-
79
- /** @inheritdoc */
80
- protected override render(): unknown {
81
- return html`<slot @slotchange="${this.#handleSlotChange}" @opening="${this.#handleOpening}"></slot>`;
82
- }
83
-
84
- /** @private */
85
- #handleSlotChange() {
86
- this.#panels = [...this.querySelectorAll("m3e-expansion-panel")];
87
-
88
- if (this.multi) {
89
- return;
90
- }
91
-
92
- let alreadyOpen = false;
93
- for (const panel of this.#panels.filter((x) => !x.open)) {
94
- if (alreadyOpen) {
95
- panel.open = false;
96
- }
97
- alreadyOpen = true;
98
- }
99
- }
100
-
101
- /** @private */
102
- #handleOpening(e: Event): void {
103
- if (!this.multi) {
104
- for (const panel of this.#panels.filter((x) => x !== e.target && x.open)) {
105
- panel.open = false;
106
- }
107
- }
108
- }
109
- }
110
-
111
- declare global {
112
- interface HTMLElementTagNameMap {
113
- "m3e-accordion": M3eAccordionElement;
114
- }
115
- }