feat: release design system engine, studio and component contracts

packages/ui/components/AuthSplitLayout.wrn

@@ -13,13 +13,13 @@ component AuthSplitLayout {
   view {
     <main
       class="wrn-auth-split wrn-component--color-{color} wrn-component--size-{size} {class}"
-    >
+     data-wrn-owner="AuthSplitLayout" data-wrn-part="root" data-wrn-component="AuthSplitLayout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
       <section
         class="wrn-auth-split__content"
-      >
+       data-wrn-owner="AuthSplitLayout" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
         <div
           class="wrn-auth-split__brand"
-        >
+         data-wrn-owner="AuthSplitLayout" data-wrn-part="brand" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
           <span
             class="icon-[lucide--shield-check]"
             aria-hidden="true"
@@ -29,19 +29,19 @@ component AuthSplitLayout {
         </div>
         <div
           class="wrn-auth-split__message"
-        >
+         data-wrn-owner="AuthSplitLayout" data-wrn-part="message" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
           <span
             class="wrn-auth-split__eyebrow"
-          >
+           data-wrn-owner="AuthSplitLayout" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
             {eyebrow}
           </span>
-          <h1>{title}</h1>
+          <h1 data-wrn-owner="AuthSplitLayout" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{title}</h1>
           {#if description}
             <p>{description}</p>
           {/if}
           <div
             class="wrn-auth-split__features"
-          >
+           data-wrn-owner="AuthSplitLayout" data-wrn-part="features" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
             {#each features as item}
               <article>
                 <span
@@ -63,16 +63,16 @@ component AuthSplitLayout {
         </div>
         <small
           class="wrn-auth-split__legal"
-        >
+         data-wrn-owner="AuthSplitLayout" data-wrn-part="legal" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
           Authorised access only · Activity may be monitored and audited.
         </small>
       </section>
       <section
         class="wrn-auth-split__form"
-      >
+       data-wrn-owner="AuthSplitLayout" data-wrn-part="form" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
         <div
           class="wrn-auth-split__form-inner"
-        >
+         data-wrn-owner="AuthSplitLayout" data-wrn-part="formInner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
           <slot
             name="form"
           />