@universal-material/web 3.0.17 → 3.0.19

package/custom-elements.json

@@ -7,6 +7,14 @@
       "path": "src/index.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./button/button-base.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -52,7 +60,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./checkbox/checkbox.js"
+            "package": "./card/card-content.js"
           }
         },
         {
@@ -60,7 +68,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./container/container.js"
+            "package": "./card/card-media.js"
           }
         },
         {
@@ -68,7 +76,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./divider/divider.js"
+            "package": "./checkbox/checkbox.js"
           }
         },
         {
@@ -76,7 +84,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./elevation/elevation.js"
+            "package": "./container/grid-base.js"
           }
         },
         {
@@ -84,7 +92,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./ripple/ripple.js"
+            "package": "./container/grid.js"
           }
         },
         {
@@ -92,256 +100,47 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./table/table.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card-content.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n  }\n\n  :host(:has(slot > *)) {\n    display: none;\n  }\n\n  :host([has-content]) {\n    padding: var(--u-card-padding, 16px);\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/card/card-content.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card-content.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmCardContent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasContent",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "has-content",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "has-content",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "hasContent"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-card-content",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmCardContent",
-          "declaration": {
-            "name": "UmCardContent",
-            "module": "src/card/card-content.ts"
+            "package": "./container/container.js"
           }
         },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-card-content",
