jedison 1.11.2 → 1.12.1

package/dist/esm/jedison.js

@@ -3270,7 +3270,8 @@ const glyphicons = {
   close: "glyphicon glyphicon-remove",
   edit: "glyphicon glyphicon-pencil",
   save: "glyphicon glyphicon-floppy-disk",
-  copy: "glyphicon glyphicon-copy"
+  copy: "glyphicon glyphicon-copy",
+  switcher: "glyphicon glyphicon-chevron-down"
 };
 const bootstrapIcons = {
   properties: "bi bi-card-list",
@@ -3285,7 +3286,8 @@ const bootstrapIcons = {
   close: "bi bi-x",
   edit: "bi bi-pencil",
   save: "bi bi-floppy",
-  copy: "bi bi-clipboard"
+  copy: "bi bi-clipboard",
+  switcher: "bi bi-chevron-down"
 };
 const fontAwesome3 = {
   properties: "icon-list",
@@ -3300,7 +3302,8 @@ const fontAwesome3 = {
   close: "icon-remove",
   edit: "icon-pencil",
   save: "icon-save",
-  copy: "icon-copy"
+  copy: "icon-copy",
+  switcher: "icon-chevron-down"
 };
 const fontAwesome4 = {
   properties: "fa fa-list",
@@ -3315,7 +3318,8 @@ const fontAwesome4 = {
   close: "fa fa-times",
   edit: "fa fa-pencil",
   save: "fa fa-floppy-o",
-  copy: "fa fa-clipboard"
+  copy: "fa fa-clipboard",
+  switcher: "fa fa-chevron-down"
 };
 const fontAwesome5 = {
   properties: "fas fa-list",
@@ -3330,7 +3334,8 @@ const fontAwesome5 = {
   close: "fas fa-times",
   edit: "fas fa-pencil-alt",
   save: "fas fa-save",
-  copy: "fas fa-clipboard"
+  copy: "fas fa-clipboard",
+  switcher: "fas fa-chevron-down"
 };
 const fontAwesome6 = {
   properties: "fa-solid fa-list",
@@ -3345,7 +3350,8 @@ const fontAwesome6 = {
   close: "fa-solid fa-xmark",
   edit: "fa-solid fa-pencil",
   save: "fa-solid fa-floppy-disk",
-  copy: "fa-solid fa-clipboard"
+  copy: "fa-solid fa-clipboard",
+  switcher: "fa-solid fa-chevron-down"
 };
 class EditorBoolean extends Editor {
   sanitize(value) {
@@ -3364,6 +3370,7 @@ class EditorRadios extends EditorBoolean {
       titles: getSchemaXOption(this.instance.schema, "enumTitles") || ["false", "true"],
       id: this.getIdFromPath(this.instance.path),
       titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass"),
       inline: getSchemaXOption(this.instance.schema, "format") === "radios-inline",
       info: this.getInfo()
     });
@@ -3436,6 +3443,7 @@ class EditorBooleanCheckbox extends EditorBoolean {
       description: this.getDescription(),
       id: this.getIdFromPath(this.instance.path),
       titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass"),
       info: this.getInfo()
     });
   }
@@ -4052,8 +4060,7 @@ class EditorObject extends Editor {
   static resolves(schema) {
     return getSchemaType(schema) === "object";
   }
-  build() {
-    this.propertyActivators = {};
+  getObjectControlConfig() {
     let addProperty = true;
     const additionalProperties2 = getSchemaAdditionalProperties(this.instance.schema);
     if (isSet(additionalProperties2) && additionalProperties2 === false) {
@@ -4071,7 +4078,7 @@ class EditorObject extends Editor {
     if (isSet(schemaEnablePropertiesToggle)) {
       enablePropertiesToggle = schemaEnablePropertiesToggle;
     }
-    this.control = this.theme.getObjectControl({
+    return {
       title: this.getTitle(),
       description: this.getDescription(),
       titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
@@ -4085,8 +4092,14 @@ class EditorObject extends Editor {
       editJsonData: getSchemaXOption(this.instance.schema, "editJsonData") ?? this.instance.jedison.getOption("editJsonData"),
       propertiesToggleContent: getSchemaXOption(this.instance.schema, "propertiesToggleContent") ?? this.instance.jedison.translator.translate("propertiesToggle"),
       collapseToggleContent: getSchemaXOption(this.instance.schema, "collapseToggleContent") ?? this.instance.jedison.translator.translate("collapseToggle"),
-      addPropertyContent: getSchemaXOption(this.instance.schema, "addPropertyContent") ?? this.instance.jedison.translator.translate("objectAddProperty")
-    });
+      addPropertyContent: getSchemaXOption(this.instance.schema, "addPropertyContent") ?? this.instance.jedison.translator.translate("objectAddProperty"),
+      isAccordion: false,
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass")
+    };
+  }
+  build() {
+    this.propertyActivators = {};
+    this.control = this.theme.getObjectControl(this.getObjectControlConfig());
     this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
   }
   announcePropertyAdded(propertyName, child) {
@@ -4531,6 +4544,32 @@ class EditorObjectNav extends EditorObject {
     });
   }
 }
+class EditorObjectAccordion extends EditorObject {
+  static resolves(schema) {
+    return getSchemaType(schema) === "object" && getSchemaXOption(schema, "format") === "accordion";
+  }
+  getObjectControlConfig() {
+    return { ...super.getObjectControlConfig(), isAccordionProperties: true };
+  }
+  refreshEditors() {
+    this.control.childrenSlot.replaceChildren();
+    const accordionId = this.control.childrenSlot.id;
+    this.instance.children.forEach((child) => {
+      if (!child.isActive) return;
+      const schemaTitle = getSchemaTitle(child.schema);
+      const title = isSet(schemaTitle) ? schemaTitle : child.getKey();
+      const id = this.getIdFromPath(child.path);
+      const accordionItem = this.theme.getAccordionItem({ title, id, accordionId });
+      accordionItem.body.appendChild(child.ui.control.container);
+      this.control.childrenSlot.appendChild(accordionItem.container);
+      if (this.disabled || this.instance.isReadOnly()) {
+        child.ui.disable();
+      } else {
+        child.ui.enable();
+      }
+    });
+  }
+}
 class EditorArray extends Editor {
   static resolves(schema) {
     return getSchemaType(schema) === "array";
@@ -4559,7 +4598,8 @@ class EditorArray extends Editor {
       arrayDeleteAllContent: getSchemaXOption(this.instance.schema, "arrayDeleteAllContent") ?? this.instance.jedison.translator.translate("arrayDeleteAll"),
       arrayFooterDeleteAll: getSchemaXOption(this.instance.schema, "arrayFooterDeleteAll") ?? this.instance.jedison.getOption("arrayFooterDeleteAll"),
       arrayFooterDeleteAllContent: getSchemaXOption(this.instance.schema, "arrayFooterDeleteAllContent") ?? this.instance.jedison.translator.translate("arrayDeleteAll"),
-      collapseToggleContent: getSchemaXOption(this.instance.schema, "collapseToggleContent") ?? this.instance.jedison.translator.translate("collapseToggle")
+      collapseToggleContent: getSchemaXOption(this.instance.schema, "collapseToggleContent") ?? this.instance.jedison.translator.translate("collapseToggle"),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass")
     });
     this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
   }
@@ -5470,8 +5510,18 @@ class EditorMultiple extends Editor {
         });
       });
     }
+    if (this.switcherInput === "modal") {
+      this.control.switcher.optionButtons.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          const index2 = Number(btn.dataset.switcherValue);
+          this.control.switcher.dialog.close();
+          this.instance.switchInstance(index2, void 0, "user");
+        });
+      });
+    }
   }
   refreshUI() {
+    var _a;
     this.refreshDisabledState();
     this.control.childrenSlot.innerHTML = "";
     this.control.childrenSlot.appendChild(this.instance.activeInstance.ui.control.container);
@@ -5486,6 +5536,20 @@ class EditorMultiple extends Editor {
         this.control.header.appendChild(this.control.switcher.container);
       }
     }
