@m3e/list 1.1.5 → 1.1.7

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 (31) hide show
  1. package/README.md +468 -45
  2. package/dist/css-custom-data.json +1615 -10
  3. package/dist/custom-elements.json +5099 -94
  4. package/dist/html-custom-data.json +156 -3
  5. package/dist/index.js +1423 -85
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.min.js +33 -4
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/src/ActionListElement.d.ts +46 -0
  10. package/dist/src/ActionListElement.d.ts.map +1 -0
  11. package/dist/src/ExpandableListItemElement.d.ts +146 -0
  12. package/dist/src/ExpandableListItemElement.d.ts.map +1 -0
  13. package/dist/src/ListActionElement.d.ts +105 -0
  14. package/dist/src/ListActionElement.d.ts.map +1 -0
  15. package/dist/src/ListElement.d.ts +41 -2
  16. package/dist/src/ListElement.d.ts.map +1 -1
  17. package/dist/src/ListItemButtonElement.d.ts +25 -0
  18. package/dist/src/ListItemButtonElement.d.ts.map +1 -0
  19. package/dist/src/ListItemContentType.d.ts +3 -0
  20. package/dist/src/ListItemContentType.d.ts.map +1 -0
  21. package/dist/src/ListItemElement.d.ts +50 -14
  22. package/dist/src/ListItemElement.d.ts.map +1 -1
  23. package/dist/src/ListOptionElement.d.ts +127 -0
  24. package/dist/src/ListOptionElement.d.ts.map +1 -0
  25. package/dist/src/ListVariant.d.ts +3 -0
  26. package/dist/src/ListVariant.d.ts.map +1 -0
  27. package/dist/src/SelectionListElement.d.ts +77 -0
  28. package/dist/src/SelectionListElement.d.ts.map +1 -0
  29. package/dist/src/index.d.ts +8 -0
  30. package/dist/src/index.d.ts.map +1 -1
  31. package/package.json +2 -2
