@orion-studios/payload-studio 0.6.0-beta.143 → 0.6.0-beta.144

package/dist/builder-v2/client.js

@@ -1126,7 +1126,11 @@ var registerProjectDynamicComponents = (editor, adapter) => {
               options: trait.options,
               placeholder: trait.placeholder,
               type: trait.type,
-              ...trait.type === "checkbox" ? { valueFalse: "false", valueTrue: "true" } : {}
+              ...trait.type === "checkbox" ? {
+                attributes: trait.description ? { "data-orion-trait-description": trait.description } : void 0,
+                valueFalse: "false",
+                valueTrue: "true"
+              } : {}
             }))
           ]
         }
@@ -1471,15 +1475,31 @@ var decorateBuilderTraitToggles = () => {
   }
   traitsRoot.querySelectorAll('input[type="checkbox"]').forEach((input) => {
     const trait = input.closest(".gjs-trt-trait");
-    trait?.classList.add("has-orion-builder-toggle-trait");
+    trait?.classList.add("has-orion-builder-toggle-trait", "orion-builder-v2-toggle");
+    trait?.setAttribute("aria-pressed", input.checked ? "true" : "false");
     input.setAttribute("role", "switch");
     input.setAttribute("aria-checked", input.checked ? "true" : "false");
+    const description = input.dataset.orionTraitDescription;
+    const labelWrapper = trait?.querySelector(".gjs-label-wrp");
+    if (description && labelWrapper && !labelWrapper.querySelector(":scope > small")) {
+      const small = document.createElement("small");
+      small.textContent = description;
+      labelWrapper.appendChild(small);
+    }
     if (input.dataset.orionToggleBound === "true") {
       return;
     }
     input.dataset.orionToggleBound = "true";
+    trait?.addEventListener("click", (event) => {
+      if (event.target === input) {
+        return;
+      }
+      event.preventDefault();
+      input.click();
+    });
     input.addEventListener("change", () => {
       input.setAttribute("aria-checked", input.checked ? "true" : "false");
+      trait?.setAttribute("aria-pressed", input.checked ? "true" : "false");
     });
   });
 };

package/dist/builder-v2/client.mjs

@@ -1002,7 +1002,11 @@ var registerProjectDynamicComponents = (editor, adapter) => {
               options: trait.options,
               placeholder: trait.placeholder,
               type: trait.type,
-              ...trait.type === "checkbox" ? { valueFalse: "false", valueTrue: "true" } : {}
+              ...trait.type === "checkbox" ? {
+                attributes: trait.description ? { "data-orion-trait-description": trait.description } : void 0,
+                valueFalse: "false",
+                valueTrue: "true"
+              } : {}
             }))
           ]
         }
@@ -1347,15 +1351,31 @@ var decorateBuilderTraitToggles = () => {
   }
   traitsRoot.querySelectorAll('input[type="checkbox"]').forEach((input) => {
     const trait = input.closest(".gjs-trt-trait");
-    trait?.classList.add("has-orion-builder-toggle-trait");
+    trait?.classList.add("has-orion-builder-toggle-trait", "orion-builder-v2-toggle");
+    trait?.setAttribute("aria-pressed", input.checked ? "true" : "false");
     input.setAttribute("role", "switch");
     input.setAttribute("aria-checked", input.checked ? "true" : "false");
+    const description = input.dataset.orionTraitDescription;
+    const labelWrapper = trait?.querySelector(".gjs-label-wrp");
+    if (description && labelWrapper && !labelWrapper.querySelector(":scope > small")) {
+      const small = document.createElement("small");
+      small.textContent = description;
+      labelWrapper.appendChild(small);
+    }
     if (input.dataset.orionToggleBound === "true") {
       return;
     }
     input.dataset.orionToggleBound = "true";
+    trait?.addEventListener("click", (event) => {
+      if (event.target === input) {
+        return;
+      }
+      event.preventDefault();
+      input.click();
+    });
     input.addEventListener("change", () => {
       input.setAttribute("aria-checked", input.checked ? "true" : "false");
+      trait?.setAttribute("aria-pressed", input.checked ? "true" : "false");
     });
   });
 };

package/dist/builder-v2/index.d.mts

@@ -128,6 +128,7 @@ type BuilderV2ProjectComponentDesignControls = {
     spacing?: boolean;
 };
 type BuilderV2TraitDefinition = {
+    description?: string;
     label: string;
     name: string;
     options?: Array<{

package/dist/builder-v2/index.d.ts

@@ -128,6 +128,7 @@ type BuilderV2ProjectComponentDesignControls = {
     spacing?: boolean;
 };
 type BuilderV2TraitDefinition = {
+    description?: string;
     label: string;
     name: string;
     options?: Array<{

package/dist/builder-v2/styles.css

@@ -1181,25 +1181,15 @@
 }
 
 .orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait {
-  align-items: center;
-  background: #fffdf9;
-  border: 1px solid #e4c6b3;
-  border-radius: 10px;
-  box-sizing: border-box;
   display: flex !important;
-  justify-content: space-between;
   margin-bottom: 8px !important;
-  min-height: 54px;
-  padding: 10px 12px;
-  transition:
-    border-color 160ms ease,
-    box-shadow 160ms ease;
+  position: relative;
   width: 100% !important;
 }
 
-.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait:hover {
-  border-color: rgba(181, 111, 77, 0.8);
-  box-shadow: 0 8px 18px rgba(199, 100, 61, 0.1);
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait:focus-within {
+  outline: 2px solid rgba(35, 54, 84, 0.32);
+  outline-offset: 2px;
 }
 
 .orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-trt-trait__wrp,
@@ -1218,15 +1208,28 @@
 
 .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 {
-  color: var(--builder-v2-ink);
+  align-items: center;
+  display: flex !important;
   font-size: 0.78rem !important;
   font-weight: 900 !important;
+  gap: 8px;
+  justify-content: flex-start;
   line-height: 1.2 !important;
   margin: 0 !important;
+  position: relative;
   width: auto !important;
   white-space: normal !important;
 }
 
+.orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-label-wrp small {
+  color: var(--builder-v2-muted);
+  display: block;
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1.3;
+  margin-top: 2px;
+}
+
 .orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait .gjs-field {
   background: transparent !important;
   border: 0 !important;
@@ -1241,34 +1244,20 @@
 
 .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;
+  border: 0 !important;
+  border-radius: 10px;
   cursor: pointer;
   display: block;
-  height: 18px !important;
+  inset: 0;
+  height: 100% !important;
   margin: 0 !important;
   max-width: none !important;
   min-height: 0 !important;
   min-width: 0 !important;
+  opacity: 0;
   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;
+  position: absolute;
+  width: 100% !important;
 }
 
 .orion-builder-v2-editor .gjs-sm-sectors {

package/package.json

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