@universal-material/web 3.0.30 → 3.0.32

package/custom-elements.json

@@ -3143,7 +3143,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --_state-layer-padding: var(--u-checkbox-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-checkbox-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_indicator-size: var(--u-checkbox-size, 1.125rem);\n    --_width: var(--u-checkbox-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .border {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;\n    border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);\n    transition: box-shadow 175ms 175ms;\n  }\n\n  .indicator {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    overflow: hidden;\n    clip: rect(0, 0, var(--_indicator-size), 0);\n    transition: clip 275ms;\n  }\n  .indicator::before {\n    position: relative;\n    top: 25%;\n    box-sizing: border-box;\n    display: block;\n    width: 0.75rem;\n    height: 0.35rem;\n    content: \"\";\n    border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary);\n    border-top-style: none;\n    border-right-style: none;\n    transform: rotate(-45deg);\n    transition: border 175ms, transform 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container .border,\n  input:checked ~ .indicator-container .border {\n    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;\n    transition: box-shadow 175ms;\n  }\n  input.indeterminate ~ .indicator-container .indicator,\n  input:checked ~ .indicator-container .indicator {\n    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);\n    transition: clip 175ms 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n  input.indeterminate ~ .indicator-container .indicator::before {\n    border-left-style: none;\n    transform: rotate(0);\n    width: 0.6rem;\n  }\n`"
+          "default": "css `\n  :host {\n    --_state-layer-padding: var(--u-checkbox-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-checkbox-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_indicator-size: var(--u-checkbox-size, 1.125rem);\n    --_width: var(--u-checkbox-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .border {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;\n    border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);\n    transition: box-shadow 175ms 175ms;\n  }\n\n  .indicator {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    overflow: hidden;\n    clip: rect(0, 0, var(--_indicator-size), 0);\n    transition: clip 275ms;\n  }\n  .indicator::before {\n    position: relative;\n    top: 25%;\n    box-sizing: border-box;\n    display: block;\n    width: 0.75rem;\n    height: 0.35rem;\n    content: \"\";\n    border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary, rgb(255, 255, 255));\n    border-top-style: none;\n    border-right-style: none;\n    transform: rotate(-45deg);\n    transition: border 175ms, transform 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container .border,\n  input:checked ~ .indicator-container .border {\n    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;\n    transition: box-shadow 175ms;\n  }\n  input.indeterminate ~ .indicator-container .indicator,\n  input:checked ~ .indicator-container .indicator {\n    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);\n    transition: clip 175ms 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n  input.indeterminate ~ .indicator-container .indicator::before {\n    border-left-style: none;\n    transform: rotate(0);\n    width: 0.6rem;\n  }\n`"
         }
       ],
       "exports": [
@@ -3520,7 +3520,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n    --_label-line-height: var(--u-field-label-line-height, 1rem);\n    --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n    --_field-control-padding: var(--u-field-control-padding, 16px);\n    --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n    --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n    --_field-min-height: var(--u-field-min-height, 56px);\n    --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-field-disabled-opacity, .38)));\n    --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n    --_active-indicator-opacity: 1;\n    --_vertical-padding: var(--u-field-vertical-padding, 8px);\n    --_icon-size: var(--u-field-icon-size, 1.5rem);\n    --_icon-padding: var(--u-field-icon-padding, 12px);\n    --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n    --_field-control-leading-padding: var(--_field-control-inline-padding);\n    --_field-control-trailing-padding: var(--_field-control-inline-padding);\n    --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n    --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n    --u-label-input-start: auto;\n    --u-label-input-span-leading-offset: 0;\n    --u-label-input-span-trailing-offset: 0;\n    --u-text-field-horizontal-padding: 12px;\n  }\n\n  .field {\n    display: block;\n    position: relative;\n  }\n  .field::before, .field::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n  .field::before {\n    background: var(--u-color-on-surface, rgb(29, 27, 32));\n    transition: opacity 150ms;\n    opacity: 0;\n  }\n  .field::after {\n    border-width: var(--u-field-border-width, 1px);\n    border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n      opacity: var(--u-state-hover-opacity, 0.08);\n    }\n    :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n      border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    }\n  }\n  .icon {\n    position: absolute;\n    width: var(--_icon-size);\n    height: 100%;\n    top: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    line-height: var(--_icon-size);\n  }\n  .icon::slotted(*) {\n    flex-shrink: 0;\n  }\n\n  .leading-icon {\n    inset-inline-start: var(--_icon-padding);\n  }\n\n  .trailing-icon {\n    inset-inline-end: var(--_icon-padding);\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n    display: block;\n    position: absolute;\n    inset-inline-start: var(--_field-control-leading-padding);\n    margin-bottom: 0;\n    line-height: var(--_label-line-height);\n    color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    transition: inset 200ms, font-size 200ms;\n  }\n\n  .input {\n    display: block;\n    color: var(--u-on-surface-color);\n  }\n  .input:focus {\n    outline: 0;\n  }\n  .input::slotted(*) {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    width: 100%;\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    min-height: var(--_field-min-height);\n    line-height: var(--_control-line-height);\n    padding-block: 0;\n    padding-inline: var(--_field-control-leading-padding) var(--_field-control-trailing-padding);\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: 0 !important;\n  }\n  .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n    transition: color 150ms 100ms;\n  }\n  .input::slotted(:is(input, textarea))::placeholder {\n    color: var(--_field-placeholder-color);\n  }\n\n  .supporting-text {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n    font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n    letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n    font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n    display: flex;\n    color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    padding-inline: 16px;\n    gap: 16px;\n  }\n  .supporting-text .supporting-text-slot {\n    display: block;\n  }\n  .supporting-text ::slotted(*) {\n    display: inline-block;\n    margin-top: 4px;\n  }\n\n  .error-text {\n    display: none;\n  }\n\n  .counter {\n    display: none;\n    margin-inline-start: auto;\n  }\n\n  :host([has-counter]) .counter {\n    display: block;\n  }\n\n  :host([has-leading-icon]) {\n    --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host([has-trailing-icon]) {\n    --_field-control-trailing-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host(:focus-within) {\n    --u-field-border-width: var(--_focus-border-width);\n  }\n  :host(:focus-within) .field::after {\n    border-color: var(--u-field-focused-border-color, var(--_color-primary));\n  }\n  :host(:focus-within) .label {\n    color: var(--u-field-label-focused-color, var(--_color-primary));\n  }\n\n  :host([invalid]) .field::after {\n    border-color: var(--u-field-error-border-color, var(--_color-error));\n  }\n  :host([invalid]) .label {\n    color: var(--u-field-label-error-color, var(--_color-error));\n  }\n  :host([invalid]) .supporting-text {\n    color: var(--u-field-supporting-text-error-color, var(--_color-error));\n  }\n  :host([invalid]) .trailing-icon {\n    --u-standard-icon-button-color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n    color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n  }\n  :host([invalid]) .leading-icon {\n    --u-standard-icon-button-color: var(--u-field-leading-icon-error-color, var(--_color-error));\n    color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n  }\n\n  :host([invalid][has-error-text]) .error-text {\n    display: block;\n  }\n  :host([invalid][has-error-text]) .supporting-text-slot {\n    display: none;\n  }\n\n  :host([disabled]) .field::after {\n    border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n  }\n  :host([disabled]) .supporting-text {\n    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .label {\n    color: var(--u-field-label-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input::slotted(*) {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .trailing-icon {\n    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .leading-icon {\n    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n  }\n\n  :host([variant=filled]) .field {\n    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n    background-color: var(--u-color-surface-variant);\n  }\n  :host([variant=filled]) .field::after {\n    border-bottom-style: solid;\n  }\n  :host([variant=filled]) .label {\n    top: var(--_vertical-padding);\n  }\n  :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n    display: block;\n    border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;\n    border-bottom: var(--_vertical-padding) solid transparent;\n  }\n\n  :host([variant=filled][disabled]) .field {\n    background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, 0.12)));\n  }\n\n  :host([variant=outlined]) .field::after {\n    --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n    border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n    border-style: solid;\n    clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n    transition: clip-path 100ms;\n  }\n  :host([variant=outlined]) .label {\n    top: calc(var(--_label-line-height) / -2);\n  }\n\n  :host([variant=outlined]:focus-within) .field::after,\n  :host([variant=outlined]:not([empty])) .field::after {\n    --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n    clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n  }\n  :host([variant=outlined]:focus-within) .label,\n  :host([variant=outlined]:not([empty])) .label {\n    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n  }\n\n  :host([empty]) ::slotted(select) {\n    color: var(--_field-placeholder-color);\n  }\n\n  :host([empty]:not(:focus-within)) .label {\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    pointer-events: none;\n    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n  }\n  :host([empty]:not(:focus-within)) .input,\n  :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n  :host([empty]:not(:focus-within)) ::slotted(select) {\n    color: transparent;\n    transition: color 150ms;\n  }\n`"
+          "default": "css `\n  :host {\n    --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n    --_label-line-height: var(--u-field-label-line-height, 1rem);\n    --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n    --_field-control-padding: var(--u-field-control-padding, 16px);\n    --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n    --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n    --_field-min-height: var(--u-field-min-height, 56px);\n    --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-field-disabled-opacity, .38)));\n    --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n    --_active-indicator-opacity: 1;\n    --_vertical-padding: var(--u-field-vertical-padding, 8px);\n    --_icon-size: var(--u-field-icon-size, 1.5rem);\n    --_icon-padding: var(--u-field-icon-padding, 12px);\n    --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n    --_field-control-leading-padding: var(--_field-control-inline-padding);\n    --_field-control-trailing-padding: var(--_field-control-inline-padding);\n    --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n    --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n    --u-label-input-start: auto;\n    --u-label-input-span-leading-offset: 0;\n    --u-label-input-span-trailing-offset: 0;\n    --u-text-field-horizontal-padding: 12px;\n  }\n\n  .field {\n    display: block;\n    position: relative;\n  }\n  .field::before, .field::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n  .field::before {\n    background: var(--u-color-on-surface, rgb(29, 27, 32));\n    transition: opacity 150ms;\n    opacity: 0;\n  }\n  .field::after {\n    border-width: var(--u-field-border-width, 1px);\n    border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n      opacity: var(--u-state-hover-opacity, 0.08);\n    }\n    :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n      border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    }\n  }\n  .icon {\n    position: absolute;\n    width: var(--_icon-size);\n    height: 100%;\n    top: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    line-height: var(--_icon-size);\n  }\n  .icon::slotted(*) {\n    flex-shrink: 0;\n  }\n\n  .leading-icon {\n    inset-inline-start: var(--_icon-padding);\n  }\n\n  .trailing-icon {\n    inset-inline-end: var(--_icon-padding);\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n    display: block;\n    position: absolute;\n    inset-inline-start: var(--_field-control-leading-padding);\n    margin-bottom: 0;\n    line-height: var(--_label-line-height);\n    color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    transition: inset 200ms, font-size 200ms;\n  }\n\n  .input {\n    display: block;\n    color: var(--u-on-surface-color);\n  }\n  .input:focus {\n    outline: 0;\n  }\n  .input::slotted(*) {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    width: 100%;\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    min-height: var(--_field-min-height);\n    line-height: var(--_control-line-height);\n    padding-block: 0;\n    padding-inline: var(--_field-control-leading-padding) var(--_field-control-trailing-padding);\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: 0 !important;\n  }\n  .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n    transition: color 150ms 100ms;\n  }\n  .input::slotted(:is(input, textarea))::placeholder {\n    color: var(--_field-placeholder-color);\n  }\n\n  .supporting-text {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n    font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n    letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n    font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n    display: flex;\n    color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    padding-inline: 16px;\n    gap: 16px;\n  }\n  .supporting-text .supporting-text-slot {\n    display: block;\n  }\n  .supporting-text ::slotted(*) {\n    display: inline-block;\n    margin-top: 4px;\n  }\n\n  .error-text {\n    display: none;\n  }\n\n  .counter {\n    display: none;\n    margin-inline-start: auto;\n  }\n\n  :host([has-counter]) .counter {\n    display: block;\n  }\n\n  :host([has-leading-icon]) {\n    --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host([has-trailing-icon]) {\n    --_field-control-trailing-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host(:focus-within) {\n    --u-field-border-width: var(--_focus-border-width);\n  }\n  :host(:focus-within) .field::after {\n    border-color: var(--u-field-focused-border-color, var(--_color-primary));\n  }\n  :host(:focus-within) .label {\n    color: var(--u-field-label-focused-color, var(--_color-primary));\n  }\n\n  :host([invalid]) .field::after {\n    border-color: var(--u-field-error-border-color, var(--_color-error));\n  }\n  :host([invalid]) .label {\n    color: var(--u-field-label-error-color, var(--_color-error));\n  }\n  :host([invalid]) .supporting-text {\n    color: var(--u-field-supporting-text-error-color, var(--_color-error));\n  }\n  :host([invalid]) .trailing-icon {\n    --u-standard-icon-button-color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n    color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n  }\n  :host([invalid]) .leading-icon {\n    --u-standard-icon-button-color: var(--u-field-leading-icon-error-color, var(--_color-error));\n    color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n  }\n\n  :host([invalid][has-error-text]) .error-text {\n    display: block;\n  }\n  :host([invalid][has-error-text]) .supporting-text-slot {\n    display: none;\n  }\n\n  :host([disabled]) .field::after {\n    border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n  }\n  :host([disabled]) .supporting-text {\n    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .label {\n    color: var(--u-field-label-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input::slotted(*) {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .trailing-icon {\n    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .leading-icon {\n    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n  }\n\n  :host([variant=filled]) .field {\n    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n    background-color: var(--u-color-on-surface-variant, rgb(73, 69, 79));\n  }\n  :host([variant=filled]) .field::after {\n    border-bottom-style: solid;\n  }\n  :host([variant=filled]) .label {\n    top: var(--_vertical-padding);\n  }\n  :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n    display: block;\n    border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;\n    border-bottom: var(--_vertical-padding) solid transparent;\n  }\n\n  :host([variant=filled][disabled]) .field {\n    background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, 0.12)));\n  }\n\n  :host([variant=outlined]) .field::after {\n    --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n    border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n    border-style: solid;\n    clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n    transition: clip-path 100ms;\n  }\n  :host([variant=outlined]) .label {\n    top: calc(var(--_label-line-height) / -2);\n  }\n\n  :host([variant=outlined]:focus-within) .field::after,\n  :host([variant=outlined]:not([empty])) .field::after {\n    --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n    clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n  }\n  :host([variant=outlined]:focus-within) .label,\n  :host([variant=outlined]:not([empty])) .label {\n    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n  }\n\n  :host([empty]) ::slotted(select) {\n    color: var(--_field-placeholder-color);\n  }\n\n  :host([empty]:not(:focus-within)) .label {\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    pointer-events: none;\n    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n  }\n  :host([empty]:not(:focus-within)) .input,\n  :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n  :host([empty]:not(:focus-within)) ::slotted(select) {\n    color: transparent;\n    transition: color 150ms;\n  }\n`"
         }
       ],
       "exports": [
@@ -3817,6 +3817,141 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/list/list-item.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: var(--u-list-item-min-height, 56px);\n    padding-block: var(--u-list-item-block-padding, 8px);\n    padding-inline: var(--u-list-item-inline-padding, 16px);\n    gap: var(--u-list-item-gap, 16px);\n  }\n\n  slot:not([name]) {\n    display: block;\n    margin-inline-end: auto;\n  }\n\n  slot {\n    flex-shrink: 0;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/list/list-item.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/list/list-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmListItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selectable",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selectable"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-list-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmListItem",
+          "declaration": {
+            "name": "UmListItem",
+            "module": "src/list/list-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-list-item",
+          "declaration": {
+            "name": "UmListItem",
+            "module": "src/list/list-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/list/list.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css `\n  :host {\n    padding-block: var(--u-list-padding, 8px);\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/list/list.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/list/list.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmList",
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "u-list",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UmList",
+          "declaration": {
+            "name": "UmList",
+            "module": "src/list/list.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "u-list",
+          "declaration": {
+            "name": "UmList",
+            "module": "src/list/list.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/menu/menu-item.styles.ts",
@@ -4541,12 +4676,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/list/list-item.styles.ts",
+      "path": "src/navigation/drawer-item.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: var(--u-list-item-min-height, 56px);\n    padding-block: var(--u-list-item-block-padding, 8px);\n    padding-inline: var(--u-list-item-inline-padding, 16px);\n    gap: var(--u-list-item-gap, 16px);\n  }\n\n  slot:not([name]) {\n    display: block;\n    margin-inline-end: auto;\n  }\n\n  slot {\n    flex-shrink: 0;\n  }\n`"
+          "default": "css `\n  :host {\n    display: block;\n    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.125rem);\n    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n    height: var(--u-drawer-item-height, 56px);\n    padding-inline: var(--_drawer-item-padding);\n    margin-inline: calc(var(--_drawer-item-padding) * -1);\n    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));\n    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([active]) {\n    color: var(--u-drawer-item-label-active-color, var(--_color-primary));\n  }\n\n  :host(:not([has-icon])) .icon,\n  :host(:not([has-badge])) .badge {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_drawer-item-icon-size);\n    line-height: var(--_drawer-item-icon-size);\n    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);\n  }\n\n  .badge {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-inline-start: auto;\n    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);\n  }\n\n  .content {\n    justify-content: flex-start;\n  }\n`"
         }
       ],
       "exports": [
@@ -4555,202 +4690,83 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/list/list-item.styles.ts"
+            "module": "src/navigation/drawer-item.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/list/list-item.ts",
+      "path": "src/navigation/drawer-item.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmListItem",
+          "name": "UmDrawerItem",
           "members": [
             {
               "kind": "field",
-              "name": "selectable",
+              "name": "hasIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "selectable",
+              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
+              "attribute": "has-icon",
               "reflects": true
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "selectable",
+              "kind": "field",
+              "name": "hasBadge",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "selectable"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-list-item",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmListItem",
-          "declaration": {
-            "name": "UmListItem",
-            "module": "src/list/list-item.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-list-item",
-          "declaration": {
-            "name": "UmListItem",
-            "module": "src/list/list-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/list/list.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    padding-block: var(--u-list-padding, 8px);\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/list/list.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/list/list.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmList",
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-list",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmList",
-          "declaration": {
-            "name": "UmList",
-            "module": "src/list/list.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-list",
-          "declaration": {
-            "name": "UmList",
-            "module": "src/list/list.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/radio/radio-list-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmRadioListItem",
-          "mixins": [
-            {
-              "name": "mixinSelectionControlListItem",
-              "module": "/src/shared/selection-control/selection-control-list-item.js"
-            }
-          ],
-          "superclass": {
-            "name": "UmRadio",
-            "module": "/src/radio/radio.js"
-          },
-          "tagName": "u-radio-list-item",
-          "customElement": true,
-          "members": [
+              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
+              "attribute": "has-badge",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "styles",
+              "name": "active",
               "type": {
-                "text": "array"
+                "text": "boolean"
               },
-              "static": true,
-              "default": "[\n      (base as unknown as typeof LitElement).styles ?? [],\n      css`:host {\n        --u-list-item-block-padding: 0;\n        display: block;\n      }`\n    ]",
-              "inheritedFrom": {
-                "name": "mixinSelectionControlListItem",
-                "module": "src/shared/selection-control/selection-control-list-item.ts"
-              }
+              "default": "false",
+              "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
+              "attribute": "active",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "render",
-              "return": {
-                "type": {
-                  "text": "HTMLTemplateResult"
-                }
+              "kind": "field",
+              "name": "keepDrawerOpen",
+              "type": {
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "mixinSelectionControlListItem",
-                "module": "src/shared/selection-control/selection-control-list-item.ts"
-              }
+              "default": "false",
+              "description": "If true, it will not attempt to close de navigation drawer on click",
+              "attribute": "keep-drawer-open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hideStateLayer",
+              "name": "assignedIcons",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement[]"
               },
-              "default": "false",
-              "attribute": "hide-state-layer",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "UmRadio",
-                "module": "src/radio/radio.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "inputType",
+              "name": "assignedBadges",
               "type": {
-                "text": "'checkbox' | 'radio'"
+                "text": "HTMLElement[]"
               },
-              "privacy": "protected",
-              "default": "'radio'",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderIndicator",
+              "name": "renderContent",
               "privacy": "protected",
               "return": {
                 "type": {
@@ -4758,212 +4774,264 @@
                 }
               },
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "checked",
-              "attribute": "checked",
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
+              "kind": "method",
+              "name": "handleIconSlotChange",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "#siblings",
-              "privacy": "private",
-              "type": {
-                "text": "UmRadio[]"
-              },
-              "inheritedFrom": {
-                "name": "UmRadio",
-                "module": "src/radio/radio.ts"
-              }
+              "kind": "method",
+              "name": "handleBadgeSlotChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "#handleKeyDown",
+              "name": "handleClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "_",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "UIEvent"
                   }
                 }
               ],
               "inheritedFrom": {
-                "name": "UmRadio",
-                "module": "src/radio/radio.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "ensureOnlyOneChecked",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmRadio",
-                "module": "src/radio/radio.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "uncheckSiblings",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmRadio",
-                "module": "src/radio/radio.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "field",
-              "name": "formAssociated",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "static": true,
-              "default": "true",
+              "default": "false",
+              "description": "Whether the button is disabled or not.",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "field",
-              "name": "elementInternals",
+              "name": "href",
               "type": {
-                "text": "ElementInternals"
+                "text": "string | undefined"
               },
-              "privacy": "protected",
+              "description": "The URL that the link button points to.",
+              "attribute": "href",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "target",
               "type": {
                 "text": "string | undefined"
               },
-              "default": "''",
-              "attribute": "name",
+              "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": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true,
+              "attribute": "name",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "buttonElement",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "HTMLElement"
               },
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "ripple",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "UmRipple"
               },
-              "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#checked",
               "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "field",
-              "name": "renderRipple",
+              "name": "innerRole",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
               "privacy": "protected",
-              "default": "true",
+              "default": "null",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "pathname",
               "type": {
                 "text": "string"
               },
-              "default": "'on'",
-              "description": "The element value to use in form submission when checked.",
-              "attribute": "value",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
               "kind": "method",
-              "name": "#handleClick",
+              "name": "renderButton",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "hide-state-layer",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "hideStateLayer",
+              "kind": "method",
+              "name": "renderLink",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "UmRadio",
-                "module": "src/radio/radio.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "''",
-              "fieldName": "name",
+              "kind": "method",
+              "name": "focus",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "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 | typeof nothing"
+                }
+              },
+              "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",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "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",
@@ -4971,75 +5039,84 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Whether the button is disabled or not.",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
-              "name": "value",
+              "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'on'",
-              "description": "The element value to use in form submission when checked.",
-              "fieldName": "value",
+              "description": "The URL that the link button points to.",
+              "fieldName": "href",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
             },
             {
-              "name": "checked",
-              "fieldName": "checked",
+              "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": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "name": "UmButtonWrapper",
+                "module": "src/shared/button-wrapper.ts"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "change",
+              "name": "name",
               "type": {
-                "text": "Event"
+                "text": "string | undefined"
               },
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "UmSelectionControl",
-                "module": "src/shared/selection-control/selection-control.ts"
+                "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": "UmRadioListItem",
+          "name": "UmDrawerItem",
           "declaration": {
-            "name": "UmRadioListItem",
-            "module": "src/radio/radio-list-item.ts"
+            "name": "UmDrawerItem",
+            "module": "src/navigation/drawer-item.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-radio-list-item",
+          "name": "u-drawer-item",
           "declaration": {
-            "name": "UmRadioListItem",
-            "module": "src/radio/radio-list-item.ts"
+            "name": "UmDrawerItem",
+            "module": "src/navigation/drawer-item.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/radio/radio.styles.ts",
+      "path": "src/navigation/drawer.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host {\n    --_state-layer-padding: var(--u-radio-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-radio-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-radio-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_indicator-size: var(--u-radio-indicator-size, 1.25rem);\n    --_width: var(--u-radio-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .indicator {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);\n    border-radius: 50%;\n  }\n  .indicator::before {\n    content: \"\";\n    width: calc(var(--_indicator-size) / 2);\n    height: calc(var(--_indicator-size) / 2);\n    background: var(--_indicator-color);\n    border-radius: 50%;\n    transition: transform 250ms;\n    transform: scale3d(0, 0, 1);\n  }\n\n  input:checked ~ .indicator-container .indicator::before {\n    transform: scale3d(1, 1, 1);\n  }\n`"
+          "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": [
@@ -5048,29 +5125,286 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/radio/radio.styles.ts"
+            "module": "src/navigation/drawer.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/radio/radio.ts",
+      "path": "src/navigation/drawer.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmRadio",
+          "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": "hideStateLayer",
+              "name": "#toggleDrawer",
+              "privacy": "private",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "attribute": "hide-state-layer",
-              "reflects": true
+              "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": "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/radio/radio-list-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UmRadioListItem",
+          "mixins": [
+            {
+              "name": "mixinSelectionControlListItem",
+              "module": "/src/shared/selection-control/selection-control-list-item.js"
+            }
+          ],
+          "superclass": {
+            "name": "UmRadio",
+            "module": "/src/radio/radio.js"
+          },
+          "tagName": "u-radio-list-item",
+          "customElement": true,
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[\n      (base as unknown as typeof LitElement).styles ?? [],\n      css`:host {\n        --u-list-item-block-padding: 0;\n        display: block;\n      }`\n    ]",
+              "inheritedFrom": {
+                "name": "mixinSelectionControlListItem",
+                "module": "src/shared/selection-control/selection-control-list-item.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "return": {
+                "type": {
+                  "text": "HTMLTemplateResult"
+                }
+              },
+              "inheritedFrom": {
+                "name": "mixinSelectionControlListItem",
+                "module": "src/shared/selection-control/selection-control-list-item.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hideStateLayer",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "hide-state-layer",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "UmRadio",
+                "module": "src/radio/radio.ts"
+              }
             },
             {
               "kind": "field",
@@ -5114,6 +5448,10 @@
               "privacy": "private",
               "type": {
                 "text": "UmRadio[]"
+              },
+              "inheritedFrom": {
+                "name": "UmRadio",
+                "module": "src/radio/radio.ts"
               }
             },
             {
@@ -5126,17 +5464,29 @@
                     "text": "KeyboardEvent"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "UmRadio",
+                "module": "src/radio/radio.ts"
+              }
             },
             {
               "kind": "method",
               "name": "ensureOnlyOneChecked",
-              "privacy": "private"
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmRadio",
+                "module": "src/radio/radio.ts"
+              }
             },
             {
               "kind": "method",
               "name": "uncheckSiblings",
-              "privacy": "private"
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "UmRadio",
+                "module": "src/radio/radio.ts"
+              }
             },
             {
               "kind": "field",
@@ -5268,7 +5618,11 @@
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "hideStateLayer"
+              "fieldName": "hideStateLayer",
+              "inheritedFrom": {
+                "name": "UmRadio",
+                "module": "src/radio/radio.ts"
+              }
             },
             {
               "name": "name",
@@ -5316,12 +5670,6 @@
               }
             }
           ],
-          "superclass": {
-            "name": "UmSelectionControl",
-            "module": "/src/shared/selection-control/selection-control.js"
-          },
-          "tagName": "u-radio",
-          "customElement": true,
           "events": [
             {
               "name": "change",
@@ -5339,30 +5687,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "UmRadio",
+          "name": "UmRadioListItem",
           "declaration": {
-            "name": "UmRadio",
-            "module": "src/radio/radio.ts"
+            "name": "UmRadioListItem",
+            "module": "src/radio/radio-list-item.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-radio",
+          "name": "u-radio-list-item",
           "declaration": {
-            "name": "UmRadio",
-            "module": "src/radio/radio.ts"
+            "name": "UmRadioListItem",
+            "module": "src/radio/radio-list-item.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/ripple/ripple.styles.ts",
+      "path": "src/radio/radio.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  .ripple-container::before {\n    --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, var(--u-state-hover-opacity, 0.08));\n    --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);\n    display: block;\n    inset: 0;\n    isolation: isolate;\n  }\n\n  .ripple-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  .ripple-container::before {\n    content: \"\";\n    background: var(--_ripple-hover-color);\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .ripple-container::before {\n      content: \"\";\n      background: var(--_ripple-hover-color);\n      opacity: var(--_ripple-hover-opacity);\n    }\n  }\n  :host,\n  .ripple-container::before,\n  .ripple {\n    position: absolute;\n    border-radius: inherit;\n  }\n\n  .ripple {\n    top: 50%;\n    left: 50%;\n    background: var(--_ripple-pressed-color);\n    border-radius: 50%;\n    box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);\n    opacity: var(--_ripple-pressed-opacity);\n    transform: scale3d(0, 0, 1);\n    pointer-events: none;\n    will-change: transform;\n  }\n  .ripple.show {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(750ms / var(--u-ripple-speed, 1));\n    transform: scale3d(1, 1, 1);\n  }\n  .ripple.show-forced {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;\n    transform: scale3d(2, 2, 1);\n    opacity: 0;\n  }\n  .ripple.dismiss {\n    opacity: 0;\n    transform: scale3d(2, 2, 1);\n  }\n\n  ::slotted(*) {\n    position: absolute !important;\n    inset: 0;\n    border-radius: inherit;\n  }\n`"
+          "default": "css `\n  :host {\n    --_state-layer-padding: var(--u-radio-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-radio-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-radio-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_indicator-size: var(--u-radio-indicator-size, 1.25rem);\n    --_width: var(--u-radio-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .indicator {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);\n    border-radius: 50%;\n  }\n  .indicator::before {\n    content: \"\";\n    width: calc(var(--_indicator-size) / 2);\n    height: calc(var(--_indicator-size) / 2);\n    background: var(--_indicator-color);\n    border-radius: 50%;\n    transition: transform 250ms;\n    transform: scale3d(0, 0, 1);\n  }\n\n  input:checked ~ .indicator-container .indicator::before {\n    transform: scale3d(1, 1, 1);\n  }\n`"
         }
       ],
       "exports": [
@@ -5371,587 +5719,239 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/ripple/ripple.styles.ts"
+            "module": "src/radio/radio.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/ripple/ripple.ts",
+      "path": "src/radio/radio.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmRipple",
+          "name": "UmRadio",
           "members": [
             {
               "kind": "field",
-              "name": "isTouching",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
+              "name": "hideStateLayer",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the ripple.",
-              "attribute": "disabled",
+              "attribute": "hide-state-layer",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "rippleContainer",
+              "name": "inputType",
               "type": {
-                "text": "HTMLElement"
+                "text": "'checkbox' | 'radio'"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "attachEvents",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dettachEvents",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "privacy": "protected",
+              "default": "'radio'",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "method",
-              "name": "handleMouseDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleTouchStart",
-              "privacy": "private",
+              "name": "renderIndicator",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "HTMLTemplateResult"
                 }
               },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "TouchEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "canCreateRipple",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "createRipple",
-              "return": {
-                "type": {
-                  "text": "(() => void) | null"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "targetX",
-                  "default": "null",
-                  "type": {
-                    "text": "number | null"
-                  }
-                },
-                {
-                  "name": "targetY",
-                  "default": "null",
-                  "type": {
-                    "text": "number | null"
-                  }
-                },
-                {
-                  "name": "releaseEventName",
-                  "default": "null",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "checked",
+              "attribute": "checked",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "createDismissEvent",
+              "kind": "field",
+              "name": "#siblings",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "() => void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "ripple",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "releaseEventName",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "type": {
+                "text": "UmRadio[]"
+              }
             },
             {
               "kind": "method",
-              "name": "_setElementSquareSizeAndCenter",
-              "privacy": "private",
-              "static": true,
+              "name": "#handleKeyDown",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "size",
+                  "name": "event",
                   "type": {
-                    "text": "number"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the ripple.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "u-ripple",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UmRipple",
-          "declaration": {
-            "name": "UmRipple",
-            "module": "src/ripple/ripple.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "u-ripple",
-          "declaration": {
-            "name": "UmRipple",
-            "module": "src/ripple/ripple.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/drawer-item.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css `\n  :host {\n    display: block;\n    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.125rem);\n    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n    height: var(--u-drawer-item-height, 56px);\n    padding-inline: var(--_drawer-item-padding);\n    margin-inline: calc(var(--_drawer-item-padding) * -1);\n    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));\n    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([active]) {\n    color: var(--u-drawer-item-label-active-color, var(--_color-primary));\n  }\n\n  :host(:not([has-icon])) .icon,\n  :host(:not([has-badge])) .badge {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_drawer-item-icon-size);\n    line-height: var(--_drawer-item-icon-size);\n    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);\n  }\n\n  .badge {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-inline-start: auto;\n    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);\n  }\n\n  .content {\n    justify-content: flex-start;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "src/navigation/drawer-item.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/drawer-item.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "UmDrawerItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the drawer item has icon or not\n\n_Note:_ Readonly",
-              "attribute": "has-icon",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "hasBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the drawer item has badge or not\n\n_Note:_ Readonly",
-              "attribute": "has-badge",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "keepDrawerOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, it will not attempt to close de navigation drawer on click",
-              "attribute": "keep-drawer-open",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "assignedIcons",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "assignedBadges",
-              "type": {
-                "text": "HTMLElement[]"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderContent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "HTMLTemplateResult"
-                }
-              },
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
             },
             {
               "kind": "method",
-              "name": "handleIconSlotChange",
+              "name": "ensureOnlyOneChecked",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleBadgeSlotChange",
+              "name": "uncheckSiblings",
               "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",
+              "name": "formAssociated",
               "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": "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"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ripple",
-              "type": {
-                "text": "UmRipple"
-              },
-              "privacy": "private",
+              "static": true,
+              "default": "true",
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "field",
-              "name": "innerRole",
+              "name": "elementInternals",
               "type": {
-                "text": "string | null"
+                "text": "ElementInternals"
               },
               "privacy": "protected",
-              "default": "null",
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "field",
-              "name": "pathname",
+              "name": "name",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
+              "default": "''",
+              "attribute": "name",
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderButton",
-              "privacy": "private",
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderLink",
-              "privacy": "private",
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              },
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "focus",
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "blur",
+              "kind": "field",
+              "name": "#checked",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getAriaLabel",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "string | null | typeof nothing"
-                }
+              "kind": "field",
+              "name": "renderRipple",
+              "type": {
+                "text": "boolean"
               },
+              "privacy": "protected",
+              "default": "true",
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "innerFocusHandler",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
               },
+              "default": "'on'",
+              "description": "The element value to use in form submission when checked.",
+              "attribute": "value",
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
               "kind": "method",
-              "name": "innerClickHandler",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ],
+              "name": "#handleClick",
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.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",
+              "name": "hide-state-layer",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the drawer item is active or not\n\n_Note:_ Readonly",
-              "fieldName": "active"
+              "fieldName": "hideStateLayer"
             },
             {
-              "name": "keep-drawer-open",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "If true, it will not attempt to close de navigation drawer on click",
-              "fieldName": "keepDrawerOpen"
+              "default": "''",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
             },
             {
               "name": "disabled",
@@ -5959,162 +5959,81 @@
                 "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": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "name": "target",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
-              "fieldName": "target",
+              "default": "'on'",
+              "description": "The element value to use in form submission when checked.",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "UmButtonWrapper",
-                "module": "src/shared/button-wrapper.ts"
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
               }
             },
             {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "name",
+              "name": "checked",
+              "fieldName": "checked",
               "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": [],
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            }
+          ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "UmSelectionControl",
+            "module": "/src/shared/selection-control/selection-control.js"
           },
-          "tagName": "u-drawer",
-          "customElement": true
+          "tagName": "u-radio",
+          "customElement": true,
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "UmSelectionControl",
+                "module": "src/shared/selection-control/selection-control.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmDrawer",
+          "name": "UmRadio",
           "declaration": {
-            "name": "UmDrawer",
-            "module": "src/navigation/drawer.ts"
+            "name": "UmRadio",
+            "module": "src/radio/radio.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-radio",
           "declaration": {
-            "name": "styles",
-            "module": "src/navigation/side-navigation-swiper.styles.ts"
+            "name": "UmRadio",
+            "module": "src/radio/radio.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/navigation/side-navigation.styles.ts",
+      "path": "src/ripple/ripple.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  .ripple-container::before {\n    --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));\n    --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, var(--u-state-hover-opacity, 0.08));\n    --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);\n    display: block;\n    inset: 0;\n    isolation: isolate;\n  }\n\n  .ripple-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  .ripple-container::before {\n    content: \"\";\n    background: var(--_ripple-hover-color);\n    opacity: 0;\n    transition: opacity 200ms;\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .ripple-container::before {\n      content: \"\";\n      background: var(--_ripple-hover-color);\n      opacity: var(--_ripple-hover-opacity);\n    }\n  }\n  :host,\n  .ripple-container::before,\n  .ripple {\n    position: absolute;\n    border-radius: inherit;\n  }\n\n  .ripple {\n    top: 50%;\n    left: 50%;\n    background: var(--_ripple-pressed-color);\n    border-radius: 50%;\n    box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);\n    opacity: var(--_ripple-pressed-opacity);\n    transform: scale3d(0, 0, 1);\n    pointer-events: none;\n    will-change: transform;\n  }\n  .ripple.show {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(750ms / var(--u-ripple-speed, 1));\n    transform: scale3d(1, 1, 1);\n  }\n  .ripple.show-forced {\n    transition: transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) cubic-bezier(0.19, 1, 0.22, 1), opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;\n    transform: scale3d(2, 2, 1);\n    opacity: 0;\n  }\n  .ripple.dismiss {\n    opacity: 0;\n    transform: scale3d(2, 2, 1);\n  }\n\n  ::slotted(*) {\n    position: absolute !important;\n    inset: 0;\n    border-radius: inherit;\n  }\n`"
         }
       ],
       "exports": [
@@ -6123,144 +6042,225 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/navigation/side-navigation.styles.ts"
+            "module": "src/ripple/ripple.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/navigation/side-navigation.ts",
+      "path": "src/ripple/ripple.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "UmSideNavigation",
+          "name": "UmRipple",
           "members": [
             {
               "kind": "field",
-              "name": "#toggleDrawer",
-              "privacy": "private",
+              "name": "isTouching",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "disableSlideAnimation",
+              "name": "disabled",
               "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"
-              }
+              "default": "false",
+              "description": "Disables the ripple.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "scrim",
+              "name": "rippleContainer",
               "type": {
                 "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "scrollContainer",
-              "type": {
-                "text": "HTMLElement | undefined"
-              }
+              },
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderDefault",
-              "privacy": "private"
+              "name": "attachEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "renderWithSwipe",
-              "privacy": "private"
+              "name": "dettachEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "swiperActiveIndexChange",
-              "privacy": "private"
+              "name": "handleMouseDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "swiperTransitionStart",
-              "privacy": "private"
+              "name": "handleTouchStart",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "TouchEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "slidesGridLengthChange",
-              "privacy": "private"
+              "name": "canCreateRipple",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "swiperTransitionEnd",
-              "privacy": "private"
+              "name": "createRipple",
+              "return": {
+                "type": {
+                  "text": "(() => void) | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "targetX",
+                  "default": "null",
+                  "type": {
+                    "text": "number | null"
+                  }
+                },
+                {
+                  "name": "targetY",
+                  "default": "null",
+                  "type": {
+                    "text": "number | null"
+                  }
+                },
+                {
+                  "name": "releaseEventName",
+                  "default": "null",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "swiperSliderMove",
+              "name": "createDismissEvent",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "() => void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "ripple",
                   "type": {
-                    "text": "Event"
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "releaseEventName",
+                  "type": {
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "scrimClick",
-              "privacy": "private"
+              "name": "_setElementSquareSizeAndCenter",
+              "privacy": "private",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             }
           ],
           "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"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the ripple.",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "u-side-navigation",
+          "tagName": "u-ripple",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "UmSideNavigation",
+          "name": "UmRipple",
           "declaration": {
-            "name": "UmSideNavigation",
-            "module": "src/navigation/side-navigation.ts"
+            "name": "UmRipple",
+            "module": "src/ripple/ripple.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "u-side-navigation",
+          "name": "u-ripple",
           "declaration": {
-            "name": "UmSideNavigation",
-            "module": "src/navigation/side-navigation.ts"
+            "name": "UmRipple",
+            "module": "src/ripple/ripple.ts"
           }
         }
       ]
@@ -6272,7 +6272,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--u-color-primary);\n    }\n    50% {\n      outline: 6px solid var(--u-color-primary);\n    }\n    100% {\n      outline: 4px solid var(--u-color-primary);\n    }\n  }\n`"
+          "default": "css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`"
         }
       ],
       "exports": [