package/dist/src/ActionListElement.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { RovingTabIndexManager, selectionManager } from "@m3e/core/a11y";
2
+ import { M3eListElement } from "./ListElement";
3
+ import { M3eListItemButtonElement } from "./ListItemButtonElement";
4
+ /**
5
+ * A list of actions.
6
+ *
7
+ * @description
8
+ * The `m3e-action-list` component provides a specialized list container for action-based
9
+ * interactions following Material 3 design principles. It manages keyboard navigation with
10
+ * roving tab index, supporting arrow keys, Home/End navigation, and vertical orientation.
11
+ * The component is optimized for scenarios where each list item represents a clickable action.
12
+ *
13
+ * @tag m3e-action-list
14
+ *
15
+ * @slot - Renders the items of the list.
16
+ *
17
+ * @attr variant - The appearance variant of the list.
18
+ *
19
+ * @cssprop --m3e-list-divider-inset-start-size - Start inset for dividers within the list.
20
+ * @cssprop --m3e-list-divider-inset-end-size - End inset for dividers within the list.
21
+ * @cssprop --m3e-segmented-list-segment-gap - Gap between list items in segmented variant.
22
+ * @cssprop --m3e-segmented-list-container-shape - Border radius of the segmented list container.
23
+ * @cssprop --m3e-segmented-list-item-container-color - Background color of items in segmented variant.
24
+ * @cssprop --m3e-segmented-list-item-disabled-container-color - Background color of disabled items in segmented variant.
25
+ * @cssprop --m3e-segmented-list-item-container-shape - Border radius of items in segmented variant.
26
+ * @cssprop --m3e-segmented-list-item-hover-container-shape - Border radius of items in segmented variant on hover.
27
+ * @cssprop --m3e-segmented-list-item-focus-container-shape - Border radius of items in segmented variant on focus.
28
+ * @cssprop --m3e-segmented-list-item-selected-container-shape - Border radius of items in segmented variant when selected.
29
+ */
30
+ export declare class M3eActionListElement extends M3eListElement {
31
+ #private;
32
+ /** @private */
33
+ readonly [selectionManager]: RovingTabIndexManager<M3eListItemButtonElement>;
34
+ /** @inheritdoc */
35
+ connectedCallback(): void;
36
+ /** @inheritdoc */
37
+ disconnectedCallback(): void;
38
+ /** @inheritdoc */
39
+ notifyItemsChange(): Promise<void>;
40
+ }
41
+ declare global {
42
+ interface HTMLElementTagNameMap {
43
+ "m3e-action-list": M3eActionListElement;
44
+ }
45
+ }
46
+ //# sourceMappingURL=ActionListElement.d.ts.map
package/dist/src/ActionListElement.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ActionListElement.d.ts","sourceRoot":"","sources":["../../src/ActionListElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAGnE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,oBAAqB,SAAQ,cAAc;;IAGtD,eAAe;IACf,QAAQ,CAAC,CAAC,gBAAgB,CAAC,kDAyBtB;IAEL,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACH,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;CAyBlD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
package/dist/src/ExpandableListItemElement.d.ts ADDED
@@ -0,0 +1,146 @@
1
+ import { CSSResultGroup, PropertyValues } from "lit";
2
+ import { M3eListItemButtonElement } from "./ListItemButtonElement";
3
+ import { M3eListItemElement } from "./ListItemElement";
4
+ /**
5
+ * An item in a list that can be expanded to show more items.
6
+ *
7
+ * @description
8
+ * The `m3e-expandable-list-item` provides a hierarchical navigation structure that allows
9
+ * users to expand and collapse content sections. It follows Material 3 design principles
10
+ * with smooth animations, semantic color tokens, and accessible interactions. The component
11
+ * extends the base `m3e-list-item` functionality with toggle state management and nested
12
+ * content support.
13
+ *
14
+ * @example
15
+ * The following example illustrates an expandable list item.
16
+ * ```html
17
+ * <m3e-action-list>
18
+ * <m3e-expandable-list-item>
19
+ * Pick up supplies
20
+ * <span slot="supporting-text">Due monday</span>
21
+ * <div slot="items">
22
+ * <m3e-list-action>
23
+ * Dry-erase board
24
+ * <span slot="supporting-text">$35.99</span>
25
+ * </m3e-list-action>
26
+ * <m3e-list-action>
27
+ * Markers
28
+ * <span slot="supporting-text">$8.99</span>
29
+ * </m3e-list-action>
30
+ * </div>
31
+ * </m3e-expandable-list-item>
32
+ * </m3e-action-list>
33
+ * ```
34
+ *
35
+ * @tag m3e-expandable-list-item
36
+ *
37
+ * @slot - Renders the content of the list item.
38
+ * @slot leading - Renders the leading content of the list item.
39
+ * @slot overline - Renders the overline of the list item.
40
+ * @slot supporting-text - Renders the supporting text of the list item.
41
+ * @slot toggle-icon - Renders a custom icon for the expand/collapse toggle.
42
+ * @slot items - Container for child list items displayed when expanded.
43
+ * @slot trailing - This component does not expose the base trailing slot.
44
+ *
45
+ * @attr disabled - Whether the element is disabled.
46
+ * @attr open - Whether the item is expanded.
47
+ *
48
+ * @fires opening - Emitted when the item begins to open.
49
+ * @fires opened - Emitted when the item has opened.
50
+ * @fires closing - Emitted when the item begins to close.
51
+ * @fires closed - Emitted when the item has closed.
52
+ *
53
+ * @cssprop --m3e-expandable-list-item-toggle-icon-container-width - Width of the toggle icon container.
54
+ * @cssprop --m3e-expandable-list-item-toggle-icon-container-shape - Border radius of the toggle icon container.
55
+ * @cssprop --m3e-expandable-list-item-toggle-icon-size - Size of the toggle icon.
56
+ * @cssprop --m3e-expandable-list-item-expanded-toggle-icon-container-color - Background color of the toggle icon container when expanded.
57
+ * @cssprop --m3e-expandable-list-item-bounce-duration - Duration of the bounce animation when expanding.
58
+ * @cssprop --m3e-expandable-list-item-bounce-factor - Multiplication factor for the bounce effect.
59
+ * @cssprop --m3e-expandable-list-item-expand-duration - Duration of the expand/collapse animation.
60
+ * @cssprop --m3e-list-item-between-space - Horizontal gap between elements.
61
+ * @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
62
+ * @cssprop --m3e-list-item-padding-block - Vertical padding for the list item.
63
+ * @cssprop --m3e-list-item-height - Minimum height of the list item.
64
+ * @cssprop --m3e-list-item-font-size - Font size for main content.
65
+ * @cssprop --m3e-list-item-font-weight - Font weight for main content.
66
+ * @cssprop --m3e-list-item-line-height - Line height for main content.
67
+ * @cssprop --m3e-list-item-tracking - Letter spacing for main content.
68
+ * @cssprop --m3e-list-item-overline-font-size - Font size for overline slot.
69
+ * @cssprop --m3e-list-item-overline-font-weight - Font weight for overline slot.
70
+ * @cssprop --m3e-list-item-overline-line-height - Line height for overline slot.
71
+ * @cssprop --m3e-list-item-overline-tracking - Letter spacing for overline slot.
72
+ * @cssprop --m3e-list-item-supporting-text-font-size - Font size for supporting text slot.
73
+ * @cssprop --m3e-list-item-supporting-text-font-weight - Font weight for supporting text slot.
74
+ * @cssprop --m3e-list-item-supporting-text-line-height - Line height for supporting text slot.
75
+ * @cssprop --m3e-list-item-supporting-text-tracking - Letter spacing for supporting text slot.
76
+ * @cssprop --m3e-list-item-trailing-text-font-size - Font size for trailing supporting text slot.
77
+ * @cssprop --m3e-list-item-trailing-text-font-weight - Font weight for trailing supporting text slot.
78
+ * @cssprop --m3e-list-item-trailing-text-line-height - Line height for trailing supporting text slot.
79
+ * @cssprop --m3e-list-item-trailing-text-tracking - Letter spacing for trailing supporting text slot.
80
+ * @cssprop --m3e-list-item-icon-size - Size for leading/trailing icons.
81
+ * @cssprop --m3e-list-item-label-text-color - Color for the main content.
82
+ * @cssprop --m3e-list-item-overline-color - Color for the overline slot.
83
+ * @cssprop --m3e-list-item-supporting-text-color - Color for the supporting text slot.
84
+ * @cssprop --m3e-list-item-leading-color - Color for the leading content.
85
+ * @cssprop --m3e-list-item-trailing-color - Color for the trailing content.
86
+ * @cssprop --m3e-list-item-container-color - Background color of the list item.
87
+ * @cssprop --m3e-list-item-container-shape - Border radius of the list item.
88
+ * @cssprop --m3e-list-item-hover-container-shape - Border radius of the list item on hover.
89
+ * @cssprop --m3e-list-item-focus-container-shape - Border radius of the list item on focus.
90
+ * @cssprop --m3e-list-item-video-width - Width of the video slot.
91
+ * @cssprop --m3e-list-item-video-height - Height of the video slot.
92
+ * @cssprop --m3e-list-item-video-shape - Border radius of the video slot.
93
+ * @cssprop --m3e-list-item-image-width - Width of the image slot.
94
+ * @cssprop --m3e-list-item-image-height - Height of the image slot.
95
+ * @cssprop --m3e-list-item-image-shape - Border radius of the image slot.
96
+ * @cssprop --m3e-list-item-disabled-label-text-color - Color for the main content when disabled.
97
+ * @cssprop --m3e-list-item-disabled-label-text-opacity - Opacity for the main content when disabled.
98
+ * @cssprop --m3e-list-item-disabled-overline-color - Color for the overline slot when disabled.
99
+ * @cssprop --m3e-list-item-disabled-overline-opacity - Opacity for the overline slot when disabled.
100
+ * @cssprop --m3e-list-item-disabled-supporting-text-color - Color for the supporting text slot when disabled.
101
+ * @cssprop --m3e-list-item-disabled-supporting-text-opacity - Opacity for the supporting text slot when disabled.
102
+ * @cssprop --m3e-list-item-disabled-leading-color - Color for the leading icon when disabled.
103
+ * @cssprop --m3e-list-item-disabled-leading-opacity - Opacity for the leading icon when disabled.
104
+ * @cssprop --m3e-list-item-disabled-trailing-color - Color for the trailing icon when disabled.
105
+ * @cssprop --m3e-list-item-disabled-trailing-opacity - Opacity for the trailing icon when disabled.
106
+ * @cssprop --m3e-list-item-hover-state-layer-color - Color for the hover state layer.
107
+ * @cssprop --m3e-list-item-hover-state-layer-opacity - Opacity for the hover state layer.
108
+ * @cssprop --m3e-list-item-focus-state-layer-color - Color for the focus state layer.
109
+ * @cssprop --m3e-list-item-focus-state-layer-opacity - Opacity for the focus state layer.
110
+ * @cssprop --m3e-list-item-pressed-state-layer-color - Color for the pressed state layer.
111
+ * @cssprop --m3e-list-item-pressed-state-layer-opacity - Opacity for the pressed state layer.
112
+ * @cssprop --m3e-segmented-list-container-shape - Border radius of the segmented list container shape.
113
+ * @cssprop --m3e-segmented-list-segment-gap - Gap between list item segments.
114
+ * @cssprop --m3e-list-item-three-line-top-offset - Top offset for media in three line items.
115
+ * @cssprop --m3e-list-item-disabled-media-opacity - Opacity for media when disabled.
116
+ */
117
+ export declare class M3eExpandableListItem extends M3eListItemElement {
118
+ #private;
119
+ /** The styles of the element. */
120
+ static styles: CSSResultGroup;
121
+ /** @private */ private static __nextId;
122
+ /**
123
+ * Whether the element is disabled.
124
+ * @default false
125
+ */
126
+ disabled: boolean;
127
+ /**
128
+ * Whether the item is expanded.
129
+ * @default false
130
+ */
131
+ open: boolean;
132
+ /** @internal */
133
+ readonly button: M3eListItemButtonElement;
134
+ /** The direct child items of this item. */
135
+ get items(): ReadonlyArray<M3eListItemElement>;
136
+ /** @inheritdoc */
137
+ protected updated(_changedProperties: PropertyValues<this>): void;
138
+ /** @inheritdoc */
139
+ protected render(): unknown;
140
+ }
141
+ declare global {
142
+ interface HTMLElementTagNameMap {
143
+ "m3e-expandable-list-item": M3eExpandableListItem;
144
+ }
145
+ }
146
+ //# sourceMappingURL=ExpandableListItemElement.d.ts.map
package/dist/src/ExpandableListItemElement.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExpandableListItemElement.d.ts","sourceRoot":"","sources":["../../src/ExpandableListItemElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,cAAc,EAAa,MAAM,KAAK,CAAC;AAO3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgHG;AACH,qBACa,qBAAsB,SAAQ,kBAAkB;;IAC3D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA6FpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAM5C;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,IAAI,UAAS;IAEzD,gBAAgB;IACE,QAAQ,CAAC,MAAM,EAAG,wBAAwB,CAAC;IAE7D,2CAA2C;IAC3C,IAAI,KAAK,IAAI,aAAa,CAAC,kBAAkB,CAAC,CAE7C;IAED,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAmB1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CA4ErC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}
package/dist/src/ListActionElement.d.ts ADDED
@@ -0,0 +1,105 @@
1
+ import { CSSResultGroup } from "lit";
2
+ import { M3eListItemElement } from "./ListItemElement";
3
+ import { M3eListItemButtonElement } from "./ListItemButtonElement";
4
+ declare const M3eListActionElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LinkButtonMixin> & typeof M3eListItemElement;
5
+ /**
6
+ * An item in a list that performs an action.
7
+ *
8
+ * @description
9
+ * The `m3e-list-action` component represents an interactive list item that performs a
10
+ * user-initiated action. It combines the semantic structure of a list item with
11
+ * button-like interactions, supporting keyboard navigation, ripple effects, and state layers.
12
+ *
13
+ * @tag m3e-list-action
14
+ *
15
+ * @slot - Renders the content of the list item.
16
+ * @slot leading - Renders the leading content of the list item.
17
+ * @slot overline - Renders the overline of the list item.
18
+ * @slot supporting-text - Renders the supporting text of the list item.
19
+ * @slot trailing - Renders the trailing content of the list item.
20
+ *
21
+ * @attr disabled - Whether the element is disabled.
22
+ * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
23
+ * @attr href - The URL to which the link button points.
24
+ * @attr rel - The relationship between the `target` of the link button and the document.
25
+ * @attr target - The target of the link button.
26
+ *
27
+ * @fires click - Emitted when the element is clicked.
28
+ *
29
+ * @cssprop --m3e-list-item-between-space - Horizontal gap between elements.
30
+ * @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
31
+ * @cssprop --m3e-list-item-padding-block - Vertical padding for the list item.
32
+ * @cssprop --m3e-list-item-height - Minimum height of the list item.
33
+ * @cssprop --m3e-list-item-font-size - Font size for main content.
34
+ * @cssprop --m3e-list-item-font-weight - Font weight for main content.
35
+ * @cssprop --m3e-list-item-line-height - Line height for main content.
36
+ * @cssprop --m3e-list-item-tracking - Letter spacing for main content.
37
+ * @cssprop --m3e-list-item-overline-font-size - Font size for overline slot.
38
+ * @cssprop --m3e-list-item-overline-font-weight - Font weight for overline slot.
39
+ * @cssprop --m3e-list-item-overline-line-height - Line height for overline slot.
40
+ * @cssprop --m3e-list-item-overline-tracking - Letter spacing for overline slot.
41
+ * @cssprop --m3e-list-item-supporting-text-font-size - Font size for supporting text slot.
42
+ * @cssprop --m3e-list-item-supporting-text-font-weight - Font weight for supporting text slot.
43
+ * @cssprop --m3e-list-item-supporting-text-line-height - Line height for supporting text slot.
44
+ * @cssprop --m3e-list-item-supporting-text-tracking - Letter spacing for supporting text slot.
45
+ * @cssprop --m3e-list-item-trailing-text-font-size - Font size for trailing supporting text slot.
46
+ * @cssprop --m3e-list-item-trailing-text-font-weight - Font weight for trailing supporting text slot.
47
+ * @cssprop --m3e-list-item-trailing-text-line-height - Line height for trailing supporting text slot.
48
+ * @cssprop --m3e-list-item-trailing-text-tracking - Letter spacing for trailing supporting text slot.
49
+ * @cssprop --m3e-list-item-icon-size - Size for leading/trailing icons.
50
+ * @cssprop --m3e-list-item-label-text-color - Color for the main content.
51
+ * @cssprop --m3e-list-item-overline-color - Color for the overline slot.
52
+ * @cssprop --m3e-list-item-supporting-text-color - Color for the supporting text slot.
53
+ * @cssprop --m3e-list-item-leading-color - Color for the leading content.
54
+ * @cssprop --m3e-list-item-trailing-color - Color for the trailing content.
55
+ * @cssprop --m3e-list-item-container-color - Background color of the list item.
56
+ * @cssprop --m3e-list-item-container-shape - Border radius of the list item.
57
+ * @cssprop --m3e-list-item-hover-container-shape - Border radius of the list item on hover.
58
+ * @cssprop --m3e-list-item-focus-container-shape - Border radius of the list item on focus.
59
+ * @cssprop --m3e-list-item-video-width - Width of the video slot.
60
+ * @cssprop --m3e-list-item-video-height - Height of the video slot.
61
+ * @cssprop --m3e-list-item-video-shape - Border radius of the video slot.
62
+ * @cssprop --m3e-list-item-image-width - Width of the image slot.
63
+ * @cssprop --m3e-list-item-image-height - Height of the image slot.
64
+ * @cssprop --m3e-list-item-image-shape - Border radius of the image slot.
65
+ * @cssprop --m3e-list-item-disabled-container-color - Background color of the list item when disabled.
66
+ * @cssprop --m3e-list-item-disabled-label-text-color - Color for the main content when disabled.
67
+ * @cssprop --m3e-list-item-disabled-label-text-opacity - Opacity for the main content when disabled.
68
+ * @cssprop --m3e-list-item-disabled-overline-color - Color for the overline slot when disabled.
69
+ * @cssprop --m3e-list-item-disabled-overline-opacity - Opacity for the overline slot when disabled.
70
+ * @cssprop --m3e-list-item-disabled-supporting-text-color - Color for the supporting text slot when disabled.
71
+ * @cssprop --m3e-list-item-disabled-supporting-text-opacity - Opacity for the supporting text slot when disabled.
72
+ * @cssprop --m3e-list-item-disabled-leading-color - Color for the leading icon when disabled.
73
+ * @cssprop --m3e-list-item-disabled-leading-opacity - Opacity for the leading icon when disabled.
74
+ * @cssprop --m3e-list-item-disabled-trailing-color - Color for the trailing icon when disabled.
75
+ * @cssprop --m3e-list-item-disabled-trailing-opacity - Opacity for the trailing icon when disabled.
76
+ * @cssprop --m3e-list-item-hover-state-layer-color - Color for the hover state layer.
77
+ * @cssprop --m3e-list-item-hover-state-layer-opacity - Opacity for the hover state layer.
78
+ * @cssprop --m3e-list-item-focus-state-layer-color - Color for the focus state layer.
79
+ * @cssprop --m3e-list-item-focus-state-layer-opacity - Opacity for the focus state layer.
80
+ * @cssprop --m3e-list-item-pressed-state-layer-color - Color for the pressed state layer.
81
+ * @cssprop --m3e-list-item-pressed-state-layer-opacity - Opacity for the pressed state layer.
82
+ * @cssprop --m3e-list-item-three-line-top-offset - Top offset for media in three line items.
83
+ * @cssprop --m3e-list-item-disabled-media-opacity - Opacity for media when disabled.
84
+ */
85
+ export declare class M3eListActionElement extends M3eListActionElement_base {
86
+ #private;
87
+ /** The styles of the element. */
88
+ static styles: CSSResultGroup;
89
+ /** @internal */
90
+ readonly button: M3eListItemButtonElement;
91
+ /**
92
+ * Whether the element is disabled.
93
+ * @default false
94
+ */
95
+ disabled: boolean;
96
+ /** @inheritdoc */
97
+ protected render(): unknown;
98
+ }
99
+ declare global {
100
+ interface HTMLElementTagNameMap {
101
+ "m3e-list-action": M3eListActionElement;
102
+ }
103
+ }
104
+ export {};
105
+ //# sourceMappingURL=ListActionElement.d.ts.map
package/dist/src/ListActionElement.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListActionElement.d.ts","sourceRoot":"","sources":["../../src/ListActionElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,MAAM,KAAK,CAAC;AAOhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,qBACa,oBAAqB,SAAQ,yBAA8B;;IACtE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAEF,gBAAgB;IACE,QAAQ,CAAC,MAAM,EAAG,wBAAwB,CAAC;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D,kBAAkB;cACC,MAAM,IAAI,OAAO;CAwBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
package/dist/src/ListElement.d.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  import { CSSResultGroup, LitElement } from "lit";
2
+ import { ListVariant } from "./ListVariant";
3
+ import { M3eListItemElement } from "./ListItemElement";
4
+ import { ListItemContentType } from "./ListItemContentType";
2
5
  declare const M3eListElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