-          "declaration": {
-            "name": "UmCardContent",
-            "module": "src/card/card-content.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card-media.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n    aspect-ratio: 1;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([wide]) {\n    aspect-ratio: 16/9;\n  }\n`"
-        }
-      ],
-      "exports": [
         {
           "kind": "js",
-          "name": "styles",
+          "name": "*",
           "declaration": {
-            "name": "styles",
-            "module": "src/card/card-media.styles.ts"
+            "name": "*",
+            "package": "./divider/divider.js"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card-media.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmCardMedia",
-          "members": [
-            {
-              "kind": "field",
-              "name": "wide",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "wide",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "wide",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "wide"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-card-media",
-          "customElement": true
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "UmCardMedia",
+          "name": "*",
           "declaration": {
-            "name": "UmCardMedia",
-            "module": "src/card/card-media.ts"
+            "name": "*",
+            "package": "./elevation/elevation.js"
           }
         },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-card-media",
-          "declaration": {
-            "name": "UmCardMedia",
-            "module": "src/card/card-media.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host(:not(:first-child)) {\n    margin-top: 8px;\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n`"
-        }
-      ],
-      "exports": [
         {
           "kind": "js",
-          "name": "styles",
+          "name": "*",
           "declaration": {
-            "name": "styles",
-            "module": "src/card/card.styles.ts"
+            "name": "*",
+            "package": "./ripple/ripple.js"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmCard",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'filled' | 'elevated' | 'outlined'"
-              },
-              "default": "'elevated'",
-              "description": "The Card variant to render.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'filled' | 'elevated' | 'outlined'"
-              },
-              "default": "'elevated'",
-              "description": "The Card variant to render.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "UmCard",
+          "name": "*",
           "declaration": {
-            "name": "UmCard",
-            "module": "src/card/card.ts"
+            "name": "*",
+            "package": "./table/table.js"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "u-card",
+          "kind": "js",
+          "name": "*",
           "declaration": {
-            "name": "UmCard",
-            "module": "src/card/card.ts"
+            "name": "*",
+            "package": "./theme/theme-builder.js"
           }
         }
       ]
@@ -353,7 +152,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: baseline;\n    position: relative;\n    white-space: nowrap;\n    font-family: var(--u-font-family-base, system-ui);\n    transition: color 150ms ease-in-out, background-color 150ms ease-in-out;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface, 29, 27, 32), 0.12)) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface, 29, 27, 32), 0.38)) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset: 0;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .button:focus-visible {\n    animation: offset-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  @keyframes offset-pulse {\n    0% {\n      outline: 4px solid var(--_color-primary);\n    }\n    50% {\n      outline: 8px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`"
+          "default": "css `\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: baseline;\n    position: relative;\n    white-space: nowrap;\n    font-family: var(--u-font-family-base, system-ui);\n    transition: color 150ms ease-in-out, background-color 150ms ease-in-out;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), 0.12)) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), 0.38)) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset: 0;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .button:focus-visible {\n    animation: offset-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  @keyframes offset-pulse {\n    0% {\n      outline: 4px solid var(--_color-primary);\n    }\n    50% {\n      outline: 8px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`"
         }
       ],
       "exports": [
@@ -374,7 +173,7 @@
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonBase",
+          "name": "UmButtonBase",
           "members": [
             {
               "kind": "field",
@@ -621,9 +420,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonBase",
+          "name": "UmButtonBase",
           "declaration": {
-            "name": "ButtonBase",
+            "name": "UmButtonBase",
             "module": "src/button/button-base.ts"
           }
         }
@@ -636,7 +435,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n  }\n\n  :host([align=start]) {\n    justify-content: flex-start;\n  }\n\n  :host([align=center]) {\n    justify-content: center;\n  }\n\n  :host([align=end]) {\n    justify-content: flex-end;\n  }\n\n  :host([stack][align=start]) {\n    align-items: flex-start;\n  }\n\n  :host([stack][align=center]) {\n    align-items: center;\n  }\n\n  :host([stack][align=end]) {\n    align-items: flex-end;\n  }\n\n  :host([stack]) {\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n`"
+          "default": "css `\n  :host {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  :host([align=start]) {\n    justify-content: flex-start;\n  }\n\n  :host([align=center]) {\n    justify-content: center;\n  }\n\n  :host([align=end]) {\n    justify-content: flex-end;\n  }\n\n  :host([stack][align=start]) {\n    align-items: flex-start;\n  }\n\n  :host([stack][align=center]) {\n    align-items: center;\n  }\n\n  :host([stack][align=end]) {\n    align-items: flex-end;\n  }\n\n  :host([stack]) {\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n`"
         }
       ],
       "exports": [
@@ -663,7 +462,7 @@
               "kind": "field",
               "name": "align",
               "type": {
-                "text": "'start' | 'center' | 'end'"
+                "text": "UmButtonSetAlignment"
               },
               "default": "'end'",
               "description": "Set the alignment of the buttons at the `start`, `center` or at the `end`.",
@@ -686,7 +485,7 @@
             {
               "name": "align",
               "type": {
-                "text": "'start' | 'center' | 'end'"
+                "text": "UmButtonSetAlignment"
               },
               "default": "'end'",
               "description": "Set the alignment of the buttons at the `start`, `center` or at the `end`.",
@@ -736,7 +535,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n    font-family: var(--u-font-family-base, system-ui);\n    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=outlined]),\n  :host([variant=text]),\n  :host([variant=elevated]) {\n    color: var(--_color-primary);\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline-color, );\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n    width: var(--u-common-button-icon-size, 1.125rem);\n    height: var(--u-common-button-icon-size, 1.125rem);\n    margin-inline-end: 8px;\n    font-size: var(--u-common-button-icon-size, 1.125rem);\n    line-height: var(--u-common-button-icon-size, 1.125rem);\n  }\n\n  :host([trailing-icon]) ::slotted([slot=icon]) {\n    margin-inline: 8px 0;\n  }\n`"
+          "default": "css `\n  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n    font-family: var(--u-font-family-base, system-ui);\n    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=outlined]),\n  :host([variant=text]),\n  :host([variant=elevated]) {\n    color: var(--_color-primary);\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n    width: var(--u-common-button-icon-size, 1.125rem);\n    height: var(--u-common-button-icon-size, 1.125rem);\n    margin-inline-end: 8px;\n    font-size: var(--u-common-button-icon-size, 1.125rem);\n    line-height: var(--u-common-button-icon-size, 1.125rem);\n  }\n\n  :host([trailing-icon]) ::slotted([slot=icon]) {\n    margin-inline: 8px 0;\n  }\n`"
         }
       ],
       "exports": [
@@ -763,7 +562,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'filled' | 'tonal' | 'elevated' | 'outlined' | 'text'"
+                "text": "UmButtonVariant"
               },
               "default": "'filled'",
               "description": "The Button variant to render",
@@ -774,7 +573,7 @@
               "kind": "field",
               "name": "color",
               "type": {
-                "text": "'primary' | 'secondary' | 'tertiary' | 'error' | undefined"
+                "text": "UmButtonColor"
               },
               "description": "The Button color\n\n_Note:_ Filled buttons only",
               "attribute": "color",
@@ -819,7 +618,7 @@
                 }
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -837,7 +636,7 @@
               "static": true,
               "default": "true",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -852,7 +651,7 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -866,7 +665,7 @@
               "description": "The URL that the link button points to.",
               "attribute": "href",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -880,7 +679,7 @@
               "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
               "attribute": "target",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -893,7 +692,7 @@
               "default": "'submit'",
               "attribute": "type",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -907,7 +706,7 @@
               "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -919,7 +718,7 @@
               },
               "attribute": "name",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -931,7 +730,7 @@
               },
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -943,7 +742,7 @@
               },
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -956,7 +755,7 @@
               "description": "The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)",
               "attribute": "form",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -968,7 +767,7 @@
                 "text": "ElementInternals"
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -977,7 +776,7 @@
               "name": "renderButton",
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -986,7 +785,7 @@
               "name": "renderLink",
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -994,7 +793,7 @@
               "kind": "method",
               "name": "focus",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1002,7 +801,7 @@
               "kind": "method",
               "name": "blur",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1016,7 +815,7 @@
                 }
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1038,7 +837,7 @@
                 }
               ],
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1060,7 +859,7 @@
                 }
               ],
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             }
@@ -1069,7 +868,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'filled' | 'tonal' | 'elevated' | 'outlined' | 'text'"
+                "text": "UmButtonVariant"
               },
               "default": "'filled'",
               "description": "The Button variant to render",
@@ -1078,7 +877,7 @@
             {
               "name": "color",
               "type": {
-                "text": "'primary' | 'secondary' | 'tertiary' | 'error' | undefined"
+                "text": "UmButtonColor"
               },
               "description": "The Button color\n\n_Note:_ Filled buttons only",
               "fieldName": "color"
@@ -1109,7 +908,7 @@
               "description": "Whether the button is disabled or not.",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1122,7 +921,7 @@
               "description": "The URL that the link button points to.",
               "fieldName": "href",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1135,7 +934,7 @@
               "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
               "fieldName": "target",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1147,7 +946,7 @@
               "default": "'submit'",
               "fieldName": "type",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1159,7 +958,7 @@
               "default": "''",
               "fieldName": "value",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1170,7 +969,7 @@
               },
               "fieldName": "name",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1182,13 +981,13 @@
               "description": "The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)",
               "fieldName": "form",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             }
           ],
           "superclass": {
-            "name": "ButtonBase",
+            "name": "UmButtonBase",
             "module": "/src/button/button-base"
           },
           "tagName": "u-button",
@@ -1242,13 +1041,13 @@
         {
           "kind": "class",
           "description": "",
-          "name": "UmFabButton",
+          "name": "UmFab",
           "members": [
             {
               "kind": "field",
               "name": "color",
               "type": {
-                "text": "'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded'"
+                "text": "UmFabColor"
               },
               "default": "'primary'",
               "description": "The FAB color variant to render.",
@@ -1259,7 +1058,7 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "UmFabSize"
               },
               "default": "'medium'",
               "description": "The size of the FAB.",
@@ -1307,7 +1106,7 @@
                 }
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1320,7 +1119,7 @@
               "static": true,
               "default": "true",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1335,7 +1134,7 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1349,7 +1148,7 @@
               "description": "The URL that the link button points to.",
               "attribute": "href",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1363,7 +1162,7 @@
               "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
               "attribute": "target",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1376,7 +1175,7 @@
               "default": "'submit'",
               "attribute": "type",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1390,7 +1189,7 @@
               "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1402,7 +1201,7 @@
               },
               "attribute": "name",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1414,7 +1213,7 @@
               },
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1426,7 +1225,7 @@
               },
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1439,7 +1238,7 @@
               "description": "The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)",
               "attribute": "form",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1451,7 +1250,7 @@
                 "text": "ElementInternals"
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1460,7 +1259,7 @@
               "name": "renderButton",
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1469,7 +1268,7 @@
               "name": "renderLink",
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1477,7 +1276,7 @@
               "kind": "method",
               "name": "focus",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1485,7 +1284,7 @@
               "kind": "method",
               "name": "blur",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1499,7 +1298,7 @@
                 }
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1521,7 +1320,7 @@
                 }
               ],
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1543,7 +1342,7 @@
                 }
               ],
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             }
@@ -1552,7 +1351,7 @@
             {
               "name": "color",
               "type": {
-                "text": "'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded'"
+                "text": "UmFabColor"
               },
               "default": "'primary'",
               "description": "The FAB color variant to render.",
@@ -1561,7 +1360,7 @@
             {
               "name": "size",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "UmFabSize"
               },
               "default": "'medium'",
               "description": "The size of the FAB.",
@@ -1601,7 +1400,7 @@
               "description": "Whether the button is disabled or not.",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1614,7 +1413,7 @@
               "description": "The URL that the link button points to.",
               "fieldName": "href",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1627,7 +1426,7 @@
               "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
               "fieldName": "target",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1639,7 +1438,7 @@
               "default": "'submit'",
               "fieldName": "type",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1651,7 +1450,7 @@
               "default": "''",
               "fieldName": "value",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1662,7 +1461,7 @@
               },
               "fieldName": "name",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1674,13 +1473,13 @@
               "description": "The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)",
               "fieldName": "form",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             }
           ],
           "superclass": {
-            "name": "ButtonBase",
+            "name": "UmButtonBase",
             "module": "/src/button/button-base"
           },
           "tagName": "u-fab",
@@ -1690,9 +1489,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UmFabButton",
+          "name": "UmFab",
           "declaration": {
-            "name": "UmFabButton",
+            "name": "UmFab",
             "module": "src/button/fab.ts"
           }
         },
@@ -1700,7 +1499,7 @@
           "kind": "custom-element-definition",
           "name": "u-fab",
           "declaration": {
-            "name": "UmFabButton",
+            "name": "UmFab",
             "module": "src/button/fab.ts"
           }
         }
@@ -1713,7 +1512,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --_surface-container-highest-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--u-icon-button-size, 2.5rem);\n    height: var(--u-icon-button-size, 2.5rem);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\n    font-family: var(--u-font-family-base, system-ui);\n  }\n\n  .icon {\n    display: inline-block;\n    width: var(--u-icon-button-icon-size, 1.5rem);\n    height: var(--u-icon-button-icon-size, 1.5rem);\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n    line-height: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-color-on-surface-variant, rgb(73, 69, 79));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-inverse-on-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n  }\n`"
+          "default": "css `\n  :host {\n    --_surface-container-highest-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--u-icon-button-size, 2.5rem);\n    height: var(--u-icon-button-size, 2.5rem);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\n    font-family: var(--u-font-family-base, system-ui);\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n    line-height: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_surface-container-highest-color));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-color-on-surface-variant, rgb(73, 69, 79));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-inverse-on-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n  }\n`"
         }
       ],
       "exports": [
@@ -1740,7 +1539,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'standard' | 'filled' | 'tonal' | 'outlined'"
+                "text": "UmIconButtonVariant"
               },
               "default": "'standard'",
               "attribute": "variant",
