@pure-ds/core 0.4.0 → 0.4.2

package/public/assets/pds/components/pds-jsonform.js

@@ -546,7 +546,7 @@ export class SchemaForm extends LitElement {
     }
 
     const fieldsetClass =
-      layoutClasses.length > 0 ? layoutClasses.join(" ") : undefined;
+      layoutClasses.length > 0 ? layoutClasses.join(" ") : "stack-sm";
 
     // Render basic fieldset
     const fieldsetContent = html`
@@ -1140,7 +1140,7 @@ export class SchemaForm extends LitElement {
           : node.widgetKey === "checkbox-group"
           ? "group"
           : undefined;
-      const fieldsetClass = ui?.["ui:class"];
+      const fieldsetClass = ui?.["ui:class"] ?? "stack-sm";
       return html`
         <fieldset
           data-path=${path}

package/src/js/pds-core/pds-enhancer-metadata.js

@@ -34,11 +34,11 @@ export const enhancerMetadata = [
     `.trim(),
   },
   {
-    selector: "form [required]",
+    selector: "form[data-required]",
     description:
       "Enhances required form fields using an asterisk in the label.",
     demoHtml: `
-      <form action'#" method="post">
+      <form data-required action="#" method="post">
       <label>
         <span>Field Label</span>
         <input type="text" required>

package/src/js/pds-core/pds-enhancers.js

@@ -212,28 +212,38 @@ function enhanceRange(elem) {
 }
 
 function enhanceRequired(elem) {
-  const label = elem.closest("label");
-  if (!label) return;
-  if (label.querySelector(".required-asterisk")) return;
-
-  const asterisk = document.createElement("span");
-  asterisk.classList.add("required-asterisk");
-  asterisk.textContent = "*";
-  asterisk.style.marginLeft = "4px";
-  label.querySelector("span").appendChild(asterisk);
-
-  const form = elem.closest("form");
-  if (form && !form.querySelector(".required-legend")) {
-    const legend = document.createElement("div");
-    legend.classList.add("required-legend", "pill", "pill-outline");
-    legend.style.fontSize = "0.9em";
-    legend.style.marginBottom = "8px";
-    legend.textContent = "* Required fields";
-    form.insertBefore(
-      legend,
-      form.querySelector(".form-actions") || form.lastElementChild
-    );
+  
+   if (elem.dataset.enhancedRequired) return;
+    elem.dataset.enhancedRequired = "true";
+  
+  const enhanceRequiredField = (input) => {
+   
+    const label = input.closest("label");
+    if (!label) return;
+    if (label.querySelector(".required-asterisk")) return;
+
+    const asterisk = document.createElement("span");
+    asterisk.classList.add("required-asterisk");
+    asterisk.textContent = "*";
+    asterisk.style.marginLeft = "4px";
+    label.querySelector("span").appendChild(asterisk);
+
+    const form = input.closest("form");
+    if (form && !form.querySelector(".required-legend")) {
+      const legend = document.createElement("small");
+      legend.classList.add("required-legend");
+      legend.textContent = "* Required fields";
+      form.insertBefore(
+        legend,
+        form.querySelector(".form-actions") || form.lastElementChild
+      );
+    }
   }
+
+  elem.querySelectorAll("[required]").forEach((input) => {
+    enhanceRequiredField(input);
+  });
+  
 }
 
 function enhanceOpenGroup(elem) {
@@ -344,7 +354,7 @@ const enhancerRunners = new Map([
   ["nav[data-dropdown]", enhanceDropdown],
   ["label[data-toggle]", enhanceToggle],
   ['input[type="range"]', enhanceRange],
-  ["form [required]", enhanceRequired],
+  ["form[data-required]", enhanceRequired],
   ["fieldset[role=group][data-open]", enhanceOpenGroup],
   ["button, a[class*='btn-']", enhanceButtonWorking],
 ]);

package/src/js/pds-core/pds-generator.js

@@ -1831,11 +1831,7 @@ form {
 }
 
 fieldset {
-  margin: 0 0 var(--spacing-${
-    Number.isFinite(Math.round((gapValue * sectionSpacingValue) / 4))
-      ? Math.round((gapValue * sectionSpacingValue) / 4)
-      : 1
-  }) 0;
+  margin: 0
   padding: var(--spacing-5);
   width: 100%;
   background-color: color-mix(in oklab, var(--color-surface-subtle) 50%, transparent 50%);
@@ -1910,7 +1906,6 @@ fieldset fieldset fieldset > legend { font-size: var(--font-size-sm); }
 
 label {
   display: block;
-  margin-bottom: var(--spacing-3);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   font-size: var(--font-size-sm);
@@ -2630,16 +2625,7 @@ a.btn-working {
   border: ${borderWidth}px solid var(--color-border);
   border-radius: var(--radius-md);
   background-color: var(--color-surface-base);
-
-  fieldset {
-    background-color: transparent;
-    margin-bottom: var(--spacing-3);
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
+  
   .array-controls {
     padding-top: var(--spacing-3);
     border-top: ${borderWidth}px solid var(--color-border);
@@ -3093,8 +3079,7 @@ dialog {
     overlay 0.2s ease allow-discrete,
     display 0.2s ease allow-discrete;
   
-  /* Overflow handling */
-  overflow: hidden;
+  
 }
 
 /* Open state */
@@ -3196,7 +3181,7 @@ dialog {
   form > article,
   .dialog-body {
     flex: 1;
-    padding: var(--spacing-6);
+    padding: var(--spacing-3) var(--spacing-6);
     overflow-y: auto;
     overflow-x: hidden;
   }