3
6
  /**
4
7
  * A list of items.
@@ -21,7 +24,7 @@ declare const M3eListElement_base: import("node_modules/@m3e/core/dist/src/share
21
24
  * <span slot="overline">Overline</span>
22
25
  * Headline
23
26
  * <span slot="supporting-text">Supporting text</span>
24
- * <span slot="trailing-supporting-text">100+</span>
27
+ * <span slot="trailing-text">100+</span>
25
28
  * <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
26
29
  * </m3e-list-item>
27
30
  * </m3e-list>
@@ -31,15 +34,51 @@ declare const M3eListElement_base: import("node_modules/@m3e/core/dist/src/share
31
34
  *
32
35
  * @slot - Renders the items of the list.
33
36
  *
34
- * @cssprop --m3e-list-block-padding - Vertical padding for the list container.
37
+ * @attr variant - The appearance variant of the list.
38
+ *
35
39
  * @cssprop --m3e-list-divider-inset-start-size - Start inset for dividers within the list.
36
40
  * @cssprop --m3e-list-divider-inset-end-size - End inset for dividers within the list.
41
+ * @cssprop --m3e-segmented-list-segment-gap - Gap between list items in segmented variant.
42
+ * @cssprop --m3e-segmented-list-container-shape - Border radius of the segmented list container.
43
+ * @cssprop --m3e-segmented-list-item-container-color - Background color of items in segmented variant.
44
+ * @cssprop --m3e-segmented-list-item-disabled-container-color - Background color of disabled items in segmented variant.
45
+ * @cssprop --m3e-segmented-list-item-container-shape - Border radius of items in segmented variant.
46
+ * @cssprop --m3e-segmented-list-item-hover-container-shape - Border radius of items in segmented variant on hover.
47
+ * @cssprop --m3e-segmented-list-item-focus-container-shape - Border radius of items in segmented variant on focus.
48
+ * @cssprop --m3e-segmented-list-item-selected-container-shape - Border radius of items in segmented variant when selected.
37
49
  */
