feat: release design system engine, studio and component contracts

packages/ui/components/AuthForm.wrn

@@ -49,10 +49,10 @@ component AuthForm {
   }
 
   view {
-    <section class="wrn-auth-form wrn-component--color-{color} wrn-component--size-{size} {class}">
+    <section class="wrn-auth-form wrn-component--color-{color} wrn-component--size-{size} {class}" data-wrn-owner="AuthForm" data-wrn-part="root" data-wrn-component="AuthForm" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
       <header>
-        <span class="wrn-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true"></span>
-        <div><h2>{title}</h2>{#if description}<p>{description}</p>{/if}</div>
+        <span class="wrn-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true" data-wrn-owner="AuthForm" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
+        <div><h2 data-wrn-owner="AuthForm" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</h2>{#if description}<p>{description}</p>{/if}</div>
       </header>
       <form
         action="{action}"
@@ -62,7 +62,7 @@ component AuthForm {
         novalidate="true"
         @submit="submitForm(event)"
       >
-        {#if returnTo}<input type="hidden" name="returnTo" value="{returnTo}" />{/if}
+        {#if returnTo}<input type="hidden" name="returnTo" value="{returnTo}"  data-wrn-owner="AuthForm" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>{/if}
         {#if mode === "register" && showName}
           <Input label="Full name" name="displayName" autocomplete="name" placeholder="Enter your full name" required="true" icon="icon-[lucide--user-round]" iconPosition="start" @change="fieldEvent('change', payload)" @input="fieldEvent('input', payload)" @focus="fieldEvent('focus', payload)" @blur="fieldEvent('blur', payload)" />
         {/if}
@@ -79,9 +79,9 @@ component AuthForm {
           <PinInput label="Verification code" name="code" length={6} inputMode="numeric" />
         {/if}
         {#if mode === "sign-in" && showRemember}
-          <div class="wrn-auth-form__options">
+          <div class="wrn-auth-form__options" data-wrn-owner="AuthForm" data-wrn-part="options" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
             <Checkbox label="Remember this device" name="rememberDevice" value="on" />
-            <a href="/forgot-password">Forgot password?</a>
+            <a href="/forgot-password" data-wrn-owner="AuthForm" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Forgot password?</a>
           </div>
         {/if}
         <Button type="submit" label="{submitLabel}" variant="default" color="{color}" size="lg" fullWidth="true" icon="icon-[lucide--arrow-right]" iconPosition="end" class="wrn-auth-form__submit" />