@m3e/web 2.5.6 → 2.5.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.
- package/dist/all.js +3844 -911
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +120 -57
- package/dist/all.min.js.map +1 -1
- package/dist/card.js +2 -2
- package/dist/card.js.map +1 -1
- package/dist/card.min.js +1 -1
- package/dist/card.min.js.map +1 -1
- package/dist/content-pane.js +1 -1
- package/dist/content-pane.js.map +1 -1
- package/dist/content-pane.min.js +1 -1
- package/dist/content-pane.min.js.map +1 -1
- package/dist/core.js +20 -4
- package/dist/core.js.map +1 -1
- package/dist/core.min.js +1 -1
- package/dist/core.min.js.map +1 -1
- package/dist/css-custom-data.json +307 -292
- package/dist/custom-elements.json +2749 -2542
- package/dist/drawer-container.js +13 -7
- package/dist/drawer-container.js.map +1 -1
- package/dist/drawer-container.min.js +1 -1
- package/dist/drawer-container.min.js.map +1 -1
- package/dist/html-custom-data.json +105 -105
- package/dist/loading-indicator.js +8 -8
- package/dist/loading-indicator.js.map +1 -1
- package/dist/loading-indicator.min.js +1 -1
- package/dist/loading-indicator.min.js.map +1 -1
- package/dist/slide-group.js +6 -1
- package/dist/slide-group.js.map +1 -1
- package/dist/slide-group.min.js +1 -1
- package/dist/slide-group.min.js.map +1 -1
- package/dist/snackbar.js +2 -2
- package/dist/snackbar.js.map +1 -1
- package/dist/snackbar.min.js +1 -1
- package/dist/snackbar.min.js.map +1 -1
- package/dist/src/card/styles/CardStyle.d.ts.map +1 -1
- package/dist/src/content-pane/ContentPaneElement.d.ts.map +1 -1
- package/dist/src/core/shared/controllers/ScrollController.d.ts.map +1 -1
- package/dist/src/drawer-container/DrawerContainerElement.d.ts.map +1 -1
- package/dist/src/drawer-container/DrawerToggleElement.d.ts.map +1 -1
- package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts +1 -1
- package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts.map +1 -1
- package/dist/src/slide-group/SlideGroupElement.d.ts.map +1 -1
- package/dist/src/snackbar/SnackbarElement.d.ts.map +1 -1
- package/dist/src/tabs/TabsElement.d.ts +2 -1
- package/dist/src/tabs/TabsElement.d.ts.map +1 -1
- package/dist/src/theme/ThemeElement.d.ts.map +1 -1
- package/dist/src/toc/TocElement.d.ts +4 -0
- package/dist/src/toc/TocElement.d.ts.map +1 -1
- package/dist/tabs.js +186 -15
- package/dist/tabs.js.map +1 -1
- package/dist/tabs.min.js +1 -1
- package/dist/tabs.min.js.map +1 -1
- package/dist/theme.js +3564 -846
- package/dist/theme.js.map +1 -1
- package/dist/theme.min.js +94 -31
- package/dist/theme.min.js.map +1 -1
- package/dist/toc.js +23 -6
- package/dist/toc.js.map +1 -1
- package/dist/toc.min.js +1 -1
- package/dist/toc.min.js.map +1 -1
- package/package.json +2 -2
|
@@ -24,12 +24,6 @@
|
|
|
24
24
|
],
|
|
25
25
|
"references": []
|
|
26
26
|
},
|
|
27
|
-
{
|
|
28
|
-
"name": "m3e-avatar",
|
|
29
|
-
"description": "An image, icon or textual initials representing a user or other identity.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content of the avatar.\n\n### **CSS Properties:**\n - **--m3e-avatar-size** - Size of the avatar. _(default: undefined)_\n- **--m3e-avatar-shape** - Border radius of the avatar. _(default: undefined)_\n- **--m3e-avatar-font-size** - Font size for the avatar. _(default: undefined)_\n- **--m3e-avatar-font-weight** - Font weight for the avatar. _(default: undefined)_\n- **--m3e-avatar-line-height** - Line height for the avatar. _(default: undefined)_\n- **--m3e-avatar-tracking** - Letter spacing for the avatar. _(default: undefined)_\n- **--m3e-avatar-color** - Background color of the avatar. _(default: undefined)_\n- **--m3e-avatar-label-color** - Text color of the avatar. _(default: undefined)_",
|
|
30
|
-
"attributes": [],
|
|
31
|
-
"references": []
|
|
32
|
-
},
|
|
33
27
|
{
|
|
34
28
|
"name": "m3e-autocomplete",
|
|
35
29
|
"description": "Enhances a text input with suggested options.\n---\n\n\n### **Events:**\n - **change** - Dispatched when the committed value changes due to selecting an option or clearing the input.\n- **query** - Dispatched when the input is focused or when the user modifies its value.\n- **toggle** - Dispatched when the options menu opens or closes.\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n- **clear(restoreFocus): _void_** - Clears the value of the element.\n\n### **Slots:**\n - _default_ - Renders the options of the autocomplete.\n- **loading** - Renders content when loading options.\n- **no-data** - Renders content when there are no options to show.",
|
|
@@ -105,6 +99,12 @@
|
|
|
105
99
|
],
|
|
106
100
|
"references": []
|
|
107
101
|
},
|
|
102
|
+
{
|
|
103
|
+
"name": "m3e-avatar",
|
|
104
|
+
"description": "An image, icon or textual initials representing a user or other identity.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content of the avatar.\n\n### **CSS Properties:**\n - **--m3e-avatar-size** - Size of the avatar. _(default: undefined)_\n- **--m3e-avatar-shape** - Border radius of the avatar. _(default: undefined)_\n- **--m3e-avatar-font-size** - Font size for the avatar. _(default: undefined)_\n- **--m3e-avatar-font-weight** - Font weight for the avatar. _(default: undefined)_\n- **--m3e-avatar-line-height** - Line height for the avatar. _(default: undefined)_\n- **--m3e-avatar-tracking** - Letter spacing for the avatar. _(default: undefined)_\n- **--m3e-avatar-color** - Background color of the avatar. _(default: undefined)_\n- **--m3e-avatar-label-color** - Text color of the avatar. _(default: undefined)_",
|
|
105
|
+
"attributes": [],
|
|
106
|
+
"references": []
|
|
107
|
+
},
|
|
108
108
|
{
|
|
109
109
|
"name": "m3e-badge",
|
|
110
110
|
"description": "A visual indicator used to label content.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - _default_ - Renders the content of the badge.\n\n### **CSS Properties:**\n - **--m3e-badge-shape** - Corner radius of the badge. _(default: undefined)_\n- **--m3e-badge-color** - Foreground color of badge content. _(default: undefined)_\n- **--m3e-badge-container-color** - Background color of the badge. _(default: undefined)_\n- **--m3e-badge-small-size** - Fixed dimensions for small badge. Used for minimal indicators (e.g. dot). _(default: undefined)_\n- **--m3e-badge-medium-size** - Height and min-width for medium badge. _(default: undefined)_\n- **--m3e-badge-medium-font-size** - Font size for medium badge label. _(default: undefined)_\n- **--m3e-badge-medium-font-weight** - Font weight for medium badge label. _(default: undefined)_\n- **--m3e-badge-medium-line-height** - Line height for medium badge label. _(default: undefined)_\n- **--m3e-badge-medium-tracking** - Letter spacing for medium badge label. _(default: undefined)_\n- **--m3e-badge-large-size** - Height and min-width for large badge. _(default: undefined)_\n- **--m3e-badge-large-font-size** - Font size for large badge label. _(default: undefined)_\n- **--m3e-badge-large-font-weight** - Font weight for large badge label. _(default: undefined)_\n- **--m3e-badge-large-line-height** - Line height for large badge label. _(default: undefined)_\n- **--m3e-badge-large-tracking** - Letter spacing for large badge label. _(default: undefined)_",
|
|
@@ -298,28 +298,6 @@
|
|
|
298
298
|
],
|
|
299
299
|
"references": []
|
|
300
300
|
},
|
|
301
|
-
{
|
|
302
|
-
"name": "m3e-button-group",
|
|
303
|
-
"description": "Organizes buttons and adds interactions between them.\n---\n\n\n### **Slots:**\n - _default_ - Renders the buttons of the group.\n\n### **CSS Properties:**\n - **--m3e-standard-button-group-extra-small-spacing** - Spacing between buttons in standard variant, extra-small size. _(default: undefined)_\n- **--m3e-standard-button-group-small-spacing** - Spacing between buttons in standard variant, small size. _(default: undefined)_\n- **--m3e-standard-button-group-medium-spacing** - Spacing between buttons in standard variant, medium size. _(default: undefined)_\n- **--m3e-standard-button-group-large-spacing** - Spacing between buttons in standard variant, large size. _(default: undefined)_\n- **--m3e-standard-button-group-extra-large-spacing** - Spacing between buttons in standard variant, extra-large size. _(default: undefined)_\n- **--m3e-connected-button-group-spacing** - Spacing between buttons in connected variant. _(default: undefined)_\n- **--m3e-connected-button-group-extra-small-inner-shape** - Corner shape for connected variant, extra-small size. _(default: undefined)_\n- **--m3e-connected-button-group-extra-small-inner-pressed-shape** - Pressed corner shape for connected variant, extra-small size. _(default: undefined)_\n- **--m3e-connected-button-group-small-inner-shape** - Corner shape for connected variant, small size. _(default: undefined)_\n- **--m3e-connected-button-group-small-inner-pressed-shape** - Pressed corner shape for connected variant, small size. _(default: undefined)_\n- **--m3e-connected-button-group-medium-inner-shape** - Corner shape for connected variant, medium size. _(default: undefined)_\n- **--m3e-connected-button-group-medium-inner-pressed-shape** - Pressed corner shape for connected variant, medium size. _(default: undefined)_\n- **--m3e-connected-button-group-large-inner-shape** - Corner shape for connected variant, large size. _(default: undefined)_\n- **--m3e-connected-button-group-large-inner-pressed-shape** - Pressed corner shape for connected variant, large size. _(default: undefined)_\n- **--m3e-connected-button-group-extra-large-inner-shape** - Corner shape for connected variant, extra-large size. _(default: undefined)_\n- **--m3e-connected-button-group-extra-large-inner-pressed-shape** - Pressed corner shape for connected variant, extra-large size. _(default: undefined)_",
|
|
304
|
-
"attributes": [
|
|
305
|
-
{
|
|
306
|
-
"name": "multi",
|
|
307
|
-
"description": "Whether multiple toggle buttons can be selected.",
|
|
308
|
-
"values": []
|
|
309
|
-
},
|
|
310
|
-
{
|
|
311
|
-
"name": "size",
|
|
312
|
-
"description": "The size of the group.",
|
|
313
|
-
"values": [{ "name": "ButtonGroupSize" }]
|
|
314
|
-
},
|
|
315
|
-
{
|
|
316
|
-
"name": "variant",
|
|
317
|
-
"description": "The appearance variant of the group.",
|
|
318
|
-
"values": [{ "name": "ButtonGroupVariant" }]
|
|
319
|
-
}
|
|
320
|
-
],
|
|
321
|
-
"references": []
|
|
322
|
-
},
|
|
323
301
|
{
|
|
324
302
|
"name": "m3e-button",
|
|
325
303
|
"description": "A button users interact with to perform an action.\n---\n\n\n### **Events:**\n - **beforeinput** - Dispatched before a toggle button's selected state changes.\n- **input** - Dispatched when a toggle button's selected state changes.\n- **change** - Dispatched when a toggle button's selected state changes.\n- **click** - Dispatched when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the button.\n- **icon** - Renders an icon before the button's label.\n- **selected** - Renders the label of the button, when selected.\n- **selected-icon** - Renders an icon before the button's label, when selected.\n- **trailing-icon** - Renders an icon after the button's label.\n\n### **CSS Properties:**\n - **--m3e-button-container-height** - Height of the button container, for all size variants. _(default: undefined)_\n- **--m3e-button-outline-thickness** - Thickness of the button outline, for all size variants. _(default: undefined)_\n- **--m3e-button-label-text-font-size** - Font size for the label text, for all size variants. _(default: undefined)_\n- **--m3e-button-label-text-font-weight** - Font weight for the label text, for all size variants. _(default: undefined)_\n- **--m3e-button-label-text-line-height** - Line height for the label text, for all size variants. _(default: undefined)_\n- **--m3e-button-label-text-tracking** - Letter tracking for the label text, for all size variants. _(default: undefined)_\n- **--m3e-button-icon-size** - Size of the icon, for all size variants. _(default: undefined)_\n- **--m3e-button-shape-round** - Corner radius for round shape, for all size variants. _(default: undefined)_\n- **--m3e-button-shape-square** - Corner radius for square shape, for all size variants. _(default: undefined)_\n- **--m3e-button-selected-shape-round** - Corner radius when selected (round), for all size variants. _(default: undefined)_\n- **--m3e-button-selected-shape-square** - Corner radius when selected (square), for all size variants. _(default: undefined)_\n- **--m3e-button-shape-pressed-morph** - Corner radius when pressed, for all size variants. _(default: undefined)_\n- **--m3e-button-leading-space** - Space before icon or label, for all size variants. _(default: undefined)_\n- **--m3e-button-trailing-space** - Space after icon or label, for all size variants. _(default: undefined)_\n- **--m3e-button-icon-label-space** - Space between icon and label, for all size variants. _(default: undefined)_\n- **--m3e-button-extra-small-container-height** - Height of the button container, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-outline-thickness** - Thickness of the button outline, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-label-text-font-size** - Font size for the label text, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-label-text-font-weight** - Font weight for the label text, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-label-text-line-height** - Line height for the label text, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-label-text-tracking** - Letter tracking for the label text, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-icon-size** - Size of the icon, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-shape-round** - Corner radius for round shape, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-shape-square** - Corner radius for square shape, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-selected-shape-round** - Corner radius when selected (round), for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-selected-shape-square** - Corner radius when selected (square), for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-shape-pressed-morph** - Corner radius when pressed, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-leading-space** - Space before icon or label, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-trailing-space** - Space after icon or label, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-extra-small-icon-label-space** - Space between icon and label, for the extra-small size variant. _(default: undefined)_\n- **--m3e-button-small-container-height** - Height of the button container, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-outline-thickness** - Thickness of the button outline, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-label-text-font-size** - Font size for the label text, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-label-text-font-weight** - Font weight for the label text, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-label-text-line-height** - Line height for the label text, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-label-text-tracking** - Letter tracking for the label text, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-icon-size** - Size of the icon, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-shape-round** - Corner radius for round shape, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-shape-square** - Corner radius for square shape, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-selected-shape-round** - Corner radius when selected (round), for the small size variant. _(default: undefined)_\n- **--m3e-button-small-selected-shape-square** - Corner radius when selected (square), for the small size variant. _(default: undefined)_\n- **--m3e-button-small-shape-pressed-morph** - Corner radius when pressed, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-leading-space** - Space before icon or label, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-trailing-space** - Space after icon or label, for the small size variant. _(default: undefined)_\n- **--m3e-button-small-icon-label-space** - Space between icon and label, for the small size variant. _(default: undefined)_\n- **--m3e-button-medium-container-height** - Height of the button container, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-outline-thickness** - Thickness of the button outline, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-label-text-font-size** - Font size for the label text, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-label-text-font-weight** - Font weight for the label text, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-label-text-line-height** - Line height for the label text, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-label-text-tracking** - Letter tracking for the label text, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-icon-size** - Size of the icon, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-shape-round** - Corner radius for round shape, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-shape-square** - Corner radius for square shape, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-selected-shape-round** - Corner radius when selected (round), for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-selected-shape-square** - Corner radius when selected (square), for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-shape-pressed-morph** - Corner radius when pressed, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-leading-space** - Space before icon or label, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-trailing-space** - Space after icon or label, for the medium size variant. _(default: undefined)_\n- **--m3e-button-medium-icon-label-space** - Space between icon and label, for the medium size variant. _(default: undefined)_\n- **--m3e-button-large-container-height** - Height of the button container, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-outline-thickness** - Thickness of the button outline, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-label-text-font-size** - Font size for the label text, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-label-text-font-weight** - Font weight for the label text, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-label-text-line-height** - Line height for the label text, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-label-text-tracking** - Letter tracking for the label text, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-icon-size** - Size of the icon, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-shape-round** - Corner radius for round shape, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-shape-square** - Corner radius for square shape, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-selected-shape-round** - Corner radius when selected (round), for the large size variant. _(default: undefined)_\n- **--m3e-button-large-selected-shape-square** - Corner radius when selected (square), for the large size variant. _(default: undefined)_\n- **--m3e-button-large-shape-pressed-morph** - Corner radius when pressed, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-leading-space** - Space before icon or label, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-trailing-space** - Space after icon or label, for the large size variant. _(default: undefined)_\n- **--m3e-button-large-icon-label-space** - Space between icon and label, for the large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-container-height** - Height of the button container, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-outline-thickness** - Thickness of the button outline, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-label-text-font-size** - Font size for the label text, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-label-text-font-weight** - Font weight for the label text, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-label-text-line-height** - Line height for the label text, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-label-text-tracking** - Letter tracking for the label text, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-icon-size** - Size of the icon, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-shape-round** - Corner radius for round shape, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-shape-square** - Corner radius for square shape, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-selected-shape-round** - Corner radius when selected (round), for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-selected-shape-square** - Corner radius when selected (square), for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-shape-pressed-morph** - Corner radius when pressed, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-leading-space** - Space before icon or label, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-trailing-space** - Space after icon or label, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-extra-large-icon-label-space** - Space between icon and label, for the extra-large size variant. _(default: undefined)_\n- **--m3e-button-outline-color** - Outline color, for all variants. _(default: undefined)_\n- **--m3e-button-disabled-outline-color** - Disabled outline color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-outline-color** - Hover outline color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-outline-color** - Focus outline color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-outline-color** - Pressed outline color, for all variants. _(default: undefined)_\n- **--m3e-button-container-color** - Container background color, for all variants. _(default: undefined)_\n- **--m3e-button-container-elevation** - Elevation, for all variants. _(default: undefined)_\n- **--m3e-button-unselected-container-color** - Unselected container color, for all variants. _(default: undefined)_\n- **--m3e-button-selected-container-color** - Selected container color, for all variants. _(default: undefined)_\n- **--m3e-button-disabled-container-elevation** - Disabled elevation, for all variants. _(default: undefined)_\n- **--m3e-button-hover-container-elevation** - Hover elevation, for all variants. _(default: undefined)_\n- **--m3e-button-focus-container-elevation** - Focus elevation, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-container-elevation** - Pressed elevation, for all variants. _(default: undefined)_\n- **--m3e-button-label-text-color** - Label color, for all variants. _(default: undefined)_\n- **--m3e-button-icon-color** - Icon color, for all variants. _(default: undefined)_\n- **--m3e-button-unselected-label-text-color** - Unselected label color, for all variants. _(default: undefined)_\n- **--m3e-button-unselected-icon-color** - Unselected icon color, for all variants. _(default: undefined)_\n- **--m3e-button-selected-label-text-color** - Selected label color, for all variants. _(default: undefined)_\n- **--m3e-button-selected-icon-color** - Selected icon color, for all variants. _(default: undefined)_\n- **--m3e-button-disabled-container-color** - Disabled container color, for all variants. _(default: undefined)_\n- **--m3e-button-disabled-container-opacity** - Disabled container opacity, for all variants. _(default: undefined)_\n- **--m3e-button-disabled-icon-color** - Disabled icon color, for all variants. _(default: undefined)_\n- **--m3e-button-disabled-icon-opacity** - Disabled icon opacity, for all variants. _(default: undefined)_\n- **--m3e-button-disabled-label-text-color** - Disabled label color, for all variants. _(default: undefined)_\n- **--m3e-button-disabled-label-text-opacity** - Disabled label opacity, for all variants. _(default: undefined)_\n- **--m3e-button-hover-icon-color** - Hover icon color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-label-text-color** - Hover label color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-state-layer-color** - Hover state layer color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-state-layer-opacity** - Hover state layer opacity, for all variants. _(default: undefined)_\n- **--m3e-button-hover-unselected-icon-color** - Hover unselected icon color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-unselected-label-text-color** - Hover unselected label color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-unselected-state-layer-color** - Hover unselected state layer color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-selected-icon-color** - Hover selected icon color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-selected-label-text-color** - Hover selected label color, for all variants. _(default: undefined)_\n- **--m3e-button-hover-selected-state-layer-color** - Hover selected state layer color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-icon-color** - Focus icon color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-label-text-color** - Focus label color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-state-layer-color** - Focus state layer color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-state-layer-opacity** - Focus state layer opacity, for all variants. _(default: undefined)_\n- **--m3e-button-focus-unselected-icon-color** - Focus unselected icon color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-unselected-label-text-color** - Focus unselected label color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-unselected-state-layer-color** - Focus unselected state layer color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-selected-icon-color** - Focus selected icon color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-selected-label-text-color** - Focus selected label color, for all variants. _(default: undefined)_\n- **--m3e-button-focus-selected-state-layer-color** - Focus selected state layer color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-icon-color** - Pressed icon color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-label-text-color** - Pressed label color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-state-layer-color** - Pressed state layer color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-state-layer-opacity** - Pressed state layer opacity, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-unselected-icon-color** - Pressed unselected icon color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-unselected-label-text-color** - Pressed unselected label color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-unselected-state-layer-color** - Pressed unselected state layer color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-selected-icon-color** - Pressed selected icon color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-selected-label-text-color** - Pressed selected label color, for all variants. _(default: undefined)_\n- **--m3e-button-pressed-selected-state-layer-color** - Pressed selected state layer color, for all variants. _(default: undefined)_\n- **--m3e-elevated-button-label-text-color** - Label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-icon-color** - Icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-container-color** - Container background color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-container-elevation** - Elevation, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-unselected-label-text-color** - Unselected label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-unselected-icon-color** - Unselected icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-unselected-container-color** - Unselected container color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-selected-label-text-color** - Selected label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-selected-icon-color** - Selected icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-selected-container-color** - Selected container color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-disabled-container-color** - Disabled container color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-disabled-container-opacity** - Disabled container opacity, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-disabled-icon-color** - Disabled icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-disabled-icon-opacity** - Disabled icon opacity, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-disabled-label-text-color** - Disabled label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-disabled-label-text-opacity** - Disabled label opacity, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-disabled-container-elevation** - Disabled elevation, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-icon-color** - Hover icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-label-text-color** - Hover label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-state-layer-color** - Hover state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-state-layer-opacity** - Hover state layer opacity, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-container-elevation** - Hover elevation, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-unselected-icon-color** - Hover unselected icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-unselected-label-text-color** - Hover unselected label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-unselected-state-layer-color** - Hover unselected state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-selected-icon-color** - Hover selected icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-selected-label-text-color** - Hover selected label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-hover-selected-state-layer-color** - Hover selected state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-icon-color** - Focus icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-label-text-color** - Focus label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-state-layer-color** - Focus state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-state-layer-opacity** - Focus state layer opacity, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-container-elevation** - Focus elevation, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-unselected-label-text-color** - Focus unselected label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-unselected-icon-color** - Focus unselected icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-unselected-state-layer-color** - Focus unselected state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-selected-icon-color** - Focus selected icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-selected-label-text-color** - Focus selected label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-focus-selected-state-layer-color** - Focus selected state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-icon-color** - Pressed icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-label-text-color** - Pressed label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-state-layer-color** - Pressed state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-state-layer-opacity** - Pressed state layer opacity, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-container-elevation** - Pressed elevation, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-unselected-label-text-color** - Pressed unselected label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-unselected-icon-color** - Pressed unselected icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-unselected-state-layer-color** - Pressed unselected state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-selected-icon-color** - Pressed selected icon color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-selected-label-text-color** - Pressed selected label color, for the elevated variant. _(default: undefined)_\n- **--m3e-elevated-button-pressed-selected-state-layer-color** - Pressed selected state layer color, for the elevated variant. _(default: undefined)_\n- **--m3e-outlined-button-label-text-color** - Label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-icon-color** - Icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-outline-color** - Outline color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-unselected-label-text-color** - Unselected label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-unselected-icon-color** - Unselected icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-selected-label-text-color** - Selected label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-selected-icon-color** - Selected icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-selected-container-color** - Selected container color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-disabled-container-color** - Disabled container color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-disabled-container-opacity** - Disabled container opacity, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-disabled-icon-color** - Disabled icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-disabled-icon-opacity** - Disabled icon opacity, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-disabled-label-text-color** - Disabled label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-disabled-label-text-opacity** - Disabled label opacity, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-disabled-outline-color** - Disabled outline color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-icon-color** - Hover icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-label-text-color** - Hover label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-outline-color** - Hover outline color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-state-layer-color** - Hover state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-state-layer-opacity** - Hover state layer opacity, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-unselected-icon-color** - Hover unselected icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-unselected-label-text-color** - Hover unselected label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-unselected-state-layer-color** - Hover unselected state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-selected-icon-color** - Hover selected icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-selected-label-text-color** - Hover selected label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-hover-selected-state-layer-color** - Hover selected state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-icon-color** - Focus icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-label-text-color** - Focus label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-outline-color** - Focus outline color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-state-layer-color** - Focus state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-state-layer-opacity** - Focus state layer opacity, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-unselected-icon-color** - Focus unselected icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-unselected-label-text-color** - Focus unselected label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-unselected-state-layer-color** - Focus unselected state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-selected-icon-color** - Focus selected icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-selected-label-text-color** - Focus selected label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-focus-selected-state-layer-color** - Focus selected state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-icon-color** - Pressed icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-label-text-color** - Pressed label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-outline-color** - Pressed outline color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-state-layer-color** - Pressed state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-state-layer-opacity** - Pressed state layer opacity, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-unselected-icon-color** - Pressed unselected icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-unselected-label-text-color** - Pressed unselected label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-unselected-state-layer-color** - Pressed unselected state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-selected-icon-color** - Pressed selected icon color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-selected-label-text-color** - Pressed selected label color, for the outlined variant. _(default: undefined)_\n- **--m3e-outlined-button-pressed-selected-state-layer-color** - Pressed selected state layer color, for the outlined variant. _(default: undefined)_\n- **--m3e-filled-button-label-text-color** - Label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-icon-color** - Icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-container-color** - Container background color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-container-elevation** - Elevation, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-unselected-label-text-color** - Unselected label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-unselected-icon-color** - Unselected icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-unselected-container-color** - Unselected container color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-selected-label-text-color** - Selected label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-selected-icon-color** - Selected icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-selected-container-color** - Selected container color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-disabled-container-color** - Disabled container color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-disabled-container-opacity** - Disabled container opacity, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-disabled-icon-color** - Disabled icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-disabled-icon-opacity** - Disabled icon opacity, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-disabled-label-text-color** - Disabled label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-disabled-label-text-opacity** - Disabled label opacity, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-disabled-container-elevation** - Disabled elevation, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-icon-color** - Hover icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-label-text-color** - Hover label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-state-layer-color** - Hover state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-state-layer-opacity** - Hover state layer opacity, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-container-elevation** - Hover elevation, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-unselected-icon-color** - Hover unselected icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-unselected-label-text-color** - Hover unselected label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-unselected-state-layer-color** - Hover unselected state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-selected-icon-color** - Hover selected icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-selected-label-text-color** - Hover selected label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-hover-selected-state-layer-color** - Hover selected state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-icon-color** - Focus icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-label-text-color** - Focus label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-state-layer-color** - Focus state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-state-layer-opacity** - Focus state layer opacity, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-container-elevation** - Focus elevation, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-unselected-icon-color** - Focus unselected icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-unselected-label-text-color** - Focus unselected label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-unselected-state-layer-color** - Focus unselected state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-selected-icon-color** - Focus selected icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-selected-label-text-color** - Focus selected label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-focus-selected-state-layer-color** - Focus selected state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-icon-color** - Pressed icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-label-text-color** - Pressed label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-state-layer-color** - Pressed state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-state-layer-opacity** - Pressed state layer opacity, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-container-elevation** - Pressed elevation, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-unselected-icon-color** - Pressed unselected icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-unselected-label-text-color** - Pressed unselected label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-unselected-state-layer-color** - Pressed unselected state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-selected-icon-color** - Pressed selected icon color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-selected-label-text-color** - Pressed selected label color, for the filled variant. _(default: undefined)_\n- **--m3e-filled-button-pressed-selected-state-layer-color** - Pressed selected state layer color, for the filled variant. _(default: undefined)_\n- **--m3e-tonal-button-label-text-color** - Label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-icon-color** - Icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-container-color** - Container background color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-container-elevation** - Elevation, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-unselected-label-text-color** - Unselected label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-unselected-icon-color** - Unselected icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-unselected-container-color** - Unselected container color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-selected-label-text-color** - Selected label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-selected-icon-color** - Selected icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-selected-container-color** - Selected container color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-disabled-container-color** - Disabled container color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-disabled-container-opacity** - Disabled container opacity, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-disabled-icon-color** - Disabled icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-disabled-icon-opacity** - Disabled icon opacity, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-disabled-label-text-color** - Disabled label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-disabled-label-text-opacity** - Disabled label opacity, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-disabled-container-elevation** - Disabled elevation, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-icon-color** - Hover icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-label-text-color** - Hover label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-state-layer-color** - Hover state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-state-layer-opacity** - Hover state layer opacity, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-container-elevation** - Hover elevation, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-unselected-icon-color** - Hover unselected icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-unselected-label-text-color** - Hover unselected label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-unselected-state-layer-color** - Hover unselected state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-selected-icon-color** - Hover selected icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-selected-label-text-color** - Hover selected label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-hover-selected-state-layer-color** - Hover selected state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-icon-color** - Focus icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-label-text-color** - Focus label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-state-layer-color** - Focus state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-state-layer-opacity** - Focus state layer opacity, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-container-elevation** - Focus elevation, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-unselected-icon-color** - Focus unselected icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-unselected-label-text-color** - Focus unselected label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-unselected-state-layer-color** - Focus unselected state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-selected-icon-color** - Focus selected icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-selected-label-text-color** - Focus selected label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-focus-selected-state-layer-color** - Focus selected state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-icon-color** - Pressed icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-label-text-color** - Pressed label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-state-layer-color** - Pressed state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-state-layer-opacity** - Pressed state layer opacity, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-container-elevation** - Pressed elevation, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-unselected-icon-color** - Pressed unselected icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-unselected-label-text-color** - Pressed unselected label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-unselected-state-layer-color** - Pressed unselected state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-selected-icon-color** - Pressed selected icon color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-selected-label-text-color** - Pressed selected label color, for the tonal variant. _(default: undefined)_\n- **--m3e-tonal-button-pressed-selected-state-layer-color** - Pressed selected state layer color, for the tonal variant. _(default: undefined)_\n- **--m3e-text-button-label-text-color** - Label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-icon-color** - Icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-unselected-label-text-color** - Unselected label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-unselected-icon-color** - Unselected icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-selected-label-text-color** - Selected label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-selected-icon-color** - Selected icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-disabled-container-color** - Disabled container color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-disabled-container-opacity** - Disabled container opacity, for the text variant. _(default: undefined)_\n- **--m3e-text-button-disabled-icon-color** - Disabled icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-disabled-icon-opacity** - Disabled icon opacity, for the text variant. _(default: undefined)_\n- **--m3e-text-button-disabled-label-text-color** - Disabled label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-disabled-label-text-opacity** - Disabled label opacity, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-icon-color** - Hover icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-label-text-color** - Hover label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-state-layer-color** - Hover state layer color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-state-layer-opacity** - Hover state layer opacity, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-unselected-icon-color** - Hover unselected icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-unselected-label-text-color** - Hover unselected label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-unselected-state-layer-color** - Hover unselected state layer color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-selected-icon-color** - Hover selected icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-selected-label-text-color** - Hover selected label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-hover-selected-state-layer-color** - Hover selected state layer color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-icon-color** - Focus icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-label-text-color** - Focus label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-state-layer-color** - Focus state layer color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-state-layer-opacity** - Focus state layer opacity, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-unselected-icon-color** - Focus unselected icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-unselected-label-text-color** - Focus unselected label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-unselected-state-layer-color** - Focus unselected state layer color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-selected-icon-color** - Focus selected icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-selected-label-text-color** - Focus selected label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-focus-selected-state-layer-color** - Focus selected state layer color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-icon-color** - Pressed icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-label-text-color** - Pressed label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-state-layer-color** - Pressed state layer color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-state-layer-opacity** - Pressed state layer opacity, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-unselected-icon-color** - Pressed unselected icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-unselected-label-text-color** - Pressed unselected label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-unselected-state-layer-color** - Pressed unselected state layer color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-selected-icon-color** - Pressed selected icon color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-selected-label-text-color** - Pressed selected label color, for the text variant. _(default: undefined)_\n- **--m3e-text-button-pressed-selected-state-layer-color** - Pressed selected state layer color, for the text variant. _(default: undefined)_",
|
|
@@ -397,6 +375,28 @@
|
|
|
397
375
|
],
|
|
398
376
|
"references": []
|
|
399
377
|
},
|
|
378
|
+
{
|
|
379
|
+
"name": "m3e-button-group",
|
|
380
|
+
"description": "Organizes buttons and adds interactions between them.\n---\n\n\n### **Slots:**\n - _default_ - Renders the buttons of the group.\n\n### **CSS Properties:**\n - **--m3e-standard-button-group-extra-small-spacing** - Spacing between buttons in standard variant, extra-small size. _(default: undefined)_\n- **--m3e-standard-button-group-small-spacing** - Spacing between buttons in standard variant, small size. _(default: undefined)_\n- **--m3e-standard-button-group-medium-spacing** - Spacing between buttons in standard variant, medium size. _(default: undefined)_\n- **--m3e-standard-button-group-large-spacing** - Spacing between buttons in standard variant, large size. _(default: undefined)_\n- **--m3e-standard-button-group-extra-large-spacing** - Spacing between buttons in standard variant, extra-large size. _(default: undefined)_\n- **--m3e-connected-button-group-spacing** - Spacing between buttons in connected variant. _(default: undefined)_\n- **--m3e-connected-button-group-extra-small-inner-shape** - Corner shape for connected variant, extra-small size. _(default: undefined)_\n- **--m3e-connected-button-group-extra-small-inner-pressed-shape** - Pressed corner shape for connected variant, extra-small size. _(default: undefined)_\n- **--m3e-connected-button-group-small-inner-shape** - Corner shape for connected variant, small size. _(default: undefined)_\n- **--m3e-connected-button-group-small-inner-pressed-shape** - Pressed corner shape for connected variant, small size. _(default: undefined)_\n- **--m3e-connected-button-group-medium-inner-shape** - Corner shape for connected variant, medium size. _(default: undefined)_\n- **--m3e-connected-button-group-medium-inner-pressed-shape** - Pressed corner shape for connected variant, medium size. _(default: undefined)_\n- **--m3e-connected-button-group-large-inner-shape** - Corner shape for connected variant, large size. _(default: undefined)_\n- **--m3e-connected-button-group-large-inner-pressed-shape** - Pressed corner shape for connected variant, large size. _(default: undefined)_\n- **--m3e-connected-button-group-extra-large-inner-shape** - Corner shape for connected variant, extra-large size. _(default: undefined)_\n- **--m3e-connected-button-group-extra-large-inner-pressed-shape** - Pressed corner shape for connected variant, extra-large size. _(default: undefined)_",
|
|
381
|
+
"attributes": [
|
|
382
|
+
{
|
|
383
|
+
"name": "multi",
|
|
384
|
+
"description": "Whether multiple toggle buttons can be selected.",
|
|
385
|
+
"values": []
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"name": "size",
|
|
389
|
+
"description": "The size of the group.",
|
|
390
|
+
"values": [{ "name": "ButtonGroupSize" }]
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
"name": "variant",
|
|
394
|
+
"description": "The appearance variant of the group.",
|
|
395
|
+
"values": [{ "name": "ButtonGroupVariant" }]
|
|
396
|
+
}
|
|
397
|
+
],
|
|
398
|
+
"references": []
|
|
399
|
+
},
|
|
400
400
|
{
|
|
401
401
|
"name": "m3e-calendar",
|
|
402
402
|
"description": "A calendar used to select a date.\n---\n\n\n### **Events:**\n - **change** - Dispatched when the selected date changes.\n\n### **Methods:**\n - **focusActiveCell(): _Promise<void>_** - Asynchronously focuses the active date.\n- **updateTodayDate(): _void_** - Updates today's date.\n- **movePreviousPeriod(): _Promise<void>_** - Moves the calendar to the previous period.\n- **moveNextPeriod(): _Promise<void>_** - Moves the calendar to the next period.\n- **togglePeriod(): _Promise<void>_** - Toggles the current period.\n\n### **Slots:**\n - **header** - Renders the header of the calendar.\n\n### **CSS Properties:**\n - **--m3e-calendar-container-color** - Background color of the container surface. _(default: undefined)_\n- **--m3e-calendar-container-elevation** - Elevation shadow applied to the container surface. _(default: undefined)_\n- **--m3e-calendar-container-shape** - Corner radius of the container surface. _(default: undefined)_\n- **--m3e-calendar-padding** - Padding applied to the calendar header and body. _(default: undefined)_\n- **--m3e-calendar-period-button-text-color** - Text color used for the period‑navigation buttons in the header. _(default: undefined)_\n- **--m3e-calendar-weekday-font-size** - Font size of weekday labels in month view. _(default: undefined)_\n- **--m3e-calendar-weekday-font-weight** - Font weight of weekday labels in month view. _(default: undefined)_\n- **--m3e-calendar-weekday-line-height** - Line height of weekday labels in month view. _(default: undefined)_\n- **--m3e-calendar-weekday-tracking** - Letter spacing of weekday labels in month view. _(default: undefined)_\n- **--m3e-calendar-weekday-color** - Text color for weekday labels in month view. _(default: undefined)_\n- **--m3e-calendar-date-font-size** - Font size of date cells in month view. _(default: undefined)_\n- **--m3e-calendar-date-font-weight** - Font weight of date cells in month view. _(default: undefined)_\n- **--m3e-calendar-date-line-height** - Line height of date cells in month view. _(default: undefined)_\n- **--m3e-calendar-date-tracking** - Letter spacing of date cells in month view. _(default: undefined)_\n- **--m3e-calendar-item-font-size** - Font size of items in year and multi‑year views. _(default: undefined)_\n- **--m3e-calendar-item-font-weight** - Font weight of items in year and multi‑year views. _(default: undefined)_\n- **--m3e-calendar-item-line-height** - Line height of items in year and multi‑year views. _(default: undefined)_\n- **--m3e-calendar-item-tracking** - Letter spacing of items in year and multi‑year views. _(default: undefined)_\n- **--m3e-calendar-item-color** - Text color for date items. _(default: undefined)_\n- **--m3e-calendar-item-selected-color** - Text color for selected date items. _(default: undefined)_\n- **--m3e-calendar-item-selected-container-color** - Background color for selected date items. _(default: undefined)_\n- **--m3e-calendar-item-selected-ripple-color** - Ripple color used when interacting with selected date items. _(default: undefined)_\n- **--m3e-calendar-item-selected-hover-color** - Hover color used when interacting with selected date items. _(default: undefined)_\n- **--m3e-calendar-item-selected-focus-color** - Focus color used when interacting with selected date items. _(default: undefined)_\n- **--m3e-calendar-item-current-outline-thickness** - Outline thickness used to indicate the current date. _(default: undefined)_\n- **--m3e-calendar-item-current-outline-color** - Outline color used to indicate the current date. _(default: undefined)_\n- **--m3e-calendar-item-special-color** - Text color for dates marked as special. _(default: undefined)_\n- **--m3e-calendar-item-special-container-color** - Background color for dates marked as special. _(default: undefined)_\n- **--m3e-calendar-item-special-ripple-color** - Ripple color used when interacting with dates marked as special. _(default: undefined)_\n- **--m3e-calendar-item-special-hover-color** - Hover color used when interacting with dates marked as special. _(default: undefined)_\n- **--m3e-calendar-item-special-focus-color** - Focus color used when interacting with dates marked as special. _(default: undefined)_\n- **--m3e-calendar-range-container-color** - Background color applied to the selected date range. _(default: undefined)_\n- **--m3e-calendar-range-color** - Text color for dates within a selected range. _(default: undefined)_\n- **--m3e-calendar-item-disabled-color** - Color used for disabled date items. _(default: undefined)_\n- **--m3e-calendar-item-disabled-color-opacity** - Opacity applied to the disabled item color. _(default: undefined)_\n- **--m3e-calendar-slide-animation-duration** - Duration of slide transitions between calendar views. _(default: undefined)_",
|
|
@@ -2353,6 +2353,18 @@
|
|
|
2353
2353
|
],
|
|
2354
2354
|
"references": []
|
|
2355
2355
|
},
|
|
2356
|
+
{
|
|
2357
|
+
"name": "m3e-shape",
|
|
2358
|
+
"description": "A shape used to add emphasis and decorative flair.\n---\n\n\n### **Slots:**\n - _default_ - Renders the clipped content of the shape.\n\n### **CSS Properties:**\n - **--m3e-shape-size** - Default size of the shape. _(default: undefined)_\n- **--m3e-shape-container-color** - Container (background) color of the shape. _(default: undefined)_\n- **--m3e-shape-transition** - Transition used to morph between shapes. _(default: undefined)_",
|
|
2359
|
+
"attributes": [
|
|
2360
|
+
{
|
|
2361
|
+
"name": "name",
|
|
2362
|
+
"description": "The name of the shape.",
|
|
2363
|
+
"values": [{ "name": "ShapeName" }]
|
|
2364
|
+
}
|
|
2365
|
+
],
|
|
2366
|
+
"references": []
|
|
2367
|
+
},
|
|
2356
2368
|
{
|
|
2357
2369
|
"name": "m3e-select",
|
|
2358
2370
|
"description": "A form control that allows users to select a value from a set of predefined options.\n---\n\n\n### **Events:**\n - **change** - Dispatched when the selected state changes.\n- **toggle**\n- **beforeinput** - Dispatched before the selected state changes.\n- **input** - Dispatched when the selected state changes.\n\n### **Methods:**\n - **clear(restoreFocus): _void_** - Clears the value of the element.\n- **markAsPristine(): _void_** - Marks the element as pristine.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n- **reportValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise, returns `false`, fires\r\nan invalid event, and (if the event isn't canceled) reports the problem to the user.\n- **checkValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise,\r\nreturns `false`, fires an invalid event.\n- **setCustomValidity(error: _string_): _void_** - Sets a custom validity message for the element.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called when the element is disabled or enabled via its form association.\n- **formResetCallback(): _void_** - Called when the associated form is reset.\n\n### **Slots:**\n - _default_ - Renders the options of the select.\n- **arrow** - Renders the dropdown arrow.\n- **value** - Renders the selected value(s).\n\n### **CSS Properties:**\n - **--m3e-form-field-font-size** - The font size of the select control. _(default: undefined)_\n- **--m3e-form-field-font-weight** - The font weight of the select control. _(default: undefined)_\n- **--m3e-form-field-line-height** - The line height of the select control. _(default: undefined)_\n- **--m3e-form-field-tracking** - The letter spacing of the select control. _(default: undefined)_\n- **--m3e-select-container-shape** - The corner radius of the select container. _(default: undefined)_\n- **--m3e-select-disabled-color** - The text color when the select is disabled. _(default: undefined)_\n- **--m3e-select-disabled-color-opacity** - The opacity level applied to the disabled text color. _(default: undefined)_\n- **--m3e-select-icon-size** - The size of the dropdown arrow icon. _(default: undefined)_",
|
|
@@ -2390,18 +2402,6 @@
|
|
|
2390
2402
|
],
|
|
2391
2403
|
"references": []
|
|
2392
2404
|
},
|
|
2393
|
-
{
|
|
2394
|
-
"name": "m3e-shape",
|
|
2395
|
-
"description": "A shape used to add emphasis and decorative flair.\n---\n\n\n### **Slots:**\n - _default_ - Renders the clipped content of the shape.\n\n### **CSS Properties:**\n - **--m3e-shape-size** - Default size of the shape. _(default: undefined)_\n- **--m3e-shape-container-color** - Container (background) color of the shape. _(default: undefined)_\n- **--m3e-shape-transition** - Transition used to morph between shapes. _(default: undefined)_",
|
|
2396
|
-
"attributes": [
|
|
2397
|
-
{
|
|
2398
|
-
"name": "name",
|
|
2399
|
-
"description": "The name of the shape.",
|
|
2400
|
-
"values": [{ "name": "ShapeName" }]
|
|
2401
|
-
}
|
|
2402
|
-
],
|
|
2403
|
-
"references": []
|
|
2404
|
-
},
|
|
2405
2405
|
{
|
|
2406
2406
|
"name": "m3e-skeleton",
|
|
2407
2407
|
"description": "A visual placeholder that mimics the layout of content while it's still loading.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content to be mimicked by the skeleton.\n\n### **CSS Properties:**\n - **--m3e-skeleton-color** - Base fill color for the skeleton surface. _(default: undefined)_\n- **--m3e-skeleton-tint-color** - Tint fill color for the skeleton surface. _(default: undefined)_\n- **--m3e-skeleton-tint-opacity** - Tint Opacity applied when the skeleton animation is not pulsating. _(default: undefined)_\n- **--m3e-skeleton-accent-color** - Accent color used in wave animation. _(default: undefined)_\n- **--m3e-skeleton-accent-opacity** - Opacity of the accent effect in animations. _(default: undefined)_\n- **--m3e-skeleton-rounded-shape** - Corner radius for the rounded skeleton shape. _(default: undefined)_\n- **--m3e-skeleton-circular-shape** - Corner radius for the circular skeleton shape. _(default: undefined)_\n- **--m3e-skeleton-square-shape** - Corner radius for the square skeleton shape. _(default: undefined)_\n- **--m3e-skeleton-shape** - Corner radius for the skeleton shape. _(default: undefined)_",
|
|
@@ -2424,38 +2424,6 @@
|
|
|
2424
2424
|
],
|
|
2425
2425
|
"references": []
|
|
2426
2426
|
},
|
|
2427
|
-
{
|
|
2428
|
-
"name": "m3e-slide-group",
|
|
2429
|
-
"description": "Presents pagination controls used to scroll overflowing content.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content to paginate.\n- **next-icon** - Renders the icon to present for the next button.\n- **prev-icon** - Renders the icon to present for the previous button.\n\n### **CSS Properties:**\n - **--m3e-slide-group-button-icon-size** - Sets icon size for scroll buttons; overrides default small icon size. _(default: undefined)_\n- **--m3e-slide-group-button-size** - Defines scroll button size; used for width (horizontal) or height (vertical). _(default: undefined)_\n- **--m3e-slide-group-divider-top** - Adds top border to content container for visual separation. _(default: undefined)_\n- **--m3e-slide-group-divider-bottom** - Adds bottom border to content container for visual separation. _(default: undefined)_",
|
|
2430
|
-
"attributes": [
|
|
2431
|
-
{
|
|
2432
|
-
"name": "disabled",
|
|
2433
|
-
"description": "Whether scroll buttons are disabled.",
|
|
2434
|
-
"values": []
|
|
2435
|
-
},
|
|
2436
|
-
{
|
|
2437
|
-
"name": "next-page-label",
|
|
2438
|
-
"description": "The accessible label given to the button used to move to the next page.",
|
|
2439
|
-
"values": []
|
|
2440
|
-
},
|
|
2441
|
-
{
|
|
2442
|
-
"name": "previous-page-label",
|
|
2443
|
-
"description": "The accessible label given to the button used to move to the previous page.",
|
|
2444
|
-
"values": []
|
|
2445
|
-
},
|
|
2446
|
-
{
|
|
2447
|
-
"name": "threshold",
|
|
2448
|
-
"description": "A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.",
|
|
2449
|
-
"values": []
|
|
2450
|
-
},
|
|
2451
|
-
{
|
|
2452
|
-
"name": "vertical",
|
|
2453
|
-
"description": "Whether content is oriented vertically.",
|
|
2454
|
-
"values": []
|
|
2455
|
-
}
|
|
2456
|
-
],
|
|
2457
|
-
"references": []
|
|
2458
|
-
},
|
|
2459
2427
|
{
|
|
2460
2428
|
"name": "m3e-slider",
|
|
2461
2429
|
"description": "Allows for the selection of numeric values from a range.\n---\n\n\n### **Events:**\n - **beforeinput** - Dispatched before the value of a thumb changes.\n- **input** - Dispatched when the value of a thumb changes.\n- **change** - Dispatched when the value of a thumb changes.\n\n### **Slots:**\n - _default_ - Renders the thumbs of the slider.\n\n### **CSS Properties:**\n - **--m3e-slider-min-width** - Minimum inline size of the slider host. _(default: undefined)_\n- **--m3e-slider-small-height** - Height of the slider when size is small or extra-small. _(default: undefined)_\n- **--m3e-slider-medium-height** - Height of the slider when size is medium. _(default: undefined)_\n- **--m3e-slider-large-height** - Height of the slider when size is large. _(default: undefined)_\n- **--m3e-slider-extra-large-height** - Height of the slider when size is extra-large. _(default: undefined)_\n- **--m3e-slider-small-active-track-shape** - Corner shape of the active track for small sliders. _(default: undefined)_\n- **--m3e-slider-small-inactive-active-track-start-shape** - Corner shape of the inactive track start for small sliders. _(default: undefined)_\n- **--m3e-slider-small-inactive-track-end-shape** - Corner shape of the inactive track end for small sliders. _(default: undefined)_\n- **--m3e-slider-medium-active-track-shape** - Corner shape of the active track for medium sliders. _(default: undefined)_\n- **--m3e-slider-medium-inactive-active-track-start-shape** - Corner shape of the inactive track start for medium sliders. _(default: undefined)_\n- **--m3e-slider-medium-inactive-track-end-shape** - Corner shape of the inactive track end for medium sliders. _(default: undefined)_\n- **--m3e-slider-large-active-track-shape** - Corner shape of the active track for large sliders. _(default: undefined)_\n- **--m3e-slider-large-inactive-active-track-start-shape** - Corner shape of the inactive track start for large sliders. _(default: undefined)_\n- **--m3e-slider-large-inactive-track-end-shape** - Corner shape of the inactive track end for large sliders. _(default: undefined)_\n- **--m3e-slider-extra-large-active-track-shape** - Corner shape of the active track for extra-large sliders. _(default: undefined)_\n- **--m3e-slider-extra-large-inactive-active-track-start-shape** - Corner shape of the inactive track start for extra-large sliders. _(default: undefined)_\n- **--m3e-slider-extra-large-inactive-track-end-shape** - Corner shape of the inactive track end for extra-large sliders. _(default: undefined)_\n- **--m3e-slider-extra-small-track-height** - Height of the track for extra-small sliders. _(default: undefined)_\n- **--m3e-slider-small-track-height** - Height of the track for small sliders. _(default: undefined)_\n- **--m3e-slider-medium-track-height** - Height of the track for medium sliders. _(default: undefined)_\n- **--m3e-slider-large-track-height** - Height of the track for large sliders. _(default: undefined)_\n- **--m3e-slider-extra-large-track-height** - Height of the track for extra-large sliders. _(default: undefined)_\n- **--m3e-slider-tick-size** - Size of each tick mark. _(default: undefined)_\n- **--m3e-slider-tick-shape** - Corner shape of each tick mark. _(default: undefined)_\n- **--m3e-slider-inactive-track-color** - Background color of the inactive track when enabled. _(default: undefined)_\n- **--m3e-slider-disabled-inactive-track-color** - Base color of the inactive track when disabled. _(default: undefined)_\n- **--m3e-slider-disabled-inactive-track-opacity** - Opacity of the inactive track when disabled. _(default: undefined)_\n- **--m3e-slider-active-track-color** - Background color of the active track when enabled. _(default: undefined)_\n- **--m3e-slider-disabled-active-track-color** - Base color of the active track when disabled. _(default: undefined)_\n- **--m3e-slider-disabled-active-track-opacity** - Opacity of the active track when disabled. _(default: undefined)_\n- **--m3e-slider-tick-active-color** - Color of active ticks when enabled. _(default: undefined)_\n- **--m3e-slider-disabled-tick-active-color** - Color of active ticks when disabled. _(default: undefined)_\n- **--m3e-slider-tick-inactive-color** - Color of inactive ticks when enabled. _(default: undefined)_\n- **--m3e-slider-disabled-tick-inactive-color** - Color of inactive ticks when disabled. _(default: undefined)_",
|
|
@@ -2520,6 +2488,38 @@
|
|
|
2520
2488
|
],
|
|
2521
2489
|
"references": []
|
|
2522
2490
|
},
|
|
2491
|
+
{
|
|
2492
|
+
"name": "m3e-slide-group",
|
|
2493
|
+
"description": "Presents pagination controls used to scroll overflowing content.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content to paginate.\n- **next-icon** - Renders the icon to present for the next button.\n- **prev-icon** - Renders the icon to present for the previous button.\n\n### **CSS Properties:**\n - **--m3e-slide-group-button-icon-size** - Sets icon size for scroll buttons; overrides default small icon size. _(default: undefined)_\n- **--m3e-slide-group-button-size** - Defines scroll button size; used for width (horizontal) or height (vertical). _(default: undefined)_\n- **--m3e-slide-group-divider-top** - Adds top border to content container for visual separation. _(default: undefined)_\n- **--m3e-slide-group-divider-bottom** - Adds bottom border to content container for visual separation. _(default: undefined)_",
|
|
2494
|
+
"attributes": [
|
|
2495
|
+
{
|
|
2496
|
+
"name": "disabled",
|
|
2497
|
+
"description": "Whether scroll buttons are disabled.",
|
|
2498
|
+
"values": []
|
|
2499
|
+
},
|
|
2500
|
+
{
|
|
2501
|
+
"name": "next-page-label",
|
|
2502
|
+
"description": "The accessible label given to the button used to move to the next page.",
|
|
2503
|
+
"values": []
|
|
2504
|
+
},
|
|
2505
|
+
{
|
|
2506
|
+
"name": "previous-page-label",
|
|
2507
|
+
"description": "The accessible label given to the button used to move to the previous page.",
|
|
2508
|
+
"values": []
|
|
2509
|
+
},
|
|
2510
|
+
{
|
|
2511
|
+
"name": "threshold",
|
|
2512
|
+
"description": "A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.",
|
|
2513
|
+
"values": []
|
|
2514
|
+
},
|
|
2515
|
+
{
|
|
2516
|
+
"name": "vertical",
|
|
2517
|
+
"description": "Whether content is oriented vertically.",
|
|
2518
|
+
"values": []
|
|
2519
|
+
}
|
|
2520
|
+
],
|
|
2521
|
+
"references": []
|
|
2522
|
+
},
|
|
2523
2523
|
{
|
|
2524
2524
|
"name": "m3e-snackbar",
|
|
2525
2525
|
"description": "Presents short updates about application processes at the bottom of the screen.\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched before the toggle state changes.\n- **toggle** - Dispatched after the toggle state has changed.\n\n### **Slots:**\n - _default_ - Renders the content of the snackbar.\n- **close-icon** - Renders the icon of the button used to close the snackbar.\n\n### **CSS Properties:**\n - **--m3e-snackbar-margin** - Vertical offset from the bottom of the viewport. _(default: undefined)_\n- **--m3e-snackbar-container-shape** - Border radius of the snackbar container. _(default: undefined)_\n- **--m3e-snackbar-container-color** - Background color of the snackbar. _(default: undefined)_\n- **--m3e-snackbar-padding** - Internal spacing of the snackbar container. _(default: undefined)_\n- **--m3e-snackbar-min-width** - Minimum width of the snackbar. _(default: undefined)_\n- **--m3e-snackbar-max-width** - Maximum width of the snackbar. _(default: undefined)_",
|
|
@@ -2635,6 +2635,38 @@
|
|
|
2635
2635
|
],
|
|
2636
2636
|
"references": []
|
|
2637
2637
|
},
|
|
2638
|
+
{
|
|
2639
|
+
"name": "m3e-switch",
|
|
2640
|
+
"description": "An on/off control that can be toggled by clicking.\n---\n\n\n### **Events:**\n - **beforeinput** - Dispatched before the checked state changes.\n- **input** - Dispatched when the checked state changes.\n- **change** - Dispatched when the checked state changes.\n- **click** - Dispatched when the element is clicked.\n\n### **Methods:**\n - **markAsPristine(): _void_** - Marks the element as pristine.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n- **reportValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise, returns `false`, fires\r\nan invalid event, and (if the event isn't canceled) reports the problem to the user.\n- **checkValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise,\r\nreturns `false`, fires an invalid event.\n- **setCustomValidity(error: _string_): _void_** - Sets a custom validity message for the element.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called when the element is disabled or enabled via its form association.\n- **formResetCallback(): _void_** - Called when the associated form is reset.\n\n### **CSS Properties:**\n - **--m3e-switch-selected-icon-color** - Color of the icon when the switch is selected. _(default: undefined)_\n- **--m3e-switch-selected-icon-size** - Size of the icon in the selected state. _(default: undefined)_\n- **--m3e-switch-unselected-icon-color** - Color of the icon when the switch is unselected. _(default: undefined)_\n- **--m3e-switch-unselected-icon-size** - Size of the icon in the unselected state. _(default: undefined)_\n- **--m3e-switch-track-height** - Height of the switch track. _(default: undefined)_\n- **--m3e-switch-track-width** - Width of the switch track. _(default: undefined)_\n- **--m3e-switch-track-outline-color** - Color of the track's outline. _(default: undefined)_\n- **--m3e-switch-track-outline-width** - Thickness of the track's outline. _(default: undefined)_\n- **--m3e-switch-track-shape** - Corner shape of the track. _(default: undefined)_\n- **--m3e-switch-selected-track-color** - Track color when selected. _(default: undefined)_\n- **--m3e-switch-unselected-track-color** - Track color when unselected. _(default: undefined)_\n- **--m3e-switch-unselected-handle-height** - Height of the handle when unselected. _(default: undefined)_\n- **--m3e-switch-unselected-handle-width** - Width of the handle when unselected. _(default: undefined)_\n- **--m3e-switch-with-icon-handle-height** - Height of the handle when icons are present. _(default: undefined)_\n- **--m3e-switch-with-icon-handle-width** - Width of the handle when icons are present. _(default: undefined)_\n- **--m3e-switch-selected-handle-height** - Height of the handle when selected. _(default: undefined)_\n- **--m3e-switch-selected-handle-width** - Width of the handle when selected. _(default: undefined)_\n- **--m3e-switch-pressed-handle-height** - Height of the handle during press. _(default: undefined)_\n- **--m3e-switch-pressed-handle-width** - Width of the handle during press. _(default: undefined)_\n- **--m3e-switch-handle-shape** - Corner shape of the handle. _(default: undefined)_\n- **--m3e-switch-selected-handle-color** - Handle color when selected. _(default: undefined)_\n- **--m3e-switch-unselected-handle-color** - Handle color when unselected. _(default: undefined)_\n- **--m3e-switch-state-layer-size** - Diameter of the state layer overlay. _(default: undefined)_\n- **--m3e-switch-state-layer-shape** - Corner shape of the state layer. _(default: undefined)_\n- **--m3e-switch-disabled-selected-icon-color** - Icon color when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-selected-icon-opacity** - Icon opacity when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-icon-color** - Icon color when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-icon-opacity** - Icon opacity when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-track-opacity** - Track opacity when disabled. _(default: undefined)_\n- **--m3e-switch-disabled-selected-track-color** - Track color when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-track-color** - Track color when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-track-outline-color** - Outline color when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-handle-opacity** - Handle opacity when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-selected-handle-opacity** - Handle opacity when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-selected-handle-color** - Handle color when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-handle-color** - Handle color when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-selected-hover-icon-color** - Icon color when selected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-icon-color** - Icon color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-hover-track-color** - Track color when selected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-hover-state-layer-color** - State layer color when selected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-hover-state-layer-opacity** - State layer opacity when selected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-track-color** - Track color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-track-outline-color** - Outline color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-state-layer-color** - State layer color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-state-layer-opacity** - State layer opacity when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-hover-handle-color** - Handle color when selected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-handle-color** - Handle color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-focus-icon-color** - Icon color when selected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-icon-color** - Icon color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-selected-focus-track-color** - Track color when selected and focused. _(default: undefined)_\n- **--m3e-switch-selected-focus-state-layer-color** - State layer color when selected and focused. _(default: undefined)_\n- **--m3e-switch-selected-focus-state-layer-opacity** - State layer opacity when selected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-track-color** - Track color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-track-outline-color** - Outline color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-state-layer-color** - State layer color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-state-layer-opacity** - State layer opacity when unselected and focused. _(default: undefined)_\n- **--m3e-switch-selected-focus-handle-color** - Handle color when selected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-handle-color** - Handle color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-selected-pressed-icon-color** - Icon color when selected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-icon-color** - Icon color when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-selected-pressed-track-color** - Track color when selected and pressed. _(default: undefined)_\n- **--m3e-switch-selected-pressed-state-layer-color** - State layer color when selected and pressed. _(default: undefined)_\n- **--m3e-switch-selected-pressed-state-layer-opacity** - State layer opacity when selected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-track-color** - Track color when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-track-outline-color** - Outline color when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-state-layer-color** - State layer color when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-state-layer-opacity** - State layer opacity when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-selected-pressed-handle-color** - Handle color when selected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-handle-color** - Handle color when unselected and pressed. _(default: undefined)_",
|
|
2641
|
+
"attributes": [
|
|
2642
|
+
{
|
|
2643
|
+
"name": "checked",
|
|
2644
|
+
"description": "Whether the element is checked.",
|
|
2645
|
+
"values": []
|
|
2646
|
+
},
|
|
2647
|
+
{
|
|
2648
|
+
"name": "disabled",
|
|
2649
|
+
"description": "Whether the element is disabled.",
|
|
2650
|
+
"values": []
|
|
2651
|
+
},
|
|
2652
|
+
{
|
|
2653
|
+
"name": "icons",
|
|
2654
|
+
"description": "The icons to present.",
|
|
2655
|
+
"values": [{ "name": "SwitchIcons" }]
|
|
2656
|
+
},
|
|
2657
|
+
{
|
|
2658
|
+
"name": "name",
|
|
2659
|
+
"description": "The name that identifies the element when submitting the associated form.",
|
|
2660
|
+
"values": []
|
|
2661
|
+
},
|
|
2662
|
+
{
|
|
2663
|
+
"name": "value",
|
|
2664
|
+
"description": "A string representing the value of the switch.",
|
|
2665
|
+
"values": []
|
|
2666
|
+
}
|
|
2667
|
+
],
|
|
2668
|
+
"references": []
|
|
2669
|
+
},
|
|
2638
2670
|
{
|
|
2639
2671
|
"name": "m3e-step",
|
|
2640
2672
|
"description": "A step in a wizard-like workflow.\n---\n\n\n### **Events:**\n - **beforeinput** - Dispatched before the selected state changes.\n- **input** - Dispatched when the selected state changes.\n- **change** - Dispatched when the selected state changes.\n- **click** - Dispatched when the element is clicked.\n\n### **Methods:**\n - **reset(): _void_** - Resets the step to its initial state, clearing any form data.\n- **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - _default_ - Renders the label of the step.\n- **icon** - Renders the icon of the step.\n- **done-icon** - Renders the icon of a completed step.\n- **edit-icon** - Renders the icon of a completed editable step.\n- **error-icon** - Renders icon of an invalid step.\n- **hint** - Renders the hint text of the step.\n- **error** - Renders the error message for an invalid step.\n\n### **CSS Properties:**\n - **--m3e-step-shape** - Border radius of the step container, defining its visual shape. _(default: undefined)_\n- **--m3e-step-padding** - Internal padding of the step container, used for layout spacing. _(default: undefined)_\n- **--m3e-step-icon-shape** - Border radius of the icon container, controlling its geometric form. _(default: undefined)_\n- **--m3e-step-icon-size** - Width and height of the icon container and icon glyph. _(default: undefined)_\n- **--m3e-step-selected-icon-container-color** - Background color of the icon when the step is selected. _(default: undefined)_\n- **--m3e-step-selected-icon-color** - Foreground color of the icon when the step is selected. _(default: undefined)_\n- **--m3e-step-completed-icon-container-color** - Background color of the icon when the step is completed. _(default: undefined)_\n- **--m3e-step-completed-icon-color** - Foreground color of the icon when the step is completed. _(default: undefined)_\n- **--m3e-step-unselected-icon-container-color** - Background color of the icon when the step is inactive. _(default: undefined)_\n- **--m3e-step-unselected-icon-color** - Foreground color of the icon when the step is inactive. _(default: undefined)_\n- **--m3e-step-icon-error-color** - Foreground color of the icon when the step is invalid. _(default: undefined)_\n- **--m3e-step-disabled-icon-container-color** - Base color used to mix the disabled icon background. _(default: undefined)_\n- **--m3e-step-disabled-icon-color** - Base color used to mix the disabled icon foreground. _(default: undefined)_\n- **--m3e-step-label-color** - Text color of the step label in its default state. _(default: undefined)_\n- **--m3e-step-label-error-color** - Text color of the step label when the step is invalid. _(default: undefined)_\n- **--m3e-step-disabled-label-color** - Base color used to mix the disabled label foreground. _(default: undefined)_\n- **--m3e-step-font-size** - Font size of the step label. _(default: undefined)_\n- **--m3e-step-font-weight** - Font weight of the step label. _(default: undefined)_\n- **--m3e-step-line-height** - Line height of the step label. _(default: undefined)_\n- **--m3e-step-tracking** - Letter spacing of the step label. _(default: undefined)_\n- **--m3e-step-icon-label-space** - Gap between icon and label. _(default: undefined)_\n- **--m3e-step-hint-font-size** - Font size of hint and error messages. _(default: undefined)_\n- **--m3e-step-hint-font-weight** - Font weight of hint and error messages. _(default: undefined)_\n- **--m3e-step-hint-line-height** - Line height of hint and error messages. _(default: undefined)_\n- **--m3e-step-hint-tracking** - Letter spacing of hint and error messages. _(default: undefined)_\n- **--m3e-step-hint-color** - Text color of hint messages in valid state. _(default: undefined)_\n- **--m3e-step-disabled-hint-color** - Base color used to mix the disabled hint foreground. _(default: undefined)_",
|
|
@@ -2728,38 +2760,6 @@
|
|
|
2728
2760
|
"attributes": [],
|
|
2729
2761
|
"references": []
|
|
2730
2762
|
},
|
|
2731
|
-
{
|
|
2732
|
-
"name": "m3e-switch",
|
|
2733
|
-
"description": "An on/off control that can be toggled by clicking.\n---\n\n\n### **Events:**\n - **beforeinput** - Dispatched before the checked state changes.\n- **input** - Dispatched when the checked state changes.\n- **change** - Dispatched when the checked state changes.\n- **click** - Dispatched when the element is clicked.\n\n### **Methods:**\n - **markAsPristine(): _void_** - Marks the element as pristine.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n- **reportValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise, returns `false`, fires\r\nan invalid event, and (if the event isn't canceled) reports the problem to the user.\n- **checkValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise,\r\nreturns `false`, fires an invalid event.\n- **setCustomValidity(error: _string_): _void_** - Sets a custom validity message for the element.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called when the element is disabled or enabled via its form association.\n- **formResetCallback(): _void_** - Called when the associated form is reset.\n\n### **CSS Properties:**\n - **--m3e-switch-selected-icon-color** - Color of the icon when the switch is selected. _(default: undefined)_\n- **--m3e-switch-selected-icon-size** - Size of the icon in the selected state. _(default: undefined)_\n- **--m3e-switch-unselected-icon-color** - Color of the icon when the switch is unselected. _(default: undefined)_\n- **--m3e-switch-unselected-icon-size** - Size of the icon in the unselected state. _(default: undefined)_\n- **--m3e-switch-track-height** - Height of the switch track. _(default: undefined)_\n- **--m3e-switch-track-width** - Width of the switch track. _(default: undefined)_\n- **--m3e-switch-track-outline-color** - Color of the track's outline. _(default: undefined)_\n- **--m3e-switch-track-outline-width** - Thickness of the track's outline. _(default: undefined)_\n- **--m3e-switch-track-shape** - Corner shape of the track. _(default: undefined)_\n- **--m3e-switch-selected-track-color** - Track color when selected. _(default: undefined)_\n- **--m3e-switch-unselected-track-color** - Track color when unselected. _(default: undefined)_\n- **--m3e-switch-unselected-handle-height** - Height of the handle when unselected. _(default: undefined)_\n- **--m3e-switch-unselected-handle-width** - Width of the handle when unselected. _(default: undefined)_\n- **--m3e-switch-with-icon-handle-height** - Height of the handle when icons are present. _(default: undefined)_\n- **--m3e-switch-with-icon-handle-width** - Width of the handle when icons are present. _(default: undefined)_\n- **--m3e-switch-selected-handle-height** - Height of the handle when selected. _(default: undefined)_\n- **--m3e-switch-selected-handle-width** - Width of the handle when selected. _(default: undefined)_\n- **--m3e-switch-pressed-handle-height** - Height of the handle during press. _(default: undefined)_\n- **--m3e-switch-pressed-handle-width** - Width of the handle during press. _(default: undefined)_\n- **--m3e-switch-handle-shape** - Corner shape of the handle. _(default: undefined)_\n- **--m3e-switch-selected-handle-color** - Handle color when selected. _(default: undefined)_\n- **--m3e-switch-unselected-handle-color** - Handle color when unselected. _(default: undefined)_\n- **--m3e-switch-state-layer-size** - Diameter of the state layer overlay. _(default: undefined)_\n- **--m3e-switch-state-layer-shape** - Corner shape of the state layer. _(default: undefined)_\n- **--m3e-switch-disabled-selected-icon-color** - Icon color when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-selected-icon-opacity** - Icon opacity when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-icon-color** - Icon color when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-icon-opacity** - Icon opacity when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-track-opacity** - Track opacity when disabled. _(default: undefined)_\n- **--m3e-switch-disabled-selected-track-color** - Track color when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-track-color** - Track color when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-track-outline-color** - Outline color when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-handle-opacity** - Handle opacity when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-selected-handle-opacity** - Handle opacity when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-selected-handle-color** - Handle color when selected and disabled. _(default: undefined)_\n- **--m3e-switch-disabled-unselected-handle-color** - Handle color when unselected and disabled. _(default: undefined)_\n- **--m3e-switch-selected-hover-icon-color** - Icon color when selected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-icon-color** - Icon color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-hover-track-color** - Track color when selected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-hover-state-layer-color** - State layer color when selected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-hover-state-layer-opacity** - State layer opacity when selected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-track-color** - Track color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-track-outline-color** - Outline color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-state-layer-color** - State layer color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-state-layer-opacity** - State layer opacity when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-hover-handle-color** - Handle color when selected and hovered. _(default: undefined)_\n- **--m3e-switch-unselected-hover-handle-color** - Handle color when unselected and hovered. _(default: undefined)_\n- **--m3e-switch-selected-focus-icon-color** - Icon color when selected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-icon-color** - Icon color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-selected-focus-track-color** - Track color when selected and focused. _(default: undefined)_\n- **--m3e-switch-selected-focus-state-layer-color** - State layer color when selected and focused. _(default: undefined)_\n- **--m3e-switch-selected-focus-state-layer-opacity** - State layer opacity when selected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-track-color** - Track color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-track-outline-color** - Outline color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-state-layer-color** - State layer color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-state-layer-opacity** - State layer opacity when unselected and focused. _(default: undefined)_\n- **--m3e-switch-selected-focus-handle-color** - Handle color when selected and focused. _(default: undefined)_\n- **--m3e-switch-unselected-focus-handle-color** - Handle color when unselected and focused. _(default: undefined)_\n- **--m3e-switch-selected-pressed-icon-color** - Icon color when selected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-icon-color** - Icon color when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-selected-pressed-track-color** - Track color when selected and pressed. _(default: undefined)_\n- **--m3e-switch-selected-pressed-state-layer-color** - State layer color when selected and pressed. _(default: undefined)_\n- **--m3e-switch-selected-pressed-state-layer-opacity** - State layer opacity when selected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-track-color** - Track color when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-track-outline-color** - Outline color when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-state-layer-color** - State layer color when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-state-layer-opacity** - State layer opacity when unselected and pressed. _(default: undefined)_\n- **--m3e-switch-selected-pressed-handle-color** - Handle color when selected and pressed. _(default: undefined)_\n- **--m3e-switch-unselected-pressed-handle-color** - Handle color when unselected and pressed. _(default: undefined)_",
|
|
2734
|
-
"attributes": [
|
|
2735
|
-
{
|
|
2736
|
-
"name": "checked",
|
|
2737
|
-
"description": "Whether the element is checked.",
|
|
2738
|
-
"values": []
|
|
2739
|
-
},
|
|
2740
|
-
{
|
|
2741
|
-
"name": "disabled",
|
|
2742
|
-
"description": "Whether the element is disabled.",
|
|
2743
|
-
"values": []
|
|
2744
|
-
},
|
|
2745
|
-
{
|
|
2746
|
-
"name": "icons",
|
|
2747
|
-
"description": "The icons to present.",
|
|
2748
|
-
"values": [{ "name": "SwitchIcons" }]
|
|
2749
|
-
},
|
|
2750
|
-
{
|
|
2751
|
-
"name": "name",
|
|
2752
|
-
"description": "The name that identifies the element when submitting the associated form.",
|
|
2753
|
-
"values": []
|
|
2754
|
-
},
|
|
2755
|
-
{
|
|
2756
|
-
"name": "value",
|
|
2757
|
-
"description": "A string representing the value of the switch.",
|
|
2758
|
-
"values": []
|
|
2759
|
-
}
|
|
2760
|
-
],
|
|
2761
|
-
"references": []
|
|
2762
|
-
},
|
|
2763
2763
|
{
|
|
2764
2764
|
"name": "m3e-tab",
|
|
2765
2765
|
"description": "An interactive element that, when activated, presents an associated tab panel.\n---\n\n\n### **Events:**\n - **beforeinput** - Dispatched before the selected state changes.\n- **input** - Dispatched when the selected state changes.\n- **change** - Dispatched when the selected state changes.\n- **click** - Dispatched when the element is clicked.\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - _default_ - Renders the label of the tab.\n- **icon** - Renders an icon before the tab's label.\n\n### **CSS Properties:**\n - **--m3e-tab-font-size** - Font size for tab label. _(default: undefined)_\n- **--m3e-tab-font-weight** - Font weight for tab label. _(default: undefined)_\n- **--m3e-tab-line-height** - Line height for tab label. _(default: undefined)_\n- **--m3e-tab-tracking** - Letter spacing for tab label. _(default: undefined)_\n- **--m3e-tab-padding-start** - Padding on the inline start of the tab. _(default: undefined)_\n- **--m3e-tab-padding-end** - Padding on the inline end of the tab. _(default: undefined)_\n- **--m3e-tab-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-tab-selected-color** - Text color for selected tab. _(default: undefined)_\n- **--m3e-tab-selected-container-hover-color** - Hover state-layer color for selected tab. _(default: undefined)_\n- **--m3e-tab-selected-container-focus-color** - Focus state-layer color for selected tab. _(default: undefined)_\n- **--m3e-tab-selected-ripple-color** - Ripple color for selected tab. _(default: undefined)_\n- **--m3e-tab-unselected-color** - Text color for unselected tab. _(default: undefined)_\n- **--m3e-tab-unselected-container-hover-color** - Hover state-layer color for unselected tab. _(default: undefined)_\n- **--m3e-tab-unselected-container-focus-color** - Focus state-layer color for unselected tab. _(default: undefined)_\n- **--m3e-tab-unselected-ripple-color** - Ripple color for unselected tab. _(default: undefined)_\n- **--m3e-tab-disabled-color** - Text color for disabled tab. _(default: undefined)_\n- **--m3e-tab-disabled-opacity** - Text opacity for disabled tab. _(default: undefined)_\n- **--m3e-tab-spacing** - Column gap between icon and label. _(default: undefined)_\n- **--m3e-tab-icon-size** - Font size for slotted icon. _(default: undefined)_",
|
|
@@ -2891,7 +2891,7 @@
|
|
|
2891
2891
|
},
|
|
2892
2892
|
{
|
|
2893
2893
|
"name": "m3e-toc",
|
|
2894
|
-
"description": "A table of contents that provides in-page scroll navigation.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - _default_ - Renders content between the header and items.\n- **overline** - Renders the overline of the table of contents.\n- **title** - Renders the title of the table of contents.\n\n### **CSS Properties:**\n - **--m3e-toc-width** - Width of the table of contents. _(default: undefined)_\n- **--m3e-toc-item-shape** - Border radius of TOC items and active indicator. _(default: undefined)_\n- **--m3e-toc-active-indicator-color** - Border color of the active indicator. _(default: undefined)_\n- **--m3e-toc-active-indicator-animation-duration** - Animation duration for the active indicator. _(default: undefined)_\n- **--m3e-toc-item-padding** - Inline padding for TOC items and header. _(default: undefined)_\n- **--m3e-toc-header-space** - Block space below and between header elements. _(default: undefined)_\n- **--m3e-toc-overline-font-size** - Font size for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-font-weight** - Font weight for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-line-height** - Line height for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-tracking** - Letter spacing for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-color** - Text color for the overline slot. _(default: undefined)_\n- **--m3e-toc-title-font-size** - Font size for the title slot. _(default: undefined)_\n- **--m3e-toc-title-font-weight** - Font weight for the title slot. _(default: undefined)_\n- **--m3e-toc-title-line-height** - Line height for the title slot. _(default: undefined)_\n- **--m3e-toc-title-tracking** - Letter spacing for the title slot. _(default: undefined)_\n- **--m3e-toc-title-color** - Text color for the title slot. _(default: undefined)_",
|
|
2894
|
+
"description": "A table of contents that provides in-page scroll navigation.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - _default_ - Renders content between the header and items.\n- **overline** - Renders the overline of the table of contents.\n- **title** - Renders the title of the table of contents.\n\n### **CSS Properties:**\n - **--m3e-toc-width** - Width of the table of contents. _(default: undefined)_\n- **--m3e-toc-container-color** - Background color of the table of contents container. _(default: undefined)_\n- **--m3e-toc-container-padding-inline** - Inline padding of the table of contents container. _(default: undefined)_\n- **--m3e-toc-container-padding-block** - Block padding of the table of contents container. _(default: undefined)_\n- **--m3e-toc-item-shape** - Border radius of TOC items and active indicator. _(default: undefined)_\n- **--m3e-toc-active-indicator-color** - Border color of the active indicator. _(default: undefined)_\n- **--m3e-toc-active-indicator-animation-duration** - Animation duration for the active indicator. _(default: undefined)_\n- **--m3e-toc-item-padding** - Inline padding for TOC items and header. _(default: undefined)_\n- **--m3e-toc-header-space** - Block space below and between header elements. _(default: undefined)_\n- **--m3e-toc-overline-font-size** - Font size for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-font-weight** - Font weight for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-line-height** - Line height for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-tracking** - Letter spacing for the overline slot. _(default: undefined)_\n- **--m3e-toc-overline-color** - Text color for the overline slot. _(default: undefined)_\n- **--m3e-toc-title-font-size** - Font size for the title slot. _(default: undefined)_\n- **--m3e-toc-title-font-weight** - Font weight for the title slot. _(default: undefined)_\n- **--m3e-toc-title-line-height** - Line height for the title slot. _(default: undefined)_\n- **--m3e-toc-title-tracking** - Letter spacing for the title slot. _(default: undefined)_\n- **--m3e-toc-title-color** - Text color for the title slot. _(default: undefined)_",
|
|
2895
2895
|
"attributes": [
|
|
2896
2896
|
{
|
|
2897
2897
|
"name": "for",
|
|
@@ -19,12 +19,12 @@ const LoadingIndicatorToken = {
|
|
|
19
19
|
|
|
20
20
|
const SHAPE_PATHS = {
|
|
21
21
|
"4-sided-cookie": "M230.389 50.473C293.109 23.2328 356.767 86.8908 329.527 149.611L325.023 159.981C316.707 179.13 316.707 200.87 325.023 220.019L329.527 230.389C356.767 293.109 293.109 356.767 230.389 329.527L220.019 325.023C200.87 316.707 179.13 316.707 159.981 325.023L149.611 329.527C86.8908 356.767 23.2328 293.109 50.473 230.389L54.9768 220.019C63.2934 200.87 63.2934 179.13 54.9768 159.981L50.473 149.611C23.2328 86.8908 86.8908 23.2328 149.611 50.473L159.981 54.9768C179.13 63.2934 200.87 63.2934 220.019 54.9768L230.389 50.473Z",
|
|
22
|
-
"
|
|
22
|
+
"9-sided-cookie": "M154.828 43.2756C156.574 41.8498 157.448 41.1369 158.245 40.535C177.03 26.3548 202.97 26.3548 221.755 40.535C222.552 41.1369 223.425 41.8498 225.172 43.2756C225.952 43.9121 226.342 44.2303 226.727 44.5333C235.567 51.4788 246.406 55.4147 257.652 55.7636C258.143 55.7788 258.647 55.785 259.654 55.7975C261.911 55.8255 263.039 55.8395 264.037 55.8898C287.563 57.0742 307.435 73.7107 312.689 96.6205C312.912 97.5928 313.121 98.6991 313.541 100.911C313.728 101.899 313.822 102.393 313.922 102.872C316.219 113.862 321.986 123.828 330.377 131.308C330.743 131.635 331.125 131.962 331.888 132.618C333.599 134.087 334.454 134.821 335.187 135.5C352.445 151.495 356.95 176.983 346.215 197.903C345.76 198.791 345.208 199.773 344.104 201.737C343.611 202.613 343.364 203.052 343.132 203.483C337.812 213.375 335.809 224.708 337.418 235.82C337.488 236.304 337.569 236.8 337.732 237.792C338.096 240.014 338.278 241.125 338.402 242.115C341.318 265.436 328.347 287.851 306.647 296.991C305.726 297.379 304.67 297.778 302.559 298.574C301.617 298.929 301.146 299.107 300.69 299.289C290.241 303.455 281.406 310.852 275.48 320.395C275.221 320.811 274.964 321.243 274.449 322.107C273.297 324.043 272.721 325.011 272.178 325.849C259.387 345.584 235.011 354.436 212.498 347.521C211.543 347.228 210.477 346.856 208.347 346.112C207.396 345.78 206.921 345.614 206.455 345.461C195.767 341.951 184.233 341.951 173.545 345.461C173.079 345.614 172.603 345.78 171.652 346.112C169.522 346.856 168.457 347.228 167.502 347.521C144.989 354.436 120.613 345.584 107.822 325.849C107.279 325.011 106.703 324.043 105.55 322.107C105.036 321.243 104.779 320.811 104.52 320.395C98.5939 310.852 89.7583 303.455 79.3096 299.289C78.8539 299.107 78.3827 298.929 77.4404 298.574C75.3294 297.778 74.274 297.379 73.3529 296.991C51.6523 287.851 38.6819 265.436 41.598 242.115C41.7218 241.125 41.9039 240.014 42.2682 237.792C42.4308 236.8 42.5121 236.304 42.5822 235.82C44.1908 224.708 42.188 213.375 36.8675 203.483C36.6354 203.052 36.389 202.613 35.8962 201.737C34.7921 199.773 34.2401 198.791 33.7845 197.903C23.0499 176.983 27.5544 151.495 44.8128 135.5C45.5454 134.821 46.4007 134.087 48.1113 132.618C48.875 131.962 49.2568 131.635 49.6228 131.308C58.0134 123.828 63.7804 113.862 66.0777 102.872C66.1779 102.393 66.2715 101.899 66.4588 100.911C66.8783 98.699 67.088 97.5928 67.311 96.6204C72.5652 73.7107 92.4369 57.0742 115.962 55.8898C116.961 55.8395 118.089 55.8255 120.346 55.7975C121.353 55.785 121.857 55.7788 122.347 55.7636C133.594 55.4147 144.432 51.4788 153.272 44.5333C153.658 44.2303 154.048 43.9121 154.828 43.2756Z",
|
|
23
23
|
oval: "M271.309 271.309C201.705 340.913 108.877 360.935 63.9707 316.029C19.0648 271.123 39.0867 178.295 108.691 108.691C178.295 39.0867 271.123 19.0648 316.029 63.9707C360.935 108.877 340.913 201.705 271.309 271.309Z",
|
|
24
24
|
pentagon: "M155.064 49.459C176.093 34.1803 204.569 34.1803 225.598 49.459L322.926 120.171C343.955 135.45 352.754 162.532 344.722 187.253L307.546 301.668C299.514 326.39 276.476 343.127 250.483 343.127H130.18C104.186 343.127 81.1489 326.39 73.1164 301.668L35.9407 187.253C27.9082 162.532 36.7077 135.45 57.737 120.171L155.064 49.459Z",
|
|
25
25
|
pill: "M116.116 71.7851C169.162 18.7383 255.168 18.7383 308.215 71.7851C361.262 124.832 361.262 210.838 308.215 263.884L263.884 308.215C210.838 361.262 124.832 361.262 71.7851 308.215C18.7383 255.168 18.7383 169.162 71.7851 116.116L116.116 71.7851Z",
|
|
26
26
|
"soft-burst": "M175.147 33.1508C181.983 22.2831 198.017 22.2831 204.853 33.1508L221.238 59.2009C225.731 66.3458 234.797 69.2506 242.692 66.0751L271.475 54.4972C283.482 49.6671 296.455 58.9613 295.507 71.7154L293.235 102.288C292.612 110.673 298.215 118.278 306.494 120.284L336.681 127.601C349.275 130.653 354.23 145.692 345.861 155.461L325.8 178.877C320.298 185.3 320.298 194.7 325.8 201.123L345.861 224.539C354.23 234.308 349.275 249.347 336.681 252.399L306.494 259.716C298.215 261.722 292.612 269.327 293.235 277.712L295.507 308.285C296.455 321.039 283.482 330.333 271.475 325.503L242.692 313.925C234.797 310.749 225.731 313.654 221.238 320.799L204.853 346.849C198.017 357.717 181.983 357.717 175.147 346.849L158.762 320.799C154.269 313.654 145.203 310.749 137.308 313.925L108.525 325.503C96.5177 330.333 83.5454 321.039 84.4931 308.285L86.7649 277.712C87.388 269.327 81.785 261.722 73.5056 259.716L43.3186 252.399C30.7252 249.347 25.7702 234.308 34.1391 224.539L54.1997 201.123C59.7018 194.7 59.7018 185.3 54.1997 178.877L34.1391 155.461C25.7702 145.692 30.7252 130.653 43.3186 127.601L73.5056 120.284C81.785 118.278 87.388 110.673 86.7649 102.288L84.4931 71.7154C83.5454 58.9613 96.5177 49.6671 108.525 54.4972L137.308 66.0751C145.203 69.2506 154.269 66.3458 158.762 59.201L175.147 33.1508Z",
|
|
27
|
-
|
|
27
|
+
sunny: "M276.453 68.8118C286.405 69.4881 291.381 69.8263 295.404 71.5853C301.223 74.1305 305.87 78.7766 308.415 84.5965C310.174 88.6186 310.512 93.5948 311.188 103.547L312.732 126.259C313.005 130.284 313.142 132.296 313.579 134.219C314.212 136.997 315.31 139.648 316.827 142.059C317.877 143.728 319.203 145.248 321.856 148.288L336.824 165.438C343.384 172.954 346.663 176.712 348.263 180.8C350.579 186.715 350.579 193.285 348.263 199.2C346.663 203.288 343.384 207.046 336.824 214.562L321.856 231.712C319.203 234.752 317.877 236.272 316.827 237.941C315.31 240.352 314.212 243.003 313.579 245.781C313.142 247.704 313.005 249.716 312.732 253.741L311.188 276.453C310.512 286.405 310.174 291.381 308.415 295.404C305.87 301.223 301.223 305.87 295.404 308.415C291.381 310.174 286.405 310.512 276.453 311.188L253.741 312.732C249.716 313.005 247.704 313.142 245.781 313.579C243.003 314.212 240.352 315.31 237.941 316.827C236.272 317.877 234.752 319.203 231.712 321.856L214.562 336.824C207.046 343.384 203.288 346.663 199.2 348.263C193.285 350.579 186.715 350.579 180.8 348.263C176.712 346.663 172.954 343.384 165.438 336.824L148.288 321.856C145.248 319.203 143.728 317.877 142.059 316.827C139.648 315.31 136.997 314.212 134.219 313.579C132.296 313.142 130.284 313.005 126.259 312.732L103.547 311.188C93.5947 310.512 88.6186 310.174 84.5965 308.415C78.7766 305.87 74.1305 301.223 71.5853 295.404C69.8263 291.381 69.4881 286.405 68.8118 276.453L67.2684 253.741C66.9949 249.716 66.8581 247.704 66.4206 245.781C65.7883 243.003 64.6903 240.352 63.173 237.941C62.123 236.272 60.7965 234.752 58.1437 231.712L43.1756 214.562C36.6164 207.046 33.3369 203.288 31.7366 199.2C29.4211 193.285 29.4211 186.715 31.7366 180.8C33.3369 176.712 36.6164 172.954 43.1756 165.438L58.1437 148.288C60.7965 145.248 62.123 143.728 63.173 142.059C64.6903 139.648 65.7883 136.997 66.4206 134.219C66.8581 132.296 66.9949 130.284 67.2684 126.259L68.8118 103.547C69.4881 93.5948 69.8263 88.6186 71.5853 84.5965C74.1305 78.7766 78.7766 74.1305 84.5965 71.5853C88.6186 69.8263 93.5948 69.4881 103.547 68.8118L126.259 67.2684C130.284 66.9949 132.296 66.8581 134.219 66.4206C136.997 65.7883 139.648 64.6903 142.059 63.173C143.728 62.123 145.248 60.7966 148.288 58.1437L165.438 43.1756C172.954 36.6164 176.712 33.3369 180.8 31.7366C186.715 29.4211 193.285 29.4211 199.2 31.7366C203.288 33.3369 207.046 36.6164 214.562 43.1756L231.712 58.1437C234.752 60.7966 236.272 62.123 237.941 63.173C240.352 64.6903 243.003 65.7883 245.781 66.4206C247.704 66.8581 249.716 66.9949 253.741 67.2684L276.453 68.8118Z"
|
|
28
28
|
};
|
|
29
29
|
let shapes = new Array();
|
|
30
30
|
const indexMap = new Map();
|
|
@@ -88,26 +88,26 @@ let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends Reconn
|
|
|
88
88
|
/** @inheritdoc */
|
|
89
89
|
disconnectedCallback() {
|
|
90
90
|
super.disconnectedCallback();
|
|
91
|
-
this.
|
|
91
|
+
this._container?.classList.toggle("animate", false);
|
|
92
92
|
}
|
|
93
93
|
/** @inheritdoc */
|
|
94
94
|
reconnectedCallback() {
|
|
95
95
|
super.reconnectedCallback();
|
|
96
|
-
this.
|
|
96
|
+
this._container?.classList.toggle("animate", true);
|
|
97
97
|
}
|
|
98
98
|
/** @inheritdoc */
|
|
99
99
|
firstUpdated(_changedProperties) {
|
|
100
100
|
super.firstUpdated(_changedProperties);
|
|
101
|
-
this.
|
|
101
|
+
this._container?.classList.toggle("animate", true);
|
|
102
102
|
}
|
|
103
103
|
/** @inheritdoc */
|
|
104
104
|
render() {
|
|
105
|
-
return html`<div class="container" aria-hidden="true"><div class="active-indicator"></div></div>`;
|
|
105
|
+
return html`<div class="container" aria-hidden="true"><div class="active-indicator-wrapper"><div class="active-indicator"></div></div></div>`;
|
|
106
106
|
}
|
|
107
107
|
};
|
|
108
108
|
/** The styles of the element. */
|
|
109
|
-
M3eLoadingIndicatorElement.styles = css`:host { display: inline-block; aspect-ratio: 1 / 1; contain: strict; vertical-align: middle; content-visibility: auto; } :host([variant="uncontained"]) { width: ${LoadingIndicatorToken.activeIndicatorSize}; } :host([variant="contained"]) { width: ${LoadingIndicatorToken.containerSize}; } :host([variant="uncontained"]) .active-indicator { background-color: ${LoadingIndicatorToken.activeIndicatorColor}; } :host([variant="contained"]) .active-indicator { background-color: ${LoadingIndicatorToken.containedActiveIndicatorColor}; } :host([variant="contained"]) .container { background-color: ${LoadingIndicatorToken.containedContainerColor}; } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: ${LoadingIndicatorToken.containerShape}; } .active-indicator { margin: auto; aspect-ratio: 1 / 1; width: calc(${LoadingIndicatorToken.activeIndicatorSize} * 0.842); transform-origin: center; transition: clip-path ${DesignToken.motion.spring.slowEffects}; will-change: transform, clip-path; --_polygon-soft-burst: polygon(${ShapePolygon["soft-burst"]}); --_polygon-
|
|
110
|
-
__decorate([query(".
|
|
109
|
+
M3eLoadingIndicatorElement.styles = css`:host { display: inline-block; aspect-ratio: 1 / 1; contain: strict; vertical-align: middle; content-visibility: auto; } :host([variant="uncontained"]) { width: ${LoadingIndicatorToken.activeIndicatorSize}; } :host([variant="contained"]) { width: ${LoadingIndicatorToken.containerSize}; } :host([variant="uncontained"]) .active-indicator { background-color: ${LoadingIndicatorToken.activeIndicatorColor}; } :host([variant="contained"]) .active-indicator { background-color: ${LoadingIndicatorToken.containedActiveIndicatorColor}; } :host([variant="contained"]) .container { background-color: ${LoadingIndicatorToken.containedContainerColor}; } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: ${LoadingIndicatorToken.containerShape}; } .active-indicator { margin: auto; aspect-ratio: 1 / 1; width: calc(${LoadingIndicatorToken.activeIndicatorSize} * 0.842); transform-origin: center; transition: clip-path ${DesignToken.motion.spring.slowEffects}; will-change: transform, clip-path; --_polygon-soft-burst: polygon(${ShapePolygon["soft-burst"]}); --_polygon-9-sided-cookie: polygon(${ShapePolygon["9-sided-cookie"]}); --_polygon-pentagon: polygon(${ShapePolygon["pentagon"]}); --_polygon-pill: polygon(${ShapePolygon["pill"]}); --_polygon-sunny: polygon(${ShapePolygon["sunny"]}); --_polygon-4-sided-cookie: polygon(${ShapePolygon["4-sided-cookie"]}); --_polygon-oval: polygon(${ShapePolygon["oval"]}); } .container.animate .active-indicator-wrapper { animation: rotate-outer 4666ms linear infinite; transform-origin: center; display: flex; align-items: center; justify-content: center; will-change: transform; } @keyframes rotate-outer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .container.animate .active-indicator { animation: rotate-inner 4666ms cubic-bezier(0.34, 0.88, 0.34, 1) infinite; } @keyframes rotate-inner { 0% { clip-path: var(--_polygon-soft-burst); transform: rotate(0deg); } 14% { clip-path: var(--_polygon-9-sided-cookie); transform: rotate(154deg) scale(1); } 29% { clip-path: var(--_polygon-pentagon); transform: rotate(309deg) scale(1); } 43% { clip-path: var(--_polygon-pill); transform: rotate(463deg) scale(1); } 57% { clip-path: var(--_polygon-sunny); transform: rotate(617deg) scale(1); } 71% { clip-path: var(--_polygon-4-sided-cookie); transform: rotate(771deg) scale(1); } 83% { clip-path: var(--_polygon-oval); transform: rotate(926deg) scale(1); } 100% { clip-path: var(--_polygon-soft-burst); transform: rotate(1080deg) scale(1); } } @media (forced-colors: active) { .active-indicator { background-color: CanvasText !important; } }`;
|
|
110
|
+
__decorate([query(".container")], M3eLoadingIndicatorElement.prototype, "_container", void 0);
|
|
111
111
|
__decorate([property({
|
|
112
112
|
reflect: true
|
|
113
113
|
})], M3eLoadingIndicatorElement.prototype, "variant", void 0);
|