@orion-studios/payload-studio 0.6.0-beta.145 → 0.6.0-beta.147

package/dist/builder-v2/client.js

@@ -1483,6 +1483,17 @@ var decorateBuilderTraitToggles = () => {
     const traitName = input.getAttribute("name") || input.id || "";
     const description = input.dataset.orionTraitDescription || (traitName.includes("pause-on-hover") || labelText === "Pause on hover" ? "Stop scrolling while visitors hover over the banner." : "");
     const labelWrapper = trait?.querySelector(".gjs-label-wrp");
+    const label = trait?.querySelector(".gjs-trt-trait__label, .gjs-label");
+    if (description && label && !label.querySelector(":scope > .orion-builder-v2-help-trigger")) {
+      const trigger = document.createElement("button");
+      trigger.type = "button";
+      trigger.className = "orion-builder-v2-help-trigger";
+      trigger.dataset.builderHelpText = description;
+      trigger.setAttribute("aria-label", `About ${labelText || "setting"}`);
+      trigger.tabIndex = -1;
+      trigger.textContent = "?";
+      label.appendChild(trigger);
+    }
     if (description && labelWrapper && !labelWrapper.querySelector(":scope > small")) {
       const small = document.createElement("small");
       small.textContent = description;

package/dist/builder-v2/client.mjs

@@ -1359,6 +1359,17 @@ var decorateBuilderTraitToggles = () => {
     const traitName = input.getAttribute("name") || input.id || "";
     const description = input.dataset.orionTraitDescription || (traitName.includes("pause-on-hover") || labelText === "Pause on hover" ? "Stop scrolling while visitors hover over the banner." : "");
     const labelWrapper = trait?.querySelector(".gjs-label-wrp");
+    const label = trait?.querySelector(".gjs-trt-trait__label, .gjs-label");
+    if (description && label && !label.querySelector(":scope > .orion-builder-v2-help-trigger")) {
+      const trigger = document.createElement("button");
+      trigger.type = "button";
+      trigger.className = "orion-builder-v2-help-trigger";
+      trigger.dataset.builderHelpText = description;
+      trigger.setAttribute("aria-label", `About ${labelText || "setting"}`);
+      trigger.tabIndex = -1;
+      trigger.textContent = "?";
+      label.appendChild(trigger);
+    }
     if (description && labelWrapper && !labelWrapper.querySelector(":scope > small")) {
       const small = document.createElement("small");
       small.textContent = description;

package/dist/builder-v2/styles.css

@@ -1183,6 +1183,7 @@
 .orion-builder-v2-inspector #orion-builder-v2-traits .gjs-trt-trait.has-orion-builder-toggle-trait {
   display: flex !important;
   margin-bottom: 8px !important;
+  padding: 10px 12px !important;
   position: relative;
   width: 100% !important;
 }
@@ -1209,6 +1210,7 @@
 .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 {
   align-items: center;
+  color: currentColor !important;
   display: flex !important;
   font-size: 0.78rem !important;
   font-weight: 900 !important;
@@ -1222,7 +1224,7 @@
 }
 
 .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);
+  color: var(--builder-v2-toggle-small-color, var(--builder-v2-muted));
   display: block;
   font-size: 0.68rem;
   font-weight: 700;
@@ -1710,7 +1712,7 @@
 
 .orion-builder-v2-choice span,
 .orion-builder-v2-toggle small {
-  color: var(--builder-v2-muted);
+  color: var(--builder-v2-toggle-small-color, var(--builder-v2-muted));
   display: block;
   font-size: 0.68rem;
   font-weight: 700;
@@ -1726,6 +1728,7 @@
 .orion-builder-v2-choice[aria-pressed='true'],
 .orion-builder-v2-toggle[aria-pressed='true'],
 .orion-builder-v2-segmented button[aria-pressed='true'] {
+  --builder-v2-toggle-small-color: rgba(255, 255, 255, 0.78);
   background: var(--builder-v2-ink);
   border-color: var(--builder-v2-ink);
   color: #ffffff;
@@ -1821,10 +1824,15 @@
 }
 
 .orion-builder-v2-toggle::after {
-  background: #f1e3d6;
+  background:
+    radial-gradient(circle at 8px 50%, #ffffff 0 5.75px, transparent 6.25px),
+    #f1e3d6;
   border: 1px solid #d6b7a1;
   border-radius: 999px;
   box-sizing: border-box;
+  box-shadow:
+    inset 0 1px 2px rgba(107, 77, 53, 0.16),
+    0 1px 0 rgba(255, 255, 255, 0.72);
   content: '';
   display: block;
   flex: 0 0 auto;
@@ -1834,9 +1842,13 @@
 }
 
 .orion-builder-v2-toggle[aria-pressed='true']::after {
-  background: var(--builder-v2-accent);
+  background:
+    radial-gradient(circle at calc(100% - 8px) 50%, #ffffff 0 5.75px, transparent 6.25px),
+    var(--builder-v2-accent);
   border-color: rgba(255, 255, 255, 0.72);
-  box-shadow: inset 14px 0 0 #ffffff;
+  box-shadow:
+    inset 0 1px 2px rgba(107, 77, 53, 0.16),
+    0 1px 0 rgba(255, 255, 255, 0.46);
 }
 
 .orion-builder-v2-panel.is-developer-only-hidden {

package/package.json

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