xmlui 0.9.2 → 0.9.3

package/dist/index.css

@@ -2276,17 +2276,46 @@ 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_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);
@@ -2315,7 +2344,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2344,10 +2373,10 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2376,7 +2405,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2407,7 +2436,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2436,7 +2465,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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;
@@ -2445,13 +2474,13 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2480,7 +2509,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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;
@@ -2489,13 +2518,13 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2524,7 +2553,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2553,7 +2582,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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;
@@ -2562,13 +2591,13 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2597,7 +2626,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2626,7 +2655,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2655,7 +2684,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2684,7 +2713,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2713,7 +2742,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2742,7 +2771,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2771,7 +2800,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2800,7 +2829,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2829,7 +2858,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2858,7 +2887,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2887,7 +2916,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2916,7 +2945,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2945,7 +2974,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
@@ -2974,7 +3003,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   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);
 }
 
@@ -2982,18 +3011,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_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.
@@ -6181,21 +6210,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);
@@ -6203,73 +6240,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;
@@ -6277,13 +6315,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.
  *
@@ -6525,98 +6586,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.
@@ -6628,7 +6685,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);
@@ -6664,7 +6721,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);
@@ -6697,7 +6754,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);
@@ -6705,12 +6762,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);
@@ -6741,11 +6798,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);
@@ -6771,18 +6828,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);
@@ -6815,37 +6872,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.
  *
