feat: release design system engine, studio and component contracts

packages/ui/components/PinInput.wrn

@@ -58,8 +58,8 @@ component PinInput {
       data-value="{value}"
       disabled="{disabled}"
       aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
-    >
-      <div class="wrn-next__pin-heading">
+     data-wrn-owner="PinInput" data-wrn-part="root" data-wrn-component="PinInput" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+      <div class="wrn-next__pin-heading" data-wrn-owner="PinInput" data-wrn-part="pinHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
         <legend>{label}</legend>
         <button
           type="button"
@@ -68,13 +68,13 @@ component PinInput {
           aria-label="{clearLabel}"
           title="{clearLabel}"
           style="{clearable && value ? '' : 'display: none'}"
-        >
+         data-wrn-owner="PinInput" data-wrn-part="pinClear" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
           <span class="icon-[lucide--rotate-ccw]" aria-hidden="true"></span>
           <span>{clearLabel}</span>
         </button>
       </div>
 
-      <div class="wrn-next__pin-cells" role="group" aria-label="{label}">
+      <div class="wrn-next__pin-cells" role="group" aria-label="{label}" data-wrn-owner="PinInput" data-wrn-part="pinCells" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
         {#each inputIndexes() as index}
           <input
             data-pin-cell
@@ -91,9 +91,9 @@ component PinInput {
             readonly="{readonly}"
             disabled="{disabled}"
             autofocus="{autoFocus && index === 0}"
-          />
+           data-wrn-owner="PinInput" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
           {#if separator && groupSize !== 0 && (index + 1) % groupSize === 0 && index + 1 !== length}
-            <span class="wrn-next__pin-separator" aria-hidden="true">{separator}</span>
+            <span class="wrn-next__pin-separator" aria-hidden="true" data-wrn-owner="PinInput" data-wrn-part="pinSeparator" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{separator}</span>
           {/if}
         {/each}
       </div>
@@ -104,14 +104,14 @@ component PinInput {
         value="{value}"
         required="{required}"
         data-pin-value
-      />
+       data-wrn-owner="PinInput" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
 
       {#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
       <small
         id="{name}-validation"
         class="wrn-next__validation"
         data-error="{name}"
-      >{validationMessage}</small>
+       data-wrn-owner="PinInput" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{validationMessage}</small>
     </fieldset>
   }