xmlui 0.9.12 → 0.9.13

package/dist/style.css

@@ -5549,7 +5549,7 @@ button._selectTrigger_nwesf_46._valid_nwesf_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_1ozt1_13 ._blockquote_1ozt1_13 {
+._markdownContent_1anzp_13 ._blockquote_1anzp_13 {
   position: relative;
   margin-top: var(--xmlui-marginTop-Blockquote);
   margin-bottom: var(--xmlui-marginBottom-Blockquote);
@@ -5557,7 +5557,7 @@ button._selectTrigger_nwesf_46._valid_nwesf_37::placeholder {
   border-radius: var(--xmlui-borderRadius-Blockquote);
   padding-left: var(--xmlui-paddingLeft-Blockquote);
 }
-._markdownContent_1ozt1_13 ._blockquote_1ozt1_13::before {
+._markdownContent_1anzp_13 ._blockquote_1anzp_13::before {
   background-color: var(--xmlui-accentColor-Blockquote);
   position: absolute;
   top: 0;
@@ -5567,39 +5567,50 @@ button._selectTrigger_nwesf_46._valid_nwesf_37::placeholder {
   height: 100%;
   width: var(--xmlui-accentWidth-Blockquote);
 }
-._markdownContent_1ozt1_13 ._blockquoteContainer_1ozt1_31 {
+._markdownContent_1anzp_13 ._blockquoteContainer_1anzp_31 {
   padding: 0.5rem;
 }
-._markdownContent_1ozt1_13 ._admonitionBlockquote_1ozt1_34 {
+._markdownContent_1anzp_13 ._admonitionBlockquote_1anzp_34 {
   margin-top: var(--xmlui-marginTop-Admonition);
   margin-bottom: var(--xmlui-marginBottom-Admonition);
   background-color: var(--xmlui-backgroundColor-Admonition);
   border-radius: var(--xmlui-borderRadius-Admonition);
 }
-._markdownContent_1ozt1_13 ._admonitionContainer_1ozt1_40 {
+._markdownContent_1anzp_13 ._admonitionContainer_1anzp_40 {
   padding: 0.5rem;
   display: flex;
   align-items: flex-start;
 }
-._markdownContent_1ozt1_13 ._admonitionContent_1ozt1_45 {
+._markdownContent_1anzp_13 ._admonitionContent_1anzp_45 {
   margin-left: var(--xmlui-marginLeft-Admonition-content);
 }
-._markdownContent_1ozt1_13 ._admonitionIcon_1ozt1_48 {
+._markdownContent_1anzp_13 ._admonitionIcon_1anzp_48 {
   font-size: var(--xmlui-iconSize-Admonition);
   line-height: 1;
 }
-._markdownContent_1ozt1_13 ._admonitionContent_1ozt1_45 {
+._markdownContent_1anzp_13 ._admonitionContent_1anzp_45 {
   flex: 1;
   min-width: 0;
 }
-._markdownContent_1ozt1_13 ._admonitionBlockquote_1ozt1_34 ._admonitionContent_1ozt1_45 [class*=text_][class*=markdown_] {
+._markdownContent_1anzp_13 ._admonitionBlockquote_1anzp_34 ._admonitionContent_1anzp_45 [class*=text_][class*=markdown_] {
   margin-top: 0;
   margin-bottom: 0;
 }
-._markdownContent_1ozt1_13 > *:first-child {
+._markdownContent_1anzp_13 li:has(> input[type=checkbox]),
+._markdownContent_1anzp_13 li:has(> input[type=checkbox]) {
+  display: flex;
+  align-items: flex-start;
+}
+._markdownContent_1anzp_13 li:has(> input[type=checkbox]) > input[type=checkbox],
+._markdownContent_1anzp_13 li:has(> input[type=checkbox]) > input[type=checkbox] {
+  margin-right: 8px;
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+._markdownContent_1anzp_13 > *:first-child {
   margin-top: 0;
 }
-._markdownContent_1ozt1_13 > *:last-child {
+._markdownContent_1anzp_13 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -5648,7 +5659,7 @@ $color-marker-ListItem: createThemeVar("color-marker-ListItem");
  * 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_1wzn5_13 {
+._htmlTable_ei3dh_13 {
   background-color: var(--xmlui-backgroundColor-HtmlTable);
   color: var(--xmlui-textColor-HtmlTable);
   font-family: var(--xmlui-fontFamily-HtmlTable);
@@ -5684,7 +5695,7 @@ $color-marker-ListItem: createThemeVar("color-marker-ListItem");
   padding-bottom: var(--xmlui-paddingBottom-HtmlTable, var(--xmlui-paddingVertical-HtmlTable, var(--xmlui-padding-HtmlTable)));
 }
 
-._htmlThead_1wzn5_49 {
+._htmlThead_ei3dh_49 {
   background-color: var(--xmlui-backgroundColor-HtmlThead);
   color: var(--xmlui-textColor-HtmlThead);
   font-weight: var(--xmlui-fontWeight-HtmlThead);
@@ -5717,7 +5728,7 @@ $color-marker-ListItem: createThemeVar("color-marker-ListItem");
   padding-bottom: var(--xmlui-paddingBottom-HtmlThead, var(--xmlui-paddingVertical-HtmlThead, var(--xmlui-padding-HtmlThead)));
 }
 
-._htmlTbody_1wzn5_82 {
+._htmlTbody_ei3dh_82 {
   background-color: var(--xmlui-backgroundColor-HtmlTbody);
   color: var(--xmlui-textColor-HtmlTbody);
   text-align: var(--xmlui-textAlign-HtmlTbody);
@@ -5725,12 +5736,12 @@ $color-marker-ListItem: createThemeVar("color-marker-ListItem");
   text-transform: var(--xmlui-textTransform-HtmlTbody);
 }
 
-._htmlTfoot_1wzn5_90 {
+._htmlTfoot_ei3dh_90 {
   background-color: var(--xmlui-backgroundColor-HtmlTfoot);
   color: var(--xmlui-textColor-HtmlTfoot);
 }
 
-._htmlTh_1wzn5_49 {
+._htmlTh_ei3dh_49 {
   background-color: var(--xmlui-backgroundColor-HtmlTh);
   color: var(--xmlui-textColor-HtmlTh);
   font-weight: var(--xmlui-fontWeight-HtmlTh);
@@ -5761,11 +5772,11 @@ $color-marker-ListItem: createThemeVar("color-marker-ListItem");
   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_1wzn5_49:hover {
+._htmlTh_ei3dh_49:hover {
   background-color: var(--xmlui-backgroundColor-HtmlTh--hover);
 }
 
-._htmlTr_1wzn5_130 {
+._htmlTr_ei3dh_130 {
   background-color: var(--xmlui-backgroundColor-HtmlTr);
   color: var(--xmlui-textColor-HtmlTr);
   font-weight: var(--xmlui-fontWeight-HtmlTr);
@@ -5791,18 +5802,18 @@ $color-marker-ListItem: createThemeVar("color-marker-ListItem");
   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_1wzn5_130:nth-child(even) {
+._htmlTr_ei3dh_130:nth-child(even) {
   background-color: var(--xmlui-backgroundColor-even-HtmlTr);
 }
-._htmlTr_1wzn5_130:hover {
+._htmlTr_ei3dh_130:hover {
   background-color: var(--xmlui-backgroundColor-HtmlTr--hover);
   color: var(--xmlui-textColor-HtmlTr--hover);
 }
-._htmlTr_1wzn5_130:hover:not(:has(:not(th))) {
+._htmlTr_ei3dh_130:hover:not(:has(:not(th))) {
   background-color: initial;
 }
 
-._htmlTd_1wzn5_167 {
+._htmlTd_ei3dh_167 {
   background-color: var(--xmlui-backgroundColor-HtmlTd);
   text-align: var(--xmlui-text-align-HtmlTd);
   vertical-align: var(--xmlui-verticalAlign-HtmlTd);
@@ -5835,50 +5846,45 @@ $color-marker-ListItem: createThemeVar("color-marker-ListItem");
   padding-bottom: var(--xmlui-paddingBottom-HtmlTd, var(--xmlui-paddingVertical-HtmlTd, var(--xmlui-padding-HtmlTd)));
 }
 
-._htmlUl_1wzn5_200 {
+._htmlUl_ei3dh_200 {
   margin-top: var(--xmlui-marginTop-HtmlUl);
   margin-bottom: var(--xmlui-marginBottom-HtmlUl);
 }
 
-._htmlOl_1wzn5_205 {
+._htmlOl_ei3dh_205 {
   margin-top: var(--xmlui-marginTop-HtmlOl);
   margin-bottom: var(--xmlui-marginBottom-HtmlOl);
 }
 
-li ._htmlUl_1wzn5_200,
-li ._htmlOl_1wzn5_205 {
-  margin-top: 0;
-  margin-bottom: 0;
+._htmlLi_ei3dh_210 {
+  margin-top: var(--xmlui-marginTop-HtmlLi);
+  margin-bottom: var(--xmlui-marginBottom-HtmlLi);
 }
 
-._htmlUl_1wzn5_200 li:has(> input[type=checkbox]),
-._htmlOl_1wzn5_205 li:has(> input[type=checkbox]) {
-  display: flex;
-  align-items: flex-start;
-}
-._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;
+/*
+// Compress when nested
+li .htmlUl,
+li .htmlOl {
+  margin-top: 0;
+  margin-bottom: 0;
 }
-
-._htmlH1_1wzn5_228, ._htmlH2_1wzn5_228, ._htmlH3_1wzn5_228, ._htmlH4_1wzn5_228, ._htmlH5_1wzn5_228, ._htmlH6_1wzn5_228 {
+*/
+._htmlH1_ei3dh_223, ._htmlH2_ei3dh_223, ._htmlH3_ei3dh_223, ._htmlH4_ei3dh_223, ._htmlH5_ei3dh_223, ._htmlH6_ei3dh_223 {
   margin-top: var(--xmlui-marginTop-HtmlHeading);
   margin-bottom: var(--xmlui-marginBottom-HtmlHeading);
 }
 
-._htmlVideo_1wzn5_233 {
+._htmlVideo_ei3dh_228 {
   margin-top: var(--xmlui-marginTop-HtmlVideo);
   margin-bottom: var(--xmlui-marginBottom-HtmlVideo);
 }
 
-._htmlDetails_1wzn5_238 {
+._htmlDetails_ei3dh_233 {
   margin-top: var(--xmlui-marginTop-HtmlDetails);
   margin-bottom: var(--xmlui-marginBottom-HtmlDetails);
 }
 
-._htmlDetails_1wzn5_238 {
+._htmlDetails_ei3dh_233 {
   margin-top: var(--xmlui-marginTop-HtmlDetails);
   margin-bottom: var(--xmlui-marginBottom-HtmlDetails);
 }/*

package/dist/xmlui-metadata.mjs

@@ -5662,6 +5662,7 @@ const styles$t = {
   wrapper: wrapper$1,
   buttonRow
 };
+const UNBOUND_FIELD_SUFFIX = "__UNBOUND_FIELD__";
 var FormActionKind = /* @__PURE__ */ ((FormActionKind2) => {
   FormActionKind2["FIELD_LOST_FOCUS"] = "FormActionKind:FIELD_LOST_FOCUS";
   FormActionKind2["FIELD_VALUE_CHANGED"] = "FormActionKind:FIELD_VALUE_CHANGED";
@@ -5753,7 +5754,10 @@ function formReset(originalSubject) {
     }
   };
 }
-function backendValidationArrived({ generalValidationResults = [], fieldValidationResults = {} }) {
+function backendValidationArrived({
+  generalValidationResults = [],
+  fieldValidationResults = {}
+}) {
   return {
     type: "FormActionKind:BACKEND_VALIDATION_ARRIVED",
     payload: {
@@ -7121,7 +7125,13 @@ const Form = forwardRef(function({
     const prevFocused = document.activeElement;
     dispatch(formSubmitting());
     try {
-      await (onSubmit == null ? void 0 : onSubmit(formState.subject, {
+      const filteredSubject = Object.entries(formState.subject).reduce((acc, [key, value]) => {
+        if (!key.endsWith(UNBOUND_FIELD_SUFFIX)) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+      await (onSubmit == null ? void 0 : onSubmit(filteredSubject, {
         passAsDefaultBody: true
       }));
       dispatch(formSubmitted());
@@ -14465,6 +14475,8 @@ memo(function FormItem2({
   inputRenderer,
   ...rest
 }) {
+  const defaultId = useId();
+  const [formItemId, setFormItemId] = useState(bindTo);
   const labelWidthValue = useFormContextPart((value2) => labelWidth || value2.itemLabelWidth);
   const labelBreakValue = useFormContextPart(
     (value2) => labelBreak2 !== void 0 ? labelBreak2 : value2.itemLabelBreak
@@ -14473,33 +14485,35 @@ memo(function FormItem2({
     (value2) => labelPosition || value2.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]
   );
   const initialValueFromSubject = useFormContextPart(
-    (value2) => getByPath(value2.originalSubject, bindTo)
+    (value2) => getByPath(value2.originalSubject, formItemId)
   );
   const initialValue = initialValueFromSubject === void 0 ? rest.initialValue : initialValueFromSubject;
-  const value = useFormContextPart((value2) => getByPath(value2.subject, bindTo));
-  const validationResult = useFormContextPart((value2) => value2.validationResults[bindTo]);
+  const value = useFormContextPart((value2) => getByPath(value2.subject, formItemId));
+  const validationResult = useFormContextPart((value2) => value2.validationResults[formItemId]);
   const dispatch = useFormContextPart((value2) => value2.dispatch);
   const formEnabled = useFormContextPart((value2) => value2.enabled);
   const isEnabled2 = enabled2 && formEnabled;
   useEffect(() => {
-    dispatch(fieldInitialized(bindTo, initialValue));
+    const newId = bindTo || `${defaultId}${UNBOUND_FIELD_SUFFIX}`;
+    setFormItemId(newId);
+    dispatch(fieldInitialized(newId, initialValue));
   }, [bindTo, dispatch, initialValue]);
-  useValidation(validations, onValidate, value, dispatch, bindTo, customValidationsDebounce);
+  useValidation(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
   const onStateChange = useCallback(
     ({ value: value2 }, options2) => {
       if (!(options2 == null ? void 0 : options2.initial)) {
-        dispatch(fieldChanged(bindTo, value2));
+        dispatch(fieldChanged(formItemId, value2));
       }
     },
-    [bindTo, dispatch]
+    [formItemId, dispatch]
   );
   useEffect(() => {
     return () => {
-      dispatch(fieldRemoved(bindTo));
+      dispatch(fieldRemoved(formItemId));
     };
-  }, [bindTo, dispatch]);
+  }, [formItemId, dispatch]);
   const { validationStatus, isHelperTextShown } = useValidationDisplay(
-    bindTo,
+    formItemId,
     value,
     validationResult,
     validationMode
@@ -14717,10 +14731,10 @@ memo(function FormItem2({
     }
   }
   const onFocus = useEvent(() => {
-    dispatch(fieldFocused(bindTo));
+    dispatch(fieldFocused(formItemId));
   });
   const onBlur = useEvent(() => {
-    dispatch(fieldLostFocus(bindTo));
+    dispatch(fieldLostFocus(formItemId));
   });
   const [animateContainerRef] = useAutoAnimate({ duration: 100 });
   return /* @__PURE__ */ jsx(
@@ -15305,7 +15319,7 @@ const themeVarsTfoot = `'{"backgroundColor-HtmlTfoot": "var(--xmlui-backgroundCo
 const themeVarsTh = `'{"backgroundColor-HtmlTh": "var(--xmlui-backgroundColor-HtmlTh)", "textColor-HtmlTh": "var(--xmlui-textColor-HtmlTh)", "fontWeight-HtmlTh": "var(--xmlui-fontWeight-HtmlTh)", "fontSize-HtmlTh": "var(--xmlui-fontSize-HtmlTh)", "backgroundColor-HtmlTh--hover": "var(--xmlui-backgroundColor-HtmlTh--hover)", "border-HtmlTh": "var(--xmlui-border-HtmlTh)", "borderHorizontal-HtmlTh": "var(--xmlui-borderHorizontal-HtmlTh, var(--xmlui-border-HtmlTh))", "borderVertical-HtmlTh": "var(--xmlui-borderVertical-HtmlTh, var(--xmlui-border-HtmlTh))", "borderLeft-HtmlTh": "var(--xmlui-borderLeft-HtmlTh, var(--xmlui-borderHorizontal-HtmlTh, var(--xmlui-border-HtmlTh)))", "borderRight-HtmlTh": "var(--xmlui-borderRight-HtmlTh, var(--xmlui-borderHorizontal-HtmlTh, var(--xmlui-border-HtmlTh)))", "borderTop-HtmlTh": "var(--xmlui-borderTop-HtmlTh, var(--xmlui-borderVertical-HtmlTh, var(--xmlui-border-HtmlTh)))", "borderBottom-HtmlTh": "var(--xmlui-borderBottom-HtmlTh, var(--xmlui-borderVertical-HtmlTh, var(--xmlui-border-HtmlTh)))", "borderWidth-HtmlTh": "var(--xmlui-borderWidth-HtmlTh)", "borderHorizontalWidth-HtmlTh": "var(--xmlui-borderHorizontalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh))", "borderLeftWidth-HtmlTh": "var(--xmlui-borderLeftWidth-HtmlTh, var(--xmlui-borderHorizontalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh)))", "borderRightWidth-HtmlTh": "var(--xmlui-borderRightWidth-HtmlTh, var(--xmlui-borderHorizontalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh)))", "borderVerticalWidth-HtmlTh": "var(--xmlui-borderVerticalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh))", "borderTopWidth-HtmlTh": "var(--xmlui-borderTopWidth-HtmlTh, var(--xmlui-borderVerticalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh)))", "borderBottomWidth-HtmlTh": "var(--xmlui-borderBottomWidth-HtmlTh, var(--xmlui-borderVerticalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh)))", "borderStyle-HtmlTh": "var(--xmlui-borderStyle-HtmlTh)", "borderHorizontalStyle-HtmlTh": "var(--xmlui-borderHorizontalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh))", "borderLeftStyle-HtmlTh": "var(--xmlui-borderLeftStyle-HtmlTh, var(--xmlui-borderHorizontalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh)))", "borderRightStyle-HtmlTh": "var(--xmlui-borderRightStyle-HtmlTh, var(--xmlui-borderHorizontalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh)))", "borderVerticalStyle-HtmlTh": "var(--xmlui-borderVerticalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh))", "borderTopStyle-HtmlTh": "var(--xmlui-borderTopStyle-HtmlTh, var(--xmlui-borderVerticalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh)))", "borderBottomStyle-HtmlTh": "var(--xmlui-borderBottomStyle-HtmlTh, var(--xmlui-borderVerticalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh)))", "borderColor-HtmlTh": "var(--xmlui-borderColor-HtmlTh)", "borderHorizontalColor-HtmlTh": "var(--xmlui-borderHorizontalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh))", "borderLeftColor-HtmlTh": "var(--xmlui-borderLeftColor-HtmlTh, var(--xmlui-borderHorizontalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh)))", "borderRightColor-HtmlTh": "var(--xmlui-borderRightColor-HtmlTh, var(--xmlui-borderHorizontalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh)))", "borderVerticalColor-HtmlTh": "var(--xmlui-borderVerticalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh))", "borderTopColor-HtmlTh": "var(--xmlui-borderTopColor-HtmlTh, var(--xmlui-borderVerticalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh)))", "borderBottomColor-HtmlTh": "var(--xmlui-borderBottomColor-HtmlTh, var(--xmlui-borderVerticalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh)))", "borderStartStartRadius-HtmlTh": "var(--xmlui-borderStartStartRadius-HtmlTh, var(--xmlui-borderRadius-HtmlTh))", "borderStartEndRadius-HtmlTh": "var(--xmlui-borderStartEndRadius-HtmlTh, var(--xmlui-borderRadius-HtmlTh))", "borderEndStartRadius-HtmlTh": "var(--xmlui-borderEndStartRadius-HtmlTh, var(--xmlui-borderRadius-HtmlTh))", "borderEndEndRadius-HtmlTh": "var(--xmlui-borderEndEndRadius-HtmlTh, var(--xmlui-borderRadius-HtmlTh))", "padding-HtmlTh": "var(--xmlui-padding-HtmlTh)", "paddingHorizontal-HtmlTh": "var(--xmlui-paddingHorizontal-HtmlTh, var(--xmlui-padding-HtmlTh))", "paddingVertical-HtmlTh": "var(--xmlui-paddingVertical-HtmlTh, var(--xmlui-padding-HtmlTh))", "paddingLeft-HtmlTh": "var(--xmlui-paddingLeft-HtmlTh, var(--xmlui-paddingHorizontal-HtmlTh, var(--xmlui-padding-HtmlTh)))", "paddingRight-HtmlTh": "var(--xmlui-paddingRight-HtmlTh, var(--xmlui-paddingHorizontal-HtmlTh, var(--xmlui-padding-HtmlTh)))", "paddingTop-HtmlTh": "var(--xmlui-paddingTop-HtmlTh, var(--xmlui-paddingVertical-HtmlTh, var(--xmlui-padding-HtmlTh)))", "paddingBottom-HtmlTh": "var(--xmlui-paddingBottom-HtmlTh, var(--xmlui-paddingVertical-HtmlTh, var(--xmlui-padding-HtmlTh)))"}'`;
 const themeVarsTr = `'{"backgroundColor-HtmlTr": "var(--xmlui-backgroundColor-HtmlTr)", "backgroundColor-HtmlTr--hover": "var(--xmlui-backgroundColor-HtmlTr--hover)", "backgroundColor-even-HtmlTr": "var(--xmlui-backgroundColor-even-HtmlTr)", "textColor-HtmlTr": "var(--xmlui-textColor-HtmlTr)", "textColor-HtmlTr--hover": "var(--xmlui-textColor-HtmlTr--hover)", "fontSize-HtmlTr": "var(--xmlui-fontSize-HtmlTr)", "fontWeight-HtmlTr": "var(--xmlui-fontWeight-HtmlTr)", "border-HtmlTr": "var(--xmlui-border-HtmlTr)", "borderHorizontal-HtmlTr": "var(--xmlui-borderHorizontal-HtmlTr, var(--xmlui-border-HtmlTr))", "borderVertical-HtmlTr": "var(--xmlui-borderVertical-HtmlTr, var(--xmlui-border-HtmlTr))", "borderLeft-HtmlTr": "var(--xmlui-borderLeft-HtmlTr, var(--xmlui-borderHorizontal-HtmlTr, var(--xmlui-border-HtmlTr)))", "borderRight-HtmlTr": "var(--xmlui-borderRight-HtmlTr, var(--xmlui-borderHorizontal-HtmlTr, var(--xmlui-border-HtmlTr)))", "borderTop-HtmlTr": "var(--xmlui-borderTop-HtmlTr, var(--xmlui-borderVertical-HtmlTr, var(--xmlui-border-HtmlTr)))", "borderBottom-HtmlTr": "var(--xmlui-borderBottom-HtmlTr, var(--xmlui-borderVertical-HtmlTr, var(--xmlui-border-HtmlTr)))", "borderWidth-HtmlTr": "var(--xmlui-borderWidth-HtmlTr)", "borderHorizontalWidth-HtmlTr": "var(--xmlui-borderHorizontalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr))", "borderLeftWidth-HtmlTr": "var(--xmlui-borderLeftWidth-HtmlTr, var(--xmlui-borderHorizontalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr)))", "borderRightWidth-HtmlTr": "var(--xmlui-borderRightWidth-HtmlTr, var(--xmlui-borderHorizontalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr)))", "borderVerticalWidth-HtmlTr": "var(--xmlui-borderVerticalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr))", "borderTopWidth-HtmlTr": "var(--xmlui-borderTopWidth-HtmlTr, var(--xmlui-borderVerticalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr)))", "borderBottomWidth-HtmlTr": "var(--xmlui-borderBottomWidth-HtmlTr, var(--xmlui-borderVerticalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr)))", "borderStyle-HtmlTr": "var(--xmlui-borderStyle-HtmlTr)", "borderHorizontalStyle-HtmlTr": "var(--xmlui-borderHorizontalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr))", "borderLeftStyle-HtmlTr": "var(--xmlui-borderLeftStyle-HtmlTr, var(--xmlui-borderHorizontalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr)))", "borderRightStyle-HtmlTr": "var(--xmlui-borderRightStyle-HtmlTr, var(--xmlui-borderHorizontalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr)))", "borderVerticalStyle-HtmlTr": "var(--xmlui-borderVerticalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr))", "borderTopStyle-HtmlTr": "var(--xmlui-borderTopStyle-HtmlTr, var(--xmlui-borderVerticalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr)))", "borderBottomStyle-HtmlTr": "var(--xmlui-borderBottomStyle-HtmlTr, var(--xmlui-borderVerticalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr)))", "borderColor-HtmlTr": "var(--xmlui-borderColor-HtmlTr)", "borderHorizontalColor-HtmlTr": "var(--xmlui-borderHorizontalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr))", "borderLeftColor-HtmlTr": "var(--xmlui-borderLeftColor-HtmlTr, var(--xmlui-borderHorizontalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr)))", "borderRightColor-HtmlTr": "var(--xmlui-borderRightColor-HtmlTr, var(--xmlui-borderHorizontalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr)))", "borderVerticalColor-HtmlTr": "var(--xmlui-borderVerticalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr))", "borderTopColor-HtmlTr": "var(--xmlui-borderTopColor-HtmlTr, var(--xmlui-borderVerticalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr)))", "borderBottomColor-HtmlTr": "var(--xmlui-borderBottomColor-HtmlTr, var(--xmlui-borderVerticalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr)))", "borderStartStartRadius-HtmlTr": "var(--xmlui-borderStartStartRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr))", "borderStartEndRadius-HtmlTr": "var(--xmlui-borderStartEndRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr))", "borderEndStartRadius-HtmlTr": "var(--xmlui-borderEndStartRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr))", "borderEndEndRadius-HtmlTr": "var(--xmlui-borderEndEndRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr))"}'`;
 const themeVarsTd = `'{"backgroundColor-HtmlTd": "var(--xmlui-backgroundColor-HtmlTd)", "text-align-HtmlTd": "var(--xmlui-text-align-HtmlTd)", "verticalAlign-HtmlTd": "var(--xmlui-verticalAlign-HtmlTd)", "fontSize-HtmlTd": "var(--xmlui-fontSize-HtmlTd)", "fontWeight-HtmlTd": "var(--xmlui-fontWeight-HtmlTd)", "border-HtmlTd": "var(--xmlui-border-HtmlTd)", "borderHorizontal-HtmlTd": "var(--xmlui-borderHorizontal-HtmlTd, var(--xmlui-border-HtmlTd))", "borderVertical-HtmlTd": "var(--xmlui-borderVertical-HtmlTd, var(--xmlui-border-HtmlTd))", "borderLeft-HtmlTd": "var(--xmlui-borderLeft-HtmlTd, var(--xmlui-borderHorizontal-HtmlTd, var(--xmlui-border-HtmlTd)))", "borderRight-HtmlTd": "var(--xmlui-borderRight-HtmlTd, var(--xmlui-borderHorizontal-HtmlTd, var(--xmlui-border-HtmlTd)))", "borderTop-HtmlTd": "var(--xmlui-borderTop-HtmlTd, var(--xmlui-borderVertical-HtmlTd, var(--xmlui-border-HtmlTd)))", "borderBottom-HtmlTd": "var(--xmlui-borderBottom-HtmlTd, var(--xmlui-borderVertical-HtmlTd, var(--xmlui-border-HtmlTd)))", "borderWidth-HtmlTd": "var(--xmlui-borderWidth-HtmlTd)", "borderHorizontalWidth-HtmlTd": "var(--xmlui-borderHorizontalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd))", "borderLeftWidth-HtmlTd": "var(--xmlui-borderLeftWidth-HtmlTd, var(--xmlui-borderHorizontalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd)))", "borderRightWidth-HtmlTd": "var(--xmlui-borderRightWidth-HtmlTd, var(--xmlui-borderHorizontalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd)))", "borderVerticalWidth-HtmlTd": "var(--xmlui-borderVerticalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd))", "borderTopWidth-HtmlTd": "var(--xmlui-borderTopWidth-HtmlTd, var(--xmlui-borderVerticalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd)))", "borderBottomWidth-HtmlTd": "var(--xmlui-borderBottomWidth-HtmlTd, var(--xmlui-borderVerticalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd)))", "borderStyle-HtmlTd": "var(--xmlui-borderStyle-HtmlTd)", "borderHorizontalStyle-HtmlTd": "var(--xmlui-borderHorizontalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd))", "borderLeftStyle-HtmlTd": "var(--xmlui-borderLeftStyle-HtmlTd, var(--xmlui-borderHorizontalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd)))", "borderRightStyle-HtmlTd": "var(--xmlui-borderRightStyle-HtmlTd, var(--xmlui-borderHorizontalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd)))", "borderVerticalStyle-HtmlTd": "var(--xmlui-borderVerticalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd))", "borderTopStyle-HtmlTd": "var(--xmlui-borderTopStyle-HtmlTd, var(--xmlui-borderVerticalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd)))", "borderBottomStyle-HtmlTd": "var(--xmlui-borderBottomStyle-HtmlTd, var(--xmlui-borderVerticalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd)))", "borderColor-HtmlTd": "var(--xmlui-borderColor-HtmlTd)", "borderHorizontalColor-HtmlTd": "var(--xmlui-borderHorizontalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd))", "borderLeftColor-HtmlTd": "var(--xmlui-borderLeftColor-HtmlTd, var(--xmlui-borderHorizontalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd)))", "borderRightColor-HtmlTd": "var(--xmlui-borderRightColor-HtmlTd, var(--xmlui-borderHorizontalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd)))", "borderVerticalColor-HtmlTd": "var(--xmlui-borderVerticalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd))", "borderTopColor-HtmlTd": "var(--xmlui-borderTopColor-HtmlTd, var(--xmlui-borderVerticalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd)))", "borderBottomColor-HtmlTd": "var(--xmlui-borderBottomColor-HtmlTd, var(--xmlui-borderVerticalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd)))", "borderStartStartRadius-HtmlTd": "var(--xmlui-borderStartStartRadius-HtmlTd, var(--xmlui-borderRadius-HtmlTd))", "borderStartEndRadius-HtmlTd": "var(--xmlui-borderStartEndRadius-HtmlTd, var(--xmlui-borderRadius-HtmlTd))", "borderEndStartRadius-HtmlTd": "var(--xmlui-borderEndStartRadius-HtmlTd, var(--xmlui-borderRadius-HtmlTd))", "borderEndEndRadius-HtmlTd": "var(--xmlui-borderEndEndRadius-HtmlTd, var(--xmlui-borderRadius-HtmlTd))", "padding-HtmlTd": "var(--xmlui-padding-HtmlTd)", "paddingHorizontal-HtmlTd": "var(--xmlui-paddingHorizontal-HtmlTd, var(--xmlui-padding-HtmlTd))", "paddingVertical-HtmlTd": "var(--xmlui-paddingVertical-HtmlTd, var(--xmlui-padding-HtmlTd))", "paddingLeft-HtmlTd": "var(--xmlui-paddingLeft-HtmlTd, var(--xmlui-paddingHorizontal-HtmlTd, var(--xmlui-padding-HtmlTd)))", "paddingRight-HtmlTd": "var(--xmlui-paddingRight-HtmlTd, var(--xmlui-paddingHorizontal-HtmlTd, var(--xmlui-padding-HtmlTd)))", "paddingTop-HtmlTd": "var(--xmlui-paddingTop-HtmlTd, var(--xmlui-paddingVertical-HtmlTd, var(--xmlui-padding-HtmlTd)))", "paddingBottom-HtmlTd": "var(--xmlui-paddingBottom-HtmlTd, var(--xmlui-paddingVertical-HtmlTd, var(--xmlui-padding-HtmlTd)))"}'`;
-const themeVarsList = `'{"marginTop-HtmlOl": "var(--xmlui-marginTop-HtmlOl)", "marginBottom-HtmlOl": "var(--xmlui-marginBottom-HtmlOl)", "marginTop-HtmlUl": "var(--xmlui-marginTop-HtmlUl)", "marginBottom-HtmlUl": "var(--xmlui-marginBottom-HtmlUl)"}'`;
+const themeVarsList = `'{"marginTop-HtmlOl": "var(--xmlui-marginTop-HtmlOl)", "marginBottom-HtmlOl": "var(--xmlui-marginBottom-HtmlOl)", "marginTop-HtmlUl": "var(--xmlui-marginTop-HtmlUl)", "marginBottom-HtmlUl": "var(--xmlui-marginBottom-HtmlUl)", "marginTop-HtmlLi": "var(--xmlui-marginTop-HtmlLi)", "marginBottom-HtmlLi": "var(--xmlui-marginBottom-HtmlLi)"}'`;
 const themeVarsHeading = `'{"marginTop-HtmlHeading": "var(--xmlui-marginTop-HtmlHeading)", "marginBottom-HtmlHeading": "var(--xmlui-marginBottom-HtmlHeading)"}'`;
 const themeVarsVideo = `'{"marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
 const themeVarsDetails = `'{"marginTop-HtmlDetails": "var(--xmlui-marginTop-HtmlDetails)", "marginBottom-HtmlDetails": "var(--xmlui-marginBottom-HtmlDetails)"}'`;
@@ -15348,6 +15362,7 @@ const MarkdownMd = createMetadata({
     "marginBottom-Blockquote": "1rem",
     "marginBottom-Text-codefence": ".5rem",
     "marginBottom-Text-markdown": ".5rem",
+    "marginTop-HtmlLi": "-0.5rem",
     light: {
       // --- No light-specific theme vars
     },
@@ -16158,9 +16173,13 @@ const SelectionStore = ({
   const [items, setItems] = useState(selectedItems);
   const valueInitializedRef = useRef(false);
   const refreshSelection = useEvent((allItems = EMPTY_ARRAY) => {
-    setItems(allItems);
-    let value = allItems.filter((item) => !!selectedItems.find((si) => si[idKey] === item[idKey]));
-    if (!isEqual(selectedItems, value) || !valueInitializedRef.current) {
+    const safeAllItems = allItems || EMPTY_ARRAY;
+    const safeSelectedItems = selectedItems || EMPTY_ARRAY;
+    setItems(safeAllItems);
+    let value = safeAllItems.filter(
+      (item) => !!safeSelectedItems.find((si) => si && item && si[idKey] === item[idKey])
+    );
+    if (!isEqual(safeSelectedItems, value) || !valueInitializedRef.current) {
       valueInitializedRef.current = true;
       updateState({
         value
@@ -16168,7 +16187,8 @@ const SelectionStore = ({
     }
   });
   const setSelectedRowIds = useEvent((rowIds) => {
-    updateState({ value: items.filter((item) => rowIds.includes(item[idKey])) });
+    const safeItems = items || EMPTY_ARRAY;
+    updateState({ value: safeItems.filter((item) => rowIds.includes(item[idKey])) });
   });
   const clearSelection = useEvent(() => {
     setSelectedRowIds(EMPTY_ARRAY);
@@ -16196,7 +16216,7 @@ function useSelectionContext() {
 }
 const COMP$s = "SelectionStore";
 const SelectionStoreMd = createMetadata({
-  status: "deprecated",
+  status: "experimental",
   description: `The \`${COMP$s}\` is a non-visual component that may wrap components (items) and manage their selection state to accommodate the usage of other actions.`,
   props: {
     idKey: d(

package/dist/xmlui-metadata.umd.js

@@ -5659,6 +5659,7 @@
     wrapper: wrapper$1,
     buttonRow
   };
+  const UNBOUND_FIELD_SUFFIX = "__UNBOUND_FIELD__";
   var FormActionKind = /* @__PURE__ */ ((FormActionKind2) => {
     FormActionKind2["FIELD_LOST_FOCUS"] = "FormActionKind:FIELD_LOST_FOCUS";
     FormActionKind2["FIELD_VALUE_CHANGED"] = "FormActionKind:FIELD_VALUE_CHANGED";
@@ -5750,7 +5751,10 @@
       }
     };
   }
-  function backendValidationArrived({ generalValidationResults = [], fieldValidationResults = {} }) {
+  function backendValidationArrived({
+    generalValidationResults = [],
+    fieldValidationResults = {}
+  }) {
     return {
       type: "FormActionKind:BACKEND_VALIDATION_ARRIVED",
       payload: {
@@ -7118,7 +7122,13 @@
       const prevFocused = document.activeElement;
       dispatch(formSubmitting());
       try {
-        await (onSubmit == null ? void 0 : onSubmit(formState.subject, {
+        const filteredSubject = Object.entries(formState.subject).reduce((acc, [key, value]) => {
+          if (!key.endsWith(UNBOUND_FIELD_SUFFIX)) {
+            acc[key] = value;
+          }
+          return acc;
+        }, {});
+        await (onSubmit == null ? void 0 : onSubmit(filteredSubject, {
           passAsDefaultBody: true
         }));
         dispatch(formSubmitted());
@@ -14462,6 +14472,8 @@
     inputRenderer,
     ...rest
   }) {
+    const defaultId = React.useId();
+    const [formItemId, setFormItemId] = React.useState(bindTo);
     const labelWidthValue = useFormContextPart((value2) => labelWidth || value2.itemLabelWidth);
     const labelBreakValue = useFormContextPart(
       (value2) => labelBreak2 !== void 0 ? labelBreak2 : value2.itemLabelBreak
@@ -14470,33 +14482,35 @@
       (value2) => labelPosition || value2.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]
     );
     const initialValueFromSubject = useFormContextPart(
-      (value2) => getByPath(value2.originalSubject, bindTo)
+      (value2) => getByPath(value2.originalSubject, formItemId)
     );
     const initialValue = initialValueFromSubject === void 0 ? rest.initialValue : initialValueFromSubject;
-    const value = useFormContextPart((value2) => getByPath(value2.subject, bindTo));
-    const validationResult = useFormContextPart((value2) => value2.validationResults[bindTo]);
+    const value = useFormContextPart((value2) => getByPath(value2.subject, formItemId));
+    const validationResult = useFormContextPart((value2) => value2.validationResults[formItemId]);
     const dispatch = useFormContextPart((value2) => value2.dispatch);
     const formEnabled = useFormContextPart((value2) => value2.enabled);
     const isEnabled2 = enabled2 && formEnabled;
     React.useEffect(() => {
-      dispatch(fieldInitialized(bindTo, initialValue));
+      const newId = bindTo || `${defaultId}${UNBOUND_FIELD_SUFFIX}`;
+      setFormItemId(newId);
+      dispatch(fieldInitialized(newId, initialValue));
     }, [bindTo, dispatch, initialValue]);
-    useValidation(validations, onValidate, value, dispatch, bindTo, customValidationsDebounce);
+    useValidation(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
     const onStateChange = React.useCallback(
       ({ value: value2 }, options2) => {
         if (!(options2 == null ? void 0 : options2.initial)) {
-          dispatch(fieldChanged(bindTo, value2));
+          dispatch(fieldChanged(formItemId, value2));
         }
       },
-      [bindTo, dispatch]
+      [formItemId, dispatch]
     );
     React.useEffect(() => {
       return () => {
-        dispatch(fieldRemoved(bindTo));
+        dispatch(fieldRemoved(formItemId));
       };
-    }, [bindTo, dispatch]);
+    }, [formItemId, dispatch]);
     const { validationStatus, isHelperTextShown } = useValidationDisplay(
-      bindTo,
+      formItemId,
       value,
       validationResult,
       validationMode
@@ -14714,10 +14728,10 @@
       }
     }
     const onFocus = useEvent(() => {
-      dispatch(fieldFocused(bindTo));
+      dispatch(fieldFocused(formItemId));
     });
     const onBlur = useEvent(() => {
-      dispatch(fieldLostFocus(bindTo));
+      dispatch(fieldLostFocus(formItemId));
     });
     const [animateContainerRef] = useAutoAnimate({ duration: 100 });
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -15302,7 +15316,7 @@
   const themeVarsTh = `'{"backgroundColor-HtmlTh": "var(--xmlui-backgroundColor-HtmlTh)", "textColor-HtmlTh": "var(--xmlui-textColor-HtmlTh)", "fontWeight-HtmlTh": "var(--xmlui-fontWeight-HtmlTh)", "fontSize-HtmlTh": "var(--xmlui-fontSize-HtmlTh)", "backgroundColor-HtmlTh--hover": "var(--xmlui-backgroundColor-HtmlTh--hover)", "border-HtmlTh": "var(--xmlui-border-HtmlTh)", "borderHorizontal-HtmlTh": "var(--xmlui-borderHorizontal-HtmlTh, var(--xmlui-border-HtmlTh))", "borderVertical-HtmlTh": "var(--xmlui-borderVertical-HtmlTh, var(--xmlui-border-HtmlTh))", "borderLeft-HtmlTh": "var(--xmlui-borderLeft-HtmlTh, var(--xmlui-borderHorizontal-HtmlTh, var(--xmlui-border-HtmlTh)))", "borderRight-HtmlTh": "var(--xmlui-borderRight-HtmlTh, var(--xmlui-borderHorizontal-HtmlTh, var(--xmlui-border-HtmlTh)))", "borderTop-HtmlTh": "var(--xmlui-borderTop-HtmlTh, var(--xmlui-borderVertical-HtmlTh, var(--xmlui-border-HtmlTh)))", "borderBottom-HtmlTh": "var(--xmlui-borderBottom-HtmlTh, var(--xmlui-borderVertical-HtmlTh, var(--xmlui-border-HtmlTh)))", "borderWidth-HtmlTh": "var(--xmlui-borderWidth-HtmlTh)", "borderHorizontalWidth-HtmlTh": "var(--xmlui-borderHorizontalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh))", "borderLeftWidth-HtmlTh": "var(--xmlui-borderLeftWidth-HtmlTh, var(--xmlui-borderHorizontalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh)))", "borderRightWidth-HtmlTh": "var(--xmlui-borderRightWidth-HtmlTh, var(--xmlui-borderHorizontalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh)))", "borderVerticalWidth-HtmlTh": "var(--xmlui-borderVerticalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh))", "borderTopWidth-HtmlTh": "var(--xmlui-borderTopWidth-HtmlTh, var(--xmlui-borderVerticalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh)))", "borderBottomWidth-HtmlTh": "var(--xmlui-borderBottomWidth-HtmlTh, var(--xmlui-borderVerticalWidth-HtmlTh, var(--xmlui-borderWidth-HtmlTh)))", "borderStyle-HtmlTh": "var(--xmlui-borderStyle-HtmlTh)", "borderHorizontalStyle-HtmlTh": "var(--xmlui-borderHorizontalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh))", "borderLeftStyle-HtmlTh": "var(--xmlui-borderLeftStyle-HtmlTh, var(--xmlui-borderHorizontalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh)))", "borderRightStyle-HtmlTh": "var(--xmlui-borderRightStyle-HtmlTh, var(--xmlui-borderHorizontalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh)))", "borderVerticalStyle-HtmlTh": "var(--xmlui-borderVerticalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh))", "borderTopStyle-HtmlTh": "var(--xmlui-borderTopStyle-HtmlTh, var(--xmlui-borderVerticalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh)))", "borderBottomStyle-HtmlTh": "var(--xmlui-borderBottomStyle-HtmlTh, var(--xmlui-borderVerticalStyle-HtmlTh, var(--xmlui-borderStyle-HtmlTh)))", "borderColor-HtmlTh": "var(--xmlui-borderColor-HtmlTh)", "borderHorizontalColor-HtmlTh": "var(--xmlui-borderHorizontalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh))", "borderLeftColor-HtmlTh": "var(--xmlui-borderLeftColor-HtmlTh, var(--xmlui-borderHorizontalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh)))", "borderRightColor-HtmlTh": "var(--xmlui-borderRightColor-HtmlTh, var(--xmlui-borderHorizontalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh)))", "borderVerticalColor-HtmlTh": "var(--xmlui-borderVerticalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh))", "borderTopColor-HtmlTh": "var(--xmlui-borderTopColor-HtmlTh, var(--xmlui-borderVerticalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh)))", "borderBottomColor-HtmlTh": "var(--xmlui-borderBottomColor-HtmlTh, var(--xmlui-borderVerticalColor-HtmlTh, var(--xmlui-borderColor-HtmlTh)))", "borderStartStartRadius-HtmlTh": "var(--xmlui-borderStartStartRadius-HtmlTh, var(--xmlui-borderRadius-HtmlTh))", "borderStartEndRadius-HtmlTh": "var(--xmlui-borderStartEndRadius-HtmlTh, var(--xmlui-borderRadius-HtmlTh))", "borderEndStartRadius-HtmlTh": "var(--xmlui-borderEndStartRadius-HtmlTh, var(--xmlui-borderRadius-HtmlTh))", "borderEndEndRadius-HtmlTh": "var(--xmlui-borderEndEndRadius-HtmlTh, var(--xmlui-borderRadius-HtmlTh))", "padding-HtmlTh": "var(--xmlui-padding-HtmlTh)", "paddingHorizontal-HtmlTh": "var(--xmlui-paddingHorizontal-HtmlTh, var(--xmlui-padding-HtmlTh))", "paddingVertical-HtmlTh": "var(--xmlui-paddingVertical-HtmlTh, var(--xmlui-padding-HtmlTh))", "paddingLeft-HtmlTh": "var(--xmlui-paddingLeft-HtmlTh, var(--xmlui-paddingHorizontal-HtmlTh, var(--xmlui-padding-HtmlTh)))", "paddingRight-HtmlTh": "var(--xmlui-paddingRight-HtmlTh, var(--xmlui-paddingHorizontal-HtmlTh, var(--xmlui-padding-HtmlTh)))", "paddingTop-HtmlTh": "var(--xmlui-paddingTop-HtmlTh, var(--xmlui-paddingVertical-HtmlTh, var(--xmlui-padding-HtmlTh)))", "paddingBottom-HtmlTh": "var(--xmlui-paddingBottom-HtmlTh, var(--xmlui-paddingVertical-HtmlTh, var(--xmlui-padding-HtmlTh)))"}'`;
   const themeVarsTr = `'{"backgroundColor-HtmlTr": "var(--xmlui-backgroundColor-HtmlTr)", "backgroundColor-HtmlTr--hover": "var(--xmlui-backgroundColor-HtmlTr--hover)", "backgroundColor-even-HtmlTr": "var(--xmlui-backgroundColor-even-HtmlTr)", "textColor-HtmlTr": "var(--xmlui-textColor-HtmlTr)", "textColor-HtmlTr--hover": "var(--xmlui-textColor-HtmlTr--hover)", "fontSize-HtmlTr": "var(--xmlui-fontSize-HtmlTr)", "fontWeight-HtmlTr": "var(--xmlui-fontWeight-HtmlTr)", "border-HtmlTr": "var(--xmlui-border-HtmlTr)", "borderHorizontal-HtmlTr": "var(--xmlui-borderHorizontal-HtmlTr, var(--xmlui-border-HtmlTr))", "borderVertical-HtmlTr": "var(--xmlui-borderVertical-HtmlTr, var(--xmlui-border-HtmlTr))", "borderLeft-HtmlTr": "var(--xmlui-borderLeft-HtmlTr, var(--xmlui-borderHorizontal-HtmlTr, var(--xmlui-border-HtmlTr)))", "borderRight-HtmlTr": "var(--xmlui-borderRight-HtmlTr, var(--xmlui-borderHorizontal-HtmlTr, var(--xmlui-border-HtmlTr)))", "borderTop-HtmlTr": "var(--xmlui-borderTop-HtmlTr, var(--xmlui-borderVertical-HtmlTr, var(--xmlui-border-HtmlTr)))", "borderBottom-HtmlTr": "var(--xmlui-borderBottom-HtmlTr, var(--xmlui-borderVertical-HtmlTr, var(--xmlui-border-HtmlTr)))", "borderWidth-HtmlTr": "var(--xmlui-borderWidth-HtmlTr)", "borderHorizontalWidth-HtmlTr": "var(--xmlui-borderHorizontalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr))", "borderLeftWidth-HtmlTr": "var(--xmlui-borderLeftWidth-HtmlTr, var(--xmlui-borderHorizontalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr)))", "borderRightWidth-HtmlTr": "var(--xmlui-borderRightWidth-HtmlTr, var(--xmlui-borderHorizontalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr)))", "borderVerticalWidth-HtmlTr": "var(--xmlui-borderVerticalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr))", "borderTopWidth-HtmlTr": "var(--xmlui-borderTopWidth-HtmlTr, var(--xmlui-borderVerticalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr)))", "borderBottomWidth-HtmlTr": "var(--xmlui-borderBottomWidth-HtmlTr, var(--xmlui-borderVerticalWidth-HtmlTr, var(--xmlui-borderWidth-HtmlTr)))", "borderStyle-HtmlTr": "var(--xmlui-borderStyle-HtmlTr)", "borderHorizontalStyle-HtmlTr": "var(--xmlui-borderHorizontalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr))", "borderLeftStyle-HtmlTr": "var(--xmlui-borderLeftStyle-HtmlTr, var(--xmlui-borderHorizontalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr)))", "borderRightStyle-HtmlTr": "var(--xmlui-borderRightStyle-HtmlTr, var(--xmlui-borderHorizontalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr)))", "borderVerticalStyle-HtmlTr": "var(--xmlui-borderVerticalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr))", "borderTopStyle-HtmlTr": "var(--xmlui-borderTopStyle-HtmlTr, var(--xmlui-borderVerticalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr)))", "borderBottomStyle-HtmlTr": "var(--xmlui-borderBottomStyle-HtmlTr, var(--xmlui-borderVerticalStyle-HtmlTr, var(--xmlui-borderStyle-HtmlTr)))", "borderColor-HtmlTr": "var(--xmlui-borderColor-HtmlTr)", "borderHorizontalColor-HtmlTr": "var(--xmlui-borderHorizontalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr))", "borderLeftColor-HtmlTr": "var(--xmlui-borderLeftColor-HtmlTr, var(--xmlui-borderHorizontalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr)))", "borderRightColor-HtmlTr": "var(--xmlui-borderRightColor-HtmlTr, var(--xmlui-borderHorizontalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr)))", "borderVerticalColor-HtmlTr": "var(--xmlui-borderVerticalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr))", "borderTopColor-HtmlTr": "var(--xmlui-borderTopColor-HtmlTr, var(--xmlui-borderVerticalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr)))", "borderBottomColor-HtmlTr": "var(--xmlui-borderBottomColor-HtmlTr, var(--xmlui-borderVerticalColor-HtmlTr, var(--xmlui-borderColor-HtmlTr)))", "borderStartStartRadius-HtmlTr": "var(--xmlui-borderStartStartRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr))", "borderStartEndRadius-HtmlTr": "var(--xmlui-borderStartEndRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr))", "borderEndStartRadius-HtmlTr": "var(--xmlui-borderEndStartRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr))", "borderEndEndRadius-HtmlTr": "var(--xmlui-borderEndEndRadius-HtmlTr, var(--xmlui-borderRadius-HtmlTr))"}'`;
   const themeVarsTd = `'{"backgroundColor-HtmlTd": "var(--xmlui-backgroundColor-HtmlTd)", "text-align-HtmlTd": "var(--xmlui-text-align-HtmlTd)", "verticalAlign-HtmlTd": "var(--xmlui-verticalAlign-HtmlTd)", "fontSize-HtmlTd": "var(--xmlui-fontSize-HtmlTd)", "fontWeight-HtmlTd": "var(--xmlui-fontWeight-HtmlTd)", "border-HtmlTd": "var(--xmlui-border-HtmlTd)", "borderHorizontal-HtmlTd": "var(--xmlui-borderHorizontal-HtmlTd, var(--xmlui-border-HtmlTd))", "borderVertical-HtmlTd": "var(--xmlui-borderVertical-HtmlTd, var(--xmlui-border-HtmlTd))", "borderLeft-HtmlTd": "var(--xmlui-borderLeft-HtmlTd, var(--xmlui-borderHorizontal-HtmlTd, var(--xmlui-border-HtmlTd)))", "borderRight-HtmlTd": "var(--xmlui-borderRight-HtmlTd, var(--xmlui-borderHorizontal-HtmlTd, var(--xmlui-border-HtmlTd)))", "borderTop-HtmlTd": "var(--xmlui-borderTop-HtmlTd, var(--xmlui-borderVertical-HtmlTd, var(--xmlui-border-HtmlTd)))", "borderBottom-HtmlTd": "var(--xmlui-borderBottom-HtmlTd, var(--xmlui-borderVertical-HtmlTd, var(--xmlui-border-HtmlTd)))", "borderWidth-HtmlTd": "var(--xmlui-borderWidth-HtmlTd)", "borderHorizontalWidth-HtmlTd": "var(--xmlui-borderHorizontalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd))", "borderLeftWidth-HtmlTd": "var(--xmlui-borderLeftWidth-HtmlTd, var(--xmlui-borderHorizontalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd)))", "borderRightWidth-HtmlTd": "var(--xmlui-borderRightWidth-HtmlTd, var(--xmlui-borderHorizontalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd)))", "borderVerticalWidth-HtmlTd": "var(--xmlui-borderVerticalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd))", "borderTopWidth-HtmlTd": "var(--xmlui-borderTopWidth-HtmlTd, var(--xmlui-borderVerticalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd)))", "borderBottomWidth-HtmlTd": "var(--xmlui-borderBottomWidth-HtmlTd, var(--xmlui-borderVerticalWidth-HtmlTd, var(--xmlui-borderWidth-HtmlTd)))", "borderStyle-HtmlTd": "var(--xmlui-borderStyle-HtmlTd)", "borderHorizontalStyle-HtmlTd": "var(--xmlui-borderHorizontalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd))", "borderLeftStyle-HtmlTd": "var(--xmlui-borderLeftStyle-HtmlTd, var(--xmlui-borderHorizontalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd)))", "borderRightStyle-HtmlTd": "var(--xmlui-borderRightStyle-HtmlTd, var(--xmlui-borderHorizontalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd)))", "borderVerticalStyle-HtmlTd": "var(--xmlui-borderVerticalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd))", "borderTopStyle-HtmlTd": "var(--xmlui-borderTopStyle-HtmlTd, var(--xmlui-borderVerticalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd)))", "borderBottomStyle-HtmlTd": "var(--xmlui-borderBottomStyle-HtmlTd, var(--xmlui-borderVerticalStyle-HtmlTd, var(--xmlui-borderStyle-HtmlTd)))", "borderColor-HtmlTd": "var(--xmlui-borderColor-HtmlTd)", "borderHorizontalColor-HtmlTd": "var(--xmlui-borderHorizontalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd))", "borderLeftColor-HtmlTd": "var(--xmlui-borderLeftColor-HtmlTd, var(--xmlui-borderHorizontalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd)))", "borderRightColor-HtmlTd": "var(--xmlui-borderRightColor-HtmlTd, var(--xmlui-borderHorizontalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd)))", "borderVerticalColor-HtmlTd": "var(--xmlui-borderVerticalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd))", "borderTopColor-HtmlTd": "var(--xmlui-borderTopColor-HtmlTd, var(--xmlui-borderVerticalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd)))", "borderBottomColor-HtmlTd": "var(--xmlui-borderBottomColor-HtmlTd, var(--xmlui-borderVerticalColor-HtmlTd, var(--xmlui-borderColor-HtmlTd)))", "borderStartStartRadius-HtmlTd": "var(--xmlui-borderStartStartRadius-HtmlTd, var(--xmlui-borderRadius-HtmlTd))", "borderStartEndRadius-HtmlTd": "var(--xmlui-borderStartEndRadius-HtmlTd, var(--xmlui-borderRadius-HtmlTd))", "borderEndStartRadius-HtmlTd": "var(--xmlui-borderEndStartRadius-HtmlTd, var(--xmlui-borderRadius-HtmlTd))", "borderEndEndRadius-HtmlTd": "var(--xmlui-borderEndEndRadius-HtmlTd, var(--xmlui-borderRadius-HtmlTd))", "padding-HtmlTd": "var(--xmlui-padding-HtmlTd)", "paddingHorizontal-HtmlTd": "var(--xmlui-paddingHorizontal-HtmlTd, var(--xmlui-padding-HtmlTd))", "paddingVertical-HtmlTd": "var(--xmlui-paddingVertical-HtmlTd, var(--xmlui-padding-HtmlTd))", "paddingLeft-HtmlTd": "var(--xmlui-paddingLeft-HtmlTd, var(--xmlui-paddingHorizontal-HtmlTd, var(--xmlui-padding-HtmlTd)))", "paddingRight-HtmlTd": "var(--xmlui-paddingRight-HtmlTd, var(--xmlui-paddingHorizontal-HtmlTd, var(--xmlui-padding-HtmlTd)))", "paddingTop-HtmlTd": "var(--xmlui-paddingTop-HtmlTd, var(--xmlui-paddingVertical-HtmlTd, var(--xmlui-padding-HtmlTd)))", "paddingBottom-HtmlTd": "var(--xmlui-paddingBottom-HtmlTd, var(--xmlui-paddingVertical-HtmlTd, var(--xmlui-padding-HtmlTd)))"}'`;
-  const themeVarsList = `'{"marginTop-HtmlOl": "var(--xmlui-marginTop-HtmlOl)", "marginBottom-HtmlOl": "var(--xmlui-marginBottom-HtmlOl)", "marginTop-HtmlUl": "var(--xmlui-marginTop-HtmlUl)", "marginBottom-HtmlUl": "var(--xmlui-marginBottom-HtmlUl)"}'`;
+  const themeVarsList = `'{"marginTop-HtmlOl": "var(--xmlui-marginTop-HtmlOl)", "marginBottom-HtmlOl": "var(--xmlui-marginBottom-HtmlOl)", "marginTop-HtmlUl": "var(--xmlui-marginTop-HtmlUl)", "marginBottom-HtmlUl": "var(--xmlui-marginBottom-HtmlUl)", "marginTop-HtmlLi": "var(--xmlui-marginTop-HtmlLi)", "marginBottom-HtmlLi": "var(--xmlui-marginBottom-HtmlLi)"}'`;
   const themeVarsHeading = `'{"marginTop-HtmlHeading": "var(--xmlui-marginTop-HtmlHeading)", "marginBottom-HtmlHeading": "var(--xmlui-marginBottom-HtmlHeading)"}'`;
   const themeVarsVideo = `'{"marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
   const themeVarsDetails = `'{"marginTop-HtmlDetails": "var(--xmlui-marginTop-HtmlDetails)", "marginBottom-HtmlDetails": "var(--xmlui-marginBottom-HtmlDetails)"}'`;
@@ -15345,6 +15359,7 @@
       "marginBottom-Blockquote": "1rem",
       "marginBottom-Text-codefence": ".5rem",
       "marginBottom-Text-markdown": ".5rem",
+      "marginTop-HtmlLi": "-0.5rem",
       light: {
         // --- No light-specific theme vars
       },
@@ -16155,9 +16170,13 @@
     const [items, setItems] = React.useState(selectedItems);
     const valueInitializedRef = React.useRef(false);
     const refreshSelection = useEvent((allItems = EMPTY_ARRAY) => {
-      setItems(allItems);
-      let value = allItems.filter((item) => !!selectedItems.find((si) => si[idKey] === item[idKey]));
-      if (!lodashEs.isEqual(selectedItems, value) || !valueInitializedRef.current) {
+      const safeAllItems = allItems || EMPTY_ARRAY;
+      const safeSelectedItems = selectedItems || EMPTY_ARRAY;
+      setItems(safeAllItems);
+      let value = safeAllItems.filter(
+        (item) => !!safeSelectedItems.find((si) => si && item && si[idKey] === item[idKey])
+      );
+      if (!lodashEs.isEqual(safeSelectedItems, value) || !valueInitializedRef.current) {
         valueInitializedRef.current = true;
         updateState({
           value
@@ -16165,7 +16184,8 @@
       }
     });
     const setSelectedRowIds = useEvent((rowIds) => {
-      updateState({ value: items.filter((item) => rowIds.includes(item[idKey])) });
+      const safeItems = items || EMPTY_ARRAY;
+      updateState({ value: safeItems.filter((item) => rowIds.includes(item[idKey])) });
     });
     const clearSelection = useEvent(() => {
       setSelectedRowIds(EMPTY_ARRAY);
@@ -16193,7 +16213,7 @@
   }
   const COMP$s = "SelectionStore";
   const SelectionStoreMd = createMetadata({
-    status: "deprecated",
+    status: "experimental",
     description: `The \`${COMP$s}\` is a non-visual component that may wrap components (items) and manage their selection state to accommodate the usage of other actions.`,
     props: {
       idKey: d(