@material/web 2.4.2-nightly.d7503be.0 → 2.4.2-nightly.e58e4e8.0

package/custom-elements.json

@@ -36221,7 +36221,106 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/button/button.cssresult.js",
+      "path": "labs/gb/components/badge/badge-element.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "BadgeElement",
+          "description": "A Material Design badge component.",
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasContent",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "privacy": "public",
+              "type": {
+                "text": "CSSResultOrNative[]",
+                "references": [
+                  {
+                    "name": "CSSResultOrNative",
+                    "package": "lit",
+                    "start": 0,
+                    "end": 17
+                  }
+                ]
+              },
+              "default": "[\n    badgeStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .badge {\n        flex: 1;\n      }\n    `,\n  ]"
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult<1>",
+                  "references": [
+                    {
+                      "name": "TemplateResult",
+                      "package": "lit-html",
+                      "module": "development/lit-html.js",
+                      "start": 0,
+                      "end": 14
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event",
+                    "references": [
+                      {
+                        "name": "Event",
+                        "package": "global:",
+                        "start": 0,
+                        "end": 5
+                      }
+                    ]
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BadgeElement",
+          "declaration": {
+            "name": "BadgeElement"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/badge/badge.cssresult.js",
       "declarations": [
         {
           "kind": "variable",
@@ -36274,49 +36373,33 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/button/button.js",
+      "path": "labs/gb/components/badge/badge.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "BUTTON_COLORS",
-          "description": "Button color configurations.",
-          "type": {
-            "text": "{ readonly filled: \"filled\"; readonly elevated: \"elevated\"; readonly tonal: \"tonal\"; readonly outlined: \"outlined\"; readonly text: \"text\"; }"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "BUTTON_SIZES",
-          "description": "Button size configurations.",
-          "type": {
-            "text": "{ readonly xs: \"xs\"; readonly sm: \"sm\"; readonly md: \"md\"; readonly lg: \"lg\"; readonly xl: \"xl\"; }"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "BUTTON_CLASSES",
-          "description": "Button classes.",
+          "name": "BADGE_CLASSES",
+          "description": "Badge classes.",
           "type": {
-            "text": "{ btn: string; btnFilled: string; btnElevated: string; btnTonal: string; btnOutlined: string; btnText: string; btnXs: string; btnSm: string; btnMd: string; btnLg: string; btnXl: string; btnSquare: string; btnUnselected: string; btnSelected: string; active: string; disabled: string; }"
+            "text": "{ readonly badge: \"badge\"; readonly badgeLarge: \"badge-large\"; }"
           }
         },
         {
           "kind": "function",
-          "name": "buttonClasses",
-          "description": "Returns the button classes to apply to an element based on the given state.",
+          "name": "badgeClasses",
+          "description": "Returns the badge classes to apply to an element.",
           "parameters": [
             {
-              "name": "{\n  color,\n  size,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}",
-              "description": "The state of the button.",
+              "name": "{\n  large = false,\n}",
+              "description": "The state of the badge.",
               "type": {
-                "text": "ButtonClassesState",
+                "text": "BadgeClassesState",
                 "references": [
                   {
-                    "name": "ButtonClassesState",
+                    "name": "BadgeClassesState",
                     "package": "@material/web",
-                    "module": "labs/gb/components/button/button.js",
+                    "module": "labs/gb/components/badge/badge.js",
                     "start": 0,
-                    "end": 18
+                    "end": 17
                   }
                 ]
               },
@@ -36340,76 +36423,33 @@
             "description": "An object of class names and truthy values if they apply."
           }
         },
-        {
-          "kind": "function",
-          "name": "setupButton",
-          "description": "Sets up button functionality for the given element.",
-          "parameters": [
-            {
-              "name": "button",
-              "description": "The element on which to set up button functionality.",
-              "type": {
-                "text": "HTMLElement",
-                "references": [
-                  {
-                    "name": "HTMLElement",
-                    "package": "global:",
-                    "start": 0,
-                    "end": 11
-                  }
-                ]
-              }
-            },
-            {
-              "name": "opts",
-              "description": "Setup options, supports a cleanup `signal`.",
-              "type": {
-                "text": "{ signal?: AbortSignal; }",
-                "references": [
-                  {
-                    "name": "AbortSignal",
-                    "package": "global:",
-                    "start": 11,
-                    "end": 22
-                  }
-                ]
-              },
-              "optional": true
-            }
-          ],
-          "return": {
-            "type": {
-              "text": "void"
-            }
-          }
-        },
         {
           "kind": "variable",
-          "name": "button",
-          "description": "A Lit directive that adds button styling and functionality to its element.",
+          "name": "badge",
+          "description": "A Lit directive that adds badge styling to its element.",
           "type": {
-            "text": "(state?: ButtonClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "text": "(state?: BadgeClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
             "references": [
               {
-                "name": "ButtonClassesState",
+                "name": "BadgeClassesState",
                 "package": "@material/web",
-                "module": "labs/gb/components/button/button.js",
+                "module": "labs/gb/components/badge/badge.js",
                 "start": 9,
-                "end": 27
+                "end": 26
               },
               {
                 "name": "AdditionalClasses",
                 "package": "@material/web",
                 "module": "labs/gb/components/shared/directives.js",
-                "start": 30,
-                "end": 47
+                "start": 29,
+                "end": 46
               },
               {
                 "name": "DirectiveResult",
                 "package": "lit-html",
                 "module": "development/directive.js",
-                "start": 52,
-                "end": 67
+                "start": 51,
+                "end": 66
               }
             ]
           }
@@ -36418,51 +36458,34 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BUTTON_COLORS",
-          "declaration": {
-            "name": "BUTTON_COLORS"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BUTTON_SIZES",
-          "declaration": {
-            "name": "BUTTON_SIZES"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BUTTON_CLASSES",
-          "declaration": {
-            "name": "BUTTON_CLASSES"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "buttonClasses",
+          "name": "BADGE_CLASSES",
           "declaration": {
-            "name": "buttonClasses"
+            "name": "BADGE_CLASSES"
           }
         },
         {
           "kind": "js",
-          "name": "setupButton",
+          "name": "badgeClasses",
           "declaration": {
-            "name": "setupButton"
+            "name": "badgeClasses"
           }
         },
         {
           "kind": "js",
-          "name": "button",
+          "name": "badge",
           "declaration": {
-            "name": "button"
+            "name": "badge"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/button/md-button.js",
+      "path": "labs/gb/components/badge/md-gb-badge.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/button/button-element.js",
       "declarations": [
         {
           "kind": "variable",
@@ -36524,12 +36547,12 @@
         },
         {
           "kind": "class",
-          "name": "Button",
+          "name": "ButtonElement",
           "description": "A Material Design button.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/button/md-button.js"
+            "module": "labs/gb/components/button/button-element.js"
           },
           "members": [
             {
@@ -36841,7 +36864,6 @@
               }
             }
           ],
-          "tagName": "md-gb-button",
           "customElement": true,
           "attributes": [
             {
@@ -36907,52 +36929,140 @@
               },
               "fieldName": "target"
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Button",
-          "declaration": {
-            "name": "Button"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-button",
-          "declaration": {
-            "name": "Button"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "labs/gb/components/card/card.cssresult.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "type": {
-            "text": "CSSResult",
-            "references": [
-              {
-                "name": "CSSResult",
-                "package": "lit",
-                "module": "development/index.js",
-                "start": 0,
-                "end": 9
-              }
-            ]
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "default",
-          "type": {
-            "text": "CSSStyleSheet",
-            "references": [
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent",
+                "references": [
+                  {
+                    "name": "InputEvent",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 10
+                  }
+                ]
+              },
+              "description": "Fired when a toggle button is selected or unselected. --bubbles --composed"
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event",
+                "references": [
+                  {
+                    "name": "Event",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 5
+                  }
+                ]
+              },
+              "description": "Fired when a toggle button is selected or unselected. --bubbles"
+            }
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display a label and optional icon."
+            },
+            {
+              "name": "container",
+              "description": "Used to set a custom background container for the button."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "btn",
+              "description": "The button's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--container-height"
+            },
+            {
+              "name": "--container-elevation"
+            },
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--outline-width"
+            },
+            {
+              "name": "--outline-color"
+            },
+            {
+              "name": "--icon-label-space"
+            },
+            {
+              "name": "--icon-color"
+            },
+            {
+              "name": "--icon-size"
+            },
+            {
+              "name": "--label-text"
+            },
+            {
+              "name": "--label-text-tracking"
+            },
+            {
+              "name": "--label-text-color"
+            },
+            {
+              "name": "--leading-space"
+            },
+            {
+              "name": "--state-layer-color"
+            },
+            {
+              "name": "--trailing-space"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonElement",
+          "declaration": {
+            "name": "ButtonElement"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/button/button.cssresult.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResult",
+            "references": [
+              {
+                "name": "CSSResult",
+                "package": "lit",
+                "module": "development/index.js",
+                "start": 0,
+                "end": 9
+              }
+            ]
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "default",
+          "type": {
+            "text": "CSSStyleSheet",
+            "references": [
               {
                 "name": "CSSStyleSheet",
                 "package": "global:",
@@ -36982,41 +37092,49 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/card/card.js",
+      "path": "labs/gb/components/button/button.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "CARD_COLORS",
-          "description": "Card color configurations.",
+          "name": "BUTTON_COLORS",
+          "description": "Button color configurations.",
           "type": {
-            "text": "{ readonly elevated: \"elevated\"; readonly filled: \"filled\"; readonly outlined: \"outlined\"; }"
+            "text": "{ readonly filled: \"filled\"; readonly elevated: \"elevated\"; readonly tonal: \"tonal\"; readonly outlined: \"outlined\"; readonly text: \"text\"; }"
           }
         },
         {
           "kind": "variable",
-          "name": "CARD_CLASSES",
-          "description": "Card classes.",
+          "name": "BUTTON_SIZES",
+          "description": "Button size configurations.",
           "type": {
-            "text": "{ readonly card: \"card\"; readonly cardElevated: \"card-elevated\"; readonly cardFilled: \"card-filled\"; readonly cardOutlined: \"card-outlined\"; readonly hover: string; readonly focus: string; readonly disabled: string; }"
+            "text": "{ readonly xs: \"xs\"; readonly sm: \"sm\"; readonly md: \"md\"; readonly lg: \"lg\"; readonly xl: \"xl\"; }"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "BUTTON_CLASSES",
+          "description": "Button classes.",
+          "type": {
+            "text": "{ btn: string; btnFilled: string; btnElevated: string; btnTonal: string; btnOutlined: string; btnText: string; btnXs: string; btnSm: string; btnMd: string; btnLg: string; btnXl: string; btnSquare: string; btnUnselected: string; btnSelected: string; active: string; disabled: string; }"
           }
         },
         {
           "kind": "function",
-          "name": "cardClasses",
-          "description": "Returns the card classes to apply to an element based on the given state.",
+          "name": "buttonClasses",
+          "description": "Returns the button classes to apply to an element based on the given state.",
           "parameters": [
             {
-              "name": "{\n  color,\n  interactive = false,\n  hover = false,\n  focus = false,\n  disabled = false,\n}",
-              "description": "The state of the card.",
+              "name": "{\n  color,\n  size,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}",
+              "description": "The state of the button.",
               "type": {
-                "text": "CardClassesState",
+                "text": "ButtonClassesState",
                 "references": [
                   {
-                    "name": "CardClassesState",
+                    "name": "ButtonClassesState",
                     "package": "@material/web",
-                    "module": "labs/gb/components/card/card.js",
+                    "module": "labs/gb/components/button/button.js",
                     "start": 0,
-                    "end": 16
+                    "end": 18
                   }
                 ]
               },
@@ -37040,33 +37158,76 @@
             "description": "An object of class names and truthy values if they apply."
           }
         },
+        {
+          "kind": "function",
+          "name": "setupButton",
+          "description": "Sets up button functionality for the given element.",
+          "parameters": [
+            {
+              "name": "button",
+              "description": "The element on which to set up button functionality.",
+              "type": {
+                "text": "HTMLElement",
+                "references": [
+                  {
+                    "name": "HTMLElement",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 11
+                  }
+                ]
+              }
+            },
+            {
+              "name": "opts",
+              "description": "Setup options, supports a cleanup `signal`.",
+              "type": {
+                "text": "{ signal?: AbortSignal; }",
+                "references": [
+                  {
+                    "name": "AbortSignal",
+                    "package": "global:",
+                    "start": 11,
+                    "end": 22
+                  }
+                ]
+              },
+              "optional": true
+            }
+          ],
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          }
+        },
         {
           "kind": "variable",
-          "name": "card",
-          "description": "A Lit directive that adds card styling and functionality to its element.",
+          "name": "button",
+          "description": "A Lit directive that adds button styling and functionality to its element.",
           "type": {
-            "text": "(state?: CardClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "text": "(state?: ButtonClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
             "references": [
               {
-                "name": "CardClassesState",
+                "name": "ButtonClassesState",
                 "package": "@material/web",
-                "module": "labs/gb/components/card/card.js",
+                "module": "labs/gb/components/button/button.js",
                 "start": 9,
-                "end": 25
+                "end": 27
               },
               {
                 "name": "AdditionalClasses",
                 "package": "@material/web",
                 "module": "labs/gb/components/shared/directives.js",
-                "start": 28,
-                "end": 45
+                "start": 30,
+                "end": 47
               },
               {
                 "name": "DirectiveResult",
                 "package": "lit-html",
                 "module": "development/directive.js",
-                "start": 50,
-                "end": 65
+                "start": 52,
+                "end": 67
               }
             ]
           }
@@ -37075,37 +37236,55 @@
       "exports": [
         {
           "kind": "js",
-          "name": "CARD_COLORS",
+          "name": "BUTTON_COLORS",
           "declaration": {
-            "name": "CARD_COLORS"
+            "name": "BUTTON_COLORS"
           }
         },
         {
           "kind": "js",
-          "name": "CARD_CLASSES",
+          "name": "BUTTON_SIZES",
           "declaration": {
-            "name": "CARD_CLASSES"
+            "name": "BUTTON_SIZES"
           }
         },
         {
           "kind": "js",
-          "name": "cardClasses",
+          "name": "BUTTON_CLASSES",
           "declaration": {
-            "name": "cardClasses"
+            "name": "BUTTON_CLASSES"
           }
         },
         {
           "kind": "js",
-          "name": "card",
+          "name": "buttonClasses",
           "declaration": {
-            "name": "card"
+            "name": "buttonClasses"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "setupButton",
+          "declaration": {
+            "name": "setupButton"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "button",
+          "declaration": {
+            "name": "button"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/card/md-card.js",
+      "path": "labs/gb/components/button/md-gb-button.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/card/card-element.js",
       "declarations": [
         {
           "kind": "variable",
@@ -37125,12 +37304,12 @@
         },
         {
           "kind": "class",
-          "name": "Card",
+          "name": "CardElement",
           "description": "A Material Design card.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/card/md-card.js"
+            "module": "labs/gb/components/card/card-element.js"
           },
           "members": [
             {
@@ -37360,7 +37539,6 @@
               }
             }
           ],
-          "tagName": "md-gb-card",
           "customElement": true,
           "attributes": [
             {
@@ -37384,29 +37562,62 @@
               },
               "fieldName": "interactive"
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Card",
-          "declaration": {
-            "name": "Card"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-card",
-          "declaration": {
-            "name": "Card"
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element."
+            },
+            {
+              "name": "container",
+              "description": "Used to set a custom background container for the card."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "card",
+              "description": "The card's root element."
+            },
+            {
+              "name": "card-btn",
+              "description": "The card's main action button, when interactive."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--container-elevation"
+            },
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--outline-color"
+            },
+            {
+              "name": "--outline-width"
+            },
+            {
+              "name": "--state-layer-color"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CardElement",
+          "declaration": {
+            "name": "CardElement"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/checkbox/checkbox.cssresult.js",
+      "path": "labs/gb/components/card/card.cssresult.js",
       "declarations": [
         {
           "kind": "variable",
@@ -37459,33 +37670,41 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/checkbox/checkbox.js",
+      "path": "labs/gb/components/card/card.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "CHECKBOX_CLASSES",
-          "description": "Checkbox classes.",
+          "name": "CARD_COLORS",
+          "description": "Card color configurations.",
           "type": {
-            "text": "{ readonly checkbox: \"checkbox\"; readonly invalid: string; readonly hover: string; readonly focus: string; readonly active: string; readonly checked: string; readonly indeterminate: string; readonly disabled: string; }"
+            "text": "{ readonly elevated: \"elevated\"; readonly filled: \"filled\"; readonly outlined: \"outlined\"; }"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "CARD_CLASSES",
+          "description": "Card classes.",
+          "type": {
+            "text": "{ readonly card: \"card\"; readonly cardElevated: \"card-elevated\"; readonly cardFilled: \"card-filled\"; readonly cardOutlined: \"card-outlined\"; readonly hover: string; readonly focus: string; readonly disabled: string; }"
           }
         },
         {
           "kind": "function",
-          "name": "checkboxClasses",
-          "description": "Returns the checkbox classes to apply to an element based on the given state.",
+          "name": "cardClasses",
+          "description": "Returns the card classes to apply to an element based on the given state.",
           "parameters": [
             {
-              "name": "{\n  invalid = false,\n  hover = false,\n  focus = false,\n  active = false,\n  checked = false,\n  indeterminate = false,\n  disabled = false,\n}",
-              "description": "The state of the checkbox.",
+              "name": "{\n  color,\n  interactive = false,\n  hover = false,\n  focus = false,\n  disabled = false,\n}",
+              "description": "The state of the card.",
               "type": {
-                "text": "CheckboxClassesState",
+                "text": "CardClassesState",
                 "references": [
                   {
-                    "name": "CheckboxClassesState",
+                    "name": "CardClassesState",
                     "package": "@material/web",
-                    "module": "labs/gb/components/checkbox/checkbox.js",
+                    "module": "labs/gb/components/card/card.js",
                     "start": 0,
-                    "end": 20
+                    "end": 16
                   }
                 ]
               },
@@ -37509,76 +37728,33 @@
             "description": "An object of class names and truthy values if they apply."
           }
         },
-        {
-          "kind": "function",
-          "name": "setupCheckbox",
-          "description": "Sets up checkbox functionality for the given element.",
-          "parameters": [
-            {
-              "name": "checkbox",
-              "description": "The element on which to set up checkbox functionality.",
-              "type": {
-                "text": "HTMLElement",
-                "references": [
-                  {
-                    "name": "HTMLElement",
-                    "package": "global:",
-                    "start": 0,
-                    "end": 11
-                  }
-                ]
-              }
-            },
-            {
-              "name": "opts",
-              "description": "Setup options, supports a cleanup `signal`.",
-              "type": {
-                "text": "{ signal?: AbortSignal; }",
-                "references": [
-                  {
-                    "name": "AbortSignal",
-                    "package": "global:",
-                    "start": 11,
-                    "end": 22
-                  }
-                ]
-              },
-              "optional": true
-            }
-          ],
-          "return": {
-            "type": {
-              "text": "void"
-            }
-          }
-        },
         {
           "kind": "variable",
-          "name": "checkbox",
-          "description": "A Lit directive that adds checkbox styling and functionality to its element.",
+          "name": "card",
+          "description": "A Lit directive that adds card styling and functionality to its element.",
           "type": {
-            "text": "(state?: CheckboxClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "text": "(state?: CardClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
             "references": [
               {
-                "name": "CheckboxClassesState",
+                "name": "CardClassesState",
                 "package": "@material/web",
-                "module": "labs/gb/components/checkbox/checkbox.js",
+                "module": "labs/gb/components/card/card.js",
                 "start": 9,
-                "end": 29
+                "end": 25
               },
               {
                 "name": "AdditionalClasses",
                 "package": "@material/web",
                 "module": "labs/gb/components/shared/directives.js",
-                "start": 32,
-                "end": 49
+                "start": 28,
+                "end": 45
               },
               {
                 "name": "DirectiveResult",
                 "package": "lit-html",
                 "module": "development/directive.js",
-                "start": 54,
-                "end": 69
+                "start": 50,
+                "end": 65
               }
             ]
           }
@@ -37587,37 +37763,41 @@
       "exports": [
         {
           "kind": "js",
-          "name": "CHECKBOX_CLASSES",
+          "name": "CARD_COLORS",
           "declaration": {
-            "name": "CHECKBOX_CLASSES"
+            "name": "CARD_COLORS"
           }
         },
         {
           "kind": "js",
-          "name": "checkboxClasses",
+          "name": "CARD_CLASSES",
           "declaration": {
-            "name": "checkboxClasses"
+            "name": "CARD_CLASSES"
           }
         },
         {
           "kind": "js",
-          "name": "setupCheckbox",
+          "name": "cardClasses",
           "declaration": {
-            "name": "setupCheckbox"
+            "name": "cardClasses"
           }
         },
         {
           "kind": "js",
-          "name": "checkbox",
+          "name": "card",
           "declaration": {
-            "name": "checkbox"
+            "name": "card"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/checkbox/md-checkbox.js",
+      "path": "labs/gb/components/card/md-gb-card.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/checkbox/checkbox-element.js",
       "declarations": [
         {
           "kind": "variable",
@@ -37679,12 +37859,12 @@
         },
         {
           "kind": "class",
-          "name": "Checkbox",
+          "name": "CheckboxElement",
           "description": "A Material Design checkbox component.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/checkbox/md-checkbox.js"
+            "module": "labs/gb/components/checkbox/checkbox-element.js"
           },
           "members": [
             {
@@ -37999,7 +38179,6 @@
               }
             }
           ],
-          "tagName": "md-gb-checkbox",
           "customElement": true,
           "attributes": [
             {
@@ -38037,29 +38216,92 @@
               },
               "fieldName": "value"
             }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent",
+                "references": [
+                  {
+                    "name": "InputEvent",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 10
+                  }
+                ]
+              },
+              "description": "Fired when the checkbox is checked or unchecked. --bubbles --composed"
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event",
+                "references": [
+                  {
+                    "name": "Event",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 5
+                  }
+                ]
+              },
+              "description": "Fired when the checkbox is checked or unchecked. --bubbles"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "checkbox",
+              "description": "The checkbox's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--container-size"
+            },
+            {
+              "name": "--icon-color"
+            },
+            {
+              "name": "--icon-size"
+            },
+            {
+              "name": "--outline-color"
+            },
+            {
+              "name": "--outline-width"
+            },
+            {
+              "name": "--state-layer-color"
+            },
+            {
+              "name": "--state-layer-shape"
+            },
+            {
+              "name": "--state-layer-size"
+            }
           ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Checkbox",
-          "declaration": {
-            "name": "Checkbox"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-checkbox",
+          "name": "CheckboxElement",
           "declaration": {
-            "name": "Checkbox"
+            "name": "CheckboxElement"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/divider/divider.cssresult.js",
+      "path": "labs/gb/components/checkbox/checkbox.cssresult.js",
       "declarations": [
         {
           "kind": "variable",
@@ -38112,33 +38354,33 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/divider/divider.js",
+      "path": "labs/gb/components/checkbox/checkbox.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "DIVIDER_CLASSES",
-          "description": "Divider classes.",
+          "name": "CHECKBOX_CLASSES",
+          "description": "Checkbox classes.",
           "type": {
-            "text": "{ readonly divider: \"divider\"; readonly dividerVertical: \"divider-vertical\"; }"
+            "text": "{ readonly checkbox: \"checkbox\"; readonly invalid: string; readonly hover: string; readonly focus: string; readonly active: string; readonly checked: string; readonly indeterminate: string; readonly disabled: string; }"
           }
         },
         {
           "kind": "function",
-          "name": "dividerClasses",
-          "description": "Returns the divider classes to apply to an element based on the given state.",
+          "name": "checkboxClasses",
+          "description": "Returns the checkbox classes to apply to an element based on the given state.",
           "parameters": [
             {
-              "name": "{\n  vertical = false,\n}",
-              "description": "The state of the divider.",
+              "name": "{\n  invalid = false,\n  hover = false,\n  focus = false,\n  active = false,\n  checked = false,\n  indeterminate = false,\n  disabled = false,\n}",
+              "description": "The state of the checkbox.",
               "type": {
-                "text": "DividerClassesState",
+                "text": "CheckboxClassesState",
                 "references": [
                   {
-                    "name": "DividerClassesState",
+                    "name": "CheckboxClassesState",
                     "package": "@material/web",
-                    "module": "labs/gb/components/divider/divider.js",
+                    "module": "labs/gb/components/checkbox/checkbox.js",
                     "start": 0,
-                    "end": 19
+                    "end": 20
                   }
                 ]
               },
@@ -38163,32 +38405,75 @@
           }
         },
         {
-          "kind": "variable",
-          "name": "divider",
-          "description": "A Lit directive that adds divider styling to its element.",
-          "type": {
-            "text": "(state?: DividerClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
-            "references": [
-              {
-                "name": "DividerClassesState",
-                "package": "@material/web",
-                "module": "labs/gb/components/divider/divider.js",
-                "start": 9,
-                "end": 28
-              },
-              {
-                "name": "AdditionalClasses",
-                "package": "@material/web",
-                "module": "labs/gb/components/shared/directives.js",
-                "start": 31,
-                "end": 48
+          "kind": "function",
+          "name": "setupCheckbox",
+          "description": "Sets up checkbox functionality for the given element.",
+          "parameters": [
+            {
+              "name": "checkbox",
+              "description": "The element on which to set up checkbox functionality.",
+              "type": {
+                "text": "HTMLElement",
+                "references": [
+                  {
+                    "name": "HTMLElement",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 11
+                  }
+                ]
+              }
+            },
+            {
+              "name": "opts",
+              "description": "Setup options, supports a cleanup `signal`.",
+              "type": {
+                "text": "{ signal?: AbortSignal; }",
+                "references": [
+                  {
+                    "name": "AbortSignal",
+                    "package": "global:",
+                    "start": 11,
+                    "end": 22
+                  }
+                ]
+              },
+              "optional": true
+            }
+          ],
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "checkbox",
+          "description": "A Lit directive that adds checkbox styling and functionality to its element.",
+          "type": {
+            "text": "(state?: CheckboxClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "references": [
+              {
+                "name": "CheckboxClassesState",
+                "package": "@material/web",
+                "module": "labs/gb/components/checkbox/checkbox.js",
+                "start": 9,
+                "end": 29
+              },
+              {
+                "name": "AdditionalClasses",
+                "package": "@material/web",
+                "module": "labs/gb/components/shared/directives.js",
+                "start": 32,
+                "end": 49
               },
               {
                 "name": "DirectiveResult",
                 "package": "lit-html",
                 "module": "development/directive.js",
-                "start": 53,
-                "end": 68
+                "start": 54,
+                "end": 69
               }
             ]
           }
@@ -38197,34 +38482,45 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DIVIDER_CLASSES",
+          "name": "CHECKBOX_CLASSES",
           "declaration": {
-            "name": "DIVIDER_CLASSES"
+            "name": "CHECKBOX_CLASSES"
           }
         },
         {
           "kind": "js",
-          "name": "dividerClasses",
+          "name": "checkboxClasses",
           "declaration": {
-            "name": "dividerClasses"
+            "name": "checkboxClasses"
           }
         },
         {
           "kind": "js",
-          "name": "divider",
+          "name": "setupCheckbox",
           "declaration": {
-            "name": "divider"
+            "name": "setupCheckbox"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "checkbox",
+          "declaration": {
+            "name": "checkbox"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/divider/md-divider.js",
+      "path": "labs/gb/components/checkbox/md-gb-checkbox.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/divider/divider-element.js",
       "declarations": [
         {
           "kind": "class",
-          "name": "Divider",
+          "name": "DividerElement",
           "description": "A Material Design divider component.",
           "superclass": {
             "name": "LitElement",
@@ -38281,7 +38577,6 @@
               }
             }
           ],
-          "tagName": "md-gb-divider",
           "customElement": true,
           "attributes": [
             {
@@ -38291,29 +38586,36 @@
               },
               "fieldName": "vertical"
             }
+          ],
+          "cssParts": [
+            {
+              "name": "divider",
+              "description": "The divider element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--color"
+            },
+            {
+              "name": "--thickness"
+            }
           ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Divider",
-          "declaration": {
-            "name": "Divider"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-divider",
+          "name": "DividerElement",
           "declaration": {
-            "name": "Divider"
+            "name": "DividerElement"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/fab/fab.cssresult.js",
+      "path": "labs/gb/components/divider/divider.cssresult.js",
       "declarations": [
         {
           "kind": "variable",
@@ -38366,49 +38668,33 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/fab/fab.js",
+      "path": "labs/gb/components/divider/divider.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "FAB_COLORS",
-          "description": "Fab color configurations.",
-          "type": {
-            "text": "{ readonly primary: \"primary\"; readonly primaryContainer: \"primary-container\"; readonly secondary: \"secondary\"; readonly secondaryContainer: \"secondary-container\"; readonly tertiary: \"tertiary\"; readonly tertiaryContainer: \"tertiary-container\"; }"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "FAB_SIZES",
-          "description": "Fab size configurations.",
-          "type": {
-            "text": "{ readonly default: \"default\"; readonly md: \"md\"; readonly lg: \"lg\"; }"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "FAB_CLASSES",
-          "description": "Fab classes.",
+          "name": "DIVIDER_CLASSES",
+          "description": "Divider classes.",
           "type": {
-            "text": "{ readonly fab: \"fab\"; readonly fabPrimary: \"fab-primary\"; readonly fabPrimaryContainer: \"fab-primary-container\"; readonly fabSecondary: \"fab-secondary\"; readonly fabSecondaryContainer: \"fab-secondary-container\"; ... 5 more ...; readonly active: string; }"
+            "text": "{ readonly divider: \"divider\"; readonly dividerVertical: \"divider-vertical\"; }"
           }
         },
         {
           "kind": "function",
-          "name": "fabClasses",
-          "description": "Returns the fab classes to apply to an element based on the given state.",
+          "name": "dividerClasses",
+          "description": "Returns the divider classes to apply to an element based on the given state.",
           "parameters": [
             {
-              "name": "{\n  color,\n  size,\n  hover = false,\n  active = false,\n}",
-              "description": "The state of the fab.",
+              "name": "{\n  vertical = false,\n}",
+              "description": "The state of the divider.",
               "type": {
-                "text": "FabClassesState",
+                "text": "DividerClassesState",
                 "references": [
                   {
-                    "name": "FabClassesState",
+                    "name": "DividerClassesState",
                     "package": "@material/web",
-                    "module": "labs/gb/components/fab/fab.js",
+                    "module": "labs/gb/components/divider/divider.js",
                     "start": 0,
-                    "end": 15
+                    "end": 19
                   }
                 ]
               },
@@ -38432,76 +38718,33 @@
             "description": "An object of class names and truthy values if they apply."
           }
         },
-        {
-          "kind": "function",
-          "name": "setupFab",
-          "description": "Sets up fab functionality for the given element.",
-          "parameters": [
-            {
-              "name": "fab",
-              "description": "The element on which to set up fab functionality.",
-              "type": {
-                "text": "HTMLElement",
-                "references": [
-                  {
-                    "name": "HTMLElement",
-                    "package": "global:",
-                    "start": 0,
-                    "end": 11
-                  }
-                ]
-              }
-            },
-            {
-              "name": "opts",
-              "description": "Setup options, supports a cleanup `signal`.",
-              "type": {
-                "text": "{ signal?: AbortSignal; }",
-                "references": [
-                  {
-                    "name": "AbortSignal",
-                    "package": "global:",
-                    "start": 11,
-                    "end": 22
-                  }
-                ]
-              },
-              "optional": true
-            }
-          ],
-          "return": {
-            "type": {
-              "text": "void"
-            }
-          }
-        },
         {
           "kind": "variable",
-          "name": "fab",
-          "description": "A Lit directive that adds fab styling and functionality to its element.",
+          "name": "divider",
+          "description": "A Lit directive that adds divider styling to its element.",
           "type": {
-            "text": "(state?: FabClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "text": "(state?: DividerClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
             "references": [
               {
-                "name": "FabClassesState",
+                "name": "DividerClassesState",
                 "package": "@material/web",
-                "module": "labs/gb/components/fab/fab.js",
+                "module": "labs/gb/components/divider/divider.js",
                 "start": 9,
-                "end": 24
+                "end": 28
               },
               {
                 "name": "AdditionalClasses",
                 "package": "@material/web",
                 "module": "labs/gb/components/shared/directives.js",
-                "start": 27,
-                "end": 44
+                "start": 31,
+                "end": 48
               },
               {
                 "name": "DirectiveResult",
                 "package": "lit-html",
                 "module": "development/directive.js",
-                "start": 49,
-                "end": 64
+                "start": 53,
+                "end": 68
               }
             ]
           }
@@ -38510,55 +38753,38 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FAB_COLORS",
-          "declaration": {
-            "name": "FAB_COLORS"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FAB_SIZES",
-          "declaration": {
-            "name": "FAB_SIZES"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FAB_CLASSES",
-          "declaration": {
-            "name": "FAB_CLASSES"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "fabClasses",
+          "name": "DIVIDER_CLASSES",
           "declaration": {
-            "name": "fabClasses"
+            "name": "DIVIDER_CLASSES"
           }
         },
         {
           "kind": "js",
-          "name": "setupFab",
+          "name": "dividerClasses",
           "declaration": {
-            "name": "setupFab"
+            "name": "dividerClasses"
           }
         },
         {
           "kind": "js",
-          "name": "fab",
+          "name": "divider",
           "declaration": {
-            "name": "fab"
+            "name": "divider"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/fab/md-fab.js",
+      "path": "labs/gb/components/divider/md-gb-divider.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/fab/fab-element.js",
       "declarations": [
         {
           "kind": "class",
-          "name": "Fab",
+          "name": "FabElement",
           "description": "A Material Design fab component.",
           "superclass": {
             "name": "LitElement",
@@ -38641,7 +38867,6 @@
               }
             }
           ],
-          "tagName": "md-gb-fab",
           "customElement": true,
           "attributes": [
             {
@@ -38658,29 +38883,72 @@
               },
               "fieldName": "size"
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Fab",
-          "declaration": {
-            "name": "Fab"
-          }
-        },
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display an icon and optional label."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "fab",
+              "description": "The FAB's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--container-elevation"
+            },
+            {
+              "name": "--container-height"
+            },
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--icon-color"
+            },
+            {
+              "name": "--icon-label-space"
+            },
+            {
+              "name": "--icon-size"
+            },
+            {
+              "name": "--label-text"
+            },
+            {
+              "name": "--label-text-color"
+            },
+            {
+              "name": "--label-text-tracking"
+            },
+            {
+              "name": "--leading-space"
+            },
+            {
+              "name": "--trailing-space"
+            }
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "custom-element-definition",
-          "name": "md-gb-fab",
+          "kind": "js",
+          "name": "FabElement",
           "declaration": {
-            "name": "Fab"
+            "name": "FabElement"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/focus/focus-ring.cssresult.js",
+      "path": "labs/gb/components/fab/fab.cssresult.js",
       "declarations": [
         {
           "kind": "variable",
@@ -38733,41 +39001,49 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/focus/focus-ring.js",
+      "path": "labs/gb/components/fab/fab.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "FOCUS_RING_TYPES",
-          "description": "Focus ring type configurations.",
+          "name": "FAB_COLORS",
+          "description": "Fab color configurations.",
           "type": {
-            "text": "{ readonly outer: \"outer\"; readonly inner: \"inner\"; }"
+            "text": "{ readonly primary: \"primary\"; readonly primaryContainer: \"primary-container\"; readonly secondary: \"secondary\"; readonly secondaryContainer: \"secondary-container\"; readonly tertiary: \"tertiary\"; readonly tertiaryContainer: \"tertiary-container\"; }"
           }
         },
         {
           "kind": "variable",
-          "name": "FOCUS_RING_CLASSES",
-          "description": "Focus ring classes.",
+          "name": "FAB_SIZES",
+          "description": "Fab size configurations.",
           "type": {
-            "text": "{ focusRingOuter: string; focusRingInner: string; focusRingTarget: string; focusRingHost: string; focusVisible: string; }"
+            "text": "{ readonly default: \"default\"; readonly md: \"md\"; readonly lg: \"lg\"; }"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "FAB_CLASSES",
+          "description": "Fab classes.",
+          "type": {
+            "text": "{ readonly fab: \"fab\"; readonly fabPrimary: \"fab-primary\"; readonly fabPrimaryContainer: \"fab-primary-container\"; readonly fabSecondary: \"fab-secondary\"; readonly fabSecondaryContainer: \"fab-secondary-container\"; ... 5 more ...; readonly active: string; }"
           }
         },
         {
           "kind": "function",
-          "name": "focusRingClasses",
-          "description": "Returns the focus ring classes to apply to an element based on the given\nstate.",
+          "name": "fabClasses",
+          "description": "Returns the fab classes to apply to an element based on the given state.",
           "parameters": [
             {
-              "name": "{\n  type = FOCUS_RING_TYPES.outer,\n  focusVisible = false,\n}",
-              "description": "The state of the focus ring.",
+              "name": "{\n  color,\n  size,\n  hover = false,\n  active = false,\n}",
+              "description": "The state of the fab.",
               "type": {
-                "text": "FocusRingClassesState",
+                "text": "FabClassesState",
                 "references": [
                   {
-                    "name": "FocusRingClassesState",
+                    "name": "FabClassesState",
                     "package": "@material/web",
-                    "module": "labs/gb/components/focus/focus-ring.js",
+                    "module": "labs/gb/components/fab/fab.js",
                     "start": 0,
-                    "end": 21
+                    "end": 15
                   }
                 ]
               },
@@ -38790,35 +39066,134 @@
             },
             "description": "An object of class names and truthy values if they apply."
           }
+        },
+        {
+          "kind": "function",
+          "name": "setupFab",
+          "description": "Sets up fab functionality for the given element.",
+          "parameters": [
+            {
+              "name": "fab",
+              "description": "The element on which to set up fab functionality.",
+              "type": {
+                "text": "HTMLElement",
+                "references": [
+                  {
+                    "name": "HTMLElement",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 11
+                  }
+                ]
+              }
+            },
+            {
+              "name": "opts",
+              "description": "Setup options, supports a cleanup `signal`.",
+              "type": {
+                "text": "{ signal?: AbortSignal; }",
+                "references": [
+                  {
+                    "name": "AbortSignal",
+                    "package": "global:",
+                    "start": 11,
+                    "end": 22
+                  }
+                ]
+              },
+              "optional": true
+            }
+          ],
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fab",
+          "description": "A Lit directive that adds fab styling and functionality to its element.",
+          "type": {
+            "text": "(state?: FabClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "references": [
+              {
+                "name": "FabClassesState",
+                "package": "@material/web",
+                "module": "labs/gb/components/fab/fab.js",
+                "start": 9,
+                "end": 24
+              },
+              {
+                "name": "AdditionalClasses",
+                "package": "@material/web",
+                "module": "labs/gb/components/shared/directives.js",
+                "start": 27,
+                "end": 44
+              },
+              {
+                "name": "DirectiveResult",
+                "package": "lit-html",
+                "module": "development/directive.js",
+                "start": 49,
+                "end": 64
+              }
+            ]
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FOCUS_RING_TYPES",
+          "name": "FAB_COLORS",
           "declaration": {
-            "name": "FOCUS_RING_TYPES"
+            "name": "FAB_COLORS"
           }
         },
         {
           "kind": "js",
-          "name": "FOCUS_RING_CLASSES",
+          "name": "FAB_SIZES",
           "declaration": {
-            "name": "FOCUS_RING_CLASSES"
+            "name": "FAB_SIZES"
           }
         },
         {
           "kind": "js",
-          "name": "focusRingClasses",
+          "name": "FAB_CLASSES",
           "declaration": {
-            "name": "focusRingClasses"
+            "name": "FAB_CLASSES"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fabClasses",
+          "declaration": {
+            "name": "fabClasses"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "setupFab",
+          "declaration": {
+            "name": "setupFab"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fab",
+          "declaration": {
+            "name": "fab"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/iconbutton/icon-button.cssresult.js",
+      "path": "labs/gb/components/fab/md-gb-fab.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/focus/focus-ring.cssresult.js",
       "declarations": [
         {
           "kind": "variable",
@@ -38871,57 +39246,41 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/iconbutton/icon-button.js",
+      "path": "labs/gb/components/focus/focus-ring.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "ICON_BUTTON_COLORS",
-          "description": "Icon Button color configurations.",
-          "type": {
-            "text": "{ readonly filled: \"filled\"; readonly tonal: \"tonal\"; readonly outlined: \"outlined\"; readonly standard: \"standard\"; }"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "ICON_BUTTON_SIZES",
-          "description": "Icon Button size configurations.",
-          "type": {
-            "text": "{ readonly xs: \"xs\"; readonly sm: \"sm\"; readonly md: \"md\"; readonly lg: \"lg\"; readonly xl: \"xl\"; }"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "ICON_BUTTON_WIDTHS",
-          "description": "Icon Button width configurations.",
+          "name": "FOCUS_RING_TYPES",
+          "description": "Focus ring type configurations.",
           "type": {
-            "text": "{ readonly narrow: \"narrow\"; readonly wide: \"wide\"; }"
+            "text": "{ readonly outer: \"outer\"; readonly inner: \"inner\"; }"
           }
         },
         {
           "kind": "variable",
-          "name": "ICON_BUTTON_CLASSES",
-          "description": "Icon Button classes.",
+          "name": "FOCUS_RING_CLASSES",
+          "description": "Focus ring classes.",
           "type": {
-            "text": "{ iconBtn: string; iconBtnFilled: string; iconBtnTonal: string; iconBtnOutlined: string; iconBtnStandard: string; iconBtnXs: string; iconBtnSm: string; iconBtnMd: string; iconBtnLg: string; ... 7 more ...; disabled: string; }"
+            "text": "{ focusRingOuter: string; focusRingInner: string; focusRingTarget: string; focusRingHost: string; focusVisible: string; }"
           }
         },
         {
           "kind": "function",
-          "name": "iconButtonClasses",
-          "description": "Returns the icon button classes to apply to an element based on the given\nstate.",
+          "name": "focusRingClasses",
+          "description": "Returns the focus ring classes to apply to an element based on the given\nstate.",
           "parameters": [
             {
-              "name": "{\n  color,\n  size,\n  width,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}",
-              "description": "The state of the icon button.",
+              "name": "{\n  type = FOCUS_RING_TYPES.outer,\n  focusVisible = false,\n}",
+              "description": "The state of the focus ring.",
               "type": {
-                "text": "IconButtonClassesState",
+                "text": "FocusRingClassesState",
                 "references": [
                   {
-                    "name": "IconButtonClassesState",
+                    "name": "FocusRingClassesState",
                     "package": "@material/web",
-                    "module": "labs/gb/components/iconbutton/icon-button.js",
+                    "module": "labs/gb/components/focus/focus-ring.js",
                     "start": 0,
-                    "end": 22
+                    "end": 21
                   }
                 ]
               },
@@ -38944,137 +39303,35 @@
             },
             "description": "An object of class names and truthy values if they apply."
           }
-        },
-        {
-          "kind": "function",
-          "name": "setupIconButton",
-          "description": "Sets up icon button functionality for the given element.",
-          "parameters": [
-            {
-              "name": "iconButton",
-              "description": "The element on which to set up icon button functionality.",
-              "type": {
-                "text": "HTMLElement",
-                "references": [
-                  {
-                    "name": "HTMLElement",
-                    "package": "global:",
-                    "start": 0,
-                    "end": 11
-                  }
-                ]
-              }
-            },
-            {
-              "name": "opts",
-              "description": "Setup options, supports a cleanup `signal`.",
-              "type": {
-                "text": "{ signal?: AbortSignal; }",
-                "references": [
-                  {
-                    "name": "AbortSignal",
-                    "package": "global:",
-                    "start": 11,
-                    "end": 22
-                  }
-                ]
-              },
-              "optional": true
-            }
-          ],
-          "return": {
-            "type": {
-              "text": "void"
-            }
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "iconButton",
-          "description": "A Lit directive that adds icon button styling and functionality to its element.",
-          "type": {
-            "text": "(state?: IconButtonClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
-            "references": [
-              {
-                "name": "IconButtonClassesState",
-                "package": "@material/web",
-                "module": "labs/gb/components/iconbutton/icon-button.js",
-                "start": 9,
-                "end": 31
-              },
-              {
-                "name": "AdditionalClasses",
-                "package": "@material/web",
-                "module": "labs/gb/components/shared/directives.js",
-                "start": 34,
-                "end": 51
-              },
-              {
-                "name": "DirectiveResult",
-                "package": "lit-html",
-                "module": "development/directive.js",
-                "start": 56,
-                "end": 71
-              }
-            ]
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ICON_BUTTON_COLORS",
-          "declaration": {
-            "name": "ICON_BUTTON_COLORS"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ICON_BUTTON_SIZES",
-          "declaration": {
-            "name": "ICON_BUTTON_SIZES"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ICON_BUTTON_WIDTHS",
-          "declaration": {
-            "name": "ICON_BUTTON_WIDTHS"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ICON_BUTTON_CLASSES",
-          "declaration": {
-            "name": "ICON_BUTTON_CLASSES"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "iconButtonClasses",
-          "declaration": {
-            "name": "iconButtonClasses"
-          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FOCUS_RING_TYPES",
+          "declaration": {
+            "name": "FOCUS_RING_TYPES"
+          }
         },
         {
           "kind": "js",
-          "name": "setupIconButton",
+          "name": "FOCUS_RING_CLASSES",
           "declaration": {
-            "name": "setupIconButton"
+            "name": "FOCUS_RING_CLASSES"
           }
         },
         {
           "kind": "js",
-          "name": "iconButton",
+          "name": "focusRingClasses",
           "declaration": {
-            "name": "iconButton"
+            "name": "focusRingClasses"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/iconbutton/md-icon-button.js",
+      "path": "labs/gb/components/iconbutton/icon-button-element.js",
       "declarations": [
         {
           "kind": "variable",
@@ -39136,12 +39393,12 @@
         },
         {
           "kind": "class",
-          "name": "IconButton",
+          "name": "IconButtonElement",
           "description": "A Material Design icon button component.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/iconbutton/md-icon-button.js"
+            "module": "labs/gb/components/iconbutton/icon-button-element.js"
           },
           "members": [
             {
@@ -39362,7 +39619,6 @@
               }
             }
           ],
-          "tagName": "md-gb-icon-button",
           "customElement": true,
           "attributes": [
             {
@@ -39435,29 +39691,95 @@
               },
               "fieldName": "target"
             }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent",
+                "references": [
+                  {
+                    "name": "InputEvent",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 10
+                  }
+                ]
+              },
+              "description": "Fired when a toggle icon button is selected or unselected. --bubbles --composed"
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event",
+                "references": [
+                  {
+                    "name": "Event",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 5
+                  }
+                ]
+              },
+              "description": "Fired when a toggle button is selected or unselected. --bubbles"
+            }
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display an icon."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "icon-btn",
+              "description": "The icon button's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--container-height"
+            },
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--icon-color"
+            },
+            {
+              "name": "--icon-size"
+            },
+            {
+              "name": "--outline-color"
+            },
+            {
+              "name": "--outline-width"
+            },
+            {
+              "name": "--leading-space"
+            },
+            {
+              "name": "--trailing-space"
+            }
           ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "IconButton",
-          "declaration": {
-            "name": "IconButton"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-icon-button",
+          "name": "IconButtonElement",
           "declaration": {
-            "name": "IconButton"
+            "name": "IconButtonElement"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/list/list.cssresult.js",
+      "path": "labs/gb/components/iconbutton/icon-button.cssresult.js",
       "declarations": [
         {
           "kind": "variable",
@@ -39510,112 +39832,57 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/list/list.js",
+      "path": "labs/gb/components/iconbutton/icon-button.js",
       "declarations": [
         {
           "kind": "variable",
-          "name": "LIST_CLASSES",
-          "description": "List classes.",
+          "name": "ICON_BUTTON_COLORS",
+          "description": "Icon Button color configurations.",
           "type": {
-            "text": "{ readonly list: \"list\"; readonly listSegmented: \"list-segmented\"; }"
+            "text": "{ readonly filled: \"filled\"; readonly tonal: \"tonal\"; readonly outlined: \"outlined\"; readonly standard: \"standard\"; }"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "ICON_BUTTON_SIZES",
+          "description": "Icon Button size configurations.",
+          "type": {
+            "text": "{ readonly xs: \"xs\"; readonly sm: \"sm\"; readonly md: \"md\"; readonly lg: \"lg\"; readonly xl: \"xl\"; }"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "ICON_BUTTON_WIDTHS",
+          "description": "Icon Button width configurations.",
+          "type": {
+            "text": "{ readonly narrow: \"narrow\"; readonly wide: \"wide\"; }"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "ICON_BUTTON_CLASSES",
+          "description": "Icon Button classes.",
+          "type": {
+            "text": "{ iconBtn: string; iconBtnFilled: string; iconBtnTonal: string; iconBtnOutlined: string; iconBtnStandard: string; iconBtnXs: string; iconBtnSm: string; iconBtnMd: string; iconBtnLg: string; ... 7 more ...; disabled: string; }"
           }
         },
         {
           "kind": "function",
-          "name": "listClasses",
-          "description": "Returns the list classes to apply to an element based on the given state.",
+          "name": "iconButtonClasses",
+          "description": "Returns the icon button classes to apply to an element based on the given\nstate.",
           "parameters": [
             {
-              "name": "{\n  segmented = false,\n}",
-              "description": "The state of the list.",
+              "name": "{\n  color,\n  size,\n  width,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}",
+              "description": "The state of the icon button.",
               "type": {
-                "text": "ListClassesState",
+                "text": "IconButtonClassesState",
                 "references": [
                   {
-                    "name": "ListClassesState",
+                    "name": "IconButtonClassesState",
                     "package": "@material/web",
-                    "module": "labs/gb/components/list/list.js",
+                    "module": "labs/gb/components/iconbutton/icon-button.js",
                     "start": 0,
-                    "end": 16
-                  }
-                ]
-              },
-              "default": "{}",
-              "optional": true
-            }
-          ],
-          "return": {
-            "type": {
-              "text": "ClassInfo",
-              "references": [
-                {
-                  "name": "ClassInfo",
-                  "package": "lit",
-                  "module": "directives/class-map.js",
-                  "start": 0,
-                  "end": 9
-                }
-              ]
-            },
-            "description": "An object of class names and truthy values if they apply."
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "list",
-          "description": "A Lit directive that adds list styling and functionality to its element.",
-          "type": {
-            "text": "(state?: ListClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
-            "references": [
-              {
-                "name": "ListClassesState",
-                "package": "@material/web",
-                "module": "labs/gb/components/list/list.js",
-                "start": 9,
-                "end": 25
-              },
-              {
-                "name": "AdditionalClasses",
-                "package": "@material/web",
-                "module": "labs/gb/components/shared/directives.js",
-                "start": 28,
-                "end": 45
-              },
-              {
-                "name": "DirectiveResult",
-                "package": "lit-html",
-                "module": "development/directive.js",
-                "start": 50,
-                "end": 65
-              }
-            ]
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "LIST_ITEM_CLASSES",
-          "description": "List item classes.",
-          "type": {
-            "text": "{ readonly listItem: \"list-item\"; readonly listItemStatic: \"list-item-static\"; readonly listItemContent: \"list-item-content\"; readonly listItemLeading: \"list-item-leading\"; readonly listItemTrailing: \"list-item-trailing\"; ... 8 more ...; readonly disabled: string; }"
-          }
-        },
-        {
-          "kind": "function",
-          "name": "listItemClasses",
-          "description": "Returns the list item classes to apply to an element based on the given\nstate.",
-          "parameters": [
-            {
-              "name": "{\n  static: staticItem = false,\n  checked = false,\n  hover = false,\n  focus = false,\n  active = false,\n  disabled = false,\n}",
-              "description": "The state of the list item.",
-              "type": {
-                "text": "ListItemClassesState",
-                "references": [
-                  {
-                    "name": "ListItemClassesState",
-                    "package": "@material/web",
-                    "module": "labs/gb/components/list/list.js",
-                    "start": 0,
-                    "end": 20
+                    "end": 22
                   }
                 ]
               },
@@ -39641,12 +39908,12 @@
         },
         {
           "kind": "function",
-          "name": "setupListItem",
-          "description": "Sets up list item functionality for the given element.",
+          "name": "setupIconButton",
+          "description": "Sets up icon button functionality for the given element.",
           "parameters": [
             {
-              "name": "listItem",
-              "description": "The element on which to set up list item functionality.",
+              "name": "iconButton",
+              "description": "The element on which to set up icon button functionality.",
               "type": {
                 "text": "HTMLElement",
                 "references": [
@@ -39684,31 +39951,31 @@
         },
         {
           "kind": "variable",
-          "name": "listItem",
-          "description": "A Lit directive that adds list item styling and functionality to its element.",
+          "name": "iconButton",
+          "description": "A Lit directive that adds icon button styling and functionality to its element.",
           "type": {
-            "text": "(state?: ListItemClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "text": "(state?: IconButtonClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
             "references": [
               {
-                "name": "ListItemClassesState",
+                "name": "IconButtonClassesState",
                 "package": "@material/web",
-                "module": "labs/gb/components/list/list.js",
+                "module": "labs/gb/components/iconbutton/icon-button.js",
                 "start": 9,
-                "end": 29
+                "end": 31
               },
               {
                 "name": "AdditionalClasses",
                 "package": "@material/web",
                 "module": "labs/gb/components/shared/directives.js",
-                "start": 32,
-                "end": 49
+                "start": 34,
+                "end": 51
               },
               {
                 "name": "DirectiveResult",
                 "package": "lit-html",
                 "module": "development/directive.js",
-                "start": 54,
-                "end": 69
+                "start": 56,
+                "end": 71
               }
             ]
           }
@@ -39717,58 +39984,190 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LIST_CLASSES",
+          "name": "ICON_BUTTON_COLORS",
           "declaration": {
-            "name": "LIST_CLASSES"
+            "name": "ICON_BUTTON_COLORS"
           }
         },
         {
           "kind": "js",
-          "name": "listClasses",
+          "name": "ICON_BUTTON_SIZES",
           "declaration": {
-            "name": "listClasses"
+            "name": "ICON_BUTTON_SIZES"
           }
         },
         {
           "kind": "js",
-          "name": "list",
+          "name": "ICON_BUTTON_WIDTHS",
           "declaration": {
-            "name": "list"
+            "name": "ICON_BUTTON_WIDTHS"
           }
         },
         {
           "kind": "js",
-          "name": "LIST_ITEM_CLASSES",
+          "name": "ICON_BUTTON_CLASSES",
           "declaration": {
-            "name": "LIST_ITEM_CLASSES"
+            "name": "ICON_BUTTON_CLASSES"
           }
         },
         {
           "kind": "js",
-          "name": "listItemClasses",
+          "name": "iconButtonClasses",
           "declaration": {
-            "name": "listItemClasses"
+            "name": "iconButtonClasses"
           }
         },
         {
           "kind": "js",
-          "name": "setupListItem",
+          "name": "setupIconButton",
           "declaration": {
-            "name": "setupListItem"
+            "name": "setupIconButton"
           }
         },
         {
           "kind": "js",
-          "name": "listItem",
+          "name": "iconButton",
           "declaration": {
-            "name": "listItem"
+            "name": "iconButton"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/iconbutton/md-gb-icon-button.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/list/list-element.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "baseClass",
+          "type": {
+            "text": "MixinReturn<typeof LitElement, WithElementInternals>",
+            "references": [
+              {
+                "name": "MixinReturn",
+                "package": "@material/web",
+                "module": "labs/behaviors/mixin.js",
+                "start": 0,
+                "end": 11
+              },
+              {
+                "name": "WithElementInternals",
+                "package": "@material/web",
+                "module": "labs/behaviors/element-internals.js",
+                "start": 31,
+                "end": 51
+              }
+            ]
+          }
+        },
+        {
+          "kind": "class",
+          "name": "ListElement",
+          "description": "A Material Design list component.",
+          "superclass": {
+            "name": "baseClass",
+            "package": "@material/web",
+            "module": "labs/gb/components/list/list-element.js"
+          },
+          "members": [
+            {
+              "kind": "field",
+              "name": "segmented",
+              "description": "Whether to render the list with segmented items.",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "segmented"
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "static": true,
+              "privacy": "public",
+              "type": {
+                "text": "CSSResultOrNative[]",
+                "references": [
+                  {
+                    "name": "CSSResultOrNative",
+                    "package": "lit",
+                    "start": 0,
+                    "end": 17
+                  }
+                ]
+              },
+              "default": "[\n    listStyles,\n    css`\n      :host {\n        display: flex;\n      }\n      .list {\n        flex: 1;\n      }\n    `,\n  ]"
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult<1>",
+                  "references": [
+                    {
+                      "name": "TemplateResult",
+                      "package": "lit-html",
+                      "module": "development/lit-html.js",
+                      "start": 0,
+                      "end": 14
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "segmented",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "segmented"
+            }
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display list items."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "list",
+              "description": "The list's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--gap"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ListElement",
+          "declaration": {
+            "name": "ListElement"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/list/md-list-item.js",
+      "path": "labs/gb/components/list/list-item-element.js",
       "declarations": [
         {
           "kind": "variable",
@@ -39802,12 +40201,12 @@
         },
         {
           "kind": "class",
-          "name": "ListItem",
+          "name": "ListItemElement",
           "description": "A Material Design list item component.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/list/md-list-item.js"
+            "module": "labs/gb/components/list/list-item-element.js"
           },
           "members": [
             {
@@ -39931,7 +40330,6 @@
               }
             }
           ],
-          "tagName": "md-gb-list-item",
           "customElement": true,
           "attributes": [
             {
@@ -39955,151 +40353,487 @@
               },
               "fieldName": "nonInteractive"
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ListItem",
-          "declaration": {
-            "name": "ListItem"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-list-item",
-          "declaration": {
-            "name": "ListItem"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "labs/gb/components/list/md-list.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "baseClass",
-          "type": {
-            "text": "MixinReturn<typeof LitElement, WithElementInternals>",
-            "references": [
-              {
-                "name": "MixinReturn",
-                "package": "@material/web",
-                "module": "labs/behaviors/mixin.js",
-                "start": 0,
-                "end": 11
-              },
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display the item's primary label."
+            },
+            {
+              "name": "avatar",
+              "description": "Used to display a circular avatar before the item's content."
+            },
+            {
+              "name": "leading",
+              "description": "Used to display icons and content before the item's main content."
+            },
+            {
+              "name": "overline",
+              "description": "Used to display overline text above the main label."
+            },
+            {
+              "name": "supporting-text",
+              "description": "Used to display supporting text below the main label."
+            },
+            {
+              "name": "trailing-text",
+              "description": "Used to display metadata or text after the item's main content."
+            },
+            {
+              "name": "trailing",
+              "description": "Used to display icons and content after the item's main content."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "list-item",
+              "description": "The list item's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--container-height"
+            },
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--label-text-color"
+            },
+            {
+              "name": "--label-text"
+            },
+            {
+              "name": "--label-text-tracking"
+            },
+            {
+              "name": "--leading-space"
+            },
+            {
+              "name": "--trailing-space"
+            },
+            {
+              "name": "--between-space"
+            },
+            {
+              "name": "--top-space"
+            },
+            {
+              "name": "--bottom-space"
+            },
+            {
+              "name": "--avatar-size"
+            },
+            {
+              "name": "--avatar-shape"
+            },
+            {
+              "name": "--avatar-color"
+            },
+            {
+              "name": "--avatar-label"
+            },
+            {
+              "name": "--avatar-label-tracking"
+            },
+            {
+              "name": "--avatar-label-color"
+            },
+            {
+              "name": "--leading-icon-color"
+            },
+            {
+              "name": "--leading-icon-size"
+            },
+            {
+              "name": "--trailing-icon-color"
+            },
+            {
+              "name": "--trailing-icon-size"
+            },
+            {
+              "name": "--overline"
+            },
+            {
+              "name": "--overline-tracking"
+            },
+            {
+              "name": "--overline-color"
+            },
+            {
+              "name": "--supporting-text"
+            },
+            {
+              "name": "--supporting-text-tracking"
+            },
+            {
+              "name": "--supporting-text-color"
+            },
+            {
+              "name": "--trailing-supporting-text"
+            },
+            {
+              "name": "--trailing-supporting-text-tracking"
+            },
+            {
+              "name": "--trailing-supporting-text-color"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ListItemElement",
+          "declaration": {
+            "name": "ListItemElement"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/list/list.cssresult.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResult",
+            "references": [
               {
-                "name": "WithElementInternals",
-                "package": "@material/web",
-                "module": "labs/behaviors/element-internals.js",
-                "start": 31,
-                "end": 51
+                "name": "CSSResult",
+                "package": "lit",
+                "module": "development/index.js",
+                "start": 0,
+                "end": 9
               }
             ]
           }
         },
         {
-          "kind": "class",
-          "name": "List",
-          "description": "A Material Design list component.",
-          "superclass": {
-            "name": "baseClass",
-            "package": "@material/web",
-            "module": "labs/gb/components/list/md-list.js"
-          },
-          "members": [
+          "kind": "variable",
+          "name": "default",
+          "type": {
+            "text": "CSSStyleSheet",
+            "references": [
+              {
+                "name": "CSSStyleSheet",
+                "package": "global:",
+                "start": 0,
+                "end": 13
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/list/list.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "LIST_CLASSES",
+          "description": "List classes.",
+          "type": {
+            "text": "{ readonly list: \"list\"; readonly listSegmented: \"list-segmented\"; }"
+          }
+        },
+        {
+          "kind": "function",
+          "name": "listClasses",
+          "description": "Returns the list classes to apply to an element based on the given state.",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "segmented",
-              "description": "Whether to render the list with segmented items.",
-              "privacy": "public",
+              "name": "{\n  segmented = false,\n}",
+              "description": "The state of the list.",
               "type": {
-                "text": "boolean"
+                "text": "ListClassesState",
+                "references": [
+                  {
+                    "name": "ListClassesState",
+                    "package": "@material/web",
+                    "module": "labs/gb/components/list/list.js",
+                    "start": 0,
+                    "end": 16
+                  }
+                ]
               },
-              "default": "false",
-              "attribute": "segmented"
+              "default": "{}",
+              "optional": true
+            }
+          ],
+          "return": {
+            "type": {
+              "text": "ClassInfo",
+              "references": [
+                {
+                  "name": "ClassInfo",
+                  "package": "lit",
+                  "module": "directives/class-map.js",
+                  "start": 0,
+                  "end": 9
+                }
+              ]
             },
+            "description": "An object of class names and truthy values if they apply."
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "list",
+          "description": "A Lit directive that adds list styling and functionality to its element.",
+          "type": {
+            "text": "(state?: ListClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "references": [
+              {
+                "name": "ListClassesState",
+                "package": "@material/web",
+                "module": "labs/gb/components/list/list.js",
+                "start": 9,
+                "end": 25
+              },
+              {
+                "name": "AdditionalClasses",
+                "package": "@material/web",
+                "module": "labs/gb/components/shared/directives.js",
+                "start": 28,
+                "end": 45
+              },
+              {
+                "name": "DirectiveResult",
+                "package": "lit-html",
+                "module": "development/directive.js",
+                "start": 50,
+                "end": 65
+              }
+            ]
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "LIST_ITEM_CLASSES",
+          "description": "List item classes.",
+          "type": {
+            "text": "{ readonly listItem: \"list-item\"; readonly listItemStatic: \"list-item-static\"; readonly listItemContent: \"list-item-content\"; readonly listItemLeading: \"list-item-leading\"; readonly listItemTrailing: \"list-item-trailing\"; ... 8 more ...; readonly disabled: string; }"
+          }
+        },
+        {
+          "kind": "function",
+          "name": "listItemClasses",
+          "description": "Returns the list item classes to apply to an element based on the given\nstate.",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "styles",
-              "static": true,
-              "privacy": "public",
+              "name": "{\n  static: staticItem = false,\n  checked = false,\n  hover = false,\n  focus = false,\n  active = false,\n  disabled = false,\n}",
+              "description": "The state of the list item.",
               "type": {
-                "text": "CSSResultOrNative[]",
+                "text": "ListItemClassesState",
                 "references": [
                   {
-                    "name": "CSSResultOrNative",
-                    "package": "lit",
+                    "name": "ListItemClassesState",
+                    "package": "@material/web",
+                    "module": "labs/gb/components/list/list.js",
                     "start": 0,
-                    "end": 17
+                    "end": 20
                   }
                 ]
               },
-              "default": "[\n    listStyles,\n    css`\n      :host {\n        display: flex;\n      }\n      .list {\n        flex: 1;\n      }\n    `,\n  ]"
+              "default": "{}",
+              "optional": true
+            }
+          ],
+          "return": {
+            "type": {
+              "text": "ClassInfo",
+              "references": [
+                {
+                  "name": "ClassInfo",
+                  "package": "lit",
+                  "module": "directives/class-map.js",
+                  "start": 0,
+                  "end": 9
+                }
+              ]
             },
+            "description": "An object of class names and truthy values if they apply."
+          }
+        },
+        {
+          "kind": "function",
+          "name": "setupListItem",
+          "description": "Sets up list item functionality for the given element.",
+          "parameters": [
             {
-              "kind": "method",
-              "name": "render",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult<1>",
-                  "references": [
-                    {
-                      "name": "TemplateResult",
-                      "package": "lit-html",
-                      "module": "development/lit-html.js",
-                      "start": 0,
-                      "end": 14
-                    }
-                  ]
-                }
+              "name": "listItem",
+              "description": "The element on which to set up list item functionality.",
+              "type": {
+                "text": "HTMLElement",
+                "references": [
+                  {
+                    "name": "HTMLElement",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 11
+                  }
+                ]
               }
-            }
-          ],
-          "tagName": "md-gb-list",
-          "customElement": true,
-          "attributes": [
+            },
             {
-              "name": "segmented",
+              "name": "opts",
+              "description": "Setup options, supports a cleanup `signal`.",
               "type": {
-                "text": "boolean"
+                "text": "{ signal?: AbortSignal; }",
+                "references": [
+                  {
+                    "name": "AbortSignal",
+                    "package": "global:",
+                    "start": 11,
+                    "end": 22
+                  }
+                ]
               },
-              "fieldName": "segmented"
+              "optional": true
             }
-          ]
+          ],
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "listItem",
+          "description": "A Lit directive that adds list item styling and functionality to its element.",
+          "type": {
+            "text": "(state?: ListItemClassesState & AdditionalClasses) => DirectiveResult<DirectiveClass>",
+            "references": [
+              {
+                "name": "ListItemClassesState",
+                "package": "@material/web",
+                "module": "labs/gb/components/list/list.js",
+                "start": 9,
+                "end": 29
+              },
+              {
+                "name": "AdditionalClasses",
+                "package": "@material/web",
+                "module": "labs/gb/components/shared/directives.js",
+                "start": 32,
+                "end": 49
+              },
+              {
+                "name": "DirectiveResult",
+                "package": "lit-html",
+                "module": "development/directive.js",
+                "start": 54,
+                "end": 69
+              }
+            ]
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "List",
+          "name": "LIST_CLASSES",
           "declaration": {
-            "name": "List"
+            "name": "LIST_CLASSES"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "md-gb-list",
+          "kind": "js",
+          "name": "listClasses",
           "declaration": {
-            "name": "List"
+            "name": "listClasses"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "list",
+          "declaration": {
+            "name": "list"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LIST_ITEM_CLASSES",
+          "declaration": {
+            "name": "LIST_ITEM_CLASSES"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "listItemClasses",
+          "declaration": {
+            "name": "listItemClasses"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "setupListItem",
+          "declaration": {
+            "name": "setupListItem"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "listItem",
+          "declaration": {
+            "name": "listItem"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/menu/md-menu-group.js",
+      "path": "labs/gb/components/list/md-gb-list-item.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/list/md-gb-list.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/menu/md-gb-menu-group.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/menu/md-gb-menu-item.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/menu/md-gb-menu.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/menu/menu-element.js",
       "declarations": [
         {
           "kind": "variable",
           "name": "baseClass",
           "type": {
-            "text": "MixinReturn<typeof LitElement, WithElementInternals>",
+            "text": "MixinReturn<MixinReturn<typeof LitElement, Focusable>, WithElementInternals>",
             "references": [
               {
                 "name": "MixinReturn",
@@ -40108,79 +40842,97 @@
                 "start": 0,
                 "end": 11
               },
+              {
+                "name": "MixinReturn",
+                "package": "@material/web",
+                "module": "labs/behaviors/mixin.js",
+                "start": 12,
+                "end": 23
+              },
+              {
+                "name": "Focusable",
+                "package": "@material/web",
+                "module": "labs/behaviors/focusable.js",
+                "start": 43,
+                "end": 52
+              },
               {
                 "name": "WithElementInternals",
                 "package": "@material/web",
                 "module": "labs/behaviors/element-internals.js",
-                "start": 31,
-                "end": 51
+                "start": 55,
+                "end": 75
               }
             ]
           }
         },
         {
           "kind": "class",
-          "name": "MenuGroup",
-          "description": "A Material Design menu group component.",
+          "name": "MenuElement",
+          "description": "A Material Design menu component.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/menu/md-menu-group.js"
+            "module": "labs/gb/components/menu/menu-element.js"
           },
           "members": [
             {
               "kind": "field",
-              "name": "checkable",
+              "name": "color",
               "privacy": "public",
               "type": {
-                "text": "MenuItemCheckable",
+                "text": "MenuColor",
                 "references": [
                   {
-                    "name": "MenuItemCheckable",
+                    "name": "MenuColor",
                     "package": "@material/web",
                     "module": "labs/gb/components/menu/menu.js",
                     "start": 0,
-                    "end": 17
+                    "end": 9
                   }
                 ]
               },
-              "default": "null",
-              "attribute": "checkable",
-              "reflects": true
+              "default": "MENU_COLORS.standard",
+              "attribute": "color"
             },
             {
               "kind": "field",
-              "name": "menuContext",
+              "name": "previouslyFocused",
               "privacy": "private",
               "type": {
-                "text": "MenuContext",
+                "text": "HTMLElement",
                 "references": [
                   {
-                    "name": "MenuContext",
-                    "package": "@material/web",
-                    "module": "labs/gb/components/menu/menu.js",
+                    "name": "HTMLElement",
+                    "package": "global:",
                     "start": 0,
                     "end": 11
                   }
                 ]
-              },
-              "default": "null"
+              }
             },
             {
               "kind": "field",
-              "name": "menu",
-              "privacy": "public",
+              "name": "itemsSet",
+              "privacy": "private",
               "type": {
-                "text": "HTMLElement",
+                "text": "Set<HTMLElement>",
                 "references": [
                   {
-                    "name": "HTMLElement",
+                    "name": "Set",
                     "package": "global:",
                     "start": 0,
-                    "end": 11
+                    "end": 3
+                  },
+                  {
+                    "name": "HTMLElement",
+                    "package": "global:",
+                    "start": 4,
+                    "end": 15
                   }
                 ]
-              }
+              },
+              "default": "new Set<HTMLElement>()"
             },
             {
               "kind": "field",
@@ -40214,7 +40966,17 @@
                   }
                 ]
               },
-              "default": "[\n    css`\n      :host {\n        display: contents;\n      }\n    `,\n  ]"
+              "default": "[menuStyles, css``]"
+            },
+            {
+              "kind": "method",
+              "name": "connectedCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
@@ -40236,15 +40998,49 @@
               }
             }
           ],
-          "tagName": "md-gb-menu-group",
           "customElement": true,
           "attributes": [
             {
-              "name": "checkable",
+              "name": "color",
               "type": {
                 "text": "string"
               },
-              "fieldName": "checkable"
+              "fieldName": "color"
+            }
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display the menu's items."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "menu",
+              "description": "The menu's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--container-elevation"
+            },
+            {
+              "name": "--container-shape"
+            },
+            {
+              "name": "--gap"
+            },
+            {
+              "name": "--group-padding"
+            },
+            {
+              "name": "--group-shape"
+            },
+            {
+              "name": "--section-label-text-color"
             }
           ]
         }
@@ -40252,29 +41048,22 @@
       "exports": [
         {
           "kind": "js",
-          "name": "MenuGroup",
-          "declaration": {
-            "name": "MenuGroup"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-menu-group",
+          "name": "MenuElement",
           "declaration": {
-            "name": "MenuGroup"
+            "name": "MenuElement"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/menu/md-menu-item.js",
+      "path": "labs/gb/components/menu/menu-group-element.js",
       "declarations": [
         {
           "kind": "variable",
           "name": "baseClass",
           "type": {
-            "text": "MixinReturn<MixinReturn<typeof LitElement, Focusable>, WithElementInternals>",
+            "text": "MixinReturn<typeof LitElement, WithElementInternals>",
             "references": [
               {
                 "name": "MixinReturn",
@@ -40283,60 +41072,44 @@
                 "start": 0,
                 "end": 11
               },
-              {
-                "name": "MixinReturn",
-                "package": "@material/web",
-                "module": "labs/behaviors/mixin.js",
-                "start": 12,
-                "end": 23
-              },
-              {
-                "name": "Focusable",
-                "package": "@material/web",
-                "module": "labs/behaviors/focusable.js",
-                "start": 43,
-                "end": 52
-              },
               {
                 "name": "WithElementInternals",
                 "package": "@material/web",
                 "module": "labs/behaviors/element-internals.js",
-                "start": 55,
-                "end": 75
+                "start": 31,
+                "end": 51
               }
             ]
           }
         },
         {
           "kind": "class",
-          "name": "MenuItem",
-          "description": "A Material Design menu item component.",
+          "name": "MenuGroupElement",
+          "description": "A Material Design menu group component.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/menu/md-menu-item.js"
+            "module": "labs/gb/components/menu/menu-group-element.js"
           },
           "members": [
             {
               "kind": "field",
-              "name": "checked",
-              "privacy": "public",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
+              "name": "checkable",
               "privacy": "public",
               "type": {
-                "text": "boolean"
+                "text": "MenuItemCheckable",
+                "references": [
+                  {
+                    "name": "MenuItemCheckable",
+                    "package": "@material/web",
+                    "module": "labs/gb/components/menu/menu.js",
+                    "start": 0,
+                    "end": 17
+                  }
+                ]
               },
-              "default": "false",
-              "attribute": "disabled",
+              "default": "null",
+              "attribute": "checkable",
               "reflects": true
             },
             {
@@ -40354,31 +41127,31 @@
                     "end": 11
                   }
                 ]
-              }
+              },
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "checkable",
-              "privacy": "private",
+              "name": "menu",
+              "privacy": "public",
               "type": {
-                "text": "MenuItemCheckable",
+                "text": "HTMLElement",
                 "references": [
                   {
-                    "name": "MenuItemCheckable",
-                    "package": "@material/web",
-                    "module": "labs/gb/components/menu/menu.js",
+                    "name": "HTMLElement",
+                    "package": "global:",
                     "start": 0,
-                    "end": 17
+                    "end": 11
                   }
                 ]
               }
             },
             {
               "kind": "field",
-              "name": "menu",
+              "name": "items",
               "privacy": "public",
               "type": {
-                "text": "HTMLElement",
+                "text": "HTMLElement[]",
                 "references": [
                   {
                     "name": "HTMLElement",
@@ -40405,27 +41178,7 @@
                   }
                 ]
               },
-              "default": "[\n    focusRingStyles,\n    rippleStyles,\n    menuStyles,\n    css`\n      :host {\n        display: flex;\n        outline: none;\n      }\n      .menu-item {\n        flex: 1;\n      }\n      :is(.menu-item-leading, .menu-item-trailing):not(\n        :has(.has-slotted, .checkmark)\n      ) {\n        display: none;\n      }\n      slot:not(.has-slotted) {\n        display: contents;\n      }\n      .checkmark {\n        display: flex;\n        font: var(--md-icon-size) var(--md-icon-font);\n      }\n    `,\n  ]"
-            },
-            {
-              "kind": "method",
-              "name": "connectedCallback",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "disconnectedCallback",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "default": "[\n    css`\n      :host {\n        display: contents;\n      }\n    `,\n  ]"
             },
             {
               "kind": "method",
@@ -40445,53 +41198,22 @@
                   ]
                 }
               }
-            },
-            {
-              "kind": "method",
-              "name": "renderContent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TemplateResult<1>",
-                  "references": [
-                    {
-                      "name": "TemplateResult",
-                      "package": "lit-html",
-                      "module": "development/lit-html.js",
-                      "start": 0,
-                      "end": 14
-                    }
-                  ]
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "updated",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
-          "tagName": "md-gb-menu-item",
           "customElement": true,
           "attributes": [
             {
-              "name": "checked",
+              "name": "checkable",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "fieldName": "checked"
-            },
+              "fieldName": "checkable"
+            }
+          ],
+          "slots": [
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "disabled"
+              "name": "-",
+              "description": "Used to display the menu group's items."
             }
           ]
         }
@@ -40499,23 +41221,16 @@
       "exports": [
         {
           "kind": "js",
-          "name": "MenuItem",
-          "declaration": {
-            "name": "MenuItem"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-menu-item",
+          "name": "MenuGroupElement",
           "declaration": {
-            "name": "MenuItem"
+            "name": "MenuGroupElement"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/menu/md-menu.js",
+      "path": "labs/gb/components/menu/menu-item-element.js",
       "declarations": [
         {
           "kind": "variable",
@@ -40556,43 +41271,47 @@
         },
         {
           "kind": "class",
-          "name": "Menu",
-          "description": "A Material Design menu component.",
+          "name": "MenuItemElement",
+          "description": "A Material Design menu item component.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/menu/md-menu.js"
+            "module": "labs/gb/components/menu/menu-item-element.js"
           },
           "members": [
             {
               "kind": "field",
-              "name": "color",
+              "name": "checked",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "privacy": "public",
               "type": {
-                "text": "MenuColor",
-                "references": [
-                  {
-                    "name": "MenuColor",
-                    "package": "@material/web",
-                    "module": "labs/gb/components/menu/menu.js",
-                    "start": 0,
-                    "end": 9
-                  }
-                ]
+                "text": "boolean"
               },
-              "default": "MENU_COLORS.standard",
-              "attribute": "color"
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "previouslyFocused",
+              "name": "menuContext",
               "privacy": "private",
               "type": {
-                "text": "HTMLElement",
+                "text": "MenuContext",
                 "references": [
                   {
-                    "name": "HTMLElement",
-                    "package": "global:",
+                    "name": "MenuContext",
+                    "package": "@material/web",
+                    "module": "labs/gb/components/menu/menu.js",
                     "start": 0,
                     "end": 11
                   }
@@ -40601,33 +41320,27 @@
             },
             {
               "kind": "field",
-              "name": "itemsSet",
+              "name": "checkable",
               "privacy": "private",
               "type": {
-                "text": "Set<HTMLElement>",
+                "text": "MenuItemCheckable",
                 "references": [
                   {
-                    "name": "Set",
-                    "package": "global:",
+                    "name": "MenuItemCheckable",
+                    "package": "@material/web",
+                    "module": "labs/gb/components/menu/menu.js",
                     "start": 0,
-                    "end": 3
-                  },
-                  {
-                    "name": "HTMLElement",
-                    "package": "global:",
-                    "start": 4,
-                    "end": 15
+                    "end": 17
                   }
                 ]
-              },
-              "default": "new Set<HTMLElement>()"
+              }
             },
             {
               "kind": "field",
-              "name": "items",
+              "name": "menu",
               "privacy": "public",
               "type": {
-                "text": "HTMLElement[]",
+                "text": "HTMLElement",
                 "references": [
                   {
                     "name": "HTMLElement",
@@ -40654,7 +41367,7 @@
                   }
                 ]
               },
-              "default": "[menuStyles, css``]"
+              "default": "[\n    focusRingStyles,\n    rippleStyles,\n    menuStyles,\n    css`\n      :host {\n        display: flex;\n        outline: none;\n      }\n      .menu-item {\n        flex: 1;\n      }\n      :is(.menu-item-leading, .menu-item-trailing):not(\n        :has(.has-slotted, .checkmark)\n      ) {\n        display: none;\n      }\n      slot:not(.has-slotted) {\n        display: contents;\n      }\n      .checkmark {\n        display: flex;\n        font: var(--md-icon-size) var(--md-icon-font);\n      }\n    `,\n  ]"
             },
             {
               "kind": "method",
@@ -40666,6 +41379,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "disconnectedCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "render",
@@ -40684,17 +41407,180 @@
                   ]
                 }
               }
+            },
+            {
+              "kind": "method",
+              "name": "renderContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult<1>",
+                  "references": [
+                    {
+                      "name": "TemplateResult",
+                      "package": "lit-html",
+                      "module": "development/lit-html.js",
+                      "start": 0,
+                      "end": 14
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updated",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             }
           ],
-          "tagName": "md-gb-menu",
           "customElement": true,
           "attributes": [
             {
-              "name": "color",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "fieldName": "color"
+              "fieldName": "checked"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "disabled"
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event",
+                "references": [
+                  {
+                    "name": "Event",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 5
+                  }
+                ]
+              },
+              "description": "Fired when a checkbox or menu item is checked or unchecked. --bubbles"
+            },
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent",
+                "references": [
+                  {
+                    "name": "InputEvent",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 10
+                  }
+                ]
+              },
+              "description": "Fired when a checkbox or menu item is checked or unchecked. --bubbles --composed"
+            }
+          ],
+          "slots": [
+            {
+              "name": "-",
+              "description": "Used to display the item's primary label."
+            },
+            {
+              "name": "leading",
+              "description": "Used to display icons and content before the item's main content."
+            },
+            {
+              "name": "supporting-text",
+              "description": "Used to display supporting text below the main label."
+            },
+            {
+              "name": "trailing-text",
+              "description": "Used to display metadata or text after the item's main content."
+            },
+            {
+              "name": "trailing",
+              "description": "Used to display icons and content after the item's main content."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "menu-item",
+              "description": "The menu item's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--between-space"
+            },
+            {
+              "name": "--bottom-space"
+            },
+            {
+              "name": "--container-color"
+            },
+            {
+              "name": "--height"
+            },
+            {
+              "name": "--inner-corner-corner-size"
+            },
+            {
+              "name": "--label-text-color"
+            },
+            {
+              "name": "--label-text"
+            },
+            {
+              "name": "--label-text-tracking"
+            },
+            {
+              "name": "--leading-icon-color"
+            },
+            {
+              "name": "--leading-icon-size"
+            },
+            {
+              "name": "--leading-space"
+            },
+            {
+              "name": "--shape"
+            },
+            {
+              "name": "--supporting-text-color"
+            },
+            {
+              "name": "--supporting-text"
+            },
+            {
+              "name": "--supporting-text-tracking"
+            },
+            {
+              "name": "--top-space"
+            },
+            {
+              "name": "--trailing-icon-color"
+            },
+            {
+              "name": "--trailing-icon-size"
+            },
+            {
+              "name": "--trailing-space"
+            },
+            {
+              "name": "--trailing-supporting-text-color"
+            },
+            {
+              "name": "--trailing-supporting-text"
+            },
+            {
+              "name": "--trailing-supporting-text-tracking"
             }
           ]
         }
@@ -40702,16 +41588,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Menu",
-          "declaration": {
-            "name": "Menu"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-menu",
+          "name": "MenuItemElement",
           "declaration": {
-            "name": "Menu"
+            "name": "MenuItemElement"
           }
         }
       ]
@@ -41142,7 +42021,11 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/radio/md-radio.js",
+      "path": "labs/gb/components/radio/md-gb-radio.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/radio/radio-element.js",
       "declarations": [
         {
           "kind": "variable",
@@ -41204,12 +42087,12 @@
         },
         {
           "kind": "class",
-          "name": "Radio",
+          "name": "RadioElement",
           "description": "A Material Design radio component.",
           "superclass": {
             "name": "radioBaseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/radio/md-radio.js"
+            "module": "labs/gb/components/radio/radio-element.js"
           },
           "members": [
             {
@@ -41457,29 +42340,83 @@
               }
             }
           ],
-          "tagName": "md-gb-radio",
-          "customElement": true,
-          "attributes": [
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "checked"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "required"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "value"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent",
+                "references": [
+                  {
+                    "name": "InputEvent",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 10
+                  }
+                ]
+              },
+              "description": "Fired when the radio is checked (but not unchecked). --bubbles --composed"
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event",
+                "references": [
+                  {
+                    "name": "Event",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 5
+                  }
+                ]
+              },
+              "description": "Fired when the radio is checked (but not unchecked). --bubbles"
+            }
+          ],
+          "cssParts": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "checked"
+              "name": "radio",
+              "description": "The radio's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--icon-color"
             },
             {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "required"
+              "name": "--icon-size"
             },
             {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "value"
+              "name": "--state-layer-color"
+            },
+            {
+              "name": "--state-layer-shape"
+            },
+            {
+              "name": "--state-layer-size"
             }
           ]
         }
@@ -41487,16 +42424,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Radio",
-          "declaration": {
-            "name": "Radio"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-radio",
+          "name": "RadioElement",
           "declaration": {
-            "name": "Radio"
+            "name": "RadioElement"
           }
         }
       ]
@@ -42261,11 +43191,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/splitbutton/md-split-button.js",
+      "path": "labs/gb/components/splitbutton/md-gb-split-button.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/splitbutton/split-button-element.js",
       "declarations": [
         {
           "kind": "class",
-          "name": "SplitButton",
+          "name": "SplitButtonElement",
           "description": "A Material Design split button component.",
           "superclass": {
             "name": "LitElement",
@@ -42426,7 +43360,6 @@
               }
             }
           ],
-          "tagName": "md-gb-split-button",
           "customElement": true,
           "attributes": [
             {
@@ -42450,22 +43383,63 @@
               },
               "fieldName": "selected"
             }
+          ],
+          "slots": [
+            {
+              "name": "leading",
+              "description": "Requires a `<button>` for the main action."
+            },
+            {
+              "name": "trailing",
+              "description": "Requires a `<button>` for the menu action. Use `popovertarget` to display a menu."
+            },
+            {
+              "name": "-",
+              "description": "Used to render the trailing button's popover menu."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "split-btn",
+              "description": "The split button's root element."
+            },
+            {
+              "name": "leading-btn",
+              "description": "The split button's main action."
+            },
+            {
+              "name": "trailing-btn",
+              "description": "The split button's menu action."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--between-space"
+            },
+            {
+              "name": "--icon-size"
+            },
+            {
+              "name": "--inner-corner-size"
+            },
+            {
+              "name": "--outer-corner-size"
+            },
+            {
+              "name": "--leading-space"
+            },
+            {
+              "name": "--trailing-space"
+            }
           ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SplitButton",
-          "declaration": {
-            "name": "SplitButton"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-split-button",
+          "name": "SplitButtonElement",
           "declaration": {
-            "name": "SplitButton"
+            "name": "SplitButtonElement"
           }
         }
       ]
@@ -42633,7 +43607,11 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/components/switch/md-switch.js",
+      "path": "labs/gb/components/switch/md-gb-switch.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/components/switch/switch-element.js",
       "declarations": [
         {
           "kind": "variable",
@@ -42702,12 +43680,12 @@
         },
         {
           "kind": "class",
-          "name": "Switch",
+          "name": "SwitchElement",
           "description": "A Material Design switch component.",
           "superclass": {
             "name": "baseClass",
             "package": "@material/web",
-            "module": "labs/gb/components/switch/md-switch.js"
+            "module": "labs/gb/components/switch/switch-element.js"
           },
           "members": [
             {
@@ -42972,7 +43950,6 @@
               }
             }
           ],
-          "tagName": "md-gb-switch",
           "customElement": true,
           "attributes": [
             {
@@ -42996,22 +43973,101 @@
               },
               "fieldName": "value"
             }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "InputEvent",
+                "references": [
+                  {
+                    "name": "InputEvent",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 10
+                  }
+                ]
+              },
+              "description": "Fired when the switch is selected or unselected. --bubbles --composed"
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "Event",
+                "references": [
+                  {
+                    "name": "Event",
+                    "package": "global:",
+                    "start": 0,
+                    "end": 5
+                  }
+                ]
+              },
+              "description": "Fired when the switch is selected or unselected. --bubbles"
+            }
+          ],
+          "slots": [
+            {
+              "name": "off-icon",
+              "description": "Used to show an icon when the switch is unselected."
+            },
+            {
+              "name": "on-icon",
+              "description": "Used to show an icon when the switch is selected."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "switch",
+              "description": "The switch's root element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--handle-color"
+            },
+            {
+              "name": "--handle-size"
+            },
+            {
+              "name": "--with-icon-handle-size"
+            },
+            {
+              "name": "--icon-color"
+            },
+            {
+              "name": "--icon-size"
+            },
+            {
+              "name": "--state-layer-color"
+            },
+            {
+              "name": "--state-layer-size"
+            },
+            {
+              "name": "--track-color"
+            },
+            {
+              "name": "--track-height"
+            },
+            {
+              "name": "--track-outline-color"
+            },
+            {
+              "name": "--track-outline-width"
+            },
+            {
+              "name": "--track-width"
+            }
           ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Switch",
-          "declaration": {
-            "name": "Switch"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "md-gb-switch",
+          "name": "SwitchElement",
           "declaration": {
-            "name": "Switch"
+            "name": "SwitchElement"
           }
         }
       ]
@@ -43603,64 +44659,11 @@
     },
     {
       "kind": "javascript-module",
-      "path": "labs/gb/styles/icon/md-icon.cssresult.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "type": {
-            "text": "CSSResult",
-            "references": [
-              {
-                "name": "CSSResult",
-                "package": "lit",
-                "module": "development/index.js",
-                "start": 0,
-                "end": 9
-              }
-            ]
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "default",
-          "type": {
-            "text": "CSSStyleSheet",
-            "references": [
-              {
-                "name": "CSSStyleSheet",
-                "package": "global:",
-                "start": 0,
-                "end": 13
-              }
-            ]
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "default"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "labs/gb/styles/icon/md-icon.js",
+      "path": "labs/gb/styles/icon/icon-element.js",
       "declarations": [
         {
           "kind": "class",
-          "name": "Icon",
+          "name": "IconElement",
           "description": "A Material Design icon component.",
           "superclass": {
             "name": "Icon",
@@ -43697,23 +44700,72 @@
               }
             }
           ],
-          "tagName": "md-gb-icon",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Icon",
+          "name": "IconElement",
           "declaration": {
-            "name": "Icon"
+            "name": "IconElement"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/styles/icon/md-gb-icon.js"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "labs/gb/styles/icon/md-icon.cssresult.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "type": {
+            "text": "CSSResult",
+            "references": [
+              {
+                "name": "CSSResult",
+                "package": "lit",
+                "module": "development/index.js",
+                "start": 0,
+                "end": 9
+              }
+            ]
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "md-gb-icon",
+          "kind": "variable",
+          "name": "default",
+          "type": {
+            "text": "CSSStyleSheet",
+            "references": [
+              {
+                "name": "CSSStyleSheet",
+                "package": "global:",
+                "start": 0,
+                "end": 13
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
           "declaration": {
-            "name": "Icon"
+            "name": "styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default"
           }
         }
       ]