feat: release design system engine, studio and component contracts

packages/ui/components/PageHeader.wrn

@@ -31,7 +31,7 @@ component PageHeader {
   }
 
   view {
-    <section
+    <section data-wrn-owner="PageHeader" data-wrn-part="root" data-wrn-component="PageHeader" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
       {...attrs}
       data-ui-component="PageHeader"
       data-size='{size}'
@@ -44,29 +44,29 @@ component PageHeader {
       aria-labelledby='{id}'
       class='wrn-page-header {class}'
     >
-      <div
+      <div data-wrn-owner="PageHeader" data-wrn-part="decoration" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
         class="wrn-page-header__decoration"
         aria-hidden="true"
       >
-        <span
+        <span data-wrn-owner="PageHeader" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
           class="wrn-page-header__glow wrn-page-header__glow--one"
         >
         </span>
-        <span
+        <span data-wrn-owner="PageHeader" data-wrn-part="glow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
           class="wrn-page-header__glow wrn-page-header__glow--two"
         >
         </span>
-        <span
+        <span data-wrn-owner="PageHeader" data-wrn-part="gridPattern" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
           class="wrn-page-header__grid-pattern"
         >
         </span>
       </div>
 
-      <div
+      <div data-wrn-owner="PageHeader" data-wrn-part="inner" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
         class="wrn-page-header__inner"
       >
         {#if showBreadcrumbs && breadcrumbs.length > 0}
-          <div
+          <div data-wrn-owner="PageHeader" data-wrn-part="breadcrumb" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
             class="wrn-page-header__breadcrumb"
           >
             <Breadcrumb
@@ -79,7 +79,7 @@ component PageHeader {
             />
           </div>
         {:else if showBreadcrumbs && breadcrumbParent}
-          <div
+          <div data-wrn-owner="PageHeader" data-wrn-part="breadcrumb" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
             class="wrn-page-header__breadcrumb"
           >
             <Breadcrumb
@@ -103,7 +103,7 @@ current: true
             />
           </div>
         {:else if showBreadcrumbs && (breadcrumbCurrent || title)}
-          <div
+          <div data-wrn-owner="PageHeader" data-wrn-part="breadcrumb" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
             class="wrn-page-header__breadcrumb"
           >
             <Breadcrumb
@@ -123,33 +123,33 @@ current: true
           </div>
         {/if}
 
-        <div
+        <div data-wrn-owner="PageHeader" data-wrn-part="layout" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
           class="wrn-page-header__layout"
         >
-          <div
+          <div data-wrn-owner="PageHeader" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
             class="wrn-page-header__content"
           >
-            <div
+            <div data-wrn-owner="PageHeader" data-wrn-part="intro" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
               class="wrn-page-header__intro"
             >
               {#if icon}
-                <span
+                <span data-wrn-owner="PageHeader" data-wrn-part="iconWrap" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                   class="wrn-page-header__icon-wrap"
                 >
                   {#if icon === "sparkles"}
-                    <span
+                    <span data-wrn-owner="PageHeader" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                       class="icon-[lucide--sparkles] wrn-page-header__icon"
                       aria-hidden="true"
                     >
                     </span>
                   {:else if icon === "component"}
-                    <span
+                    <span data-wrn-owner="PageHeader" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                       class="icon-[lucide--component] wrn-page-header__icon"
                       aria-hidden="true"
                     >
                     </span>
                   {:else}
-                    <span
+                    <span data-wrn-owner="PageHeader" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                       class='{icon} wrn-page-header__icon'
                       aria-hidden="true"
                     >
@@ -158,19 +158,19 @@ current: true
                 </span>
               {/if}
 
-              <div
+              <div data-wrn-owner="PageHeader" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                 class="wrn-page-header__copy"
               >
                 {#if eyebrow}
-                  <div
+                  <div data-wrn-owner="PageHeader" data-wrn-part="eyebrowRow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                     class="wrn-page-header__eyebrow-row"
                   >
-                    <span
+                    <span data-wrn-owner="PageHeader" data-wrn-part="eyebrowMark" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                       class="wrn-page-header__eyebrow-mark"
                       aria-hidden="true"
                     >
                     </span>
-                    <p
+                    <p data-wrn-owner="PageHeader" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                       class="wrn-page-header__eyebrow"
                     >
                       {eyebrow}
@@ -179,7 +179,7 @@ current: true
                 {/if}
 
                 {#if title}
-                  <h1
+                  <h1 data-wrn-owner="PageHeader" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                     id='{id}'
                     class="wrn-page-header__title"
                   >
@@ -188,14 +188,14 @@ current: true
                 {/if}
 
                 {#if description}
-                  <p
+                  <p data-wrn-owner="PageHeader" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                     class="wrn-page-header__description"
                   >
                     {description}
                   </p>
                 {/if}
 
-                <div
+                <div data-wrn-owner="PageHeader" data-wrn-part="meta" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
                   class="wrn-page-header__meta"
                 >
                   <slot
@@ -208,7 +208,7 @@ current: true
           </div>
 
           {#if primaryLabel || secondaryLabel}
-            <div
+            <div data-wrn-owner="PageHeader" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
               class="wrn-page-header__actions"
             >
               {#if secondaryLabel}
@@ -241,7 +241,7 @@ current: true
               </slot>
             </div>
           {:else}
-            <div
+            <div data-wrn-owner="PageHeader" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
               class="wrn-page-header__actions wrn-page-header__actions--slot-only"
             >
               <slot
@@ -252,7 +252,7 @@ current: true
           {/if}
         </div>
 
-        <div
+        <div data-wrn-owner="PageHeader" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"
           class="wrn-page-header__body"
         >
           <slot></slot>