@m3e/list 1.1.6 โ†’ 1.1.8

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/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @m3e/list
2
2
 
3
- The `@m3e/list` package provides expressive, accessible components for organizing and displaying lists of items. It includes both the `m3e-list` container and the `m3e-list-item` element, supporting rich content, flexible layout, and extensive theming via CSS custom properties.
3
+ The `@m3e/list` package provides expressive, accessible components for organizing and displaying lists of items. It includes list containers (`m3e-list`, `m3e-action-list`, `m3e-selection-list`), basic list items (`m3e-list-item`), interactive items (`m3e-list-action`, `m3e-list-option`), and hierarchical items (`m3e-expandable-list-item`). All components support rich content, flexible layout, keyboard navigation, and extensive theming via CSS custom properties following Material 3 design principles.
4
4
 
5
5
  > **This package is part of [M3E](https://github.com/matraic/m3e) monorepo**, a unified suite of Material 3 web components. [Explore the docs](https://matraic.github.io/m3e) to see them in action.
6
6
 
@@ -42,7 +42,8 @@ In addition, you must use an [import map](https://developer.mozilla.org/en-US/do
42
42
  {
43
43
  "imports": {
44
44
  "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
45
- "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
45
+ "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
46
+ "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js"
46
47
  }
47
48
  }
48
49
  </script>
@@ -52,8 +53,13 @@ In addition, you must use an [import map](https://developer.mozilla.org/en-US/do
52
53
 
53
54
  ## ๐Ÿ—‚๏ธ Elements
54
55
 
55
- - `m3e-list` โ€” A list of items.
56
- - `m3e-list-item` โ€” An item in a list.
56
+ - `m3e-list` โ€” A list container for organizing and displaying multiple list items.
57
+ - `m3e-list-item` โ€” A single item within a list with support for rich content and flexible layout.
58
+ - `m3e-list-action` โ€” An interactive list item that performs a user-initiated action.
59
+ - `m3e-list-option` โ€” A selectable option in a list with selection capabilities.
60
+ - `m3e-action-list` โ€” A specialized list container for action-based interactions with keyboard navigation.
61
+ - `m3e-selection-list` โ€” A list of selectable options with multi-select support.
62
+ - `m3e-expandable-list-item` โ€” An item in a list that can be expanded to show nested items.
57
63
 
58
64
  ## ๐Ÿงช Examples
59
65
 
@@ -64,12 +70,11 @@ The following example illustrates a list with a single item using all supported
64
70
  ```html
65
71
  <m3e-list>
66
72
  <m3e-list-item>
67
- <m3e-icon slot="leading-icon" name="person"></m3e-icon>
73
+ <m3e-icon slot="leading" name="person"></m3e-icon>
68
74
  <span slot="overline">Overline</span>
69
75
  Headline
70
76
  <span slot="supporting-text">Supporting text</span>
71
- <span slot="trailing-supporting-text">100+</span>
72
- <m3e-icon slot="trailing-icon" name="arrow_right"></m3e-icon>
77
+ <m3e-icon slot="trailing" name="arrow_right"></m3e-icon>
73
78
  </m3e-list-item>
74
79
  </m3e-list>
75
80
  ```
@@ -78,7 +83,7 @@ The following example illustrates a list with a single item using all supported
78
83
 
79
84
  ### ๐Ÿ—‚๏ธ m3e-list
80
85
 
81
- This section details the slots and CSS custom properties available for the `m3e-list` component.
86
+ This section details the attributes, slots and CSS custom properties available for the `m3e-list` component.
82
87
 
83
88
  #### ๐Ÿงฉ Slots
84
89
 
@@ -86,54 +91,472 @@ This section details the slots and CSS custom properties available for the `m3e-
86
91
  | ----------- | ------------------------------ |
87
92
  | _(default)_ | Renders the items of the list. |
88
93
 
94
+ #### ๐Ÿ“‹ Attributes
95
+
96
+ | Attribute | Type | Default | Description |
97
+ | --------- | ----------------------------- | ------------ | ----------------------------------- |
98
+ | `variant` | `"standard"` \| `"segmented"` | `"standard"` | The appearance variant of the list. |
99
+
89
100
  #### ๐ŸŽ›๏ธ CSS Custom Properties
90
101
 
91
- | Property | Description |
92
- | ------------------------------------- | ------------------------------ |
93
- | `--m3e-list-block-padding` | Vertical padding for the list. |
94
- | `--m3e-list-divider-inset-start-size` | Start inset for dividers. |
95
- | `--m3e-list-divider-inset-end-size` | End inset for dividers. |
102
+ | Property | Description |
103
+ | ---------------------------------------------------- | ---------------------------------------------------------- |
104
+ | `--m3e-list-divider-inset-start-size` | Start inset for dividers within the list. |
105
+ | `--m3e-list-divider-inset-end-size` | End inset for dividers within the list. |
106
+ | `--m3e-segmented-list-segment-gap` | Gap between list items in segmented variant. |
107
+ | `--m3e-segmented-list-container-shape` | Border radius of the segmented list container. |
108
+ | `--m3e-segmented-list-item-container-color` | Background color of items in segmented variant. |
109
+ | `--m3e-segmented-list-item-container-shape` | Border radius of items in segmented variant. |
110
+ | `--m3e-segmented-list-item-hover-container-shape` | Border radius of items in segmented variant on hover. |
111
+ | `--m3e-segmented-list-item-focus-container-shape` | Border radius of items in segmented variant on focus. |
112
+ | `--m3e-segmented-list-item-selected-container-shape` | Border radius of items in segmented variant when selected. |
96
113
 
97
114
  ### ๐Ÿ—‚๏ธ m3e-list-item
98
115
 
99
- This section details the slots and CSS custom properties available for the `m3e-list-item` component.
116
+ This section details the attributes, slots and CSS custom properties available for the `m3e-list-item` component.
117
+
118
+ #### ๐Ÿงฉ Slots
119
+
120
+ | Slot | Description |
121
+ | ----------------- | ---------------------------------------------- |
122
+ | _(default)_ | Renders the content of the list item. |
123
+ | `leading` | Renders the leading content of the list item. |
124
+ | `overline` | Renders the overline of the list item. |
125
+ | `supporting-text` | Renders the supporting text of the list item. |
126
+ | `trailing` | Renders the trailing content of the list item. |
127
+
128
+ #### ๐ŸŽ›๏ธ CSS Custom Properties
129
+
130
+ | Property | Description |
131
+ | -------------------------------------------------- | --------------------------------------------------- |
132
+ | `--m3e-list-item-between-space` | Horizontal gap between elements. |
133
+ | `--m3e-list-item-leading-space` | Horizontal padding for the leading side. |
134
+ | `--m3e-list-item-trailing-space` | Horizontal padding for the trailing side. |
135
+ | `--m3e-list-item-padding-inline` | Horizontal padding for the list item. |
136
+ | `--m3e-list-item-padding-block` | Vertical padding for the list item. |
137
+ | `--m3e-list-item-one-line-top-space` | Top padding for one-line items. |
138
+ | `--m3e-list-item-one-line-bottom-space` | Bottom padding for one-line items. |
139
+ | `--m3e-list-item-two-line-top-space` | Top padding for two-line items. |
140
+ | `--m3e-list-item-two-line-bottom-space` | Bottom padding for two-line items. |
141
+ | `--m3e-list-item-three-line-top-space` | Top padding for three-line items. |
142
+ | `--m3e-list-item-three-line-bottom-space` | Bottom padding for three-line items. |
143
+ | `--m3e-list-item-height` | Minimum height of the list item. |
144
+ | `--m3e-list-item-font-size` | Font size for main content. |
145
+ | `--m3e-list-item-font-weight` | Font weight for main content. |
146
+ | `--m3e-list-item-line-height` | Line height for main content. |
147
+ | `--m3e-list-item-tracking` | Letter spacing for main content. |
148
+ | `--m3e-list-item-overline-font-size` | Font size for overline slot. |
149
+ | `--m3e-list-item-overline-font-weight` | Font weight for overline slot. |
150
+ | `--m3e-list-item-overline-line-height` | Line height for overline slot. |
151
+ | `--m3e-list-item-overline-tracking` | Letter spacing for overline slot. |
152
+ | `--m3e-list-item-supporting-text-font-size` | Font size for supporting text slot. |
153
+ | `--m3e-list-item-supporting-text-font-weight` | Font weight for supporting text slot. |
154
+ | `--m3e-list-item-supporting-text-line-height` | Line height for supporting text slot. |
155
+ | `--m3e-list-item-supporting-text-tracking` | Letter spacing for supporting text slot. |
156
+ | `--m3e-list-item-trailing-text-font-size` | Font size for trailing supporting text slot. |
157
+ | `--m3e-list-item-trailing-text-font-weight` | Font weight for trailing supporting text slot. |
158
+ | `--m3e-list-item-trailing-text-line-height` | Line height for trailing supporting text slot. |
159
+ | `--m3e-list-item-trailing-text-tracking` | Letter spacing for trailing supporting text slot. |
160
+ | `--m3e-list-item-icon-size` | Size for leading/trailing icons. |
161
+ | `--m3e-list-item-label-text-color` | Color for the main content. |
162
+ | `--m3e-list-item-overline-color` | Color for the overline slot. |
163
+ | `--m3e-list-item-supporting-text-color` | Color for the supporting text slot. |
164
+ | `--m3e-list-item-leading-color` | Color for the leading content. |
165
+ | `--m3e-list-item-trailing-color` | Color for the trailing content. |
166
+ | `--m3e-list-item-container-color` | Background color of the list item. |
167
+ | `--m3e-list-item-container-shape` | Border radius of the list item. |
168
+ | `--m3e-list-item-hover-container-shape` | Border radius of the list item on hover. |
169
+ | `--m3e-list-item-focus-container-shape` | Border radius of the list item on focus. |
170
+ | `--m3e-list-item-video-width` | Width of the video slot. |
171
+ | `--m3e-list-item-video-height` | Height of the video slot. |
172
+ | `--m3e-list-item-video-shape` | Border radius of the video slot. |
173
+ | `--m3e-list-item-image-width` | Width of the image slot. |
174
+ | `--m3e-list-item-image-height` | Height of the image slot. |
175
+ | `--m3e-list-item-image-shape` | Border radius of the image slot. |
176
+ | `--m3e-list-item-disabled-label-text-color` | Color for the main content when disabled. |
177
+ | `--m3e-list-item-disabled-label-text-opacity` | Opacity for the main content when disabled. |
178
+ | `--m3e-list-item-disabled-overline-color` | Color for the overline slot when disabled. |
179
+ | `--m3e-list-item-disabled-overline-opacity` | Opacity for the overline slot when disabled. |
180
+ | `--m3e-list-item-disabled-supporting-text-color` | Color for the supporting text slot when disabled. |
181
+ | `--m3e-list-item-disabled-supporting-text-opacity` | Opacity for the supporting text slot when disabled. |
182
+ | `--m3e-list-item-disabled-leading-color` | Color for the leading content when disabled. |
183
+ | `--m3e-list-item-disabled-leading-opacity` | Opacity for the leading content when disabled. |
184
+ | `--m3e-list-item-disabled-trailing-color` | Color for the trailing content when disabled. |
185
+ | `--m3e-list-item-disabled-trailing-opacity` | Opacity for the trailing content when disabled. |
186
+ | `--m3e-list-item-hover-state-layer-color` | Color for the hover state layer. |
187
+ | `--m3e-list-item-hover-state-layer-opacity` | Opacity for the hover state layer. |
188
+ | `--m3e-list-item-focus-state-layer-color` | Color for the focus state layer. |
189
+ | `--m3e-list-item-focus-state-layer-opacity` | Opacity for the focus state layer. |
190
+ | `--m3e-list-item-pressed-state-layer-color` | Color for the pressed state layer. |
191
+ | `--m3e-list-item-pressed-state-layer-opacity` | Opacity for the pressed state layer. |
192
+ | `--m3e-list-item-disabled-media-opacity` | Opacity for media elements when disabled. |
193
+ | `--m3e-list-item-three-line-top-offset` | Top offset for media in three line items. |
194
+
195
+ ### ๐Ÿ—‚๏ธ m3e-list-action
196
+
197
+ This section details the attributes, slots, events, and CSS custom properties available for the `m3e-list-action` component.
198
+
199
+ #### ๐Ÿงฉ Slots
200
+
201
+ | Slot | Description |
202
+ | ----------------- | ---------------------------------------------- |
203
+ | _(default)_ | Renders the content of the list item. |
204
+ | `leading` | Renders the leading content of the list item. |
205
+ | `overline` | Renders the overline of the list item. |
206
+ | `supporting-text` | Renders the supporting text of the list item. |
207
+ | `trailing` | Renders the trailing content of the list item. |
208
+
209
+ #### ๐Ÿ“‹ Attributes
210
+
211
+ | Attribute | Type | Default | Description |
212
+ | ---------- | --------- | ------- | ------------------------------------------------------------------------ |
213
+ | `disabled` | `boolean` | `false` | Whether the element is disabled. |
214
+ | `download` | `string` | โ€” | A value indicating whether the link button will be downloaded. |
215
+ | `href` | `string` | โ€” | The URL to which the link button points. |
216
+ | `rel` | `string` | โ€” | The relationship between the target of the link button and the document. |
217
+ | `target` | `string` | โ€” | The target of the link button. |
218
+
219
+ #### ๐Ÿ“ก Events
220
+
221
+ | Event | Description |
222
+ | ------- | ------------------------------------ |
223
+ | `click` | Emitted when the element is clicked. |
224
+
225
+ #### ๐ŸŽ›๏ธ CSS Custom Properties
226
+
227
+ | Property | Description |
228
+ | -------------------------------------------------- | --------------------------------------------------- |
229
+ | `--m3e-list-item-between-space` | Horizontal gap between elements. |
230
+ | `--m3e-list-item-padding-inline` | Horizontal padding for the list item. |
231
+ | `--m3e-list-item-padding-block` | Vertical padding for the list item. |
232
+ | `--m3e-list-item-height` | Minimum height of the list item. |
233
+ | `--m3e-list-item-font-size` | Font size for main content. |
234
+ | `--m3e-list-item-font-weight` | Font weight for main content. |
235
+ | `--m3e-list-item-line-height` | Line height for main content. |
236
+ | `--m3e-list-item-tracking` | Letter spacing for main content. |
237
+ | `--m3e-list-item-overline-font-size` | Font size for overline slot. |
238
+ | `--m3e-list-item-overline-font-weight` | Font weight for overline slot. |
239
+ | `--m3e-list-item-overline-line-height` | Line height for overline slot. |
240
+ | `--m3e-list-item-overline-tracking` | Letter spacing for overline slot. |
241
+ | `--m3e-list-item-supporting-text-font-size` | Font size for supporting text slot. |
242
+ | `--m3e-list-item-supporting-text-font-weight` | Font weight for supporting text slot. |
243
+ | `--m3e-list-item-supporting-text-line-height` | Line height for supporting text slot. |
244
+ | `--m3e-list-item-supporting-text-tracking` | Letter spacing for supporting text slot. |
245
+ | `--m3e-list-item-trailing-text-font-size` | Font size for trailing supporting text slot. |
246
+ | `--m3e-list-item-trailing-text-font-weight` | Font weight for trailing supporting text slot. |
247
+ | `--m3e-list-item-trailing-text-line-height` | Line height for trailing supporting text slot. |
248
+ | `--m3e-list-item-trailing-text-tracking` | Letter spacing for trailing supporting text slot. |
249
+ | `--m3e-list-item-icon-size` | Size for leading/trailing icons. |
250
+ | `--m3e-list-item-label-text-color` | Color for the main content. |
251
+ | `--m3e-list-item-overline-color` | Color for the overline slot. |
252
+ | `--m3e-list-item-supporting-text-color` | Color for the supporting text slot. |
253
+ | `--m3e-list-item-leading-color` | Color for the leading content. |
254
+ | `--m3e-list-item-trailing-color` | Color for the trailing content. |
255
+ | `--m3e-list-item-container-color` | Background color of the list item. |
256
+ | `--m3e-list-item-container-shape` | Border radius of the list item. |
257
+ | `--m3e-list-item-hover-container-shape` | Border radius of the list item on hover. |
258
+ | `--m3e-list-item-focus-container-shape` | Border radius of the list item on focus. |
259
+ | `--m3e-list-item-video-width` | Width of the video slot. |
260
+ | `--m3e-list-item-video-height` | Height of the video slot. |
261
+ | `--m3e-list-item-video-shape` | Border radius of the video slot. |
262
+ | `--m3e-list-item-image-width` | Width of the image slot. |
263
+ | `--m3e-list-item-image-height` | Height of the image slot. |
264
+ | `--m3e-list-item-image-shape` | Border radius of the image slot. |
265
+ | `--m3e-list-item-avatar-size` | Size of the avatar slot. |
266
+ | `--m3e-list-item-avatar-shape` | Border radius of the avatar slot. |
267
+ | `--m3e-list-item-avatar-font-size` | Font size for avatar slot. |
268
+ | `--m3e-list-item-avatar-font-weight` | Font weight for avatar slot. |
269
+ | `--m3e-list-item-avatar-line-height` | Line height for avatar slot. |
270
+ | `--m3e-list-item-avatar-tracking` | Letter spacing for avatar slot. |
271
+ | `--m3e-list-item-avatar-color` | Background color of the avatar slot. |
272
+ | `--m3e-list-item-avatar-label-color` | Text color of the avatar slot. |
273
+ | `--m3e-list-item-disabled-label-text-color` | Color for the main content when disabled. |
274
+ | `--m3e-list-item-disabled-label-text-opacity` | Opacity for the main content when disabled. |
275
+ | `--m3e-list-item-disabled-overline-color` | Color for the overline slot when disabled. |
276
+ | `--m3e-list-item-disabled-overline-opacity` | Opacity for the overline slot when disabled. |
277
+ | `--m3e-list-item-disabled-supporting-text-color` | Color for the supporting text slot when disabled. |
278
+ | `--m3e-list-item-disabled-supporting-text-opacity` | Opacity for the supporting text slot when disabled. |
279
+ | `--m3e-list-item-disabled-leading-color` | Color for the leading content when disabled. |
280
+ | `--m3e-list-item-disabled-leading-opacity` | Opacity for the leading content when disabled. |
281
+ | `--m3e-list-item-disabled-trailing-color` | Color for the trailing content when disabled. |
282
+ | `--m3e-list-item-disabled-trailing-opacity` | Opacity for the trailing content when disabled. |
283
+ | `--m3e-list-item-hover-state-layer-color` | Color for the hover state layer. |
284
+ | `--m3e-list-item-hover-state-layer-opacity` | Opacity for the hover state layer. |
285
+ | `--m3e-list-item-focus-state-layer-color` | Color for the focus state layer. |
286
+ | `--m3e-list-item-focus-state-layer-opacity` | Opacity for the focus state layer. |
287
+ | `--m3e-list-item-pressed-state-layer-color` | Color for the pressed state layer. |
288
+ | `--m3e-list-item-pressed-state-layer-opacity` | Opacity for the pressed state layer. |
289
+ | `--m3e-list-item-disabled-media-opacity` | Opacity for media elements when disabled. |
290
+ | `--m3e-list-item-three-line-top-offset` | Top offset for media in three line items. |
291
+
292
+ ### ๐Ÿ—‚๏ธ m3e-list-option
293
+
294
+ This section details the attributes, slots, events, and CSS custom properties available for the `m3e-list-option` component.
295
+
296
+ #### ๐Ÿงฉ Slots
297
+
298
+ | Slot | Description |
299
+ | ----------------- | ---------------------------------------------- |
300
+ | _(default)_ | Renders the content of the list item. |
301
+ | `leading` | Renders the leading content of the list item. |
302
+ | `overline` | Renders the overline of the list item. |
303
+ | `supporting-text` | Renders the supporting text of the list item. |
304
+ | `trailing` | Renders the trailing content of the list item. |
305
+
306
+ #### ๐Ÿ“‹ Attributes
307
+
308
+ | Attribute | Type | Default | Description |
309
+ | ---------- | --------- | ------- | -------------------------------- |
310
+ | `disabled` | `boolean` | `false` | Whether the element is disabled. |
311
+ | `selected` | `boolean` | `false` | Whether the element is selected. |
312
+
313
+ #### ๐Ÿ“ก Events
314
+
315
+ | Event | Description |
316
+ | -------- | ---------------------------------------- |
317
+ | `input` | Emitted when the selected state changes. |
318
+ | `change` | Emitted when the selected state changes. |
319
+ | `click` | Emitted when the element is clicked. |
320
+
321
+ #### ๐ŸŽ›๏ธ CSS Custom Properties
322
+
323
+ | Property | Description |
324
+ | ------------------------------------------------------ | --------------------------------------------------- |
325
+ | `--m3e-list-item-between-space` | Horizontal gap between elements. |
326
+ | `--m3e-list-item-padding-inline` | Horizontal padding for the list item. |
327
+ | `--m3e-list-item-padding-block` | Vertical padding for the list item. |
328
+ | `--m3e-list-item-height` | Minimum height of the list item. |
329
+ | `--m3e-list-item-font-size` | Font size for main content. |
330
+ | `--m3e-list-item-font-weight` | Font weight for main content. |
331
+ | `--m3e-list-item-line-height` | Line height for main content. |
332
+ | `--m3e-list-item-tracking` | Letter spacing for main content. |
333
+ | `--m3e-list-item-overline-font-size` | Font size for overline slot. |
334
+ | `--m3e-list-item-overline-font-weight` | Font weight for overline slot. |
335
+ | `--m3e-list-item-overline-line-height` | Line height for overline slot. |
336
+ | `--m3e-list-item-overline-tracking` | Letter spacing for overline slot. |
337
+ | `--m3e-list-item-supporting-text-font-size` | Font size for supporting text slot. |
338
+ | `--m3e-list-item-supporting-text-font-weight` | Font weight for supporting text slot. |
339
+ | `--m3e-list-item-supporting-text-line-height` | Line height for supporting text slot. |
340
+ | `--m3e-list-item-supporting-text-tracking` | Letter spacing for supporting text slot. |
341
+ | `--m3e-list-item-trailing-text-font-size` | Font size for trailing supporting text slot. |
342
+ | `--m3e-list-item-trailing-text-font-weight` | Font weight for trailing supporting text slot. |
343
+ | `--m3e-list-item-trailing-text-line-height` | Line height for trailing supporting text slot. |
344
+ | `--m3e-list-item-trailing-text-tracking` | Letter spacing for trailing supporting text slot. |
345
+ | `--m3e-list-item-icon-size` | Size for leading/trailing icons. |
346
+ | `--m3e-list-item-label-text-color` | Color for the main content. |
347
+ | `--m3e-list-item-overline-color` | Color for the overline slot. |
348
+ | `--m3e-list-item-supporting-text-color` | Color for the supporting text slot. |
349
+ | `--m3e-list-item-leading-color` | Color for the leading content. |
350
+ | `--m3e-list-item-trailing-color` | Color for the trailing content. |
351
+ | `--m3e-list-item-container-color` | Background color of the list item. |
352
+ | `--m3e-list-item-container-shape` | Border radius of the list item. |
353
+ | `--m3e-list-item-hover-container-shape` | Border radius of the list item on hover. |
354
+ | `--m3e-list-item-focus-container-shape` | Border radius of the list item on focus. |
355
+ | `--m3e-list-item-video-width` | Width of the video slot. |
356
+ | `--m3e-list-item-video-height` | Height of the video slot. |
357
+ | `--m3e-list-item-video-shape` | Border radius of the video slot. |
358
+ | `--m3e-list-item-image-width` | Width of the image slot. |
359
+ | `--m3e-list-item-image-height` | Height of the image slot. |
360
+ | `--m3e-list-item-image-shape` | Border radius of the image slot. |
361
+ | `--m3e-list-item-disabled-label-text-color` | Color for the main content when disabled. |
362
+ | `--m3e-list-item-disabled-label-text-opacity` | Opacity for the main content when disabled. |
363
+ | `--m3e-list-item-disabled-overline-color` | Color for the overline slot when disabled. |
364
+ | `--m3e-list-item-disabled-overline-opacity` | Opacity for the overline slot when disabled. |
365
+ | `--m3e-list-item-disabled-supporting-text-color` | Color for the supporting text slot when disabled. |
366
+ | `--m3e-list-item-disabled-supporting-text-opacity` | Opacity for the supporting text slot when disabled. |
367
+ | `--m3e-list-item-disabled-leading-color` | Color for the leading content when disabled. |
368
+ | `--m3e-list-item-disabled-leading-opacity` | Opacity for the leading content when disabled. |
369
+ | `--m3e-list-item-disabled-trailing-color` | Color for the trailing content when disabled. |
370
+ | `--m3e-list-item-disabled-trailing-opacity` | Opacity for the trailing content when disabled. |
371
+ | `--m3e-list-item-hover-state-layer-color` | Color for the hover state layer. |
372
+ | `--m3e-list-item-hover-state-layer-opacity` | Opacity for the hover state layer. |
373
+ | `--m3e-list-item-focus-state-layer-color` | Color for the focus state layer. |
374
+ | `--m3e-list-item-focus-state-layer-opacity` | Opacity for the focus state layer. |
375
+ | `--m3e-list-item-pressed-state-layer-color` | Color for the pressed state layer. |
376
+ | `--m3e-list-item-pressed-state-layer-opacity` | Opacity for the pressed state layer. |
377
+ | `--m3e-list-item-disabled-media-opacity` | Opacity for media elements when disabled. |
378
+ | `--m3e-list-item-three-line-top-offset` | Top offset for media in three line items. |
379
+ | `--m3e-list-item-selected-label-text-color` | Selected color for the main content. |
380
+ | `--m3e-list-item-selected-overline-color` | Selected color for the overline slot. |
381
+ | `--m3e-list-item-selected-supporting-text-color` | Selected color for the supporting text slot. |
382
+ | `--m3e-list-item-selected-leading-color` | Selected color for the leading content. |
383
+ | `--m3e-list-item-selected-trailing-color` | Selected color for the trailing content. |
384
+ | `--m3e-list-item-selected-container-color` | Selected background color of the list item. |
385
+ | `--m3e-list-item-selected-container-shape` | Selected border radius of the list item. |
386
+ | `--m3e-list-item-selected-disabled-container-color` | Selected background color when disabled. |
387
+ | `--m3e-list-item-selected-disabled-container-opacity` | Selected opacity when disabled. |
388
+ | `--m3e-list-item-selected-hover-state-layer-color` | Color for the hover state layer when selected. |
389
+ | `--m3e-list-item-selected-hover-state-layer-opacity` | Opacity for the hover state layer when selected. |
390
+ | `--m3e-list-item-selected-focus-state-layer-color` | Color for the focus state layer when selected. |
391
+ | `--m3e-list-item-selected-focus-state-layer-opacity` | Opacity for the focus state layer when selected. |
392
+ | `--m3e-list-item-selected-pressed-state-layer-color` | Color for the pressed state layer when selected. |
393
+ | `--m3e-list-item-selected-pressed-state-layer-opacity` | Opacity for the pressed state layer when selected. |
394
+
395
+ ### ๐Ÿ—‚๏ธ m3e-action-list
396
+
397
+ This section details the attributes, slots and CSS custom properties available for the `m3e-action-list` component.
398
+
399
+ #### ๐Ÿงฉ Slots
400
+
401
+ | Slot | Description |
402
+ | ----------- | ------------------------------ |
403
+ | _(default)_ | Renders the items of the list. |
404
+
405
+ #### ๐Ÿ“‹ Attributes
406
+
407
+ | Attribute | Type | Default | Description |
408
+ | --------- | ----------------------------- | ------------ | ----------------------------------- |
409
+ | `variant` | `"standard"` \| `"segmented"` | `"standard"` | The appearance variant of the list. |
410
+
411
+ #### ๐ŸŽ›๏ธ CSS Custom Properties
412
+
413
+ | Property | Description |
414
+ | ---------------------------------------------------- | ---------------------------------------------------------- |
415
+ | `--m3e-list-divider-inset-start-size` | Start inset for dividers within the list. |
416
+ | `--m3e-list-divider-inset-end-size` | End inset for dividers within the list. |
417
+ | `--m3e-segmented-list-segment-gap` | Gap between list items in segmented variant. |
418
+ | `--m3e-segmented-list-container-shape` | Border radius of the segmented list container. |
419
+ | `--m3e-segmented-list-item-container-color` | Background color of items in segmented variant. |
420
+ | `--m3e-segmented-list-item-container-shape` | Border radius of items in segmented variant. |
421
+ | `--m3e-segmented-list-item-hover-container-shape` | Border radius of items in segmented variant on hover. |
422
+ | `--m3e-segmented-list-item-focus-container-shape` | Border radius of items in segmented variant on focus. |
423
+ | `--m3e-segmented-list-item-selected-container-shape` | Border radius of items in segmented variant when selected. |
424
+
425
+ ### ๐Ÿ—‚๏ธ m3e-selection-list
426
+
427
+ This section details the attributes, slots and CSS custom properties available for the `m3e-selection-list` component.
428
+
429
+ #### ๐Ÿงฉ Slots
430
+
431
+ | Slot | Description |
432
+ | ----------- | ------------------------------ |
433
+ | _(default)_ | Renders the items of the list. |
434
+
435
+ #### ๐Ÿ“‹ Attributes
436
+
437
+ | Attribute | Type | Default | Description |
438
+ | -------------------------- | ----------------------------- | ------------ | ---------------------------------------- |
439
+ | `variant` | `"standard"` \| `"segmented"` | `"standard"` | The appearance variant of the list. |
440
+ | `multi` | `boolean` | `false` | Whether multiple items can be selected. |
441
+ | `hide-selection-indicator` | `boolean` | `false` | Whether to hide the selection indicator. |
442
+
443
+ #### ๐Ÿ“ก Events
444
+
445
+ | Event | Description |
446
+ | -------- | ----------------------------------------------------- |
447
+ | `input` | Emitted when the selected state of an option changes. |
448
+ | `change` | Emitted when the selected state of an option changes. |
449
+
450
+ #### ๐ŸŽ›๏ธ CSS Custom Properties
451
+
452
+ | Property | Description |
453
+ | ---------------------------------------------------- | ---------------------------------------------------------- |
454
+ | `--m3e-list-divider-inset-start-size` | Start inset for dividers within the list. |
455
+ | `--m3e-list-divider-inset-end-size` | End inset for dividers within the list. |
456
+ | `--m3e-segmented-list-segment-gap` | Gap between list items in segmented variant. |
457
+ | `--m3e-segmented-list-container-shape` | Border radius of the segmented list container. |
458
+ | `--m3e-segmented-list-item-container-color` | Background color of items in segmented variant. |
459
+ | `--m3e-segmented-list-item-container-shape` | Border radius of items in segmented variant. |
460
+ | `--m3e-segmented-list-item-hover-container-shape` | Border radius of items in segmented variant on hover. |
461
+ | `--m3e-segmented-list-item-focus-container-shape` | Border radius of items in segmented variant on focus. |
462
+ | `--m3e-segmented-list-item-selected-container-shape` | Border radius of items in segmented variant when selected. |
463
+
464
+ ### ๐Ÿ—‚๏ธ m3e-expandable-list-item
465
+
466
+ This section details the attributes, slots, events, and CSS custom properties available for the `m3e-expandable-list-item` component.
100
467
 
101
468
  #### ๐Ÿงฉ Slots
102
469
 
103
- | Slot | Description |
104
- | -------------------------- | ------------------------------------- |
105
- | _(default)_ | Renders the content of the list item. |
106
- | `leading-icon` | Renders the leading icon. |
107
- | `overline` | Renders the overline. |
108
- | `supporting-text` | Renders the supporting text. |
109
- | `trailing-supporting-text` | Renders the trailing supporting text. |
110
- | `trailing-icon` | Renders the trailing icon. |
470
+ | Slot | Description |
471
+ | ----------------- | ------------------------------------------------------- |
472
+ | _(default)_ | Renders the content of the list item. |
473
+ | `leading` | Renders the leading content of the list item. |
474
+ | `overline` | Renders the overline of the list item. |
475
+ | `supporting-text` | Renders the supporting text of the list item. |
476
+ | `toggle-icon` | Renders a custom icon for the expand/collapse toggle. |
477
+ | `items` | Container for child list items displayed when expanded. |
478
+
479
+ #### ๐Ÿ“‹ Attributes
480
+
481
+ | Attribute | Type | Default | Description |
482
+ | ---------- | --------- | ------- | -------------------------------- |
483
+ | `disabled` | `boolean` | `false` | Whether the element is disabled. |
484
+ | `open` | `boolean` | `false` | Whether the item is expanded. |
485
+
486
+ #### ๐Ÿ“ก Events
487
+
488
+ | Event | Description |
489
+ | --------- | -------------------------------------- |
490
+ | `opening` | Emitted when the item begins to open. |
491
+ | `opened` | Emitted when the item has opened. |
492
+ | `closing` | Emitted when the item begins to close. |
493
+ | `closed` | Emitted when the item has closed. |
111
494
 
112
495
  #### ๐ŸŽ›๏ธ CSS Custom Properties
113
496
 
114
- | Property | Description |
115
- | ------------------------------------------------------ | ------------------------------------------------- |
116
- | `--m3e-list-item-spacing` | Horizontal gap between elements. |
117
- | `--m3e-list-item-padding-inline` | Horizontal padding for the list item. |
118
- | `--m3e-list-item-padding-block` | Vertical padding for the list item. |
119
- | `--m3e-list-item-height` | Minimum height of the list item. |
120
- | `--m3e-list-item-font-size` | Font size for main content. |
121
- | `--m3e-list-item-font-weight` | Font weight for main content. |
122
- | `--m3e-list-item-line-height` | Line height for main content. |
123
- | `--m3e-list-item-tracking` | Letter spacing for main content. |
124
- | `--m3e-list-item-overline-font-size` | Font size for overline slot. |
125
- | `--m3e-list-item-overline-font-weight` | Font weight for overline slot. |
126
- | `--m3e-list-item-overline-line-height` | Line height for overline slot. |
127
- | `--m3e-list-item-overline-tracking` | Letter spacing for overline slot. |
128
- | `--m3e-list-item-supporting-text-font-size` | Font size for supporting text slot. |
129
- | `--m3e-list-item-supporting-text-font-weight` | Font weight for supporting text slot. |
130
- | `--m3e-list-item-supporting-text-line-height` | Line height for supporting text slot. |
131
- | `--m3e-list-item-supporting-text-tracking` | Letter spacing for supporting text slot. |
132
- | `--m3e-list-item-trailing-supporting-text-font-size` | Font size for trailing supporting text slot. |
133
- | `--m3e-list-item-trailing-supporting-text-font-weight` | Font weight for trailing supporting text slot. |
134
- | `--m3e-list-item-trailing-supporting-text-line-height` | Line height for trailing supporting text slot. |
135
- | `--m3e-list-item-trailing-supporting-text-tracking` | Letter spacing for trailing supporting text slot. |
136
- | `--m3e-list-item-icon-size` | Size for leading/trailing icons. |
497
+ | Property | Description |
498
+ | ----------------------------------------------------------------- | ------------------------------------------------------------ |
499
+ | `--m3e-expandable-list-item-toggle-icon-container-width` | Width of the toggle icon container. |
500
+ | `--m3e-expandable-list-item-toggle-icon-container-shape` | Border radius of the toggle icon container. |
501
+ | `--m3e-expandable-list-item-toggle-icon-size` | Size of the toggle icon. |
502
+ | `--m3e-expandable-list-item-expanded-toggle-icon-container-color` | Background color of the toggle icon container when expanded. |
503
+ | `--m3e-expandable-list-item-bounce-duration` | Duration of the bounce animation when expanding. |
504
+ | `--m3e-expandable-list-item-bounce-factor` | Multiplication factor for the bounce effect. |
505
+ | `--m3e-expandable-list-item-expand-duration` | Duration of the expand/collapse animation. |
506
+ | `--m3e-list-item-between-space` | Horizontal gap between elements. |
507
+ | `--m3e-list-item-padding-inline` | Horizontal padding for the list item. |
508
+ | `--m3e-list-item-padding-block` | Vertical padding for the list item. |
509
+ | `--m3e-list-item-height` | Minimum height of the list item. |
510
+ | `--m3e-list-item-font-size` | Font size for main content. |
511
+ | `--m3e-list-item-font-weight` | Font weight for main content. |
512
+ | `--m3e-list-item-line-height` | Line height for main content. |
513
+ | `--m3e-list-item-tracking` | Letter spacing for main content. |
514
+ | `--m3e-list-item-overline-font-size` | Font size for overline slot. |
515
+ | `--m3e-list-item-overline-font-weight` | Font weight for overline slot. |
516
+ | `--m3e-list-item-overline-line-height` | Line height for overline slot. |
517
+ | `--m3e-list-item-overline-tracking` | Letter spacing for overline slot. |
518
+ | `--m3e-list-item-supporting-text-font-size` | Font size for supporting text slot. |
519
+ | `--m3e-list-item-supporting-text-font-weight` | Font weight for supporting text slot. |
520
+ | `--m3e-list-item-supporting-text-line-height` | Line height for supporting text slot. |
521
+ | `--m3e-list-item-supporting-text-tracking` | Letter spacing for supporting text slot. |
522
+ | `--m3e-list-item-trailing-text-font-size` | Font size for trailing supporting text slot. |
523
+ | `--m3e-list-item-trailing-text-font-weight` | Font weight for trailing supporting text slot. |
524
+ | `--m3e-list-item-trailing-text-line-height` | Line height for trailing supporting text slot. |
525
+ | `--m3e-list-item-trailing-text-tracking` | Letter spacing for trailing supporting text slot. |
526
+ | `--m3e-list-item-icon-size` | Size for leading/trailing icons. |
527
+ | `--m3e-list-item-label-text-color` | Color for the main content. |
528
+ | `--m3e-list-item-overline-color` | Color for the overline slot. |
529
+ | `--m3e-list-item-supporting-text-color` | Color for the supporting text slot. |
530
+ | `--m3e-list-item-leading-color` | Color for the leading content. |
531
+ | `--m3e-list-item-trailing-color` | Color for the trailing content. |
532
+ | `--m3e-list-item-container-color` | Background color of the list item. |
533
+ | `--m3e-list-item-container-shape` | Border radius of the list item. |
534
+ | `--m3e-list-item-hover-container-shape` | Border radius of the list item on hover. |
535
+ | `--m3e-list-item-focus-container-shape` | Border radius of the list item on focus. |
536
+ | `--m3e-list-item-video-width` | Width of the video slot. |
537
+ | `--m3e-list-item-video-height` | Height of the video slot. |
538
+ | `--m3e-list-item-video-shape` | Border radius of the video slot. |
539
+ | `--m3e-list-item-image-width` | Width of the image slot. |
540
+ | `--m3e-list-item-image-height` | Height of the image slot. |
541
+ | `--m3e-list-item-image-shape` | Border radius of the image slot. |
542
+ | `--m3e-list-item-disabled-label-text-color` | Color for the main content when disabled. |
543
+ | `--m3e-list-item-disabled-label-text-opacity` | Opacity for the main content when disabled. |
544
+ | `--m3e-list-item-disabled-overline-color` | Color for the overline slot when disabled. |
545
+ | `--m3e-list-item-disabled-overline-opacity` | Opacity for the overline slot when disabled. |
546
+ | `--m3e-list-item-disabled-supporting-text-color` | Color for the supporting text slot when disabled. |
547
+ | `--m3e-list-item-disabled-supporting-text-opacity` | Opacity for the supporting text slot when disabled. |
548
+ | `--m3e-list-item-disabled-leading-color` | Color for the leading content when disabled. |
549
+ | `--m3e-list-item-disabled-leading-opacity` | Opacity for the leading content when disabled. |
550
+ | `--m3e-list-item-disabled-trailing-color` | Color for the trailing content when disabled. |
551
+ | `--m3e-list-item-disabled-trailing-opacity` | Opacity for the trailing content when disabled. |
552
+ | `--m3e-list-item-hover-state-layer-color` | Color for the hover state layer. |
553
+ | `--m3e-list-item-hover-state-layer-opacity` | Opacity for the hover state layer. |
554
+ | `--m3e-list-item-focus-state-layer-color` | Color for the focus state layer. |
555
+ | `--m3e-list-item-focus-state-layer-opacity` | Opacity for the focus state layer. |
556
+ | `--m3e-list-item-pressed-state-layer-color` | Color for the pressed state layer. |
557
+ | `--m3e-list-item-pressed-state-layer-opacity` | Opacity for the pressed state layer. |
558
+ | `--m3e-list-item-three-line-top-offset` | Top offset for media in three line items. |
559
+ | `--m3e-list-item-disabled-media-opacity` | Opacity for media when disabled. |
137
560
 
138
561
  ## ๐Ÿค Contributing
139
562