+    if (this.switcherInput === "modal") {
+      const childControl = this.instance.activeInstance.ui.control;
+      const infoContainer = childControl.infoContainer;
+      const titleEl = childControl.legendText || childControl.label;
+      if (infoContainer) {
+        infoContainer.after(this.control.switcher.container);
+        this.control.header.style.display = "none";
+      } else if (titleEl) {
+        const infoEl = (_a = childControl.info) == null ? void 0 : _a.container;
+        const anchor = infoEl && infoEl.parentNode ? infoEl : titleEl;
+        anchor.after(this.control.switcher.container);
+        this.control.header.style.display = "none";
+      }
+    }
     if (this.switcherInput === "select") {
       this.control.switcher.input.value = this.instance.index;
     }
@@ -5495,6 +5559,12 @@ class EditorMultiple extends Editor {
         radio.checked = radioIndex === this.instance.index;
       });
     }
+    if (this.switcherInput === "modal") {
+      this.control.switcher.triggerText.textContent = this.instance.switcherOptionsLabels[this.instance.index];
+      this.control.switcher.optionButtons.forEach((btn, index2) => {
+        this.theme.setSwitcherOptionActive(btn, index2 === this.instance.index);
+      });
+    }
     if (this.disabled || this.instance.isReadOnly()) {
       this.instance.activeInstance.ui.disable();
     } else {
@@ -5995,6 +6065,48 @@ class EditorArrayCheckboxes extends Editor {
     }
     return getSchemaEnum(this.instance.schema.items) || [];
   }
+  isSortable() {
+    return window.Sortable && isSet(getSchemaXOption(this.instance.schema, "sortable"));
+  }
+  addDragHandles() {
+    if (!this.isSortable()) return;
+    this.control.checkboxControls.forEach((checkboxControl, index2) => {
+      if (checkboxControl.classList.contains("jedi-checkbox-control")) return;
+      const wrapper = document.createElement("div");
+      wrapper.classList.add("jedi-checkbox-control");
+      wrapper.style.display = "flex";
+      wrapper.style.alignItems = "baseline";
+      const dragBtn = this.theme.getDragItemBtn({
+        content: this.instance.jedison.translator.translate("arrayDrag")
+      });
+      checkboxControl.parentNode.insertBefore(wrapper, checkboxControl);
+      wrapper.appendChild(dragBtn);
+      wrapper.appendChild(checkboxControl);
+      this.control.checkboxControls[index2] = wrapper;
+    });
+  }
+  refreshSortable() {
+    if (this.isSortable()) {
+      if (this.sortable) {
+        this.sortable.destroy();
+      }
+      this.sortable = window.Sortable.create(this.control.fieldset, {
+        animation: 150,
+        handle: ".jedi-array-drag",
+        draggable: ".jedi-checkbox-control",
+        disabled: this.disabled || this.readOnly,
+        onEnd: () => {
+          const sorted = Array.from(this.control.fieldset.querySelectorAll(".jedi-checkbox-control"));
+          this.control.checkboxControls = sorted;
+          this.control.checkboxes = sorted.map((cc) => cc.querySelector('input[type="checkbox"]'));
+          this.control.labels = sorted.map((cc) => cc.querySelector("label"));
+          this.control.labelTexts = sorted.map((cc) => cc.querySelector("label span"));
+          const newValue = this.control.checkboxes.filter((cb) => cb.checked).map((cb) => cb.value);
+          this.instance.setValue(newValue, true, "user");
+        }
+      });
+    }
+  }
   build() {
     const values = this.getEnumSourceValues();
     const schemaItems = this.instance.schema.items || {};
@@ -6009,6 +6121,7 @@ class EditorArrayCheckboxes extends Editor {
       inline: getSchemaXOption(this.instance.schema, "format") === "checkboxes-inline",
       info: this.getInfo()
     });
+    this.addDragHandles();
   }
   refreshOptions() {
     const values = this.getEnumSourceValues();
@@ -6047,6 +6160,7 @@ class EditorArrayCheckboxes extends Editor {
       this.control.checkboxControls.push(checkboxControl);
       this.control.fieldset.insertBefore(checkboxControl, this.control.description);
     });
+    this.addDragHandles();
     this.addEventListeners();
     this.refreshUI();
   }