@@ -7012,76 +7084,7 @@ li ._htmlOl_1snis_205 {
  * 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.
  */
-._innerWrapper_x6hwk_13 {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  padding: 12px;
-  --syntax-token-component: #cb5291;
-  --syntax-token-delimiter-angle: #66748E;
-  --syntax-token-attribute-name: #2d2d2d;
-  --syntax-token-equal-sign: #2d2d2d;
-  --syntax-token-string: #0074a9;
-  --syntax-token-script: #02A1A1;
-  --syntax-token-helper: #005AE1;
-  --syntax-token-comment: #4E4E4E;
-  --syntax-token-escape: #00B248;
-  --syntax-token-constant: #708C00;
-  --syntax-token-cdata: #079CF1;
-  --syntax-token-delimiter-curly: #000000;
-  --syntax-token-text: #4e5fb3;
-}
-._innerWrapper_x6hwk_13._dark_x6hwk_32 {
-  --syntax-token-component: #f472b6;
-  --syntax-token-delimiter-angle: #97A7C5;
-  --syntax-token-attribute-name: #cbd5e1;
-  --syntax-token-equal-sign: #cbd5e1;
-  --syntax-token-string: #7dd3fc;
-  --syntax-token-script: #78DBDB;
-  --syntax-token-helper: #80A6F8;
-  --syntax-token-comment: #CFCFCF;
-  --syntax-token-escape: #61F69D;
-  --syntax-token-constant: #BAF80A;
-  --syntax-token-cdata: #5CC1F9;
-  --syntax-token-delimiter-curly: #FFFFFF;
-  --syntax-token-text: #f5f5ff;
-}
-._innerWrapper_x6hwk_13 > .shiki {
-  background-color: transparent !important;
-}
-
-._wrapper_x6hwk_51 {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: auto;
-}
-
-._copyButton_x6hwk_58 {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  border: none;
-  padding: 4px;
-  border-radius: 5px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  transition: opacity 0.2s;
-}/*
- * 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.
- */
-/*
- * This function creates a CSS variable name by combining the prefix and the argument variable name
- */
-/*
- * 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_1f03i_13 {
+._wrapper_1buy3_13 {
   z-index: 9999;
   overflow: hidden;
   box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.4);
@@ -7092,32 +7095,32 @@ li ._htmlOl_1snis_205 {
   border: 1px solid var(--xmlui-borderColor);
 }
 
-._actions_1f03i_24 {
+._actions_1buy3_24 {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
 }
 
-._tabs_1f03i_30 {
+._tabs_1buy3_30 {
   display: flex;
   flex-direction: column;
   background-color: var(--xmlui-backgroundColor);
 }
 
-._tabItems_1f03i_36 {
+._tabItems_1buy3_36 {
   display: flex;
   flex-direction: row;
 }
 
-._sideButtons_1f03i_41 {
+._sideButtons_1buy3_41 {
   display: flex;
 }
 
-._sideButton_1f03i_41 {
+._sideButton_1buy3_41 {
   padding: 2px;
 }
 
-._menuItem_1f03i_49 {
+._menuItem_1buy3_49 {
   width: 240px;
   display: flex;
   justify-content: space-between;
@@ -7127,7 +7130,7 @@ li ._htmlOl_1snis_205 {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-._list_1f03i_59 {
+._list_1buy3_59 {
   padding: 0.2rem;
   display: flex;
   flex: 0 0 auto;
@@ -7137,18 +7140,19 @@ li ._htmlOl_1snis_205 {
   border-bottom: 1px solid var(--xmlui-borderColor);
 }
 
-._menu_1f03i_49 {
+._menu_1buy3_49 {
   position: relative;
   z-index: 9999;
   padding: var(--xmlui-space-1_5);
 }
 
-._content_1f03i_75 {
+._content_1buy3_75 {
   flex: 1;
   position: relative;
   overflow: auto;
 }
-._content_1f03i_75 ._copyButton_1f03i_80 {
+._content_1buy3_75 ._copyButton_1buy3_80 {
+  z-index: 9999;
   position: absolute;
   top: 16px;
   right: 16px;
@@ -7161,8 +7165,13 @@ li ._htmlOl_1snis_205 {
   gap: 5px;
   transition: opacity 0.2s;
 }
-._content_1f03i_75:hover ._copyButton_1f03i_80 {
+._content_1buy3_75:hover ._copyButton_1buy3_80 {
   display: flex;
+}
+
+._xmluiEditor_1buy3_98 {
+  height: 100%;
+  width: 100%;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *
@@ -7660,6 +7669,75 @@ li ._htmlOl_1snis_205 {
 /*
  * This function creates a CSS variable name by combining the prefix and the argument variable name
  */
+/*
+ * 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.
+ */
+._innerWrapper_x6hwk_13 {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 12px;
+  --syntax-token-component: #cb5291;
+  --syntax-token-delimiter-angle: #66748E;
+  --syntax-token-attribute-name: #2d2d2d;
+  --syntax-token-equal-sign: #2d2d2d;
+  --syntax-token-string: #0074a9;
+  --syntax-token-script: #02A1A1;
+  --syntax-token-helper: #005AE1;
+  --syntax-token-comment: #4E4E4E;
+  --syntax-token-escape: #00B248;
+  --syntax-token-constant: #708C00;
+  --syntax-token-cdata: #079CF1;
+  --syntax-token-delimiter-curly: #000000;
+  --syntax-token-text: #4e5fb3;
+}
+._innerWrapper_x6hwk_13._dark_x6hwk_32 {
+  --syntax-token-component: #f472b6;
+  --syntax-token-delimiter-angle: #97A7C5;
+  --syntax-token-attribute-name: #cbd5e1;
+  --syntax-token-equal-sign: #cbd5e1;
+  --syntax-token-string: #7dd3fc;
+  --syntax-token-script: #78DBDB;
+  --syntax-token-helper: #80A6F8;
+  --syntax-token-comment: #CFCFCF;
+  --syntax-token-escape: #61F69D;
+  --syntax-token-constant: #BAF80A;
+  --syntax-token-cdata: #5CC1F9;
+  --syntax-token-delimiter-curly: #FFFFFF;
+  --syntax-token-text: #f5f5ff;
+}
+._innerWrapper_x6hwk_13 > .shiki {
+  background-color: transparent !important;
+}
+
+._wrapper_x6hwk_51 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+._copyButton_x6hwk_58 {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  border: none;
+  padding: 4px;
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  transition: opacity 0.2s;
+}/*
+ * 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.
+ */
+/*
+ * This function creates a CSS variable name by combining the prefix and the argument variable name
+ */
 /*
  * 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.