@m3e/menu 1.1.10 → 1.2.0

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 (22) hide show
  1. package/README.md +138 -83
  2. package/dist/css-custom-data.json +282 -12
  3. package/dist/custom-elements.json +307 -12
  4. package/dist/html-custom-data.json +9 -4
  5. package/dist/index.js +129 -17
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.min.js +7 -7
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/src/MenuElement.d.ts +12 -0
  10. package/dist/src/MenuElement.d.ts.map +1 -1
  11. package/dist/src/MenuItemCheckboxElement.d.ts +19 -2
  12. package/dist/src/MenuItemCheckboxElement.d.ts.map +1 -1
  13. package/dist/src/MenuItemElement.d.ts +18 -2
  14. package/dist/src/MenuItemElement.d.ts.map +1 -1
  15. package/dist/src/MenuItemElementBase.d.ts.map +1 -1
  16. package/dist/src/MenuItemRadioElement.d.ts +19 -2
  17. package/dist/src/MenuItemRadioElement.d.ts.map +1 -1
  18. package/dist/src/MenuVariant.d.ts +3 -0
  19. package/dist/src/MenuVariant.d.ts.map +1 -0
  20. package/dist/src/index.d.ts +1 -0
  21. package/dist/src/index.d.ts.map +1 -1
  22. package/package.json +2 -2
package/README.md CHANGED
@@ -117,10 +117,11 @@ This section details the attributes, events, slots and CSS custom properties ava
117
117
 
118
118
  #### ⚙️ Attributes
119
119
 
120
- | Attribute | Type | Default | Description |
121
- | ------------ | ----------------------- | --------- | ---------------------------------------- |
122
- | `position-x` | `"before"` \| `"after"` | `"after"` | The position of the menu, on the x-axis. |
123
- | `position-y` | `"above"` \| `"below"` | `"below"` | The position of the menu, on the y-axis. |
120
+ | Attribute | Type | Default | Description |
121
+ | ------------ | --------------------------- | ------------ | ---------------------------------------- |
122
+ | `position-x` | `"before"` \| `"after"` | `"after"` | The position of the menu, on the x-axis. |
123
+ | `position-y` | `"above"` \| `"below"` | `"below"` | The position of the menu, on the y-axis. |
124
+ | `variant` | `"standard"` \| `"vibrant"` | `"standard"` | The appearance variant of the menu. |
124
125
 
125
126
  #### 🔔 Events
126
127
 
@@ -137,16 +138,20 @@ This section details the attributes, events, slots and CSS custom properties ava
137
138
 
138
139
  #### 🎛️ CSS Custom Properties
139
140
 
140
- | Property | Description |
141
- | ------------------------------------ | ------------------------------------------------------- |
142
- | `--m3e-menu-container-shape` | Controls the corner radius of the menu container. |
143
- | `--m3e-menu-container-min-width` | Minimum width of the menu container. |
144
- | `--m3e-menu-container-max-width` | Maximum width of the menu container. |
145
- | `--m3e-menu-container-max-height` | Maximum height of the menu container. |
146
- | `--m3e-menu-container-padding-block` | Vertical padding inside the menu container. |
147
- | `--m3e-menu-container-color` | Background color of the menu container. |
148
- | `--m3e-menu-container-elevation` | Box shadow elevation of the menu container. |
149
- | `--m3e-menu-divider-spacing` | Vertical spacing around slotted `m3e-divider` elements. |
141
+ | Property | Description |
142
+ | ------------------------------------- | ------------------------------------------------------------- |
143
+ | `--m3e-menu-container-shape` | Controls the corner radius of the menu container. |
144
+ | `--m3e-menu-active-container-shape` | Controls the corner radius of the menu container when active. |
145
+ | `--m3e-menu-container-min-width` | Minimum width of the menu container. |
146
+ | `--m3e-menu-container-max-width` | Maximum width of the menu container. |
147
+ | `--m3e-menu-container-max-height` | Maximum height of the menu container. |
148
+ | `--m3e-menu-container-padding-block` | Vertical padding inside the menu container. |
149
+ | `--m3e-menu-container-padding-inline` | Horizontal padding inside the menu container. |
150
+ | `--m3e-menu-container-color` | Background color of the menu container. |
151
+ | `--m3e-menu-container-elevation` | Box shadow elevation of the menu container. |
152
+ | `--m3e-vibrant-menu-container-color` | Background color of the menu container for vibrant variant. |
153
+ | `--m3e-menu-divider-spacing` | Vertical spacing around slotted `m3e-divider` elements. |
154
+ | `--m3e-menu-gap` | Gap between content in the menu. |
150
155
 
