aw-wizard-forms 4.2.0 → 4.3.0

package/README.md

@@ -190,6 +190,29 @@ Modern browsers (ES2020+):
 - Safari 14+
 - Edge 80+
 
+## Known Issues
+
+### Step disappears intermittently with `submit-on-step` enabled
+
+**Status:** Under investigation
+
+When using the `submit-on-step` attribute for partial HubSpot submissions, the next step may occasionally disappear (blank content area while progress bar updates correctly). This is a rare, intermittent issue.
+
+**Workaround:** If you encounter this, refresh the page. The issue does not affect final form submission.
+
+**Debug:** Run this in console when it occurs to help diagnose:
+```javascript
+document.querySelectorAll('wf-step').forEach((step, i) => {
+  console.log(`Step ${i + 1}:`, {
+    active: step.hasAttribute('active'),
+    display: getComputedStyle(step).display,
+    height: step.offsetHeight
+  });
+});
+```
+
+Track progress: [GitHub Issue #31](https://github.com/atomicworkhq/aw-wizard-forms/issues/31)
+
 ## License
 
 MIT © [Atomicwork](https://atomicwork.com)

package/dist/wizard-form.esm.js

@@ -2761,7 +2761,7 @@ const wfOtherStyles = i$3`
     display: flex;
     align-items: center;
     gap: var(--wf-spacing-3);
-    min-height: var(--wf-input-min-height);
+    height: var(--wf-input-min-height);
     background: var(--wf-glass-bg);
     backdrop-filter: blur(var(--wf-glass-blur));
     -webkit-backdrop-filter: blur(var(--wf-glass-blur));
@@ -2769,6 +2769,7 @@ const wfOtherStyles = i$3`
     border-radius: var(--wf-radius-md);
     box-shadow: var(--wf-glass-shadow);
     padding-left: var(--wf-spacing-3);
+    padding-right: var(--wf-spacing-2);
     transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
   }
 
@@ -2799,12 +2800,22 @@ const wfOtherStyles = i$3`
   .wf-other-actions {
     display: flex;
     align-items: center;
-    justify-content: stretch;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+
+  /* Show button when input has value */
+  .wf-other-input-wrapper.has-value .wf-other-actions {
+    opacity: 1;
+    visibility: visible;
   }
 
-  /* Ensure slotted button fills the action column */
+  /* Button inside input box should not stretch */
   .wf-other-actions ::slotted(*) {
-    width: 100%;
+    width: auto;
   }
 `;
 var __defProp$b = Object.defineProperty;
@@ -2878,31 +2889,30 @@ let WfOther = class extends i {
   // Render
   // ============================================
   render() {
+    const hasValue = this._value.trim().length > 0;
     return b`
       <div class="wf-other-container" data-testid="wf-other">
         <label class="wf-other-label">
           ${this.label}
           ${this.labelHint ? b`<span>${this.labelHint}</span>` : A}
         </label>
-        <wf-layout mode="grid" columns="4" gap="md">
-          <div class="wf-other-input-wrapper" data-span="3">
-            ${this.shortcut ? b`<wf-badge shortcut="${this.shortcut}"></wf-badge>` : A}
-            <input
-              type="text"
-              class="wf-other-input"
-              placeholder="${this.placeholder}"
-              .value="${this._value}"
-              ?disabled="${this.disabled}"
-              ?required="${this.required}"
-              @input="${this._handleInput}"
-              data-testid="wf-other-input"
-            />
-          </div>
-          <!-- Slot for action buttons (like wf-next-btn) -->
+        <div class="wf-other-input-wrapper ${hasValue ? "has-value" : ""}">
+          ${this.shortcut ? b`<wf-badge shortcut="${this.shortcut}"></wf-badge>` : A}
+          <input
+            type="text"
+            class="wf-other-input"
+            placeholder="${this.placeholder}"
+            .value="${this._value}"
+            ?disabled="${this.disabled}"
+            ?required="${this.required}"
+            @input="${this._handleInput}"
+            data-testid="wf-other-input"
+          />
+          <!-- Slot for action buttons (like wf-next-btn) inside input -->
           <div class="wf-other-actions">
             <slot></slot>
           </div>
-        </wf-layout>
+        </div>
       </div>
     `;
   }
@@ -4802,20 +4812,22 @@ const wfProgressStyles = [
 
     .wf-progress {
       display: flex;
-      gap: var(--wf-spacing-2);
+      gap: 16px;
+      align-items: center;
+      justify-content: center;
     }
 
     .wf-progress-segment {
-      width: 100%;
-      height: var(--wf-progress-height);
-      background-color: var(--wf-color-progress-inactive);
-      border-radius: var(--wf-radius-full);
+      width: 32px;
+      height: 8px;
+      background-color: white;
+      border-radius: 100vw;
       transition: background-color 300ms ease;
     }
 
     .wf-progress-segment.completed,
     .wf-progress-segment.active {
-      background-color: var(--wf-color-progress-active);
+      background-color: rgb(136 66 240);
     }
   `
 ];
@@ -5061,9 +5073,12 @@ const wfNextBtnStyles = [
     }
 
     :host([inline]) .wf-btn {
-      min-height: var(--wf-input-min-height);
+      min-height: 16px;
       width: auto;
-      padding: var(--wf-spacing-3) var(--wf-spacing-5);
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-left: 12px;
+      padding-right: 8px;
     }
   `
 ];