@orion-studios/payload-studio 0.6.0-beta.140 → 0.6.0-beta.142

package/dist/builder-v2/client.js

@@ -1125,7 +1125,8 @@ var registerProjectDynamicComponents = (editor, adapter) => {
               name: `data-orion-${trait.name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}`,
               options: trait.options,
               placeholder: trait.placeholder,
-              type: trait.type
+              type: trait.type,
+              ...trait.type === "checkbox" ? { valueFalse: "false", valueTrue: "true" } : {}
             }))
           ]
         }
@@ -1405,10 +1406,89 @@ var decorateBuilderNumericSteppers = (root = document) => {
     field.appendChild(stepper);
   });
 };
+var getStylePanelTabFields = (panel) => Array.from(
+  panel.querySelectorAll(
+    [
+      'input:not([type="hidden"]):not([type="radio"]):not([disabled])',
+      "select:not([disabled])",
+      "textarea:not([disabled])"
+    ].join(",")
+  )
+).filter((element) => element.tabIndex >= 0 && element.offsetParent !== null).sort((first, second) => {
+  const firstRect = first.getBoundingClientRect();
+  const secondRect = second.getBoundingClientRect();
+  const rowDelta = firstRect.top - secondRect.top;
+  if (Math.abs(rowDelta) > 4) {
+    return rowDelta;
+  }
+  return firstRect.left - secondRect.left;
+});
+var decorateStylePanelTabOrder = () => {
+  const panel = document.getElementById("orion-builder-v2-styles");
+  if (!panel) {
+    return;
+  }
+  panel.querySelectorAll('input[type="radio"]').forEach((input) => {
+    input.tabIndex = -1;
+  });
+  if (panel.dataset.orionTabOrderBound === "true") {
+    return;
+  }
+  panel.dataset.orionTabOrderBound = "true";
+  panel.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key !== "Tab" || event.defaultPrevented) {
+        return;
+      }
+      const activeElement = document.activeElement;
+      if (!activeElement || !panel.contains(activeElement)) {
+        return;
+      }
+      const fields = getStylePanelTabFields(panel);
+      const currentIndex = fields.indexOf(activeElement);
+      if (currentIndex < 0) {
+        return;
+      }
+      const nextIndex = event.shiftKey ? currentIndex - 1 : currentIndex + 1;
+      const nextField = fields[nextIndex];
+      if (!nextField) {
+        return;
+      }
+      event.preventDefault();
+      nextField.focus();
+      if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
+        nextField.select?.();
+      }
+    },
+    true
+  );
+};
+var decorateBuilderTraitToggles = () => {
+  const traitsRoot = document.getElementById("orion-builder-v2-traits");
+  if (!traitsRoot) {
+    return;
+  }
+  traitsRoot.querySelectorAll('input[type="checkbox"]').forEach((input) => {
+    const trait = input.closest(".gjs-trt-trait");
+    trait?.classList.add("has-orion-builder-toggle-trait");
+    input.setAttribute("role", "switch");
+    input.setAttribute("aria-checked", input.checked ? "true" : "false");
+    if (input.dataset.orionToggleBound === "true") {
+      return;
+    }
+    input.dataset.orionToggleBound = "true";
+    input.addEventListener("change", () => {
+      input.setAttribute("aria-checked", input.checked ? "true" : "false");
+    });
+  });
+};
 var decorateBuilderControls = (root = document) => {
   decorateBuilderSettingHelp(root);
   decorateBuilderColorEyeDroppers(root);
   decorateBuilderNumericSteppers(root);
+  decorateStylePanelTabOrder();
+  decorateBuilderTraitToggles();
 };
 var closeBuilderHelpPopovers = (except) => {
   document.querySelectorAll(".is-builder-help-open").forEach((element) => {

package/dist/builder-v2/client.mjs

@@ -1001,7 +1001,8 @@ var registerProjectDynamicComponents = (editor, adapter) => {
               name: `data-orion-${trait.name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}`,
               options: trait.options,
               placeholder: trait.placeholder,
-              type: trait.type
+              type: trait.type,
+              ...trait.type === "checkbox" ? { valueFalse: "false", valueTrue: "true" } : {}
             }))
           ]
         }
@@ -1281,10 +1282,89 @@ var decorateBuilderNumericSteppers = (root = document) => {
     field.appendChild(stepper);
   });
 };
