@universal-material/web 3.0.68 → 3.0.70

package/custom-elements.json

@@ -567,6 +567,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/button/button-base.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\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`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/button/button-base.styles.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button/button-base.ts",
@@ -941,7 +962,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  :host([alignment=start]) {\n    justify-content: flex-start;\n  }\n\n  :host([alignment=center]) {\n    justify-content: center;\n  }\n\n  :host([alignment=end]) {\n    justify-content: flex-end;\n  }\n\n  :host([stack][alignment=start]) {\n    align-items: flex-start;\n  }\n\n  :host([stack][alignment=center]) {\n    align-items: center;\n  }\n\n  :host([stack][alignment=end]) {\n    align-items: flex-end;\n  }\n\n  :host([stack]) {\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n`"
+          "default": "css `\n  :host([stack][alignment=start]) {\n    align-items: flex-start;\n  }\n\n  :host([stack][alignment=center]) {\n    align-items: center;\n  }\n\n  :host([stack][alignment=end]) {\n    align-items: flex-end;\n  }\n\n  :host([stack]) {\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n`"
         }
       ],
       "exports": [
@@ -1049,7 +1070,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\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  :host(.force-focus-ring) .focus-ring,\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: var(--_focus-ring-outline-offset);\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  :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    border-radius: inherit;\n    width: 100%;\n    height: 100%;\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  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\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    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=text]) {\n    color: var(--u-text-button-text-color, var(--_color-primary));\n  }\n\n  :host([variant=outlined]) {\n    color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n    border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n    color: var(--u-elevated-button-text-color, var(--_color-primary));\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  :host(:not([has-icon])) .icon {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_common-button-icon-size);\n    padding-inline-end: var(--_common-button-icon-margin);\n    margin-inline-end: auto;\n  }\n\n  :host([trailing-icon]) .icon {\n    padding-inline: var(--_common-button-icon-margin) 0;\n    margin-inline: auto 0;\n  }\n`"
+          "default": "css `\n  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\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    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=text]) {\n    color: var(--u-text-button-text-color, var(--_color-primary));\n  }\n\n  :host([variant=outlined]) {\n    color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n    border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n    color: var(--u-elevated-button-text-color, var(--_color-primary));\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  :host(:not([has-icon])) .icon {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_common-button-icon-size);\n    padding-inline-end: var(--_common-button-icon-margin);\n    margin-inline-end: auto;\n  }\n\n  :host([trailing-icon]) .icon {\n    padding-inline: var(--_common-button-icon-margin) 0;\n    margin-inline: auto 0;\n  }\n`"
         }
       ],
       "exports": [
@@ -1564,7 +1585,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\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  :host(.force-focus-ring) .focus-ring,\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: var(--_focus-ring-outline-offset);\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  :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    border-radius: inherit;\n    width: 100%;\n    height: 100%;\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  :host {\n    aspect-ratio: 1;\n    --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n  }\n\n  :host([lowered]) {\n    --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n    :host(:hover:not(:focus-within):not(:active)[lowered]) {\n      --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n    }\n  }\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n  }\n  :host([size=small]) {\n    width: var(--u-fab-button-small-size, 40px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([size=large]) {\n    width: var(--u-fab-button-medium-size, 96px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));\n  }\n\n  :host([extended]),\n  :host([size=medium]) {\n    width: var(--u-fab-button-medium-size, 56px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));\n  }\n\n  :host([size=large]) .icon {\n    font-size: var(--u-fab-button-icon-size, 2rem);\n  }\n\n  :host([extended]) .icon,\n  :host([size=small]) .icon,\n  :host([size=medium]) .icon {\n    font-size: var(--u-fab-button-icon-size, 1.5rem);\n  }\n\n  :host([extended]) {\n    width: auto;\n    height: var(--u-extended-fab-button-height, 56px);\n    aspect-ratio: auto;\n    min-width: var(--u-extended-fab-button-min-width, 80px);\n    padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n  }\n\n  :host([extended]) .icon {\n    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n  }\n\n  :host([color=primary]) {\n    background-color: var(--u-fab-button-primary-background-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n    color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  :host([color=secondary]) {\n    background-color: var(--u-fab-button-secondary-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([color=tertiary]) {\n    background-color: var(--u-fab-button-tertiary-background-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n    color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n  }\n\n  :host([color=branded]),\n  :host([color=surface]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n    color: var(--u-fab-button-surface-text-color, var(--_color-primary));\n  }\n\n  :host([color=branded][lowered]),\n  :host([color=surface][lowered]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n  }\n`"
+          "default": "css `\n  :host {\n    aspect-ratio: 1;\n    --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n  }\n\n  :host([lowered]) {\n    --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n    :host(:hover:not(:focus-within):not(:active)[lowered]) {\n      --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n    }\n  }\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n  }\n  :host([size=small]) {\n    width: var(--u-fab-button-small-size, 40px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([size=large]) {\n    width: var(--u-fab-button-medium-size, 96px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));\n  }\n\n  :host([extended]),\n  :host([size=medium]) {\n    width: var(--u-fab-button-medium-size, 56px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));\n  }\n\n  :host([size=large]) .icon {\n    font-size: var(--u-fab-button-icon-size, 2rem);\n  }\n\n  :host([extended]) .icon,\n  :host([size=small]) .icon,\n  :host([size=medium]) .icon {\n    font-size: var(--u-fab-button-icon-size, 1.5rem);\n  }\n\n  :host([extended]) {\n    width: auto;\n    height: var(--u-extended-fab-button-height, 56px);\n    aspect-ratio: auto;\n    min-width: var(--u-extended-fab-button-min-width, 80px);\n    padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n  }\n\n  :host([extended]) .icon {\n    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n  }\n\n  :host([color=primary]) {\n    background-color: var(--u-fab-button-primary-background-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n    color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  :host([color=secondary]) {\n    background-color: var(--u-fab-button-secondary-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([color=tertiary]) {\n    background-color: var(--u-fab-button-tertiary-background-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n    color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n  }\n\n  :host([color=branded]),\n  :host([color=surface]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n    color: var(--u-fab-button-surface-text-color, var(--_color-primary));\n  }\n\n  :host([color=branded][lowered]),\n  :host([color=surface][lowered]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n  }\n`"
         }
       ],
       "exports": [
@@ -2086,7 +2107,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\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  :host(.force-focus-ring) .focus-ring,\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: var(--_focus-ring-outline-offset);\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  :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    border-radius: inherit;\n    width: 100%;\n    height: 100%;\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  :host {\n    --_icon-button-size: var(--u-icon-button-size, 2.5rem);\n    --_color-surface-container-highest: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--_icon-button-size);\n    height: var(--_icon-button-size);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\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  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected][has-selection-icon]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected][has-selection-icon]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n    color: var(--u-outlined-icon-button-color, var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n    background-color: var(--u-standard-icon-button-selected-background-color, transparent);\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-icon-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-icon-button-disabled-border-opacity, 0.12))) !important;\n  }\n`"
+          "default": "css `\n  :host {\n    --_icon-button-size: var(--u-icon-button-size, 2.5rem);\n    --_color-surface-container-highest: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--_icon-button-size);\n    height: var(--_icon-button-size);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\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  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected][has-selection-icon]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected][has-selection-icon]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n    color: var(--u-outlined-icon-button-color, var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n    background-color: var(--u-standard-icon-button-selected-background-color, transparent);\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-icon-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-icon-button-disabled-border-opacity, 0.12))) !important;\n  }\n`"
         }
       ],
       "exports": [
@@ -3583,7 +3604,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  :host([alignment=start]) {\n    justify-content: flex-start;\n  }\n\n  :host([alignment=center]) {\n    justify-content: center;\n  }\n\n  :host([alignment=end]) {\n    justify-content: flex-end;\n  }\n\n  :host {\n    flex-wrap: wrap;\n  }\n`"
+          "default": "css `\n  :host {\n    flex-wrap: wrap;\n  }\n`"
         }
       ],
       "exports": [
@@ -3671,7 +3692,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\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  :host(.force-focus-ring) .focus-ring,\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: var(--_focus-ring-outline-offset);\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  :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    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host {\n    --_height: var(--u-chip-height, 32px);\n    --_outline-width: var(--u-chip-outline-width, 1px);\n    --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n    --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n    --_gap: var(--u-chip-gap, 8px);\n    --_icon-size: var(--u-chip-icon-size, 1.125rem);\n    --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);\n    --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);\n    --_selected-icon-color: var(--u-chip-selected-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    display: inline-block;\n    height: var(--_height);\n    border-radius: var(--_shape);\n  }\n\n  :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n    border: var(--_outline-width) solid var(--_outline-color);\n  }\n\n  :host([elevated]:not([disabled])) {\n    --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([elevated]:not([disabled]):hover) {\n      --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n    }\n  }\n  .outline {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    height: 100%;\n    padding-inline: var(--u-chip-padding, 16px);\n    gap: var(--_gap);\n  }\n\n  .icon {\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_icon-size);\n  }\n\n  .leading {\n    color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  .selected {\n    color: var(--_selected-icon-color);\n  }\n\n  .trailing {\n    color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .label {\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-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  .remove-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: var(--_remove-button-size);\n    height: var(--_remove-button-size);\n    cursor: pointer;\n    padding: 0;\n    margin: 0;\n    margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -0.5);\n    background: gray;\n    border: none;\n    border-radius: var(--u-chip-remove-button-border-radius, var(--u-shape-corner-full, 9999px));\n    background: none;\n    appearance: none;\n    outline: 0;\n    outline-offset: 0;\n    z-index: 1;\n  }\n\n  ::slotted([slot=remove-icon]),\n  ::slotted([slot=selected-icon]),\n  ::slotted([slot=leading-icon]),\n  ::slotted([slot=trailing-icon]) {\n    font-size: inherit !important;\n  }\n\n  slot[name=selected-icon] {\n    display: none;\n  }\n\n  :host(:not([clickable]):not([toggle])) .button {\n    cursor: auto;\n  }\n\n  :host([selected]:not([hide-selected-icon])) .leading {\n    display: none;\n  }\n  :host([selected]:not([hide-selected-icon])) slot[name=selected-icon] {\n    display: contents;\n  }\n\n  .default-select-icon {\n    display: contents;\n  }\n\n  :host([has-selected-icon]) .default-select-icon {\n    display: none;\n  }\n\n  :host([selected]:not([disabled])) {\n    background-color: var(--u-chip-selected-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n  }\n  :host([selected]:not([disabled])) .leading {\n    color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));\n  }\n  :host([selected]:not([disabled])) .trailing {\n    color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));\n  }\n\n  :host([has-leading-icon]) .container,\n  :host([selected]:not([hide-selected-icon])) .container {\n    padding-inline-start: var(--_gap);\n  }\n\n  :host([has-trailing-icon]) .container,\n  :host([removable]) .container {\n    padding-inline-end: var(--_gap);\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host([hide-selected-icon]) .selected,\n  :host(:not([selected])) .selected {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing {\n    display: none;\n  }\n\n  [part=default-selected-icon] {\n    display: contents;\n  }\n`"
+          "default": "css `\n  :host {\n    --_height: var(--u-chip-height, 32px);\n    --_outline-width: var(--u-chip-outline-width, 1px);\n    --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n    --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n    --_gap: var(--u-chip-gap, 8px);\n    --_icon-size: var(--u-chip-icon-size, 1.125rem);\n    --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);\n    --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);\n    --_selected-icon-color: var(--u-chip-selected-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    display: inline-block;\n    height: var(--_height);\n    border-radius: var(--_shape);\n  }\n\n  :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n    border: var(--_outline-width) solid var(--_outline-color);\n  }\n\n  :host([elevated]:not([disabled])) {\n    --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([elevated]:not([disabled]):hover) {\n      --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n    }\n  }\n  .outline {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    border-radius: inherit;\n    height: 100%;\n    padding-inline: var(--u-chip-padding, 16px);\n    gap: var(--_gap);\n  }\n\n  .icon {\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_icon-size);\n  }\n\n  .leading {\n    color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  .selected {\n    color: var(--_selected-icon-color);\n  }\n\n  .trailing {\n    color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .label {\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-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  .remove-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: var(--_remove-button-size);\n    height: var(--_remove-button-size);\n    cursor: pointer;\n    padding: 0;\n    margin: 0;\n    margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -0.5);\n    background: gray;\n    border: none;\n    border-radius: var(--u-chip-remove-button-border-radius, var(--u-shape-corner-full, 9999px));\n    background: none;\n    appearance: none;\n    outline: 0;\n    outline-offset: 0;\n    z-index: 1;\n  }\n\n  ::slotted([slot=remove-icon]),\n  ::slotted([slot=selected-icon]),\n  ::slotted([slot=leading-icon]),\n  ::slotted([slot=trailing-icon]) {\n    font-size: inherit !important;\n  }\n\n  slot[name=selected-icon] {\n    display: none;\n  }\n\n  :host(:not([clickable]):not([toggle])) .button {\n    cursor: auto;\n  }\n\n  :host([selected]:not([hide-selected-icon])) .leading {\n    display: none;\n  }\n  :host([selected]:not([hide-selected-icon])) slot[name=selected-icon] {\n    display: contents;\n  }\n\n  .default-select-icon {\n    display: contents;\n  }\n\n  :host([has-selected-icon]) .default-select-icon {\n    display: none;\n  }\n\n  :host([selected]:not([disabled])) {\n    background-color: var(--u-chip-selected-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n  }\n  :host([selected]:not([disabled])) .leading {\n    color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));\n  }\n  :host([selected]:not([disabled])) .trailing {\n    color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));\n  }\n\n  :host([has-leading-icon]) .container,\n  :host([selected]:not([hide-selected-icon])) .container {\n    padding-inline-start: var(--_gap);\n  }\n\n  :host([has-trailing-icon]) .container,\n  :host([removable]) .container {\n    padding-inline-end: var(--_gap);\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host([hide-selected-icon]) .selected,\n  :host(:not([selected])) .selected {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing {\n    display: none;\n  }\n\n  [part=default-selected-icon] {\n    display: contents;\n  }\n`"
         }
       ],
       "exports": [
@@ -4831,6 +4852,20 @@
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultTrailingIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             }
           ],
           "events": [
@@ -5966,7 +6001,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n    --_label-line-height: var(--u-field-label-line-height, 1rem);\n    --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n    --_field-control-padding: var(--u-field-control-padding, 16px);\n    --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n    --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n    --_field-min-height: var(--u-field-min-height, 56px);\n    --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n    --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n    --_active-indicator-opacity: 1;\n    --_vertical-padding: var(--u-field-vertical-padding, 8px);\n    --_icon-size: var(--u-field-icon-size, 1.5rem);\n    --_icon-padding: var(--u-field-icon-padding, 12px);\n    --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n    --_field-control-leading-padding: var(--_field-control-inline-padding);\n    --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n    --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n    --u-label-input-start: auto;\n    --u-label-input-span-leading-offset: 0;\n    --u-label-input-span-trailing-offset: 0;\n    --u-text-field-horizontal-padding: 12px;\n    display: block;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    position: relative;\n  }\n  .container::before, .container::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n  .container::before {\n    background: var(--u-color-on-surface, rgb(29, 27, 32));\n    transition: opacity 150ms;\n    opacity: 0;\n  }\n  .container::after {\n    border-width: var(--u-field-border-width, 1px);\n    border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):not([invalid]):hover) .container.filled::before {\n      opacity: var(--u-state-hover-opacity, 0.08);\n    }\n    :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .container::after {\n      border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    }\n  }\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--_icon-size);\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    line-height: var(--_icon-size);\n  }\n  .icon::slotted(*) {\n    flex-shrink: 0;\n  }\n\n  .leading-icon {\n    margin-inline-start: var(--_icon-padding);\n  }\n\n  .trailing-icon {\n    margin-inline-end: var(--_icon-padding);\n  }\n\n  .label {\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-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n    display: block;\n    position: absolute;\n    inset-inline-start: var(--_field-control-leading-padding);\n    margin-bottom: 0;\n    line-height: var(--_label-line-height);\n    color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    transition: inset 200ms, font-size 200ms;\n  }\n\n  .input-wrapper {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    padding-block: var(--_vertical-padding);\n    padding-inline: var(--_field-control-inline-padding);\n    min-height: var(--_field-min-height);\n    transition: opacity 150ms;\n  }\n\n  .input {\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    flex: 1;\n  }\n  .input:focus {\n    outline: 0;\n  }\n  .input select,\n  .input input,\n  .input ::slotted(*) {\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-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    display: block;\n    width: 100%;\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    min-height: var(--_control-line-height);\n    line-height: var(--_control-line-height);\n    padding: 0;\n    margin: 0;\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: 0 !important;\n  }\n  .input,\n  .input ::slotted(select),\n  .input ::slotted(:is(input, textarea))::placeholder {\n    transition: color 150ms 100ms;\n  }\n  .input ::slotted(:is(input, textarea))::placeholder {\n    color: var(--_field-placeholder-color);\n  }\n\n  .supporting-text {\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-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n    font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n    letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n    font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n    display: flex;\n    color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    padding-inline: 16px;\n    gap: 16px;\n  }\n  .supporting-text div:empty {\n    display: none;\n  }\n  .supporting-text div,\n  .supporting-text ::slotted(*) {\n    display: inline-block;\n    margin-top: 4px;\n  }\n\n  .error-text {\n    display: none;\n  }\n\n  .counter div, .counter::slotted(*) {\n    margin-inline-start: auto;\n  }\n\n  :host([has-leading-icon]) {\n    --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\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  :host(:focus-within) {\n    --u-field-border-width: var(--_focus-border-width);\n  }\n  :host(:focus-within) .container::after {\n    border-color: var(--u-field-focused-border-color, var(--_color-primary));\n  }\n  :host(:focus-within) .label {\n    color: var(--u-field-label-focused-color, var(--_color-primary));\n  }\n\n  :host([invalid]) .container::after {\n    border-color: var(--u-field-error-border-color, var(--_color-error));\n  }\n  :host([invalid]) .label {\n    color: var(--u-field-label-error-color, var(--_color-error));\n  }\n  :host([invalid]) .supporting-text {\n    color: var(--u-field-supporting-text-error-color, var(--_color-error));\n  }\n  :host([invalid]) .trailing-icon {\n    color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n  }\n  :host([invalid]) .leading-icon {\n    color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n  }\n\n  :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) .error-text,\n  :host([invalid][has-error-text]) .error-text {\n    display: contents;\n  }\n  :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) slot[name=supporting-text],\n  :host([invalid][has-error-text]) slot[name=supporting-text] {\n    display: none;\n  }\n\n  .container.filled {\n    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n  .container.filled::after {\n    border-bottom-style: solid;\n  }\n  .container.filled:not(.no-label) .input-wrapper {\n    padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));\n    padding-bottom: var(--_vertical-padding);\n  }\n  .container.filled .label {\n    top: var(--_vertical-padding);\n  }\n  .container.filled .input ::slotted(:is(input, textarea, select, button)) {\n    display: block;\n  }\n  .container.outlined::after {\n    --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n    border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n    border-style: solid;\n    clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n    transition: clip-path 100ms;\n  }\n  .container.outlined .label {\n    top: calc(var(--_label-line-height) / -2);\n  }\n\n  .container.outlined:focus-within::after,\n  :host(:not([empty])) .container.outlined::after {\n    --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n    clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n  }\n  .container.outlined:focus-within .label,\n  :host(:not([empty])) .container.outlined .label {\n    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n  }\n\n  :host([empty]) ::slotted(select) {\n    color: var(--_field-placeholder-color);\n  }\n\n  :host([empty]:not(:focus-within)) .label {\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    pointer-events: none;\n    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n  }\n  :host([empty]:not(:focus-within)) .input-wrapper {\n    opacity: 0;\n  }\n  :host([empty]:not(:focus-within)) .input,\n  :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n  :host([empty]:not(:focus-within)) ::slotted(select) {\n    color: transparent;\n    transition: color 150ms;\n  }\n\n  .container.no-label::after {\n    clip-path: none !important;\n  }\n\n  :host([disabled]) .container .filled {\n    background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n  }\n  :host([disabled]) .container::after {\n    border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n  }\n  :host([disabled]) .supporting-text {\n    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .label {\n    color: var(--u-field-label-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input select,\n  :host([disabled]) .input select::placeholder,\n  :host([disabled]) .input input,\n  :host([disabled]) .input input::placeholder,\n  :host([disabled]) .input ::slotted(*),\n  :host([disabled]) .input ::slotted(:is(input, textarea))::placeholder {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .trailing-icon {\n    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .leading-icon {\n    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n  }\n`"
+          "default": "css `\n  :host {\n    --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n    --_label-line-height: var(--u-field-label-line-height, 1rem);\n    --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n    --_field-control-padding: var(--u-field-control-padding, 16px);\n    --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n    --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n    --_field-min-height: var(--u-field-min-height, 56px);\n    --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n    --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n    --_active-indicator-opacity: 1;\n    --_vertical-padding: var(--u-field-vertical-padding, 8px);\n    --_icon-size: var(--u-field-icon-size, 1.5rem);\n    --_icon-padding: var(--u-field-icon-padding, 12px);\n    --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n    --_field-control-leading-padding: var(--_field-control-inline-padding);\n    --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n    --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n    --u-label-input-start: auto;\n    --u-label-input-span-leading-offset: 0;\n    --u-label-input-span-trailing-offset: 0;\n    --u-text-field-horizontal-padding: 12px;\n    display: block;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    position: relative;\n  }\n  .container::before, .container::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n  .container::before {\n    background: var(--u-color-on-surface, rgb(29, 27, 32));\n    transition: opacity 150ms;\n    opacity: 0;\n  }\n  .container::after {\n    border-width: var(--u-field-border-width, 1px);\n    border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):not([invalid]):hover) .container.filled::before {\n      opacity: var(--u-state-hover-opacity, 0.08);\n    }\n    :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .container::after {\n      border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    }\n  }\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--_icon-size);\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    line-height: var(--_icon-size);\n  }\n  .icon::slotted(*) {\n    flex-shrink: 0;\n  }\n\n  .leading-icon {\n    margin-inline-start: var(--_icon-padding);\n  }\n\n  .trailing-icon {\n    margin-inline-end: var(--_icon-padding);\n  }\n\n  .label {\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-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n    display: block;\n    position: absolute;\n    inset-inline-start: var(--_field-control-leading-padding);\n    margin-bottom: 0;\n    line-height: var(--_label-line-height);\n    color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    transition: inset 200ms, font-size 200ms;\n  }\n\n  .input-wrapper {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    padding-block: var(--_vertical-padding);\n    padding-inline: var(--_field-control-inline-padding);\n    min-height: var(--_field-min-height);\n    transition: opacity 150ms;\n  }\n\n  .input {\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    flex: 1;\n  }\n  .input:focus {\n    outline: 0;\n  }\n  .input select,\n  .input input,\n  .input ::slotted(*) {\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-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    display: block;\n    width: 100%;\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    min-height: var(--_control-line-height);\n    line-height: var(--_control-line-height);\n    padding: 0;\n    margin: 0;\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: 0 !important;\n  }\n  .input,\n  .input ::slotted(select),\n  .input ::slotted(:is(input, textarea))::placeholder {\n    transition: color 150ms 100ms;\n  }\n  .input ::slotted(:is(input, textarea))::placeholder {\n    color: var(--_field-placeholder-color);\n  }\n\n  .supporting-text {\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-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n    font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n    letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n    font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n    display: flex;\n    color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    padding-inline: 16px;\n    gap: 16px;\n  }\n  .supporting-text div:empty {\n    display: none;\n  }\n  .supporting-text div,\n  .supporting-text ::slotted(*) {\n    display: inline-block;\n    margin-top: 4px;\n  }\n\n  .error-text {\n    display: none;\n  }\n\n  .counter div, .counter::slotted(*) {\n    margin-inline-start: auto;\n  }\n\n  :host([has-leading-icon]) {\n    --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host(:not([has-leading-icon])) .leading-icon {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .container:has(slot[name=trailing-icon] span:empty) .trailing-icon {\n    display: none;\n  }\n\n  :host(:focus-within) {\n    --u-field-border-width: var(--_focus-border-width);\n  }\n  :host(:focus-within) .container::after {\n    border-color: var(--u-field-focused-border-color, var(--_color-primary));\n  }\n  :host(:focus-within) .label {\n    color: var(--u-field-label-focused-color, var(--_color-primary));\n  }\n\n  :host([invalid]) .container::after {\n    border-color: var(--u-field-error-border-color, var(--_color-error));\n  }\n  :host([invalid]) .label {\n    color: var(--u-field-label-error-color, var(--_color-error));\n  }\n  :host([invalid]) .supporting-text {\n    color: var(--u-field-supporting-text-error-color, var(--_color-error));\n  }\n  :host([invalid]) .trailing-icon {\n    color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n  }\n  :host([invalid]) .leading-icon {\n    color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n  }\n\n  :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) .error-text,\n  :host([invalid][has-error-text]) .error-text {\n    display: contents;\n  }\n  :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) slot[name=supporting-text],\n  :host([invalid][has-error-text]) slot[name=supporting-text] {\n    display: none;\n  }\n\n  .container.filled {\n    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n  .container.filled::after {\n    border-bottom-style: solid;\n  }\n  .container.filled:not(.no-label) .input-wrapper {\n    padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));\n    padding-bottom: var(--_vertical-padding);\n  }\n  .container.filled .label {\n    top: var(--_vertical-padding);\n  }\n  .container.filled .input ::slotted(:is(input, textarea, select, button)) {\n    display: block;\n  }\n  .container.outlined::after {\n    --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n    border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n    border-style: solid;\n    clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n    transition: clip-path 100ms;\n  }\n  .container.outlined .label {\n    top: calc(var(--_label-line-height) / -2);\n  }\n\n  .container.outlined:focus-within::after,\n  :host(:not([empty])) .container.outlined::after {\n    --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n    clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n  }\n  .container.outlined:focus-within .label,\n  :host(:not([empty])) .container.outlined .label {\n    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n  }\n\n  :host([empty]) ::slotted(select) {\n    color: var(--_field-placeholder-color);\n  }\n\n  :host([empty]:not(:focus-within)) .label {\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    pointer-events: none;\n    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n  }\n  :host([empty]:not(:focus-within)) .input-wrapper {\n    opacity: 0;\n  }\n  :host([empty]:not(:focus-within)) .input,\n  :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n  :host([empty]:not(:focus-within)) ::slotted(select) {\n    color: transparent;\n    transition: color 150ms;\n  }\n\n  .container.no-label::after {\n    clip-path: none !important;\n  }\n\n  :host([disabled]) .container .filled {\n    background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n  }\n  :host([disabled]) .container::after {\n    border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n  }\n  :host([disabled]) .supporting-text {\n    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .label {\n    color: var(--u-field-label-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input select,\n  :host([disabled]) .input select::placeholder,\n  :host([disabled]) .input input,\n  :host([disabled]) .input input::placeholder,\n  :host([disabled]) .input ::slotted(*),\n  :host([disabled]) .input ::slotted(:is(input, textarea))::placeholder {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .trailing-icon {\n    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .leading-icon {\n    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n  }\n`"
         }
       ],
       "exports": [
@@ -6220,6 +6255,16 @@
               "kind": "method",
               "name": "setLabelWidthProperties",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultTrailingIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
             }
           ],
           "attributes": [
@@ -6731,6 +6776,20 @@
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultTrailingIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             }
           ],
           "attributes": [
@@ -7046,7 +7105,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\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  :host(.force-focus-ring) .focus-ring,\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: var(--_focus-ring-outline-offset);\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  :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    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host {\n    display: block;\n    --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.125rem);\n    --_menu-item-padding: var(--u-menu-item-padding, 12px);\n    --u-focus-ring-outline-offset: -4px;\n    height: var(--u-menu-item-height, 56px);\n    padding-inline: var(--_menu-item-padding);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\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-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  :host(:not([has-icon])) .icon {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_menu-item-icon-size);\n    line-height: var(--_menu-item-icon-size);\n    margin-inline-end: var(--u-menu-item-icon-margin, 12px);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    justify-content: flex-start;\n  }\n\n  :host(.force-focus-ring) .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n`"
+          "default": "css `\n  :host {\n    display: block;\n    --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);\n    --_menu-item-padding: var(--u-menu-item-padding, 12px);\n    --u-focus-ring-outline-offset: -4px;\n    height: var(--u-menu-item-height, 56px);\n    padding-inline: var(--_menu-item-padding);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\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-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing:has(slot[name=trailing-icon] span:empty) {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_menu-item-icon-size);\n    line-height: var(--_menu-item-icon-size);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    justify-content: flex-start;\n    gap: var(--u-menu-item-icon-margin, 12px);\n  }\n\n  :host(.force-focus-ring) .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    flex: 1;\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`"
         }
       ],
       "exports": [
@@ -7090,33 +7149,36 @@
             },
             {
               "kind": "field",
-              "name": "hasIcon",
+              "name": "hasLeadingIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-icon",
+              "description": "Whether the menu item has leading icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-leading-icon",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasBadge",
+              "name": "hasTrailingIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
-              "attribute": "has-badge",
+              "description": "Whether the menu item has trailing icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-trailing-icon",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "assignedIcons",
+              "name": "hasBadge",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
+              "attribute": "has-badge",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -7131,6 +7193,11 @@
                 "module": "src/shared/button-wrapper.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "#handleMouseEnter",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "renderContent",
@@ -7147,8 +7214,37 @@
             },
             {
               "kind": "method",
-              "name": "handleIconSlotChange",
-              "privacy": "private"
+              "name": "renderDefaultTrailingIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleLeadingIconSlotChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#handleTrailingIconSlotChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -7365,13 +7461,22 @@
               "fieldName": "active"
             },
             {
-              "name": "has-icon",
+              "name": "has-leading-icon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
-              "fieldName": "hasIcon"
+              "description": "Whether the menu item has leading icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasLeadingIcon"
+            },
+            {
+              "name": "has-trailing-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the menu item has trailing icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasTrailingIcon"
             },
             {
               "name": "has-badge",
@@ -7465,7 +7570,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --u-elevation-level: var(--u-menu-elevation-level, 2);\n    display: block;\n    width: 0;\n  }\n\n  :host([positioning=relative]) {\n    position: relative;\n  }\n\n  :host([positioning=fixed]) {\n    position: fixed;\n  }\n\n  .ref {\n    position: absolute;\n    inset-inline-start: 0;\n    pointer-events: none;\n  }\n\n  .menu {\n    position: absolute;\n    display: flex;\n    min-width: var(--u-menu-min-width, 112px);\n    max-width: var(--u-menu-max-width, 280px);\n    background: var(--u-menu-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n    border-radius: var(--u-menu-shape-corner, var(--u-shape-corner-extra-small, 4px));\n    opacity: 0;\n    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 350ms, opacity 350ms;\n    transform: scale3d(0, 0, 1);\n    transform-origin: top;\n    z-index: var(--u-menu-z-index, 1020);\n  }\n  .menu.up {\n    transform: scale3d(1, 0, 0);\n    transform-origin: bottom;\n  }\n\n  .content {\n    width: 100%;\n    padding-block: var(--u-menu-padding, 8px);\n    opacity: 0;\n    transition: opacity 1ms 400ms;\n    overflow: auto;\n  }\n\n  :host([open]) .menu {\n    opacity: 1;\n    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms;\n    transform: scale3d(1, 1, 1);\n  }\n  :host([open]) .content {\n    opacity: 1;\n    transition: opacity 300ms 150ms;\n  }\n`"
+          "default": "css `\n  :host {\n    --u-elevation-level: var(--u-menu-elevation-level, 2);\n    display: block;\n    width: 0;\n  }\n\n  :host([positioning=relative]) {\n    position: relative;\n  }\n\n  :host([positioning=fixed]) {\n    position: fixed;\n  }\n\n  .ref {\n    position: absolute;\n    inset-inline-start: 0;\n    pointer-events: none;\n  }\n\n  .menu {\n    position: absolute;\n    display: flex;\n    min-width: var(--u-menu-min-width, 112px);\n    max-width: var(--u-menu-max-width, 280px);\n    background: var(--u-menu-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n    border-radius: var(--u-menu-shape-corner, var(--u-shape-corner-extra-small, 4px));\n    opacity: 0;\n    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 350ms, opacity 350ms;\n    transform: scale3d(0, 0, 1);\n    transform-origin: top;\n    z-index: var(--u-menu-z-index, 1020);\n  }\n  .menu.up {\n    transform: scale3d(1, 0, 0);\n    transform-origin: bottom;\n  }\n\n  .content {\n    width: 100%;\n    padding-block: var(--u-menu-padding, 8px);\n    opacity: 0;\n    transition: opacity 1ms 400ms;\n    scroll-padding-block: 32px;\n    overflow: auto;\n  }\n\n  :host([open]) .menu {\n    opacity: 1;\n    transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms;\n    transform: scale3d(1, 1, 1);\n  }\n  :host([open]) .content {\n    opacity: 1;\n    transition: opacity 300ms 150ms;\n  }\n`"
         }
       ],
       "exports": [
@@ -7497,15 +7602,6 @@
               },
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "#justShow",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "open",
@@ -7582,6 +7678,13 @@
                 "text": "HTMLElement"
               }
             },
