xmlui 0.9.2 → 0.9.4

package/dist/style.css

@@ -721,17 +721,46 @@
  * 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_1x9lo_13 {
+._text_uu1r2_13 {
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0;
   padding: 0;
   min-height: fit-content;
 }
-._text_1x9lo_13 ._text_1x9lo_13 {
+._text_uu1r2_13._markdown_uu1r2_20 {
+  font-family: var(--xmlui-fontFamily-Text-markdown);
+  font-size: var(--xmlui-fontSize-Text-markdown);
+  font-weight: var(--xmlui-fontWeight-Text-markdown);
+  font-style: var(--xmlui-fontStyle-Text-markdown);
+  font-stretch: var(--xmlui-fontStretch-Text-markdown);
+  text-decoration-line: var(--xmlui-textDecorationLine-Text-markdown);
+  text-decoration-color: var(--xmlui-textDecorationColor-Text-markdown);
+  text-decoration-style: var(--xmlui-textDecorationStyle-Text-markdown);
+  text-decoration-thickness: var(--xmlui-textDecorationThickness-Text-markdown);
+  text-underline-offset: var(--xmlui-textUnderlineOffset-Text-markdown);
+  line-height: var(--xmlui-lineHeight-Text-markdown);
+  color: var(--xmlui-textColor-Text-markdown);
+  background-color: var(--xmlui-backgroundColor-Text-markdown);
+  border-radius: var(--xmlui-borderRadius-Text-markdown);
+  border-color: var(--xmlui-borderColor-Text-markdown);
+  border-width: var(--xmlui-borderWidth-Text-markdown);
+  border-style: var(--xmlui-borderStyle-Text-markdown);
+  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)));
+  padding-top: var(--xmlui-paddingTop-Text-markdown, var(--xmlui-paddingVertical-Text-markdown, var(--xmlui-padding-Text-markdown)));
+  padding-bottom: var(--xmlui-paddingBottom-Text-markdown, var(--xmlui-paddingVertical-Text-markdown, var(--xmlui-padding-Text-markdown)));
+  margin-top: var(--xmlui-marginTop-Text-markdown);
+  margin-bottom: var(--xmlui-marginBottom-Text-markdown);
+  text-transform: var(--xmlui-textTransform-Text-markdown);
+  vertical-align: var(--xmlui-verticalAlign-Text-markdown);
+  letter-spacing: var(--xmlui-letterSpacing-Text-markdown);
+}
+._text_uu1r2_13 ._text_uu1r2_13 {
   display: inline;
 }
-._text_1x9lo_13._abbr_1x9lo_23 {
+._text_uu1r2_13._abbr_uu1r2_52 {
   font-family: var(--xmlui-fontFamily-Text-abbr);
   font-size: var(--xmlui-fontSize-Text-abbr);
   font-weight: var(--xmlui-fontWeight-Text-abbr);
@@ -760,7 +789,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-abbr);
   letter-spacing: var(--xmlui-letterSpacing-Text-abbr);
 }