+var getStylePanelTabFields = (panel) => Array.from(
+  panel.querySelectorAll(
+    [
+      'input:not([type="hidden"]):not([type="radio"]):not([disabled])',
+      "select:not([disabled])",
+      "textarea:not([disabled])"
+    ].join(",")
+  )
+).filter((element) => element.tabIndex >= 0 && element.offsetParent !== null).sort((first, second) => {
+  const firstRect = first.getBoundingClientRect();
+  const secondRect = second.getBoundingClientRect();
+  const rowDelta = firstRect.top - secondRect.top;
+  if (Math.abs(rowDelta) > 4) {
+    return rowDelta;
+  }
+  return firstRect.left - secondRect.left;
+});
+var decorateStylePanelTabOrder = () => {
+  const panel = document.getElementById("orion-builder-v2-styles");
+  if (!panel) {
+    return;
+  }
+  panel.querySelectorAll('input[type="radio"]').forEach((input) => {
+    input.tabIndex = -1;
+  });
+  if (panel.dataset.orionTabOrderBound === "true") {
+    return;
+  }
+  panel.dataset.orionTabOrderBound = "true";
+  panel.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key !== "Tab" || event.defaultPrevented) {
+        return;
+      }
+      const activeElement = document.activeElement;
+      if (!activeElement || !panel.contains(activeElement)) {
+        return;
+      }
+      const fields = getStylePanelTabFields(panel);
+      const currentIndex = fields.indexOf(activeElement);
+      if (currentIndex < 0) {
+        return;
+      }
+      const nextIndex = event.shiftKey ? currentIndex - 1 : currentIndex + 1;
+      const nextField = fields[nextIndex];
+      if (!nextField) {
+        return;
+      }
+      event.preventDefault();
+      nextField.focus();
+      if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
+        nextField.select?.();
+      }
+    },
+    true
+  );
+};
+var decorateBuilderTraitToggles = () => {
+  const traitsRoot = document.getElementById("orion-builder-v2-traits");
+  if (!traitsRoot) {
+    return;
+  }
+  traitsRoot.querySelectorAll('input[type="checkbox"]').forEach((input) => {
+    const trait = input.closest(".gjs-trt-trait");
+    trait?.classList.add("has-orion-builder-toggle-trait");
+    input.setAttribute("role", "switch");
+    input.setAttribute("aria-checked", input.checked ? "true" : "false");
+    if (input.dataset.orionToggleBound === "true") {
+      return;
+    }
+    input.dataset.orionToggleBound = "true";
+    input.addEventListener("change", () => {
+      input.setAttribute("aria-checked", input.checked ? "true" : "false");
+    });
+  });
+};
 var decorateBuilderControls = (root = document) => {
   decorateBuilderSettingHelp(root);
   decorateBuilderColorEyeDroppers(root);
   decorateBuilderNumericSteppers(root);
+  decorateStylePanelTabOrder();
+  decorateBuilderTraitToggles();
 };
 var closeBuilderHelpPopovers = (except) => {
   document.querySelectorAll(".is-builder-help-open").forEach((element) => {

package/dist/builder-v2/styles.css

@@ -1180,6 +1180,79 @@
   resize: vertical;
 }
 
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait {
+  border: 1px solid #e4c6b3;
+  border-radius: 8px;
+  margin-bottom: 8px !important;
+  min-height: 54px;
+  padding: 10px 12px;
+}
+
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__wrp {
+  align-items: center !important;
+  display: grid !important;
+  gap: 12px !important;
+  grid-template-columns: minmax(0, 1fr) auto !important;
+  width: 100% !important;
+}
+
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-label-wrp,
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-field-wrp,
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__cnt {
+  display: block !important;
+  margin: 0 !important;
+  width: auto !important;
+}
+
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__label,
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-label {
+  margin: 0 !important;
+  white-space: normal !important;
+}
+
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-field {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  height: auto !important;
+  min-height: 0 !important;
+  overflow: visible !important;
+  padding: 0 !important;
+  width: auto !important;
+}
+
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait input[type='checkbox'] {
+  appearance: none;
+  background: radial-gradient(circle at 8px 50%, #ffffff 0 6px, transparent 6.5px), #f1e3d6;
+  border: 1px solid #d6b7a1 !important;
+  border-radius: 999px;
+  box-shadow: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 18px !important;
+  margin: 0 !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  padding: 0 !important;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+  width: 34px !important;
+}
+
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait input[type='checkbox']:checked {
+  background: radial-gradient(circle at calc(100% - 8px) 50%, #ffffff 0 6px, transparent 6.5px), var(--builder-v2-accent);
+  border-color: rgba(255, 255, 255, 0.72) !important;
+}
+
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait input[type='checkbox']:focus-visible {
+  outline: 2px solid rgba(35, 54, 84, 0.32) !important;
+  outline-offset: 3px;
+}
+
 .orion-builder-v2-editor .gjs-sm-sectors {
   display: grid;
   gap: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.140",
+  "version": "0.6.0-beta.142",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",