151
156
  ### 🗂️ m3e-menu-item
152
157
 
@@ -172,29 +177,45 @@ This section details the attributes, slots and CSS custom properties available f
172
177
 
173
178
  #### 🎛️ CSS Custom Properties
174
179
 
175
- | Property | Description |
176
- | ------------------------------------------------ | ------------------------------------------------ |
177
- | `--m3e-menu-item-container-height` | Height of the menu item container. |
178
- | `--m3e-menu-item-color` | Text color for unselected, enabled menu items. |
179
- | `--m3e-menu-item-container-hover-color` | State layer hover color for unselected items. |
180
- | `--m3e-menu-item-container-focus-color` | State layer focus color for unselected items. |
181
- | `--m3e-menu-item-ripple-color` | Ripple color for unselected items. |
182
- | `--m3e-menu-selected-color` | Text color for selected or expanded items. |
183
- | `--m3e-menu-selected-container-color` | Background color for selected or expanded items. |
184
- | `--m3e-menu-item-selected-container-hover-color` | State layer hover color for selected items. |
185
- | `--m3e-menu-item-selected-container-focus-color` | State layer focus color for selected items. |
186
- | `--m3e-menu-item-selected-ripple-color` | Ripple color for selected items. |
187
- | `--m3e-menu-item-disabled-color` | Base color for disabled items. |
188
- | `--m3e-menu-item-disabled-opacity` | Opacity percentage for disabled item color mix. |
189
- | `--m3e-menu-item-icon-label-space` | Horizontal gap between icon and content. |
190
- | `--m3e-menu-item-padding-start` | Start padding for the item wrapper. |
191
- | `--m3e-menu-item-padding-end` | End padding for the item wrapper. |
192
- | `--m3e-menu-item-label-text-font-size` | Font size for menu item text. |
193
- | `--m3e-menu-item-label-text-font-weight` | Font weight for menu item text. |
194
- | `--m3e-menu-item-label-text-line-height` | Line height for menu item text. |
195
- | `--m3e-menu-item-label-text-tracking` | Letter spacing for menu item text. |
196
- | `--m3e-menu-item-focus-ring-shape` | Border radius for the focus ring. |
197
- | `--m3e-menu-item-icon-size` | Font size for leading and trailing icons. |
180
+ | Property | Description |
181
+ | -------------------------------------------------------- | ------------------------------------------------------------------ |
182
+ | `--m3e-menu-item-container-height` | Height of the menu item container. |
183
+ | `--m3e-menu-item-color` | Text color for unselected, enabled menu items. |
184
+ | `--m3e-menu-item-container-hover-color` | State layer hover color for unselected items. |
185
+ | `--m3e-menu-item-container-focus-color` | State layer focus color for unselected items. |
186
+ | `--m3e-menu-item-ripple-color` | Ripple color for unselected items. |
187
+ | `--m3e-menu-item-selected-color` | Text color for selected items. |
188
+ | `--m3e-menu-item-selected-container-color` | Background color for selected items. |
189
+ | `--m3e-menu-item-selected-container-hover-color` | State layer hover color for selected items. |
190
+ | `--m3e-menu-item-selected-container-focus-color` | State layer focus color for selected items. |
191
+ | `--m3e-menu-item-selected-ripple-color` | Ripple color for selected items. |
192
+ | `--m3e-menu-item-active-state-layer-color` | State layer color for expanded items. |
193
+ | `--m3e-menu-item-active-state-layer-opacity` | State layer opacity for expanded items. |
194
+ | `--m3e-menu-item-disabled-color` | Base color for disabled items. |
195
+ | `--m3e-menu-item-disabled-opacity` | Opacity percentage for disabled item color mix. |
196
+ | `--m3e-vibrant-menu-item-color` | Text color for unselected, enabled menu items for vibrant variant. |
197
+ | `--m3e-vibrant-menu-item-container-hover-color` | State layer hover color for unselected items for vibrant variant. |
198
+ | `--m3e-vibrant-menu-item-container-focus-color` | State layer focus color for unselected items for vibrant variant. |
199
+ | `--m3e-vibrant-menu-item-ripple-color` | Ripple color for unselected items for vibrant variant. |
200
+ | `--m3e-vibrant-menu-item-selected-color` | Text color for selected items for vibrant variant. |
201
+ | `--m3e-vibrant-menu-item-selected-container-color` | Background color for selected items for vibrant variant. |
202
+ | `--m3e-vibrant-menu-item-selected-container-hover-color` | State layer hover color for selected items for vibrant variant. |
203
+ | `--m3e-vibrant-menu-item-selected-container-focus-color` | State layer focus color for selected items for vibrant variant. |
204
+ | `--m3e-vibrant-menu-item-selected-ripple-color` | Ripple color for selected items for vibrant variant. |
205
+ | `--m3e-vibrant-menu-item-active-state-layer-color` | State layer color for expanded items for vibrant variant. |
206
+ | `--m3e-vibrant-menu-item-disabled-color` | Base color for disabled items for vibrant variant. |
207
+ | `--m3e-menu-item-icon-label-space` | Horizontal gap between icon and content. |
208
+ | `--m3e-menu-item-padding-start` | Start padding for the item wrapper. |
209
+ | `--m3e-menu-item-padding-end` | End padding for the item wrapper. |
210
+ | `--m3e-menu-item-label-text-font-size` | Font size for menu item text. |
211
+ | `--m3e-menu-item-label-text-font-weight` | Font weight for menu item text. |
212
+ | `--m3e-menu-item-label-text-line-height` | Line height for menu item text. |
213
+ | `--m3e-menu-item-label-text-tracking` | Letter spacing for menu item text. |
214
+ | `--m3e-menu-item-focus-ring-shape` | Border radius for the focus ring. |
215
+ | `--m3e-menu-item-icon-size` | Font size for leading and trailing icons. |
216
+ | `--m3e-menu-item-shape` | Base shape of the menu item. |
217
+ | `--m3e-menu-item-first-child-shape` | Shape for the first menu item in a menu. |
218
+ | `--m3e-menu-item-last-child-shape` | Shape for the last menu item in a menu. |
198
219
 