-._text_1x9lo_13._cite_1x9lo_52 {
+._text_uu1r2_13._cite_uu1r2_81 {
   font-family: var(--xmlui-fontFamily-Text-cite);
   font-size: var(--xmlui-fontSize-Text-cite);
   font-weight: var(--xmlui-fontWeight-Text-cite);
@@ -789,10 +818,10 @@
   vertical-align: var(--xmlui-verticalAlign-Text-cite);
   letter-spacing: var(--xmlui-letterSpacing-Text-cite);
 }
-._text_1x9lo_13 ._text_1x9lo_13._codefence_1x9lo_81 {
+._text_uu1r2_13 ._text_uu1r2_13._codefence_uu1r2_110 {
   display: block;
 }
-:not(._text_1x9lo_13._codefence_1x9lo_81) > ._text_1x9lo_13._code_1x9lo_81 {
+:not(._text_uu1r2_13._codefence_uu1r2_110) > ._text_uu1r2_13._code_uu1r2_110 {
   font-family: var(--xmlui-fontFamily-Text-code);
   font-size: var(--xmlui-fontSize-Text-code);
   font-weight: var(--xmlui-fontWeight-Text-code);
@@ -821,7 +850,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-code);
   letter-spacing: var(--xmlui-letterSpacing-Text-code);
 }
-._text_1x9lo_13._codefence_1x9lo_81:has(> ._text_1x9lo_13._code_1x9lo_81) {
+._text_uu1r2_13._codefence_uu1r2_110:has(> ._text_uu1r2_13._code_uu1r2_110) {
   font-family: var(--xmlui-fontFamily-Text-codefence);
   font-size: var(--xmlui-fontSize-Text-codefence);
   font-weight: var(--xmlui-fontWeight-Text-codefence);
@@ -852,7 +881,7 @@
   overflow-x: auto;
   text-overflow: initial;
 }
-._text_1x9lo_13._deleted_1x9lo_144 {
+._text_uu1r2_13._deleted_uu1r2_173 {
   font-family: var(--xmlui-fontFamily-Text-deleted);
   font-size: var(--xmlui-fontSize-Text-deleted);
   font-weight: var(--xmlui-fontWeight-Text-deleted);
@@ -881,7 +910,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-deleted);
   letter-spacing: var(--xmlui-letterSpacing-Text-deleted);
 }
-._text_1x9lo_13._deleted_1x9lo_144::before, ._text_1x9lo_13._deleted_1x9lo_144::after {
+._text_uu1r2_13._deleted_uu1r2_173::before, ._text_uu1r2_13._deleted_uu1r2_173::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -890,13 +919,13 @@
   white-space: nowrap;
   width: 1px;
 }
-._text_1x9lo_13._deleted_1x9lo_144::before {
+._text_uu1r2_13._deleted_uu1r2_173::before {
   content: " [deletion start] ";
 }
-._text_1x9lo_13._deleted_1x9lo_144::after {
+._text_uu1r2_13._deleted_uu1r2_173::after {
   content: " [deletion end] ";
 }
-._text_1x9lo_13._inserted_1x9lo_188 {
+._text_uu1r2_13._inserted_uu1r2_217 {
   font-family: var(--xmlui-fontFamily-Text-inserted);
   font-size: var(--xmlui-fontSize-Text-inserted);
   font-weight: var(--xmlui-fontWeight-Text-inserted);
@@ -925,7 +954,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-inserted);
   letter-spacing: var(--xmlui-letterSpacing-Text-inserted);
 }
-._text_1x9lo_13._inserted_1x9lo_188::before, ._text_1x9lo_13._inserted_1x9lo_188::after {
+._text_uu1r2_13._inserted_uu1r2_217::before, ._text_uu1r2_13._inserted_uu1r2_217::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -934,13 +963,13 @@
   white-space: nowrap;
   width: 1px;
 }
-._text_1x9lo_13._inserted_1x9lo_188::before {
+._text_uu1r2_13._inserted_uu1r2_217::before {
   content: " [insertion start] ";
 }
-._text_1x9lo_13._inserted_1x9lo_188::after {
+._text_uu1r2_13._inserted_uu1r2_217::after {
   content: " [insertion end] ";
 }
-._text_1x9lo_13._keyboard_1x9lo_232 {
+._text_uu1r2_13._keyboard_uu1r2_261 {
   font-family: var(--xmlui-fontFamily-Text-keyboard);
   font-size: var(--xmlui-fontSize-Text-keyboard);
   font-weight: var(--xmlui-fontWeight-Text-keyboard);
@@ -969,7 +998,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-keyboard);
   letter-spacing: var(--xmlui-letterSpacing-Text-keyboard);
 }
-._text_1x9lo_13._marked_1x9lo_261 {
+._text_uu1r2_13._marked_uu1r2_290 {
   font-family: var(--xmlui-fontFamily-Text-marked);
   font-size: var(--xmlui-fontSize-Text-marked);
   font-weight: var(--xmlui-fontWeight-Text-marked);
@@ -998,7 +1027,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-marked);
   letter-spacing: var(--xmlui-letterSpacing-Text-marked);
 }
-._text_1x9lo_13._marked_1x9lo_261::before, ._text_1x9lo_13._marked_1x9lo_261::after {
+._text_uu1r2_13._marked_uu1r2_290::before, ._text_uu1r2_13._marked_uu1r2_290::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -1007,13 +1036,13 @@
   white-space: nowrap;
   width: 1px;
 }
-._text_1x9lo_13._marked_1x9lo_261::before {
+._text_uu1r2_13._marked_uu1r2_290::before {
   content: " [highlight start] ";
 }
-._text_1x9lo_13._marked_1x9lo_261::after {
+._text_uu1r2_13._marked_uu1r2_290::after {
   content: " [highlight end] ";
 }
-._text_1x9lo_13._mono_1x9lo_305 {
+._text_uu1r2_13._mono_uu1r2_334 {
   font-family: var(--xmlui-fontFamily-Text-mono);
   font-size: var(--xmlui-fontSize-Text-mono);
   font-weight: var(--xmlui-fontWeight-Text-mono);
@@ -1042,7 +1071,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-mono);
   letter-spacing: var(--xmlui-letterSpacing-Text-mono);
 }
-._text_1x9lo_13._sample_1x9lo_334 {
+._text_uu1r2_13._sample_uu1r2_363 {
   font-family: var(--xmlui-fontFamily-Text-sample);
   font-size: var(--xmlui-fontSize-Text-sample);
   font-weight: var(--xmlui-fontWeight-Text-sample);
@@ -1071,7 +1100,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-sample);
   letter-spacing: var(--xmlui-letterSpacing-Text-sample);
 }
-._text_1x9lo_13._sup_1x9lo_363 {
+._text_uu1r2_13._sup_uu1r2_392 {
   font-family: var(--xmlui-fontFamily-Text-sup);
   font-size: var(--xmlui-fontSize-Text-sup);
   font-weight: var(--xmlui-fontWeight-Text-sup);
@@ -1100,7 +1129,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-sup);
   letter-spacing: var(--xmlui-letterSpacing-Text-sup);
 }
-._text_1x9lo_13._sub_1x9lo_392 {
+._text_uu1r2_13._sub_uu1r2_421 {
   font-family: var(--xmlui-fontFamily-Text-sub);
   font-size: var(--xmlui-fontSize-Text-sub);
   font-weight: var(--xmlui-fontWeight-Text-sub);
@@ -1129,7 +1158,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-sub);
   letter-spacing: var(--xmlui-letterSpacing-Text-sub);
 }
-._text_1x9lo_13._var_1x9lo_421 {
+._text_uu1r2_13._var_uu1r2_450 {
   font-family: var(--xmlui-fontFamily-Text-var);
   font-size: var(--xmlui-fontSize-Text-var);
   font-weight: var(--xmlui-fontWeight-Text-var);
@@ -1158,7 +1187,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-var);
   letter-spacing: var(--xmlui-letterSpacing-Text-var);
 }
-._text_1x9lo_13._title_1x9lo_450 {
+._text_uu1r2_13._title_uu1r2_479 {
   font-family: var(--xmlui-fontFamily-Text-title);
   font-size: var(--xmlui-fontSize-Text-title);
   font-weight: var(--xmlui-fontWeight-Text-title);
@@ -1187,7 +1216,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-title);
   letter-spacing: var(--xmlui-letterSpacing-Text-title);
 }
-._text_1x9lo_13._subtitle_1x9lo_479 {
+._text_uu1r2_13._subtitle_uu1r2_508 {
   font-family: var(--xmlui-fontFamily-Text-subtitle);
   font-size: var(--xmlui-fontSize-Text-subtitle);
   font-weight: var(--xmlui-fontWeight-Text-subtitle);
@@ -1216,7 +1245,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-subtitle);
   letter-spacing: var(--xmlui-letterSpacing-Text-subtitle);
 }
-._text_1x9lo_13._small_1x9lo_508 {
+._text_uu1r2_13._small_uu1r2_537 {
   font-family: var(--xmlui-fontFamily-Text-small);
   font-size: var(--xmlui-fontSize-Text-small);
   font-weight: var(--xmlui-fontWeight-Text-small);
@@ -1245,7 +1274,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-small);
   letter-spacing: var(--xmlui-letterSpacing-Text-small);
 }
-._text_1x9lo_13._caption_1x9lo_537 {
+._text_uu1r2_13._caption_uu1r2_566 {
   font-family: var(--xmlui-fontFamily-Text-caption);
   font-size: var(--xmlui-fontSize-Text-caption);
   font-weight: var(--xmlui-fontWeight-Text-caption);
@@ -1274,7 +1303,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-caption);
   letter-spacing: var(--xmlui-letterSpacing-Text-caption);
 }
-._text_1x9lo_13._placeholder_1x9lo_566 {
+._text_uu1r2_13._placeholder_uu1r2_595 {
   font-family: var(--xmlui-fontFamily-Text-placeholder);
   font-size: var(--xmlui-fontSize-Text-placeholder);
   font-weight: var(--xmlui-fontWeight-Text-placeholder);
@@ -1303,7 +1332,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-placeholder);
   letter-spacing: var(--xmlui-letterSpacing-Text-placeholder);
 }
-._text_1x9lo_13._paragraph_1x9lo_595 {
+._text_uu1r2_13._paragraph_uu1r2_624 {
   font-family: var(--xmlui-fontFamily-Text-paragraph);
   font-size: var(--xmlui-fontSize-Text-paragraph);
   font-weight: var(--xmlui-fontWeight-Text-paragraph);
@@ -1332,7 +1361,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-paragraph);
   letter-spacing: var(--xmlui-letterSpacing-Text-paragraph);
 }
-._text_1x9lo_13._subheading_1x9lo_624 {
+._text_uu1r2_13._subheading_uu1r2_653 {
   font-family: var(--xmlui-fontFamily-Text-subheading);
   font-size: var(--xmlui-fontSize-Text-subheading);
   font-weight: var(--xmlui-fontWeight-Text-subheading);
@@ -1361,7 +1390,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-subheading);
   letter-spacing: var(--xmlui-letterSpacing-Text-subheading);
 }
-._text_1x9lo_13._tableheading_1x9lo_653 {
+._text_uu1r2_13._tableheading_uu1r2_682 {
   font-family: var(--xmlui-fontFamily-Text-tableheading);
   font-size: var(--xmlui-fontSize-Text-tableheading);
   font-weight: var(--xmlui-fontWeight-Text-tableheading);
@@ -1390,7 +1419,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-tableheading);
   letter-spacing: var(--xmlui-letterSpacing-Text-tableheading);
 }
-._text_1x9lo_13._secondary_1x9lo_682 {
+._text_uu1r2_13._secondary_uu1r2_711 {
   font-family: var(--xmlui-fontFamily-Text-secondary);
   font-size: var(--xmlui-fontSize-Text-secondary);
   font-weight: var(--xmlui-fontWeight-Text-secondary);
@@ -1419,7 +1448,7 @@
   vertical-align: var(--xmlui-verticalAlign-Text-secondary);
   letter-spacing: var(--xmlui-letterSpacing-Text-secondary);
 }
-._text_1x9lo_13._strong_1x9lo_711 {
+._text_uu1r2_13._strong_uu1r2_740 {
   font-weight: var(--xmlui-fontWeight-bold);
 }
 
@@ -1427,18 +1456,18 @@
 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_1x9lo_719 {
+._truncateOverflow_uu1r2_748 {
   overflow: hidden;
   overflow-wrap: break-word;
   white-space: nowrap;
   max-width: 100%;
 }
 
-._preserveLinebreaks_1x9lo_726 {
+._preserveLinebreaks_uu1r2_755 {
   white-space: pre-wrap;
 }
 
-._noEllipsis_1x9lo_730 {
+._noEllipsis_uu1r2_759 {
   text-overflow: clip;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -5146,21 +5175,29 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_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.
  */
-._sliderRoot_1irri_13 {
+._sliderContainer_d4hsx_13 {
+  width: 100%;
+  position: relative;
+  padding: var(--xmlui-space-2) 0;
+}
+
+._sliderRoot_d4hsx_19 {
   position: relative;
   display: flex;
   width: 100%;
   touch-action: none;
   user-select: none;
   align-items: center;
+  height: 20px;
 }
 
-._sliderTrack_1irri_22 {
+._sliderTrack_d4hsx_29 {
   position: relative;
   height: 8px;
   width: 100%;
   flex-grow: 1;
   overflow: hidden;
+  border-radius: 9999px;
   background-color: var(--xmlui-backgroundColor-track-Slider);
   border-radius: var(--xmlui-borderRadius-Slider-default);
   border-color: var(--xmlui-borderColor-Slider-default);
@@ -5168,73 +5205,74 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   border-style: var(--xmlui-borderStyle-Slider-default);
   box-shadow: var(--xmlui-boxShadow-Slider-default);
 }
-._sliderTrack_1irri_22:hover {
+._sliderTrack_d4hsx_29:hover {
   border-color: var(--xmlui-borderColor-Slider-default--hover);
   box-shadow: var(--xmlui-boxShadow-Slider-default--hover);
 }
-._sliderTrack_1irri_22:focus-within {
+._sliderTrack_d4hsx_29:focus-within {
   border-color: var(--xmlui-borderColor-Slider-default--focus);
   box-shadow: var(--xmlui-boxShadow-Slider-default--focus);
 }
-._sliderTrack_1irri_22._error_1irri_43 {
+._sliderTrack_d4hsx_29._error_d4hsx_51 {
   border-radius: var(--xmlui-borderRadius-Slider-error);
   border-color: var(--xmlui-borderColor-Slider-error);
   border-width: var(--xmlui-borderWidth-Slider-error);
   border-style: var(--xmlui-borderStyle-Slider-error);
   box-shadow: var(--xmlui-boxShadow-Slider-error);
 }
-._sliderTrack_1irri_22._error_1irri_43:hover {
+._sliderTrack_d4hsx_29._error_d4hsx_51:hover {
   border-color: var(--xmlui-borderColor-Slider-error--hover);
   box-shadow: var(--xmlui-boxShadow-Slider-error--hover);
 }
-._sliderTrack_1irri_22._error_1irri_43:focus-within {
+._sliderTrack_d4hsx_29._error_d4hsx_51:focus-within {
   border-color: var(--xmlui-borderColor-Slider-error--focus);
   box-shadow: var(--xmlui-boxShadow-Slider-error--focus);
 }
-._sliderTrack_1irri_22._warning_1irri_58 {
+._sliderTrack_d4hsx_29._warning_d4hsx_66 {
   border-radius: var(--xmlui-borderRadius-Slider-warning);
   border-color: var(--xmlui-borderColor-Slider-warning);
   border-width: var(--xmlui-borderWidth-Slider-warning);
   border-style: var(--xmlui-borderStyle-Slider-warning);
   box-shadow: var(--xmlui-boxShadow-Slider-warning);
 }
-._sliderTrack_1irri_22._warning_1irri_58:hover {
+._sliderTrack_d4hsx_29._warning_d4hsx_66:hover {
   border-color: var(--xmlui-borderColor-Slider-warning--hover);
   box-shadow: var(--xmlui-boxShadow-Slider-warning--hover);
 }
-._sliderTrack_1irri_22._warning_1irri_58:focus-within {
+._sliderTrack_d4hsx_29._warning_d4hsx_66:focus-within {
   border-color: var(--xmlui-borderColor-Slider-warning--focus);
   box-shadow: var(--xmlui-boxShadow-Slider-warning--focus);
 }
-._sliderTrack_1irri_22._valid_1irri_73 {
+._sliderTrack_d4hsx_29._valid_d4hsx_81 {
   border-radius: var(--xmlui-borderRadius-Slider-success);
   border-color: var(--xmlui-borderColor-Slider-success);
   border-width: var(--xmlui-borderWidth-Slider-success);
   border-style: var(--xmlui-borderStyle-Slider-success);
   box-shadow: var(--xmlui-boxShadow-Slider-success);
 }
-._sliderTrack_1irri_22._valid_1irri_73:hover {
+._sliderTrack_d4hsx_29._valid_d4hsx_81:hover {
   border-color: var(--xmlui-borderColor-Slider-success--hover);
   box-shadow: var(--xmlui-boxShadow-Slider-success--hover);
 }
-._sliderTrack_1irri_22._valid_1irri_73:focus-within {
+._sliderTrack_d4hsx_29._valid_d4hsx_81:focus-within {
   border-color: var(--xmlui-borderColor-Slider-success--focus);
   box-shadow: var(--xmlui-boxShadow-Slider-success--focus);
 }
-._sliderTrack_1irri_22[data-disabled] {
+._sliderTrack_d4hsx_29._disabled_d4hsx_96, ._sliderTrack_d4hsx_29[data-disabled] {
   background-color: var(--xmlui-backgroundColor-track-Slider--disabled);
 }
 
-._sliderRange_1irri_92 {
+._sliderRange_d4hsx_100 {
   position: absolute;
   height: 100%;
   background-color: var(--xmlui-backgroundColor-range-Slider);
+  border-radius: 9999px;
 }
-._sliderRange_1irri_92[data-disabled] {
+._sliderRange_d4hsx_100._disabled_d4hsx_96, ._sliderRange_d4hsx_100[data-disabled] {
   background-color: var(--xmlui-backgroundColor-range-Slider--disabled);
 }
 
-._sliderThumb_1irri_101 {
+._sliderThumb_d4hsx_110 {
   display: block;
   width: 20px;
   height: 20px;
@@ -5242,13 +5280,36 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   border: var(--xmlui-borderWidth-thumb-Slider) var(--xmlui-borderStyle-thumb-Slider) var(--xmlui-borderColor-thumb-Slider);
   background-color: var(--xmlui-backgroundColor-thumb-Slider);
   box-shadow: var(--xmlui-boxShadow-thumb-Slider);
+  position: relative;
   transition: background-color 0.2s;
   outline: none;
 }
-
-._sliderThumb_1irri_101:disabled {
+._sliderThumb_d4hsx_110._disabled_d4hsx_96, ._sliderThumb_d4hsx_110[data-disabled] {
   pointer-events: none;
   opacity: 0.5;
+}
+
+/* States */
+._disabled_d4hsx_96 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+._readOnly_d4hsx_133 {
+  opacity: 0.7;
+  cursor: default;
+}
+
+._error_d4hsx_51 {
+  border-color: var(--xmlui-borderColor-Slider-error);
+}
+
+._warning_d4hsx_66 {
+  border-color: var(--xmlui-borderColor-Slider-warning);
+}
+
+._valid_d4hsx_81 {
+  border-color: var(--xmlui-borderColor-Slider-success);
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *
@@ -5469,98 +5530,94 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_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_1y6tk_13 h1, ._markdownContent_1y6tk_13 h2, ._markdownContent_1y6tk_13 h3, ._markdownContent_1y6tk_13 h4, ._markdownContent_1y6tk_13 h5, ._markdownContent_1y6tk_13 h6, ._markdownContent_1y6tk_13 p, ._markdownContent_1y6tk_13 ul, ._markdownContent_1y6tk_13 ol, ._markdownContent_1y6tk_13 table, ._markdownContent_1y6tk_13 blockquote, ._markdownContent_1y6tk_13 hr {
-  margin-top: 1em;
-  margin-bottom: 0.5;
-}
-._markdownContent_1y6tk_13 > *:first-child {
-  margin-top: 0;
-}
-._markdownContent_1y6tk_13 > *:last-child {
-  margin-bottom: 0;
-}
-._markdownContent_1y6tk_13 hr {
-  border: 0;
-  height: 1px;
-  background-color: #ddd;
-  margin: 1.5em 0;
-}
-
-._horizontalRule_1y6tk_30 {
-  border: var(--xmlui-borderWidth-HorizontalRule) var(--xmlui-borderStyle-HorizontalRule) var(--xmlui-borderColor-HorizontalRule);
-}
-
-._blockquote_1y6tk_34 {
+._markdownContent_1ldtu_13 ._blockquote_1ldtu_13 {
   position: relative;
+  margin-top: var(--xmlui-marginTop-Blockquote);
+  margin-bottom: var(--xmlui-marginBottom-Blockquote);
+  background-color: var(--xmlui-backgroundColor-Admonition);
   border-radius: var(--xmlui-borderRadius-Blockquote);
-  background-color: var(--xmlui-backgroundColor-Blockquote);
-  box-shadow: var(--xmlui-boxShadow-Blockquote);
-  padding: var(--xmlui-padding-Blockquote);
-  margin-top: var(--xmlui-margin-Blockquote);
-  margin-bottom: var(--xmlui-margin-Blockquote);
+  padding-left: var(--xmlui-paddingLeft-Blockquote);
 }
-._blockquote_1y6tk_34::before {
+._markdownContent_1ldtu_13 ._blockquote_1ldtu_13::before {
+  background-color: var(--xmlui-accentColor-Blockquote);
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   content: "";
   height: 100%;
-  width: 2px;
-  background-color: var(--xmlui-accent-Blockquote);
+  width: var(--xmlui-accentWidth-Blockquote);
 }
-
-._admonitionBlockquote_1y6tk_54 {
-  position: relative;
-  border-radius: var(--xmlui-borderRadius-Blockquote);
+._markdownContent_1ldtu_13 ._blockquoteContainer_1ldtu_31 {
+  padding: 0.5rem;
+}
+._markdownContent_1ldtu_13 ._admonitionBlockquote_1ldtu_34 {
+  margin-top: var(--xmlui-marginTop-Admonition);
+  margin-bottom: var(--xmlui-marginBottom-Admonition);
   background-color: var(--xmlui-backgroundColor-Admonition);
-  box-shadow: var(--xmlui-boxShadow-Blockquote);
-  padding: var(--xmlui-padding-Blockquote);
-  margin: var(--xmlui-margin-Blockquote);
-  color: var(--xmlui-textColor-Admonition);
+  border-radius: var(--xmlui-borderRadius-Admonition);
 }
-
-._admonitionContainer_1y6tk_64 {
+._markdownContent_1ldtu_13 ._admonitionContainer_1ldtu_40 {
+  padding: 0.5rem;
   display: flex;
   align-items: flex-start;
-  gap: 12px;
 }
-
-._admonitionIcon_1y6tk_70 {
-  font-size: var(--xmlui-size-icon-Admonition);
-  padding-top: 0;
-  flex-shrink: 0;
+._markdownContent_1ldtu_13 ._admonitionContent_1ldtu_45 {
+  margin-left: var(--xmlui-marginLeft-Admonition-content);
 }
-
-._admonitionContent_1y6tk_76 {
+._markdownContent_1ldtu_13 ._admonitionIcon_1ldtu_48 {
+  font-size: var(--xmlui-iconSize-Admonition);
+  line-height: 1;
+}
+._markdownContent_1ldtu_13 ._admonitionContent_1ldtu_45 {
   flex: 1;
   min-width: 0;
 }
+._markdownContent_1ldtu_13 ._admonitionBlockquote_1ldtu_34 ._admonitionContent_1ldtu_45 [class*=text_][class*=markdown_] {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+._markdownContent_1ldtu_13 > *:first-child {
+  margin-top: 0;
+}
+._markdownContent_1ldtu_13 > *:last-child {
+  margin-bottom: 0;
+}
+
+/*
+
+$paddingLeft-UnorderedList: createThemeVar("paddingLeft-UnorderedList");
 
-._unorderedList_1y6tk_81 {
+// the basic <ul> and <ol> styles are the same in tabler.io too
+.unorderedList {
   list-style-type: revert;
   list-style-position: outside;
-  padding-left: var(--xmlui-paddingLeft-UnorderedList);
+  padding-left: $paddingLeft-UnorderedList;
 }
 
-._orderedList_1y6tk_87 {
+// --- OrderedList
+$paddingLeft-OrderedList: createThemeVar("paddingLeft-OrderedList");
+
+// the basic <ul> and <ol> styles are the same in tabler.io too
+.orderedList {
   list-style-type: revert;
   list-style-position: outside;
-  padding-left: var(--xmlui-paddingLeft-OrderedList);
+  padding-left: $paddingLeft-OrderedList;
 }
 
-._listItem_1y6tk_93 {
-  padding-left: var(--xmlui-paddingLeft-ListItem);
-}
+// --- ListItem
 
-._listItem_1y6tk_93::marker {
-  color: var(--xmlui-color-marker-ListItem);
+$paddingLeft-ListItem: createThemeVar("paddingLeft-ListItem");
+$color-marker-ListItem: createThemeVar("color-marker-ListItem");
+
+.listItem {
+  padding-left: $paddingLeft-ListItem;
 }
 
-._htmlHeading_1y6tk_101 {
-  margin-top: var(--xmlui-marginTop-HtmlHeading);
-  margin-bottom: var(--xmlui-marginBottom-HtmlHeading);
-}/*
+.listItem::marker {
+  color: $color-marker-ListItem;
+}
+*//*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *
  * We use a subset of these CSS variables in themes.
@@ -5572,7 +5629,7 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_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.
  */
-._htmlTable_1snis_13 {
+._htmlTable_1wzn5_13 {
   background-color: var(--xmlui-backgroundColor-HtmlTable);
   color: var(--xmlui-textColor-HtmlTable);
   font-family: var(--xmlui-fontFamily-HtmlTable);
@@ -5608,7 +5665,7 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   padding-bottom: var(--xmlui-paddingBottom-HtmlTable, var(--xmlui-paddingVertical-HtmlTable, var(--xmlui-padding-HtmlTable)));
 }
 
-._htmlThead_1snis_49 {
+._htmlThead_1wzn5_49 {
   background-color: var(--xmlui-backgroundColor-HtmlThead);
   color: var(--xmlui-textColor-HtmlThead);
   font-weight: var(--xmlui-fontWeight-HtmlThead);
@@ -5641,7 +5698,7 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   padding-bottom: var(--xmlui-paddingBottom-HtmlThead, var(--xmlui-paddingVertical-HtmlThead, var(--xmlui-padding-HtmlThead)));
 }
 
-._htmlTbody_1snis_82 {
+._htmlTbody_1wzn5_82 {
   background-color: var(--xmlui-backgroundColor-HtmlTbody);
   color: var(--xmlui-textColor-HtmlTbody);
   text-align: var(--xmlui-textAlign-HtmlTbody);
@@ -5649,12 +5706,12 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   text-transform: var(--xmlui-textTransform-HtmlTbody);
 }
 
-._htmlTfoot_1snis_90 {
+._htmlTfoot_1wzn5_90 {
   background-color: var(--xmlui-backgroundColor-HtmlTfoot);
   color: var(--xmlui-textColor-HtmlTfoot);
 }
 
-._htmlTh_1snis_49 {
+._htmlTh_1wzn5_49 {
   background-color: var(--xmlui-backgroundColor-HtmlTh);
   color: var(--xmlui-textColor-HtmlTh);
   font-weight: var(--xmlui-fontWeight-HtmlTh);
@@ -5685,11 +5742,11 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   padding-top: var(--xmlui-paddingTop-HtmlTh, var(--xmlui-paddingVertical-HtmlTh, var(--xmlui-padding-HtmlTh)));
   padding-bottom: var(--xmlui-paddingBottom-HtmlTh, var(--xmlui-paddingVertical-HtmlTh, var(--xmlui-padding-HtmlTh)));
 }
-._htmlTh_1snis_49:hover {
+._htmlTh_1wzn5_49:hover {
   background-color: var(--xmlui-backgroundColor-HtmlTh--hover);
 }
 
-._htmlTr_1snis_130 {
+._htmlTr_1wzn5_130 {
   background-color: var(--xmlui-backgroundColor-HtmlTr);
   color: var(--xmlui-textColor-HtmlTr);
   font-weight: var(--xmlui-fontWeight-HtmlTr);
@@ -5715,18 +5772,18 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   border-end-start-radius: var(--xmlui-borderEndStartRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr));
   border-end-end-radius: var(--xmlui-borderEndEndRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr));
 }
-._htmlTr_1snis_130:nth-child(even) {
+._htmlTr_1wzn5_130:nth-child(even) {
   background-color: var(--xmlui-backgroundColor-even-HtmlTr);
 }
-._htmlTr_1snis_130:hover {
+._htmlTr_1wzn5_130:hover {
   background-color: var(--xmlui-backgroundColor-HtmlTr--hover);
   color: var(--xmlui-textColor-HtmlTr--hover);
 }
-._htmlTr_1snis_130:hover:not(:has(:not(th))) {
+._htmlTr_1wzn5_130:hover:not(:has(:not(th))) {
   background-color: initial;
 }
 
-._htmlTd_1snis_167 {
+._htmlTd_1wzn5_167 {
   background-color: var(--xmlui-backgroundColor-HtmlTd);
   text-align: var(--xmlui-text-align-HtmlTd);
   vertical-align: var(--xmlui-verticalAlign-HtmlTd);
@@ -5759,37 +5816,52 @@ button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   padding-bottom: var(--xmlui-paddingBottom-HtmlTd, var(--xmlui-paddingVertical-HtmlTd, var(--xmlui-padding-HtmlTd)));
 }
 
-._htmlUl_1snis_200 {
+._htmlUl_1wzn5_200 {
   margin-top: var(--xmlui-marginTop-HtmlUl);
   margin-bottom: var(--xmlui-marginBottom-HtmlUl);
 }
 
-._htmlOl_1snis_205 {
+._htmlOl_1wzn5_205 {
   margin-top: var(--xmlui-marginTop-HtmlOl);
   margin-bottom: var(--xmlui-marginBottom-HtmlOl);
 }
 
-li ._htmlUl_1snis_200,
-li ._htmlOl_1snis_205 {
+li ._htmlUl_1wzn5_200,
+li ._htmlOl_1wzn5_205 {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-._htmlUl_1snis_200 li:has(> input[type=checkbox]),
-._htmlOl_1snis_205 li:has(> input[type=checkbox]) {
+._htmlUl_1wzn5_200 li:has(> input[type=checkbox]),
+._htmlOl_1wzn5_205 li:has(> input[type=checkbox]) {
   display: flex;
   align-items: flex-start;
 }
-._htmlUl_1snis_200 li:has(> input[type=checkbox]) > input[type=checkbox],
-._htmlOl_1snis_205 li:has(> input[type=checkbox]) > input[type=checkbox] {
+._htmlUl_1wzn5_200 li:has(> input[type=checkbox]) > input[type=checkbox],
+._htmlOl_1wzn5_205 li:has(> input[type=checkbox]) > input[type=checkbox] {
   margin-right: 8px;
   margin-top: 4px;
   flex-shrink: 0;
 }
 
-._htmlH1_1snis_228, ._htmlH2_1snis_228, ._htmlH3_1snis_228, ._htmlH4_1snis_228, ._htmlH5_1snis_228, ._htmlH6_1snis_228 {
+._htmlH1_1wzn5_228, ._htmlH2_1wzn5_228, ._htmlH3_1wzn5_228, ._htmlH4_1wzn5_228, ._htmlH5_1wzn5_228, ._htmlH6_1wzn5_228 {
   margin-top: var(--xmlui-marginTop-HtmlHeading);
   margin-bottom: var(--xmlui-marginBottom-HtmlHeading);
+}
+
+._htmlVideo_1wzn5_233 {
+  margin-top: var(--xmlui-marginTop-HtmlVideo);
+  margin-bottom: var(--xmlui-marginBottom-HtmlVideo);
+}
+
+._htmlDetails_1wzn5_238 {
+  margin-top: var(--xmlui-marginTop-HtmlDetails);
+  margin-bottom: var(--xmlui-marginBottom-HtmlDetails);
+}
+
+._htmlDetails_1wzn5_238 {
+  margin-top: var(--xmlui-marginTop-HtmlDetails);
+  margin-bottom: var(--xmlui-marginBottom-HtmlDetails);
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *