feat(modal): implement multi-step (steps) mechanism

devbench/src/component/modal.jsx

@@ -39,6 +39,64 @@ export function ModalTest() {
     return props;
   });
 
+  // Multi-step modal example: a two-page registration flow. Toggle `useSteps`
+  // to compare against the classic single-view `elements` modal above.
+  const useSteps = true;
+  const registrationSteps = [
+    {
+      title: 'Account Details',
+      elements: [
+        {
+          type: 'text',
+          name: 'firstName',
+          placeholder: 'First Name',
+          amount: 1
+        },
+        {
+          type: 'email',
+          name: 'email',
+          placeholder: 'Email',
+          amount: 1,
+          validation: 'email'
+        }
+      ]
+    },
+    {
+      title: 'Security',
+      elements: [
+        {
+          type: 'password',
+          name: 'password',
+          placeholder: 'Password',
+          id: 'password',
+          amount: 1
+        },
+        {
+          type: 'password',
+          name: 'confirmPassword',
+          placeholder: 'Confirm Password',
+          match: 'password',
+          amount: 1
+        }
+      ]
+    }
+  ];
+
+  if (useSteps) {
+    return (
+      <Modal
+        title="Register"
+        Id="register-modal"
+        className="testmodal"
+        theme={'Crimson'}
+        type="form"
+        steps={registrationSteps}
+        onSubmit={(data) => console.log('submitted', data)}
+        onChange={(data) => console.log(data)}
+      />
+    );
+  }
+
   return (
     <Modal
       title="Register"

src/components/modal/dependencies/style/elements.css

@@ -222,3 +222,60 @@
 .modal-file .dyvix-file-ui p {
   font-size: 0.5rem;
 }
+
+/* Multi-step modal navigation (steps mechanism) */
+/* Classic (non-stepped) modals render fields through this wrapper, which is
+   transparent to layout so existing modals are unaffected. */
+.modal-fields-body {
+  display: contents;
+}
+.modal-steps-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: inherit;
+}
+.modal-step-title {
+  margin: 0 0 0.25rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  opacity: 0.85;
+  text-align: center;
+}
+.modal-steps-progress {
+  display: flex;
+  justify-content: center;
+  gap: 0.4rem;
+  margin: 0.25rem 0 0.75rem;
+}
+.modal-step-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.25;
+  transition:
+    opacity 0.25s ease,
+    transform 0.25s ease;
+}
+.modal-step-dot.done {
+  opacity: 0.55;
+}
+.modal-step-dot.active {
+  opacity: 1;
+  transform: scale(1.25);
+}
+.modal-steps-nav {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+.modal-steps-nav .modal-btn {
+  flex: 1;
+  min-width: 0;
+}
+.modal-steps-nav .modal-step-back {
+  opacity: 0.85;
+}