199
220
  ### 🗂️ m3e-menu-item-checkbox
200
221
 
@@ -217,29 +238,46 @@ This section details the attributes, slots and CSS custom properties available f
217
238
 
218
239
  #### 🎛️ CSS Custom Properties
219
240
 
220
- | Property | Description |
221
- | ------------------------------------------------ | ------------------------------------------------ |
222
- | `--m3e-menu-item-container-height` | Height of the menu item container. |
223
- | `--m3e-menu-item-color` | Text color for unselected, enabled menu items. |
224
- | `--m3e-menu-item-container-hover-color` | State layer hover color for unselected items. |
225
- | `--m3e-menu-item-container-focus-color` | State layer focus color for unselected items. |
226
- | `--m3e-menu-item-ripple-color` | Ripple color for unselected items. |
227
- | `--m3e-menu-selected-color` | Text color for selected or expanded items. |
228
- | `--m3e-menu-selected-container-color` | Background color for selected or expanded items. |
229
- | `--m3e-menu-item-selected-container-hover-color` | State layer hover color for selected items. |
230
- | `--m3e-menu-item-selected-container-focus-color` | State layer focus color for selected items. |
231
- | `--m3e-menu-item-selected-ripple-color` | Ripple color for selected items. |
232
- | `--m3e-menu-item-disabled-color` | Base color for disabled items. |
233
- | `--m3e-menu-item-disabled-opacity` | Opacity percentage for disabled item color mix. |
234
- | `--m3e-menu-item-icon-label-space` | Horizontal gap between icon and content. |
235
- | `--m3e-menu-item-padding-start` | Start padding for the item wrapper. |
236
- | `--m3e-menu-item-padding-end` | End padding for the item wrapper. |
237
- | `--m3e-menu-item-label-text-font-size` | Font size for menu item text. |
238
- | `--m3e-menu-item-label-text-font-weight` | Font weight for menu item text. |
239
- | `--m3e-menu-item-label-text-line-height` | Line height for menu item text. |
240
- | `--m3e-menu-item-label-text-tracking` | Letter spacing for menu item text. |
241
- | `--m3e-menu-item-focus-ring-shape` | Border radius for the focus ring. |
242
- | `--m3e-menu-item-icon-size` | Font size for leading and trailing icons. |
241
+ | Property | Description |
242
+ | -------------------------------------------------------- | ------------------------------------------------------------------ |
243
+ | `--m3e-menu-item-container-height` | Height of the menu item container. |
244
+ | `--m3e-menu-item-color` | Text color for unselected, enabled menu items. |
245
+ | `--m3e-menu-item-container-hover-color` | State layer hover color for unselected items. |
246
+ | `--m3e-menu-item-container-focus-color` | State layer focus color for unselected items. |
247
+ | `--m3e-menu-item-ripple-color` | Ripple color for unselected items. |
248
+ | `--m3e-menu-item-selected-color` | Text color for selected items. |
249
+ | `--m3e-menu-item-selected-container-color` | Background color for selected items. |
250
+ | `--m3e-menu-item-selected-container-hover-color` | State layer hover color for selected items. |
251
+ | `--m3e-menu-item-selected-container-focus-color` | State layer focus color for selected items. |
252
+ | `--m3e-menu-item-selected-ripple-color` | Ripple color for selected items. |
253
+ | `--m3e-menu-item-active-state-layer-color` | State layer color for expanded items. |
254
+ | `--m3e-menu-item-active-state-layer-opacity` | State layer opacity for expanded items. |
255
+ | `--m3e-menu-item-disabled-color` | Base color for disabled items. |
256
+ | `--m3e-menu-item-disabled-opacity` | Opacity percentage for disabled item color mix. |
257
+ | `--m3e-vibrant-menu-item-color` | Text color for unselected, enabled menu items for vibrant variant. |
258
+ | `--m3e-vibrant-menu-item-container-hover-color` | State layer hover color for unselected items for vibrant variant. |
259
+ | `--m3e-vibrant-menu-item-container-focus-color` | State layer focus color for unselected items for vibrant variant. |
260
+ | `--m3e-vibrant-menu-item-ripple-color` | Ripple color for unselected items for vibrant variant. |
261
+ | `--m3e-vibrant-menu-item-selected-color` | Text color for selected items for vibrant variant. |
262
+ | `--m3e-vibrant-menu-item-selected-container-color` | Background color for selected items for vibrant variant. |
263
+ | `--m3e-vibrant-menu-item-selected-container-hover-color` | State layer hover color for selected items for vibrant variant. |
264
+ | `--m3e-vibrant-menu-item-selected-container-focus-color` | State layer focus color for selected items for vibrant variant. |
265
+ | `--m3e-vibrant-menu-item-selected-ripple-color` | Ripple color for selected items for vibrant variant. |
266
+ | `--m3e-vibrant-menu-item-active-state-layer-color` | State layer color for expanded items for vibrant variant. |
267
+ | `--m3e-vibrant-menu-item-disabled-color` | Base color for disabled items for vibrant variant. |
268
+ | `--m3e-menu-item-icon-label-space` | Horizontal gap between icon and content. |
269
+ | `--m3e-menu-item-padding-start` | Start padding for the item wrapper. |
270
+ | `--m3e-menu-item-padding-end` | End padding for the item wrapper. |
271
+ | `--m3e-menu-item-label-text-font-size` | Font size for menu item text. |
272
+ | `--m3e-menu-item-label-text-font-weight` | Font weight for menu item text. |
273
+ | `--m3e-menu-item-label-text-line-height` | Line height for menu item text. |
274
+ | `--m3e-menu-item-label-text-tracking` | Letter spacing for menu item text. |
275
+ | `--m3e-menu-item-focus-ring-shape` | Border radius for the focus ring. |
276
+ | `--m3e-menu-item-icon-size` | Font size for leading and trailing icons. |
277
+ | `--m3e-menu-item-shape` | Base shape of the menu item. |
278
+ | `--m3e-menu-item-selected-shape` | Shape used for a selected menu item. |
279
+ | `--m3e-menu-item-first-child-shape` | Shape for the first menu item in a menu. |
280
+ | `--m3e-menu-item-last-child-shape` | Shape for the last menu item in a menu. |
243
281
 