@@ -1805,7 +1604,7 @@
                 }
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1827,7 +1626,7 @@
                 }
               ],
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1841,7 +1640,7 @@
                 }
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1859,7 +1658,7 @@
               "static": true,
               "default": "true",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1874,7 +1673,7 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1888,7 +1687,7 @@
               "description": "The URL that the link button points to.",
               "attribute": "href",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1902,7 +1701,7 @@
               "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
               "attribute": "target",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1915,7 +1714,7 @@
               "default": "'submit'",
               "attribute": "type",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1929,7 +1728,7 @@
               "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1941,7 +1740,7 @@
               },
               "attribute": "name",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1953,7 +1752,7 @@
               },
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1965,7 +1764,7 @@
               },
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1978,7 +1777,7 @@
               "description": "The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)",
               "attribute": "form",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1990,7 +1789,7 @@
                 "text": "ElementInternals"
               },
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -1999,7 +1798,7 @@
               "name": "renderButton",
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2008,7 +1807,7 @@
               "name": "renderLink",
               "privacy": "private",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2016,7 +1815,7 @@
               "kind": "method",
               "name": "focus",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2024,7 +1823,7 @@
               "kind": "method",
               "name": "blur",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2046,7 +1845,7 @@
                 }
               ],
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             }
@@ -2055,7 +1854,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "'standard' | 'filled' | 'tonal' | 'outlined'"
+                "text": "UmIconButtonVariant"
               },
               "default": "'standard'",
               "fieldName": "variant"
