@universal-material/web 3.0.67 → 3.0.69

package/custom-elements.json

@@ -7041,12 +7041,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/navigation/drawer-item.styles.ts",
+      "path": "src/menu/menu-item.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  :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  * {\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`"
         }
       ],
       "exports": [
@@ -7055,62 +7055,59 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/navigation/drawer-item.styles.ts"
+            "module": "src/menu/menu-item.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/navigation/drawer-item.ts",
+      "path": "src/menu/menu-item.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmDrawerItem",
+          "name": "UmMenuItem",
           "members": [
             {
               "kind": "field",
-              "name": "hasIcon",
+              "name": "#active",
+              "privacy": "private",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-icon",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "hasBadge",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
-              "attribute": "has-badge",
+              "description": "Force show focus ring",
+              "attribute": "active",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "hasIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
-              "attribute": "active",
+              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-icon",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "keepDrawerOpen",
+              "name": "hasBadge",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, it will not attempt to close de navigation drawer on click",
-              "attribute": "keep-drawer-open",
+              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
+              "attribute": "has-badge",
               "reflects": true
             },
             {
@@ -7123,11 +7120,16 @@
             },
             {
               "kind": "field",
-              "name": "assignedBadges",
+              "name": "innerRole",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "string | null"
               },
-              "privacy": "private"
+              "privacy": "protected",
+              "default": "'menuitem'",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
             },
             {
               "kind": "method",
@@ -7148,33 +7150,6 @@
               "name": "handleIconSlotChange",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "handleBadgeSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_",
-                  "type": {
-                    "text": "UIEvent"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -7263,19 +7238,6 @@
                 "module": "src/shared/button-wrapper.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "innerRole",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "protected",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "pathname",
@@ -7369,9 +7331,39 @@
                 "name": "UmButtonWrapper",
                 "module": "src/shared/button-wrapper.ts"
               }
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_",
+                  "type": {
+                    "text": "UIEvent"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
             }
           ],
           "attributes": [
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Force show focus ring",
+              "fieldName": "active"
+            },
             {
               "name": "has-icon",
               "type": {
@@ -7390,24 +7382,6 @@
               "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
               "fieldName": "hasBadge"
             },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
-              "fieldName": "active"
-            },
-            {
-              "name": "keep-drawer-open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, it will not attempt to close de navigation drawer on click",
-              "fieldName": "keepDrawerOpen"
-            },
             {
               "name": "disabled",
               "type": {
@@ -7461,115 +7435,37 @@
             "name": "UmButtonWrapper",
             "module": "/src/shared/button-wrapper.js"
           },
-          "tagName": "u-drawer-item",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmDrawerItem",
-          "declaration": {
-            "name": "UmDrawerItem",
-            "module": "src/navigation/drawer-item.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-drawer-item",
-          "declaration": {
-            "name": "UmDrawerItem",
-            "module": "src/navigation/drawer-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/drawer.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n    background-color: var(--u-modal-drawer-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-drawer-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    height: 100%;\n    padding-inline: var(--u-drawer-padding, 28px);\n  }\n\n  @media (min-width: 1200px) {\n    :host {\n      background-color: var(--u-standard-drawer-background-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n    }\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/navigation/drawer.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/drawer.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmDrawer",
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-drawer",
+          "tagName": "u-menu-item",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmDrawer",
+          "name": "UmMenuItem",
           "declaration": {
-            "name": "UmDrawer",
-            "module": "src/navigation/drawer.ts"
+            "name": "UmMenuItem",
+            "module": "src/menu/menu-item.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-drawer",
-          "declaration": {
-            "name": "UmDrawer",
-            "module": "src/navigation/drawer.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/side-navigation-swiper.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    --_navigation-width: 0;\n    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);\n    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);\n    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));\n    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);\n    display: block;\n    width: 100%;\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  :host(.disable-transition) * {\n    transition: none !important;\n  }\n  :host(.disable-transition) * ::slotted(u-top-app-bar) {\n    transition: none !important;\n  }\n\n  .drawer {\n    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n  .drawer,\n  .drawer u-elevation,\n  .drawer .drawer-container {\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n  }\n  .drawer.toggle u-elevation {\n    --u-elevation-level: 1;\n  }\n\n  .drawer-container {\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .scrim {\n    --_modal-drawer-open-progress: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100vw;\n    height: 100vh;\n    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    pointer-events: none;\n    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));\n    transition: opacity 375ms linear;\n  }\n  .scrim.moving {\n    transition: none;\n  }\n  .scrim.toggle {\n    --_modal-drawer-open-progress: 1;\n    pointer-events: auto;\n  }\n\n  @media (min-width: 840px) {\n    .content slot {\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n    }\n  }\n  @media (min-width: 1200px) {\n    .container {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .container:has(.drawer.toggle) {\n      --_navigation-width: 0;\n    }\n    .drawer {\n      border-radius: 0;\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\n    u-elevation,\n    .scrim {\n      display: none;\n    }\n  }\n  .content {\n    position: fixed;\n    inset: 0;\n    z-index: 1;\n    overflow: auto;\n  }\n\n  .drawer {\n    position: relative;\n    width: var(--_navigation-drawer-width);\n    z-index: var(--u-side-navigation-z-index, 1030);\n    pointer-events: auto;\n  }\n\n  .scrim {\n    z-index: 1;\n  }\n\n  swiper-container {\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  swiper-container::part(wrapper) {\n    pointer-events: none;\n    z-index: 2;\n  }\n\n  @media (min-width: 1200px) {\n    :host {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .content {\n      position: static;\n    }\n    swiper-container::part(container) {\n      display: grid;\n      grid-template-columns: var(--_navigation-width) minmax(0, 1fr);\n      transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);\n    }\n    .dummy-slide {\n      display: none;\n    }\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
+          "name": "u-menu-item",
           "declaration": {
-            "name": "styles",
-            "module": "src/navigation/side-navigation-swiper.styles.ts"
+            "name": "UmMenuItem",
+            "module": "src/menu/menu-item.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/navigation/side-navigation.styles.ts",
+      "path": "src/menu/menu.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --_navigation-width: 0;\n    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);\n    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);\n    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));\n    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);\n    display: block;\n    width: 100%;\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  :host(.disable-transition) * {\n    transition: none !important;\n  }\n  :host(.disable-transition) * ::slotted(u-top-app-bar) {\n    transition: none !important;\n  }\n\n  .drawer {\n    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n  .drawer,\n  .drawer u-elevation,\n  .drawer .drawer-container {\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n  }\n  .drawer.toggle u-elevation {\n    --u-elevation-level: 1;\n  }\n\n  .drawer-container {\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .scrim {\n    --_modal-drawer-open-progress: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100vw;\n    height: 100vh;\n    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    pointer-events: none;\n    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));\n    transition: opacity 375ms linear;\n  }\n  .scrim.moving {\n    transition: none;\n  }\n  .scrim.toggle {\n    --_modal-drawer-open-progress: 1;\n    pointer-events: auto;\n  }\n\n  @media (min-width: 840px) {\n    .content slot {\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n    }\n  }\n  @media (min-width: 1200px) {\n    .container {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .container:has(.drawer.toggle) {\n      --_navigation-width: 0;\n    }\n    .drawer {\n      border-radius: 0;\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\n    u-elevation,\n    .scrim {\n      display: none;\n    }\n  }\n  .navigation {\n    position: fixed;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    height: 100%;\n    z-index: var(--u-side-navigation-z-index, 1030);\n  }\n\n  .drawer {\n    position: absolute;\n    inset-inline-start: var(--_navigation-drawer-width-negative);\n    inset-block-start: 0;\n    width: var(--_navigation-drawer-width);\n    height: 100%;\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n    overflow: hidden;\n  }\n  .drawer.toggle {\n    inset-inline-start: 0;\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: var(--_navigation-width) minmax(0, 1fr);\n    transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  @media (min-width: 1200px) {\n    .drawer {\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\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": [
@@ -7578,23 +7474,23 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/navigation/side-navigation.styles.ts"
+            "module": "src/menu/menu.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/navigation/side-navigation.ts",
+      "path": "src/menu/menu.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmSideNavigation",
+          "name": "UmMenu",
           "members": [
             {
               "kind": "field",
-              "name": "#toggleDrawer",
+              "name": "#open",
               "privacy": "private",
               "type": {
                 "text": "boolean"
@@ -7603,398 +7499,235 @@
             },
             {
               "kind": "field",
-              "name": "disableSlideAnimation",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "description": "Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "toggleDrawer",
-              "description": "Toggle the navigation drawer visibility\n\n_Modal drawer_: Open if `true`, closed if `false`\n_Standard drawer_: Collapsed if `true`, visible if `false`",
-              "attribute": "toggle-drawer"
+              "name": "positioning",
+              "type": {
+                "text": "'relative' | 'fixed'"
+              },
+              "default": "'relative'",
+              "attribute": "positioning",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "swiperContainer",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "scrim",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "scrollContainer",
-              "type": {
-                "text": "HTMLElement | undefined"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderDefault",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderWithSwipe",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "swiperActiveIndexChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "swiperTransitionStart",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "slidesGridLengthChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "swiperTransitionEnd",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "swiperSliderMove",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "scrimClick",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "toggle-drawer",
-              "description": "Toggle the navigation drawer visibility\n\n_Modal drawer_: Open if `true`, closed if `false`\n_Standard drawer_: Collapsed if `true`, visible if `false`",
-              "fieldName": "toggleDrawer"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-side-navigation",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmSideNavigation",
-          "declaration": {
-            "name": "UmSideNavigation",
-            "module": "src/navigation/side-navigation.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-side-navigation",
-          "declaration": {
-            "name": "UmSideNavigation",
-            "module": "src/navigation/side-navigation.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/menu/menu-item.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  :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`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/menu/menu-item.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/menu/menu-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmMenuItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "#active",
-              "privacy": "private",
+              "name": "manualFocus",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "attribute": "manualFocus"
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "anchorCorner",
               "type": {
-                "text": "boolean"
+                "text": "'auto-start' | 'auto-end' | 'start-start' | 'start-end' | 'end-start' | 'end-end'"
               },
-              "description": "Force show focus ring",
-              "attribute": "active",
+              "default": "'end-start'",
+              "description": "The corner of the anchor which to align the menu in the standard logical\nproperty style of <block>-<inline> e.g. `'end-start'`.",
+              "attribute": "anchor-corner",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasIcon",
+              "name": "direction",
               "type": {
-                "text": "boolean"
+                "text": "'up-start' | 'up-end' | 'down-start' | 'down-end'"
               },
-              "default": "false",
-              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-icon",
+              "default": "'down-end'",
+              "description": "The direction of the menu. e.g. `'down-end'`.\n\nNOTE: This value may not be respected by the menu positioning algorithm\nif the menu would render outside the viewport.",
+              "attribute": "direction",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasBadge",
+              "name": "allowOverflow",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
-              "attribute": "has-badge",
+              "description": "Don't limit the height of the menu",
+              "attribute": "allow-overflow",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "assignedIcons",
+              "name": "menu",
               "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "innerRole",
+              "name": "ref",
               "type": {
-                "text": "string | null"
-              },
-              "privacy": "protected",
-              "default": "'menuitem'",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderContent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "HTMLTemplateResult"
-                }
-              },
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "text": "HTMLElement"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleIconSlotChange",
-              "privacy": "private"
-            },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "scrollContainer",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the button is disabled or not.",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "renderRipple",
+              "name": "#anchorElement",
+              "privacy": "private",
               "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "text": "HTMLElement | null | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "anchorElement",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The URL that the link button points to.",
-              "attribute": "href",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "text": "HTMLElement | null | undefined"
               }
             },
             {
               "kind": "field",
-              "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.",
-              "attribute": "target",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+              "name": "toggle"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "name",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "buttonElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ripple",
-              "type": {
-                "text": "UmRipple"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "pathname",
-              "type": {
-                "text": "string"
-              },
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "name": "close"
             },
             {
               "kind": "method",
-              "name": "renderButton",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "name": "calcDropdownPositioning",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderLink",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "name": "#resetMenu"
             },
             {
               "kind": "method",
-              "name": "focus",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "name": "#setToOpenUpOrDown",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "menuPosition",
+                  "type": {
+                    "text": "MenuPosition"
+                  }
+                },
+                {
+                  "name": "menuSize",
+                  "type": {
+                    "text": "MenuSize"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "blur",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "name": "#openBlockAuto",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "menuPosition",
+                  "type": {
+                    "text": "MenuPosition"
+                  }
+                },
+                {
+                  "name": "menuSize",
+                  "type": {
+                    "text": "MenuSize"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "getAriaLabel",
-              "privacy": "protected",
+              "name": "#tryOpenUp",
               "return": {
                 "type": {
-                  "text": "string | null"
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "AnchorCornerBlockSide"
+                  }
+                },
+                {
+                  "name": "menuSize",
+                  "type": {
+                    "text": "MenuSize"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "innerFocusHandler",
-              "privacy": "private",
+              "name": "#tryOpenDown",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "AnchorCornerBlockSide"
+                  }
+                },
+                {
+                  "name": "menuSize",
+                  "type": {
+                    "text": "MenuSize"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "#innerClickHandler",
+              "name": "#openToLargestBlockSide",
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "AnchorCornerBlockSide"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#setToOpenToStartOrEnd",
               "return": {
                 "type": {
                   "text": "void"
@@ -8002,21 +7735,22 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "menuPosition",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "MenuPosition"
+                  }
+                },
+                {
+                  "name": "menuSize",
+                  "type": {
+                    "text": "MenuSize"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleClick",
-              "privacy": "protected",
+              "name": "#tryOpenLeft",
               "return": {
                 "type": {
                   "text": "void"
@@ -8024,129 +7758,187 @@
               },
               "parameters": [
                 {
-                  "name": "_",
+                  "name": "side",
                   "type": {
-                    "text": "UIEvent"
+                    "text": "AnchorCornerInlineSide"
+                  }
+                },
+                {
+                  "name": "menuSize",
+                  "type": {
+                    "text": "MenuSize"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Force show focus ring",
-              "fieldName": "active"
+              ]
             },
             {
-              "name": "has-icon",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "#tryOpenRight",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "false",
-              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
-              "fieldName": "hasIcon"
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "AnchorCornerInlineSide"
+                  }
+                },
+                {
+                  "name": "menuSize",
+                  "type": {
+                    "text": "MenuSize"
+                  }
+                }
+              ]
             },
             {
-              "name": "has-badge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
-              "fieldName": "hasBadge"
+              "kind": "method",
+              "name": "#openToLargestInlineSide",
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "AnchorCornerInlineSide"
+                  }
+                }
+              ]
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the button is disabled or not.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+              "kind": "method",
+              "name": "#openUp",
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "AnchorCornerBlockSide"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#openDown",
+              "parameters": [
+                {
+                  "name": "side",
+                  "type": {
+                    "text": "AnchorCornerBlockSide"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getMenuPosition",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "MenuPosition"
+                }
               }
             },
             {
-              "name": "href",
+              "kind": "method",
+              "name": "getMenuSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "MenuSize"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The URL that the link button points to.",
-              "fieldName": "href",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "description": "Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods",
+              "fieldName": "open"
             },
             {
-              "name": "target",
+              "name": "positioning",
               "type": {
-                "text": "string | undefined"
+                "text": "'relative' | 'fixed'"
               },
-              "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
-              "fieldName": "target",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "default": "'relative'",
+              "fieldName": "positioning"
             },
             {
-              "name": "name",
+              "name": "manualFocus",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
+              "default": "false",
+              "fieldName": "manualFocus"
+            },
+            {
+              "name": "anchor-corner",
+              "type": {
+                "text": "'auto-start' | 'auto-end' | 'start-start' | 'start-end' | 'end-start' | 'end-end'"
+              },
+              "default": "'end-start'",
+              "description": "The corner of the anchor which to align the menu in the standard logical\nproperty style of <block>-<inline> e.g. `'end-start'`.",
+              "fieldName": "anchorCorner"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "'up-start' | 'up-end' | 'down-start' | 'down-end'"
+              },
+              "default": "'down-end'",
+              "description": "The direction of the menu. e.g. `'down-end'`.\n\nNOTE: This value may not be respected by the menu positioning algorithm\nif the menu would render outside the viewport.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "allow-overflow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Don't limit the height of the menu",
+              "fieldName": "allowOverflow"
             }
           ],
           "superclass": {
-            "name": "UmButtonWrapper",
-            "module": "/src/shared/button-wrapper.js"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "tagName": "u-menu-item",
+          "tagName": "u-menu",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmMenuItem",
+          "name": "UmMenu",
           "declaration": {
-            "name": "UmMenuItem",
-            "module": "src/menu/menu-item.ts"
+            "name": "UmMenu",
+            "module": "src/menu/menu.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-menu-item",
+          "name": "u-menu",
           "declaration": {
-            "name": "UmMenuItem",
-            "module": "src/menu/menu-item.ts"
+            "name": "UmMenu",
+            "module": "src/menu/menu.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/menu/menu.styles.ts",
+      "path": "src/navigation/drawer-item.styles.ts",
       "declarations": [
         {
           "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  * {\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`"
         }
       ],
       "exports": [
@@ -8155,158 +7947,108 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/menu/menu.styles.ts"
+            "module": "src/navigation/drawer-item.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/menu/menu.ts",
+      "path": "src/navigation/drawer-item.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmMenu",
+          "name": "UmDrawerItem",
           "members": [
             {
               "kind": "field",
-              "name": "#open",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "#justShow",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "open",
+              "name": "hasIcon",
               "type": {
                 "text": "boolean"
               },
-              "description": "Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "positioning",
-              "type": {
-                "text": "'relative' | 'fixed'"
-              },
-              "default": "'relative'",
-              "attribute": "positioning",
+              "default": "false",
+              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-icon",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "manualFocus",
+              "name": "hasBadge",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "manualFocus"
-            },
-            {
-              "kind": "field",
-              "name": "anchorCorner",
-              "type": {
-                "text": "'auto-start' | 'auto-end' | 'start-start' | 'start-end' | 'end-start' | 'end-end'"
-              },
-              "default": "'end-start'",
-              "description": "The corner of the anchor which to align the menu in the standard logical\nproperty style of <block>-<inline> e.g. `'end-start'`.",
-              "attribute": "anchor-corner",
+              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
+              "attribute": "has-badge",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "active",
               "type": {
-                "text": "'up-start' | 'up-end' | 'down-start' | 'down-end'"
+                "text": "boolean"
               },
-              "default": "'down-end'",
-              "description": "The direction of the menu. e.g. `'down-end'`.\n\nNOTE: This value may not be respected by the menu positioning algorithm\nif the menu would render outside the viewport.",
-              "attribute": "direction",
+              "default": "false",
+              "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
+              "attribute": "active",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "allowOverflow",
+              "name": "keepDrawerOpen",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Don't limit the height of the menu",
-              "attribute": "allow-overflow",
+              "description": "If true, it will not attempt to close de navigation drawer on click",
+              "attribute": "keep-drawer-open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "menu",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ref",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#anchorElement",
-              "privacy": "private",
+              "name": "assignedIcons",
               "type": {
-                "text": "HTMLElement | null | undefined"
-              }
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "anchorElement",
+              "name": "assignedBadges",
               "type": {
-                "text": "HTMLElement | null | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "toggle"
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "show",
+              "name": "renderContent",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "HTMLTemplateResult"
                 }
+              },
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "close"
-            },
             {
               "kind": "method",
-              "name": "calcDropdownPositioning",
+              "name": "handleIconSlotChange",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#resetMenu"
+              "name": "handleBadgeSlotChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#setToOpenUpOrDown",
+              "name": "handleClick",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -8314,22 +8056,194 @@
               },
               "parameters": [
                 {
-                  "name": "menuPosition",
-                  "type": {
-                    "text": "MenuPosition"
-                  }
-                },
-                {
-                  "name": "menuSize",
+                  "name": "_",
                   "type": {
-                    "text": "MenuSize"
+                    "text": "UIEvent"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button is disabled or not.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "renderRipple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL that the link button points to.",
+              "attribute": "href",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "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.",
+              "attribute": "target",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "buttonElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ripple",
+              "type": {
+                "text": "UmRipple"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "innerRole",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "protected",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "pathname",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "#openBlockAuto",
+              "name": "renderButton",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLink",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getAriaLabel",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string | null"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "innerFocusHandler",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#innerClickHandler",
               "return": {
                 "type": {
                   "text": "void"
@@ -8337,279 +8251,363 @@
               },
               "parameters": [
                 {
-                  "name": "menuPosition",
-                  "type": {
-                    "text": "MenuPosition"
-                  }
-                },
-                {
-                  "name": "menuSize",
+                  "name": "event",
                   "type": {
-                    "text": "MenuSize"
+                    "text": "MouseEvent"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "has-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
+              "fieldName": "hasIcon"
+            },
+            {
+              "name": "has-badge",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
+              "fieldName": "hasBadge"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
+              "fieldName": "active"
+            },
+            {
+              "name": "keep-drawer-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, it will not attempt to close de navigation drawer on click",
+              "fieldName": "keepDrawerOpen"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button is disabled or not.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL that the link button points to.",
+              "fieldName": "href",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "UmButtonWrapper",
+            "module": "/src/shared/button-wrapper.js"
+          },
+          "tagName": "u-drawer-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmDrawerItem",
+          "declaration": {
+            "name": "UmDrawerItem",
+            "module": "src/navigation/drawer-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-drawer-item",
+          "declaration": {
+            "name": "UmDrawerItem",
+            "module": "src/navigation/drawer-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation/drawer.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: block;\n    background-color: var(--u-modal-drawer-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-drawer-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    height: 100%;\n    padding-inline: var(--u-drawer-padding, 28px);\n  }\n\n  @media (min-width: 1200px) {\n    :host {\n      background-color: var(--u-standard-drawer-background-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n    }\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation/drawer.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation/drawer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmDrawer",
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-drawer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmDrawer",
+          "declaration": {
+            "name": "UmDrawer",
+            "module": "src/navigation/drawer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-drawer",
+          "declaration": {
+            "name": "UmDrawer",
+            "module": "src/navigation/drawer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation/side-navigation-swiper.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    --_navigation-width: 0;\n    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);\n    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);\n    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));\n    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);\n    display: block;\n    width: 100%;\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  :host(.disable-transition) * {\n    transition: none !important;\n  }\n  :host(.disable-transition) * ::slotted(u-top-app-bar) {\n    transition: none !important;\n  }\n\n  .drawer {\n    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n  .drawer,\n  .drawer u-elevation,\n  .drawer .drawer-container {\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n  }\n  .drawer.toggle u-elevation {\n    --u-elevation-level: 1;\n  }\n\n  .drawer-container {\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .scrim {\n    --_modal-drawer-open-progress: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100vw;\n    height: 100vh;\n    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    pointer-events: none;\n    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));\n    transition: opacity 375ms linear;\n  }\n  .scrim.moving {\n    transition: none;\n  }\n  .scrim.toggle {\n    --_modal-drawer-open-progress: 1;\n    pointer-events: auto;\n  }\n\n  @media (min-width: 840px) {\n    .content slot {\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n    }\n  }\n  @media (min-width: 1200px) {\n    .container {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .container:has(.drawer.toggle) {\n      --_navigation-width: 0;\n    }\n    .drawer {\n      border-radius: 0;\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\n    u-elevation,\n    .scrim {\n      display: none;\n    }\n  }\n  .content {\n    position: fixed;\n    inset: 0;\n    z-index: 1;\n    overflow: auto;\n  }\n\n  .drawer {\n    position: relative;\n    width: var(--_navigation-drawer-width);\n    z-index: var(--u-side-navigation-z-index, 1030);\n    pointer-events: auto;\n  }\n\n  .scrim {\n    z-index: 1;\n  }\n\n  swiper-container {\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  swiper-container::part(wrapper) {\n    pointer-events: none;\n    z-index: 2;\n  }\n\n  @media (min-width: 1200px) {\n    :host {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .content {\n      position: static;\n    }\n    swiper-container::part(container) {\n      display: grid;\n      grid-template-columns: var(--_navigation-width) minmax(0, 1fr);\n      transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);\n    }\n    .dummy-slide {\n      display: none;\n    }\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation/side-navigation-swiper.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation/side-navigation.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    --_navigation-width: 0;\n    --_navigation-drawer-width: min(var(--u-navigation-drawer-width, 360px), 85vw);\n    --_navigation-drawer-width-negative: calc(var(--_navigation-drawer-width) * -1);\n    --_navigation-drawer-corner-shape: var(--u-navigation-drawer-corner-shape, var(--u-shape-corner-large, 16px));\n    --_scrim-opacity: var(--u-drawer-scrim-opacity, .4);\n    display: block;\n    width: 100%;\n    height: 100%;\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  :host(.disable-transition) * {\n    transition: none !important;\n  }\n  :host(.disable-transition) * ::slotted(u-top-app-bar) {\n    transition: none !important;\n  }\n\n  .drawer {\n    transition: inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n  .drawer,\n  .drawer u-elevation,\n  .drawer .drawer-container {\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n  }\n  .drawer.toggle u-elevation {\n    --u-elevation-level: 1;\n  }\n\n  .drawer-container {\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .scrim {\n    --_modal-drawer-open-progress: 0;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100vw;\n    height: 100vh;\n    background: var(--u-drawer-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    pointer-events: none;\n    opacity: calc(var(--_scrim-opacity) * var(--_modal-drawer-open-progress));\n    transition: opacity 375ms linear;\n  }\n  .scrim.moving {\n    transition: none;\n  }\n  .scrim.toggle {\n    --_modal-drawer-open-progress: 1;\n    pointer-events: auto;\n  }\n\n  @media (min-width: 840px) {\n    .content slot {\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n    }\n  }\n  @media (min-width: 1200px) {\n    .container {\n      --_navigation-width: var(--_navigation-drawer-width);\n    }\n    .container:has(.drawer.toggle) {\n      --_navigation-width: 0;\n    }\n    .drawer {\n      border-radius: 0;\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\n    u-elevation,\n    .scrim {\n      display: none;\n    }\n  }\n  .navigation {\n    position: fixed;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    height: 100%;\n    z-index: var(--u-side-navigation-z-index, 1030);\n  }\n\n  .drawer {\n    position: absolute;\n    inset-inline-start: var(--_navigation-drawer-width-negative);\n    inset-block-start: 0;\n    width: var(--_navigation-drawer-width);\n    height: 100%;\n    border-start-end-radius: var(--_navigation-drawer-corner-shape);\n    border-end-end-radius: var(--_navigation-drawer-corner-shape);\n    overflow: hidden;\n  }\n  .drawer.toggle {\n    inset-inline-start: 0;\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: var(--_navigation-width) minmax(0, 1fr);\n    transition: 375ms cubic-bezier(0.19, 1, 0.22, 1);\n    --u-app-bar-offset: var(--_navigation-width);\n  }\n\n  @media (min-width: 1200px) {\n    .drawer {\n      inset-inline-start: 0;\n    }\n    .drawer.toggle {\n      inset-inline-start: var(--_navigation-drawer-width-negative);\n    }\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation/side-navigation.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation/side-navigation.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmSideNavigation",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#toggleDrawer",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "disableSlideAnimation",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "toggleDrawer",
+              "description": "Toggle the navigation drawer visibility\n\n_Modal drawer_: Open if `true`, closed if `false`\n_Standard drawer_: Collapsed if `true`, visible if `false`",
+              "attribute": "toggle-drawer"
+            },
+            {
+              "kind": "field",
+              "name": "swiperContainer",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "method",
-              "name": "#tryOpenUp",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "side",
-                  "type": {
-                    "text": "AnchorCornerBlockSide"
-                  }
-                },
-                {
-                  "name": "menuSize",
-                  "type": {
-                    "text": "MenuSize"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "scrim",
+              "type": {
+                "text": "HTMLElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "#tryOpenDown",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "side",
-                  "type": {
-                    "text": "AnchorCornerBlockSide"
-                  }
-                },
-                {
-                  "name": "menuSize",
-                  "type": {
-                    "text": "MenuSize"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "scrollContainer",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
             },
             {
               "kind": "method",
-              "name": "#openToLargestBlockSide",
-              "parameters": [
-                {
-                  "name": "side",
-                  "type": {
-                    "text": "AnchorCornerBlockSide"
-                  }
-                }
-              ]
+              "name": "renderDefault",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#setToOpenToStartOrEnd",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "menuPosition",
-                  "type": {
-                    "text": "MenuPosition"
-                  }
-                },
-                {
-                  "name": "menuSize",
-                  "type": {
-                    "text": "MenuSize"
-                  }
-                }
-              ]
+              "name": "renderWithSwipe",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#tryOpenLeft",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "side",
-                  "type": {
-                    "text": "AnchorCornerInlineSide"
-                  }
-                },
-                {
-                  "name": "menuSize",
-                  "type": {
-                    "text": "MenuSize"
-                  }
-                }
-              ]
+              "name": "swiperActiveIndexChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#tryOpenRight",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "side",
-                  "type": {
-                    "text": "AnchorCornerInlineSide"
-                  }
-                },
-                {
-                  "name": "menuSize",
-                  "type": {
-                    "text": "MenuSize"
-                  }
-                }
-              ]
+              "name": "swiperTransitionStart",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#openToLargestInlineSide",
-              "parameters": [
-                {
-                  "name": "side",
-                  "type": {
-                    "text": "AnchorCornerInlineSide"
-                  }
-                }
-              ]
+              "name": "slidesGridLengthChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#openUp",
-              "parameters": [
-                {
-                  "name": "side",
-                  "type": {
-                    "text": "AnchorCornerBlockSide"
-                  }
-                }
-              ]
+              "name": "swiperTransitionEnd",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#openDown",
+              "name": "swiperSliderMove",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "side",
+                  "name": "e",
                   "type": {
-                    "text": "AnchorCornerBlockSide"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "getMenuPosition",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "MenuPosition"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getMenuSize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "MenuSize"
-                }
-              }
+              "name": "scrimClick",
+              "privacy": "private"
             }
           ],
           "attributes": [
             {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods",
-              "fieldName": "open"
-            },
-            {
-              "name": "positioning",
-              "type": {
-                "text": "'relative' | 'fixed'"
-              },
-              "default": "'relative'",
-              "fieldName": "positioning"
-            },
-            {
-              "name": "manualFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "manualFocus"
-            },
-            {
-              "name": "anchor-corner",
-              "type": {
-                "text": "'auto-start' | 'auto-end' | 'start-start' | 'start-end' | 'end-start' | 'end-end'"
-              },
-              "default": "'end-start'",
-              "description": "The corner of the anchor which to align the menu in the standard logical\nproperty style of <block>-<inline> e.g. `'end-start'`.",
-              "fieldName": "anchorCorner"
-            },
-            {
-              "name": "direction",
-              "type": {
-                "text": "'up-start' | 'up-end' | 'down-start' | 'down-end'"
-              },
-              "default": "'down-end'",
-              "description": "The direction of the menu. e.g. `'down-end'`.\n\nNOTE: This value may not be respected by the menu positioning algorithm\nif the menu would render outside the viewport.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "allow-overflow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Don't limit the height of the menu",
-              "fieldName": "allowOverflow"
+              "name": "toggle-drawer",
+              "description": "Toggle the navigation drawer visibility\n\n_Modal drawer_: Open if `true`, closed if `false`\n_Standard drawer_: Collapsed if `true`, visible if `false`",
+              "fieldName": "toggleDrawer"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "u-menu",
+          "tagName": "u-side-navigation",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmMenu",
+          "name": "UmSideNavigation",
           "declaration": {
-            "name": "UmMenu",
-            "module": "src/menu/menu.ts"
+            "name": "UmSideNavigation",
+            "module": "src/navigation/side-navigation.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-menu",
+          "name": "u-side-navigation",
           "declaration": {
-            "name": "UmMenu",
-            "module": "src/menu/menu.ts"
+            "name": "UmSideNavigation",
+            "module": "src/navigation/side-navigation.ts"
           }
         }
       ]
@@ -9845,6 +9843,15 @@
                 "text": "HTMLOptionElement"
               }
             },
+            {
+              "kind": "field",
+              "name": "#mutationObserver",
+              "privacy": "private",
+              "type": {
+                "text": "MutationObserver | null"
+              },
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -9901,8 +9908,16 @@
             },
             {
               "kind": "method",
-              "name": "setNativeOption",
-              "privacy": "private"
+              "name": "#updateContent"
+            },
+            {
+              "kind": "method",
+              "name": "#setNativeOption",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
             },
             {
               "kind": "field",
@@ -10343,6 +10358,152 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/select/select-navigation-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SelectNavigationController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#element",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "T"
+              },
+              "privacy": "protected",
+              "default": "host",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "bindHandleKeyDown",
+              "type": {
+                "text": "(event: KeyboardEvent) => void"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "attach",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "detach",
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "navigate",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "forwards",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "MenuFieldNavigationController",
+                "module": "src/shared/menu-field/menu-field-navigation-controller.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "selectActiveItem",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "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",
@@ -10350,7 +10511,7 @@
         {
           "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`"
+          "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  .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  }\n`"
         }
       ],
       "exports": [
@@ -10380,6 +10541,12 @@
                 "text": "HTMLSelectElement"
               }
             },
+            {
+              "kind": "field",
+              "name": "#navigationController",
+              "privacy": "private",
+              "default": "new SelectNavigationController(this)"
+            },
             {
               "kind": "field",
               "name": "#connected",
@@ -10510,6 +10677,13 @@
                 "module": "src/field/field-base.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "menuItems",
+              "type": {
+                "text": "UmOption[]"
+              }
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -12877,135 +13051,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/typeahead/highlight.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: inline-block;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/typeahead/highlight.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/typeahead/highlight.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmHighlight",
-          "members": [
-            {
-              "kind": "field",
-              "name": "#result",
-              "privacy": "private",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#term",
-              "privacy": "private",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "parts",
-              "type": {
-                "text": "string[] | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "result",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The result text to display. If the term is found inside this text, it's highlighted",
-              "attribute": "result"
-            },
-            {
-              "kind": "field",
-              "name": "term",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The searched term",
-              "attribute": "term"
-            },
-            {
-              "kind": "method",
-              "name": "setParts",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "result",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The result text to display. If the term is found inside this text, it's highlighted",
-              "fieldName": "result"
-            },
-            {
-              "name": "term",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The searched term",
-              "fieldName": "term"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-highlight",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmHighlight",
-          "declaration": {
-            "name": "UmHighlight",
-            "module": "src/typeahead/highlight.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-highlight",
-          "declaration": {
-            "name": "UmHighlight",
-            "module": "src/typeahead/highlight.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/typeahead/typeahead.styles.ts",
+      "path": "src/text-field/text-field.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n  }\n\n  u-menu-item {\n    font-weight: var(--u-typeahead-item-font-weight, var(--u-font-weight-regular, 400));\n  }\n`"
+          "default": "css `\n  .prefix span:empty,\n  .suffix span:empty {\n    display: none;\n  }\n\n  .prefix::slotted(*),\n  .prefix span {\n    color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));\n  }\n\n  .suffix::slotted(*),\n  .suffix span {\n    color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));\n  }\n\n  :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {\n    color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n  }\n  :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {\n    color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n  }\n`"
         }
       ],
       "exports": [
@@ -13014,20 +13065,79 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/typeahead/typeahead.styles.ts"
+            "module": "src/text-field/text-field.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/typeahead/typeahead.ts",
+      "path": "src/text-field/text-field.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmTypeahead",
+          "name": "UmTextField",
           "members": [
+            {
+              "kind": "field",
+              "name": "#value",
+              "privacy": "private",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "prefixText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "prefix-text"
+            },
+            {
+              "kind": "field",
+              "name": "suffixText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "suffix-text"
+            },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus"
+            },
+            {
+              "kind": "method",
+              "name": "renderControl",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "HTMLTemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#handleInput"
+            },
             {
               "kind": "field",
               "name": "formAssociated",
@@ -13035,456 +13145,707 @@
                 "text": "boolean"
               },
               "static": true,
-              "default": "true"
+              "default": "true",
+              "inheritedFrom": {
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "#targetId",
-              "privacy": "private",
+              "name": "shadowRootOptions",
               "type": {
-                "text": "string | undefined"
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  }",
+              "inheritedFrom": {
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "#connected",
-              "privacy": "private",
+              "name": "empty",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "true",
+              "attribute": "empty",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "placeholder",
               "type": {
-                "text": "HTMLElement & {input?: HTMLInputElement; container?: HTMLElement; value: string} | null"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "null"
+              "attribute": "placeholder",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "#documentMutationObserver",
-              "privacy": "private",
+              "name": "form",
               "type": {
-                "text": "MutationObserver | null"
+                "text": "HTMLFormElement | null"
               },
-              "default": "null"
+              "inheritedFrom": {
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "#termNormalized",
-              "privacy": "private",
+              "name": "elementInternals",
               "type": {
-                "text": "string"
+                "text": "ElementInternals"
               },
-              "default": "''"
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "#debounceTimeout",
-              "privacy": "private",
+              "name": "config",
               "type": {
-                "text": "number | null"
+                "text": "UmFieldDefaults | undefined"
               },
-              "default": "null"
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "#value",
-              "privacy": "private",
+              "name": "variant",
               "type": {
-                "text": "any"
+                "text": "'filled' | 'outlined' | undefined"
+              },
+              "default": "undefined",
+              "attribute": "variant",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "#elementInternals",
-              "privacy": "private",
+              "name": "label",
               "type": {
-                "text": "ElementInternals"
+                "text": "string | undefined"
+              },
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "results",
+              "name": "counter",
               "type": {
-                "text": "Data[]"
+                "text": "string | undefined"
+              },
+              "attribute": "counter",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "source",
+              "name": "supportingText",
               "type": {
-                "text": "(any[] | ((term: string) => Promise<any[]>)) | undefined"
+                "text": "string | undefined"
               },
-              "attribute": "source"
+              "attribute": "supporting-text",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "formatter",
+              "name": "errorText",
               "type": {
-                "text": "((value: any) => string) | undefined"
+                "text": "string | undefined"
+              },
+              "attribute": "error-text",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "template",
+              "name": "disabled",
               "type": {
-                "text": "((term: string, value: any) => string) | undefined"
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "debounce",
+              "name": "invalid",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "300",
-              "attribute": "debounce",
-              "reflects": true
+              "default": "false",
+              "attribute": "invalid",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setDefaults",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "ContextProvider<Context<HTMLElement, UmFieldDefaults>>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "contextRoot",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "UmFieldDefaults"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "limit",
+              "name": "hasLeadingIcon",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "10",
-              "attribute": "limit",
-              "reflects": true
+              "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": "minLength",
+              "name": "hasTrailingIcon",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "2",
-              "attribute": "minLength",
-              "reflects": true
+              "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": "openOnFocus",
+              "name": "hasErrorText",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "open-on-focus",
-              "reflects": true
+              "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"
+              }
             },
             {
               "kind": "field",
-              "name": "editable",
+              "name": "assignedLeadingIcons",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement[]"
               },
-              "default": "false",
-              "attribute": "editable",
-              "reflects": true
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "assignedTrailingIcons",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "assignedErrorTexts",
               "type": {
-                "text": "any"
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "focus"
-            },
-            {
-              "kind": "method",
-              "name": "clear"
-            },
             {
               "kind": "field",
-              "name": "targetId",
+              "name": "labelElement",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLElement"
               },
-              "attribute": "target-id",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "menu",
+              "name": "container",
               "type": {
-                "text": "UmMenu"
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "field",
-              "name": "menuItems",
+              "name": "labelSizeObserver",
               "type": {
-                "text": "UmMenuItem[]"
+                "text": "ResizeObserver | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
               "kind": "method",
-              "name": "#attach"
+              "name": "renderAfterContent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "#detach"
-            },
-            {
-              "kind": "field",
-              "name": "#handleFocus",
-              "privacy": "private"
+              "name": "#attach",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "#handleInput",
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleLeadingIconSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleKeyDown",
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleTrailingIconSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "navigate",
+              "name": "handleErrorTextSlotChange",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                },
-                {
-                  "name": "forwards",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
               "kind": "method",
-              "name": "selectActiveItem",
+              "name": "setLabelWidthProperties",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "fieldName": "value"
             },
             {
-              "kind": "method",
-              "name": "#getItemClickHandler",
-              "parameters": [
-                {
-                  "name": "data",
-                  "type": {
-                    "text": "Data"
-                  }
-                }
-              ]
+              "name": "prefix-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "prefixText"
             },
             {
-              "kind": "method",
-              "name": "#setValueAndDispatchEvents",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                },
-                {
-                  "name": "direct",
-                  "default": "false"
-                }
-              ]
+              "name": "suffix-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "suffixText"
             },
             {
-              "kind": "method",
-              "name": "#updateResults",
-              "parameters": [
-                {
-                  "name": "lazy",
-                  "default": "false"
-                }
-              ]
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "UmTextFieldBase",
+                "module": "src/shared/text-field-base/text-field-base.ts"
+              }
+            },
+            {
+              "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"
+              },
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "#getData",
-              "return": {
-                "type": {
-                  "text": "Promise<Data[]>"
-                }
+              "name": "counter",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "counter",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "#setValueOnTarget"
+              "name": "supporting-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "supportingText",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getTargetValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "name": "error-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "errorText",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setTargetValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "empty",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "default": "false",
+              "fieldName": "empty",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getMenuAnchor",
-              "privacy": "private"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getTextValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "invalid",
+              "inheritedFrom": {
+                "name": "UmFieldBase",
+                "module": "src/field/field-base.ts"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "input",
+              "name": "has-leading-icon",
               "type": {
-                "text": "InputEvent"
+                "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": "change",
+              "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"
               }
             }
           ],
-          "attributes": [
+          "superclass": {
+            "name": "UmTextFieldBase",
+            "module": "/src/shared/text-field-base/text-field-base.js"
+          },
+          "tagName": "u-text-field",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmTextField",
+          "declaration": {
+            "name": "UmTextField",
+            "module": "src/text-field/text-field.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-text-field",
+          "declaration": {
+            "name": "UmTextField",
+            "module": "src/text-field/text-field.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/typeahead/highlight.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    display: inline-block;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/typeahead/highlight.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/typeahead/highlight.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmHighlight",
+          "members": [
             {
-              "name": "source",
+              "kind": "field",
+              "name": "#result",
+              "privacy": "private",
               "type": {
-                "text": "(any[] | ((term: string) => Promise<any[]>)) | undefined"
-              },
-              "fieldName": "source"
+                "text": "string | undefined"
+              }
             },
             {
-              "name": "debounce",
+              "kind": "field",
+              "name": "#term",
+              "privacy": "private",
               "type": {
-                "text": "number"
-              },
-              "default": "300",
-              "fieldName": "debounce"
+                "text": "string | undefined"
+              }
             },
             {
-              "name": "limit",
+              "kind": "field",
+              "name": "parts",
               "type": {
-                "text": "number"
+                "text": "string[] | undefined"
               },
-              "default": "10",
-              "fieldName": "limit"
+              "privacy": "private"
             },
             {
-              "name": "minLength",
+              "kind": "field",
+              "name": "result",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "2",
-              "fieldName": "minLength"
+              "description": "The result text to display. If the term is found inside this text, it's highlighted",
+              "attribute": "result"
             },
             {
-              "name": "open-on-focus",
+              "kind": "field",
+              "name": "term",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "fieldName": "openOnFocus"
+              "description": "The searched term",
+              "attribute": "term"
             },
             {
-              "name": "editable",
+              "kind": "method",
+              "name": "setParts",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "result",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "fieldName": "editable"
+              "description": "The result text to display. If the term is found inside this text, it's highlighted",
+              "fieldName": "result"
             },
             {
-              "name": "target-id",
+              "name": "term",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "targetId"
+              "description": "The searched term",
+              "fieldName": "term"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "u-typeahead",
+          "tagName": "u-highlight",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmTypeahead",
+          "name": "UmHighlight",
           "declaration": {
-            "name": "UmTypeahead",
-            "module": "src/typeahead/typeahead.ts"
+            "name": "UmHighlight",
+            "module": "src/typeahead/highlight.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-typeahead",
+          "name": "u-highlight",
           "declaration": {
-            "name": "UmTypeahead",
-            "module": "src/typeahead/typeahead.ts"
+            "name": "UmHighlight",
+            "module": "src/typeahead/highlight.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/text-field/text-field.styles.ts",
+      "path": "src/typeahead/typeahead.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  .prefix span:empty,\n  .suffix span:empty {\n    display: none;\n  }\n\n  .prefix::slotted(*),\n  .prefix span {\n    color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));\n  }\n\n  .suffix::slotted(*),\n  .suffix span {\n    color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));\n  }\n\n  :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {\n    color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n  }\n  :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {\n    color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n  }\n`"
+          "default": "css `\n  :host {\n    display: block;\n  }\n\n  u-menu-item {\n    font-weight: var(--u-typeahead-item-font-weight, var(--u-font-weight-regular, 400));\n  }\n`"
         }
       ],
       "exports": [
@@ -13493,652 +13854,446 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/text-field/text-field.styles.ts"
+            "module": "src/typeahead/typeahead.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/text-field/text-field.ts",
+      "path": "src/typeahead/typeahead.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmTextField",
+          "name": "UmTypeahead",
           "members": [
             {
               "kind": "field",
-              "name": "#value",
-              "privacy": "private",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "prefixText",
+              "name": "formAssociated",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "attribute": "prefix-text"
+              "static": true,
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "suffixText",
+              "name": "#targetId",
+              "privacy": "private",
               "type": {
                 "text": "string | undefined"
-              },
-              "attribute": "suffix-text"
-            },
-            {
-              "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "focus"
-            },
-            {
-              "kind": "method",
-              "name": "renderControl",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "HTMLTemplateResult"
-                }
-              },
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "#handleInput"
-            },
             {
               "kind": "field",
-              "name": "formAssociated",
+              "name": "#connected",
+              "privacy": "private",
               "type": {
                 "text": "boolean"
               },
-              "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
-              }
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "target",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "HTMLElement & {input?: HTMLInputElement; container?: HTMLElement; value: string} | null"
               },
-              "static": true,
-              "default": "{\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  }",
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
-              }
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "empty",
+              "name": "#documentMutationObserver",
+              "privacy": "private",
               "type": {
-                "text": "boolean"
+                "text": "MutationObserver | null"
               },
-              "default": "true",
-              "attribute": "empty",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "placeholder",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
-              }
+              "name": "#navigationController",
+              "privacy": "private",
+              "default": "new MenuFieldNavigationController(this)"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "#termNormalized",
+              "privacy": "private",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "string"
               },
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
-              }
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "elementInternals",
+              "name": "#debounceTimeout",
+              "privacy": "private",
               "type": {
-                "text": "ElementInternals"
+                "text": "number | null"
               },
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
-              }
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "config",
-              "type": {
-                "text": "UmFieldDefaults | undefined"
-              },
+              "name": "#value",
               "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "variant",
               "type": {
-                "text": "'filled' | 'outlined' | undefined"
-              },
-              "default": "undefined",
-              "attribute": "variant",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "any"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "#elementInternals",
+              "privacy": "private",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "label",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "ElementInternals"
               }
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "results",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "counter",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "Data[]"
               }
             },
             {
               "kind": "field",
-              "name": "supportingText",
+              "name": "source",
               "type": {
-                "text": "string | undefined"
+                "text": "(any[] | ((term: string) => Promise<any[]>)) | undefined"
               },
-              "attribute": "supporting-text",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "attribute": "source"
             },
             {
               "kind": "field",
-              "name": "errorText",
+              "name": "formatter",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "error-text",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "((value: any) => string) | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "template",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "((term: string, value: any) => string) | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "invalid",
+              "name": "debounce",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "invalid",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setDefaults",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "ContextProvider<Context<HTMLElement, UmFieldDefaults>>"
-                }
+                "text": "number"
               },
-              "parameters": [
-                {
-                  "name": "contextRoot",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "config",
-                  "type": {
-                    "text": "UmFieldDefaults"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "default": "300",
+              "attribute": "debounce",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasLeadingIcon",
+              "name": "limit",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "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"
-              }
+              "default": "10",
+              "attribute": "limit",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasTrailingIcon",
+              "name": "minLength",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "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"
-              }
+              "default": "2",
+              "attribute": "minLength",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasErrorText",
+              "name": "openOnFocus",
               "type": {
                 "text": "boolean"
               },
               "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"
-              }
+              "attribute": "open-on-focus",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "assignedLeadingIcons",
+              "name": "editable",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "default": "false",
+              "attribute": "editable",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "assignedTrailingIcons",
+              "name": "form",
               "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "HTMLFormElement | null"
               }
             },
             {
               "kind": "field",
-              "name": "assignedErrorTexts",
+              "name": "value",
               "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "any"
               }
             },
+            {
+              "kind": "method",
+              "name": "focus"
+            },
+            {
+              "kind": "method",
+              "name": "clear"
+            },
             {
               "kind": "field",
-              "name": "labelElement",
+              "name": "targetId",
               "type": {
-                "text": "HTMLElement"
+                "text": "string | undefined"
               },
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "attribute": "target-id",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "container",
+              "name": "menu",
               "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "UmMenu"
               }
             },
             {
               "kind": "field",
-              "name": "labelSizeObserver",
+              "name": "menuItems",
               "type": {
-                "text": "ResizeObserver | null"
-              },
-              "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "UmMenuItem[]"
               }
             },
             {
               "kind": "method",
-              "name": "renderAfterContent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "name": "#attach"
             },
             {
               "kind": "method",
-              "name": "#attach",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "name": "#detach"
             },
             {
-              "kind": "method",
-              "name": "handleLeadingIconSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "kind": "field",
+              "name": "#handleFocus",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "handleTrailingIconSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "kind": "field",
+              "name": "#handleInput",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleErrorTextSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "name": "#getItemClickHandler",
+              "parameters": [
+                {
+                  "name": "data",
+                  "type": {
+                    "text": "Data"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "setLabelWidthProperties",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
-            }
-          ],
-          "attributes": [
+              "name": "#setValueAndDispatchEvents",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                },
+                {
+                  "name": "direct",
+                  "default": "false"
+                }
+              ]
+            },
             {
-              "name": "value",
-              "fieldName": "value"
+              "kind": "method",
+              "name": "#updateResults",
+              "parameters": [
+                {
+                  "name": "lazy",
+                  "default": "false"
+                }
+              ]
             },
             {
-              "name": "prefix-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "prefixText"
+              "kind": "method",
+              "name": "#getData",
+              "return": {
+                "type": {
+                  "text": "Promise<Data[]>"
+                }
+              }
             },
             {
-              "name": "suffix-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "suffixText"
+              "kind": "method",
+              "name": "#setValueOnTarget"
             },
             {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "UmTextFieldBase",
-                "module": "src/shared/text-field-base/text-field-base.ts"
+              "kind": "method",
+              "name": "getTargetValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               }
             },
             {
-              "name": "variant",
-              "type": {
-                "text": "'filled' | 'outlined' | undefined"
-              },
-              "default": "undefined",
-              "resolveInitializer": {
-                "module": "src/field/field-base.ts"
+              "kind": "method",
+              "name": "setTargetValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+              "kind": "method",
+              "name": "getMenuAnchor",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getTextValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               }
             },
             {
-              "name": "counter",
+              "kind": "method",
+              "name": "#handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
               "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "counter",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "InputEvent"
               }
             },
             {
-              "name": "supporting-text",
+              "name": "change",
               "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "supportingText",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
+                "text": "Event"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "name": "error-text",
+              "name": "source",
               "type": {
-                "text": "string | undefined"
+                "text": "(any[] | ((term: string) => Promise<any[]>)) | undefined"
               },
-              "fieldName": "errorText",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "fieldName": "source"
             },
             {
-              "name": "empty",
+              "name": "debounce",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "fieldName": "empty",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "default": "300",
+              "fieldName": "debounce"
             },
             {
-              "name": "disabled",
+              "name": "limit",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "default": "10",
+              "fieldName": "limit"
             },
             {
-              "name": "invalid",
+              "name": "minLength",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "fieldName": "invalid",
-              "inheritedFrom": {
-                "name": "UmFieldBase",
-                "module": "src/field/field-base.ts"
-              }
+              "default": "2",
+              "fieldName": "minLength"
             },
             {
-              "name": "has-leading-icon",
+              "name": "open-on-focus",
               "type": {
                 "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"
-              }
+              "fieldName": "openOnFocus"
             },
             {
-              "name": "has-trailing-icon",
+              "name": "editable",
               "type": {
                 "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"
-              }
+              "fieldName": "editable"
             },
             {
-              "name": "has-error-text",
+              "name": "target-id",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "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"
-              }
+              "fieldName": "targetId"
             }
           ],
           "superclass": {
-            "name": "UmTextFieldBase",
-            "module": "/src/shared/text-field-base/text-field-base.js"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "tagName": "u-text-field",
+          "tagName": "u-typeahead",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmTextField",
+          "name": "UmTypeahead",
           "declaration": {
-            "name": "UmTextField",
-            "module": "src/text-field/text-field.ts"
+            "name": "UmTypeahead",
+            "module": "src/typeahead/typeahead.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-text-field",
+          "name": "u-typeahead",
           "declaration": {
-            "name": "UmTextField",
-            "module": "src/text-field/text-field.ts"
+            "name": "UmTypeahead",
+            "module": "src/typeahead/typeahead.ts"
           }
         }
       ]
@@ -14183,6 +14338,122 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/menu-field/menu-field-navigation-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MenuFieldNavigationController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#element",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "T"
+              },
+              "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": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "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": "selectActiveItem",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MenuFieldNavigationController",
+          "declaration": {
+            "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",