npm - @universal-material/web - Versions diffs - 3.0.31 → 3.0.33 - Mend

@universal-material/web 3.0.31 → 3.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/custom-elements.json +1445 -1445
package/package.json +1 -1
package/shared/base.styles.js +3 -3
package/shared/base.styles.js.map +1 -1
package/shared/button-wrapper.d.ts.map +1 -1
package/shared/button-wrapper.js +0 -1
package/shared/button-wrapper.js.map +1 -1
package/shared/selection-control/selection-control.d.ts.map +1 -1
package/shared/selection-control/selection-control.js +0 -1
package/shared/selection-control/selection-control.js.map +1 -1

package/custom-elements.json CHANGED Viewed

@@ -238,6 +238,255 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/app-bar/top-app-bar.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n    background-color: var(--u-top-app-bar-background-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n    color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n\n  :host([container-scrolled]) {\n    background-color: var(--u-top-app-bar-elevated-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n  }\n\n  :host(:not([has-leading-icon])) .leading-icon {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing-icon {\n    display: none;\n  }\n\n  slot[name=leading-icon],\n  slot[name=trailing-icon] {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--u-top-app-bar-icons-gap, 8px);\n  }\n\n  slot[name=leading-icon]::slotted(u-icon-button) {\n    color: inherit;\n  }\n\n  :host([position=absolute]) .content {\n    position: absolute;\n  }\n\n  :host([position=fixed]) .content {\n    position: fixed;\n    inset-inline: 0;\n    inset-block-start: 0;\n    inset-inline-start: var(--u-app-bar-offset, 0);\n  }\n\n  :host([position=absolute]),\n  :host([position=fixed]) {\n    padding-top: var(--_content-height);\n  }\n  :host([position=absolute]) .content,\n  :host([position=fixed]) .content {\n    z-index: var(--u-fixed-app-bar-z-index, 1010);\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n    background-color: inherit;\n    transition: inherit;\n    min-height: var(--u-top-app-bar-min-height, 56px);\n  }\n  @media (min-width: 840px) {\n    .content {\n      min-height: var(--u-top-app-bar-extended-min-height, 64px);\n    }\n  }\n\n  .headline {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n    font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n    letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n    font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n    margin-inline: var(--u-headline-margin, 16px);\n  }\n\n  .leading-icon {\n    margin-inline: var(--u-leading-icon-margin, 8px);\n  }\n  .leading-icon + .headline {\n    margin-inline-start: 0;\n  }\n\n  .trailing-icon {\n    padding-inline: var(--u-trailing-icon-margin, 8px);\n    margin-inline-start: auto;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/app-bar/top-app-bar.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/app-bar/top-app-bar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmTopAppBar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasLeadingIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-leading-icon",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hasTrailingIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-trailing-icon",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "'fixed' | 'absolute' | 'static'"
+              },
+              "default": "'fixed'",
+              "attribute": "position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "scrollContainer",
+              "type": {
+                "text": "'none' | 'window' | string | undefined"
+              },
+              "attribute": "scrollContainer",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "containerScrolled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "container-scrolled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "assignedLeadingIcons",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "assignedTrailingIcons",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "contentSizeObserver",
+              "type": {
+                "text": "ResizeObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "scrollContainerElement",
+              "type": {
+                "text": "{\n    addEventListener: typeof window.addEventListener;\n    removeEventListener: typeof window.removeEventListener;\n  } | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "getScrollContainer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    addEventListener: typeof window.addEventListener;\n    removeEventListener: typeof window.removeEventListener;\n  } | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "idOrElement",
+                  "type": {
+                    "text": "string | HTMLElement | undefined"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLeadingIconSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleTrailingIconSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onContainerScroll"
+            },
+            {
+              "kind": "method",
+              "name": "getScrollTop",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "number | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "container",
+                  "type": {
+                    "text": "HTMLElement & Window"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setContentHeightProperty",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "has-leading-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasLeadingIcon"
+            },
+            {
+              "name": "has-trailing-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasTrailingIcon"
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "'fixed' | 'absolute' | 'static'"
+              },
+              "default": "'fixed'",
+              "fieldName": "position"
+            },
+            {
+              "name": "scrollContainer",
+              "type": {
+                "text": "'none' | 'window' | string | undefined"
+              },
+              "fieldName": "scrollContainer"
+            },
+            {
+              "name": "container-scrolled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "containerScrolled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-top-app-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmTopAppBar",
+          "declaration": {
+            "name": "UmTopAppBar",
+            "module": "src/app-bar/top-app-bar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-top-app-bar",
+          "declaration": {
+            "name": "UmTopAppBar",
+            "module": "src/app-bar/top-app-bar.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button/button-base.ts",
@@ -2289,12 +2538,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/app-bar/top-app-bar.styles.ts",
+      "path": "src/card/card-content.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n    background-color: var(--u-top-app-bar-background-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n    color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n\n  :host([container-scrolled]) {\n    background-color: var(--u-top-app-bar-elevated-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n  }\n\n  :host(:not([has-leading-icon])) .leading-icon {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing-icon {\n    display: none;\n  }\n\n  slot[name=leading-icon],\n  slot[name=trailing-icon] {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--u-top-app-bar-icons-gap, 8px);\n  }\n\n  slot[name=leading-icon]::slotted(u-icon-button) {\n    color: inherit;\n  }\n\n  :host([position=absolute]) .content {\n    position: absolute;\n  }\n\n  :host([position=fixed]) .content {\n    position: fixed;\n    inset-inline: 0;\n    inset-block-start: 0;\n    inset-inline-start: var(--u-app-bar-offset, 0);\n  }\n\n  :host([position=absolute]),\n  :host([position=fixed]) {\n    padding-top: var(--_content-height);\n  }\n  :host([position=absolute]) .content,\n  :host([position=fixed]) .content {\n    z-index: var(--u-fixed-app-bar-z-index, 1010);\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n    background-color: inherit;\n    transition: inherit;\n    min-height: var(--u-top-app-bar-min-height, 56px);\n  }\n  @media (min-width: 840px) {\n    .content {\n      min-height: var(--u-top-app-bar-extended-min-height, 64px);\n    }\n  }\n\n  .headline {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n    font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n    letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n    font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n    margin-inline: var(--u-headline-margin, 16px);\n  }\n\n  .leading-icon {\n    margin-inline: var(--u-leading-icon-margin, 8px);\n  }\n  .leading-icon + .headline {\n    margin-inline-start: 0;\n  }\n\n  .trailing-icon {\n    padding-inline: var(--u-trailing-icon-margin, 8px);\n    margin-inline-start: auto;\n  }\n`"
+          "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": [
@@ -2303,256 +2552,7 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/app-bar/top-app-bar.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/app-bar/top-app-bar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmTopAppBar",
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasLeadingIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-leading-icon",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "hasTrailingIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-trailing-icon",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "position",
-              "type": {
-                "text": "'fixed' | 'absolute' | 'static'"
-              },
-              "default": "'fixed'",
-              "attribute": "position",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "scrollContainer",
-              "type": {
-                "text": "'none' | 'window' | string | undefined"
-              },
-              "attribute": "scrollContainer",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "containerScrolled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "container-scrolled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "assignedLeadingIcons",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "assignedTrailingIcons",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "content",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "contentSizeObserver",
-              "type": {
-                "text": "ResizeObserver | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "scrollContainerElement",
-              "type": {
-                "text": "{\n    addEventListener: typeof window.addEventListener;\n    removeEventListener: typeof window.removeEventListener;\n  } | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "method",
-              "name": "getScrollContainer",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "{\n    addEventListener: typeof window.addEventListener;\n    removeEventListener: typeof window.removeEventListener;\n  } | undefined"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "idOrElement",
-                  "type": {
-                    "text": "string | HTMLElement | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleLeadingIconSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleTrailingIconSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "onContainerScroll"
-            },
-            {
-              "kind": "method",
-              "name": "getScrollTop",
-              "privacy": "private",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "number | null"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "container",
-                  "type": {
-                    "text": "HTMLElement & Window"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setContentHeightProperty",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "has-leading-icon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
-              "fieldName": "hasLeadingIcon"
-            },
-            {
-              "name": "has-trailing-icon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
-              "fieldName": "hasTrailingIcon"
-            },
-            {
-              "name": "position",
-              "type": {
-                "text": "'fixed' | 'absolute' | 'static'"
-              },
-              "default": "'fixed'",
-              "fieldName": "position"
-            },
-            {
-              "name": "scrollContainer",
-              "type": {
-                "text": "'none' | 'window' | string | undefined"
-              },
-              "fieldName": "scrollContainer"
-            },
-            {
-              "name": "container-scrolled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "containerScrolled"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-top-app-bar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmTopAppBar",
-          "declaration": {
-            "name": "UmTopAppBar",
-            "module": "src/app-bar/top-app-bar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-top-app-bar",
-          "declaration": {
-            "name": "UmTopAppBar",
-            "module": "src/app-bar/top-app-bar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "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\n  slot {\n    border-radius: inherit;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/card/card-content.styles.ts"
+            "module": "src/card/card-content.styles.ts"
           }
         }
       ]
@@ -5347,246 +5347,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/ripple/ripple.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host,\n  .ripple-container::before {\n    --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, var(--u-state-hover-opacity, 0.08));\n    --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);\n    display: block;\n    inset: 0;\n    isolation: isolate;\n  }\n\n  .ripple-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  .ripple-container::before {\n    content: \"\";\n    background: var(--_ripple-hover-color);\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .ripple-container::before {\n      content: \"\";\n      background: var(--_ripple-hover-color);\n      opacity: var(--_ripple-hover-opacity);\n    }\n  }\n  :host,\n  .ripple-container::before,\n  .ripple {\n    position: absolute;\n    border-radius: inherit;\n  }\n\n  .ripple {\n    top: 50%;\n    left: 50%;\n    background: var(--_ripple-pressed-color);\n    border-radius: 50%;\n    box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);\n    opacity: var(--_ripple-pressed-opacity);\n    transform: scale3d(0, 0, 1);\n    pointer-events: none;\n    will-change: transform;\n  }\n  .ripple.show {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(750ms / var(--u-ripple-speed, 1));\n    transform: scale3d(1, 1, 1);\n  }\n  .ripple.show-forced {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;\n    transform: scale3d(2, 2, 1);\n    opacity: 0;\n  }\n  .ripple.dismiss {\n    opacity: 0;\n    transform: scale3d(2, 2, 1);\n  }\n\n  ::slotted(*) {\n    position: absolute !important;\n    inset: 0;\n    border-radius: inherit;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/ripple/ripple.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/ripple/ripple.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmRipple",
-          "members": [
-            {
-              "kind": "field",
-              "name": "isTouching",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the ripple.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "rippleContainer",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "attachEvents",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dettachEvents",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleTouchStart",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "TouchEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "canCreateRipple",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "createRipple",
-              "return": {
-                "type": {
-                  "text": "(() => void) | null"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "targetX",
-                  "default": "null",
-                  "type": {
-                    "text": "number | null"
-                  }
-                },
-                {
-                  "name": "targetY",
-                  "default": "null",
-                  "type": {
-                    "text": "number | null"
-                  }
-                },
-                {
-                  "name": "releaseEventName",
-                  "default": "null",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "createDismissEvent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "() => void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "ripple",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "releaseEventName",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_setElementSquareSizeAndCenter",
-              "privacy": "private",
-              "static": true,
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the ripple.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-ripple",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmRipple",
-          "declaration": {
-            "name": "UmRipple",
-            "module": "src/ripple/ripple.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-ripple",
-          "declaration": {
-            "name": "UmRipple",
-            "module": "src/ripple/ripple.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/radio/radio-list-item.ts",
+      "path": "src/radio/radio-list-item.ts",
       "declarations": [
         {
           "kind": "class",
@@ -6267,12 +6028,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/base.styles.ts",
+      "path": "src/ripple/ripple.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--u-color-primary);\n    }\n    50% {\n      outline: 6px solid var(--u-color-primary);\n    }\n    100% {\n      outline: 4px solid var(--u-color-primary);\n    }\n  }\n`"
+          "default": "css `\n  :host,\n  .ripple-container::before {\n    --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, var(--u-state-hover-opacity, 0.08));\n    --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);\n    display: block;\n    inset: 0;\n    isolation: isolate;\n  }\n\n  .ripple-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  .ripple-container::before {\n    content: \"\";\n    background: var(--_ripple-hover-color);\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .ripple-container::before {\n      content: \"\";\n      background: var(--_ripple-hover-color);\n      opacity: var(--_ripple-hover-opacity);\n    }\n  }\n  :host,\n  .ripple-container::before,\n  .ripple {\n    position: absolute;\n    border-radius: inherit;\n  }\n\n  .ripple {\n    top: 50%;\n    left: 50%;\n    background: var(--_ripple-pressed-color);\n    border-radius: 50%;\n    box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);\n    opacity: var(--_ripple-pressed-opacity);\n    transform: scale3d(0, 0, 1);\n    pointer-events: none;\n    will-change: transform;\n  }\n  .ripple.show {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(750ms / var(--u-ripple-speed, 1));\n    transform: scale3d(1, 1, 1);\n  }\n  .ripple.show-forced {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;\n    transform: scale3d(2, 2, 1);\n    opacity: 0;\n  }\n  .ripple.dismiss {\n    opacity: 0;\n    transform: scale3d(2, 2, 1);\n  }\n\n  ::slotted(*) {\n    position: absolute !important;\n    inset: 0;\n    border-radius: inherit;\n  }\n`"
         }
       ],
       "exports": [
@@ -6281,32 +6042,271 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/shared/base.styles.ts"
+            "module": "src/ripple/ripple.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/button-wrapper.styles.ts",
+      "path": "src/ripple/ripple.ts",
       "declarations": [
         {
-          "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    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\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), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 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-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\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  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    width: 100%;\n    height: 100%;\n  }\n\n  .button:focus-visible {\n    animation: offset-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\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": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/shared/button-wrapper.styles.ts"
-          }
-        }
-      ]
-    },
+          "kind": "class",
+          "description": "",
+          "name": "UmRipple",
+          "members": [
+            {
+              "kind": "field",
+              "name": "isTouching",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the ripple.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rippleContainer",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "attachEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dettachEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleTouchStart",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "TouchEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "canCreateRipple",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "createRipple",
+              "return": {
+                "type": {
+                  "text": "(() => void) | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "targetX",
+                  "default": "null",
+                  "type": {
+                    "text": "number | null"
+                  }
+                },
+                {
+                  "name": "targetY",
+                  "default": "null",
+                  "type": {
+                    "text": "number | null"
+                  }
+                },
+                {
+                  "name": "releaseEventName",
+                  "default": "null",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "createDismissEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "() => void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ripple",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "releaseEventName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_setElementSquareSizeAndCenter",
+              "privacy": "private",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the ripple.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-ripple",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmRipple",
+          "declaration": {
+            "name": "UmRipple",
+            "module": "src/ripple/ripple.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-ripple",
+          "declaration": {
+            "name": "UmRipple",
+            "module": "src/ripple/ripple.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/base.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/shared/base.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/button-wrapper.styles.ts",
+      "declarations": [
+        {
+          "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    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\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), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 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-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\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  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    width: 100%;\n    height: 100%;\n  }\n\n  .button:focus-visible {\n    animation: offset-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\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": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/shared/button-wrapper.styles.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/button-wrapper.ts",
@@ -6795,34 +6795,78 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/text-field/text-field.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/text-field/text-field.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/text-field/text-field.ts",
+      "path": "src/switch/switch-list-item.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmTextField",
+          "name": "UmSwitchListItem",
+          "mixins": [
+            {
+              "name": "mixinSelectionControlListItem",
+              "module": "/src/shared/selection-control/selection-control-list-item.js"
+            }
+          ],
+          "superclass": {
+            "name": "UmSwitch",
+            "module": "/src/switch/switch.js"
+          },
+          "tagName": "u-switch-list-item",
+          "customElement": true,
           "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[\n      (base as unknown as typeof LitElement).styles ?? [],\n      css`:host {\n        --u-list-item-block-padding: 0;\n        display: block;\n      }`\n    ]",
+              "inheritedFrom": {
+                "name": "mixinSelectionControlListItem",
+                "module": "src/shared/selection-control/selection-control-list-item.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "return": {
+                "type": {
+                  "text": "HTMLTemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "mixinSelectionControlListItem",
+                "module": "src/shared/selection-control/selection-control-list-item.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "renderRipple",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderIndicator",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "HTMLTemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -6830,20 +6874,36 @@
                 "text": "boolean"
               },
               "static": true,
-              "default": "true"
+              "default": "true",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "variant",
-              "attribute": "variant"
+              "name": "elementInternals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "label"
+              "default": "''",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
@@ -6853,70 +6913,104 @@
               },
               "default": "false",
               "attribute": "disabled",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "invalid",
+              "name": "input",
               "type": {
-                "text": "boolean"
+                "text": "HTMLInputElement"
               },
-              "default": "false",
-              "attribute": "invalid",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "#value",
-              "privacy": "private",
+              "name": "form",
               "type": {
-                "text": "string"
+                "text": "HTMLFormElement | null"
               },
-              "default": "''"
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "#checked",
+              "privacy": "private",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "field",
-              "name": "value",
-              "attribute": "value"
+              "name": "inputType",
+              "type": {
+                "text": "'checkbox' | 'radio'"
+              },
+              "privacy": "protected",
+              "default": "'checkbox'",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "#elementInternals",
-              "privacy": "private",
+              "name": "value",
               "type": {
-                "text": "ElementInternals"
+                "text": "string"
+              },
+              "default": "'on'",
+              "description": "The element value to use in form submission when checked.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
+              "name": "checked",
+              "attribute": "checked",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "method",
-              "name": "#handleInput"
+              "name": "#handleClick",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "variant",
-              "fieldName": "variant"
-            },
-            {
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "label"
+              "default": "''",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "name": "disabled",
@@ -6924,613 +7018,318 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "name": "invalid",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "invalid"
+              "default": "'on'",
+              "description": "The element value to use in form submission when checked.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "name": "value",
-              "fieldName": "value"
+              "name": "checked",
+              "fieldName": "checked",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-text-field",
-          "customElement": true
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmTextField",
+          "name": "UmSwitchListItem",
           "declaration": {
-            "name": "UmTextField",
-            "module": "src/text-field/text-field.ts"
+            "name": "UmSwitchListItem",
+            "module": "src/switch/switch-list-item.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-text-field",
+          "name": "u-switch-list-item",
           "declaration": {
-            "name": "UmTextField",
-            "module": "src/text-field/text-field.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/theme/color.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/theme/css-var-builder.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "CssVarBuilder",
-          "members": [
-            {
-              "kind": "field",
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "method",
-              "name": "create",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "CssVarBuilder"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "add",
-              "return": {
-                "type": {
-                  "text": "CssVarBuilder"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "addFromArgb",
-              "return": {
-                "type": {
-                  "text": "CssVarBuilder"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "argb",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "build",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CssVarBuilder",
-          "declaration": {
-            "name": "CssVarBuilder",
-            "module": "src/theme/css-var-builder.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/theme/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./theme-builder.js"
+            "name": "UmSwitchListItem",
+            "module": "src/switch/switch-list-item.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/theme/neutral-colors.ts",
+      "path": "src/switch/switch.styles.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "neutralColors",
-          "type": {
-            "text": "Color[]"
-          },
-          "default": "[\n  { name: 'surface', lightTone: 98, darkTone: 6 },\n  { name: 'surface-bright', lightTone: 98, darkTone: 24 },\n  { name: 'surface-dim', lightTone: 87, darkTone: 6 },\n  { name: 'surface-container-lowest', lightTone: 100, darkTone: 4 },\n  { name: 'surface-container-low', lightTone: 96, darkTone: 10 },\n  { name: 'surface-container', lightTone: 94, darkTone: 12 },\n  { name: 'surface-container-high', lightTone: 92, darkTone: 17 },\n  { name: 'surface-container-highest', lightTone: 90, darkTone: 22 },\n  { name: 'on-surface', lightTone: 10, darkTone: 90 },\n  { name: 'light', fixedTone: 98 },\n  { name: 'on-light', fixedTone: 10 },\n  { name: 'dark', fixedTone: 6 },\n  { name: 'on-dark', fixedTone: 90 },\n  { name: 'scrim', fixedTone: 0 },\n  { name: 'shadow', fixedTone: 0 },\n]"
-        },
-        {
-          "kind": "variable",
-          "name": "neutralVariantColors",
-          "type": {
-            "text": "Color[]"
-          },
-          "default": "[\n  { name: 'surface-variant', lightTone: 90, darkTone: 30 },\n  { name: 'on-surface-variant', lightTone: 30, darkTone: 80 },\n  { name: 'outline', lightTone: 50, darkTone: 60 },\n  { name: 'outline-variant', lightTone: 80, darkTone: 30 }\n]"
+          "name": "styles",
+          "default": "css `\n  :host {\n    --_state-layer-padding: var(--u-switch-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-switch-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-switch-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-switch-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-switch-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_width: 3.25rem;\n    --_height: 2rem;\n    --_state-layer-padding: 0;\n    --_selected-track-background: var(--u-switch-track-background-color, var(--u-color-primary, rgb(103, 80, 164)));\n    --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);\n    --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n    --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);\n    --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);\n    --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);\n  }\n\n  .indicator-container {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    width: var(--_height);\n    transition: width 200ms;\n  }\n\n  .state-layer,\n  .indicator {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .indicator {\n    width: var(--_height);\n    height: var(--_height);\n  }\n\n  .state-layer {\n    flex-shrink: 0;\n    width: var(--_state-layer-size);\n    height: var(--_state-layer-size);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  .handle {\n    width: var(--_unselected-handle-size);\n    height: var(--_unselected-handle-size);\n    background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));\n    border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));\n    transition: background 200ms, width 200ms, height 200ms;\n  }\n\n  input {\n    border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));\n    background-color: var(--u-switch-unselected-track-background-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n    transition: background 200ms, border-color 200ms;\n  }\n  input:checked {\n    background-color: var(--_selected-track-background);\n    border-color: var(--_selected-track-background);\n  }\n  input:checked ~ .indicator-container {\n    width: 100%;\n  }\n  input:checked ~ .indicator-container .handle {\n    width: var(--_selected-handle-size);\n    height: var(--_selected-handle-size);\n    background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .state-layer {\n      background-color: rgba(var(--u-color-on-surface-rgb, ), var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)));\n    }\n  }\n  :host(:not([disabled]):active) .indicator-container .handle {\n    width: var(--_active-handle-size);\n    height: var(--_active-handle-size);\n  }\n`"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "neutralColors",
-          "declaration": {
-            "name": "neutralColors",
-            "module": "src/theme/neutral-colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "neutralVariantColors",
+          "name": "styles",
           "declaration": {
-            "name": "neutralVariantColors",
-            "module": "src/theme/neutral-colors.ts"
+            "name": "styles",
+            "module": "src/switch/switch.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/theme/rgb-color.ts",
+      "path": "src/switch/switch.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "RgbColor",
+          "name": "UmSwitch",
           "members": [
             {
               "kind": "field",
-              "name": "r",
-              "type": {
-                "text": "number"
-              },
-              "default": "r"
-            },
-            {
-              "kind": "field",
-              "name": "g",
-              "type": {
-                "text": "number"
-              },
-              "default": "g"
-            },
-            {
-              "kind": "field",
-              "name": "b",
+              "name": "renderRipple",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "b"
+              "privacy": "protected",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "fromArgb",
-              "static": true,
+              "name": "renderIndicator",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "RgbColor"
+                  "text": "HTMLTemplateResult"
                 }
               },
-              "parameters": [
-                {
-                  "name": "argb",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "toString"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "RgbColor",
-          "declaration": {
-            "name": "RgbColor",
-            "module": "src/theme/rgb-color.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/theme/theme-builder.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ThemeBuilder",
-          "members": [
-            {
-              "kind": "field",
-              "name": "cssClass",
+              "name": "formAssociated",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null"
+              "static": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "colors",
+              "name": "elementInternals",
               "type": {
-                "text": "ThemeColor[]"
+                "text": "ElementInternals"
               },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "neutralColorPalette",
-              "type": {
-                "text": "TonalPalette"
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "field",
-              "name": "neutralVariantColorPalette",
+              "name": "name",
               "type": {
-                "text": "TonalPalette"
+                "text": "string | undefined"
+              },
+              "default": "''",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "field",
-              "name": "partial",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "create",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "ThemeBuilder"
-                }
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
               },
-              "parameters": [
-                {
-                  "name": "primaryColorHex",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "createPartial",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "ThemeBuilder"
-                }
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "addColorFromHex",
-              "return": {
-                "type": {
-                  "text": "ThemeBuilder"
-                }
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
               },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "hex",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "addColorFromPalette",
-              "return": {
-                "type": {
-                  "text": "ThemeBuilder"
-                }
+              "kind": "field",
+              "name": "#checked",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "palette",
-                  "type": {
-                    "text": "TonalPalette"
-                  }
-                }
-              ]
+              "default": "false",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "addFixedColor",
-              "return": {
-                "type": {
-                  "text": "ThemeBuilder"
-                }
+              "kind": "field",
+              "name": "inputType",
+              "type": {
+                "text": "'checkbox' | 'radio'"
               },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "hex",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "privacy": "protected",
+              "default": "'checkbox'",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setCssClass",
-              "return": {
-                "type": {
-                  "text": "ThemeBuilder"
-                }
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "cssClass",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "default": "'on'",
+              "description": "The element value to use in form submission when checked.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "ensureCssClassStartsWithDot",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "checked",
+              "attribute": "checked",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "method",
-              "name": "ensureThemeColors",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "#handleClick",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
-            },
+            }
+          ],
+          "superclass": {
+            "name": "UmSelectionControl",
+            "module": "/src/shared/selection-control/selection-control.js"
+          },
+          "tagName": "u-switch",
+          "customElement": true,
+          "attributes": [
             {
-              "kind": "method",
-              "name": "getNeutralVariables",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "dark",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "default": "''",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getNeutralVariantVariables",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "dark",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "default": "false",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getColorVariables",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "name": "value",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "color",
-                  "type": {
-                    "text": "ThemeColor"
-                  }
-                },
-                {
-                  "name": "dark",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "getColorsVariables",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "dark",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "default": "'on'",
+              "description": "The element value to use in form submission when checked.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "addColors",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "builder",
-                  "type": {
-                    "text": "CssVarBuilder"
-                  }
-                },
-                {
-                  "name": "colors",
-                  "type": {
-                    "text": "Color[]"
-                  }
-                },
-                {
-                  "name": "palette",
-                  "type": {
-                    "text": "TonalPalette"
-                  }
-                },
-                {
-                  "name": "dark",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
+              "name": "checked",
+              "fieldName": "checked",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "addToneColor",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "change",
+              "type": {
+                "text": "Event"
               },
-              "parameters": [
-                {
-                  "name": "builder",
-                  "type": {
-                    "text": "CssVarBuilder"
-                  }
-                },
-                {
-                  "name": "color",
-                  "type": {
-                    "text": "Color"
-                  }
-                },
-                {
-                  "name": "palette",
-                  "type": {
-                    "text": "TonalPalette"
-                  }
-                },
-                {
-                  "name": "dark",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "build",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             }
           ]
@@ -7539,144 +7338,121 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ThemeBuilder",
+          "name": "UmSwitch",
           "declaration": {
-            "name": "ThemeBuilder",
-            "module": "src/theme/theme-builder.ts"
+            "name": "UmSwitch",
+            "module": "src/switch/switch.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-switch",
+          "declaration": {
+            "name": "UmSwitch",
+            "module": "src/switch/switch.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/theme/theme-color.ts",
-      "declarations": [],
-      "exports": []
+      "path": "src/text-field/text-field.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/text-field/text-field.styles.ts"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/switch/switch-list-item.ts",
+      "path": "src/text-field/text-field.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmSwitchListItem",
-          "mixins": [
-            {
-              "name": "mixinSelectionControlListItem",
-              "module": "/src/shared/selection-control/selection-control-list-item.js"
-            }
-          ],
-          "superclass": {
-            "name": "UmSwitch",
-            "module": "/src/switch/switch.js"
-          },
-          "tagName": "u-switch-list-item",
-          "customElement": true,
+          "name": "UmTextField",
           "members": [
             {
               "kind": "field",
-              "name": "styles",
+              "name": "formAssociated",
               "type": {
-                "text": "array"
+                "text": "boolean"
               },
               "static": true,
-              "default": "[\n      (base as unknown as typeof LitElement).styles ?? [],\n      css`:host {\n        --u-list-item-block-padding: 0;\n        display: block;\n      }`\n    ]",
-              "inheritedFrom": {
-                "name": "mixinSelectionControlListItem",
-                "module": "src/shared/selection-control/selection-control-list-item.ts"
-              }
+              "default": "true"
             },
             {
-              "kind": "method",
-              "name": "render",
-              "return": {
-                "type": {
-                  "text": "HTMLTemplateResult"
-                }
+              "kind": "field",
+              "name": "variant",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
               },
-              "inheritedFrom": {
-                "name": "mixinSelectionControlListItem",
-                "module": "src/shared/selection-control/selection-control-list-item.ts"
-              }
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "renderRipple",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected",
               "default": "false",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "renderIndicator",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "HTMLTemplateResult"
-                }
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "false",
+              "attribute": "invalid",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "formAssociated",
+              "name": "#value",
+              "privacy": "private",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "elementInternals",
+              "name": "form",
               "type": {
-                "text": "ElementInternals"
-              },
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "text": "HTMLFormElement | null"
               }
             },
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "''",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "name": "value",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "#elementInternals",
+              "privacy": "private",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "text": "ElementInternals"
               }
             },
             {
@@ -7684,93 +7460,24 @@
               "name": "input",
               "type": {
                 "text": "HTMLInputElement"
-              },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#checked",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "inputType",
-              "type": {
-                "text": "'checkbox' | 'radio'"
-              },
-              "privacy": "protected",
-              "default": "'checkbox'",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "'on'",
-              "description": "The element value to use in form submission when checked.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "attribute": "checked",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "method",
-              "name": "#handleClick",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "name": "#handleInput"
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "default": "''",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "fieldName": "label"
             },
             {
               "name": "disabled",
@@ -7778,318 +7485,613 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "fieldName": "disabled"
             },
             {
-              "name": "value",
+              "name": "invalid",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'on'",
-              "description": "The element value to use in form submission when checked.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "false",
+              "fieldName": "invalid"
             },
             {
-              "name": "checked",
-              "fieldName": "checked",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "name": "value",
+              "fieldName": "value"
             }
           ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            }
-          ]
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-text-field",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmSwitchListItem",
+          "name": "UmTextField",
           "declaration": {
-            "name": "UmSwitchListItem",
-            "module": "src/switch/switch-list-item.ts"
+            "name": "UmTextField",
+            "module": "src/text-field/text-field.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-switch-list-item",
+          "name": "u-text-field",
           "declaration": {
-            "name": "UmSwitchListItem",
-            "module": "src/switch/switch-list-item.ts"
+            "name": "UmTextField",
+            "module": "src/text-field/text-field.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/switch/switch.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    --_state-layer-padding: var(--u-switch-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-switch-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-switch-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-switch-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-switch-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_width: 3.25rem;\n    --_height: 2rem;\n    --_state-layer-padding: 0;\n    --_selected-track-background: var(--u-switch-track-background-color, var(--u-color-primary, rgb(103, 80, 164)));\n    --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);\n    --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n    --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);\n    --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);\n    --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);\n  }\n\n  .indicator-container {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    width: var(--_height);\n    transition: width 200ms;\n  }\n\n  .state-layer,\n  .indicator {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .indicator {\n    width: var(--_height);\n    height: var(--_height);\n  }\n\n  .state-layer {\n    flex-shrink: 0;\n    width: var(--_state-layer-size);\n    height: var(--_state-layer-size);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  .handle {\n    width: var(--_unselected-handle-size);\n    height: var(--_unselected-handle-size);\n    background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));\n    border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));\n    transition: background 200ms, width 200ms, height 200ms;\n  }\n\n  input {\n    border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));\n    background-color: var(--u-switch-unselected-track-background-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n    transition: background 200ms, border-color 200ms;\n  }\n  input:checked {\n    background-color: var(--_selected-track-background);\n    border-color: var(--_selected-track-background);\n  }\n  input:checked ~ .indicator-container {\n    width: 100%;\n  }\n  input:checked ~ .indicator-container .handle {\n    width: var(--_selected-handle-size);\n    height: var(--_selected-handle-size);\n    background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .state-layer {\n      background-color: rgba(var(--u-color-on-surface-rgb, ), var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)));\n    }\n  }\n  :host(:not([disabled]):active) .indicator-container .handle {\n    width: var(--_active-handle-size);\n    height: var(--_active-handle-size);\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/switch/switch.styles.ts"
-          }
-        }
-      ]
+      "path": "src/theme/color.ts",
+      "declarations": [],
+      "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/switch/switch.ts",
+      "path": "src/theme/css-var-builder.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmSwitch",
+          "name": "CssVarBuilder",
           "members": [
             {
               "kind": "field",
-              "name": "renderRipple",
+              "name": "content",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "protected",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "method",
-              "name": "renderIndicator",
-              "privacy": "protected",
+              "name": "create",
+              "static": true,
               "return": {
                 "type": {
-                  "text": "HTMLTemplateResult"
+                  "text": "CssVarBuilder"
                 }
-              },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "add",
+              "return": {
+                "type": {
+                  "text": "CssVarBuilder"
+                }
               },
-              "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "elementInternals",
-              "type": {
-                "text": "ElementInternals"
+              "kind": "method",
+              "name": "addFromArgb",
+              "return": {
+                "type": {
+                  "text": "CssVarBuilder"
+                }
               },
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "argb",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "''",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+              "kind": "method",
+              "name": "build",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               }
-            },
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CssVarBuilder",
+          "declaration": {
+            "name": "CssVarBuilder",
+            "module": "src/theme/css-var-builder.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/theme/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./theme-builder.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/theme/neutral-colors.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "neutralColors",
+          "type": {
+            "text": "Color[]"
+          },
+          "default": "[\n  { name: 'surface', lightTone: 98, darkTone: 6 },\n  { name: 'surface-bright', lightTone: 98, darkTone: 24 },\n  { name: 'surface-dim', lightTone: 87, darkTone: 6 },\n  { name: 'surface-container-lowest', lightTone: 100, darkTone: 4 },\n  { name: 'surface-container-low', lightTone: 96, darkTone: 10 },\n  { name: 'surface-container', lightTone: 94, darkTone: 12 },\n  { name: 'surface-container-high', lightTone: 92, darkTone: 17 },\n  { name: 'surface-container-highest', lightTone: 90, darkTone: 22 },\n  { name: 'on-surface', lightTone: 10, darkTone: 90 },\n  { name: 'light', fixedTone: 98 },\n  { name: 'on-light', fixedTone: 10 },\n  { name: 'dark', fixedTone: 6 },\n  { name: 'on-dark', fixedTone: 90 },\n  { name: 'scrim', fixedTone: 0 },\n  { name: 'shadow', fixedTone: 0 },\n]"
+        },
+        {
+          "kind": "variable",
+          "name": "neutralVariantColors",
+          "type": {
+            "text": "Color[]"
+          },
+          "default": "[\n  { name: 'surface-variant', lightTone: 90, darkTone: 30 },\n  { name: 'on-surface-variant', lightTone: 30, darkTone: 80 },\n  { name: 'outline', lightTone: 50, darkTone: 60 },\n  { name: 'outline-variant', lightTone: 80, darkTone: 30 }\n]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "neutralColors",
+          "declaration": {
+            "name": "neutralColors",
+            "module": "src/theme/neutral-colors.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "neutralVariantColors",
+          "declaration": {
+            "name": "neutralVariantColors",
+            "module": "src/theme/neutral-colors.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/theme/rgb-color.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "RgbColor",
+          "members": [
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "r",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "r"
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "g",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "number"
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "g"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "b",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "number"
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "b"
             },
             {
-              "kind": "field",
-              "name": "#checked",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "fromArgb",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "RgbColor"
+                }
               },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "parameters": [
+                {
+                  "name": "argb",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "inputType",
+              "name": "toString"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RgbColor",
+          "declaration": {
+            "name": "RgbColor",
+            "module": "src/theme/rgb-color.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/theme/theme-builder.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ThemeBuilder",
+          "members": [
+            {
+              "kind": "field",
+              "name": "cssClass",
               "type": {
-                "text": "'checkbox' | 'radio'"
+                "text": "string | null"
               },
-              "privacy": "protected",
-              "default": "'checkbox'",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "colors",
               "type": {
-                "text": "string"
+                "text": "ThemeColor[]"
               },
-              "default": "'on'",
-              "description": "The element value to use in form submission when checked.",
-              "attribute": "value",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "checked",
-              "attribute": "checked",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+              "name": "neutralColorPalette",
+              "type": {
+                "text": "TonalPalette"
               }
             },
             {
-              "kind": "method",
-              "name": "#handleClick",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "UmSelectionControl",
-            "module": "/src/shared/selection-control/selection-control.js"
-          },
-          "tagName": "u-switch",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "name",
+              "kind": "field",
+              "name": "neutralVariantColorPalette",
               "type": {
-                "text": "string | undefined"
-              },
-              "default": "''",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "text": "TonalPalette"
               }
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "partial",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "create",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "ThemeBuilder"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "primaryColorHex",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "createPartial",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "ThemeBuilder"
+                }
               }
             },
             {
-              "name": "value",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "addColorFromHex",
+              "return": {
+                "type": {
+                  "text": "ThemeBuilder"
+                }
               },
-              "default": "'on'",
-              "description": "The element value to use in form submission when checked.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "hex",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addColorFromPalette",
+              "return": {
+                "type": {
+                  "text": "ThemeBuilder"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "palette",
+                  "type": {
+                    "text": "TonalPalette"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addFixedColor",
+              "return": {
+                "type": {
+                  "text": "ThemeBuilder"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "hex",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setCssClass",
+              "return": {
+                "type": {
+                  "text": "ThemeBuilder"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "cssClass",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "ensureCssClassStartsWithDot",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
-              "name": "checked",
-              "fieldName": "checked",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+              "kind": "method",
+              "name": "ensureThemeColors",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "change",
-              "type": {
-                "text": "Event"
+              "kind": "method",
+              "name": "getNeutralVariables",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+              "parameters": [
+                {
+                  "name": "dark",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getNeutralVariantVariables",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "dark",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getColorVariables",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "color",
+                  "type": {
+                    "text": "ThemeColor"
+                  }
+                },
+                {
+                  "name": "dark",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getColorsVariables",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "dark",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addColors",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "builder",
+                  "type": {
+                    "text": "CssVarBuilder"
+                  }
+                },
+                {
+                  "name": "colors",
+                  "type": {
+                    "text": "Color[]"
+                  }
+                },
+                {
+                  "name": "palette",
+                  "type": {
+                    "text": "TonalPalette"
+                  }
+                },
+                {
+                  "name": "dark",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addToneColor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "builder",
+                  "type": {
+                    "text": "CssVarBuilder"
+                  }
+                },
+                {
+                  "name": "color",
+                  "type": {
+                    "text": "Color"
+                  }
+                },
+                {
+                  "name": "palette",
+                  "type": {
+                    "text": "TonalPalette"
+                  }
+                },
+                {
+                  "name": "dark",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "build",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               }
             }
           ]
@@ -8098,22 +8100,20 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UmSwitch",
-          "declaration": {
-            "name": "UmSwitch",
-            "module": "src/switch/switch.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-switch",
+          "name": "ThemeBuilder",
           "declaration": {
-            "name": "UmSwitch",
-            "module": "src/switch/switch.ts"
+            "name": "ThemeBuilder",
+            "module": "src/theme/theme-builder.ts"
           }
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/theme/theme-color.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/selection-control/selection-control-list-item.ts",