@@ -2104,7 +1903,7 @@
               "description": "Whether the button is disabled or not.",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2117,7 +1916,7 @@
               "description": "The URL that the link button points to.",
               "fieldName": "href",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2130,7 +1929,7 @@
               "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
               "fieldName": "target",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2142,7 +1941,7 @@
               "default": "'submit'",
               "fieldName": "type",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2154,7 +1953,7 @@
               "default": "''",
               "fieldName": "value",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2165,7 +1964,7 @@
               },
               "fieldName": "name",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             },
@@ -2177,13 +1976,13 @@
               "description": "The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)",
               "fieldName": "form",
               "inheritedFrom": {
-                "name": "ButtonBase",
+                "name": "UmButtonBase",
                 "module": "src/button/button-base.ts"
               }
             }
           ],
           "superclass": {
-            "name": "ButtonBase",
+            "name": "UmButtonBase",
             "module": "/src/button/button-base"
           },
           "tagName": "u-icon-button",
@@ -2211,7 +2010,256 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/checkbox/checkbox.ts",
+      "path": "src/card/card-content.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n  }\n\n  :host(:has(slot > *)) {\n    display: none;\n  }\n\n  :host([has-content]) {\n    padding: var(--u-card-padding, 16px);\n  }\n\n  slot {\n    border-radius: inherit;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/card/card-content.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card-content.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmCardContent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasContent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "has-content",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "has-content",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hasContent"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-card-content",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmCardContent",
+          "declaration": {
+            "name": "UmCardContent",
+            "module": "src/card/card-content.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-card-content",
+          "declaration": {
+            "name": "UmCardContent",
+            "module": "src/card/card-content.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card-media.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n    aspect-ratio: 1;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([wide]) {\n    aspect-ratio: 16/9;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/card/card-media.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card-media.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmCardMedia",
+          "members": [
+            {
+              "kind": "field",
+              "name": "wide",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "wide",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "wide",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "wide"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-card-media",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmCardMedia",
+          "declaration": {
+            "name": "UmCardMedia",
+            "module": "src/card/card-media.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-card-media",
+          "declaration": {
+            "name": "UmCardMedia",
+            "module": "src/card/card-media.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host(:not(:first-child)) {\n    margin-top: 8px;\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n  }\n  :host([variant=elevated]) u-elevation {\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n\n  u-card-content,\n  slot {\n    border-radius: inherit;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/card/card.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmCard",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "UmCardVariant"
+              },
+              "default": "'elevated'",
+              "description": "The Card variant to render.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "UmCardVariant"
+              },
+              "default": "'elevated'",
+              "description": "The Card variant to render.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmCard",
+          "declaration": {
+            "name": "UmCard",
+            "module": "src/card/card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-card",
+          "declaration": {
+            "name": "UmCard",
+            "module": "src/card/card.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/checkbox/checkbox.ts",
       "declarations": [
         {
           "kind": "class",
@@ -2220,143 +2268,947 @@
           "members": [
             {
               "kind": "field",
-              "name": "ripple",
+              "name": "ripple",
+              "type": {
+                "text": "UmRipple"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "assignedInputs",
+              "type": {
+                "text": "HTMLInputElement[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleInputChange",
+              "privacy": "private"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-checkbox",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmCheckbox",
+          "declaration": {
+            "name": "UmCheckbox",
+            "module": "src/checkbox/checkbox.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-checkbox",
+          "declaration": {
+            "name": "UmCheckbox",
+            "module": "src/checkbox/checkbox.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/container/container.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n  }\n\n  :host::after {\n    content: \"\";\n    display: block;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/container/container.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/container/container.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmContainer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "margin",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "marginSmall",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-sm",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "marginMedium",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-md",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "marginLarge",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-lg",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "marginExtraLarge",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-xl",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "full-width",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "GridBase",
+            "module": "/src/container/grid-base.js"
+          },
+          "tagName": "u-container",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "margin",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "margin",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "margin-sm",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginSmall",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "margin-md",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginMedium",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "margin-lg",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginLarge",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "margin-xl",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginExtraLarge",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "fullWidth",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmContainer",
+          "declaration": {
+            "name": "UmContainer",
+            "module": "src/container/container.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-container",
+          "declaration": {
+            "name": "UmContainer",
+            "module": "src/container/container.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/container/grid-base.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    --_grid-spacing-sm: var(--u-spacing-sm, 8px);\n    --_grid-spacing-md: var(--u-spacing-md, 16px);\n    --_grid-spacing-lg: var(--u-spacing-lg, 24px);\n    --_grid-spacing-xl: var(--u-spacing-xl, 40px);\n    --_grid-spacing-default: var(--u-grid-spacing-default, var(--_grid-spacing-md));\n    --_grid-margin: var(--u-grid-margin-default, var(--_grid-spacing-default));\n  }\n\n  :host([margin=none]) {\n    --_grid-margin: 0;\n  }\n\n  :host([margin=small]) {\n    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n  }\n\n  :host([margin=medium]) {\n    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n  }\n\n  :host([margin=large]) {\n    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n  }\n\n  :host([margin=extra-large]) {\n    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n  }\n\n  @media (min-width: 600px) {\n    :host([margin-sm=none]) {\n      --_grid-margin: 0;\n    }\n    :host([margin-sm=small]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n    }\n    :host([margin-sm=medium]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n    }\n    :host([margin-sm=large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n    }\n    :host([margin-sm=extra-large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n    }\n  }\n  @media (min-width: 840px) {\n    :host([margin-md=none]) {\n      --_grid-margin: 0;\n    }\n    :host([margin-md=small]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n    }\n    :host([margin-md=medium]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n    }\n    :host([margin-md=large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n    }\n    :host([margin-md=extra-large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n    }\n  }\n  @media (min-width: 1200px) {\n    :host([margin-lg=none]) {\n      --_grid-margin: 0;\n    }\n    :host([margin-lg=small]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n    }\n    :host([margin-lg=medium]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n    }\n    :host([margin-lg=large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n    }\n    :host([margin-lg=extra-large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n    }\n  }\n  @media (min-width: 1600px) {\n    :host([margin-xl=none]) {\n      --_grid-margin: 0;\n    }\n    :host([margin-xl=small]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n    }\n    :host([margin-xl=medium]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n    }\n    :host([margin-xl=large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n    }\n    :host([margin-xl=extra-large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n    }\n  }\n  :host {\n    width: 100%;\n    margin-inline: auto;\n    padding: var(--u-grid-margin, var(--_grid-margin));\n  }\n  :host:host::after {\n    content: \"\";\n    display: block;\n  }\n\n  :host(:not([full-width])) {\n    max-width: var(--u-container-max-width, 992px);\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/container/grid-base.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/container/grid-base.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "GridBase",
+          "members": [
+            {
+              "kind": "field",
+              "name": "margin",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "marginSmall",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-sm",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "marginMedium",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-md",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "marginLarge",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-lg",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "marginExtraLarge",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-xl",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "full-width",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "margin",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "margin"
+            },
+            {
+              "name": "margin-sm",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginSmall"
+            },
+            {
+              "name": "margin-md",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginMedium"
+            },
+            {
+              "name": "margin-lg",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginLarge"
+            },
+            {
+              "name": "margin-xl",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginExtraLarge"
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "fullWidth"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GridBase",
+          "declaration": {
+            "name": "GridBase",
+            "module": "src/container/grid-base.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/container/grid.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n    --_grid-gutter: var(--u-grid-gutter-default, var(--u-grid-spacing-default, var(--_grid-spacing-default)));\n  }\n\n  :host([gutter=none]) {\n    --_grid-gutter: 0;\n  }\n\n  :host([gutter=small]) {\n    --_grid-gutter: var(--_grid-spacing-sm);\n  }\n\n  :host([gutter=medium]) {\n    --_grid-gutter: var(--_grid-spacing-md);\n  }\n\n  :host([gutter=large]) {\n    --_grid-gutter: var(--_grid-spacing-lg);\n  }\n\n  :host([gutter=extra-large]) {\n    --_grid-gutter: var(--_grid-spacing-xl);\n  }\n\n  :host([cols]) slot {\n    --_grid-template-columns: var(--_cols);\n  }\n\n  :host([template-columns]) slot {\n    --_grid-template-columns: var(--_template-columns);\n  }\n\n  @media (min-width: 600px) {\n    :host([gutter-sm=none]) {\n      --_grid-gutter: 0;\n    }\n    :host([gutter-sm=small]) {\n      --_grid-gutter: var(--_grid-spacing-sm);\n    }\n    :host([gutter-sm=medium]) {\n      --_grid-gutter: var(--_grid-spacing-md);\n    }\n    :host([gutter-sm=large]) {\n      --_grid-gutter: var(--_grid-spacing-lg);\n    }\n    :host([gutter-sm=extra-large]) {\n      --_grid-gutter: var(--_grid-spacing-xl);\n    }\n    :host([cols-sm]) slot {\n      --_grid-template-columns: var(--_cols-sm);\n    }\n    :host([template-columns-sm]) slot {\n      --_grid-template-columns: var(--_template-columns-sm);\n    }\n  }\n  @media (min-width: 840px) {\n    :host([gutter-md=none]) {\n      --_grid-gutter: 0;\n    }\n    :host([gutter-md=small]) {\n      --_grid-gutter: var(--_grid-spacing-sm);\n    }\n    :host([gutter-md=medium]) {\n      --_grid-gutter: var(--_grid-spacing-md);\n    }\n    :host([gutter-md=large]) {\n      --_grid-gutter: var(--_grid-spacing-lg);\n    }\n    :host([gutter-md=extra-large]) {\n      --_grid-gutter: var(--_grid-spacing-xl);\n    }\n    :host([cols-md]) slot {\n      --_grid-template-columns: var(--_cols-md);\n    }\n    :host([template-columns-md]) slot {\n      --_grid-template-columns: var(--_template-columns-md);\n    }\n  }\n  @media (min-width: 1200px) {\n    :host([gutter-lg=none]) {\n      --_grid-gutter: 0;\n    }\n    :host([gutter-lg=small]) {\n      --_grid-gutter: var(--_grid-spacing-sm);\n    }\n    :host([gutter-lg=medium]) {\n      --_grid-gutter: var(--_grid-spacing-md);\n    }\n    :host([gutter-lg=large]) {\n      --_grid-gutter: var(--_grid-spacing-lg);\n    }\n    :host([gutter-lg=extra-large]) {\n      --_grid-gutter: var(--_grid-spacing-xl);\n    }\n    :host([cols-lg]) slot {\n      --_grid-template-columns: var(--_cols-lg);\n    }\n    :host([template-columns-lg]) slot {\n      --_grid-template-columns: var(--_template-columns-lg);\n    }\n  }\n  @media (min-width: 1600px) {\n    :host([gutter-xl=none]) {\n      --_grid-gutter: 0;\n    }\n    :host([gutter-xl=small]) {\n      --_grid-gutter: var(--_grid-spacing-sm);\n    }\n    :host([gutter-xl=medium]) {\n      --_grid-gutter: var(--_grid-spacing-md);\n    }\n    :host([gutter-xl=large]) {\n      --_grid-gutter: var(--_grid-spacing-lg);\n    }\n    :host([gutter-xl=extra-large]) {\n      --_grid-gutter: var(--_grid-spacing-xl);\n    }\n    :host([cols-xl]) slot {\n      --_grid-template-columns: var(--_cols-xl);\n    }\n    :host([template-columns-xl]) slot {\n      --_grid-template-columns: var(--_template-columns-xl);\n    }\n  }\n  slot {\n    display: grid;\n    grid-template-columns: var(--_grid-template-columns);\n    gap: var(--u-grid-gutter, var(--_grid-gutter));\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/container/grid.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/container/grid.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmGrid",
+          "members": [
+            {
+              "kind": "field",
+              "name": "gutter",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "gutter",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "gutterSmall",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "gutter-sm",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "gutterMedium",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "gutter-md",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "gutterLarge",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "gutter-lg",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "gutterExtraLarge",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "gutter-xl",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cols",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "cols",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "colsSmall",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "cols-sm",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "colsMedium",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "cols-md",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "colsLarge",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "cols-lg",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "colsExtraLarge",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "cols-xl",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "templateColumns",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "undefined",
+              "attribute": "template-columns",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "templateColumnsSmall",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "template-columns-sm",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "templateColumnsMedium",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "template-columns-md",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "templateColumnsLarge",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "template-columns-lg",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "templateColumnsExtraLarge",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "template-columns-xl",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setColumnsVariable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setTemplateColumnsVariable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setProperty",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "margin",
               "type": {
-                "text": "UmRipple"
+                "text": "UmSpacingSizes | undefined"
               },
-              "privacy": "private"
+              "attribute": "margin",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "assignedInputs",
+              "name": "marginSmall",
               "type": {
-                "text": "HTMLInputElement[]"
+                "text": "UmSpacingSizes | undefined"
               },
-              "privacy": "private"
+              "attribute": "margin-sm",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "marginMedium",
               "type": {
-                "text": "HTMLInputElement | undefined"
+                "text": "UmSpacingSizes | undefined"
               },
-              "privacy": "private"
+              "attribute": "margin-md",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "marginLarge",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-lg",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "handleInputChange",
-              "privacy": "private"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-checkbox",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmCheckbox",
-          "declaration": {
-            "name": "UmCheckbox",
-            "module": "src/checkbox/checkbox.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-checkbox",
-          "declaration": {
-            "name": "UmCheckbox",
-            "module": "src/checkbox/checkbox.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/container/container.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    --_grid-spacing-small: var(--u-spacing-sm, 8px);\n    --_grid-spacing-medium: var(--u-spacing-md, 16px);\n    --_grid-spacing-large: var(--u-spacing-lg, 24px);\n    --_grid-spacing-extra-large: var(--u-spacing-xl, 40px);\n  }\n\n  :host([margin=none]) {\n    --_container-margin: 0;\n  }\n\n  :host([margin=small]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-small));\n  }\n\n  :host([margin=medium]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-medium));\n  }\n\n  :host([margin=large]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-large));\n  }\n\n  :host([margin=extra-large]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-extra-large));\n  }\n\n  :host {\n    display: block;\n    width: 100%;\n    max-width: var(--u-container-max-width, 992px);\n    margin-inline: auto;\n    padding: var(--_container-margin, var(--_grid-spacing-medium));\n  }\n\n  :host::after {\n    content: \"\";\n    display: block;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/container/container.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/container/container.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmContainer",
-          "members": [
+              "name": "marginExtraLarge",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "attribute": "margin-xl",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
             {
               "kind": "field",
-              "name": "margin",
+              "name": "fullWidth",
               "type": {
-                "text": "SpacingSizes | undefined"
+                "text": "boolean"
               },
-              "attribute": "margin",
-              "reflects": true
+              "default": "false",
+              "attribute": "full-width",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
             }
           ],
           "attributes": [
+            {
+              "name": "gutter",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "gutter"
+            },
+            {
+              "name": "gutter-sm",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "gutterSmall"
+            },
+            {
+              "name": "gutter-md",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "gutterMedium"
+            },
+            {
+              "name": "gutter-lg",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "gutterLarge"
+            },
+            {
+              "name": "gutter-xl",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "gutterExtraLarge"
+            },
+            {
+              "name": "cols",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "cols"
+            },
+            {
+              "name": "cols-sm",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "colsSmall"
+            },
+            {
+              "name": "cols-md",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "colsMedium"
+            },
+            {
+              "name": "cols-lg",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "colsLarge"
+            },
+            {
+              "name": "cols-xl",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "colsExtraLarge"
+            },
+            {
+              "name": "template-columns",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "undefined",
+              "resolveInitializer": {
+                "module": "src/container/grid.ts"
+              },
+              "fieldName": "templateColumns"
+            },
+            {
+              "name": "template-columns-sm",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "templateColumnsSmall"
+            },
+            {
+              "name": "template-columns-md",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "templateColumnsMedium"
+            },
+            {
+              "name": "template-columns-lg",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "templateColumnsLarge"
+            },
+            {
+              "name": "template-columns-xl",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "templateColumnsExtraLarge"
+            },
             {
               "name": "margin",
               "type": {
-                "text": "SpacingSizes | undefined"
+                "text": "UmSpacingSizes | undefined"
               },
-              "fieldName": "margin"
+              "fieldName": "margin",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "margin-sm",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginSmall",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "margin-md",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginMedium",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "margin-lg",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginLarge",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "margin-xl",
+              "type": {
+                "text": "UmSpacingSizes | undefined"
+              },
+              "fieldName": "marginExtraLarge",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "fullWidth",
+              "inheritedFrom": {
+                "name": "GridBase",
+                "module": "src/container/grid-base.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "GridBase",
+            "module": "/src/container/grid-base.js"
           },
-          "tagName": "u-container",
+          "tagName": "u-grid",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmContainer",
+          "name": "UmGrid",
           "declaration": {
-            "name": "UmContainer",
-            "module": "src/container/container.ts"
+            "name": "UmGrid",
+            "module": "src/container/grid.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-container",
+          "name": "u-grid",
           "declaration": {
-            "name": "UmContainer",
-            "module": "src/container/container.ts"
+            "name": "UmGrid",
+            "module": "src/container/grid.ts"
           }
         }
       ]
@@ -2575,6 +3427,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "dettachEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "handleMouseDown",
@@ -2696,14 +3558,6 @@
                   }
                 }
               ]
-            },
-            {
-              "kind": "field",
-              "name": "ariaHidden",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"true\""
             }
           ],
           "attributes": [