feat: release design system engine, studio and component contracts

packages/ui/components/StrongPassword.wrn

@@ -139,10 +139,10 @@ component StrongPassword {
       data-wrn-strong-password
       data-strength="{password ? strengthLevel() : 'empty'}"
       data-score="{password ? score() : 0}"
-    >
-      <label for="{name}-strong-password">{label}</label>
-      <div class="wrn-next__strong-password-anchor">
-        <span class="wrn-next__strong-password-leading-icon" aria-hidden="true"></span>
+     data-wrn-owner="StrongPassword" data-wrn-part="root" data-wrn-component="StrongPassword" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+      <label for="{name}-strong-password" data-wrn-owner="StrongPassword" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</label>
+      <div class="wrn-next__strong-password-anchor" data-wrn-owner="StrongPassword" data-wrn-part="anchor" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+        <span class="wrn-next__strong-password-leading-icon" aria-hidden="true" data-wrn-owner="StrongPassword" data-wrn-part="leadingIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
         <input
           {...attrs}
           id="{name}-strong-password"
@@ -161,7 +161,7 @@ component StrongPassword {
           @blur="detailsOpen = false"
           @invalid="handleInvalid(event)" @input="nativeError = ''; password = event.target.value; output.input({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); output.strength({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
           @change="output.change({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
-        />
+         data-wrn-owner="StrongPassword" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
         <button
           type="button"
           class="wrn-next__strong-password-toggle"
@@ -170,17 +170,17 @@ component StrongPassword {
           aria-pressed="{revealed ? 'true' : 'false'}"
           disabled="{disabled || readonly}"
           @click="toggleVisibility()"
-        ><span aria-hidden="true"></span></button>
+         data-wrn-owner="StrongPassword" data-wrn-part="toggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span aria-hidden="true"></span></button>
 
         {#if presentation === "popover"}
           <div
             class="wrn-next__strong-password-popover"
             data-open="{detailsOpen ? 'true' : 'false'}"
             role="status"
-          >
-            <div class="wrn-next__strong-password-popover-arrow" aria-hidden="true"></div>
-            <div class="wrn-next__strong-password-details">
-              <div class="wrn-next__strong-password-summary">
+           data-wrn-owner="StrongPassword" data-wrn-part="popover" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+            <div class="wrn-next__strong-password-popover-arrow" aria-hidden="true" data-wrn-owner="StrongPassword" data-wrn-part="popoverArrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></div>
+            <div class="wrn-next__strong-password-details" data-wrn-owner="StrongPassword" data-wrn-part="details" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+              <div class="wrn-next__strong-password-summary" data-wrn-owner="StrongPassword" data-wrn-part="summary" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                 <span>Password strength</span>
                 <strong>{password ? strengthLabel() : emptyLabel}</strong>
               </div>
@@ -191,18 +191,18 @@ component StrongPassword {
                 aria-valuemin="0"
                 aria-valuemax="100"
                 aria-valuenow="{password ? strengthPercent() : 0}"
-              >
+               data-wrn-owner="StrongPassword" data-wrn-part="meter" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                 <span style="width: {password ? strengthPercent() : 0}%"></span>
               </div>
               {#if showRequirements}
-                <ul class="wrn-next__strong-password-requirements">
+                <ul class="wrn-next__strong-password-requirements" data-wrn-owner="StrongPassword" data-wrn-part="requirements" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
                   <li data-met="{password && hasMinimumLength() ? 'true' : 'false'}">
                     <span aria-hidden="true"></span>At least {minLength} characters
                   </li>
                   {#if requireLowercase}<li data-met="{password && hasLowercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One lowercase letter</li>{/if}
                   {#if requireUppercase}<li data-met="{password && hasUppercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One uppercase letter</li>{/if}
                   {#if requireNumber}<li data-met="{password && hasNumber() ? 'true' : 'false'}"><span aria-hidden="true"></span>One number</li>{/if}
-                  {#if requireSpecialCharacter}<li class="wrn-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
+                  {#if requireSpecialCharacter}<li class="wrn-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}" data-wrn-owner="StrongPassword" data-wrn-part="special" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
                 </ul>
               {/if}
               {#if hintText}<small id="{name}-hint">{hintText}</small>{/if}
@@ -212,8 +212,8 @@ component StrongPassword {
       </div>
 
       {#if presentation !== "popover"}
-        <div class="wrn-next__strong-password-details">
-          <div class="wrn-next__strong-password-summary">
+        <div class="wrn-next__strong-password-details" data-wrn-owner="StrongPassword" data-wrn-part="details" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
+          <div class="wrn-next__strong-password-summary" data-wrn-owner="StrongPassword" data-wrn-part="summary" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
             <span>Password strength</span>
             <strong>{password ? strengthLabel() : emptyLabel}</strong>
           </div>
@@ -224,23 +224,23 @@ component StrongPassword {
             aria-valuemin="0"
             aria-valuemax="100"
             aria-valuenow="{password ? strengthPercent() : 0}"
-          >
+           data-wrn-owner="StrongPassword" data-wrn-part="meter" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
             <span style="width: {password ? strengthPercent() : 0}%"></span>
           </div>
           {#if showRequirements}
-            <ul class="wrn-next__strong-password-requirements">
+            <ul class="wrn-next__strong-password-requirements" data-wrn-owner="StrongPassword" data-wrn-part="requirements" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
               <li data-met="{password && hasMinimumLength() ? 'true' : 'false'}"><span aria-hidden="true"></span>At least {minLength} characters</li>
               {#if requireLowercase}<li data-met="{password && hasLowercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One lowercase letter</li>{/if}
               {#if requireUppercase}<li data-met="{password && hasUppercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One uppercase letter</li>{/if}
               {#if requireNumber}<li data-met="{password && hasNumber() ? 'true' : 'false'}"><span aria-hidden="true"></span>One number</li>{/if}
-              {#if requireSpecialCharacter}<li class="wrn-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
+              {#if requireSpecialCharacter}<li class="wrn-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}" data-wrn-owner="StrongPassword" data-wrn-part="special" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
             </ul>
           {/if}
           {#if hintText}<small id="{name}-hint">{hintText}</small>{/if}
         </div>
       {/if}
 
-      <small id="{name}-validation" class="wrn-next__validation" data-error="{name}">{(validationMessage || nativeError)}</small>
+      <small id="{name}-validation" class="wrn-next__validation" data-error="{name}" data-wrn-owner="StrongPassword" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{(validationMessage || nativeError)}</small>
     </div>
   }