+            {
+              "kind": "field",
+              "name": "scrollContainer",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
             {
               "kind": "field",
               "name": "#anchorElement",
@@ -7940,7 +8043,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\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  :host(.force-focus-ring) .focus-ring,\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: var(--_focus-ring-outline-offset);\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  :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    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host {\n    display: block;\n    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.125rem);\n    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);\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-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n    height: var(--u-drawer-item-height, 56px);\n    padding-inline: var(--_drawer-item-padding);\n    margin-inline: calc(var(--_drawer-item-padding) * -1);\n    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));\n    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([active]) {\n    color: var(--u-drawer-item-label-active-color, var(--_color-primary));\n  }\n\n  :host(:not([has-icon])) .icon,\n  :host(:not([has-badge])) .badge {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_drawer-item-icon-size);\n    line-height: var(--_drawer-item-icon-size);\n    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);\n  }\n\n  .badge {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-inline-start: auto;\n    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);\n  }\n\n  .content {\n    justify-content: flex-start;\n  }\n`"
+          "default": "css `\n  :host {\n    display: block;\n    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.125rem);\n    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);\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-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n    height: var(--u-drawer-item-height, 56px);\n    padding-inline: var(--_drawer-item-padding);\n    margin-inline: calc(var(--_drawer-item-padding) * -1);\n    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));\n    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([active]) {\n    color: var(--u-drawer-item-label-active-color, var(--_color-primary));\n  }\n\n  :host(:not([has-icon])) .icon,\n  :host(:not([has-badge])) .badge {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_drawer-item-icon-size);\n    line-height: var(--_drawer-item-icon-size);\n    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);\n  }\n\n  .badge {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-inline-start: auto;\n    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);\n  }\n\n  .content {\n    justify-content: flex-start;\n  }\n`"
         }
       ],
       "exports": [
@@ -9809,12 +9912,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/select/option.styles.ts",
+      "path": "src/shared/base.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n\n`"
+          "default": "css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\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  :host(.force-focus-ring) .focus-ring,\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: var(--_focus-ring-outline-offset);\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": [
@@ -9823,107 +9926,577 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/select/option.styles.ts"
+            "module": "src/shared/base.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/select/option.ts",
+      "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    border-radius: inherit;\n    width: 100%;\n    height: 100%;\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",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmOption",
+          "name": "UmButtonWrapper",
           "members": [
             {
               "kind": "field",
-              "name": "#nativeOption",
-              "privacy": "private",
+              "name": "disabled",
               "type": {
-                "text": "HTMLOptionElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button is disabled or not.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "#mutationObserver",
-              "privacy": "private",
+              "name": "renderRipple",
               "type": {
-                "text": "MutationObserver | null"
+                "text": "boolean"
               },
-              "default": "null"
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "attribute": "value",
-              "reflects": true
+              "description": "The URL that the link button points to.",
+              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "target",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
+              },
+              "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "buttonElement",
+              "type": {
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "_selectedAttribute",
+              "name": "ripple",
               "type": {
-                "text": "boolean"
+                "text": "UmRipple"
               },
-              "privacy": "private",
-              "attribute": "selected"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#select",
-              "privacy": "private",
+              "name": "innerRole",
               "type": {
-                "text": "UmSelect | null"
+                "text": "string | null"
+              },
+              "privacy": "protected",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "pathname",
+              "type": {
+                "text": "string"
               }
             },
             {
               "kind": "method",
-              "name": "#attach",
+              "name": "renderButton",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderLink",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderContent",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "HTMLTemplateResult"
                 }
               }
             },
             {
               "kind": "method",
-              "name": "#handleClick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "focus"
             },
             {
               "kind": "method",
-              "name": "#updateContent"
+              "name": "blur"
             },
             {
               "kind": "method",
-              "name": "#setNativeOption",
+              "name": "getAriaLabel",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "string | null"
                 }
               }
             },
             {
-              "kind": "field",
-              "name": "#active",
+              "kind": "method",
+              "name": "innerFocusHandler",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#innerClickHandler",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_",
+                  "type": {
+                    "text": "UIEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button is disabled or not.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL that the link button points to.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
+              "fieldName": "target"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmButtonWrapper",
+          "declaration": {
+            "name": "UmButtonWrapper",
+            "module": "src/shared/button-wrapper.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/compare-text.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "normalizedStartsWith",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "text",
+              "type": {
+                "text": "string | null"
+              }
+            },
+            {
+              "name": "term",
+              "type": {
+                "text": "string | null"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "normalizedStartsWith",
+          "declaration": {
+            "name": "normalizedStartsWith",
+            "module": "src/shared/compare-text.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/extract-template-html.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "extractTemplateHtml",
+          "parameters": [
+            {
+              "name": "template",
+              "type": {
+                "text": "HTMLTemplateElement"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "extractTemplateHtml",
+          "declaration": {
+            "name": "extractTemplateHtml",
+            "module": "src/shared/extract-template-html.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/mixin-attribute-properties.ts",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "mixinAttributeProperties",
+          "parameters": [
+            {
+              "name": "base",
+              "type": {
+                "text": "T"
+              }
+            },
+            {
+              "name": "properties",
+              "type": {
+                "text": "string[]"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mixinAttributeProperties",
+          "declaration": {
+            "name": "mixinAttributeProperties",
+            "module": "src/shared/mixin-attribute-properties.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/mixin.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/normalize-text.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "normalizeText",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "text",
+              "type": {
+                "text": "string | null"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "normalizeText",
+          "declaration": {
+            "name": "normalizeText",
+            "module": "src/shared/normalize-text.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/redispatch-event.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "redispatchEvent",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "event",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "redispatchEvent",
+          "declaration": {
+            "name": "redispatchEvent",
+            "module": "src/shared/redispatch-event.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select/extended-option.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select/extended-select.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select/option.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host(.selected) {\n    background-color: var(--u-select-option-selected-background-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n  }\n  :host(.selected) .icon,\n  :host(.selected) .content {\n    color: var(--u-select-option-selected-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  :host(:not(.selected):not([has-trailing-icon])) .trailing {\n    display: none;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/select/option.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select/option.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmOption",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_nativeOption",
+              "type": {
+                "text": "ExtendedOption"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_listItem"
+            },
+            {
+              "kind": "field",
+              "name": "#mutationObserver",
+              "privacy": "private",
+              "type": {
+                "text": "MutationObserver"
+              },
+              "default": "new MutationObserver(() => this.#updateContent())"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultTrailingIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmMenuItem",
+                "module": "src/menu/menu-item.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_selectedAttribute",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "attribute": "selected"
+            },
+            {
+              "kind": "field",
+              "name": "_select",
+              "type": {
+                "text": "UmSelect | null"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#attach",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setSelectedByUser"
+            },
+            {
+              "kind": "method",
+              "name": "#updateContent"
+            },
+            {
+              "kind": "method",
+              "name": "#setNativeOption",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#active",
               "privacy": "private",
               "type": {
                 "text": "boolean"
@@ -9950,13 +10523,13 @@
             },
             {
               "kind": "field",
-              "name": "hasIcon",
+              "name": "hasLeadingIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-icon",
+              "description": "Whether the menu item has leading icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-leading-icon",
               "reflects": true,
               "inheritedFrom": {
                 "name": "UmMenuItem",
@@ -9965,13 +10538,13 @@
             },
             {
               "kind": "field",
-              "name": "hasBadge",
+              "name": "hasTrailingIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
-              "attribute": "has-badge",
+              "description": "Whether the menu item has trailing icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-trailing-icon",
               "reflects": true,
               "inheritedFrom": {
                 "name": "UmMenuItem",
@@ -9980,11 +10553,14 @@
             },
             {
               "kind": "field",
-              "name": "assignedIcons",
+              "name": "hasBadge",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "boolean"
               },
-              "privacy": "private",
+              "default": "false",
+              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
+              "attribute": "has-badge",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "UmMenuItem",
                 "module": "src/menu/menu-item.ts"
@@ -10003,6 +10579,15 @@
                 "module": "src/shared/button-wrapper.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "#handleMouseEnter",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmMenuItem",
+                "module": "src/menu/menu-item.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "renderContent",
@@ -10019,8 +10604,31 @@
             },
             {
               "kind": "method",
-              "name": "handleIconSlotChange",
-              "privacy": "private",
+              "name": "#handleLeadingIconSlotChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "UmMenuItem",
+                "module": "src/menu/menu-item.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleTrailingIconSlotChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "UmMenuItem",
                 "module": "src/menu/menu-item.ts"
@@ -10259,13 +10867,26 @@
               }
             },
             {
-              "name": "has-icon",
+              "name": "has-leading-icon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
-              "fieldName": "hasIcon",
+              "description": "Whether the menu item has leading icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasLeadingIcon",
+              "inheritedFrom": {
+                "name": "UmMenuItem",
+                "module": "src/menu/menu-item.ts"
+              }
+            },
+            {
+              "name": "has-trailing-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the menu item has trailing icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasTrailingIcon",
               "inheritedFrom": {
                 "name": "UmMenuItem",
                 "module": "src/menu/menu-item.ts"
@@ -10362,416 +10983,500 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/select/select.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  .container {\n    cursor: pointer;\n  }\n\n  u-menu {\n    display: block;\n    width: 100%;\n  }\n  u-menu::part(menu) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  select {\n    pointer-events: none;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/select/select.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/select/select.ts",
+      "path": "src/select/select-navigation-controller.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmSelect",
+          "name": "SelectNavigationController",
           "members": [
             {
               "kind": "field",
-              "name": "nativeSelect",
-              "type": {
-                "text": "HTMLSelectElement"
-              }
+              "name": "#typeaheadStatus",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "#connected",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "default": "false"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "attach",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "menu",
-              "type": {
-                "text": "UmMenu"
+              "kind": "method",
+              "name": "detach",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
             {
               "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "name": "#handleMouseFocus",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "selectedIndex",
-              "type": {
-                "text": "number"
+              "kind": "method",
+              "name": "afterFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "UmOption"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "selectedOption",
-              "type": {
-                "text": "UmOption | null"
+              "kind": "method",
+              "name": "afterBlur",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleType",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "findNextElementByTerm",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "term",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "lastFocusedMenu",
+                  "type": {
+                    "text": "UmOption | null"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
-              "name": "_options",
+              "name": "#element",
+              "privacy": "private",
               "type": {
-                "text": "UmOption[]"
+                "text": "HTMLElement | null"
               },
-              "privacy": "private",
-              "default": "[]"
+              "default": "null",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "options",
+              "name": "focusedMenu",
               "type": {
-                "text": "UmOption[]"
+                "text": "TMenuItem | null"
+              },
+              "privacy": "protected",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderControl",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "TField"
               },
+              "privacy": "protected",
+              "default": "host",
               "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderAfterContent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
+              "kind": "field",
+              "name": "bindHandleKeyDown",
+              "type": {
+                "text": "(event: KeyboardEvent) => void"
               },
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
             {
               "kind": "field",
-              "name": "#handleClick",
-              "privacy": "private"
+              "name": "#handleMenuClose",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "#handleMenuClick",
+              "name": "navigate",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "event",
                   "type": {
-                    "text": "Event"
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "forwards",
+                  "type": {
+                    "text": "boolean"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "#handleSlotChange",
+              "name": "navigateTo",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "event",
                   "type": {
-                    "text": "Event"
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "menu",
+                  "type": {
+                    "text": "TMenuItem | undefined"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "#attach",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
+              "name": "focusMenu",
+              "parameters": [
+                {
+                  "name": "menu",
+                  "type": {
+                    "text": "TMenuItem"
+                  }
+                },
+                {
+                  "name": "active",
+                  "default": "true"
+                },
+                {
+                  "name": "scroll",
+                  "default": "true"
                 }
-              },
+              ],
               "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "true",
+              "kind": "method",
+              "name": "blurMenu",
               "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "ShadowRootInit"
-              },
-              "static": true,
-              "default": "{\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  }",
+              "kind": "method",
+              "name": "selectActiveItem",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
               "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
               }
-            },
+            }
+          ],
+          "superclass": {
+            "name": "MenuFieldNavigationController",
+            "module": "/src/shared/menu-field/menu-field-navigation-controller.js"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SelectNavigationController",
+          "declaration": {
+            "name": "SelectNavigationController",
+            "module": "src/select/select-navigation-controller.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select/select.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  u-menu {\n    display: block;\n    width: 100%;\n  }\n  u-menu::part(menu) {\n    min-width: 100%;\n    max-width: 50vw;\n  }\n\n  :host(:not([disabled])) .button {\n    cursor: pointer;\n  }\n\n  .button {\n    position: absolute;\n    inset: 0;\n    margin: 0;\n    padding: 0;\n    background: transparent;\n    border: none;\n    appearance: none;\n  }\n\n  select {\n    pointer-events: none;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .list {\n    width: 2px;\n    height: 2px;\n    margin: -1px;\n    overflow: hidden;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/select/select.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select/select.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmSelect",
+          "members": [
             {
               "kind": "field",
-              "name": "empty",
+              "name": "currentOptionIndex",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "true",
-              "attribute": "empty",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "default": "1"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "nativeSelect",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "placeholder",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
+                "text": "ExtendedSelect"
               }
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "#list",
+              "privacy": "private",
               "type": {
-                "text": "HTMLFormElement | null"
-              },
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "elementInternals",
+              "name": "#navigationController",
+              "privacy": "private",
+              "default": "new SelectNavigationController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "#mutationObserver",
+              "privacy": "private",
               "type": {
-                "text": "ElementInternals"
+                "text": "MutationObserver"
               },
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
-              }
+              "default": "new MutationObserver(() => this._updateOptions())"
             },
             {
               "kind": "field",
-              "name": "config",
+              "name": "#connected",
+              "privacy": "private",
               "type": {
-                "text": "UmFieldDefaults | undefined"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "value",
               "type": {
-                "text": "'filled' | 'outlined' | undefined"
-              },
-              "default": "undefined",
-              "attribute": "variant",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "string"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "menu",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "label",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "UmMenu"
               }
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "button",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "counter",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "HTMLButtonElement"
               }
             },
             {
               "kind": "field",
-              "name": "supportingText",
+              "name": "input",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "supporting-text",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "errorText",
+              "name": "selectedIndex",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "error-text",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "number"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "selectedOptions",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "UmOption[]"
               }
             },
             {
               "kind": "field",
-              "name": "invalid",
+              "name": "options",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "invalid",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "UmOption[]"
               }
             },
             {
               "kind": "method",
-              "name": "setDefaults",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "ContextProvider<Context<HTMLElement, UmFieldDefaults>>"
-                }
-              },
+              "name": "_updateOptions"
+            },
+            {
+              "kind": "method",
+              "name": "#updateOptions",
               "parameters": [
                 {
-                  "name": "contextRoot",
+                  "name": "options",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "UmOption[]"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#updateAccessibilityList",
+              "parameters": [
                 {
-                  "name": "config",
+                  "name": "options",
                   "type": {
-                    "text": "UmFieldDefaults"
+                    "text": "UmOption[]"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              ]
             },
             {
-              "kind": "field",
-              "name": "hasLeadingIcon",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "#setSelectedOption"
+            },
+            {
+              "kind": "method",
+              "name": "renderControl",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "default": "false",
-              "description": "Whether the field has a leading icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-leading-icon",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hasTrailingIcon",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "renderAfterContent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "default": "false",
-              "description": "Whether the field has a trailing icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-trailing-icon",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hasErrorText",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "renderDefaultTrailingIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               },
-              "default": "false",
-              "description": "Whether the field has an error text or not\n\n_Note:_ Readonly",
-              "attribute": "has-error-text",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
@@ -10779,23 +11484,44 @@
             },
             {
               "kind": "field",
-              "name": "assignedLeadingIcons",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "name": "#handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#handleMenuClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "assignedTrailingIcons",
-              "type": {
-                "text": "HTMLElement[]"
+              "name": "#handleMenuOpen",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#handleMenuOpened",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#handleMenuClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#attach",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
               },
-              "privacy": "private",
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
@@ -10803,624 +11529,519 @@
             },
             {
               "kind": "field",
-              "name": "assignedErrorTexts",
+              "name": "menuItems",
               "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "UmOption[]"
               }
             },
             {
               "kind": "field",
-              "name": "labelElement",
+              "name": "formAssociated",
               "type": {
-                "text": "HTMLElement"
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+              "static": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "container",
+              "name": "shadowRootOptions",
               "type": {
-                "text": "HTMLElement"
+                "text": "ShadowRootInit"
               },
+              "static": true,
+              "default": "{\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  }",
               "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "labelSizeObserver",
+              "name": "empty",
               "type": {
-                "text": "ResizeObserver | null"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "null",
+              "default": "true",
+              "attribute": "empty",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleLeadingIconSlotChange",
-              "privacy": "private",
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "placeholder",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleTrailingIconSlotChange",
-              "privacy": "private",
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
               "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleErrorTextSlotChange",
-              "privacy": "private",
+              "kind": "field",
+              "name": "elementInternals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setLabelWidthProperties",
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "UmFieldDefaults | undefined"
+              },
               "privacy": "private",
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
-            }
-          ],
-          "superclass": {
-            "name": "UmTextFieldBase",
-            "module": "/src/shared/text-field-base/text-field-base.js"
-          },
-          "tagName": "u-select",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
-              }
             },
             {
+              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "'filled' | 'outlined' | undefined"
               },
               "default": "undefined",
-              "resolveInitializer": {
-                "module": "src/field/field-base.ts"
-              },
-              "fieldName": "variant",
+              "attribute": "variant",
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "label",
+              "attribute": "label",
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
+              "kind": "field",
               "name": "counter",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "counter",
+              "attribute": "counter",
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "supporting-text",
+              "kind": "field",
+              "name": "supportingText",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "supportingText",
+              "attribute": "supporting-text",
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "error-text",
+              "kind": "field",
+              "name": "errorText",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "errorText",
+              "attribute": "error-text",
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "empty",
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "empty",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "invalid",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "disabled",
+              "attribute": "invalid",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "invalid",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "setDefaults",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "ContextProvider<Context<HTMLElement, UmFieldDefaults>>"
+                }
               },
-              "default": "false",
-              "fieldName": "invalid",
+              "parameters": [
+                {
+                  "name": "contextRoot",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "UmFieldDefaults"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "has-leading-icon",
+              "kind": "field",
+              "name": "hasLeadingIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Whether the field has a leading icon or not\n\n_Note:_ Readonly",
-              "fieldName": "hasLeadingIcon",
+              "attribute": "has-leading-icon",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "has-trailing-icon",
+              "kind": "field",
+              "name": "hasTrailingIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Whether the field has a trailing icon or not\n\n_Note:_ Readonly",
-              "fieldName": "hasTrailingIcon",
+              "attribute": "has-trailing-icon",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "has-error-text",
+              "kind": "field",
+              "name": "hasErrorText",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Whether the field has an error text or not\n\n_Note:_ Readonly",
-              "fieldName": "hasErrorText",
+              "attribute": "has-error-text",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmSelect",
-          "declaration": {
-            "name": "UmSelect",
-            "module": "src/select/select.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-select",
-          "declaration": {
-            "name": "UmSelect",
-            "module": "src/select/select.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/base.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\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  :host(.force-focus-ring) .focus-ring,\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: var(--_focus-ring-outline-offset);\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.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmButtonWrapper",
-          "members": [
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the button is disabled or not.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "renderRipple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The URL that the link button points to.",
-              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "assignedLeadingIcons",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLElement[]"
               },
-              "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
-              "attribute": "target"
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "assignedTrailingIcons",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLElement[]"
               },
-              "attribute": "name"
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "buttonElement",
+              "name": "assignedErrorTexts",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "ripple",
+              "name": "labelElement",
               "type": {
-                "text": "UmRipple"
+                "text": "HTMLElement"
               },
-              "privacy": "private"
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "innerRole",
+              "name": "container",
               "type": {
-                "text": "string | null"
+                "text": "HTMLElement"
               },
-              "privacy": "protected",
-              "default": "null"
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "pathname",
+              "name": "labelSizeObserver",
               "type": {
-                "text": "string"
+                "text": "ResizeObserver | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "method",
-              "name": "renderButton",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderLink",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderContent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "HTMLTemplateResult"
-                }
+              "name": "handleLeadingIconSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "method",
-              "name": "focus"
-            },
-            {
-              "kind": "method",
-              "name": "blur"
-            },
-            {
-              "kind": "method",
-              "name": "getAriaLabel",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "string | null"
-                }
+              "name": "handleTrailingIconSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "method",
-              "name": "innerFocusHandler",
+              "name": "handleErrorTextSlotChange",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "method",
-              "name": "#innerClickHandler",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_",
-                  "type": {
-                    "text": "UIEvent"
-                  }
-                }
-              ]
+              "name": "setLabelWidthProperties",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             }
           ],
+          "superclass": {
+            "name": "UmTextFieldBase",
+            "module": "/src/shared/text-field-base/text-field-base.js"
+          },
+          "tagName": "u-select",
+          "customElement": true,
           "attributes": [
             {
-              "name": "disabled",
+              "name": "placeholder",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the button is disabled or not.",
-              "fieldName": "disabled"
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
+              }
             },
             {
-              "name": "href",
+              "name": "variant",
+              "type": {
+                "text": "'filled' | 'outlined' | undefined"
+              },
+              "default": "undefined",
+              "resolveInitializer": {
+                "module": "src/field/field-base.ts"
+              },
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
+            },
+            {
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The URL that the link button points to.",
-              "fieldName": "href"
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
-              "name": "target",
+              "name": "counter",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
-              "fieldName": "target"
+              "fieldName": "counter",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
-              "name": "name",
+              "name": "supporting-text",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "name"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmButtonWrapper",
-          "declaration": {
-            "name": "UmButtonWrapper",
-            "module": "src/shared/button-wrapper.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/extract-template-html.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "extractTemplateHtml",
-          "parameters": [
+              "fieldName": "supportingText",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
+            },
             {
-              "name": "template",
+              "name": "error-text",
               "type": {
-                "text": "HTMLTemplateElement"
+                "text": "string | undefined"
+              },
+              "fieldName": "errorText",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "extractTemplateHtml",
-          "declaration": {
-            "name": "extractTemplateHtml",
-            "module": "src/shared/extract-template-html.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/mixin-attribute-properties.ts",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "mixinAttributeProperties",
-          "parameters": [
+            },
             {
-              "name": "base",
+              "name": "empty",
               "type": {
-                "text": "T"
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "empty",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "properties",
+              "name": "disabled",
               "type": {
-                "text": "string[]"
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "mixinAttributeProperties",
-          "declaration": {
-            "name": "mixinAttributeProperties",
-            "module": "src/shared/mixin-attribute-properties.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/mixin.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/normalize-text.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "normalizeText",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
+            },
             {
-              "name": "text",
+              "name": "invalid",
               "type": {
-                "text": "string"
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "invalid",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "normalizeText",
-          "declaration": {
-            "name": "normalizeText",
-            "module": "src/shared/normalize-text.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/shared/redispatch-event.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "redispatchEvent",
-          "parameters": [
+            },
             {
-              "name": "element",
+              "name": "has-leading-icon",
               "type": {
-                "text": "Element"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field has a leading icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasLeadingIcon",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
-              "name": "event",
+              "name": "has-trailing-icon",
               "type": {
-                "text": "Event"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field has a trailing icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasTrailingIcon",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
+            },
+            {
+              "name": "has-error-text",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field has an error text or not\n\n_Note:_ Readonly",
+              "fieldName": "hasErrorText",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             }
           ]
@@ -11429,332 +12050,356 @@
       "exports": [
         {
           "kind": "js",
-          "name": "redispatchEvent",
+          "name": "UmSelect",
           "declaration": {
-            "name": "redispatchEvent",
-            "module": "src/shared/redispatch-event.ts"
+            "name": "UmSelect",
+            "module": "src/select/select.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/snackbar/snackbar.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    --u-elevation-level: var(--u-snackbar-elevation-level, 3);\n    --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));\n    position: fixed;\n    inset-inline: 0;\n    inset-block-end: 0;\n    padding: var(--_snackbar-margin);\n    z-index: var(--u-snackbar-z-index, 1070);\n    display: flex;\n    justify-content: center;\n  }\n\n  .snackbar {\n    display: flex;\n    align-items: center;\n    min-height: var(--u-snackbar-height, 48px);\n    color: var(--u-snackbar-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n    background-color: var(--u-snackbar-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));\n    animation-name: snackbar-fade-in;\n    animation-duration: 450ms;\n    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n    animation-fill-mode: forwards;\n    min-width: var(--u-snackbar-min-width, 100%);\n    max-width: var(--u-snackbar-max-width, 100%);\n  }\n  .snackbar.dismiss {\n    animation-name: snackbar-fade-out;\n  }\n\n  u-button {\n    color: var(--u-color-inverse-primary, );\n    margin-inline: var(--u-snackbar-text-button-margin, var(--u-spacing-small, 8px));\n  }\n\n  u-icon-button {\n    color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));\n    margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));\n  }\n\n  .label {\n    flex: 1;\n    overflow: hidden;\n    color: var(--u-on-inverse-surface-color);\n    padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));\n    line-height: 18px;\n  }\n\n  @media (min-width: 840px) {\n    :host {\n      --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));\n    }\n    .snackbar {\n      min-width: var(--u-snackbar-min-width, 288px);\n      max-width: var(--u-snackbar-max-width, 568px);\n    }\n  }\n  @keyframes snackbar-fade-in {\n    0% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n    100% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n  }\n  @keyframes snackbar-fade-out {\n    0% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n    100% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n  }\n`"
-        }
-      ],
-      "exports": [
+        },
         {
-          "kind": "js",
-          "name": "styles",
+          "kind": "custom-element-definition",
+          "name": "u-select",
           "declaration": {
-            "name": "styles",
-            "module": "src/snackbar/snackbar.styles.ts"
+            "name": "UmSelect",
+            "module": "src/select/select.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/snackbar/snackbar.ts",
+      "path": "src/switch/switch-list-item.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmSnackbar",
+          "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": "label",
+              "name": "styles",
               "type": {
-                "text": "string"
+                "text": "array"
               },
-              "default": "''",
-              "attribute": "label",
-              "reflects": true
+              "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": "field",
-              "name": "buttonLabel",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "render",
+              "return": {
+                "type": {
+                  "text": "HTMLTemplateResult"
+                }
               },
-              "default": "''",
-              "attribute": "buttonLabel",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "mixinSelectionControlListItem",
+                "module": "src/shared/selection-control/selection-control-list-item.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "showClose",
+              "name": "renderRipple",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "protected",
               "default": "false",
-              "attribute": "show-close",
-              "reflects": true
+              "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": "dismissed",
+              "name": "formAssociated",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "attribute": "dismissed",
-              "reflects": true
+              "static": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "elementInternals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "''",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "duration",
+              "name": "disabled",
               "type": {
-                "text": "SnackbarDuration"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "snackbar",
+              "name": "input",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLInputElement"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderButton",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderCloseButton",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "dismiss",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "field",
-              "name": "_queue",
+              "name": "form",
               "type": {
-                "text": "UmSnackbar[]"
+                "text": "HTMLFormElement | null"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "[]"
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "_consuming",
+              "name": "#checked",
+              "privacy": "private",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "static": true
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "UmSnackbar"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "label",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "default": "false",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "show",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "UmSnackbar"
-                }
+              "kind": "field",
+              "name": "inputType",
+              "type": {
+                "text": "'checkbox' | 'radio'"
               },
-              "parameters": [
-                {
-                  "name": "config",
-                  "type": {
-                    "text": "SnackbarConfig"
-                  }
-                }
-              ]
+              "privacy": "protected",
+              "default": "'checkbox'",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "show",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "UmSnackbar"
-                }
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "configOrLabel",
-                  "type": {
-                    "text": "SnackbarConfig | string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "consumeQueue",
-              "privacy": "private",
-              "static": true
+              "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": "showNext",
-              "privacy": "private",
-              "static": true
+              "kind": "field",
+              "name": "checked",
+              "attribute": "checked",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "createSnackbar",
-              "privacy": "private",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "UmSnackbar"
-                }
-              },
+              "name": "#handleClick",
               "parameters": [
                 {
-                  "name": "config",
+                  "name": "e",
                   "type": {
-                    "text": "SnackbarConfig"
+                    "text": "Event"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "name",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "default": "''",
-              "fieldName": "label"
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "name": "buttonLabel",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            },
+            {
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "fieldName": "buttonLabel"
+              "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": "show-close",
+              "name": "checked",
+              "fieldName": "checked",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
               "type": {
-                "text": "boolean"
+                "text": "InputEvent"
               },
-              "default": "false",
-              "fieldName": "showClose"
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "name": "dismissed",
+              "name": "change",
               "type": {
-                "text": "boolean"
+                "text": "Event"
               },
-              "default": "false",
-              "fieldName": "dismissed"
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-snackbar",
-          "customElement": true
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmSwitchListItem",
+          "declaration": {
+            "name": "UmSwitchListItem",
+            "module": "src/switch/switch-list-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-switch-list-item",
+          "declaration": {
+            "name": "UmSwitchListItem",
+            "module": "src/switch/switch-list-item.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": "UmSnackbar",
-          "declaration": {
-            "name": "UmSnackbar",
-            "module": "src/snackbar/snackbar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-snackbar",
+          "name": "styles",
           "declaration": {
-            "name": "UmSnackbar",
-            "module": "src/snackbar/snackbar.ts"
+            "name": "styles",
+            "module": "src/switch/switch.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/switch/switch-list-item.ts",
+      "path": "src/switch/switch.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": "UmSwitch",
           "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",
@@ -11922,6 +12567,12 @@
               }
             }
           ],
+          "superclass": {
+            "name": "UmSelectionControl",
+            "module": "/src/shared/selection-control/selection-control.js"
+          },
+          "tagName": "u-switch",
+          "customElement": true,
           "attributes": [
             {
               "name": "name",
@@ -11996,30 +12647,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UmSwitchListItem",
+          "name": "UmSwitch",
           "declaration": {
-            "name": "UmSwitchListItem",
-            "module": "src/switch/switch-list-item.ts"
+            "name": "UmSwitch",
+            "module": "src/switch/switch.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-switch-list-item",
+          "name": "u-switch",
           "declaration": {
-            "name": "UmSwitchListItem",
-            "module": "src/switch/switch-list-item.ts"
+            "name": "UmSwitch",
+            "module": "src/switch/switch.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/switch/switch.styles.ts",
+      "path": "src/snackbar/snackbar.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`"
+          "default": "css `\n  :host {\n    --u-elevation-level: var(--u-snackbar-elevation-level, 3);\n    --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));\n    position: fixed;\n    inset-inline: 0;\n    inset-block-end: 0;\n    padding: var(--_snackbar-margin);\n    z-index: var(--u-snackbar-z-index, 1070);\n    display: flex;\n    justify-content: center;\n  }\n\n  .snackbar {\n    display: flex;\n    align-items: center;\n    min-height: var(--u-snackbar-height, 48px);\n    color: var(--u-snackbar-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n    background-color: var(--u-snackbar-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));\n    animation-name: snackbar-fade-in;\n    animation-duration: 450ms;\n    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n    animation-fill-mode: forwards;\n    min-width: var(--u-snackbar-min-width, 100%);\n    max-width: var(--u-snackbar-max-width, 100%);\n  }\n  .snackbar.dismiss {\n    animation-name: snackbar-fade-out;\n  }\n\n  u-button {\n    color: var(--u-color-inverse-primary, );\n    margin-inline: var(--u-snackbar-text-button-margin, var(--u-spacing-small, 8px));\n  }\n\n  u-icon-button {\n    color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));\n    margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));\n  }\n\n  .label {\n    flex: 1;\n    overflow: hidden;\n    color: var(--u-on-inverse-surface-color);\n    padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));\n    line-height: 18px;\n  }\n\n  @media (min-width: 840px) {\n    :host {\n      --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));\n    }\n    .snackbar {\n      min-width: var(--u-snackbar-min-width, 288px);\n      max-width: var(--u-snackbar-max-width, 568px);\n    }\n  }\n  @keyframes snackbar-fade-in {\n    0% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n    100% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n  }\n  @keyframes snackbar-fade-out {\n    0% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n    100% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n  }\n`"
         }
       ],
       "exports": [
@@ -12028,279 +12679,257 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/switch/switch.styles.ts"
+            "module": "src/snackbar/snackbar.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/switch/switch.ts",
+      "path": "src/snackbar/snackbar.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmSwitch",
+          "name": "UmSnackbar",
           "members": [
             {
               "kind": "field",
-              "name": "renderRipple",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "protected",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "''",
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "renderIndicator",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "HTMLTemplateResult"
-                }
+              "kind": "field",
+              "name": "buttonLabel",
+              "type": {
+                "text": "string"
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "''",
+              "attribute": "buttonLabel",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "formAssociated",
+              "name": "showClose",
               "type": {
                 "text": "boolean"
               },
-              "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "false",
+              "attribute": "show-close",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "elementInternals",
+              "name": "dismissed",
               "type": {
-                "text": "ElementInternals"
+                "text": "boolean"
               },
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "false",
+              "attribute": "dismissed",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "duration",
               "type": {
-                "text": "string | undefined"
+                "text": "SnackbarDuration"
               },
-              "default": "''",
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "snackbar",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+              "kind": "method",
+              "name": "renderButton",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderCloseButton",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "_queue",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "UmSnackbar[]"
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "privacy": "private",
+              "static": true,
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "#checked",
-              "privacy": "private",
+              "name": "_consuming",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "privacy": "private",
+              "static": true
             },
             {
-              "kind": "field",
-              "name": "inputType",
-              "type": {
-                "text": "'checkbox' | 'radio'"
+              "kind": "method",
+              "name": "show",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "UmSnackbar"
+                }
               },
-              "privacy": "protected",
-              "default": "'checkbox'",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "parameters": [
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "UmSnackbar"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "SnackbarConfig"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "show",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "UmSnackbar"
+                }
               },
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "configOrLabel",
+                  "type": {
+                    "text": "SnackbarConfig | string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "checked",
-              "attribute": "checked",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "kind": "method",
+              "name": "consumeQueue",
+              "privacy": "private",
+              "static": true
             },
             {
               "kind": "method",
-              "name": "#handleClick",
+              "name": "showNext",
+              "privacy": "private",
+              "static": true
+            },
+            {
+              "kind": "method",
+              "name": "createSnackbar",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "UmSnackbar"
+                }
+              },
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "config",
                   "type": {
-                    "text": "Event"
+                    "text": "SnackbarConfig"
                   }
                 }
-              ],
-              "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",
+              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "default": "''",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "fieldName": "label"
             },
             {
-              "name": "value",
+              "name": "buttonLabel",
               "type": {
                 "text": "string"
               },
-              "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": "''",
+              "fieldName": "buttonLabel"
             },
             {
-              "name": "checked",
-              "fieldName": "checked",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "input",
+              "name": "show-close",
               "type": {
-                "text": "InputEvent"
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "false",
+              "fieldName": "showClose"
             },
             {
-              "name": "change",
+              "name": "dismissed",
               "type": {
-                "text": "Event"
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "default": "false",
+              "fieldName": "dismissed"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-snackbar",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmSwitch",
+          "name": "UmSnackbar",
           "declaration": {
-            "name": "UmSwitch",
-            "module": "src/switch/switch.ts"
+            "name": "UmSnackbar",
+            "module": "src/snackbar/snackbar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-switch",
+          "name": "u-snackbar",
           "declaration": {
-            "name": "UmSwitch",
-            "module": "src/switch/switch.ts"
+            "name": "UmSnackbar",
+            "module": "src/snackbar/snackbar.ts"
           }
         }
       ]
@@ -12365,6 +12994,24 @@
               },
               "attribute": "suffix-text"
             },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutoFill | undefined"
+              },
+              "attribute": "autocomplete",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autocapitalize",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "autocapitalize",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "input",
@@ -12777,6 +13424,20 @@
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultTrailingIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             }
           ],
           "attributes": [
@@ -12798,6 +13459,20 @@
               },
               "fieldName": "suffixText"
             },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "AutoFill | undefined"
+              },
+              "fieldName": "autocomplete"
+            },
+            {
+              "name": "autocapitalize",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "autocapitalize"
+            },
             {
               "name": "placeholder",
               "type": {
@@ -13741,7 +14416,7 @@
               "kind": "field",
               "name": "target",
               "type": {
-                "text": "HTMLElement & {input?: HTMLInputElement; container?: HTMLElement; value: string} | null"
+                "text": "HTMLElement & {autocomplete: AutoFill; input?: HTMLInputElement; container?: HTMLElement; value: string} | null"
               },
               "privacy": "private",
               "default": "null"
@@ -13755,6 +14430,12 @@
               },
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "#navigationController",
+              "privacy": "private",
+              "default": "new MenuFieldNavigationController(this)"
+            },
             {
               "kind": "field",
               "name": "#termNormalized",
@@ -13868,6 +14549,26 @@
               "attribute": "editable",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutoFill"
+              },
+              "default": "'off'",
+              "attribute": "autocomplete",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "spellcheck",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "spellcheck",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "form",
@@ -13931,43 +14632,6 @@
               "name": "#handleInput",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "handleKeyDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "navigate",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                },
-                {
-                  "name": "forwards",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "selectActiveItem",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "#getItemClickHandler",
@@ -14060,7 +14724,19 @@
                 "type": {
                   "text": "string"
                 }
-              }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -14125,6 +14801,22 @@
               "default": "false",
               "fieldName": "editable"
             },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "AutoFill"
+              },
+              "default": "'off'",
+              "fieldName": "autocomplete"
+            },
+            {
+              "name": "spellcheck",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "spellcheck"
+            },
             {
               "name": "target-id",
               "type": {
@@ -14202,54 +14894,200 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/shared/sets/set-base.ts",
+      "path": "src/shared/menu-field/menu-field-navigation-controller.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmSetBase",
+          "name": "MenuFieldNavigationController",
           "members": [
             {
               "kind": "field",
-              "name": "alignment",
+              "name": "#element",
+              "privacy": "private",
               "type": {
-                "text": "'start' | 'center' | 'end'"
+                "text": "HTMLElement | null"
               },
-              "default": "'start'",
-              "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
-              "attribute": "alignment",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "null"
+            },
             {
-              "name": "alignment",
+              "kind": "field",
+              "name": "focusedMenu",
               "type": {
-                "text": "'start' | 'center' | 'end'"
+                "text": "TMenuItem | null"
               },
-              "default": "'start'",
-              "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
-              "fieldName": "alignment"
+              "privacy": "protected",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "TField"
+              },
+              "privacy": "protected",
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "bindHandleKeyDown",
+              "type": {
+                "text": "(event: KeyboardEvent) => void"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "attach",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "detach"
+            },
+            {
+              "kind": "field",
+              "name": "#handleMenuClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "navigate",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "forwards",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "navigateTo",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "menu",
+                  "type": {
+                    "text": "TMenuItem | undefined"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "focusMenu",
+              "parameters": [
+                {
+                  "name": "menu",
+                  "type": {
+                    "text": "TMenuItem"
+                  }
+                },
+                {
+                  "name": "active",
+                  "default": "true"
+                },
+                {
+                  "name": "scroll",
+                  "default": "true"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "blurMenu"
+            },
+            {
+              "kind": "method",
+              "name": "selectActiveItem",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "afterFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_",
+                  "type": {
+                    "text": "TMenuItem"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "afterBlur",
+              "privacy": "protected"
             }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmSetBase",
+          "name": "MenuFieldNavigationController",
           "declaration": {
-            "name": "UmSetBase",
-            "module": "src/shared/sets/set-base.ts"
+            "name": "MenuFieldNavigationController",
+            "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
           }
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/menu-field/menu-field.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/selection-control/selection-control-list-item.ts",
@@ -14507,6 +15345,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/sets/set-base.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  :host([alignment=start]) {\n    justify-content: flex-start;\n  }\n\n  :host([alignment=center]) {\n    justify-content: center;\n  }\n\n  :host([alignment=end]) {\n    justify-content: flex-end;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/shared/sets/set-base.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/sets/set-base.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmSetBase",
+          "members": [
+            {
+              "kind": "field",
+              "name": "alignment",
+              "type": {
+                "text": "'start' | 'center' | 'end'"
+              },
+              "default": "'start'",
+              "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
+              "attribute": "alignment",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "alignment",
+              "type": {
+                "text": "'start' | 'center' | 'end'"
+              },
+              "default": "'start'",
+              "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
+              "fieldName": "alignment"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmSetBase",
+          "declaration": {
+            "name": "UmSetBase",
+            "module": "src/shared/sets/set-base.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/text-field-base/text-field-base.styles.ts",
@@ -14914,6 +15823,20 @@
                 "name": "UmFieldBase",
                 "module": "src/field/field-base.ts"
               }
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultTrailingIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             }
           ],
           "attributes": [