@@ -6081,6 +6195,7 @@ class EditorArrayCheckboxes extends Editor {
     this.control.checkboxes.forEach((checkbox) => {
       checkbox.checked = value.includes(checkbox.value);
     });
+    this.refreshSortable();
   }
   setAriaInvalid(invalid) {
     this.control.checkboxes.forEach((checkbox) => {
@@ -6257,6 +6372,69 @@ class EditorStringAce extends EditorString {
     }
   }
 }
+class EditorStringFilepond extends EditorString {
+  static resolves(schema) {
+    const format2 = getSchemaXOption(schema, "format");
+    return isSet(format2) && format2 === "filepond" && window.FilePond && getSchemaType(schema) === "string";
+  }
+  build() {
+    this.control = this.theme.getInputControl({
+      title: this.getTitle(),
+      description: this.getDescription(),
+      type: "file",
+      id: this.getIdFromPath(this.instance.path),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass"),
+      titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      info: this.getInfo()
+    });
+    try {
+      const schemaFilepond = getSchemaXOption(this.instance.schema, "filepond") ?? {};
+      const settingsKey = schemaFilepond["x-settings"];
+      const settings = settingsKey && this.instance.jedison.getOption("settings")[settingsKey] ? this.instance.jedison.getOption("settings")[settingsKey] : {};
+      const filepondOptions = { ...schemaFilepond, ...settings };
+      this.hasServer = !!filepondOptions.server;
+      this.filepond = window.FilePond.create(this.control.input, filepondOptions);
+      this.filepond.on("processfile", (error, file) => {
+        if (error) return;
+        const serverIds = this.filepond.getFiles().filter((f) => f.serverId).map((f) => f.serverId);
+        this.instance.setValue(serverIds.join(", "), true, "user");
+      });
+      this.filepond.on("addfile", (error) => {
+        if (error || this.hasServer) return;
+        const names = this.filepond.getFiles().map((f) => f.filename).join(", ");
+        this.instance.setValue(names, true, "user");
+      });
+      this.filepond.on("processfilerevert", () => {
+        const serverIds = this.filepond.getFiles().filter((f) => f.serverId).map((f) => f.serverId);
+        this.instance.setValue(serverIds.join(", "), true, "user");
+      });
+      this.filepond.on("removefile", () => {
+        const remaining = this.filepond.getFiles();
+        if (this.hasServer) {
+          const serverIds = remaining.filter((f) => f.serverId).map((f) => f.serverId);
+          this.instance.setValue(serverIds.join(", "), true, "user");
+        } else {
+          this.instance.setValue(remaining.map((f) => f.filename).join(", "), true, "user");
+        }
+      });
+    } catch (e) {
+      console.error("FilePond is not available or not loaded correctly.", e);
+    }
+  }
+  addEventListeners() {
+  }
+  refreshUI() {
+    if (!this.filepond) return;
+    this.refreshTemplates();
+    this.filepond.setOptions({ disabled: this.disabled || this.readOnly });
+  }
+  destroy() {
+    if (this.filepond) {
+      this.filepond.destroy();
+    }
+    super.destroy();
+  }
+}
 class UiResolver {
   constructor(options) {
     this.customEditors = options.customEditors ?? [];
@@ -6281,6 +6459,7 @@ class UiResolver {
       EditorStringFlatpickr,
       EditorStringIMask,
       EditorStringAce,
+      EditorStringFilepond,
       EditorStringInput,
       EditorNumberIMask,
       EditorNumberRaty,
@@ -6291,6 +6470,7 @@ class UiResolver {
       EditorObjectGrid,
       EditorObjectCategories,
       EditorObjectNav,
+      EditorObjectAccordion,
       EditorObject,
       EditorArrayChoices,
       EditorArrayCheckboxes,
@@ -7297,6 +7477,7 @@ class Theme {
     const right = document.createElement("div");
     const legend = document.createElement("legend");
     const legendText = document.createElement("label");
+    const icon = document.createElement("i");
     const infoContainer = document.createElement("span");
     const dummyInput = document.createElement("input");
     const legendLabelId = "legend-label-" + config.id;
@@ -7312,6 +7493,11 @@ class Theme {
     legendText.classList.add("jedi-legend");
     legendText.setAttribute("id", legendLabelId);
     legendText.innerHTML = config.content;
+    if (config.titleIconClass) {
+      this.addIconClass(icon, config.titleIconClass);
+      icon.style.marginRight = "4px";
+    }
+    legendText.style.marginRight = "4px";
     infoContainer.classList.add("jedi-editor-info-container");
     infoContainer.setAttribute("for", dummyInputId);
     dummyInput.setAttribute("aria-hidden", "true");
@@ -7323,6 +7509,9 @@ class Theme {
     }
     legend.appendChild(left);
     legend.appendChild(right);
+    if (config.titleIconClass) {
+      left.appendChild(icon);
+    }
     left.appendChild(legendText);
     left.appendChild(infoContainer);
     legendText.appendChild(dummyInput);
@@ -7346,6 +7535,7 @@ class Theme {
     const legendLabelId = "legend-label-" + config.id;
     const legend = document.createElement("legend");
     const legendText = document.createElement("label");
+    const icon = document.createElement("i");
     const dummyInput = document.createElement("input");
     legend.classList.add("jedi-editor-legend");
     legend.style.fontSize = "inherit";
@@ -7354,13 +7544,19 @@ class Theme {
     legendText.classList.add("jedi-label");
     legendText.innerHTML = config.content;
     legendText.setAttribute("id", legendLabelId);
+    legendText.style.marginRight = "4px";
     dummyInput.setAttribute("aria-hidden", "true");
     dummyInput.setAttribute("type", "hidden");
     dummyInput.setAttribute("disabled", "");
     this.visuallyHidden(dummyInput);
+    if (config.titleIconClass) {
+      this.addIconClass(icon, config.titleIconClass);
+      icon.style.marginRight = "4px";
+      legend.appendChild(icon);
+    }
     legend.appendChild(legendText);
     legendText.appendChild(dummyInput);
-    return { legend, legendText };
+    return { legend, legendText, icon };
   }
   /**
    * Represents a caption for the content of its parent fieldset
@@ -7378,10 +7574,12 @@ class Theme {
     }
     if (config.titleIconClass) {
       this.addIconClass(icon, config.titleIconClass);
+      icon.style.marginRight = "4px";
     }
     if (config.titleIconClass) {
       label.appendChild(icon);
     }
+    labelText.style.marginRight = "4px";
     label.appendChild(labelText);
     return { label, labelText, icon };
   }
@@ -7399,13 +7597,17 @@ class Theme {
     labelText.innerHTML = config.content;
     if (config.titleIconClass) {
       this.addIconClass(icon, config.titleIconClass);
+      icon.style.marginRight = "4px";
     }
     dummyInput.setAttribute("aria-hidden", "true");
     dummyInput.setAttribute("type", "hidden");
     dummyInput.setAttribute("disabled", "");
     dummyInput.setAttribute("id", config.for);
     this.visuallyHidden(dummyInput);
-    label.appendChild(icon);
+    if (config.titleIconClass) {
+      label.appendChild(icon);
+    }
+    labelText.style.marginRight = "4px";
     label.appendChild(labelText);
     label.appendChild(dummyInput);
     return { label, labelText, icon, dummyInput };
@@ -7570,31 +7772,27 @@ class Theme {
         }
       });
     }
-    let collapsed = config.startCollapsed;
-    if (collapsed) {
-      toggle.setAttribute("aria-expanded", "false");
-    } else {
-      toggle.setAttribute("aria-expanded", "true");
-    }
     toggle.style.transition = "transform 0.1s ease";
-    if (collapsed) {
-      toggle.style.transform = "rotate(90deg)";
+    if (config.startCollapsed) {
+      toggle.classList.add("collapsed");
     }
-    toggle.addEventListener("click", () => {
-      if (collapsed) {
-        toggle.style.transform = "rotate(0deg)";
-      } else {
-        toggle.style.transform = "rotate(90deg)";
-      }
-      collapsed = !collapsed;
-    });
+    const syncState = () => {
+      const collapsed = toggle.classList.contains("collapsed");
+      toggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+      toggle.style.transform = collapsed ? "rotate(90deg)" : "rotate(0deg)";
+    };
+    syncState();
+    if (this.useToggleEvents) {
+      toggle.addEventListener("click", () => toggle.classList.toggle("collapsed"));
+    }
+    new MutationObserver(syncState).observe(toggle, { attributes: true, attributeFilter: ["class"] });
     return toggle;
   }
   /**
    * Container for properties editing elements like property activators
    */
   getPropertiesSlot(config) {
-    const html = document.createElement("dialog");
+    const html = this.getDialog();
     html.classList.add("jedi-properties-slot");
     html.setAttribute("id", config.id);
     html.addEventListener("click", (event) => {
@@ -7605,7 +7803,7 @@ class Theme {
     return html;
   }
   getQuickAddPropertySlot(config) {
-    const html = document.createElement("dialog");
+    const html = this.getDialog();
     html.classList.add("jedi-quick-add-property-slot");
     html.setAttribute("id", config.id);
     html.addEventListener("click", (event) => {
@@ -7619,7 +7817,7 @@ class Theme {
    * Container for properties editing elements like property activators
    */
   getJsonData(config) {
-    const dialog = document.createElement("dialog");
+    const dialog = this.getDialog();
     dialog.classList.add("jedi-json-data");
     dialog.setAttribute("id", config.id);
     dialog.addEventListener("click", (event) => {
@@ -7862,7 +8060,6 @@ class Theme {
     container.style.display = "inline-block";
     info.setAttribute("href", "#");
     info.classList.add("jedi-info-button");
-    info.style.marginLeft = "4px";
     if (isObject(config.attributes)) {
       for (const [key, value] of Object.entries(config.attributes)) {
         info.setAttribute(key, value);
@@ -7881,18 +8078,28 @@ class Theme {
     container.appendChild(info);
     return { container, info };
   }
+  /**
+   * Creates a base native <dialog> element with shared styling
+   */
+  getDialog() {
+    const dialog = document.createElement("dialog");
+    dialog.classList.add("jedi-modal-dialog");
+    dialog.style.border = "1px solid #6c757d";
+    dialog.style.borderRadius = "4px";
+    dialog.style.minWidth = "200px";
+    return dialog;
+  }
   /**
    * Dialog or modal that contains extra information about the control
    */
   infoAsModal(info, id, config = {}) {
-    const dialog = document.createElement("dialog");
+    const dialog = this.getDialog();
     const title = document.createElement("div");
     const content = document.createElement("div");
     const closeBtn = this.getButton({
       content: "Close",
       icon: "close"
     });
-    dialog.classList.add("jedi-modal-dialog");
     dialog.setAttribute("id", id + "-modal");
     title.classList.add("jedi-modal-title");
     if (isString(config.title)) {
@@ -7946,13 +8153,13 @@ class Theme {
     }
     container.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(placeholder);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, placeholder, label, labelText, description, messages, actions };
+    return { container, placeholder, label, info, labelText, description, messages, actions };
   }
   /**
    * Object control is a card containing multiple editors.
@@ -7968,6 +8175,9 @@ class Theme {
     const ariaLive = this.getPropertiesAriaLive();
     const messages = this.getMessagesSlot();
     const childrenSlot = this.getChildrenSlot();
+    if (config.isAccordion || config.isAccordionProperties) {
+      childrenSlot.id = "accordion-" + config.id;
+    }
     const propertiesActivators = this.getPropertiesActivators();
     const info = this.getInfo(config.info);
     const description = this.getDescription({
@@ -8018,7 +8228,8 @@ class Theme {
     const { legend, infoContainer, legendText, right } = this.getLegend({
       content: config.title,
       id: config.id,
-      titleHidden: config.titleHidden
+      titleHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     if (((_a = config == null ? void 0 : config.info) == null ? void 0 : _a.variant) === "modal") {
       this.infoAsModal(info, config.id, config.info);
@@ -8035,7 +8246,9 @@ class Theme {
     }
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      infoContainer.appendChild(info.container);
+      while (info.container.firstChild) {
+        infoContainer.appendChild(info.container.firstChild);
+      }
     }
     fieldset.appendChild(collapse);
     collapse.appendChild(body);
@@ -8089,6 +8302,57 @@ class Theme {
       switcherSlot
     };
   }
+  /**
+   * Returns an accordion item wrapping a child editor.
+   * Used by EditorObjectAccordionProperties to wrap each property.
+   */
+  getAccordionItem(config) {
+    const container = document.createElement("div");
+    container.classList.add("jedi-accordion-item");
+    const header = document.createElement("div");
+    header.classList.add("jedi-accordion-header");
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.classList.add("jedi-accordion-toggle", "collapsed");
+    const chevron = document.createElement("i");
+    chevron.classList.add("jedi-accordion-chevron");
+    if (this.icons && this.icons["collapse"]) {
+      this.addIconClass(chevron, this.icons["collapse"]);
+    } else {
+      chevron.textContent = "▾";
+    }
+    chevron.style.display = "inline-block";
+    chevron.style.transition = "transform 0.1s ease";
+    chevron.style.marginRight = "0.5em";
+    toggle.appendChild(chevron);
+    toggle.appendChild(document.createTextNode(config.title));
+    const collapse = document.createElement("div");
+    collapse.classList.add("jedi-accordion-collapse");
+    collapse.style.display = "none";
+    const body = document.createElement("div");
+    body.classList.add("jedi-accordion-body");
+    const syncState = () => {
+      const collapsed = toggle.classList.contains("collapsed");
+      chevron.style.transform = collapsed ? "rotate(0deg)" : "rotate(-180deg)";
+    };
+    syncState();
+    if (this.useToggleEvents) {
+      toggle.addEventListener("click", () => {
+        if (collapse.style.display === "none") {
+          collapse.style.display = "block";
+        } else {
+          collapse.style.display = "none";
+        }
+        toggle.classList.toggle("collapsed");
+      });
+    }
+    new MutationObserver(syncState).observe(toggle, { attributes: true, attributeFilter: ["class"] });
+    header.appendChild(toggle);
+    collapse.appendChild(body);
+    container.appendChild(header);
+    container.appendChild(collapse);
+    return { container, header, toggle, collapse, body };
+  }
   /**
    * Array control is a card containing multiple editors.
    * Items can bve added, deleted or moved up or down.
@@ -8117,7 +8381,8 @@ class Theme {
     const { legend, legendText, infoContainer, right } = this.getLegend({
       content: config.title,
       id: config.id,
-      titleHidden: config.titleHidden
+      titleHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     const description = this.getDescription({
       content: config.description
@@ -8146,7 +8411,9 @@ class Theme {
     }
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      infoContainer.appendChild(info.container);
+      while (info.container.firstChild) {
+        infoContainer.appendChild(info.container.firstChild);
+      }
     }
     fieldset.appendChild(collapse);
     collapse.appendChild(body);
@@ -8201,6 +8468,7 @@ class Theme {
       jsonData,
       legend,
       legendText,
+      infoContainer,
       switcherSlot,
       footerAddBtn,
       deleteAllBtn,
@@ -8240,7 +8508,7 @@ class Theme {
     const messages = this.getMessagesSlot();
     const childrenSlot = this.getChildrenSlot();
     const randomId = generateRandomID(5);
-    const knownSwitchers = ["select", "radios", "radios-inline"];
+    const knownSwitchers = ["select", "radios", "radios-inline", "modal"];
     const switcherType = knownSwitchers.includes(config.switcher) ? config.switcher : "select";
     let switcher;
     if (switcherType === "select") {
@@ -8268,6 +8536,14 @@ class Theme {
         noSpacing: true
       });
     }
+    if (switcherType === "modal") {
+      switcher = this.getSwitcherModal({
+        values: config.switcherOptionValues,
+        titles: config.switcherOptionsLabels,
+        id: config.id + "-switcher-" + randomId,
+        readOnly: config.readOnly
+      });
+    }
     switcher.container.classList.add("jedi-switcher");
     container.appendChild(header);
     container.appendChild(body);
@@ -8338,13 +8614,13 @@ class Theme {
     }
     container.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(br);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, label, labelText, description, messages, actions };
+    return { container, label, info, labelText, description, messages, actions };
   }
   /**
    * A Textarea
@@ -8361,7 +8637,8 @@ class Theme {
     const { label, labelText } = this.getLabel({
       for: config.id,
       text: config.title,
-      visuallyHidden: config.titleHidden
+      visuallyHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     const description = this.getDescription({
       content: config.description,
@@ -8379,13 +8656,13 @@ class Theme {
     }
     container.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(input);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, input, label, labelText, description, messages, actions };
+    return { container, input, label, info, labelText, description, messages, actions };
   }
   adaptForTableTextareaControl(control) {
     this.visuallyHidden(control.label);
@@ -8427,7 +8704,7 @@ class Theme {
       this.infoAsModal(info, config.id, config.info);
     }
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(input);
     container.appendChild(description);
@@ -8461,7 +8738,8 @@ class Theme {
     const { legend, legendText } = this.getRadioLegend({
       content: config.title,
       id: config.id,
-      for: config.id
+      for: config.id,
+      titleIconClass: config.titleIconClass
     });
     const messages = this.getMessagesSlot({
       id: messagesId
@@ -8505,7 +8783,7 @@ class Theme {
     container.appendChild(fieldset);
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      legendText.appendChild(info.container);
+      legendText.after(info.container);
     }
     radioControls.forEach((radioControl, index2) => {
       fieldset.appendChild(radioControls[index2]);
@@ -8549,7 +8827,8 @@ class Theme {
     const { label, labelText } = this.getLabel({
       for: config.id,
       text: config.title,
-      visuallyHidden: config.titleHidden
+      visuallyHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     const description = this.getDescription({
       content: config.description,
@@ -8570,7 +8849,7 @@ class Theme {
     formGroup.appendChild(input);
     formGroup.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      formGroup.appendChild(info.container);
     }
     formGroup.appendChild(description);
     formGroup.appendChild(messages);
@@ -8590,7 +8869,8 @@ class Theme {
     const { legend, legendText } = this.getRadioLegend({
       content: config.title,
       id: config.id,
-      for: config.id
+      for: config.id,
+      titleIconClass: config.titleIconClass
     });
     const messages = this.getMessagesSlot({
       id: messagesId
@@ -8633,7 +8913,7 @@ class Theme {
     container.appendChild(fieldset);
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      legendText.appendChild(info.container);
+      legendText.after(info.container);
     }
     checkboxControls.forEach((checkboxControl, index2) => {
       fieldset.appendChild(checkboxControls[index2]);
@@ -8675,7 +8955,8 @@ class Theme {
     const { label, labelText } = this.getLabel({
       for: config.id,
       text: config.title,
-      visuallyHidden: config.titleHidden
+      visuallyHidden: config.titleHidden,
+      titleIconClass: config.titleIconClass
     });
     const messages = this.getMessagesSlot({
       id: messagesId
@@ -8700,7 +8981,7 @@ class Theme {
     }
     container.appendChild(label);
     if (isObject(config.info)) {
-      label.appendChild(info.container);
+      container.appendChild(info.container);
     }
     container.appendChild(input);
     container.appendChild(description);
@@ -8724,6 +9005,62 @@ class Theme {
   getSwitcherRadios(config) {
     return this.getRadiosControl(config);
   }
+  /**
+   * Compact badge-button trigger that opens a modal to switch between multiple editors options
+   */
+  getSwitcherModal(config) {
+    const container = document.createElement("span");
+    const trigger = document.createElement("span");
+    const dialog = this.getDialog();
+    const dialogBody = document.createElement("div");
+    const optionButtons = [];
+    const triggerText = document.createElement("span");
+    const triggerIcon = document.createElement("i");
+    container.classList.add("jedi-switcher-modal");
+    trigger.classList.add("jedi-switcher-modal-trigger");
+    trigger.setAttribute("role", "button");
+    trigger.setAttribute("tabindex", "0");
+    trigger.setAttribute("aria-haspopup", "dialog");
+    trigger.setAttribute("aria-label", "Switch type");
+    trigger.appendChild(triggerText);
+    if (this.icons && this.icons.switcher) {
+      this.addIconClass(triggerIcon, this.icons.switcher);
+      trigger.appendChild(document.createTextNode(" "));
+      trigger.appendChild(triggerIcon);
+    }
+    dialogBody.classList.add("jedi-modal-content");
+    config.values.forEach((value, index2) => {
+      const btn = document.createElement("button");
+      btn.setAttribute("type", "button");
+      btn.setAttribute("aria-label", `Select: ${config.titles[index2]}`);
+      btn.textContent = config.titles[index2];
+      btn.dataset.switcherValue = value;
+      btn.classList.add("jedi-switcher-option-btn");
+      optionButtons.push(btn);
+      dialogBody.appendChild(btn);
+    });
+    trigger.addEventListener("click", () => {
+      dialog.showModal();
+    });
+    trigger.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        dialog.showModal();
+      }
+    });
+    dialog.addEventListener("click", (event) => {
+      if (event.target === dialog) {
+        dialog.close();
+      }
+    });
+    container.appendChild(trigger);
+    container.appendChild(dialog);
+    dialog.appendChild(dialogBody);
+    return { container, trigger, triggerText, dialog, dialogBody, optionButtons };
+  }
+  setSwitcherOptionActive(btn, active) {
+    btn.classList.toggle("jedi-switcher-option-active", active);
+  }
   /**
    * Another type of error message container used for more complex editors like
    * object, array and multiple editors
@@ -8935,6 +9272,74 @@ class ThemeBootstrap3 extends Theme {
     }
     return collapse;
   }
+  getObjectControl(config) {
+    const control = super.getObjectControl(config);
+    if (config.isAccordion) {
+      const { childrenSlot } = control;
+      childrenSlot.classList.add("panel-group");
+      const accordionId = childrenSlot.id;
+      const originalAppendChild = childrenSlot.appendChild.bind(childrenSlot);
+      childrenSlot.appendChild = (child) => {
+        const collapse = child.querySelector(".collapse");
+        if (collapse) {
+          collapse.classList.remove("in");
+          collapse.classList.add("panel-collapse");
+        }
+        const collapseToggle = child.querySelector(".jedi-collapse-toggle");
+        if (collapseToggle) {
+          collapseToggle.setAttribute("data-parent", "#" + accordionId);
+        }
+        return originalAppendChild(child);
+      };
+    }
+    if (config.isAccordionProperties) {
+      control.childrenSlot.classList.add("panel-group");
+    }
+    return control;
+  }
+  getAccordionItem(config) {
+    const collapseId = config.id + "-acc-collapse";
+    const container = document.createElement("div");
+    container.classList.add("panel", "panel-default");
+    const header = document.createElement("div");
+    header.classList.add("panel-heading", "collapsed");
+    header.setAttribute("data-toggle", "collapse");
+    header.setAttribute("data-parent", "#" + config.accordionId);
+    header.setAttribute("href", "#" + collapseId);
+    header.style.cursor = "pointer";
+    const title = document.createElement("h4");
+    title.classList.add("panel-title");
+    const toggle = document.createElement("a");
+    const chevron = document.createElement("i");
+    chevron.classList.add("jedi-accordion-chevron");
+    if (this.icons && this.icons["collapse"]) {
+      this.addIconClass(chevron, this.icons["collapse"]);
+    } else {
+      chevron.textContent = "▾";
+    }
+    chevron.style.display = "inline-block";
+    chevron.style.transition = "transform 0.1s ease";
+    chevron.style.marginRight = "0.5em";
+    toggle.appendChild(chevron);
+    toggle.appendChild(document.createTextNode(config.title));
+    const collapse = document.createElement("div");
+    collapse.id = collapseId;
+    collapse.classList.add("panel-collapse", "collapse");
+    const syncState = () => {
+      const collapsed = header.classList.contains("collapsed");
+      chevron.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)";
+    };
+    syncState();
+    new MutationObserver(syncState).observe(header, { attributes: true, attributeFilter: ["class"] });
+    const body = document.createElement("div");
+    body.classList.add("panel-body", "p-0");
+    title.appendChild(toggle);
+    header.appendChild(title);
+    collapse.appendChild(body);
+    container.appendChild(header);
+    container.appendChild(collapse);
+    return { container, header, toggle, collapse, body };
+  }
   getJsonData(config) {
     const jsonData = super.getJsonData(config);
     jsonData.control.classList.add("form-group");
@@ -8954,13 +9359,14 @@ class ThemeBootstrap3 extends Theme {
   }
   getLegend(config) {
     const superLegend = super.getLegend(config);
-    const { legend } = superLegend;
+    const { legend, infoContainer } = superLegend;
     legend.classList.add("panel-heading");
     legend.classList.add("pull-left");
     legend.style.margin = "0";
     legend.style.display = "flex";
     legend.style.justifyContent = "space-between";
     legend.style.alignItems = "center";
+    infoContainer.style.marginRight = "4px";
     return superLegend;
   }
   getRadioLegend(config) {
@@ -8972,11 +9378,12 @@ class ThemeBootstrap3 extends Theme {
     return superRadioLegend;
   }
   getLabel(config) {
-    const labelObj = super.getLabel(config);
-    if (labelObj.icon.classList) {
-      labelObj.icon.style.marginRight = "5px";
-    }
-    return labelObj;
+    return super.getLabel(config);
+  }
+  getInfo(config = {}) {
+    const info = super.getInfo(config);
+    info.container.style.marginRight = "4px";
+    return info;
   }
   getCard() {
     const card = super.getCard();
@@ -9136,6 +9543,26 @@ class ThemeBootstrap3 extends Theme {
     super.adaptForTableSelectControl(control, td);
     control.container.classList.remove("form-group");
   }
+  getSwitcherSelect(config) {
+    const control = super.getSwitcherSelect(config);
+    control.input.classList.add("input-sm");
+    return control;
+  }
+  getSwitcherModal(config) {
+    const control = super.getSwitcherModal(config);
+    control.trigger.classList.add("label", "label-primary");
+    control.dialogBody.classList.add("btn-group-vertical");
+    control.dialogBody.style.width = "100%";
+    control.optionButtons.forEach((btn) => {
+      btn.classList.add("btn", "btn-default", "btn-block");
+    });
+    return control;
+  }
+  setSwitcherOptionActive(btn, active) {
+    super.setSwitcherOptionActive(btn, active);
+    btn.classList.toggle("btn-primary", active);
+    btn.classList.toggle("btn-default", !active);
+  }
   adaptForTableMultipleControl(control, td) {
     super.adaptForTableMultipleControl(control, td);
   }
@@ -9188,7 +9615,7 @@ class ThemeBootstrap3 extends Theme {
     tab.link.style.display = "flex";
     tab.link.style.alignItems = "center";
     tab.arrayActions.style.flexShrink = "0";
-    tab.arrayActions.style.whiteSpace = "nowrap";
+    tab.arrayActions.classList.add("text-nowrap");
     tab.text.style.flex = "1";
     tab.text.style.marginLeft = "5px";
     tab.text.style.marginRight = "5px";
@@ -9197,7 +9624,7 @@ class ThemeBootstrap3 extends Theme {
       if (warning) {
         tab.text.removeChild(warning);
         warning.style.flexShrink = "0";
-        warning.style.whiteSpace = "nowrap";
+        warning.classList.add("text-nowrap");
         tab.link.appendChild(warning);
       }
     }
@@ -9302,6 +9729,68 @@ class ThemeBootstrap4 extends Theme {
     }
     return collapse;
   }
+  getObjectControl(config) {
+    const control = super.getObjectControl(config);
+    if (config.isAccordion) {
+      const { childrenSlot } = control;
+      const accordionId = childrenSlot.id;
+      const originalAppendChild = childrenSlot.appendChild.bind(childrenSlot);
+      childrenSlot.appendChild = (child) => {
+        const collapse = child.querySelector(".collapse");
+        if (collapse) {
+          collapse.classList.remove("show");
+          collapse.setAttribute("data-parent", "#" + accordionId);
+        }
+        return originalAppendChild(child);
+      };
+    }
+    if (config.isAccordionProperties) {
+      control.childrenSlot.classList.add("accordion", "pb-3");
+    }
+    return control;
+  }
+  getAccordionItem(config) {
+    const collapseId = config.id + "-acc-collapse";
+    const container = document.createElement("div");
+    container.classList.add("card", "mb-0");
+    const header = document.createElement("div");
+    header.classList.add("card-header", "p-0");
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.classList.add("btn", "btn-link", "w-100", "text-left");
+    toggle.setAttribute("data-toggle", "collapse");
+    toggle.setAttribute("data-target", "#" + collapseId);
+    toggle.setAttribute("data-parent", "#" + config.accordionId);
+    toggle.classList.add("collapsed");
+    const chevron = document.createElement("i");
+    chevron.classList.add("jedi-accordion-chevron");
+    if (this.icons && this.icons["collapse"]) {
+      this.addIconClass(chevron, this.icons["collapse"]);
+    } else {
+      chevron.textContent = "▾";
+    }
+    chevron.classList.add("d-inline-block", "mr-2");
+    chevron.style.transition = "transform 0.1s ease";
+    toggle.appendChild(chevron);
+    toggle.appendChild(document.createTextNode(config.title));
+    const collapse = document.createElement("div");
+    collapse.id = collapseId;
+    collapse.classList.add("collapse");
+    collapse.setAttribute("data-parent", "#" + config.accordionId);
+    const syncState = () => {
+      const collapsed = toggle.classList.contains("collapsed");
+      chevron.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)";
+    };
+    syncState();
+    new MutationObserver(syncState).observe(toggle, { attributes: true, attributeFilter: ["class"] });
+    const body = document.createElement("div");
+    body.classList.add("card-body", "pb-0");
+    header.appendChild(toggle);
+    collapse.appendChild(body);
+    container.appendChild(header);
+    container.appendChild(collapse);
+    return { container, header, toggle, collapse, body };
+  }
   getJsonData(config) {
     const jsonData = super.getJsonData(config);
     jsonData.control.classList.add("form-group");
@@ -9321,21 +9810,23 @@ class ThemeBootstrap4 extends Theme {
   }
   getLegend(config) {
     const superLegend = super.getLegend(config);
-    const { legend } = superLegend;
+    const { legend, infoContainer } = superLegend;
     legend.classList.add("card-header");
     legend.classList.add("d-flex");
     legend.classList.add("justify-content-between");
     legend.classList.add("align-items-center");
     legend.classList.add("float-left");
     legend.classList.add("py-2");
+    infoContainer.classList.add("mr-1");
     return superLegend;
   }
   getLabel(config) {
-    const labelObj = super.getLabel(config);
-    if (labelObj.icon.classList) {
-      labelObj.icon.classList.add("mr-1");
-    }
-    return labelObj;
+    return super.getLabel(config);
+  }
+  getInfo(config = {}) {
+    const info = super.getInfo(config);
+    info.container.classList.add("mr-1");
+    return info;
   }
   getCard() {
     const card = super.getCard();
@@ -9453,7 +9944,7 @@ class ThemeBootstrap4 extends Theme {
     super.adaptForTableRadiosControl(control, td);
     control.container.classList.remove("form-group");
     control.fieldset.classList.remove("card");
-    control.fieldset.style.marginBottom = "0";
+    control.fieldset.classList.add("mb-0");
   }
   getCheckboxesControl(config) {
     const control = super.getCheckboxesControl(config);
@@ -9514,6 +10005,25 @@ class ThemeBootstrap4 extends Theme {
     super.adaptForTableSelectControl(control, td);
     control.container.classList.remove("form-group");
   }
+  getSwitcherSelect(config) {
+    const control = super.getSwitcherSelect(config);
+    control.input.classList.add("form-control-sm");
+    return control;
+  }
+  getSwitcherModal(config) {
+    const control = super.getSwitcherModal(config);
+    control.trigger.classList.add("badge", "badge-primary");
+    control.dialogBody.classList.add("btn-group", "btn-group-vertical", "w-100");
+    control.optionButtons.forEach((btn) => {
+      btn.classList.add("btn", "btn-light");
+    });
+    return control;
+  }
+  setSwitcherOptionActive(btn, active) {
+    super.setSwitcherOptionActive(btn, active);
+    btn.classList.toggle("btn-primary", active);
+    btn.classList.toggle("btn-light", !active);
+  }
   adaptForTableMultipleControl(control, td) {
     super.adaptForTableMultipleControl(control, td);
     control.container.classList.remove("mb-3");
@@ -9632,7 +10142,6 @@ class ThemeBootstrap4 extends Theme {
     closeBtn.setAttribute("always-enabled", "");
     info.info.setAttribute("data-toggle", "modal");
     info.info.setAttribute("data-target", "#" + modalId);
-    info.container.classList.add("ml-1");
     modal.classList.add("modal");
     modal.classList.add("fade");
     modalDialog.classList.add("modal-dialog");
@@ -9688,6 +10197,74 @@ class ThemeBootstrap5 extends Theme {
     }
     return collapse;
   }
+  getObjectControl(config) {
+    const control = super.getObjectControl(config);
+    if (config.isAccordion) {
+      const { childrenSlot } = control;
+      const accordionId = childrenSlot.id;
+      const originalAppendChild = childrenSlot.appendChild.bind(childrenSlot);
+      childrenSlot.appendChild = (child) => {
+        const collapse = child.querySelector(".collapse");
+        if (collapse) {
+          collapse.classList.remove("show");
+          collapse.setAttribute("data-bs-parent", "#" + accordionId);
+        }
+        return originalAppendChild(child);
+      };
+    }
+    if (config.isAccordionProperties) {
+      control.childrenSlot.classList.add("accordion", "pb-3");
+    }
+    return control;
+  }
+  getAccordionItem(config) {
+    const collapseId = config.id + "-acc-collapse";
+    const container = document.createElement("div");
+    container.classList.add("accordion-item");
+    const header = document.createElement("h2");
+    header.classList.add("accordion-header");
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.classList.add("accordion-button", "collapsed");
+    toggle.setAttribute("data-bs-toggle", "collapse");
+    toggle.setAttribute("data-bs-target", "#" + collapseId);
+    toggle.setAttribute("data-bs-parent", "#" + config.accordionId);
+    toggle.classList.add("jedi-accordion-button");
+    if (!document.getElementById("jedi-accordion-button-style")) {
+      const style = document.createElement("style");
+      style.id = "jedi-accordion-button-style";
+      style.textContent = ".jedi-accordion-button::after { display: none !important; }";
+      document.head.appendChild(style);
+    }
+    const chevron = document.createElement("i");
+    chevron.classList.add("jedi-accordion-chevron");
+    if (this.icons && this.icons["collapse"]) {
+      this.addIconClass(chevron, this.icons["collapse"]);
+    } else {
+      chevron.textContent = "▾";
+    }
+    chevron.classList.add("d-inline-block", "me-2");
+    chevron.style.transition = "transform 0.1s ease";
+    toggle.appendChild(chevron);
+    toggle.appendChild(document.createTextNode(config.title));
+    const collapse = document.createElement("div");
+    collapse.id = collapseId;
+    collapse.classList.add("accordion-collapse", "collapse");
+    collapse.setAttribute("data-bs-parent", "#" + config.accordionId);
+    const syncState = () => {
+      const collapsed = toggle.classList.contains("collapsed");
+      chevron.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)";
+    };
+    syncState();
+    new MutationObserver(syncState).observe(toggle, { attributes: true, attributeFilter: ["class"] });
+    const body = document.createElement("div");
+    body.classList.add("accordion-body", "pb-3");
+    header.appendChild(toggle);
+    collapse.appendChild(body);
+    container.appendChild(header);
+    container.appendChild(collapse);
+    return { container, header, toggle, collapse, body };
+  }
   getJsonData(config) {
     const jsonData = super.getJsonData(config);
     jsonData.control.classList.add("mb-3");
@@ -9707,24 +10284,28 @@ class ThemeBootstrap5 extends Theme {
   }
   getLegend(config) {
     const superLegend = super.getLegend(config);
-    const { legend } = superLegend;
+    const { legend, infoContainer } = superLegend;
     legend.classList.add("card-header");
     legend.classList.add("d-flex");
     legend.classList.add("justify-content-between");
     legend.classList.add("align-items-center");
     legend.classList.add("py-2");
+    infoContainer.classList.add("me-1");
     return superLegend;
   }
   styleLegendWarning(span) {
-    span.classList.add("ms-1");
+    span.classList.add("me-1");
   }
   getLabel(config) {
     const labelObj = super.getLabel(config);
-    if (labelObj.icon.classList) {
-      labelObj.icon.classList.add("me-1");
-    }
+    labelObj.label.classList.add("mb-1");
     return labelObj;
   }
+  getInfo(config = {}) {
+    const info = super.getInfo(config);
+    info.container.classList.add("me-1");
+    return info;
+  }
   getCard() {
     const card = super.getCard();
     card.classList.add("card");
@@ -9844,7 +10425,7 @@ class ThemeBootstrap5 extends Theme {
     super.adaptForTableRadiosControl(control, td);
     control.container.classList.remove("mb-3");
     control.fieldset.classList.remove("card");
-    control.fieldset.style.marginBottom = "0";
+    control.fieldset.classList.add("mb-0");
   }
   getCheckboxesControl(config) {
     const control = super.getCheckboxesControl(config);
@@ -9898,6 +10479,25 @@ class ThemeBootstrap5 extends Theme {
     super.adaptForTableSelectControl(control, td);
     control.container.classList.remove("mb-3");
   }
+  getSwitcherSelect(config) {
+    const control = super.getSwitcherSelect(config);
+    control.input.classList.add("form-select-sm");
+    return control;
+  }
+  getSwitcherModal(config) {
+    const control = super.getSwitcherModal(config);
+    control.trigger.classList.add("badge", "bg-primary");
+    control.dialogBody.classList.add("btn-group", "btn-group-vertical", "w-100");
+    control.optionButtons.forEach((btn) => {
+      btn.classList.add("btn", "btn-light");
+    });
+    return control;
+  }
+  setSwitcherOptionActive(btn, active) {
+    super.setSwitcherOptionActive(btn, active);
+    btn.classList.toggle("btn-primary", active);
+    btn.classList.toggle("btn-light", !active);
+  }
   adaptForTableMultipleControl(control, td) {
     super.adaptForTableMultipleControl(control, td);
     control.container.classList.remove("mb-3");
@@ -10013,7 +10613,6 @@ class ThemeBootstrap5 extends Theme {
     closeBtn.setAttribute("always-enabled", "");
     info.info.setAttribute("data-bs-toggle", "modal");
     info.info.setAttribute("data-bs-target", "#" + modalId);
-    info.container.classList.add("ms-1");
     modal.classList.add("modal");
     modal.classList.add("fade");
     modalDialog.classList.add("modal-dialog");
@@ -10066,6 +10665,7 @@ const index = {
   EditorObjectGrid,
   EditorObjectCategories,
   EditorObjectNav,
+  EditorObjectAccordion,
   EditorObject,
   EditorArrayChoices,
   EditorArrayNav,