feat: release design system engine, studio and component contracts

packages/ui/components/ToggleCount.wrn

@@ -223,10 +223,10 @@ component ToggleCount {
       data-value="{selectedValue}"
       data-disabled="{disabled ? 'true' : 'false'}"
       class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--toggle-count wrn-next--toggle-count-{variant} {fullWidth ? 'wrn-next--toggle-count-full' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
-    >
-      <input type="hidden" name="{name}" value="{selectedValue}" />
+     data-wrn-owner="ToggleCount" data-wrn-part="root" data-wrn-component="ToggleCount" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
+      <input type="hidden" name="{name}" value="{selectedValue}"  data-wrn-owner="ToggleCount" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
 
-      <div class="wrn-next__toggle-count-control wrn-next__toggle-count-control--{align}">
+      <div class="wrn-next__toggle-count-control wrn-next__toggle-count-control--{align}" data-wrn-owner="ToggleCount" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
         {#if variant === "switch"}
           <span data-selected="{isFirstSelected() ? 'true' : 'false'}">{firstLabel}</span>
           <button
@@ -237,30 +237,30 @@ component ToggleCount {
             disabled="{disabled}"
             @click="toggleValue(event)"
             class="wrn-next__toggle-count-switch"
-          >
+           data-wrn-owner="ToggleCount" data-wrn-part="switch" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
             <span aria-hidden="true"></span>
           </button>
           <span data-selected="{isSecondSelected() ? 'true' : 'false'}">{secondLabel}</span>
         {:else}
-          <div class="wrn-next__toggle-count-segmented" role="group" aria-label="{ariaLabel}">
+          <div class="wrn-next__toggle-count-segmented" role="group" aria-label="{ariaLabel}" data-wrn-owner="ToggleCount" data-wrn-part="segmented" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
             <button
               type="button"
               aria-pressed="{isFirstSelected() ? 'true' : 'false'}"
               disabled="{disabled}"
               @click="selectValue(event, firstValue)"
-            >{firstLabel}</button>
+             data-wrn-owner="ToggleCount" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{firstLabel}</button>
             <button
               type="button"
               aria-pressed="{isSecondSelected() ? 'true' : 'false'}"
               disabled="{disabled}"
               @click="selectValue(event, secondValue)"
-            >{secondLabel}</button>
+             data-wrn-owner="ToggleCount" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{secondLabel}</button>
           </div>
         {/if}
       </div>
 
       {#if items.length > 0}
-        <div class="wrn-next__toggle-count-items">
+        <div class="wrn-next__toggle-count-items" data-wrn-owner="ToggleCount" data-wrn-part="items" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
           {#each items as item}
             <article>
               <span>{item.label || item.name}</span>