244
282
  ### 🗂️ m3e-menu-item-radio
245
283
 
@@ -262,29 +300,46 @@ This section details the attributes, slots and CSS custom properties available f
262
300
 
263
301
  #### 🎛️ CSS Custom Properties
264
302
 
265
- | Property | Description |
266
- | ------------------------------------------------ | ------------------------------------------------ |
267
- | `--m3e-menu-item-container-height` | Height of the menu item container. |
268
- | `--m3e-menu-item-color` | Text color for unselected, enabled menu items. |
269
- | `--m3e-menu-item-container-hover-color` | State layer hover color for unselected items. |
270
- | `--m3e-menu-item-container-focus-color` | State layer focus color for unselected items. |
271
- | `--m3e-menu-item-ripple-color` | Ripple color for unselected items. |
272
- | `--m3e-menu-selected-color` | Text color for selected or expanded items. |
273
- | `--m3e-menu-selected-container-color` | Background color for selected or expanded items. |
274
- | `--m3e-menu-item-selected-container-hover-color` | State layer hover color for selected items. |
275
- | `--m3e-menu-item-selected-container-focus-color` | State layer focus color for selected items. |
276
- | `--m3e-menu-item-selected-ripple-color` | Ripple color for selected items. |
277
- | `--m3e-menu-item-disabled-color` | Base color for disabled items. |
278
- | `--m3e-menu-item-disabled-opacity` | Opacity percentage for disabled item color mix. |
279
- | `--m3e-menu-item-icon-label-space` | Horizontal gap between icon and content. |
280
- | `--m3e-menu-item-padding-start` | Start padding for the item wrapper. |
281
- | `--m3e-menu-item-padding-end` | End padding for the item wrapper. |
282
- | `--m3e-menu-item-label-text-font-size` | Font size for menu item text. |
283
- | `--m3e-menu-item-label-text-font-weight` | Font weight for menu item text. |
284
- | `--m3e-menu-item-label-text-line-height` | Line height for menu item text. |
285
- | `--m3e-menu-item-label-text-tracking` | Letter spacing for menu item text. |
286
- | `--m3e-menu-item-focus-ring-shape` | Border radius for the focus ring. |
287
- | `--m3e-menu-item-icon-size` | Font size for leading and trailing icons. |
303
+ | Property | Description |
304
+ | -------------------------------------------------------- | ------------------------------------------------------------------ |
305
+ | `--m3e-menu-item-container-height` | Height of the menu item container. |
306
+ | `--m3e-menu-item-color` | Text color for unselected, enabled menu items. |
307
+ | `--m3e-menu-item-container-hover-color` | State layer hover color for unselected items. |
308
+ | `--m3e-menu-item-container-focus-color` | State layer focus color for unselected items. |
309
+ | `--m3e-menu-item-ripple-color` | Ripple color for unselected items. |
310
+ | `--m3e-menu-item-selected-color` | Text color for selected items. |
311
+ | `--m3e-menu-item-selected-container-color` | Background color for selected items. |
312
+ | `--m3e-menu-item-selected-container-hover-color` | State layer hover color for selected items. |
313
+ | `--m3e-menu-item-selected-container-focus-color` | State layer focus color for selected items. |
314
+ | `--m3e-menu-item-selected-ripple-color` | Ripple color for selected items. |
315
+ | `--m3e-menu-item-active-state-layer-color` | State layer color for expanded items. |
316
+ | `--m3e-menu-item-active-state-layer-opacity` | State layer opacity for expanded items. |
317
+ | `--m3e-menu-item-disabled-color` | Base color for disabled items. |
318
+ | `--m3e-menu-item-disabled-opacity` | Opacity percentage for disabled item color mix. |
319
+ | `--m3e-vibrant-menu-item-color` | Text color for unselected, enabled menu items for vibrant variant. |
320
+ | `--m3e-vibrant-menu-item-container-hover-color` | State layer hover color for unselected items for vibrant variant. |
321
+ | `--m3e-vibrant-menu-item-container-focus-color` | State layer focus color for unselected items for vibrant variant. |
322
+ | `--m3e-vibrant-menu-item-ripple-color` | Ripple color for unselected items for vibrant variant. |
323
+ | `--m3e-vibrant-menu-item-selected-color` | Text color for selected items for vibrant variant. |
324
+ | `--m3e-vibrant-menu-item-selected-container-color` | Background color for selected items for vibrant variant. |
325
+ | `--m3e-vibrant-menu-item-selected-container-hover-color` | State layer hover color for selected items for vibrant variant. |
326
+ | `--m3e-vibrant-menu-item-selected-container-focus-color` | State layer focus color for selected items for vibrant variant. |
327
+ | `--m3e-vibrant-menu-item-selected-ripple-color` | Ripple color for selected items for vibrant variant. |
328
+ | `--m3e-vibrant-menu-item-active-state-layer-color` | State layer color for expanded items for vibrant variant. |
329
+ | `--m3e-vibrant-menu-item-disabled-color` | Base color for disabled items for vibrant variant. |
330
+ | `--m3e-menu-item-icon-label-space` | Horizontal gap between icon and content. |
331
+ | `--m3e-menu-item-padding-start` | Start padding for the item wrapper. |
332
+ | `--m3e-menu-item-padding-end` | End padding for the item wrapper. |
333
+ | `--m3e-menu-item-label-text-font-size` | Font size for menu item text. |
334
+ | `--m3e-menu-item-label-text-font-weight` | Font weight for menu item text. |
335
+ | `--m3e-menu-item-label-text-line-height` | Line height for menu item text. |
336
+ | `--m3e-menu-item-label-text-tracking` | Letter spacing for menu item text. |
337
+ | `--m3e-menu-item-focus-ring-shape` | Border radius for the focus ring. |
338
+ | `--m3e-menu-item-icon-size` | Font size for leading and trailing icons. |
339
+ | `--m3e-menu-item-shape` | Base shape of the menu item. |
340
+ | `--m3e-menu-item-selected-shape` | Shape used for a selected menu item. |
341
+ | `--m3e-menu-item-first-child-shape` | Shape for the first menu item in a menu. |
342
+ | `--m3e-menu-item-last-child-shape` | Shape for the last menu item in a menu. |
288
343
 
289
344
  ### 🗂️ m3e-menu-item-group
290
345