@m3e/web 2.0.0 → 2.0.2

package/dist/custom-elements.json

@@ -1657,424 +1657,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/avatar/AvatarElement.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An image, icon or textual initials representing a user or other identity.",
-          "name": "M3eAvatarElement",
-          "cssProperties": [
-            {
-              "description": "Size of the avatar.",
-              "name": "--m3e-avatar-size"
-            },
-            {
-              "description": "Border radius of the avatar.",
-              "name": "--m3e-avatar-shape"
-            },
-            {
-              "description": "Font size for the avatar.",
-              "name": "--m3e-avatar-font-size"
-            },
-            {
-              "description": "Font weight for the avatar.",
-              "name": "--m3e-avatar-font-weight"
-            },
-            {
-              "description": "Line height for the avatar.",
-              "name": "--m3e-avatar-line-height"
-            },
-            {
-              "description": "Letter spacing for the avatar.",
-              "name": "--m3e-avatar-tracking"
-            },
-            {
-              "description": "Background color of the avatar.",
-              "name": "--m3e-avatar-color"
-            },
-            {
-              "description": "Text color of the avatar.",
-              "name": "--m3e-avatar-label-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Renders the content of the avatar.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "m3e-avatar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "M3eAvatarElement",
-          "declaration": {
-            "name": "M3eAvatarElement",
-            "module": "src/avatar/AvatarElement.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "m3e-avatar",
-          "declaration": {
-            "name": "M3eAvatarElement",
-            "module": "src/avatar/AvatarElement.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/avatar/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./AvatarElement\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/BadgeElement.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A visual indicator used to label content.",
-          "name": "M3eBadgeElement",
-          "cssProperties": [
-            {
-              "description": "Corner radius of the badge.",
-              "name": "--m3e-badge-shape"
-            },
-            {
-              "description": "Foreground color of badge content.",
-              "name": "--m3e-badge-color"
-            },
-            {
-              "description": "Background color of the badge.",
-              "name": "--m3e-badge-container-color"
-            },
-            {
-              "description": "Fixed dimensions for small badge. Used for minimal indicators (e.g. dot).",
-              "name": "--m3e-badge-small-size"
-            },
-            {
-              "description": "Height and min-width for medium badge.",
-              "name": "--m3e-badge-medium-size"
-            },
-            {
-              "description": "Font size for medium badge label.",
-              "name": "--m3e-badge-medium-font-size"
-            },
-            {
-              "description": "Font weight for medium badge label.",
-              "name": "--m3e-badge-medium-font-weight"
-            },
-            {
-              "description": "Line height for medium badge label.",
-              "name": "--m3e-badge-medium-line-height"
-            },
-            {
-              "description": "Letter spacing for medium badge label.",
-              "name": "--m3e-badge-medium-tracking"
-            },
-            {
-              "description": "Height and min-width for large badge.",
-              "name": "--m3e-badge-large-size"
-            },
-            {
-              "description": "Font size for large badge label.",
-              "name": "--m3e-badge-large-font-size"
-            },
-            {
-              "description": "Font weight for large badge label.",
-              "name": "--m3e-badge-large-font-weight"
-            },
-            {
-              "description": "Line height for large badge label.",
-              "name": "--m3e-badge-large-line-height"
-            },
-            {
-              "description": "Letter spacing for large badge label.",
-              "name": "--m3e-badge-large-tracking"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Renders the content of the badge.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "#directionalitySubscription",
-              "privacy": "private",
-              "type": {
-                "text": "() => void | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#anchorCleanup",
-              "privacy": "private",
-              "type": {
-                "text": "() => void | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "BadgeSize"
-              },
-              "default": "\"medium\"",
-              "description": "The size of the badge.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "position",
-              "type": {
-                "text": "BadgePosition"
-              },
-              "default": "\"above-after\"",
-              "description": "The position of the badge, when attached to another element.",
-              "attribute": "position",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "attach",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "control",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "description": "Attaches the element to an interactive control.",
-              "inheritedFrom": {
-                "name": "HtmlFor",
-                "module": "src/core/shared/mixins/HtmlFor.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "detach",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Detaches the element from its current interactive control.",
-              "inheritedFrom": {
-                "name": "HtmlFor",
-                "module": "src/core/shared/mixins/HtmlFor.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#detach",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#attach",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "[_control]",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "HtmlFor",
-                "module": "src/core/shared/mixins/HtmlFor.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "[_firstUpdated]",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "HtmlFor",
-                "module": "src/core/shared/mixins/HtmlFor.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "htmlFor",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The identifier of the interactive control to which this element is attached.",
-              "attribute": "for",
-              "inheritedFrom": {
-                "name": "HtmlFor",
-                "module": "src/core/shared/mixins/HtmlFor.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "control",
-              "description": "The interactive element to which this element is attached.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "HtmlFor",
-                "module": "src/core/shared/mixins/HtmlFor.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "description": "The size of the badge.",
-              "name": "size",
-              "type": {
-                "text": "BadgeSize"
-              },
-              "default": "\"medium\"",
-              "fieldName": "size"
-            },
-            {
-              "name": "position",
-              "type": {
-                "text": "BadgePosition"
-              },
-              "default": "\"above-after\"",
-              "description": "The position of the badge, when attached to another element.",
-              "fieldName": "position"
-            },
-            {
-              "name": "for",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The identifier of the interactive control to which this element is attached.",
-              "fieldName": "htmlFor",
-              "inheritedFrom": {
-                "name": "HtmlFor",
-                "module": "src/core/shared/mixins/HtmlFor.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "HtmlFor",
-              "package": "@m3e/web/core"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "m3e-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "M3eBadgeElement",
-          "declaration": {
-            "name": "M3eBadgeElement",
-            "module": "src/badge/BadgeElement.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "m3e-badge",
-          "declaration": {
-            "name": "M3eBadgeElement",
-            "module": "src/badge/BadgeElement.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/BadgePosition.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/BadgeSize.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./BadgeElement\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./BadgePosition\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./BadgeSize\""
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/bottom-sheet/BottomSheetActionElement.ts",
@@ -3288,145 +2870,245 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/button-group/ButtonGroupElement.ts",
+      "path": "src/avatar/AvatarElement.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Organizes buttons and adds interactions between them.",
-          "name": "M3eButtonGroupElement",
+          "description": "An image, icon or textual initials representing a user or other identity.",
+          "name": "M3eAvatarElement",
           "cssProperties": [
             {
-              "description": "Spacing between buttons in standard variant, extra-small size.",
-              "name": "--m3e-standard-button-group-extra-small-spacing"
+              "description": "Size of the avatar.",
+              "name": "--m3e-avatar-size"
             },
             {
-              "description": "Spacing between buttons in standard variant, small size.",
-              "name": "--m3e-standard-button-group-small-spacing"
+              "description": "Border radius of the avatar.",
+              "name": "--m3e-avatar-shape"
             },
             {
-              "description": "Spacing between buttons in standard variant, medium size.",
-              "name": "--m3e-standard-button-group-medium-spacing"
+              "description": "Font size for the avatar.",
+              "name": "--m3e-avatar-font-size"
             },
             {
-              "description": "Spacing between buttons in standard variant, large size.",
-              "name": "--m3e-standard-button-group-large-spacing"
+              "description": "Font weight for the avatar.",
+              "name": "--m3e-avatar-font-weight"
             },
             {
-              "description": "Spacing between buttons in standard variant, extra-large size.",
-              "name": "--m3e-standard-button-group-extra-large-spacing"
+              "description": "Line height for the avatar.",
+              "name": "--m3e-avatar-line-height"
             },
             {
-              "description": "Spacing between buttons in connected variant.",
-              "name": "--m3e-connected-button-group-spacing"
+              "description": "Letter spacing for the avatar.",
+              "name": "--m3e-avatar-tracking"
             },
             {
-              "description": "Corner shape for connected variant, extra-small size.",
-              "name": "--m3e-connected-button-group-extra-small-inner-shape"
+              "description": "Background color of the avatar.",
+              "name": "--m3e-avatar-color"
             },
             {
-              "description": "Pressed corner shape for connected variant, extra-small size.",
-              "name": "--m3e-connected-button-group-extra-small-inner-pressed-shape"
+              "description": "Text color of the avatar.",
+              "name": "--m3e-avatar-label-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the content of the avatar.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eAvatarElement",
+          "declaration": {
+            "name": "M3eAvatarElement",
+            "module": "src/avatar/AvatarElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-avatar",
+          "declaration": {
+            "name": "M3eAvatarElement",
+            "module": "src/avatar/AvatarElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/avatar/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./AvatarElement\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/badge/BadgeElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A visual indicator used to label content.",
+          "name": "M3eBadgeElement",
+          "cssProperties": [
+            {
+              "description": "Corner radius of the badge.",
+              "name": "--m3e-badge-shape"
             },
             {
-              "description": "Corner shape for connected variant, small size.",
-              "name": "--m3e-connected-button-group-small-inner-shape"
+              "description": "Foreground color of badge content.",
+              "name": "--m3e-badge-color"
             },
             {
-              "description": "Pressed corner shape for connected variant, small size.",
-              "name": "--m3e-connected-button-group-small-inner-pressed-shape"
+              "description": "Background color of the badge.",
+              "name": "--m3e-badge-container-color"
             },
             {
-              "description": "Corner shape for connected variant, medium size.",
-              "name": "--m3e-connected-button-group-medium-inner-shape"
+              "description": "Fixed dimensions for small badge. Used for minimal indicators (e.g. dot).",
+              "name": "--m3e-badge-small-size"
             },
             {
-              "description": "Pressed corner shape for connected variant, medium size.",
-              "name": "--m3e-connected-button-group-medium-inner-pressed-shape"
+              "description": "Height and min-width for medium badge.",
+              "name": "--m3e-badge-medium-size"
             },
             {
-              "description": "Corner shape for connected variant, large size.",
-              "name": "--m3e-connected-button-group-large-inner-shape"
+              "description": "Font size for medium badge label.",
+              "name": "--m3e-badge-medium-font-size"
             },
             {
-              "description": "Pressed corner shape for connected variant, large size.",
-              "name": "--m3e-connected-button-group-large-inner-pressed-shape"
+              "description": "Font weight for medium badge label.",
+              "name": "--m3e-badge-medium-font-weight"
             },
             {
-              "description": "Corner shape for connected variant, extra-large size.",
-              "name": "--m3e-connected-button-group-extra-large-inner-shape"
+              "description": "Line height for medium badge label.",
+              "name": "--m3e-badge-medium-line-height"
             },
             {
-              "description": "Pressed corner shape for connected variant, extra-large size.",
-              "name": "--m3e-connected-button-group-extra-large-inner-pressed-shape"
+              "description": "Letter spacing for medium badge label.",
+              "name": "--m3e-badge-medium-tracking"
+            },
+            {
+              "description": "Height and min-width for large badge.",
+              "name": "--m3e-badge-large-size"
+            },
+            {
+              "description": "Font size for large badge label.",
+              "name": "--m3e-badge-large-font-size"
+            },
+            {
+              "description": "Font weight for large badge label.",
+              "name": "--m3e-badge-large-font-weight"
+            },
+            {
+              "description": "Line height for large badge label.",
+              "name": "--m3e-badge-large-line-height"
+            },
+            {
+              "description": "Letter spacing for large badge label.",
+              "name": "--m3e-badge-large-tracking"
             }
           ],
           "slots": [
             {
-              "description": "Renders the buttons of the group.",
+              "description": "Renders the content of the badge.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "#pressedController",
+              "name": "#directionalitySubscription",
               "privacy": "private",
-              "readonly": true,
-              "default": "new PressedController(this, { target: null, capture: true, minPressedDuration: 150, isPressedKey: (key) => key === \" \", callback: (pressed) => { if (!this._base) return; if (!pressed || this.variant === \"connected\") { this._base.style.removeProperty(\"--_button-group-width\"); this._base.classList.remove(\"pressed\"); } else { this._base.classList.add(\"pressed\"); this._base.style.setProperty(\"--_button-group-width\", `${this._base.getBoundingClientRect().width}px`); } }, })"
+              "type": {
+                "text": "() => void | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "_base",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
+              "name": "#anchorCleanup",
               "privacy": "private",
-              "readonly": true
+              "type": {
+                "text": "() => void | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "ButtonGroupVariant"
+                "text": "BadgeSize"
               },
-              "default": "\"standard\"",
-              "description": "The appearance variant of the group.",
-              "attribute": "variant",
+              "default": "\"medium\"",
+              "description": "The size of the badge.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "position",
               "type": {
-                "text": "ButtonGroupSize"
+                "text": "BadgePosition"
               },
-              "default": "\"small\"",
-              "description": "The size of the group.",
-              "attribute": "size",
+              "default": "\"above-after\"",
+              "description": "The position of the badge, when attached to another element.",
+              "attribute": "position",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "multi",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "attach",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "false",
-              "description": "Whether multiple toggle buttons can be selected.",
-              "attribute": "multi"
+              "parameters": [
+                {
+                  "name": "control",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Attaches the element to an interactive control.",
+              "inheritedFrom": {
+                "name": "HtmlFor",
+                "module": "src/core/shared/mixins/HtmlFor.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "buttons",
-              "type": {
-                "text": "ReadonlyArray<M3eButtonElement | M3eIconButtonElement>"
+              "kind": "method",
+              "name": "detach",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "readonly": true,
-              "description": "The buttons contained by the group."
+              "description": "Detaches the element from its current interactive control.",
+              "inheritedFrom": {
+                "name": "HtmlFor",
+                "module": "src/core/shared/mixins/HtmlFor.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "#updateButtons",
+              "name": "#detach",
               "privacy": "private",
               "return": {
                 "type": {
@@ -3436,55 +3118,101 @@
             },
             {
               "kind": "method",
-              "name": "#handleChange",
+              "name": "#attach",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "[_control]",
+              "type": {
+                "text": "HTMLElement | null"
               },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "HtmlFor",
+                "module": "src/core/shared/mixins/HtmlFor.ts"
+              }
+            },
             {
-              "description": "Whether multiple toggle buttons can be selected.",
-              "name": "multi",
+              "kind": "field",
+              "name": "[_firstUpdated]",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false",
-              "fieldName": "multi"
+              "inheritedFrom": {
+                "name": "HtmlFor",
+                "module": "src/core/shared/mixins/HtmlFor.ts"
+              }
             },
             {
-              "description": "The size of the group.",
+              "kind": "field",
+              "name": "htmlFor",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The identifier of the interactive control to which this element is attached.",
+              "attribute": "for",
+              "inheritedFrom": {
+                "name": "HtmlFor",
+                "module": "src/core/shared/mixins/HtmlFor.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "control",
+              "description": "The interactive element to which this element is attached.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HtmlFor",
+                "module": "src/core/shared/mixins/HtmlFor.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "description": "The size of the badge.",
               "name": "size",
               "type": {
-                "text": "ButtonGroupSize"
+                "text": "BadgeSize"
               },
-              "default": "\"small\"",
+              "default": "\"medium\"",
               "fieldName": "size"
             },
             {
-              "description": "The appearance variant of the group.",
-              "name": "variant",
+              "name": "position",
               "type": {
-                "text": "ButtonGroupVariant"
+                "text": "BadgePosition"
               },
-              "default": "\"standard\"",
-              "fieldName": "variant"
+              "default": "\"above-after\"",
+              "description": "The position of the badge, when attached to another element.",
+              "fieldName": "position"
+            },
+            {
+              "name": "for",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The identifier of the interactive control to which this element is attached.",
+              "fieldName": "htmlFor",
+              "inheritedFrom": {
+                "name": "HtmlFor",
+                "module": "src/core/shared/mixins/HtmlFor.ts"
+              }
             }
           ],
           "mixins": [
             {
-              "name": "Role",
+              "name": "HtmlFor",
               "package": "@m3e/web/core"
             }
           ],
@@ -3492,44 +3220,44 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "m3e-button-group",
+          "tagName": "m3e-badge",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "M3eButtonGroupElement",
+          "name": "M3eBadgeElement",
           "declaration": {
-            "name": "M3eButtonGroupElement",
-            "module": "src/button-group/ButtonGroupElement.ts"
+            "name": "M3eBadgeElement",
+            "module": "src/badge/BadgeElement.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "m3e-button-group",
+          "name": "m3e-badge",
           "declaration": {
-            "name": "M3eButtonGroupElement",
-            "module": "src/button-group/ButtonGroupElement.ts"
+            "name": "M3eBadgeElement",
+            "module": "src/badge/BadgeElement.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/button-group/ButtonGroupSize.ts",
+      "path": "src/badge/BadgePosition.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/button-group/ButtonGroupVariant.ts",
+      "path": "src/badge/BadgeSize.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/button-group/index.ts",
+      "path": "src/badge/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -3537,7 +3265,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./ButtonGroupElement\""
+            "package": "\"./BadgeElement\""
           }
         },
         {
@@ -3545,7 +3273,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./ButtonGroupSize\""
+            "package": "\"./BadgePosition\""
           }
         },
         {
@@ -3553,7 +3281,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./ButtonGroupVariant\""
+            "package": "\"./BadgeSize\""
           }
         }
       ]
@@ -3567,6 +3295,66 @@
           "description": "A button users interact with to perform an action.",
           "name": "M3eButtonElement",
           "cssProperties": [
+            {
+              "description": "Height of the button container, for all size variants.",
+              "name": "--m3e-button-container-height"
+            },
+            {
+              "description": "Thickness of the button outline, for all size variants.",
+              "name": "--m3e-button-outline-thickness"
+            },
+            {
+              "description": "Font size for the label text, for all size variants.",
+              "name": "--m3e-button-label-text-font-size"
+            },
+            {
+              "description": "Font weight for the label text, for all size variants.",
+              "name": "--m3e-button-label-text-font-weight"
+            },
+            {
+              "description": "Line height for the label text, for all size variants.",
+              "name": "--m3e-button-label-text-line-height"
+            },
+            {
+              "description": "Letter tracking for the label text, for all size variants.",
+              "name": "--m3e-button-label-text-tracking"
+            },
+            {
+              "description": "Size of the icon, for all size variants.",
+              "name": "--m3e-button-icon-size"
+            },
+            {
+              "description": "Corner radius for round shape, for all size variants.",
+              "name": "--m3e-button-shape-round"
+            },
+            {
+              "description": "Corner radius for square shape, for all size variants.",
+              "name": "--m3e-button-shape-square"
+            },
+            {
+              "description": "Corner radius when selected (round), for all size variants.",
+              "name": "--m3e-button-selected-shape-round"
+            },
+            {
+              "description": "Corner radius when selected (square), for all size variants.",
+              "name": "--m3e-button-selected-shape-square"
+            },
+            {
+              "description": "Corner radius when pressed, for all size variants.",
+              "name": "--m3e-button-shape-pressed-morph"
+            },
+            {
+              "description": "Space before icon or label, for all size variants.",
+              "name": "--m3e-button-leading-space"
+            },
+            {
+              "description": "Space after icon or label, for all size variants.",
+              "name": "--m3e-button-trailing-space"
+            },
+            {
+              "description": "Space between icon and label, for all size variants.",
+              "name": "--m3e-button-icon-label-space"
+            },
             {
               "description": "Height of the button container, for the extra-small size variant.",
               "name": "--m3e-button-extra-small-container-height"
@@ -3867,6 +3655,226 @@
               "description": "Space between icon and label, for the extra-large size variant.",
               "name": "--m3e-button-extra-large-icon-label-space"
             },
+            {
+              "description": "Outline color, for all variants.",
+              "name": "--m3e-button-outline-color"
+            },
+            {
+              "description": "Disabled outline color, for all variants.",
+              "name": "--m3e-button-disabled-outline-color"
+            },
+            {
+              "description": "Hover outline color, for all variants.",
+              "name": "--m3e-button-hover-outline-color"
+            },
+            {
+              "description": "Focus outline color, for all variants.",
+              "name": "--m3e-button-focus-outline-color"
+            },
+            {
+              "description": "Pressed outline color, for all variants.",
+              "name": "--m3e-button-pressed-outline-color"
+            },
+            {
+              "description": "Container background color, for all variants.",
+              "name": "--m3e-button-container-color"
+            },
+            {
+              "description": "Elevation, for all variants.",
+              "name": "--m3e-button-container-elevation"
+            },
+            {
+              "description": "Unselected container color, for all variants.",
+              "name": "--m3e-button-unselected-container-color"
+            },
+            {
+              "description": "Selected container color, for all variants.",
+              "name": "--m3e-button-selected-container-color"
+            },
+            {
+              "description": "Disabled elevation, for all variants.",
+              "name": "--m3e-button-disabled-container-elevation"
+            },
+            {
+              "description": "Hover elevation, for all variants.",
+              "name": "--m3e-button-hover-container-elevation"
+            },
+            {
+              "description": "Focus elevation, for all variants.",
+              "name": "--m3e-button-focus-container-elevation"
+            },
+            {
+              "description": "Pressed elevation, for all variants.",
+              "name": "--m3e-button-pressed-container-elevation"
+            },
+            {
+              "description": "Label color, for all variants.",
+              "name": "--m3e-button-label-text-color"
+            },
+            {
+              "description": "Icon color, for all variants.",
+              "name": "--m3e-button-icon-color"
+            },
+            {
+              "description": "Unselected label color, for all variants.",
+              "name": "--m3e-button-unselected-label-text-color"
+            },
+            {
+              "description": "Unselected icon color, for all variants.",
+              "name": "--m3e-button-unselected-icon-color"
+            },
+            {
+              "description": "Selected label color, for all variants.",
+              "name": "--m3e-button-selected-label-text-color"
+            },
+            {
+              "description": "Selected icon color, for all variants.",
+              "name": "--m3e-button-selected-icon-color"
+            },
+            {
+              "description": "Disabled container color, for all variants.",
+              "name": "--m3e-button-disabled-container-color"
+            },
+            {
+              "description": "Disabled container opacity, for all variants.",
+              "name": "--m3e-button-disabled-container-opacity"
+            },
+            {
+              "description": "Disabled icon color, for all variants.",
+              "name": "--m3e-button-disabled-icon-color"
+            },
+            {
+              "description": "Disabled icon opacity, for all variants.",
+              "name": "--m3e-button-disabled-icon-opacity"
+            },
+            {
+              "description": "Disabled label color, for all variants.",
+              "name": "--m3e-button-disabled-label-text-color"
+            },
+            {
+              "description": "Disabled label opacity, for all variants.",
+              "name": "--m3e-button-disabled-label-text-opacity"
+            },
+            {
+              "description": "Hover icon color, for all variants.",
+              "name": "--m3e-button-hover-icon-color"
+            },
+            {
+              "description": "Hover label color, for all variants.",
+              "name": "--m3e-button-hover-label-text-color"
+            },
+            {
+              "description": "Hover state layer color, for all variants.",
+              "name": "--m3e-button-hover-state-layer-color"
+            },
+            {
+              "description": "Hover state layer opacity, for all variants.",
+              "name": "--m3e-button-hover-state-layer-opacity"
+            },
+            {
+              "description": "Hover unselected icon color, for all variants.",
+              "name": "--m3e-button-hover-unselected-icon-color"
+            },
+            {
+              "description": "Hover unselected label color, for all variants.",
+              "name": "--m3e-button-hover-unselected-label-text-color"
+            },
+            {
+              "description": "Hover unselected state layer color, for all variants.",
+              "name": "--m3e-button-hover-unselected-state-layer-color"
+            },
+            {
+              "description": "Hover selected icon color, for all variants.",
+              "name": "--m3e-button-hover-selected-icon-color"
+            },
+            {
+              "description": "Hover selected label color, for all variants.",
+              "name": "--m3e-button-hover-selected-label-text-color"
+            },
+            {
+              "description": "Hover selected state layer color, for all variants.",
+              "name": "--m3e-button-hover-selected-state-layer-color"
+            },
+            {
+              "description": "Focus icon color, for all variants.",
+              "name": "--m3e-button-focus-icon-color"
+            },
+            {
+              "description": "Focus label color, for all variants.",
+              "name": "--m3e-button-focus-label-text-color"
+            },
+            {
+              "description": "Focus state layer color, for all variants.",
+              "name": "--m3e-button-focus-state-layer-color"
+            },
+            {
+              "description": "Focus state layer opacity, for all variants.",
+              "name": "--m3e-button-focus-state-layer-opacity"
+            },
+            {
+              "description": "Focus unselected icon color, for all variants.",
+              "name": "--m3e-button-focus-unselected-icon-color"
+            },
+            {
+              "description": "Focus unselected label color, for all variants.",
+              "name": "--m3e-button-focus-unselected-label-text-color"
+            },
+            {
+              "description": "Focus unselected state layer color, for all variants.",
+              "name": "--m3e-button-focus-unselected-state-layer-color"
+            },
+            {
+              "description": "Focus selected icon color, for all variants.",
+              "name": "--m3e-button-focus-selected-icon-color"
+            },
+            {
+              "description": "Focus selected label color, for all variants.",
+              "name": "--m3e-button-focus-selected-label-text-color"
+            },
+            {
+              "description": "Focus selected state layer color, for all variants.",
+              "name": "--m3e-button-focus-selected-state-layer-color"
+            },
+            {
+              "description": "Pressed icon color, for all variants.",
+              "name": "--m3e-button-pressed-icon-color"
+            },
+            {
+              "description": "Pressed label color, for all variants.",
+              "name": "--m3e-button-pressed-label-text-color"
+            },
+            {
+              "description": "Pressed state layer color, for all variants.",
+              "name": "--m3e-button-pressed-state-layer-color"
+            },
+            {
+              "description": "Pressed state layer opacity, for all variants.",
+              "name": "--m3e-button-pressed-state-layer-opacity"
+            },
+            {
+              "description": "Pressed unselected icon color, for all variants.",
+              "name": "--m3e-button-pressed-unselected-icon-color"
+            },
+            {
+              "description": "Pressed unselected label color, for all variants.",
+              "name": "--m3e-button-pressed-unselected-label-text-color"
+            },
+            {
+              "description": "Pressed unselected state layer color, for all variants.",
+              "name": "--m3e-button-pressed-unselected-state-layer-color"
+            },
+            {
+              "description": "Pressed selected icon color, for all variants.",
+              "name": "--m3e-button-pressed-selected-icon-color"
+            },
+            {
+              "description": "Pressed selected label color, for all variants.",
+              "name": "--m3e-button-pressed-selected-label-text-color"
+            },
+            {
+              "description": "Pressed selected state layer color, for all variants.",
+              "name": "--m3e-button-pressed-selected-state-layer-color"
+            },
             {
               "description": "Label color, for the elevated variant.",
               "name": "--m3e-elevated-button-label-text-color"
@@ -5676,6 +5684,278 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/button-group/ButtonGroupElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Organizes buttons and adds interactions between them.",
+          "name": "M3eButtonGroupElement",
+          "cssProperties": [
+            {
+              "description": "Spacing between buttons in standard variant, extra-small size.",
+              "name": "--m3e-standard-button-group-extra-small-spacing"
+            },
+            {
+              "description": "Spacing between buttons in standard variant, small size.",
+              "name": "--m3e-standard-button-group-small-spacing"
+            },
+            {
+              "description": "Spacing between buttons in standard variant, medium size.",
+              "name": "--m3e-standard-button-group-medium-spacing"
+            },
+            {
+              "description": "Spacing between buttons in standard variant, large size.",
+              "name": "--m3e-standard-button-group-large-spacing"
+            },
+            {
+              "description": "Spacing between buttons in standard variant, extra-large size.",
+              "name": "--m3e-standard-button-group-extra-large-spacing"
+            },
+            {
+              "description": "Spacing between buttons in connected variant.",
+              "name": "--m3e-connected-button-group-spacing"
+            },
+            {
+              "description": "Corner shape for connected variant, extra-small size.",
+              "name": "--m3e-connected-button-group-extra-small-inner-shape"
+            },
+            {
+              "description": "Pressed corner shape for connected variant, extra-small size.",
+              "name": "--m3e-connected-button-group-extra-small-inner-pressed-shape"
+            },
+            {
+              "description": "Corner shape for connected variant, small size.",
+              "name": "--m3e-connected-button-group-small-inner-shape"
+            },
+            {
+              "description": "Pressed corner shape for connected variant, small size.",
+              "name": "--m3e-connected-button-group-small-inner-pressed-shape"
+            },
+            {
+              "description": "Corner shape for connected variant, medium size.",
+              "name": "--m3e-connected-button-group-medium-inner-shape"
+            },
+            {
+              "description": "Pressed corner shape for connected variant, medium size.",
+              "name": "--m3e-connected-button-group-medium-inner-pressed-shape"
+            },
+            {
+              "description": "Corner shape for connected variant, large size.",
+              "name": "--m3e-connected-button-group-large-inner-shape"
+            },
+            {
+              "description": "Pressed corner shape for connected variant, large size.",
+              "name": "--m3e-connected-button-group-large-inner-pressed-shape"
+            },
+            {
+              "description": "Corner shape for connected variant, extra-large size.",
+              "name": "--m3e-connected-button-group-extra-large-inner-shape"
+            },
+            {
+              "description": "Pressed corner shape for connected variant, extra-large size.",
+              "name": "--m3e-connected-button-group-extra-large-inner-pressed-shape"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the buttons of the group.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#pressedController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PressedController(this, { target: null, capture: true, minPressedDuration: 150, isPressedKey: (key) => key === \" \", callback: (pressed) => { if (!this._base) return; if (!pressed || this.variant === \"connected\") { this._base.style.removeProperty(\"--_button-group-width\"); this._base.classList.remove(\"pressed\"); } else { this._base.classList.add(\"pressed\"); this._base.style.setProperty(\"--_button-group-width\", `${this._base.getBoundingClientRect().width}px`); } }, })"
+            },
+            {
+              "kind": "field",
+              "name": "_base",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "default": "\"standard\"",
+              "description": "The appearance variant of the group.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "default": "\"small\"",
+              "description": "The size of the group.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "multi",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether multiple toggle buttons can be selected.",
+              "attribute": "multi"
+            },
+            {
+              "kind": "field",
+              "name": "buttons",
+              "type": {
+                "text": "ReadonlyArray<M3eButtonElement | M3eIconButtonElement>"
+              },
+              "readonly": true,
+              "description": "The buttons contained by the group."
+            },
+            {
+              "kind": "method",
+              "name": "#updateButtons",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Whether multiple toggle buttons can be selected.",
+              "name": "multi",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "multi"
+            },
+            {
+              "description": "The size of the group.",
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "default": "\"small\"",
+              "fieldName": "size"
+            },
+            {
+              "description": "The appearance variant of the group.",
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "default": "\"standard\"",
+              "fieldName": "variant"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Role",
+              "package": "@m3e/web/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-button-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eButtonGroupElement",
+          "declaration": {
+            "name": "M3eButtonGroupElement",
+            "module": "src/button-group/ButtonGroupElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-button-group",
+          "declaration": {
+            "name": "M3eButtonGroupElement",
+            "module": "src/button-group/ButtonGroupElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button-group/ButtonGroupSize.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button-group/ButtonGroupVariant.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button-group/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./ButtonGroupElement\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./ButtonGroupSize\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./ButtonGroupVariant\""
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/card/CardElement.ts",
@@ -14638,6 +14918,46 @@
           "description": "A floating action button (FAB) used to present important actions.",
           "name": "M3eFabElement",
           "cssProperties": [
+            {
+              "description": "Height of the FAB container for all size variants.",
+              "name": "--m3e-fab-container-height"
+            },
+            {
+              "description": "Font size for the FAB label text for all size variants.",
+              "name": "--m3e-fab-label-text-font-size"
+            },
+            {
+              "description": "Font weight for the FAB label text for all size variants.",
+              "name": "--m3e-fab-label-text-font-weight"
+            },
+            {
+              "description": "Line height for the FAB label text for all size variants.",
+              "name": "--m3e-fab-label-text-line-height"
+            },
+            {
+              "description": "Letter spacing (tracking) for the FAB label text for all size variants.",
+              "name": "--m3e-fab-label-text-tracking"
+            },
+            {
+              "description": "Icon size for the FAB for all size variants.",
+              "name": "--m3e-fab-icon-size"
+            },
+            {
+              "description": "Border radius for the FAB for all size variants.",
+              "name": "--m3e-fab-shape"
+            },
+            {
+              "description": "Leading space for the FAB for all size variants.",
+              "name": "--m3e-fab-leading-space"
+            },
+            {
+              "description": "Trailing space for the FAB for all size variants.",
+              "name": "--m3e-fab-trailing-space"
+            },
+            {
+              "description": "Space between icon and label for the FAB for all size variants.",
+              "name": "--m3e-fab-icon-label-space"
+            },
             {
               "description": "Height of the small FAB container.",
               "name": "--m3e-fab-small-container-height"
@@ -14758,6 +15078,130 @@
               "description": "Space between icon and label for the large FAB.",
               "name": "--m3e-fab-large-icon-label-space"
             },
+            {
+              "description": "Default label text color for FAB (all variants).",
+              "name": "--m3e-fab-label-text-color"
+            },
+            {
+              "description": "Default icon color for FAB (all variants).",
+              "name": "--m3e-fab-icon-color"
+            },
+            {
+              "description": "Default container background color for FAB (all variants).",
+              "name": "--m3e-fab-container-color"
+            },
+            {
+              "description": "Resting elevation for FAB (all variants).",
+              "name": "--m3e-fab-container-elevation"
+            },
+            {
+              "description": "Lowered resting elevation for FAB (all variants).",
+              "name": "--m3e-fab-lowered-container-elevation"
+            },
+            {
+              "description": "Container background color when disabled (all variants).",
+              "name": "--m3e-fab-disabled-container-color"
+            },
+            {
+              "description": "Opacity of container when disabled (all variants).",
+              "name": "--m3e-fab-disabled-container-opacity"
+            },
+            {
+              "description": "Icon color when disabled (all variants).",
+              "name": "--m3e-fab-disabled-icon-color"
+            },
+            {
+              "description": "Icon opacity when disabled (all variants).",
+              "name": "--m3e-fab-disabled-icon-opacity"
+            },
+            {
+              "description": "Label text color when disabled (all variants).",
+              "name": "--m3e-fab-disabled-label-text-color"
+            },
+            {
+              "description": "Label text opacity when disabled (all variants).",
+              "name": "--m3e-fab-disabled-label-text-opacity"
+            },
+            {
+              "description": "Elevation when disabled (all variants).",
+              "name": "--m3e-fab-disabled-container-elevation"
+            },
+            {
+              "description": "Lowered elevation when disabled (all variants).",
+              "name": "--m3e-fab-lowered-disabled-container-elevation"
+            },
+            {
+              "description": "Icon color on hover (all variants).",
+              "name": "--m3e-fab-hover-icon-color"
+            },
+            {
+              "description": "Label text color on hover (all variants).",
+              "name": "--m3e-fab-hover-label-text-color"
+            },
+            {
+              "description": "State layer color on hover (all variants).",
+              "name": "--m3e-fab-hover-state-layer-color"
+            },
+            {
+              "description": "State layer opacity on hover (all variants).",
+              "name": "--m3e-fab-hover-state-layer-opacity"
+            },
+            {
+              "description": "Elevation on hover (all variants).",
+              "name": "--m3e-fab-hover-container-elevation"
+            },
+            {
+              "description": "Lowered elevation on hover (all variants).",
+              "name": "--m3e-fab-lowered-hover-container-elevation"
+            },
+            {
+              "description": "Icon color on focus (all variants).",
+              "name": "--m3e-fab-focus-icon-color"
+            },
+            {
+              "description": "Label text color on focus (all variants).",
+              "name": "--m3e-fab-focus-label-text-color"
+            },
+            {
+              "description": "State layer color on focus (all variants).",
+              "name": "--m3e-fab-focus-state-layer-color"
+            },
+            {
+              "description": "State layer opacity on focus (all variants).",
+              "name": "--m3e-fab-focus-state-layer-opacity"
+            },
+            {
+              "description": "Elevation on focus (all variants).",
+              "name": "--m3e-fab-focus-container-elevation"
+            },
+            {
+              "description": "Lowered elevation on focus (all variants).",
+              "name": "--m3e-fab-lowered-focus-container-elevation"
+            },
+            {
+              "description": "Icon color on pressed (all variants).",
+              "name": "--m3e-fab-pressed-icon-color"
+            },
+            {
+              "description": "Label text color on pressed (all variants).",
+              "name": "--m3e-fab-pressed-label-text-color"
+            },
+            {
+              "description": "State layer color on pressed (all variants).",
+              "name": "--m3e-fab-pressed-state-layer-color"
+            },
+            {
+              "description": "State layer opacity on pressed (all variants).",
+              "name": "--m3e-fab-pressed-state-layer-opacity"
+            },
+            {
+              "description": "Elevation on pressed (all variants).",
+              "name": "--m3e-fab-pressed-container-elevation"
+            },
+            {
+              "description": "Lowered elevation on pressed (all variants).",
+              "name": "--m3e-fab-lowered-pressed-container-elevation"
+            },
             {
               "description": "Default label text color for primary FAB.",
               "name": "--m3e-primary-fab-label-text-color"
@@ -18748,6 +19192,13 @@
               "readonly": true,
               "default": "new MutationController(this, { target: null, config: { childList: true, subtree: true }, callback: () => this.#handleErrorChange(), })"
             },
+            {
+              "kind": "field",
+              "name": "#pressedController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PressedController(this, { target: null, callback: (pressed) => this.classList.toggle(\"-pressed\", pressed && !(this.#control?.disabled ?? true)), })"
+            },
             {
               "kind": "field",
               "name": "#focused",
@@ -20037,6 +20488,62 @@
           "description": "An icon button users interact with to perform a supplementary action.",
           "name": "M3eIconButtonElement",
           "cssProperties": [
+            {
+              "description": "Height of the container for all size variants.",
+              "name": "--m3e-icon-button-container-height"
+            },
+            {
+              "description": "Outline thickness for all size variants.",
+              "name": "--m3e-icon-button-outline-thickness"
+            },
+            {
+              "description": "Icon size for all size variants.",
+              "name": "--m3e-icon-button-icon-size"
+            },
+            {
+              "description": "Corner radius for all round size variants.",
+              "name": "--m3e-icon-button-shape-round"
+            },
+            {
+              "description": "Corner radius for all square size variants.",
+              "name": "--m3e-icon-button-shape-square"
+            },
+            {
+              "description": "Corner radius for all selected round size variants.",
+              "name": "--m3e-icon-button-selected-shape-round"
+            },
+            {
+              "description": "Corner radius for all selected square size variants.",
+              "name": "--m3e-icon-button-selected-shape-square"
+            },
+            {
+              "description": "Corner radius for all pressed size variants.",
+              "name": "--m3e-icon-button-shape-pressed-morph"
+            },
+            {
+              "description": "Leading space for all size variants (narrow).",
+              "name": "--m3e-icon-button-narrow-leading-space"
+            },
+            {
+              "description": "Trailing space for all size variants (narrow).",
+              "name": "--m3e-icon-button-narrow-trailing-space"
+            },
+            {
+              "description": "Leading space for all size variants (default).",
+              "name": "--m3e-icon-button-default-leading-space"
+            },
+            {
+              "description": "Trailing space for all size variants (default).",
+              "name": "--m3e-icon-button-default-trailing-space"
+            },
+            {
+              "description": "Leading space for all size variants (wide).",
+              "name": "--m3e-icon-button-wide-leading-space"
+            },
+            {
+              "description": "Trailing space for all size variants (wide).",
+              "name": "--m3e-icon-button-wide-trailing-space"
+            },
             {
               "description": "Height of the extra-small container.",
               "name": "--m3e-icon-button-extra-small-container-height"
@@ -20317,6 +20824,174 @@
               "description": "Trailing space for extra-large (wide).",
               "name": "--m3e-icon-button-extra-large-wide-trailing-space"
             },
+            {
+              "description": "Default outline color for all variants.",
+              "name": "--m3e-icon-button-outline-color"
+            },
+            {
+              "description": "Outline color when disabled (all variants).",
+              "name": "--m3e-icon-button-disabled-outline-color"
+            },
+            {
+              "description": "Outline color on hover (all variants).",
+              "name": "--m3e-icon-button-hover-outline-color"
+            },
+            {
+              "description": "Outline color on focus (all variants).",
+              "name": "--m3e-icon-button-focus-outline-color"
+            },
+            {
+              "description": "Outline color on pressed (all variants).",
+              "name": "--m3e-icon-button-pressed-outline-color"
+            },
+            {
+              "description": "Default container background color for all variants.",
+              "name": "--m3e-icon-button-container-color"
+            },
+            {
+              "description": "Unselected container background color for all variants.",
+              "name": "--m3e-icon-button-unselected-container-color"
+            },
+            {
+              "description": "Selected container background color for all variants.",
+              "name": "--m3e-icon-button-selected-container-color"
+            },
+            {
+              "description": "Default icon color for tonal variant.",
+              "name": "--m3e-icon-button-icon-color"
+            },
+            {
+              "description": "Default container background color for tonal variant.",
+              "name": "--m3e-icon-button-container-color"
+            },
+            {
+              "description": "Unselected icon color for tonal variant.",
+              "name": "--m3e-icon-button-unselected-icon-color"
+            },
+            {
+              "description": "Unselected container background color for tonal variant.",
+              "name": "--m3e-icon-button-unselected-container-color"
+            },
+            {
+              "description": "Selected icon color for tonal variant.",
+              "name": "--m3e-icon-button-selected-icon-color"
+            },
+            {
+              "description": "Selected container background color for tonal variant.",
+              "name": "--m3e-icon-button-selected-container-color"
+            },
+            {
+              "description": "Default icon color for all variants.",
+              "name": "--m3e-icon-button-icon-color"
+            },
+            {
+              "description": "Unselected icon color for all variants.",
+              "name": "--m3e-icon-button-unselected-icon-color"
+            },
+            {
+              "description": "Selected icon color for all variants.",
+              "name": "--m3e-icon-button-selected-icon-color"
+            },
+            {
+              "description": "Container background color when disabled (all variants).",
+              "name": "--m3e-icon-button-disabled-container-color"
+            },
+            {
+              "description": "Opacity of container when disabled (all variants).",
+              "name": "--m3e-icon-button-disabled-container-opacity"
+            },
+            {
+              "description": "Icon color when disabled (all variants).",
+              "name": "--m3e-icon-button-disabled-icon-color"
+            },
+            {
+              "description": "Icon opacity when disabled (all variants).",
+              "name": "--m3e-icon-button-disabled-icon-opacity"
+            },
+            {
+              "description": "Icon color on hover (all variants).",
+              "name": "--m3e-icon-button-hover-icon-color"
+            },
+            {
+              "description": "State layer color on hover (all variants).",
+              "name": "--m3e-icon-button-hover-state-layer-color"
+            },
+            {
+              "description": "State layer opacity on hover (all variants).",
+              "name": "--m3e-icon-button-hover-state-layer-opacity"
+            },
+            {
+              "description": "Unselected icon color on hover (all variants).",
+              "name": "--m3e-icon-button-hover-unselected-icon-color"
+            },
+            {
+              "description": "Unselected state layer color on hover (all variants).",
+              "name": "--m3e-icon-button-hover-unselected-state-layer-color"
+            },
+            {
+              "description": "Selected icon color on hover (all variants).",
+              "name": "--m3e-icon-button-hover-selected-icon-color"
+            },
+            {
+              "description": "Selected state layer color on hover (all variants).",
+              "name": "--m3e-icon-button-hover-selected-state-layer-color"
+            },
+            {
+              "description": "Icon color on focus (all variants).",
+              "name": "--m3e-icon-button-focus-icon-color"
+            },
+            {
+              "description": "State layer color on focus (all variants).",
+              "name": "--m3e-icon-button-focus-state-layer-color"
+            },
+            {
+              "description": "State layer opacity on focus (all variants).",
+              "name": "--m3e-icon-button-focus-state-layer-opacity"
+            },
+            {
+              "description": "Unselected icon color on focus (all variants).",
+              "name": "--m3e-icon-button-focus-unselected-icon-color"
+            },
+            {
+              "description": "Unselected state layer color on focus (all variants).",
+              "name": "--m3e-icon-button-focus-unselected-state-layer-color"
+            },
+            {
+              "description": "Selected icon color on focus (all variants).",
+              "name": "--m3e-icon-button-focus-selected-icon-color"
+            },
+            {
+              "description": "Selected state layer color on focus (all variants).",
+              "name": "--m3e-icon-button-focus-selected-state-layer-color"
+            },
+            {
+              "description": "Icon color on pressed (all variants).",
+              "name": "--m3e-icon-button-pressed-icon-color"
+            },
+            {
+              "description": "State layer color on pressed (all variants).",
+              "name": "--m3e-icon-button-pressed-state-layer-color"
+            },
+            {
+              "description": "State layer opacity on pressed (all variants).",
+              "name": "--m3e-icon-button-pressed-state-layer-opacity"
+            },
+            {
+              "description": "Unselected icon color on pressed (all variants).",
+              "name": "--m3e-icon-button-pressed-unselected-icon-color"
+            },
+            {
+              "description": "Unselected state layer color on pressed (all variants).",
+              "name": "--m3e-icon-button-pressed-unselected-state-layer-color"
+            },
+            {
+              "description": "Selected icon color on pressed (all variants).",
+              "name": "--m3e-icon-button-pressed-selected-icon-color"
+            },
+            {
+              "description": "Selected state layer color on pressed (all variants).",
+              "name": "--m3e-icon-button-pressed-selected-state-layer-color"
+            },
             {
               "description": "Default icon color for outlined variant.",
               "name": "--m3e-outlined-icon-button-icon-color"
@@ -27568,16 +28243,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "#activate",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "#deactivate",
@@ -39679,7 +40344,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/snackbar/index.ts",
+      "path": "src/split-button/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -39687,7 +40352,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./Snackbar\""
+            "package": "\"./SplitButtonElement\""
           }
         },
         {
@@ -39695,592 +40360,87 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./SnackbarElement\""
+            "package": "\"./SplitButtonVariant\""
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/snackbar/Snackbar.ts",
+      "path": "src/split-button/SplitButtonElement.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Presents short updates about application processes at the bottom of the screen from anywhere in an application.",
-          "name": "M3eSnackbar",
-          "members": [
+          "description": "A button used to show an action with a menu of related actions.",
+          "name": "M3eSplitButtonElement",
+          "cssProperties": [
             {
-              "kind": "method",
-              "name": "open",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The message to show in the snackbar."
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "SnackbarOptions | undefined"
-                  },
-                  "description": "Options that control the behavior of the snackbar."
-                }
-              ],
-              "description": "Opens a snackbar with a message."
+              "description": "Leading space for the trailing button (extra-small, unselected).",
+              "name": "--m3e-split-button-extra-small-trailing-button-unselected-leading-space"
             },
             {
-              "kind": "method",
-              "name": "open",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The message to show in the snackbar."
-                },
-                {
-                  "name": "action",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The label for the snackbar action."
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "SnackbarOptions | undefined"
-                  },
-                  "description": "Options that control the behavior of the snackbar."
-                }
-              ],
-              "description": "Opens a snackbar with a message and action."
+              "description": "Trailing space for the trailing button (extra-small, unselected).",
+              "name": "--m3e-split-button-extra-small-trailing-button-unselected-trailing-space"
             },
             {
-              "kind": "method",
-              "name": "open",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The message to show in the snackbar."
-                },
-                {
-                  "name": "action",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The label for the snackbar action."
-                },
-                {
-                  "name": "dismissible",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether to present close affordance."
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "SnackbarOptions | undefined"
-                  },
-                  "description": "Options that control the behavior of the snackbar."
-                }
-              ],
-              "description": "Opens a snackbar with a message, action and optional close affordance."
+              "description": "Leading space for the trailing button (small, unselected).",
+              "name": "--m3e-split-button-small-trailing-button-unselected-leading-space"
             },
             {
-              "kind": "method",
-              "name": "open",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The message to show in the snackbar."
-                },
-                {
-                  "name": "dismissible",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether to present close affordance."
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "SnackbarOptions | undefined"
-                  },
-                  "description": "Options that control the behavior of the snackbar."
-                }
-              ],
-              "description": "Opens a snackbar with a message and optional close affordance."
+              "description": "Trailing space for the trailing button (small, unselected).",
+              "name": "--m3e-split-button-small-trailing-button-unselected-trailing-space"
             },
             {
-              "kind": "method",
-              "name": "open",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "actionOrDismissibleOrOptions",
-                  "optional": true,
-                  "type": {
-                    "text": "string | boolean | SnackbarOptions"
-                  }
-                },
-                {
-                  "name": "dismissibleOrOptions",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | SnackbarOptions"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "SnackbarOptions"
-                  }
-                }
-              ]
+              "description": "Leading space for the trailing button (medium, unselected).",
+              "name": "--m3e-split-button-medium-trailing-button-unselected-leading-space"
             },
             {
-              "kind": "method",
-              "name": "dismiss",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Dismisses the currently visible snackbar."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "M3eSnackbar",
-          "declaration": {
-            "name": "M3eSnackbar",
-            "module": "src/snackbar/Snackbar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/snackbar/SnackbarElement.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Presents short updates about application processes at the bottom of the screen.",
-          "name": "M3eSnackbarElement",
-          "cssProperties": [
+              "description": "Trailing space for the trailing button (medium, unselected).",
+              "name": "--m3e-split-button-medium-trailing-button-unselected-trailing-space"
+            },
             {
-              "description": "Vertical offset from the bottom of the viewport.",
-              "name": "--m3e-snackbar-margin"
+              "description": "Leading space for the trailing button (large, unselected).",
+              "name": "--m3e-split-button-large-trailing-button-unselected-leading-space"
             },
             {
-              "description": "Border radius of the snackbar container.",
-              "name": "--m3e-snackbar-container-shape"
+              "description": "Trailing space for the trailing button (large, unselected).",
+              "name": "--m3e-split-button-large-trailing-button-unselected-trailing-space"
             },
             {
-              "description": "Background color of the snackbar.",
-              "name": "--m3e-snackbar-container-color"
+              "description": "Leading space for the trailing button (extra-large, unselected).",
+              "name": "--m3e-split-button-extra-large-trailing-button-unselected-leading-space"
             },
             {
-              "description": "Internal spacing of the snackbar container.",
-              "name": "--m3e-snackbar-padding"
+              "description": "Trailing space for the trailing button (extra-large, unselected).",
+              "name": "--m3e-split-button-extra-large-trailing-button-unselected-trailing-space"
             },
             {
-              "description": "Minimum width of the snackbar.",
-              "name": "--m3e-snackbar-min-width"
+              "description": "Leading space for the trailing button (extra-small, selected).",
+              "name": "--m3e-split-button-extra-small-trailing-button-selected-leading-space"
             },
             {
-              "description": "Maximum width of the snackbar.",
-              "name": "--m3e-snackbar-max-width"
-            }
-          ],
-          "slots": [
+              "description": "Trailing space for the trailing button (extra-small, selected).",
+              "name": "--m3e-split-button-extra-small-trailing-button-selected-trailing-space"
+            },
             {
-              "description": "Renders the content of the snackbar.",
-              "name": ""
+              "description": "Leading space for the trailing button (small, selected).",
+              "name": "--m3e-split-button-small-trailing-button-selected-leading-space"
             },
             {
-              "description": "Renders the icon of the button used to close the snackbar.",
-              "name": "close-icon"
-            }
-          ],
-          "members": [
+              "description": "Trailing space for the trailing button (small, selected).",
+              "name": "--m3e-split-button-small-trailing-button-selected-trailing-space"
+            },
             {
-              "kind": "field",
-              "name": "__current",
-              "type": {
-                "text": "M3eSnackbarElement | null"
-              },
-              "static": true,
-              "default": "null",
-              "privacy": "private"
+              "description": "Leading space for the trailing button (medium, selected).",
+              "name": "--m3e-split-button-medium-trailing-button-selected-leading-space"
             },
             {
-              "kind": "field",
-              "name": "#timeoutId",
-              "privacy": "private",
-              "type": {
-                "text": "number"
-              },
-              "default": "-1"
+              "description": "Trailing space for the trailing button (medium, selected).",
+              "name": "--m3e-split-button-medium-trailing-button-selected-trailing-space"
             },
             {
-              "kind": "field",
-              "name": "#actionTaken",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "#beforeToggleHandler",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "current",
-              "type": {
-                "text": "M3eSnackbarElement | null"
-              },
-              "static": true,
-              "description": "The currently open snackbar.",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "3000",
-              "description": "The length of time, in milliseconds, to wait before automatically dismissing the snackbar.",
-              "attribute": "duration"
-            },
-            {
-              "kind": "field",
-              "name": "action",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The label of the snackbar's action.",
-              "attribute": "action"
-            },
-            {
-              "kind": "field",
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a button is presented that can be used to close the snackbar.",
-              "attribute": "dismissible",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "closeLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Close\"",
-              "description": "The accessible label given to the button used to dismiss the snackbar.",
-              "attribute": "close-label"
-            },
-            {
-              "kind": "field",
-              "name": "isActionTaken",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Whether the user clicked the action.",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "#renderActionButton",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "unknown"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#renderCloseButton",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "unknown"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#handleActionClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "#handleBeforeToggle",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "ToggleEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "description": "Dispatched before the toggle state changes.",
-              "name": "beforetoggle"
-            },
-            {
-              "description": "Dispatched after the toggle state has changed.",
-              "name": "toggle"
-            }
-          ],
-          "attributes": [
-            {
-              "description": "The label of the snackbar's action.",
-              "name": "action",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "action"
-            },
-            {
-              "description": "The accessible label given to the button used to dismiss the snackbar.",
-              "name": "close-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Close\"",
-              "fieldName": "closeLabel"
-            },
-            {
-              "description": "Whether a button is presented that can be used to close the snackbar.",
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "dismissible"
-            },
-            {
-              "description": "The length of time, in milliseconds, to wait before automatically dismissing the snackbar.",
-              "name": "duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "3000",
-              "fieldName": "duration"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "Role",
-              "package": "@m3e/web/core"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "m3e-snackbar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "M3eSnackbarElement",
-          "declaration": {
-            "name": "M3eSnackbarElement",
-            "module": "src/snackbar/SnackbarElement.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "m3e-snackbar",
-          "declaration": {
-            "name": "M3eSnackbarElement",
-            "module": "src/snackbar/SnackbarElement.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/split-button/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./SplitButtonElement\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./SplitButtonVariant\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/split-button/SplitButtonElement.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A button used to show an action with a menu of related actions.",
-          "name": "M3eSplitButtonElement",
-          "cssProperties": [
-            {
-              "description": "Leading space for the trailing button (extra-small, unselected).",
-              "name": "--m3e-split-button-extra-small-trailing-button-unselected-leading-space"
-            },
-            {
-              "description": "Trailing space for the trailing button (extra-small, unselected).",
-              "name": "--m3e-split-button-extra-small-trailing-button-unselected-trailing-space"
-            },
-            {
-              "description": "Leading space for the trailing button (small, unselected).",
-              "name": "--m3e-split-button-small-trailing-button-unselected-leading-space"
-            },
-            {
-              "description": "Trailing space for the trailing button (small, unselected).",
-              "name": "--m3e-split-button-small-trailing-button-unselected-trailing-space"
-            },
-            {
-              "description": "Leading space for the trailing button (medium, unselected).",
-              "name": "--m3e-split-button-medium-trailing-button-unselected-leading-space"
-            },
-            {
-              "description": "Trailing space for the trailing button (medium, unselected).",
-              "name": "--m3e-split-button-medium-trailing-button-unselected-trailing-space"
-            },
-            {
-              "description": "Leading space for the trailing button (large, unselected).",
-              "name": "--m3e-split-button-large-trailing-button-unselected-leading-space"
-            },
-            {
-              "description": "Trailing space for the trailing button (large, unselected).",
-              "name": "--m3e-split-button-large-trailing-button-unselected-trailing-space"
-            },
-            {
-              "description": "Leading space for the trailing button (extra-large, unselected).",
-              "name": "--m3e-split-button-extra-large-trailing-button-unselected-leading-space"
-            },
-            {
-              "description": "Trailing space for the trailing button (extra-large, unselected).",
-              "name": "--m3e-split-button-extra-large-trailing-button-unselected-trailing-space"
-            },
-            {
-              "description": "Leading space for the trailing button (extra-small, selected).",
-              "name": "--m3e-split-button-extra-small-trailing-button-selected-leading-space"
-            },
-            {
-              "description": "Trailing space for the trailing button (extra-small, selected).",
-              "name": "--m3e-split-button-extra-small-trailing-button-selected-trailing-space"
-            },
-            {
-              "description": "Leading space for the trailing button (small, selected).",
-              "name": "--m3e-split-button-small-trailing-button-selected-leading-space"
-            },
-            {
-              "description": "Trailing space for the trailing button (small, selected).",
-              "name": "--m3e-split-button-small-trailing-button-selected-trailing-space"
-            },
-            {
-              "description": "Leading space for the trailing button (medium, selected).",
-              "name": "--m3e-split-button-medium-trailing-button-selected-leading-space"
-            },
-            {
-              "description": "Trailing space for the trailing button (medium, selected).",
-              "name": "--m3e-split-button-medium-trailing-button-selected-trailing-space"
-            },
-            {
-              "description": "Leading space for the trailing button (large, selected).",
-              "name": "--m3e-split-button-large-trailing-button-selected-leading-space"
+              "description": "Leading space for the trailing button (large, selected).",
+              "name": "--m3e-split-button-large-trailing-button-selected-leading-space"
             },
             {
               "description": "Trailing space for the trailing button (large, selected).",
@@ -40425,7 +40585,7 @@
               "name": "#pressedController",
               "privacy": "private",
               "readonly": true,
-              "default": "new PressedController(this, { target: null, capture: true, isPressedKey: (key) => key === \" \", callback: (pressed, _, target) => { switch (target) { case this.#leadingButton: this.#updateLeadingButtonShape(pressed); break; case this.#trailingButton: this.#updateTrailingButtonShape(pressed || this.#trailingButtonHover); break; } }, })"
+              "default": "new PressedController(this, { target: null, capture: true, minPressedDuration: 150, isPressedKey: (key) => key === \" \", callback: (pressed, _, target) => { switch (target) { case this.#leadingButton: this.#updateLeadingButtonShape(pressed); break; case this.#trailingButton: this.#updateTrailingButtonShape(pressed || this.#trailingButtonHover); break; } }, })"
             },
             {
               "kind": "field",
@@ -40622,6 +40782,511 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/snackbar/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./Snackbar\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./SnackbarElement\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/snackbar/Snackbar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Presents short updates about application processes at the bottom of the screen from anywhere in an application.",
+          "name": "M3eSnackbar",
+          "members": [
+            {
+              "kind": "method",
+              "name": "open",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The message to show in the snackbar."
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "SnackbarOptions | undefined"
+                  },
+                  "description": "Options that control the behavior of the snackbar."
+                }
+              ],
+              "description": "Opens a snackbar with a message."
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The message to show in the snackbar."
+                },
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The label for the snackbar action."
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "SnackbarOptions | undefined"
+                  },
+                  "description": "Options that control the behavior of the snackbar."
+                }
+              ],
+              "description": "Opens a snackbar with a message and action."
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The message to show in the snackbar."
+                },
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The label for the snackbar action."
+                },
+                {
+                  "name": "dismissible",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Whether to present close affordance."
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "SnackbarOptions | undefined"
+                  },
+                  "description": "Options that control the behavior of the snackbar."
+                }
+              ],
+              "description": "Opens a snackbar with a message, action and optional close affordance."
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The message to show in the snackbar."
+                },
+                {
+                  "name": "dismissible",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Whether to present close affordance."
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "SnackbarOptions | undefined"
+                  },
+                  "description": "Options that control the behavior of the snackbar."
+                }
+              ],
+              "description": "Opens a snackbar with a message and optional close affordance."
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "actionOrDismissibleOrOptions",
+                  "optional": true,
+                  "type": {
+                    "text": "string | boolean | SnackbarOptions"
+                  }
+                },
+                {
+                  "name": "dismissibleOrOptions",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | SnackbarOptions"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "SnackbarOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Dismisses the currently visible snackbar."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eSnackbar",
+          "declaration": {
+            "name": "M3eSnackbar",
+            "module": "src/snackbar/Snackbar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/snackbar/SnackbarElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Presents short updates about application processes at the bottom of the screen.",
+          "name": "M3eSnackbarElement",
+          "cssProperties": [
+            {
+              "description": "Vertical offset from the bottom of the viewport.",
+              "name": "--m3e-snackbar-margin"
+            },
+            {
+              "description": "Border radius of the snackbar container.",
+              "name": "--m3e-snackbar-container-shape"
+            },
+            {
+              "description": "Background color of the snackbar.",
+              "name": "--m3e-snackbar-container-color"
+            },
+            {
+              "description": "Internal spacing of the snackbar container.",
+              "name": "--m3e-snackbar-padding"
+            },
+            {
+              "description": "Minimum width of the snackbar.",
+              "name": "--m3e-snackbar-min-width"
+            },
+            {
+              "description": "Maximum width of the snackbar.",
+              "name": "--m3e-snackbar-max-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Renders the content of the snackbar.",
+              "name": ""
+            },
+            {
+              "description": "Renders the icon of the button used to close the snackbar.",
+              "name": "close-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "__current",
+              "type": {
+                "text": "M3eSnackbarElement | null"
+              },
+              "static": true,
+              "default": "null",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#timeoutId",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1"
+            },
+            {
+              "kind": "field",
+              "name": "#actionTaken",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#beforeToggleHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "current",
+              "type": {
+                "text": "M3eSnackbarElement | null"
+              },
+              "static": true,
+              "description": "The currently open snackbar.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "default": "3000",
+              "description": "The length of time, in milliseconds, to wait before automatically dismissing the snackbar.",
+              "attribute": "duration"
+            },
+            {
+              "kind": "field",
+              "name": "action",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The label of the snackbar's action.",
+              "attribute": "action"
+            },
+            {
+              "kind": "field",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a button is presented that can be used to close the snackbar.",
+              "attribute": "dismissible",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "closeLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Close\"",
+              "description": "The accessible label given to the button used to dismiss the snackbar.",
+              "attribute": "close-label"
+            },
+            {
+              "kind": "field",
+              "name": "isActionTaken",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the user clicked the action.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#renderActionButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#renderCloseButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleActionClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleBeforeToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "ToggleEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Dispatched before the toggle state changes.",
+              "name": "beforetoggle"
+            },
+            {
+              "description": "Dispatched after the toggle state has changed.",
+              "name": "toggle"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "The label of the snackbar's action.",
+              "name": "action",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "action"
+            },
+            {
+              "description": "The accessible label given to the button used to dismiss the snackbar.",
+              "name": "close-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Close\"",
+              "fieldName": "closeLabel"
+            },
+            {
+              "description": "Whether a button is presented that can be used to close the snackbar.",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "dismissible"
+            },
+            {
+              "description": "The length of time, in milliseconds, to wait before automatically dismissing the snackbar.",
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "default": "3000",
+              "fieldName": "duration"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Role",
+              "package": "@m3e/web/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-snackbar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eSnackbarElement",
+          "declaration": {
+            "name": "M3eSnackbarElement",
+            "module": "src/snackbar/SnackbarElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-snackbar",
+          "declaration": {
+            "name": "M3eSnackbarElement",
+            "module": "src/snackbar/SnackbarElement.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/stepper/index.ts",
@@ -47858,31 +48523,37 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/styles/CardStyle.ts",
+      "path": "src/button/styles/ButtonSizeStyle.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/styles/CardToken.ts",
+      "path": "src/button/styles/ButtonSizeToken.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/styles/CardVariantStyle.ts",
+      "path": "src/button/styles/ButtonStyle.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/styles/CardVariantToken.ts",
+      "path": "src/button/styles/ButtonVariantStyle.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/styles/index.ts",
+      "path": "src/button/styles/ButtonVariantToken.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button/styles/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -47890,7 +48561,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./CardStyle\""
+            "package": "\"./ButtonSizeStyle\""
           }
         },
         {
@@ -47898,44 +48569,46 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./CardVariantStyle\""
+            "package": "\"./ButtonStyle\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./ButtonVariantStyle\""
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/styles/ButtonSizeStyle.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/button/styles/ButtonSizeToken.ts",
+      "path": "src/card/styles/CardStyle.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/styles/ButtonStyle.ts",
+      "path": "src/card/styles/CardToken.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/styles/ButtonVariantStyle.ts",
+      "path": "src/card/styles/CardVariantStyle.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/styles/ButtonVariantToken.ts",
+      "path": "src/card/styles/CardVariantToken.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/styles/index.ts",
+      "path": "src/card/styles/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -47943,15 +48616,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./ButtonSizeStyle\""
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./ButtonStyle\""
+            "package": "\"./CardStyle\""
           }
         },
         {
@@ -47959,7 +48624,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"./ButtonVariantStyle\""
+            "package": "\"./CardVariantStyle\""
           }
         }
       ]
@@ -56995,74 +57660,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/core/shared/directives/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "\"./safeStyleMap\""
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/core/shared/directives/safeStyleMap.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SafeStyleMapDirective",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_previousStyleProperties",
-              "type": {
-                "text": "Set<string> | undefined"
-              },
-              "privacy": "private"
-            }
-          ],
-          "superclass": {
-            "name": "Directive",
-            "package": "lit/directive.js"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "safeStyleMap",
-          "description": "A directive that applies CSS properties to an element.\r\n\r\n`safeStyleMap` can only be used in the `style` attribute and must be the only\r\nexpression in the attribute. It takes the property names in the\r\nStyleInfostyleInfo object and adds the properties to the inline\r\nstyle of the element.\r\n\r\nProperty names with dashes (`-`) are assumed to be valid CSS\r\nproperty names and set on the element's style object using `setProperty()`.\r\nNames without dashes are assumed to be camelCased JavaScript property names\r\nand set on the element's style object using property assignment, allowing the\r\nstyle object to translate JavaScript-style names to CSS property names.\r\n\r\nFor example `safeStyleMap({backgroundColor: 'red', 'border-top': '5px', '--size':\r\n'0'})` sets the `background-color`, `border-top` and `--size` properties.",
-          "parameters": [
-            {
-              "name": "styleInfo"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "safeStyleMap",
-          "declaration": {
-            "name": "safeStyleMap",
-            "module": "src/core/shared/directives/safeStyleMap.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SafeStyleMapDirective",
-          "declaration": {
-            "name": "SafeStyleMapDirective",
-            "module": "src/core/shared/directives/safeStyleMap.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/core/shared/mixins/AttachInternals.ts",
@@ -59644,6 +60241,74 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/core/shared/directives/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./safeStyleMap\""
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/core/shared/directives/safeStyleMap.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SafeStyleMapDirective",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_previousStyleProperties",
+              "type": {
+                "text": "Set<string> | undefined"
+              },
+              "privacy": "private"
+            }
+          ],
+          "superclass": {
+            "name": "Directive",
+            "package": "lit/directive.js"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "safeStyleMap",
+          "description": "A directive that applies CSS properties to an element.\r\n\r\n`safeStyleMap` can only be used in the `style` attribute and must be the only\r\nexpression in the attribute. It takes the property names in the\r\nStyleInfostyleInfo object and adds the properties to the inline\r\nstyle of the element.\r\n\r\nProperty names with dashes (`-`) are assumed to be valid CSS\r\nproperty names and set on the element's style object using `setProperty()`.\r\nNames without dashes are assumed to be camelCased JavaScript property names\r\nand set on the element's style object using property assignment, allowing the\r\nstyle object to translate JavaScript-style names to CSS property names.\r\n\r\nFor example `safeStyleMap({backgroundColor: 'red', 'border-top': '5px', '--size':\r\n'0'})` sets the `background-color`, `border-top` and `--size` properties.",
+          "parameters": [
+            {
+              "name": "styleInfo"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "safeStyleMap",
+          "declaration": {
+            "name": "safeStyleMap",
+            "module": "src/core/shared/directives/safeStyleMap.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SafeStyleMapDirective",
+          "declaration": {
+            "name": "SafeStyleMapDirective",
+            "module": "src/core/shared/directives/safeStyleMap.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/core/shared/primitives/ActionElementBase.ts",
@@ -60208,6 +60873,14 @@
             {
               "description": "The visibility of the focus ring.",
               "name": "--m3e-focus-ring-visibility"
+            },
+            {
+              "description": "Offset of an outward focus ring.",
+              "name": "--m3e-focus-ring-outward-offset"
+            },
+            {
+              "description": "Offset of an inward focus ring.",
+              "name": "--m3e-focus-ring-inward-offset"
             }
           ],
           "members": [