feat: release design system engine, studio and component contracts

packages/ui/components/MetricGrid.wrn

@@ -55,9 +55,9 @@ component MetricGrid {
       data-auto-fit='{minItemWidth ? "true" : "false"}'
       class='wrn-metric-grid {class}'
       style='display:block;width:100%;min-width:0;--wrn-metric-columns:{columns};--wrn-metric-tablet-columns:{tabletColumns};--wrn-metric-mobile-columns:{mobileColumns};--wrn-metric-min-item-width:{minItemWidth || "18rem"};'
-    >
-      <div class="wrn-metric-grid__frame">
-        <div class="wrn-metric-grid__surface">
+     data-wrn-owner="MetricGrid" data-wrn-part="root" data-wrn-component="MetricGrid" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
+      <div class="wrn-metric-grid__frame" data-wrn-owner="MetricGrid" data-wrn-part="frame" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
+        <div class="wrn-metric-grid__surface" data-wrn-owner="MetricGrid" data-wrn-part="surface" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
           {#each items as item, itemIndex}
             <MetricCard
               label='{item.label || item.title || "Metric"}'
@@ -92,7 +92,7 @@ component MetricGrid {
               @action='forwardAction(item, itemIndex, event)'
             />
           {:empty}
-            <div class="wrn-metric-grid__empty" role="status">
+            <div class="wrn-metric-grid__empty" role="status" data-wrn-owner="MetricGrid" data-wrn-part="empty" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
               <slot>No metrics are available.</slot>
             </div>
           {/each}