38
50
  export declare class M3eListElement extends M3eListElement_base {
51
+ #private;
39
52
  /** The styles of the element. */
40
53
  static styles: CSSResultGroup;
54
+ /**
55
+ * The appearance variant of the list.
56
+ * @default "standard"
57
+ */
58
+ variant: ListVariant;
59
+ /** The items of the list. */
60
+ get items(): ReadonlyArray<M3eListItemElement>;
61
+ /** The type of leading content. */
62
+ get leadingContentType(): ListItemContentType;
63
+ /** The type of trailing content. */
64
+ get trailingContentType(): ListItemContentType;
41
65
  /** @inheritdoc */
42
66
  protected render(): unknown;
67
+ /**
68
+ * @internal
69
+ * Notifies the list that items have changed.
70
+ */
71
+ notifyItemsChange(): void;
72
+ /**
73
+ * @internal
74
+ * Notifies the list that the leading content of an item has changed.
75
+ */
76
+ notifyLeadingContentTypeChange(oldType: ListItemContentType, newType: ListItemContentType): void;
77
+ /**
78
+ * @internal
79
+ * Notifies the list that the trailing content of an item has changed.
80
+ */
81
+ notifyTrailingContentTypeChange(oldType: ListItemContentType, newType: ListItemContentType): void;
43
82
  }
