xmlui 0.9.25 → 0.9.31

package/dist/{index.css → lib/index.css}

@@ -1869,7 +1869,7 @@
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_lc3do_13 {
+._wrapper_fztu9_13 {
   --footer-height: 0;
   height: 100%;
   width: 100%;
@@ -1904,19 +1904,21 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  scrollbar-color: var(--xmlui-color-scrollbar-NavPanel) var(--xmlui-backgroundColor-scrollbar-NavPanel);
+  scrollbar-width: thin;
 }
-._wrapper_lc3do_13:not(._condensed_lc3do_49) {
+._wrapper_fztu9_13:not(._condensed_fztu9_51) {
   background-color: var(--xmlui-backgroundColor-NavPanel);
 }
-._wrapper_lc3do_13._horizontal_lc3do_52 {
+._wrapper_fztu9_13._horizontal_fztu9_54 {
   box-shadow: none;
   height: var(--xmlui-height-AppHeader);
 }
-._wrapper_lc3do_13._horizontal_lc3do_52:not(._condensed_lc3do_49) ._wrapperInner_lc3do_56 {
+._wrapper_fztu9_13._horizontal_fztu9_54:not(._condensed_fztu9_51) ._wrapperInner_fztu9_58 {
   padding-inline: var(--xmlui-paddingHorizontal-NavPanel);
   justify-content: var(--xmlui-align-content-AppHeader);
 }
-._wrapper_lc3do_13._horizontal_lc3do_52 ._wrapperInner_lc3do_56 {
+._wrapper_fztu9_13._horizontal_fztu9_54 ._wrapperInner_fztu9_58 {
   height: 100%;
   flex-direction: row;
   max-width: var(--xmlui-maxWidth-content-App);
@@ -1925,13 +1927,13 @@
   justify-content: var(--xmlui-align-content-AppHeader);
 }
 
-._wrapperInner_lc3do_56 {
+._wrapperInner_fztu9_58 {
   display: flex;
   flex-direction: column;
   justify-content: var(--xmlui-align-content-AppHeader);
 }
 
-._logoWrapper_lc3do_75:not(:empty) {
+._logoWrapper_fztu9_77:not(:empty) {
   display: flex;
   justify-content: center;
   flex-shrink: 0;
@@ -1941,7 +1943,7 @@
   padding-inline: var(--xmlui-paddingHorizontal-logo-NavPanel);
   margin-bottom: var(--xmlui-marginBottom-logo-NavPanel);
 }
-._logoWrapper_lc3do_75._inDrawer_lc3do_85 {
+._logoWrapper_fztu9_77._inDrawer_fztu9_87 {
   min-height: 40px;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -2172,7 +2174,7 @@
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._heading_qi2wo_13._h1_qi2wo_13 {
+._heading_p6fbv_13._h1_p6fbv_13 {
   padding: var(--xmlui-padding-H1);
   padding-left: var(--xmlui-paddingLeft-H1, var(--xmlui-paddingHorizontal-H1, var(--xmlui-padding-H1)));
   padding-right: var(--xmlui-paddingRight-H1, var(--xmlui-paddingHorizontal-H1, var(--xmlui-padding-H1)));
@@ -2235,7 +2237,7 @@
   text-decoration-thickness: var(--xmlui-textDecorationThickness-H1);
   text-underline-offset: var(--xmlui-textUnderlineOffset-H1);
 }
-._heading_qi2wo_13._h2_qi2wo_76 {
+._heading_p6fbv_13._h2_p6fbv_76 {
   padding: var(--xmlui-padding-H2);
   padding-left: var(--xmlui-paddingLeft-H2, var(--xmlui-paddingHorizontal-H2, var(--xmlui-padding-H2)));
   padding-right: var(--xmlui-paddingRight-H2, var(--xmlui-paddingHorizontal-H2, var(--xmlui-padding-H2)));
@@ -2298,7 +2300,7 @@
   text-decoration-thickness: var(--xmlui-textDecorationThickness-H2);
   text-underline-offset: var(--xmlui-textUnderlineOffset-H2);
 }
-._heading_qi2wo_13._h3_qi2wo_139 {
+._heading_p6fbv_13._h3_p6fbv_139 {
   padding: var(--xmlui-padding-H3);
   padding-left: var(--xmlui-paddingLeft-H3, var(--xmlui-paddingHorizontal-H3, var(--xmlui-padding-H3)));
   padding-right: var(--xmlui-paddingRight-H3, var(--xmlui-paddingHorizontal-H3, var(--xmlui-padding-H3)));
@@ -2361,7 +2363,7 @@
   text-decoration-thickness: var(--xmlui-textDecorationThickness-H3);
   text-underline-offset: var(--xmlui-textUnderlineOffset-H3);
 }
-._heading_qi2wo_13._h4_qi2wo_202 {
+._heading_p6fbv_13._h4_p6fbv_202 {
   padding: var(--xmlui-padding-H4);
   padding-left: var(--xmlui-paddingLeft-H4, var(--xmlui-paddingHorizontal-H4, var(--xmlui-padding-H4)));
   padding-right: var(--xmlui-paddingRight-H4, var(--xmlui-paddingHorizontal-H4, var(--xmlui-padding-H4)));
@@ -2424,7 +2426,7 @@
   text-decoration-thickness: var(--xmlui-textDecorationThickness-H4);
   text-underline-offset: var(--xmlui-textUnderlineOffset-H4);
 }
-._heading_qi2wo_13._h5_qi2wo_265 {
+._heading_p6fbv_13._h5_p6fbv_265 {
   padding: var(--xmlui-padding-H5);
   padding-left: var(--xmlui-paddingLeft-H5, var(--xmlui-paddingHorizontal-H5, var(--xmlui-padding-H5)));
   padding-right: var(--xmlui-paddingRight-H5, var(--xmlui-paddingHorizontal-H5, var(--xmlui-padding-H5)));
@@ -2487,7 +2489,7 @@
   text-decoration-thickness: var(--xmlui-textDecorationThickness-H5);
   text-underline-offset: var(--xmlui-textUnderlineOffset-H5);
 }
-._heading_qi2wo_13._h6_qi2wo_328 {
+._heading_p6fbv_13._h6_p6fbv_328 {
   padding: var(--xmlui-padding-H6);
   padding-left: var(--xmlui-paddingLeft-H6, var(--xmlui-paddingHorizontal-H6, var(--xmlui-padding-H6)));
   padding-right: var(--xmlui-paddingRight-H6, var(--xmlui-paddingHorizontal-H6, var(--xmlui-padding-H6)));
@@ -2550,8 +2552,18 @@
   text-decoration-thickness: var(--xmlui-textDecorationThickness-H6);
   text-underline-offset: var(--xmlui-textUnderlineOffset-H6);
 }
+._heading_p6fbv_13 a {
+  opacity: 0;
+  margin-left: var(--xmlui-gap-anchor-Heading);
+  color: var(--xmlui-color-anchor-Heading);
+  transition: opacity 0.2s ease-in-out;
+}
+._heading_p6fbv_13:hover a {
+  opacity: 1;
+  text-decoration: var(--xmlui-textDecorationLine-anchor-Heading);
+}
 
-._anchorRef_qi2wo_392 {
+._anchorRef_p6fbv_402 {
   --my-scroll-margin-top: var(--header-height);
   width: 0;
   height: 0;
@@ -2562,17 +2574,17 @@
 This is a Chromium based solution that is supported by most modern browsers.
 See this source for details: https://css-tricks.com/line-clampin/
 */
-._truncateOverflow_qi2wo_403 {
+._truncateOverflow_p6fbv_413 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-._preserveLinebreaks_qi2wo_409 {
+._preserveLinebreaks_p6fbv_419 {
   white-space: pre-wrap;
 }
 
-._noEllipsis_qi2wo_413 {
+._noEllipsis_p6fbv_423 {
   text-overflow: clip;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -2586,7 +2598,7 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._text_xzkxl_13 {
+._text_1qfdf_13 {
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0;
@@ -2648,7 +2660,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-default);
   vertical-align: var(--xmlui-verticalAlign-Text-default);
 }
-._text_xzkxl_13._markdown_xzkxl_75 {
+._text_1qfdf_13._markdown_1qfdf_75 {
   padding: var(--xmlui-padding-Text-markdown);
   padding-left: var(--xmlui-paddingLeft-Text-markdown, var(--xmlui-paddingHorizontal-Text-markdown, var(--xmlui-padding-Text-markdown)));
   padding-right: var(--xmlui-paddingRight-Text-markdown, var(--xmlui-paddingHorizontal-Text-markdown, var(--xmlui-padding-Text-markdown)));
@@ -2705,7 +2717,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-markdown);
   vertical-align: var(--xmlui-verticalAlign-Text-markdown);
 }
-._text_xzkxl_13._abbr_xzkxl_132 {
+._text_1qfdf_13._abbr_1qfdf_132 {
   padding: var(--xmlui-padding-Text-abbr);
   padding-left: var(--xmlui-paddingLeft-Text-abbr, var(--xmlui-paddingHorizontal-Text-abbr, var(--xmlui-padding-Text-abbr)));
   padding-right: var(--xmlui-paddingRight-Text-abbr, var(--xmlui-paddingHorizontal-Text-abbr, var(--xmlui-padding-Text-abbr)));
@@ -2762,7 +2774,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-abbr);
   vertical-align: var(--xmlui-verticalAlign-Text-abbr);
 }
-._text_xzkxl_13._cite_xzkxl_189 {
+._text_1qfdf_13._cite_1qfdf_189 {
   padding: var(--xmlui-padding-Text-cite);
   padding-left: var(--xmlui-paddingLeft-Text-cite, var(--xmlui-paddingHorizontal-Text-cite, var(--xmlui-padding-Text-cite)));
   padding-right: var(--xmlui-paddingRight-Text-cite, var(--xmlui-paddingHorizontal-Text-cite, var(--xmlui-padding-Text-cite)));
@@ -2819,12 +2831,69 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-cite);
   vertical-align: var(--xmlui-verticalAlign-Text-cite);
 }
-._text_xzkxl_13 ._text_xzkxl_13._codefence_xzkxl_246 {
+._text_1qfdf_13._em_1qfdf_246 {
+  padding: var(--xmlui-padding-Text-em);
+  padding-left: var(--xmlui-paddingLeft-Text-em, var(--xmlui-paddingHorizontal-Text-em, var(--xmlui-padding-Text-em)));
+  padding-right: var(--xmlui-paddingRight-Text-em, var(--xmlui-paddingHorizontal-Text-em, var(--xmlui-padding-Text-em)));
+  padding-top: var(--xmlui-paddingTop-Text-em, var(--xmlui-paddingVertical-Text-em, var(--xmlui-padding-Text-em)));
+  padding-bottom: var(--xmlui-paddingBottom-Text-em, var(--xmlui-paddingVertical-Text-em, var(--xmlui-padding-Text-em)));
+  border-left: var(--xmlui-borderLeft-Text-em, var(--xmlui-borderHorizontal-Text-em, var(--xmlui-border-Text-em)));
+  border-right: var(--xmlui-borderRight-Text-em, var(--xmlui-borderHorizontal-Text-em, var(--xmlui-border-Text-em)));
+  border-top: var(--xmlui-borderTop-Text-em, var(--xmlui-borderVertical-Text-em, var(--xmlui-border-Text-em)));
+  border-bottom: var(--xmlui-borderBottom-Text-em, var(--xmlui-borderVertical-Text-em, var(--xmlui-border-Text-em)));
+  border-left-style: var(--xmlui-borderLeftStyle-Text-em, var(--xmlui-borderHorizontalStyle-Text-em, var(--xmlui-borderStyle-Text-em)));
+  border-right-style: var(--xmlui-borderRightStyle-Text-em, var(--xmlui-borderHorizontalStyle-Text-em, var(--xmlui-borderStyle-Text-em)));
+  border-top-style: var(--xmlui-borderTopStyle-Text-em, var(--xmlui-borderVerticalStyle-Text-em, var(--xmlui-borderStyle-Text-em)));
+  border-bottom-style: var(--xmlui-borderBottomStyle-Text-em, var(--xmlui-borderVerticalStyle-Text-em, var(--xmlui-borderStyle-Text-em)));
+  border-left-width: var(--xmlui-borderLeftWidth-Text-em, var(--xmlui-borderHorizontalWidth-Text-em, var(--xmlui-borderWidth-Text-em)));
+  border-right-width: var(--xmlui-borderRightWidth-Text-em, var(--xmlui-borderHorizontalWidth-Text-em, var(--xmlui-borderWidth-Text-em)));
+  border-top-width: var(--xmlui-borderTopWidth-Text-em, var(--xmlui-borderVerticalWidth-Text-em, var(--xmlui-borderWidth-Text-em)));
+  border-bottom-width: var(--xmlui-borderBottomWidth-Text-em, var(--xmlui-borderVerticalWidth-Text-em, var(--xmlui-borderWidth-Text-em)));
+  border-left-color: var(--xmlui-borderLeftColor-Text-em, var(--xmlui-borderHorizontalColor-Text-em, var(--xmlui-borderColor-Text-em)));
+  border-right-color: var(--xmlui-borderRightColor-Text-em, var(--xmlui-borderHorizontalColor-Text-em, var(--xmlui-borderColor-Text-em)));
+  border-top-color: var(--xmlui-borderTopColor-Text-em, var(--xmlui-borderVerticalColor-Text-em, var(--xmlui-borderColor-Text-em)));
+  border-bottom-color: var(--xmlui-borderBottomColor-Text-em, var(--xmlui-borderVerticalColor-Text-em, var(--xmlui-borderColor-Text-em)));
+  border-start-start-radius: var(--xmlui-borderStartStartRadius-Text-em, var(--xmlui-borderRadius-Text-em));
+  border-start-end-radius: var(--xmlui-borderStartEndRadius-Text-em, var(--xmlui-borderRadius-Text-em));
+  border-end-start-radius: var(--xmlui-borderEndStartRadius-Text-em, var(--xmlui-borderRadius-Text-em));
+  border-end-end-radius: var(--xmlui-borderEndEndRadius-Text-em, var(--xmlui-borderRadius-Text-em));
+  color: var(--xmlui-textColor-Text-em);
+  font-family: var(--xmlui-fontFamily-Text-em);
+  font-size: var(--xmlui-fontSize-Text-em);
+  font-style: var(--xmlui-fontStyle-Text-em);
+  font-weight: var(--xmlui-fontWeight-Text-em);
+  font-stretch: var(--xmlui-fontStretch-Text-em);
+  text-decoration-line: var(--xmlui-textDecorationLine-Text-em);
+  text-decoration-color: var(--xmlui-textDecorationColor-Text-em);
+  text-decoration-style: var(--xmlui-textDecorationStyle-Text-em);
+  text-decoration-thickness: var(--xmlui-textDecorationThickness-Text-em);
+  text-underline-offset: var(--xmlui-textUnderlineOffset-Text-em);
+  line-height: var(--xmlui-lineHeight-Text-em);
+  background-color: var(--xmlui-backgroundColor-Text-em);
+  text-transform: var(--xmlui-textTransform-Text-em);
+  letter-spacing: var(--xmlui-letterSpacing-Text-em);
+  word-spacing: var(--xmlui-wordSpacing-Text-em);
+  text-shadow: var(--xmlui-textShadow-Text-em);
+  text-indent: var(--xmlui-textIndent-Text-em);
+  text-align: var(--xmlui-textAlign-Text-em);
+  text-align-last: var(--xmlui-textAlignLast-Text-em);
+  word-break: var(--xmlui-wordBreak-Text-em);
+  word-wrap: var(--xmlui-wordWrap-Text-em);
+  direction: var(--xmlui-direction-Text-em);
+  writing-mode: var(--xmlui-writingMode-Text-em);
+  line-break: var(--xmlui-lineBreak-Text-em);
+  margin-top: var(--xmlui-marginTop-Text-em);
+  margin-bottom: var(--xmlui-marginBottom-Text-em);
+  margin-left: var(--xmlui-marginLeft-Text-em);
+  margin-right: var(--xmlui-marginRight-Text-em);
+  vertical-align: var(--xmlui-verticalAlign-Text-em);
+}
+._text_1qfdf_13 ._text_1qfdf_13._codefence_1qfdf_303 {
   display: block;
   margin-top: var(--xmlui-marginTop-Text-codefence);
   margin-bottom: var(--xmlui-marginBottom-Text-codefence);
 }
-:not(._text_xzkxl_13._codefence_xzkxl_246) > ._text_xzkxl_13._code_xzkxl_246, :not(._text_xzkxl_13._codefence_xzkxl_246) > ._textcode_xzkxl_251 {
+:not(._text_1qfdf_13._codefence_1qfdf_303) > ._text_1qfdf_13._code_1qfdf_303, :not(._text_1qfdf_13._codefence_1qfdf_303) > ._textcode_1qfdf_308 {
   padding: var(--xmlui-padding-Text-code);
   padding-left: var(--xmlui-paddingLeft-Text-code, var(--xmlui-paddingHorizontal-Text-code, var(--xmlui-padding-Text-code)));
   padding-right: var(--xmlui-paddingRight-Text-code, var(--xmlui-paddingHorizontal-Text-code, var(--xmlui-padding-Text-code)));
@@ -2881,7 +2950,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-code);
   vertical-align: var(--xmlui-verticalAlign-Text-code);
 }
-._text_xzkxl_13._codefence_xzkxl_246:has(> ._text_xzkxl_13._code_xzkxl_246), ._text_xzkxl_13._codefence_xzkxl_246:has(> code) {
+._text_1qfdf_13._codefence_1qfdf_303:has(> ._text_1qfdf_13._code_1qfdf_303), ._text_1qfdf_13._codefence_1qfdf_303:has(> code) {
   padding: var(--xmlui-padding-Text-codefence);
   padding-left: var(--xmlui-paddingLeft-Text-codefence, var(--xmlui-paddingHorizontal-Text-codefence, var(--xmlui-padding-Text-codefence)));
   padding-right: var(--xmlui-paddingRight-Text-codefence, var(--xmlui-paddingHorizontal-Text-codefence, var(--xmlui-padding-Text-codefence)));
@@ -2942,28 +3011,28 @@ See this source for details: https://css-tricks.com/line-clampin/
   font-size: var(--xmlui-fontSize-small);
   line-height: 1.4;
 }
-._text_xzkxl_13._codefence_xzkxl_246:has(> code > span) {
+._text_1qfdf_13._codefence_1qfdf_303:has(> code > span) {
   padding-inline: 0;
 }
-._text_xzkxl_13._codefence_xzkxl_246 > code > span:not([class*=numbered]) {
+._text_1qfdf_13._codefence_1qfdf_303 > code > span:not([class*=numbered]) {
   padding-inline: var(--xmlui-space-3);
 }
-._text_xzkxl_13._codefence_xzkxl_246 > code {
+._text_1qfdf_13._codefence_1qfdf_303 > code {
   white-space: pre-wrap;
   display: inline-block;
   width: 100%;
 }
-._text_xzkxl_13._codefence_xzkxl_246 > code::before {
+._text_1qfdf_13._codefence_1qfdf_303 > code::before {
   counter-reset: listing;
 }
-._text_xzkxl_13._codefence_xzkxl_246 > code > span {
+._text_1qfdf_13._codefence_1qfdf_303 > code > span {
   display: inline-block;
   width: 100%;
 }
-._text_xzkxl_13._codefence_xzkxl_246 > code > span[class*=numbered] {
+._text_1qfdf_13._codefence_1qfdf_303 > code > span[class*=numbered] {
   counter-increment: listing;
 }
-._text_xzkxl_13._codefence_xzkxl_246 > code > span[class*=numbered]::before {
+._text_1qfdf_13._codefence_1qfdf_303 > code > span[class*=numbered]::before {
   content: counter(listing);
   display: inline-block;
   width: var(--xmlui-space-12);
@@ -2973,7 +3042,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   text-align: right;
   color: var(--xmlui-textColor-secondary);
 }
-._text_xzkxl_13._deleted_xzkxl_400 {
+._text_1qfdf_13._deleted_1qfdf_457 {
   padding: var(--xmlui-padding-Text-deleted);
   padding-left: var(--xmlui-paddingLeft-Text-deleted, var(--xmlui-paddingHorizontal-Text-deleted, var(--xmlui-padding-Text-deleted)));
   padding-right: var(--xmlui-paddingRight-Text-deleted, var(--xmlui-paddingHorizontal-Text-deleted, var(--xmlui-padding-Text-deleted)));
@@ -3030,7 +3099,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-deleted);
   vertical-align: var(--xmlui-verticalAlign-Text-deleted);
 }
-._text_xzkxl_13._deleted_xzkxl_400::before, ._text_xzkxl_13._deleted_xzkxl_400::after {
+._text_1qfdf_13._deleted_1qfdf_457::before, ._text_1qfdf_13._deleted_1qfdf_457::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -3039,13 +3108,13 @@ See this source for details: https://css-tricks.com/line-clampin/
   white-space: nowrap;
   width: 1px;
 }
-._text_xzkxl_13._deleted_xzkxl_400::before {
+._text_1qfdf_13._deleted_1qfdf_457::before {
   content: " [deletion start] ";
 }
-._text_xzkxl_13._deleted_xzkxl_400::after {
+._text_1qfdf_13._deleted_1qfdf_457::after {
   content: " [deletion end] ";
 }
-._text_xzkxl_13._inserted_xzkxl_472 {
+._text_1qfdf_13._inserted_1qfdf_529 {
   padding: var(--xmlui-padding-Text-inserted);
   padding-left: var(--xmlui-paddingLeft-Text-inserted, var(--xmlui-paddingHorizontal-Text-inserted, var(--xmlui-padding-Text-inserted)));
   padding-right: var(--xmlui-paddingRight-Text-inserted, var(--xmlui-paddingHorizontal-Text-inserted, var(--xmlui-padding-Text-inserted)));
@@ -3102,7 +3171,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-inserted);
   vertical-align: var(--xmlui-verticalAlign-Text-inserted);
 }
-._text_xzkxl_13._inserted_xzkxl_472::before, ._text_xzkxl_13._inserted_xzkxl_472::after {
+._text_1qfdf_13._inserted_1qfdf_529::before, ._text_1qfdf_13._inserted_1qfdf_529::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -3111,13 +3180,13 @@ See this source for details: https://css-tricks.com/line-clampin/
   white-space: nowrap;
   width: 1px;
 }
-._text_xzkxl_13._inserted_xzkxl_472::before {
+._text_1qfdf_13._inserted_1qfdf_529::before {
   content: " [insertion start] ";
 }
-._text_xzkxl_13._inserted_xzkxl_472::after {
+._text_1qfdf_13._inserted_1qfdf_529::after {
   content: " [insertion end] ";
 }
-._text_xzkxl_13._keyboard_xzkxl_544 {
+._text_1qfdf_13._keyboard_1qfdf_601 {
   padding: var(--xmlui-padding-Text-keyboard);
   padding-left: var(--xmlui-paddingLeft-Text-keyboard, var(--xmlui-paddingHorizontal-Text-keyboard, var(--xmlui-padding-Text-keyboard)));
   padding-right: var(--xmlui-paddingRight-Text-keyboard, var(--xmlui-paddingHorizontal-Text-keyboard, var(--xmlui-padding-Text-keyboard)));
@@ -3174,7 +3243,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-keyboard);
   vertical-align: var(--xmlui-verticalAlign-Text-keyboard);
 }
-._text_xzkxl_13._marked_xzkxl_601 {
+._text_1qfdf_13._marked_1qfdf_658 {
   padding: var(--xmlui-padding-Text-marked);
   padding-left: var(--xmlui-paddingLeft-Text-marked, var(--xmlui-paddingHorizontal-Text-marked, var(--xmlui-padding-Text-marked)));
   padding-right: var(--xmlui-paddingRight-Text-marked, var(--xmlui-paddingHorizontal-Text-marked, var(--xmlui-padding-Text-marked)));
@@ -3231,7 +3300,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-marked);
   vertical-align: var(--xmlui-verticalAlign-Text-marked);
 }
-._text_xzkxl_13._marked_xzkxl_601::before, ._text_xzkxl_13._marked_xzkxl_601::after {
+._text_1qfdf_13._marked_1qfdf_658::before, ._text_1qfdf_13._marked_1qfdf_658::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -3240,13 +3309,13 @@ See this source for details: https://css-tricks.com/line-clampin/
   white-space: nowrap;
   width: 1px;
 }
-._text_xzkxl_13._marked_xzkxl_601::before {
+._text_1qfdf_13._marked_1qfdf_658::before {
   content: " [highlight start] ";
 }
-._text_xzkxl_13._marked_xzkxl_601::after {
+._text_1qfdf_13._marked_1qfdf_658::after {
   content: " [highlight end] ";
 }
-._text_xzkxl_13._mono_xzkxl_673 {
+._text_1qfdf_13._mono_1qfdf_730 {
   padding: var(--xmlui-padding-Text-mono);
   padding-left: var(--xmlui-paddingLeft-Text-mono, var(--xmlui-paddingHorizontal-Text-mono, var(--xmlui-padding-Text-mono)));
   padding-right: var(--xmlui-paddingRight-Text-mono, var(--xmlui-paddingHorizontal-Text-mono, var(--xmlui-padding-Text-mono)));
@@ -3303,7 +3372,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-mono);
   vertical-align: var(--xmlui-verticalAlign-Text-mono);
 }
-._text_xzkxl_13._sample_xzkxl_730 {
+._text_1qfdf_13._sample_1qfdf_787 {
   padding: var(--xmlui-padding-Text-sample);
   padding-left: var(--xmlui-paddingLeft-Text-sample, var(--xmlui-paddingHorizontal-Text-sample, var(--xmlui-padding-Text-sample)));
   padding-right: var(--xmlui-paddingRight-Text-sample, var(--xmlui-paddingHorizontal-Text-sample, var(--xmlui-padding-Text-sample)));
@@ -3360,7 +3429,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-sample);
   vertical-align: var(--xmlui-verticalAlign-Text-sample);
 }
-._text_xzkxl_13._sup_xzkxl_787 {
+._text_1qfdf_13._sup_1qfdf_844 {
   padding: var(--xmlui-padding-Text-sup);
   padding-left: var(--xmlui-paddingLeft-Text-sup, var(--xmlui-paddingHorizontal-Text-sup, var(--xmlui-padding-Text-sup)));
   padding-right: var(--xmlui-paddingRight-Text-sup, var(--xmlui-paddingHorizontal-Text-sup, var(--xmlui-padding-Text-sup)));
@@ -3417,7 +3486,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-sup);
   vertical-align: var(--xmlui-verticalAlign-Text-sup);
 }
-._text_xzkxl_13._sub_xzkxl_844 {
+._text_1qfdf_13._sub_1qfdf_901 {
   padding: var(--xmlui-padding-Text-sub);
   padding-left: var(--xmlui-paddingLeft-Text-sub, var(--xmlui-paddingHorizontal-Text-sub, var(--xmlui-padding-Text-sub)));
   padding-right: var(--xmlui-paddingRight-Text-sub, var(--xmlui-paddingHorizontal-Text-sub, var(--xmlui-padding-Text-sub)));
@@ -3474,7 +3543,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-sub);
   vertical-align: var(--xmlui-verticalAlign-Text-sub);
 }
-._text_xzkxl_13._var_xzkxl_901 {
+._text_1qfdf_13._var_1qfdf_958 {
   padding: var(--xmlui-padding-Text-var);
   padding-left: var(--xmlui-paddingLeft-Text-var, var(--xmlui-paddingHorizontal-Text-var, var(--xmlui-padding-Text-var)));
   padding-right: var(--xmlui-paddingRight-Text-var, var(--xmlui-paddingHorizontal-Text-var, var(--xmlui-padding-Text-var)));
@@ -3531,7 +3600,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-var);
   vertical-align: var(--xmlui-verticalAlign-Text-var);
 }
-._text_xzkxl_13._title_xzkxl_958 {
+._text_1qfdf_13._title_1qfdf_1015 {
   padding: var(--xmlui-padding-Text-title);
   padding-left: var(--xmlui-paddingLeft-Text-title, var(--xmlui-paddingHorizontal-Text-title, var(--xmlui-padding-Text-title)));
   padding-right: var(--xmlui-paddingRight-Text-title, var(--xmlui-paddingHorizontal-Text-title, var(--xmlui-padding-Text-title)));
@@ -3588,7 +3657,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-title);
   vertical-align: var(--xmlui-verticalAlign-Text-title);
 }
-._text_xzkxl_13._subtitle_xzkxl_1015 {
+._text_1qfdf_13._subtitle_1qfdf_1072 {
   padding: var(--xmlui-padding-Text-subtitle);
   padding-left: var(--xmlui-paddingLeft-Text-subtitle, var(--xmlui-paddingHorizontal-Text-subtitle, var(--xmlui-padding-Text-subtitle)));
   padding-right: var(--xmlui-paddingRight-Text-subtitle, var(--xmlui-paddingHorizontal-Text-subtitle, var(--xmlui-padding-Text-subtitle)));
@@ -3645,7 +3714,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-subtitle);
   vertical-align: var(--xmlui-verticalAlign-Text-subtitle);
 }
-._text_xzkxl_13._small_xzkxl_1072 {
+._text_1qfdf_13._small_1qfdf_1129 {
   padding: var(--xmlui-padding-Text-small);
   padding-left: var(--xmlui-paddingLeft-Text-small, var(--xmlui-paddingHorizontal-Text-small, var(--xmlui-padding-Text-small)));
   padding-right: var(--xmlui-paddingRight-Text-small, var(--xmlui-paddingHorizontal-Text-small, var(--xmlui-padding-Text-small)));
@@ -3702,7 +3771,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-small);
   vertical-align: var(--xmlui-verticalAlign-Text-small);
 }
-._text_xzkxl_13._caption_xzkxl_1129 {
+._text_1qfdf_13._caption_1qfdf_1186 {
   padding: var(--xmlui-padding-Text-caption);
   padding-left: var(--xmlui-paddingLeft-Text-caption, var(--xmlui-paddingHorizontal-Text-caption, var(--xmlui-padding-Text-caption)));
   padding-right: var(--xmlui-paddingRight-Text-caption, var(--xmlui-paddingHorizontal-Text-caption, var(--xmlui-padding-Text-caption)));
@@ -3759,7 +3828,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-caption);
   vertical-align: var(--xmlui-verticalAlign-Text-caption);
 }
-._text_xzkxl_13._placeholder_xzkxl_1186 {
+._text_1qfdf_13._placeholder_1qfdf_1243 {
   padding: var(--xmlui-padding-Text-placeholder);
   padding-left: var(--xmlui-paddingLeft-Text-placeholder, var(--xmlui-paddingHorizontal-Text-placeholder, var(--xmlui-padding-Text-placeholder)));
   padding-right: var(--xmlui-paddingRight-Text-placeholder, var(--xmlui-paddingHorizontal-Text-placeholder, var(--xmlui-padding-Text-placeholder)));
@@ -3816,7 +3885,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-placeholder);
   vertical-align: var(--xmlui-verticalAlign-Text-placeholder);
 }
-._text_xzkxl_13._paragraph_xzkxl_1243 {
+._text_1qfdf_13._paragraph_1qfdf_1300 {
   padding: var(--xmlui-padding-Text-paragraph);
   padding-left: var(--xmlui-paddingLeft-Text-paragraph, var(--xmlui-paddingHorizontal-Text-paragraph, var(--xmlui-padding-Text-paragraph)));
   padding-right: var(--xmlui-paddingRight-Text-paragraph, var(--xmlui-paddingHorizontal-Text-paragraph, var(--xmlui-padding-Text-paragraph)));
@@ -3873,7 +3942,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-paragraph);
   vertical-align: var(--xmlui-verticalAlign-Text-paragraph);
 }
-._text_xzkxl_13._subheading_xzkxl_1300 {
+._text_1qfdf_13._subheading_1qfdf_1357 {
   padding: var(--xmlui-padding-Text-subheading);
   padding-left: var(--xmlui-paddingLeft-Text-subheading, var(--xmlui-paddingHorizontal-Text-subheading, var(--xmlui-padding-Text-subheading)));
   padding-right: var(--xmlui-paddingRight-Text-subheading, var(--xmlui-paddingHorizontal-Text-subheading, var(--xmlui-padding-Text-subheading)));
@@ -3930,7 +3999,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-subheading);
   vertical-align: var(--xmlui-verticalAlign-Text-subheading);
 }
-._text_xzkxl_13._tableheading_xzkxl_1357 {
+._text_1qfdf_13._tableheading_1qfdf_1414 {
   padding: var(--xmlui-padding-Text-tableheading);
   padding-left: var(--xmlui-paddingLeft-Text-tableheading, var(--xmlui-paddingHorizontal-Text-tableheading, var(--xmlui-padding-Text-tableheading)));
   padding-right: var(--xmlui-paddingRight-Text-tableheading, var(--xmlui-paddingHorizontal-Text-tableheading, var(--xmlui-padding-Text-tableheading)));
@@ -3987,7 +4056,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-tableheading);
   vertical-align: var(--xmlui-verticalAlign-Text-tableheading);
 }
-._text_xzkxl_13._secondary_xzkxl_1414 {
+._text_1qfdf_13._secondary_1qfdf_1471 {
   padding: var(--xmlui-padding-Text-secondary);
   padding-left: var(--xmlui-paddingLeft-Text-secondary, var(--xmlui-paddingHorizontal-Text-secondary, var(--xmlui-padding-Text-secondary)));
   padding-right: var(--xmlui-paddingRight-Text-secondary, var(--xmlui-paddingHorizontal-Text-secondary, var(--xmlui-padding-Text-secondary)));
@@ -4044,7 +4113,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: var(--xmlui-marginRight-Text-secondary);
   vertical-align: var(--xmlui-verticalAlign-Text-secondary);
 }
-._text_xzkxl_13._strong_xzkxl_1471 {
+._text_1qfdf_13._strong_1qfdf_1528 {
   font-weight: var(--xmlui-fontWeight-bold);
 }
 
@@ -4052,18 +4121,18 @@ See this source for details: https://css-tricks.com/line-clampin/
 This is a Chromium based solution that is supported by most modern browsers.
 See this source for details: https://css-tricks.com/line-clampin/
 */
-._truncateOverflow_xzkxl_1479 {
+._truncateOverflow_1qfdf_1536 {
   overflow: hidden;
   overflow-wrap: break-word;
   white-space: nowrap;
   max-width: 100%;
 }
 
-._preserveLinebreaks_xzkxl_1486 {
+._preserveLinebreaks_1qfdf_1543 {
   white-space: pre-wrap;
 }
 
-._noEllipsis_xzkxl_1490 {
+._noEllipsis_1qfdf_1547 {
   text-overflow: clip;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -4368,7 +4437,7 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._resetAppearance_ddph3_13 {
+._resetAppearance_1j250_13 {
   /* Add if not using autoprefixer */
   -webkit-appearance: none;
   appearance: none;
@@ -4376,11 +4445,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin: 0;
 }
 
-._label_ddph3_21 {
+._label_1j250_21 {
   width: 100%;
 }
 
-._inputContainer_ddph3_25 {
+._inputContainer_1j250_25 {
   z-index: -1;
   position: relative;
   opacity: 0;
@@ -4388,7 +4457,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   height: 0;
 }
 
-._checkbox_ddph3_33 {
+._checkbox_1j250_33 {
   display: grid;
   place-content: center;
   min-width: 1em;
@@ -4400,57 +4469,57 @@ See this source for details: https://css-tricks.com/line-clampin/
   border-color: var(--xmlui-borderColor-Checkbox-default);
   background-color: var(--xmlui-backgroundColor-Checkbox-default);
 }
-._checkbox_ddph3_33:not([readonly]) {
+._checkbox_1j250_33:not([readonly]) {
   cursor: pointer;
 }
-._checkbox_ddph3_33:focus-visible {
+._checkbox_1j250_33:focus-visible {
   outline-width: var(--xmlui-outlineWidth-Checkbox-default--focus);
   outline-color: var(--xmlui-outlineColor-Checkbox-default--focus);
   outline-style: var(--xmlui-outlineStyle-Checkbox-default--focus);
   outline-offset: var(--xmlui-outlineOffset-Checkbox-default--focus);
 }
-._checkbox_ddph3_33:hover {
+._checkbox_1j250_33:hover {
   border-color: var(--xmlui-borderColor-Checkbox-default--hover);
 }
-._checkbox_ddph3_33:disabled {
+._checkbox_1j250_33:disabled {
   cursor: not-allowed;
   background-color: var(--xmlui-backgroundColor-Checkbox--disabled);
   border-color: var(--xmlui-borderColor-Checkbox--disabled);
 }
-._checkbox_ddph3_33._error_ddph3_62 {
+._checkbox_1j250_33._error_1j250_62 {
   border-radius: var(--xmlui-borderRadius-Checkbox-error);
   border-color: var(--xmlui-borderColor-Checkbox-error);
   background-color: var(--xmlui-backgroundColor-Checkbox-error);
 }
-._checkbox_ddph3_33._error_ddph3_62:focus-visible {
+._checkbox_1j250_33._error_1j250_62:focus-visible {
   outline-width: var(--xmlui-outlineWidth-Checkbox-error--focus);
   outline-color: var(--xmlui-outlineColor-Checkbox-error--focus);
   outline-style: var(--xmlui-outlineStyle-Checkbox-error--focus);
   outline-offset: var(--xmlui-outlineOffset-Checkbox-error--focus);
 }
-._checkbox_ddph3_33._warning_ddph3_73 {
+._checkbox_1j250_33._warning_1j250_73 {
   border-radius: var(--xmlui-borderRadius-Checkbox-warning);
   border-color: var(--xmlui-borderColor-Checkbox-warning);
   background-color: var(--xmlui-backgroundColor-Checkbox-warning);
 }
-._checkbox_ddph3_33._warning_ddph3_73:focus-visible {
+._checkbox_1j250_33._warning_1j250_73:focus-visible {
   outline-width: var(--xmlui-outlineWidth-Checkbox-warning--focus);
   outline-color: var(--xmlui-outlineColor-Checkbox-warning--focus);
   outline-style: var(--xmlui-outlineStyle-Checkbox-warning--focus);
   outline-offset: var(--xmlui-outlineOffset-Checkbox-warning--focus);
 }
-._checkbox_ddph3_33._valid_ddph3_84 {
+._checkbox_1j250_33._valid_1j250_84 {
   border-radius: var(--xmlui-borderRadius-Checkbox-success);
   border-color: var(--xmlui-borderColor-Checkbox-success);
   background-color: var(--xmlui-backgroundColor-Checkbox-success);
 }
-._checkbox_ddph3_33._valid_ddph3_84:focus-visible {
+._checkbox_1j250_33._valid_1j250_84:focus-visible {
   outline-width: var(--xmlui-outlineWidth-Checkbox-success--focus);
   outline-color: var(--xmlui-outlineColor-Checkbox-success--focus);
   outline-style: var(--xmlui-outlineStyle-Checkbox-success--focus);
   outline-offset: var(--xmlui-outlineOffset-Checkbox-success--focus);
 }
-._checkbox_ddph3_33::before {
+._checkbox_1j250_33::before {
   content: "";
   width: 0.5em;
   height: 0.5em;
@@ -4460,47 +4529,47 @@ See this source for details: https://css-tricks.com/line-clampin/
   transform-origin: center;
   clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 }
-._checkbox_ddph3_33:checked::before {
+._checkbox_1j250_33:checked::before {
   transform: scale(1);
 }
-._checkbox_ddph3_33:checked {
+._checkbox_1j250_33:checked {
   border-color: var(--xmlui-borderColor-checked-Checkbox);
   background-color: var(--xmlui-backgroundColor-checked-Checkbox);
 }
-._checkbox_ddph3_33:checked:disabled {
+._checkbox_1j250_33:checked:disabled {
   background-color: var(--xmlui-backgroundColor-Checkbox--disabled);
   border-color: var(--xmlui-borderColor-Checkbox--disabled);
 }
-._checkbox_ddph3_33:checked._error_ddph3_62 {
+._checkbox_1j250_33:checked._error_1j250_62 {
   border-color: var(--xmlui-borderColor-checked-Checkbox-error);
   background-color: var(--xmlui-backgroundColor-checked-Checkbox-error);
 }
-._checkbox_ddph3_33:checked._warning_ddph3_73 {
+._checkbox_1j250_33:checked._warning_1j250_73 {
   border-color: var(--xmlui-borderColor-checked-Checkbox-warning);
   background-color: var(--xmlui-backgroundColor-checked-Checkbox-warning);
 }
-._checkbox_ddph3_33:checked._valid_ddph3_84 {
+._checkbox_1j250_33:checked._valid_1j250_84 {
   border-color: var(--xmlui-borderColor-checked-Checkbox-success);
   background-color: var(--xmlui-backgroundColor-checked-Checkbox-success);
 }
-._checkbox_ddph3_33:indeterminate {
+._checkbox_1j250_33:indeterminate {
   background-color: var(--xmlui-backgroundColor-checked-Checkbox);
   border-color: var(--xmlui-borderColor-checked-Checkbox);
 }
-._checkbox_ddph3_33:indeterminate[readonly] {
+._checkbox_1j250_33:indeterminate[readonly] {
   pointer-events: none;
 }
-._checkbox_ddph3_33:indeterminate:disabled {
+._checkbox_1j250_33:indeterminate:disabled {
   background-color: var(--xmlui-backgroundColor-Checkbox--disabled);
   border-color: var(--xmlui-borderColor-Checkbox--disabled);
 }
-._checkbox_ddph3_33:indeterminate::before {
+._checkbox_1j250_33:indeterminate::before {
   clip-path: circle(30% at 50% 50%);
   transform: scale(1);
 }
 
-._switch_ddph3_144 {
-  border: 2px solid var(--xmlui-borderColor-Switch);
+._switch_1j250_144 {
+  border: 1px solid var(--xmlui-borderColor-Switch);
   width: 32px;
   height: 20px;
   border-radius: 1rem;
@@ -4509,62 +4578,64 @@ See this source for details: https://css-tricks.com/line-clampin/
   flex-shrink: 0;
   background-color: var(--xmlui-backgroundColor-Switch);
 }
-._switch_ddph3_144:hover {
+._switch_1j250_144:hover {
   border-color: var(--xmlui-borderColor-Switch-default--hover);
 }
-._switch_ddph3_144:disabled {
+._switch_1j250_144:disabled {
   cursor: not-allowed;
   background-color: var(--xmlui-backgroundColor-Switch--disabled);
   border-color: var(--xmlui-borderColor-Switch--disabled);
 }
-._switch_ddph3_144._error_ddph3_62 {
+._switch_1j250_144._error_1j250_62 {
   border-color: var(--xmlui-borderColor-Switch-error);
 }
-._switch_ddph3_144._warning_ddph3_73 {
+._switch_1j250_144._warning_1j250_73 {
   border-color: var(--xmlui-borderColor-Switch-warning);
 }
-._switch_ddph3_144._valid_ddph3_84 {
+._switch_1j250_144._valid_1j250_84 {
   border-color: var(--xmlui-borderColor-Switch-success);
 }
-._switch_ddph3_144::before {
+._switch_1j250_144::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 1px;
   width: 16px;
   height: 16px;
   background: var(--xmlui-backgroundColor-indicator-Switch);
   border-radius: 1rem;
   transition: 0.3s transform;
 }
-._switch_ddph3_144:checked {
+._switch_1j250_144:checked {
   border-color: var(--xmlui-borderColor-checked-Switch);
   background-color: var(--xmlui-backgroundColor-checked-Switch);
 }
-._switch_ddph3_144:checked:disabled {
+._switch_1j250_144:checked:disabled {
   background-color: var(--xmlui-backgroundColor-Switch--disabled);
   border-color: var(--xmlui-borderColor-Switch--disabled);
 }
-._switch_ddph3_144:checked._error_ddph3_62 {
+._switch_1j250_144:checked._error_1j250_62 {
   border-color: var(--xmlui-borderColor-checked-Switch-error);
   background-color: var(--xmlui-backgroundColor-checked-Switch-error);
 }
-._switch_ddph3_144:checked._warning_ddph3_73 {
+._switch_1j250_144:checked._warning_1j250_73 {
   border-color: var(--xmlui-borderColor-checked-Switch-warning);
   background-color: var(--xmlui-backgroundColor-checked-Switch-warning);
 }
-._switch_ddph3_144:checked._valid_ddph3_84 {
+._switch_1j250_144:checked._valid_1j250_84 {
   border-color: var(--xmlui-borderColor-checked-Switch-success);
   background-color: var(--xmlui-backgroundColor-checked-Switch-success);
 }
-._switch_ddph3_144:focus-visible {
+._switch_1j250_144:focus-visible {
   outline-width: var(--xmlui-outlineWidth-Switch--focus);
   outline-color: var(--xmlui-outlineColor-Switch--focus);
   outline-style: var(--xmlui-outlineStyle-Switch--focus);
   outline-offset: var(--xmlui-outlineOffset-Switch--focus);
 }
-._switch_ddph3_144:checked::before {
-  transform: translateX(calc(100% - 4px));
+._switch_1j250_144:checked::before {
+  background: var(--xmlui-backgroundColor-indicator-checked-Switch);
+  transform: translateX(calc(100% - 4px)) translateY(-50%);
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *
@@ -6301,20 +6372,20 @@ button._selectTrigger_1cwq0_46._valid_1cwq0_37::placeholder {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._radioGroupContainer_294hm_13 {
+._radioGroupContainer_1easy_13 {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--xmlui-space-2);
 }
 
-._radioOptionContainer_294hm_20 {
+._radioOptionContainer_1easy_20 {
   display: flex;
   align-items: center;
   gap: var(--xmlui-gap-RadioGroupOption);
 }
 
-._radioOption_294hm_20 {
+._radioOption_1easy_20 {
   flex-shrink: 0;
   width: 18px;
   height: 18px;
@@ -6326,60 +6397,66 @@ button._selectTrigger_1cwq0_46._valid_1cwq0_37::placeholder {
   padding: 0;
   cursor: pointer;
 }
-._radioOption_294hm_20:hover {
+._radioOption_1easy_20:hover {
   border-color: var(--xmlui-borderColor-RadioGroupOption-default--hover);
 }
-._radioOption_294hm_20:focus-visible {
+._radioOption_1easy_20:focus-visible {
   outline-width: var(--xmlui-outlineWidth-RadioGroupOption--focus);
   outline-color: var(--xmlui-outlineColor-RadioGroupOption--focus);
   outline-style: var(--xmlui-outlineStyle-RadioGroupOption--focus);
   outline-offset: var(--xmlui-outlineOffset-RadioGroupOption--focus);
 }
-._radioOption_294hm_20:disabled {
+._radioOption_1easy_20:disabled {
   cursor: not-allowed;
   border-color: var(--xmlui-borderColor-RadioGroupOption--disabled);
 }
-._radioOption_294hm_20:disabled + label {
+._radioOption_1easy_20:disabled + label {
   cursor: not-allowed;
   color: var(--xmlui-color-RadioGroupOption--disabled);
 }
-._radioOption_294hm_20._error_294hm_55 {
+._radioOption_1easy_20._error_1easy_55 {
   border-color: var(--xmlui-borderColor-RadioGroupOption-error);
 }
-._radioOption_294hm_20._warning_294hm_58 {
+._radioOption_1easy_20._warning_1easy_58 {
   border-color: var(--xmlui-borderColor-RadioGroupOption-warning);
 }
-._radioOption_294hm_20._valid_294hm_61 {
+._radioOption_1easy_20._valid_1easy_61 {
   border-color: var(--xmlui-borderColor-RadioGroupOption-success);
 }
+._radioOption_1easy_20._checked_1easy_64 {
+  border: none;
+}
 
-._indicator_294hm_65 {
+._indicator_1easy_68 {
   display: grid;
   place-content: center;
   width: 100%;
   height: 100%;
+  border-radius: 50%;
+  background-color: var(--xmlui-backgroundColor-checked-RadioGroupOption-default);
 }
-._indicator_294hm_65::after {
+._indicator_1easy_68::after {
   content: "";
-  width: 10px;
-  height: 10px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
-  box-shadow: inset 1em 1em var(--xmlui-backgroundColor-checked-RadioGroupOption-default);
+  overflow: hidden;
+  box-shadow: inset 1em 1em var(--xmlui-backgroundColor-checked-RadioGroupOption-indicator);
 }
-._indicator_294hm_65._disabled_294hm_78::after {
+._indicator_1easy_68._disabled_1easy_84::after {
   box-shadow: inset 1em 1em var(--xmlui-backgroundColor-checked-RadioGroupOption--disabled);
 }
-._indicator_294hm_65._error_294hm_55::after {
+._indicator_1easy_68._error_1easy_55::after {
   box-shadow: inset 1em 1em var(--xmlui-backgroundColor-checked-RadioGroupOption-error);
 }
-._indicator_294hm_65._warning_294hm_58::after {
+._indicator_1easy_68._warning_1easy_58::after {
   box-shadow: inset 1em 1em var(--xmlui-backgroundColor-checked-RadioGroupOption-warning);
 }
-._indicator_294hm_65._valid_294hm_61::after {
+._indicator_1easy_68._valid_1easy_61::after {
   box-shadow: inset 1em 1em var(--xmlui-backgroundColor-checked-RadioGroupOption-success);
 }
 
-._itemContainer_294hm_91 {
+._itemContainer_1easy_97 {
   z-index: -1;
   position: relative;
   opacity: 0;
@@ -6387,12 +6464,12 @@ button._selectTrigger_1cwq0_46._valid_1cwq0_37::placeholder {
   height: 0;
 }
 
-._optionLabel_294hm_99 {
+._optionLabel_1easy_105 {
   width: 100%;
   cursor: pointer;
 }
 
-._label_294hm_104 {
+._label_1easy_110 {
   width: 100%;
   color: var(--xmlui-color-RadioGroupOption-default);
   font-size: var(--xmlui-fontSize-RadioGroupOption);
@@ -6400,13 +6477,13 @@ button._selectTrigger_1cwq0_46._valid_1cwq0_37::placeholder {
   user-select: none;
   cursor: pointer;
 }
-._label_294hm_104._error_294hm_55 {
+._label_1easy_110._error_1easy_55 {
   color: var(--xmlui-color-RadioGroupOption-error);
 }
-._label_294hm_104._warning_294hm_58 {
+._label_1easy_110._warning_1easy_58 {
   color: var(--xmlui-color-RadioGroupOption-warning);
 }
-._label_294hm_104._valid_294hm_61 {
+._label_1easy_110._valid_1easy_61 {
   color: var(--xmlui-color-RadioGroupOption-success);
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -8134,45 +8211,45 @@ button._selectTrigger_1cwq0_46._valid_1cwq0_37::placeholder {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._markdownContent_1q19g_13 {
+._markdownContent_1vc6z_13 {
   padding-top: var(--xmlui-paddingTop-Markdown);
   padding-bottom: var(--xmlui-paddingBottom-Markdown);
   background-color: var(--xmlui-backgroundColor-Markdown);
   min-width: 0;
   width: 100%;
 }
-._markdownContent_1q19g_13 h1 {
+._markdownContent_1vc6z_13 h1 {
   margin-top: var(--xmlui-marginTop-H1-markdown) !important;
   margin-bottom: var(--xmlui-marginBottom-H1-markdown) !important;
   font-size: var(--xmlui-fontSize-H1-markdown) !important;
 }
-._markdownContent_1q19g_13 h2 {
+._markdownContent_1vc6z_13 h2 {
   margin-top: var(--xmlui-marginTop-H2-markdown) !important;
   margin-bottom: var(--xmlui-marginBottom-H2-markdown) !important;
 }
-._markdownContent_1q19g_13 h3 {
+._markdownContent_1vc6z_13 h3 {
   margin-top: var(--xmlui-marginTop-H3-markdown) !important;
   margin-bottom: var(--xmlui-marginBottom-H3-markdown) !important;
 }
-._markdownContent_1q19g_13 h4 {
+._markdownContent_1vc6z_13 h4 {
   margin-top: var(--xmlui-marginTop-H4-markdown) !important;
   margin-bottom: var(--xmlui-marginBottom-H4-markdown) !important;
 }
-._markdownContent_1q19g_13 h5 {
+._markdownContent_1vc6z_13 h5 {
   margin-top: var(--xmlui-marginTop-H5-markdown) !important;
   margin-bottom: var(--xmlui-marginBottom-H5-markdown) !important;
 }
-._markdownContent_1q19g_13 h6 {
+._markdownContent_1vc6z_13 h6 {
   margin-top: var(--xmlui-marginTop-H6-markdown) !important;
   margin-bottom: var(--xmlui-marginBottom-H6-markdown) !important;
 }
-._markdownContent_1q19g_13 ._blockquote_1q19g_45 {
+._markdownContent_1vc6z_13 ._blockquote_1vc6z_45 {
   position: relative;
   margin-top: var(--xmlui-marginTop-Blockquote);
   margin-bottom: var(--xmlui-marginBottom-Blockquote);
   background-color: var(--xmlui-backgroundColor-Blockquote);
 }
-._markdownContent_1q19g_13 ._blockquote_1q19g_45::before {
+._markdownContent_1vc6z_13 ._blockquote_1vc6z_45::before {
   background-color: var(--xmlui-accentColor-Blockquote);
   position: absolute;
   top: 0;
@@ -8182,7 +8259,7 @@ button._selectTrigger_1cwq0_46._valid_1cwq0_37::placeholder {
   height: 100%;
   width: var(--xmlui-accentWidth-Blockquote);
 }
-._markdownContent_1q19g_13 ._blockquoteContainer_1q19g_61 {
+._markdownContent_1vc6z_13 ._blockquoteContainer_1vc6z_61 {
   border-left: var(--xmlui-borderLeft-Blockquote, var(--xmlui-borderHorizontal-Blockquote, var(--xmlui-border-Blockquote)));
   border-right: var(--xmlui-borderRight-Blockquote, var(--xmlui-borderHorizontal-Blockquote, var(--xmlui-border-Blockquote)));
   border-top: var(--xmlui-borderTop-Blockquote, var(--xmlui-borderVertical-Blockquote, var(--xmlui-border-Blockquote)));
@@ -8210,7 +8287,7 @@ button._selectTrigger_1cwq0_46._valid_1cwq0_37::placeholder {
   padding-top: var(--xmlui-paddingTop-Blockquote, var(--xmlui-paddingVertical-Blockquote, var(--xmlui-padding-Blockquote)));
   padding-bottom: var(--xmlui-paddingBottom-Blockquote, var(--xmlui-paddingVertical-Blockquote, var(--xmlui-padding-Blockquote)));
 }
-._markdownContent_1q19g_13 ._admonitionBlockquote_1q19g_89 {
+._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89 {
   margin-top: var(--xmlui-marginTop-Admonition);
   margin-bottom: var(--xmlui-marginBottom-Admonition);
   background-color: var(--xmlui-backgroundColor-Admonition);
@@ -8242,46 +8319,65 @@ button._selectTrigger_1cwq0_46._valid_1cwq0_37::placeholder {
   padding-top: var(--xmlui-paddingTop-Admonition, var(--xmlui-paddingVertical-Admonition, var(--xmlui-padding-Admonition)));
   padding-bottom: var(--xmlui-paddingBottom-Admonition, var(--xmlui-paddingVertical-Admonition, var(--xmlui-padding-Admonition)));
 }
-._markdownContent_1q19g_13 ._admonitionContainer_1q19g_121 {
+._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89._info_1vc6z_121 {
+  background-color: var(--xmlui-backgroundColor-Admonition-info);
+  border-color: var(--xmlui-borderColor-Admonition-info);
+}
+._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89._warning_1vc6z_125 {
+  background-color: var(--xmlui-backgroundColor-Admonition-warning);
+  border-color: var(--xmlui-borderColor-Admonition-warning);
+}
+._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89._danger_1vc6z_129 {
+  background-color: var(--xmlui-backgroundColor-Admonition-danger);
+  border-color: var(--xmlui-borderColor-Admonition-danger);
+}
+._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89._note_1vc6z_133 {
+  background-color: var(--xmlui-backgroundColor-Admonition-note);
+  border-color: var(--xmlui-borderColor-Admonition-note);
+}
+._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89._tip_1vc6z_137 {
+  background-color: var(--xmlui-backgroundColor-Admonition-tip);
+  border-color: var(--xmlui-borderColor-Admonition-tip);
+}
+._markdownContent_1vc6z_13 ._admonitionContainer_1vc6z_141 {
   padding: 0.5rem;
   display: flex;
   align-items: flex-start;
 }
-._markdownContent_1q19g_13 ._admonitionContent_1q19g_126 {
-  margin-left: var(--xmlui-marginLeft-Admonition-content);
-}
-._markdownContent_1q19g_13 ._admonitionIcon_1q19g_129 {
+._markdownContent_1vc6z_13 ._admonitionIcon_1vc6z_146 {
   font-size: var(--xmlui-iconSize-Admonition);
   line-height: 1;
 }
-._markdownContent_1q19g_13 ._admonitionContent_1q19g_126 {
+._markdownContent_1vc6z_13 ._admonitionContent_1vc6z_150 {
+  margin-left: var(--xmlui-marginLeft-Admonition-content);
   flex: 1;
   min-width: 0;
 }
-._markdownContent_1q19g_13 ._admonitionBlockquote_1q19g_89 ._admonitionContent_1q19g_126 [class*=text_][class*=markdown_] {
+._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89 ._admonitionContent_1vc6z_150 [class*=text_][class*=markdown_],
+._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89 ._admonitionContent_1vc6z_150 ul, ._markdownContent_1vc6z_13 ._admonitionBlockquote_1vc6z_89 ._admonitionContent_1vc6z_150 ol {
   margin-top: 0;
   margin-bottom: 0;
 }
-._markdownContent_1q19g_13 ._horizontalRule_1q19g_141 {
+._markdownContent_1vc6z_13 ._horizontalRule_1vc6z_160 {
   border-top-color: var(--xmlui-borderColor-HorizontalRule);
   border-top-style: var(--xmlui-borderStyle-HorizontalRule);
   border-top-width: var(--xmlui-borderWidth-HorizontalRule);
 }
-._markdownContent_1q19g_13 li:has(> input[type=checkbox]),
-._markdownContent_1q19g_13 li:has(> input[type=checkbox]) {
+._markdownContent_1vc6z_13 li:has(> input[type=checkbox]),
+._markdownContent_1vc6z_13 li:has(> input[type=checkbox]) {
   display: flex;
   align-items: flex-start;
 }
-._markdownContent_1q19g_13 li:has(> input[type=checkbox]) > input[type=checkbox],
-._markdownContent_1q19g_13 li:has(> input[type=checkbox]) > input[type=checkbox] {
+._markdownContent_1vc6z_13 li:has(> input[type=checkbox]) > input[type=checkbox],
+._markdownContent_1vc6z_13 li:has(> input[type=checkbox]) > input[type=checkbox] {
   margin-right: 8px;
   margin-top: 4px;
   flex-shrink: 0;
 }
-._markdownContent_1q19g_13 > *:first-child {
+._markdownContent_1vc6z_13 > *:first-child {
   margin-top: 0;
 }
-._markdownContent_1q19g_13 > *:last-child {
+._markdownContent_1vc6z_13 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -8919,7 +9015,7 @@ li .htmlOl {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._codeBlock_y1mbl_13 {
+._codeBlock_169sr_13 {
   border-left: var(--xmlui-borderLeft-CodeBlock, var(--xmlui-borderHorizontal-CodeBlock, var(--xmlui-border-CodeBlock)));
   border-right: var(--xmlui-borderRight-CodeBlock, var(--xmlui-borderHorizontal-CodeBlock, var(--xmlui-border-CodeBlock)));
   border-top: var(--xmlui-borderTop-CodeBlock, var(--xmlui-borderVertical-CodeBlock, var(--xmlui-border-CodeBlock)));
@@ -8936,7 +9032,6 @@ li .htmlOl {
   border-right-color: var(--xmlui-borderRightColor-CodeBlock, var(--xmlui-borderHorizontalColor-CodeBlock, var(--xmlui-borderColor-CodeBlock)));
   border-top-color: var(--xmlui-borderTopColor-CodeBlock, var(--xmlui-borderVerticalColor-CodeBlock, var(--xmlui-borderColor-CodeBlock)));
   border-bottom-color: var(--xmlui-borderBottomColor-CodeBlock, var(--xmlui-borderVerticalColor-CodeBlock, var(--xmlui-borderColor-CodeBlock)));
-  border-radius: var(--xmlui-borderRadius-CodeBlock);
   border-start-start-radius: var(--xmlui-borderStartStartRadius-CodeBlock, var(--xmlui-borderRadius-CodeBlock));
   border-start-end-radius: var(--xmlui-borderStartEndRadius-CodeBlock, var(--xmlui-borderRadius-CodeBlock));
   border-end-start-radius: var(--xmlui-borderEndStartRadius-CodeBlock, var(--xmlui-borderRadius-CodeBlock));
@@ -8951,18 +9046,20 @@ li .htmlOl {
   background-color: var(--xmlui-backgroundColor-CodeBlock);
 }
 
-._codeBlockHeader_y1mbl_45 {
+._codeBlockHeader_169sr_44 {
   padding: var(--xmlui-space-1);
   padding-left: var(--xmlui-space-3);
   background-color: var(--xmlui-backgroundColor-CodeBlock-header);
   border-bottom: var(--xmlui-color-CodeBlock-headerSeparator) solid 2px;
   font-size: var(--xmlui-fontSize-small);
+  border-start-start-radius: var(--xmlui-borderStartStartRadius-CodeBlock, var(--xmlui-borderRadius-CodeBlock));
+  border-start-end-radius: var(--xmlui-borderStartEndRadius-CodeBlock, var(--xmlui-borderRadius-CodeBlock));
 }
 
-._codeBlockCopyWrapper_y1mbl_53 {
+._codeBlockCopyWrapper_169sr_54 {
   position: relative;
 }
-._codeBlockCopyWrapper_y1mbl_53 ._codeBlockCopyButton_y1mbl_56 {
+._codeBlockCopyWrapper_169sr_54 ._codeBlockCopyButton_169sr_57 {
   position: absolute;
   top: var(--xmlui-space-1_5);
   right: var(--xmlui-space-1_5);
@@ -8970,8 +9067,15 @@ li .htmlOl {
   display: none;
   background-color: var(--xmlui-backgroundColor-CodeBlock);
 }
-._codeBlockCopyWrapper_y1mbl_53:hover ._codeBlockCopyButton_y1mbl_56 {
+._codeBlockCopyWrapper_169sr_54:hover ._codeBlockCopyButton_169sr_57 {
   display: block;
+}
+
+.codeBlockHighlightRow {
+  background-color: var(--xmlui-backgroundColor-CodeBlock-highlightRow);
+}
+.codeBlockHighlightString {
+  background-color: var(--xmlui-backgroundColor-CodeBlock-highlightString);
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *