jedison 1.15.0 → 1.16.0

package/dist/esm/jedison.js

@@ -116,6 +116,36 @@ function getType(value) {
   }
   return type2;
 }
+const DEFAULT_ATTRIBUTE_ALLOWLIST = [
+  "id",
+  "class",
+  "title",
+  "name",
+  "value",
+  "disabled",
+  "always-enabled",
+  "always-disabled"
+];
+const DEFAULT_ATTRIBUTE_ALLOWED_PREFIXES = ["aria-", "data-"];
+function filterAttributes(attributes, options = {}) {
+  const {
+    allowlist = DEFAULT_ATTRIBUTE_ALLOWLIST,
+    allowedPrefixes = DEFAULT_ATTRIBUTE_ALLOWED_PREFIXES
+  } = options;
+  const result = {};
+  if (!isObject(attributes)) {
+    return result;
+  }
+  const allowed = new Set(allowlist.map((name) => name.toLowerCase()));
+  for (const [key, value] of Object.entries(attributes)) {
+    const normalizedKey = key.trim().toLowerCase();
+    const isAllowed = allowed.has(normalizedKey) || allowedPrefixes.some((prefix) => normalizedKey.startsWith(prefix));
+    if (isAllowed) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
 const UNSAFE_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 function mergeDeep(target, ...sources) {
   if (!sources.length) return target;
@@ -148,14 +178,14 @@ function combineDeep(target, ...sources) {
     Object.keys(source).forEach((key) => {
       if (UNSAFE_KEYS.has(key)) return;
       if (isObject(source[key])) {
-        if (!target[key]) {
+        if (!isObject(target[key])) {
           Object.assign(target, {
             [key]: {}
           });
         }
         combineDeep(target[key], source[key]);
       } else if (Array.isArray(source[key])) {
-        if (!target[key]) {
+        if (!Array.isArray(target[key])) {
           target[key] = [];
         }
         target[key].push(...source[key]);
@@ -430,6 +460,10 @@ function getSchemaXOption(schema, option) {
   if (schema["x-options"] && isSet(schema["x-options"][option])) {
     return schema["x-options"][option];
   }
+  if (option === "switcherInput" && schema["x-embedSwitcher"] === true) {
+    console.warn(`Jedison: schema option "x-embedSwitcher" is deprecated. Use "x-switcherInput: 'select-inline'" instead.`);
+    return "select-inline";
+  }
   for (const alias of getAliasesFor(option)) {
     const xAlias = "x-" + alias;
     if (isSet(schema[xAlias])) {
@@ -1778,8 +1812,28 @@ class EventEmitter {
     }
     callbacks.push(callback);
   }
-  off(name) {
-    this.listeners.delete(name);
+  /**
+   * Removes event listeners for a named event.
+   * @public
+   * @param {string} name - The name of the event
+   * @param {function} [callback] - When given, only this specific callback is
+   * removed; when omitted, all listeners for the event are removed.
+   */
+  off(name, callback) {
+    if (typeof callback !== "function") {
+      this.listeners.delete(name);
+      return;
+    }
+    const callbacks = this.listeners.get(name);
+    if (!callbacks) {
+      return;
+    }
+    const remaining = callbacks.filter((cb) => cb !== callback);
+    if (remaining.length === 0) {
+      this.listeners.delete(name);
+    } else {
+      this.listeners.set(name, remaining);
+    }
   }
   /**
    * Triggers the callback function of a named event listener
@@ -2145,6 +2199,7 @@ class Editor {
     this.addEventListeners();
     this.setVisibility();
     this.setContainerAttributes();
+    this.appendSchemaButtons();
     this.refreshUI();
     const alwaysShowErrors = this.instance.jedison.getOption("showErrors") === "always" || getSchemaXOption(this.instance.schema, "showErrors") === "always";
     if (alwaysShowErrors) {
@@ -2158,6 +2213,14 @@ class Editor {
   }
   static resolves(schema) {
   }
+  /**
+   * Whether this editor already renders a heading for each of its children
+   * (e.g. an accordion toggle or a nav tab label), so a child editor can
+   * skip drawing its own duplicate heading/panel when embedded here.
+   */
+  static providesChildHeading() {
+    return false;
+  }
   /**
    * Initializes the editor
    */
@@ -2200,6 +2263,62 @@ class Editor {
       }
     }
   }
+  /**
+   * Renders schema-defined action buttons (the `x-buttons` keyword) into the
+   * editor container. Works for every editor because it lives on the base
+   * class, next to setAttributes()/setContainerAttributes(). Both `x-buttons`
+   * and `x-options.buttons` spellings resolve through getSchemaXOption().
+   *
+   * Security decisions from issue #62:
+   * - The label is HTML sanitized through the existing DOMPurify pipeline
+   *   (purifyContent(), decision 9c / F6) before being handed to the theme.
+   * - The `attributes` bag is filtered against an allowlist (filterAttributes(),
+   *   decision 6a / F1); `always-enabled` / `always-disabled` are intentionally
+   *   allowed (decision 6b, trusted-schema stance).
+   * - Each button emits a `jedison:<name>` event on the root Jedison instance
+   *   through the internal EventEmitter (decision 1c / 2), carrying a live
+   *   payload `{ jedison, editor, path }` (decision 8). Consumers subscribe with
+   *   `jedison.on('jedison:<name>', ({ jedison, editor, path }) => ...)`. The
+   *   listener map is private to the instance, so the payload is not exposed to
+   *   unrelated scripts on the page (F3 contained).
+   * - Click listeners are registered through storedEventListeners so destroy()
+   *   cleans them up.
+   */
+  appendSchemaButtons() {
+    const buttons = getSchemaXOption(this.instance.schema, "buttons");
+    if (!isArray(buttons)) {
+      return;
+    }
+    const domPurifyOptions = this.instance.jedison.getOption("domPurifyOptions");
+    buttons.forEach((config) => {
+      if (!isObject(config)) {
+        return;
+      }
+      const rawLabel = isString(config.label) ? config.label : "";
+      const label = this.purifyEnabled ? this.purifyContent(rawLabel, domPurifyOptions) : rawLabel;
+      const attributes = filterAttributes(config.attributes);
+      const button = this.theme.getXButton({ label, attributes });
+      this.control.container.appendChild(button);
+      const eventName = isObject(config.event) && isString(config.event.name) ? config.event.name : null;
+      if (!eventName) {
+        return;
+      }
+      const handler = () => {
+        const jedison = this.instance.jedison;
+        jedison.emit("jedison:" + eventName, {
+          jedison,
+          editor: this,
+          path: this.instance.path
+        });
+      };
+      button.addEventListener("click", handler);
+      this.storedEventListeners.push({
+        element: button,
+        eventType: "click",
+        handler
+      });
+    });
+  }
   /**
    * Builds the editor control and appends it to the editor container
    */
@@ -2508,6 +2627,7 @@ class EditorIfThenElse extends Editor {
     this.refreshDisabledState();
     this.control.childrenSlot.innerHTML = "";
     this.control.childrenSlot.appendChild(this.instance.activeInstance.ui.control.container);
+    this.control.switcherSlot = this.instance.activeInstance.ui.control.switcherSlot;
     if (this.disabled || this.instance.isReadOnly()) {
       this.instance.activeInstance.ui.disable();
     } else {
@@ -4131,7 +4251,7 @@ class EditorObject extends Editor {
     return {
       title: this.getTitle(),
       description: this.getDescription(),
-      titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      titleHidden: getSchemaXOption(this.instance.schema, "titleHidden") ?? this.isEmbeddedInParentChrome(),
       id: this.getIdFromPath(this.instance.path),
       enablePropertiesToggle,
       addProperty,
@@ -4147,9 +4267,20 @@ class EditorObject extends Editor {
       titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass")
     };
   }
+  isEmbeddedInParentChrome() {
+    var _a;
+    const autoFlat = getSchemaXOption(this.instance.schema, "autoFlat") ?? this.instance.jedison.getOption("autoFlat");
+    if (!autoFlat) return false;
+    const parentInstance = this.instance.parent;
+    if (!parentInstance) return false;
+    const ParentEditorClass = this.instance.jedison.uiResolver.getClass(parentInstance.schema);
+    return !!((_a = ParentEditorClass == null ? void 0 : ParentEditorClass.providesChildHeading) == null ? void 0 : _a.call(ParentEditorClass));
+  }
   build() {
     this.propertyActivators = {};
-    const card = getSchemaXOption(this.instance.schema, "card") ?? this.instance.jedison.getOption("card");
+    const explicitCard = getSchemaXOption(this.instance.schema, "card");
+    const globalCard = this.instance.jedison.getOption("card");
+    const card = explicitCard ?? (this.isEmbeddedInParentChrome() ? false : globalCard);
     const config = this.getObjectControlConfig();
     this.control = card === false ? this.theme.getObjectControlFlat(config) : this.theme.getObjectControl(config);
     this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
@@ -4400,6 +4531,7 @@ class EditorObjectCategories extends EditorObject {
   init() {
     super.init();
     this.activeCategoryName = null;
+    this.userSelectedCategory = false;
   }
   navigateTo(path) {
     const nextChildPath = this.getNextChildPath(path);
@@ -4419,6 +4551,7 @@ class EditorObjectCategories extends EditorObject {
           categoryName = defaultLabel;
         }
         this.activeCategoryName = categoryName;
+        this.userSelectedCategory = true;
         this.refreshUI();
       }
     }
@@ -4469,9 +4602,6 @@ class EditorObjectCategories extends EditorObject {
       }
       categoriesMap.get(categoryName).children.push(child);
     });
-    if (!categoriesMap.has(this.activeCategoryName)) {
-      this.activeCategoryName = categoriesMap.keys().next().value;
-    }
     const categoryOrder = getSchemaXOption(this.instance.schema, "categoryOrder");
     const allNames = Array.from(categoriesMap.keys());
     let orderedCategoryNames = allNames;
@@ -4480,6 +4610,9 @@ class EditorObjectCategories extends EditorObject {
       const unspecified = allNames.filter((name) => !categoryOrder.includes(name));
       orderedCategoryNames = [...specifiedFirst, ...unspecified];
     }
+    if (!this.userSelectedCategory || !categoriesMap.has(this.activeCategoryName)) {
+      this.activeCategoryName = orderedCategoryNames[0];
+    }
     orderedCategoryNames.forEach((categoryName) => {
       const category = categoriesMap.get(categoryName);
       const active = categoryName === this.activeCategoryName;
@@ -4494,6 +4627,7 @@ class EditorObjectCategories extends EditorObject {
       });
       tab.list.addEventListener("click", () => {
         this.activeCategoryName = categoryName;
+        this.userSelectedCategory = true;
       });
       const pane = document.createElement("div");
       this.theme.setTabPaneAttributes(pane, active, id);
@@ -4517,6 +4651,9 @@ class EditorObjectNav extends EditorObject {
     const hasNavFormat = regex.test(format2);
     return getSchemaType(schema) === "object" && hasNavFormat;
   }
+  static providesChildHeading() {
+    return true;
+  }
   init() {
     super.init();
     this.activeTabIndex = 0;
@@ -4603,11 +4740,35 @@ class EditorObjectAccordion extends EditorObject {
   static resolves(schema) {
     return getSchemaType(schema) === "object" && getSchemaXOption(schema, "format") === "accordion";
   }
+  static providesChildHeading() {
+    return true;
+  }
   getObjectControlConfig() {
     return { ...super.getObjectControlConfig(), isAccordionProperties: true };
   }
+  refreshAccordionWarnings() {
+    if (!this.accordionToggles) return;
+    const navWarning = getSchemaXOption(this.instance.schema, "navWarning") ?? true;
+    const navWarningMessage = getSchemaXOption(this.instance.schema, "navWarningMessage");
+    this.instance.children.forEach((child) => {
+      if (!child.isActive) return;
+      const toggle = this.accordionToggles[child.getKey()];
+      if (!toggle) return;
+      const existing = toggle.querySelector(".jedi-legend-warning");
+      if (existing) existing.parentNode.removeChild(existing);
+      if (navWarning && child.hasNestedValidationErrors()) {
+        const warning = document.createElement("span");
+        warning.classList.add("jedi-legend-warning");
+        warning.textContent = "⚠";
+        if (navWarningMessage) warning.setAttribute("title", navWarningMessage);
+        this.theme.styleLegendWarning(warning);
+        toggle.appendChild(warning);
+      }
+    });
+  }
   refreshEditors() {
     this.control.childrenSlot.replaceChildren();
+    this.accordionToggles = {};
     const accordionId = this.control.childrenSlot.id;
     this.instance.children.forEach((child) => {
       if (!child.isActive) return;
@@ -4617,12 +4778,18 @@ class EditorObjectAccordion extends EditorObject {
       const accordionItem = this.theme.getAccordionItem({ title, id, accordionId });
       accordionItem.body.appendChild(child.ui.control.container);
       this.control.childrenSlot.appendChild(accordionItem.container);
+      this.accordionToggles[child.getKey()] = accordionItem.toggle;
       if (this.disabled || this.instance.isReadOnly()) {
         child.ui.disable();
       } else {
         child.ui.enable();
       }
     });
+    this.refreshAccordionWarnings();
+  }
+  showValidationErrors(errors, force = false) {
+    super.showValidationErrors(errors, force);
+    this.refreshAccordionWarnings();
   }
 }
 class EditorObjectHorizontal extends EditorObject {
@@ -5443,6 +5610,9 @@ class EditorArrayNav extends EditorArray {
     const hasNavFormat = regex.test(format2);
     return getSchemaType(schema) === "array" && hasNavFormat;
   }
+  static providesChildHeading() {
+    return true;
+  }
   navigateTo(path) {
     const nextChildPath = this.getNextChildPath(path);
     if (nextChildPath) {
@@ -5597,7 +5767,7 @@ class EditorMultiple extends Editor {
   }
   build() {
     this.switcherInput = getSchemaXOption(this.instance.schema, "switcherInput") ?? this.instance.jedison.getOption("switcherInput");
-    this.embedSwitcher = getSchemaXOption(this.instance.schema, "embedSwitcher") ?? this.instance.jedison.getOption("embedSwitcher");
+    this.embedSwitcher = this.instance.jedison.getOption("embedSwitcher");
     this.control = this.theme.getMultipleControl({
       titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
       id: this.getIdFromPath(this.instance.path),
@@ -5609,6 +5779,7 @@ class EditorMultiple extends Editor {
     if (this.embedSwitcher) {
       this.control.header.style.display = "none";
     }
+    this.switcherWrapper = this.theme.getSwitcherOwner();
     this.instance.on("change", (initiator) => {
       if (initiator === "api") return;
       const jedison = this.instance.jedison;
@@ -5663,35 +5834,22 @@ class EditorMultiple extends Editor {
     }
   }
   refreshUI() {
-    var _a;
     this.refreshDisabledState();
     this.control.childrenSlot.innerHTML = "";
     this.control.childrenSlot.appendChild(this.instance.activeInstance.ui.control.container);
-    if (this.embedSwitcher) {
-      const slot = this.instance.activeInstance.ui.control.switcherSlot;
+    const slot = this.instance.activeInstance.ui.control.switcherSlot;
+    this.control.switcherSlot = slot;
+    if (this.embedSwitcher || this.switcherInput === "modal" || this.switcherInput === "select-inline") {
       if (slot) {
-        slot.innerHTML = "";
-        slot.appendChild(this.control.switcher.container);
+        this.switcherWrapper.innerHTML = "";
+        this.switcherWrapper.appendChild(this.control.switcher.container);
+        this.insertBySwitcherDepth(slot, this.switcherWrapper, this.getNestedSwitcherDepth(this.instance.activeInstance));
         this.control.header.style.display = "none";
       } else {
         this.control.header.style.display = "";
         this.control.header.appendChild(this.control.switcher.container);
       }
     }
-    if (this.switcherInput === "modal" || this.switcherInput === "select-inline") {
-      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;
     }
@@ -5719,6 +5877,23 @@ class EditorMultiple extends Editor {
   getErrorFeedback(config) {
     return this.theme.getAlert(config);
   }
+  // Counts how many EditorMultiple owners sit between `instance` and the real
+  // leaf control, so stacked switchers in a shared slot can be ordered
+  // outer-first instead of shuffling with every refresh.
+  getNestedSwitcherDepth(instance) {
+    if (!instance || !instance.activeInstance) return 0;
+    const childDepth = this.getNestedSwitcherDepth(instance.activeInstance);
+    return instance.ui.switcherWrapper ? childDepth + 1 : childDepth;
+  }
+  insertBySwitcherDepth(slot, wrapper, depth) {
+    wrapper.dataset.switcherDepth = depth;
+    const sibling = Array.from(slot.children).find((child) => Number(child.dataset.switcherDepth) < depth);
+    if (sibling) {
+      slot.insertBefore(wrapper, sibling);
+    } else {
+      slot.appendChild(wrapper);
+    }
+  }
 }
 class EditorNull extends Editor {
   static resolves(schema) {
@@ -6302,37 +6477,24 @@ class EditorArrayCheckboxes extends Editor {
     const values = this.getEnumSourceValues();
     const schemaItems = this.instance.schema.items || {};
     const titles = getSchemaXOption(schemaItems, "enumTitles") || values;
-    const id = this.getIdFromPath(this.instance.path);
-    const messagesId = id + "-messages";
-    const descriptionId = id + "-description";
-    const describedBy = messagesId + " " + descriptionId;
     this.control.checkboxControls.forEach((cc) => {
       if (cc.parentNode) cc.parentNode.removeChild(cc);
     });
-    this.control.checkboxes = [];
-    this.control.labels = [];
-    this.control.checkboxControls = [];
-    this.control.labelTexts = [];
-    values.forEach((value, index2) => {
-      const checkboxId = id + "-" + index2;
-      const checkboxControl = document.createElement("div");
-      const checkbox = document.createElement("input");
-      const label = document.createElement("label");
-      const labelText = document.createElement("span");
-      checkbox.setAttribute("type", "checkbox");
-      checkbox.setAttribute("id", checkboxId);
-      checkbox.setAttribute("name", id);
-      checkbox.setAttribute("value", value);
-      checkbox.setAttribute("aria-describedby", describedBy);
-      label.setAttribute("for", checkboxId);
-      labelText.textContent = titles && titles[index2] !== void 0 ? titles[index2] : value;
-      checkboxControl.appendChild(checkbox);
-      checkboxControl.appendChild(label);
-      label.appendChild(labelText);
-      this.control.checkboxes.push(checkbox);
-      this.control.labels.push(label);
-      this.control.labelTexts.push(labelText);
-      this.control.checkboxControls.push(checkboxControl);
+    const rebuilt = this.theme.getCheckboxesControl({
+      title: this.getTitle(),
+      description: this.getDescription(),
+      values,
+      titles,
+      id: this.getIdFromPath(this.instance.path),
+      titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      inline: getSchemaXOption(this.instance.schema, "format") === "checkboxes-inline",
+      info: this.getInfo()
+    });
+    this.control.checkboxes = rebuilt.checkboxes;
+    this.control.labels = rebuilt.labels;
+    this.control.labelTexts = rebuilt.labelTexts;
+    this.control.checkboxControls = rebuilt.checkboxControls;
+    this.control.checkboxControls.forEach((checkboxControl) => {
       this.control.fieldset.insertBefore(checkboxControl, this.control.description);
     });
     this.addDragHandles();
@@ -6982,6 +7144,7 @@ class Jedison extends EventEmitter {
       editJsonData: false,
       enablePropertiesToggle: false,
       enableCollapseToggle: false,
+      autoFlat: false,
       btnContents: true,
       btnIcons: true,
       arrayDelete: true,
@@ -7307,6 +7470,20 @@ class Jedison extends EventEmitter {
         }
       });
     }
+    if (this.isEditor) {
+      const schemaTypeArray = getSchemaType(config.schema);
+      if (isArray(schemaTypeArray)) {
+        const inferTypeSource = getSchemaXOption(config.schema, "inferType");
+        if (isSet(inferTypeSource)) {
+          const siblingPath = resolveInstancePath(config.path, inferTypeSource);
+          const siblingInstance = this.getInstance(siblingPath);
+          const siblingValue = siblingInstance ? siblingInstance.getValue() : void 0;
+          if (isSet(siblingValue) && schemaTypeArray.includes(siblingValue)) {
+            config.schema = { ...config.schema, type: siblingValue };
+          }
+        }
+      }
+    }
     const schemaOneOf = getSchemaOneOf(config.schema);
     const schemaAnyOf = getSchemaAnyOf(config.schema);
     const schemaIf = getSchemaIf(config.schema);
@@ -7886,6 +8063,25 @@ class Theme {
     html.classList.add("jedi-children-slot");
     return html;
   }
+  /**
+   * Wrapper used by EditorMultiple to embed an inline switcher next to a control's title
+   */
+  getSwitcherSlot() {
+    const html = document.createElement("span");
+    html.classList.add("jedi-switcher-slot");
+    return html;
+  }
+  /**
+   * Per-owner wrapper inside a switcherSlot — lets more than one EditorMultiple
+   * embed a switcher into the same slot (e.g. nested anyOf/oneOf) without one
+   * overwriting the other.
+   */
+  getSwitcherOwner() {
+    const html = document.createElement("span");
+    html.classList.add("jedi-switcher-owner");
+    html.style.marginInlineStart = "0.25rem";
+    return html;
+  }
   /**
    * Wrapper for error messages
    */
@@ -8150,6 +8346,42 @@ class Theme {
     button.appendChild(text);
     return button;
   }
+  /**
+   * A schema-defined action button (x-buttons keyword).
+   *
+   * This method only renders: the label is expected to be already sanitized by
+   * the editor (Editor.purifyContent(), decision 9c) and the attributes are
+   * expected to be already filtered against the allowlist by the editor
+   * (utils.filterAttributes(), decision 6a). The theme does not sanitize or
+   * filter. No theme styling is applied, only the unstyled `jedi-x-button` hook
+   * class (decision 4).
+   * @param {object} config - Button config
+   * @param {string} [config.label] - Pre-sanitized HTML label
+   * @param {object} [config.attributes] - Pre-filtered HTML attributes
+   * @return {HTMLButtonElement}
+   */
+  getXButton(config = {}) {
+    const button = document.createElement("button");
+    const label = document.createElement("span");
+    button.classList.add("jedi-x-button");
+    button.setAttribute("type", "button");
+    label.classList.add("jedi-x-button-label");
+    label.innerHTML = config.label ?? "";
+    button.appendChild(label);
+    const attributes = isObject(config.attributes) ? config.attributes : {};
+    for (const [key, value] of Object.entries(attributes)) {
+      if (key === "class") {
+        String(value).split(" ").forEach((cls) => {
+          if (cls) {
+            button.classList.add(cls);
+          }
+        });
+      } else {
+        button.setAttribute(key, value);
+      }
+    }
+    return button;
+  }
   getAddPropertyButton(config) {
     const html = this.getButton(config);
     html.classList.add("jedi-add-property-btn");
@@ -8345,6 +8577,7 @@ class Theme {
     const messages = this.getMessagesSlot({
       id: messagesId
     });
+    const switcherSlot = this.getSwitcherSlot();
     if (((_a = config == null ? void 0 : config.info) == null ? void 0 : _a.variant) === "modal") {
       this.infoAsModal(info, config.id, config.info);
     }
@@ -8352,11 +8585,12 @@ class Theme {
     if (isObject(config.info)) {
       container.appendChild(info.container);
     }
+    container.appendChild(switcherSlot);
     container.appendChild(placeholder);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, placeholder, label, info, labelText, description, messages, actions };
+    return { container, placeholder, label, info, labelText, description, messages, actions, switcherSlot };
   }
   /**
    * Object control is a card containing multiple editors.
@@ -8422,7 +8656,7 @@ class Theme {
       propertiesContainer: quickAddPropertyContainer
     });
     const fieldset = this.getFieldset();
-    const { legend, infoContainer, legendText, right } = this.getLegend({
+    const { legend, left, infoContainer, legendText, right } = this.getLegend({
       content: config.title,
       id: config.id,
       titleHidden: config.titleHidden,
@@ -8453,10 +8687,9 @@ class Theme {
       body.appendChild(description);
     }
     body.appendChild(messages);
-    const switcherSlot = document.createElement("div");
-    switcherSlot.classList.add("jedi-switcher-slot");
+    const switcherSlot = this.getSwitcherSlot();
+    left.appendChild(switcherSlot);
     if (config.readOnly === false) {
-      right.appendChild(switcherSlot);
       right.appendChild(actions);
     }
     body.appendChild(childrenSlot);
@@ -8511,6 +8744,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({ content: config.description });
@@ -8537,8 +8773,7 @@ class Theme {
     const collapse = document.createElement("div");
     const collapseToggle = document.createElement("div");
     const infoContainer = document.createElement("div");
-    const switcherSlot = document.createElement("div");
-    switcherSlot.classList.add("jedi-switcher-slot");
+    const switcherSlot = this.getSwitcherSlot();
     const legend = document.createElement("div");
     legend.classList.add("jedi-editor-legend");
     legend.style.display = "flex";
@@ -8559,6 +8794,7 @@ class Theme {
       this.visuallyHidden(legendText);
     }
     left.appendChild(legendText);
+    left.appendChild(switcherSlot);
     if (((_a = config == null ? void 0 : config.info) == null ? void 0 : _a.variant) === "modal") {
       this.infoAsModal(info, config.id, config.info);
     }
@@ -8567,8 +8803,6 @@ class Theme {
     }
     const innerWrapper = document.createElement("div");
     innerWrapper.appendChild(legend);
-    innerWrapper.appendChild(propertiesContainer);
-    innerWrapper.appendChild(quickAddPropertyContainer);
     container.appendChild(innerWrapper);
     if (config.addProperty) {
       quickAddPropertyContainer.appendChild(quickAddPropertyControl.container);
@@ -8579,11 +8813,12 @@ class Theme {
     }
     body.appendChild(messages);
     if (config.readOnly === false) {
-      right.appendChild(switcherSlot);
       right.appendChild(actions);
     }
     body.appendChild(childrenSlot);
     innerWrapper.appendChild(body);
+    innerWrapper.appendChild(propertiesContainer);
+    innerWrapper.appendChild(quickAddPropertyContainer);
     if (config.editJsonData) {
       actions.appendChild(jsonData.toggle);
     }
@@ -8676,8 +8911,11 @@ class Theme {
     chevron.style.display = "inline-block";
     chevron.style.transition = "transform 0.1s ease";
     chevron.style.marginRight = "0.5em";
+    const titleSpan = document.createElement("span");
+    titleSpan.style.marginRight = "0.5em";
+    titleSpan.textContent = config.title;
     toggle.appendChild(chevron);
-    toggle.appendChild(document.createTextNode(config.title));
+    toggle.appendChild(titleSpan);
     const collapse = document.createElement("div");
     collapse.classList.add("jedi-accordion-collapse");
     collapse.style.display = "none";
@@ -8730,7 +8968,7 @@ class Theme {
     const footer = this.getArrayFooter();
     const fieldset = this.getFieldset();
     const info = this.getInfo(config.info);
-    const { legend, legendText, infoContainer, right } = this.getLegend({
+    const { legend, left, legendText, infoContainer, right } = this.getLegend({
       content: config.title,
       id: config.id,
       titleHidden: config.titleHidden,
@@ -8773,10 +9011,9 @@ class Theme {
       body.appendChild(description);
     }
     body.appendChild(messages);
-    const switcherSlot = document.createElement("div");
-    switcherSlot.classList.add("jedi-switcher-slot");
+    const switcherSlot = this.getSwitcherSlot();
+    left.appendChild(switcherSlot);
     if (config.readOnly === false) {
-      right.appendChild(switcherSlot);
       right.appendChild(actions);
     }
     actions.appendChild(btnGroup);
@@ -8969,6 +9206,7 @@ class Theme {
       content: config.description,
       id: descriptionId
     });
+    const switcherSlot = this.getSwitcherSlot();
     if (((_a = config == null ? void 0 : config.info) == null ? void 0 : _a.variant) === "modal") {
       this.infoAsModal(info, config.id, config.info);
     }
@@ -8976,11 +9214,12 @@ class Theme {
     if (isObject(config.info)) {
       container.appendChild(info.container);
     }
+    container.appendChild(switcherSlot);
     container.appendChild(br);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, label, info, labelText, description, messages, actions };
+    return { container, label, info, labelText, description, messages, actions, switcherSlot };
   }
   /**
    * A Textarea
@@ -9007,6 +9246,7 @@ class Theme {
     const messages = this.getMessagesSlot({
       id: messagesId
     });
+    const switcherSlot = this.getSwitcherSlot();
     input.setAttribute("aria-describedby", describedBy);
     input.setAttribute("id", config.id);
     input.setAttribute("name", config.id);
@@ -9018,11 +9258,12 @@ class Theme {
     if (isObject(config.info)) {
       container.appendChild(info.container);
     }
+    container.appendChild(switcherSlot);
     container.appendChild(input);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, input, label, info, labelText, description, messages, actions };
+    return { container, input, label, info, labelText, description, messages, actions, switcherSlot };
   }
   adaptForTableTextareaControl(control) {
     this.visuallyHidden(control.label);
@@ -9054,6 +9295,7 @@ class Theme {
     const messages = this.getMessagesSlot({
       id: messagesId
     });
+    const switcherSlot = this.getSwitcherSlot();
     input.setAttribute("aria-describedby", describedBy);
     input.setAttribute("type", config.type);
     input.setAttribute("id", config.id);
@@ -9066,11 +9308,12 @@ class Theme {
     if (isObject(config.info)) {
       container.appendChild(info.container);
     }
+    container.appendChild(switcherSlot);
     container.appendChild(input);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, input, label, info, labelText, description, messages, actions };
+    return { container, input, label, info, labelText, description, messages, actions, switcherSlot };
   }
   getInputRangeControl(config) {
     const control = this.getInputControl(config);
@@ -9140,8 +9383,10 @@ class Theme {
       radios.push(radio);
       labels.push(label);
     });
+    const switcherSlot = this.getSwitcherSlot();
     container.appendChild(fieldset);
     fieldset.appendChild(legend);
+    legend.appendChild(switcherSlot);
     if (isObject(config.info)) {
       legendText.after(info.container);
     }
@@ -9164,7 +9409,8 @@ class Theme {
       labelTexts,
       radioControls,
       description,
-      messages
+      messages,
+      switcherSlot
     };
   }
   adaptForTableRadiosControl(control) {
@@ -9201,6 +9447,7 @@ class Theme {
     input.setAttribute("id", config.id);
     input.setAttribute("name", config.id);
     input.setAttribute("aria-describedby", describedBy);
+    const switcherSlot = this.getSwitcherSlot();
     if (((_a = config == null ? void 0 : config.info) == null ? void 0 : _a.variant) === "modal") {
       this.infoAsModal(info, config.id, config.info);
     }
@@ -9211,9 +9458,10 @@ class Theme {
     if (isObject(config.info)) {
       formGroup.appendChild(info.container);
     }
+    formGroup.appendChild(switcherSlot);
     formGroup.appendChild(description);
     formGroup.appendChild(messages);
-    return { container, formGroup, input, label, info, labelText, description, messages, actions };
+    return { container, formGroup, input, label, info, labelText, description, messages, actions, switcherSlot };
   }
   adaptForTableCheckboxControl(control, td) {
     this.visuallyHidden(control.label);
@@ -9270,8 +9518,10 @@ class Theme {
     if (((_a = config == null ? void 0 : config.info) == null ? void 0 : _a.variant) === "modal") {
       this.infoAsModal(info, config.id, config.info);
     }
+    const switcherSlot = this.getSwitcherSlot();
     container.appendChild(fieldset);
     fieldset.appendChild(legend);
+    legend.appendChild(switcherSlot);
     if (isObject(config.info)) {
       legendText.after(info.container);
     }
@@ -9293,7 +9543,8 @@ class Theme {
       labelTexts,
       checkboxControls,
       description,
-      messages
+      messages,
+      switcherSlot
     };
   }
   adaptForTableCheckboxesControl(control, td) {
@@ -9336,6 +9587,7 @@ class Theme {
       }
       input.appendChild(option);
     });
+    const switcherSlot = this.getSwitcherSlot();
     if (((_a = config == null ? void 0 : config.info) == null ? void 0 : _a.variant) === "modal") {
       this.infoAsModal(info, config.id, config.info);
     }
@@ -9343,11 +9595,12 @@ class Theme {
     if (isObject(config.info)) {
       container.appendChild(info.container);
     }
+    container.appendChild(switcherSlot);
     container.appendChild(input);
     container.appendChild(description);
     container.appendChild(messages);
     container.appendChild(actions);
-    return { container, input, label, info, labelText, description, messages, actions };
+    return { container, input, label, info, labelText, description, messages, actions, switcherSlot };
   }
   adaptForTableSelectControl(control) {
     this.visuallyHidden(control.label);
@@ -9780,8 +10033,11 @@ class ThemeBootstrap3 extends Theme {
     chevron.style.display = "inline-block";
     chevron.style.transition = "transform 0.1s ease";
     chevron.style.marginRight = "0.5em";
+    const titleSpan = document.createElement("span");
+    titleSpan.style.marginRight = "0.5em";
+    titleSpan.textContent = config.title;
     toggle.appendChild(chevron);
-    toggle.appendChild(document.createTextNode(config.title));
+    toggle.appendChild(titleSpan);
     const collapse = document.createElement("div");
     collapse.id = collapseId;
     collapse.classList.add("panel-collapse", "collapse");
@@ -10308,8 +10564,11 @@ class ThemeBootstrap4 extends Theme {
     }
     chevron.classList.add("d-inline-block", "mr-2");
     chevron.style.transition = "transform 0.1s ease";
+    const titleSpan = document.createElement("span");
+    titleSpan.classList.add("mr-1");
+    titleSpan.textContent = config.title;
     toggle.appendChild(chevron);
-    toggle.appendChild(document.createTextNode(config.title));
+    toggle.appendChild(titleSpan);
     const collapse = document.createElement("div");
     collapse.id = collapseId;
     collapse.classList.add("collapse");
@@ -10859,8 +11118,11 @@ class ThemeBootstrap5 extends Theme {
     }
     chevron.classList.add("d-inline-block", "me-2");
     chevron.style.transition = "transform 0.1s ease";
+    const titleSpan = document.createElement("span");
+    titleSpan.classList.add("me-1");
+    titleSpan.textContent = config.title;
     toggle.appendChild(chevron);
-    toggle.appendChild(document.createTextNode(config.title));
+    toggle.appendChild(titleSpan);
     const collapse = document.createElement("div");
     collapse.id = collapseId;
     collapse.classList.add("accordion-collapse", "collapse");