44
83
  declare global {
45
84
  interface HTMLElementTagNameMap {
package/dist/src/ListElement.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListElement.d.ts","sourceRoot":"","sources":["../../src/ListElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,cAAe,SAAQ,mBAAwB;IAC1D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAQpC;IAEF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
1
+ {"version":3,"file":"ListElement.d.ts","sourceRoot":"","sources":["../../src/ListElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,cAAe,SAAQ,mBAAwB;;IAC1D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAiFpC;IAMF;;;OAGG;IAC0B,OAAO,EAAE,WAAW,CAAc;IAE/D,6BAA6B;IAC7B,IAAI,KAAK,IAAI,aAAa,CAAC,kBAAkB,CAAC,CAE7C;IAED,mCAAmC;IACnC,IAAI,kBAAkB,IAAI,mBAAmB,CAY5C;IAED,oCAAoC;IACpC,IAAI,mBAAmB,IAAI,mBAAmB,CAY7C;IAED,kBAAkB;cACC,MAAM,IAAI,OAAO;IAkBpC;;;OAGG;IACH,iBAAiB,IAAI,IAAI;IAEzB;;;OAGG;IACH,8BAA8B,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI;IAahG;;;OAGG;IACH,+BAA+B,CAAC,OAAO,EAAE,mBAAmB,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI;CAYlG;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
package/dist/src/ListItemButtonElement.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { CSSResultGroup, PropertyValues } from "lit";
2
+ import { M3eListItemElement } from "./ListItemElement";
3
+ declare const M3eListItemButtonElement_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("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 M3eListItemElement;
4
+ /**
5
+ * @internal
6
+ * An internal interactive element used to present the content of a list item.
7
+ */
8
+ export declare class M3eListItemButtonElement extends M3eListItemButtonElement_base {
9
+ /** The styles of the element. */
10
+ static styles: CSSResultGroup;
11
+ /** @private */ private readonly _focusRing?;
12
+ /** @private */ private readonly _stateLayer?;
13
+ /** @private */ private readonly _ripple?;
14
+ /** @inheritdoc */
15
+ protected firstUpdated(_changedProperties: PropertyValues<this>): void;
16
+ /** @inheritdoc */
17
+ protected render(): unknown;
18
+ }
19
+ declare global {
20
+ interface HTMLElementTagNameMap {
21
+ "m3e-list-item-button": M3eListItemButtonElement;
22
+ }
23
+ }
24
+ export {};
25
+ //# sourceMappingURL=ListItemButtonElement.d.ts.map
package/dist/src/ListItemButtonElement.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListItemButtonElement.d.ts","sourceRoot":"","sources":["../../src/ListItemButtonElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAgBhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;;AAEvD;;;GAGG;AACH,qBACa,wBAAyB,SAAQ,6BAE7C;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAuBpC;IAEF,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;IAE9E,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAMrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}
package/dist/src/ListItemContentType.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /** Specifies the types available for leading and trailing content. */
2
+ export type ListItemContentType = "video" | "image" | "avatar" | "icon" | "text" | undefined;
3
+ //# sourceMappingURL=ListItemContentType.d.ts.map
package/dist/src/ListItemContentType.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListItemContentType.d.ts","sourceRoot":"","sources":["../../src/ListItemContentType.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC"}
package/dist/src/ListItemElement.d.ts CHANGED
@@ -1,11 +1,12 @@
1
- import { CSSResultGroup, LitElement } from "lit";
1
+ import { CSSResultGroup, LitElement, PropertyValues } from "lit";
2
+ import { ListItemContentType } from "./ListItemContentType";
2
3
  declare const M3eListItemElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
3
4
  /**
4
5
  * An item in a list.
5
6
  *
6
7
  * @description
7
8
  * The `m3e-list-item` component represents a single item within a list. It supports rich
8
- * content, leading/trailing icons, overline, supporting text, and trailing supporting text
9
+ * content, leading/trailing media, overline, supporting text, and trailing supporting text
9
10
  * via named slots. The component is highly customizable through CSS custom properties and
10
11
  * is designed for accessibility and flexible layout.
11
12
  *
@@ -18,12 +19,11 @@ declare const M3eListItemElement_base: import("node_modules/@m3e/core/dist/src/s
18
19
  * ```html
19
20
  * <m3e-list>
20
21
  * <m3e-list-item>
21
- * <m3e-icon slot="leading-icon" name="person"></m3e-icon>
22
+ * <m3e-icon slot="leading" name="person"></m3e-icon>
22
23
  * <span slot="overline">Overline</span>
23
24
  * Headline
24
25
  * <span slot="supporting-text">Supporting text</span>
25
- * <span slot="trailing-supporting-text">100+</span>
26
- * <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
26
+ * <m3e-icon slot="trailing" name="arrow_right"></m3e-icon>
27
27
  * </m3e-list-item>
28
28
  * </m3e-list>
29
29
  * ```
@@ -31,16 +31,22 @@ declare const M3eListItemElement_base: import("node_modules/@m3e/core/dist/src/s
31
31
  * @tag m3e-list-item
32
32
  *
33
33
  * @slot - Renders the content of the list item.
34
- * @slot leading-icon - Renders the leading icon of the list item.
34
+ * @slot leading - Renders the leading content of the list item.
35
35
  * @slot overline - Renders the overline of the list item.
36
36
  * @slot supporting-text - Renders the supporting text of the list item.
37
- * @slot trailing-supporting-text - Renders the trailing supporting text of the list item.
38
- * @slot trailing-icon - Renders the trailing icon of the list item.
37
+ * @slot trailing - Renders the trailing content of the list item.
39
38
  *
40
- * @cssprop --m3e-list-item-spacing - Horizontal gap between elements.
39
+ * @cssprop --m3e-list-item-between-space - Horizontal gap between elements.
40
+ * @cssprop --m3e-list-item-leading-space - Horizontal padding for the leading side.
41
+ * @cssprop --m3e-list-item-trailing-space - Horizontal padding for the trailing side.
41
42
  * @cssprop --m3e-list-item-padding-inline - Horizontal padding for the list item.
42
43
  * @cssprop --m3e-list-item-padding-block - Vertical padding for the list item.
43
- * @cssprop --m3e-list-item-height - Minimum height of the list item.
44
+ * @cssprop --m3e-list-item-one-line-top-space - Top padding for one-line items.
45
+ * @cssprop --m3e-list-item-one-line-bottom-space - Bottom padding for one-line items.
46
+ * @cssprop --m3e-list-item-two-line-top-space - Top padding for two-line items.
47
+ * @cssprop --m3e-list-item-two-line-bottom-space - Bottom padding for two-line items.
48
+ * @cssprop --m3e-list-item-three-line-top-space - Top padding for three-line items.
49
+ * @cssprop --m3e-list-item-three-line-bottom-space - Bottom padding for three-line items.
44
50
  * @cssprop --m3e-list-item-font-size - Font size for main content.
45
51
  * @cssprop --m3e-list-item-font-weight - Font weight for main content.
46
52
  * @cssprop --m3e-list-item-line-height - Line height for main content.
@@ -53,17 +59,47 @@ declare const M3eListItemElement_base: import("node_modules/@m3e/core/dist/src/s
53
59
  * @cssprop --m3e-list-item-supporting-text-font-weight - Font weight for supporting text slot.
54
60
  * @cssprop --m3e-list-item-supporting-text-line-height - Line height for supporting text slot.
55
61
  * @cssprop --m3e-list-item-supporting-text-tracking - Letter spacing for supporting text slot.
56
- * @cssprop --m3e-list-item-trailing-supporting-text-font-size - Font size for trailing supporting text slot.
57
- * @cssprop --m3e-list-item-trailing-supporting-text-font-weight - Font weight for trailing supporting text slot.
58
- * @cssprop --m3e-list-item-trailing-supporting-text-line-height - Line height for trailing supporting text slot.
59
- * @cssprop --m3e-list-item-trailing-supporting-text-tracking - Letter spacing for trailing supporting text slot.
62
+ * @cssprop --m3e-list-item-trailing-text-font-size - Font size for trailing supporting text slot.
63
+ * @cssprop --m3e-list-item-trailing-text-font-weight - Font weight for trailing supporting text slot.
64
+ * @cssprop --m3e-list-item-trailing-text-line-height - Line height for trailing supporting text slot.
65
+ * @cssprop --m3e-list-item-trailing-text-tracking - Letter spacing for trailing supporting text slot.
60
66
  * @cssprop --m3e-list-item-icon-size - Size for leading/trailing icons.
67
+ * @cssprop --m3e-list-item-label-text-color - Color for the main content.
68
+ * @cssprop --m3e-list-item-overline-color - Color for the overline slot.
69
+ * @cssprop --m3e-list-item-supporting-text-color - Color for the supporting text slot.
70
+ * @cssprop --m3e-list-item-leading-color - Color for the leading content.
71
+ * @cssprop --m3e-list-item-trailing-color - Color for the trailing content.
72
+ * @cssprop --m3e-list-item-container-color - Background color of the list item.
73
+ * @cssprop --m3e-list-item-container-shape - Border radius of the list item.
74
+ * @cssprop --m3e-list-item-hover-container-shape - Border radius of the list item on hover.
75
+ * @cssprop --m3e-list-item-focus-container-shape - Border radius of the list item on focus.
76
+ * @cssprop --m3e-list-item-video-width - Width of the video slot.
77
+ * @cssprop --m3e-list-item-video-height - Height of the video slot.
78
+ * @cssprop --m3e-list-item-video-shape - Border radius of the video slot.
79
+ * @cssprop --m3e-list-item-image-width - Width of the image slot.
80
+ * @cssprop --m3e-list-item-image-height - Height of the image slot.
81
+ * @cssprop --m3e-list-item-image-shape - Border radius of the image slot.
82
+ * @cssprop --m3e-list-item-three-line-top-offset - Top offset for media in three line items.
83
+ * @cssprop --m3e-list-item-one-line-height - Minimum height of a one line list item.
84
+ * @cssprop --m3e-list-item-two-line-height - Minimum height of a two line list item.
85
+ * @cssprop --m3e-list-item-three-line-height - Minimum height of a three line list item.
61
86
  */
62
87
  export declare class M3eListItemElement extends M3eListItemElement_base {
88
+ #private;
63
89
  /** The styles of the element. */
64
90
  static styles: CSSResultGroup;
91
+ /** The type of leading content. */
92
+ get leadingContentType(): ListItemContentType;
93
+ /** The type of trailing content. */
94
+ get trailingContentType(): ListItemContentType;
95
+ /** @inheritdoc */
96
+ protected firstUpdated(_changedProperties: PropertyValues): void;
65
97
  /** @inheritdoc */
66
98
  protected render(): unknown;
99
+ /** @internal */
100
+ protected _handleLeadingSlotChange(e: Event): void;
101
+ /** @internal */
102
+ protected _handleTrailingSlotChange(e: Event): void;
67
103
  }
68
104
  declare global {
69
105
  interface HTMLElementTagNameMap {
package/dist/src/ListItemElement.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemElement.d.ts","sourceRoot":"","sources":["../../src/ListItemElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,qBACa,kBAAmB,SAAQ,uBAA4B;IAClE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoEpC;IAEF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAUrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
1
+ {"version":3,"file":"ListItemElement.d.ts","sourceRoot":"","sources":["../../src/ListItemElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAMvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,qBACa,kBAAmB,SAAQ,uBAA4B;;IAClE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAmTpC;IAQF,mCAAmC;IACnC,IAAI,kBAAkB,IAAI,mBAAmB,CAE5C;IAED,oCAAoC;IACpC,IAAI,mBAAmB,IAAI,mBAAmB,CAE7C;IAED,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IASzE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAwBpC,gBAAgB;IAChB,SAAS,CAAC,wBAAwB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAYlD,gBAAgB;IAChB,SAAS,CAAC,yBAAyB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;CAqBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}