feat: release design system engine, studio and component contracts

packages/ui/components/Toaster.wrn

@@ -449,7 +449,7 @@ component Toaster {
       @window:wrnexus:toast:dismiss='dismissById(event)'
       @window:wrnexus:toast:clear='clearAll()'
       @window:wrnexus:toast:remove='removeById(event)'
-    >
+     data-wrn-owner="Toaster" data-wrn-part="root" data-wrn-component="Toaster" data-wrn-axis-color="{color}" data-wrn-axis-size='{size}'>
       <!-- Hover is bound to the list, not to each toast, and pauses the whole
            stack. A row is a data-for clone that is recreated whenever state
            changes, so a per-row mouseleave would be bound to a node the
@@ -467,7 +467,7 @@ component Toaster {
         @mouseleave='resumeAll()'
         @focusin='pauseAll()'
         @focusout='resumeAll()'
-      >
+       data-wrn-owner="Toaster" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
         <li
           class="wrn-toast"
           data-for="item in toasts"
@@ -478,7 +478,7 @@ component Toaster {
           <span
             class="wrn-toast__indicator"
             aria-hidden="true"
-          >
+           data-wrn-owner="Toaster" data-wrn-part="indicator" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
           </span>
 
           <!-- An app-supplied icon class (iconify or otherwise). -->
@@ -486,7 +486,7 @@ component Toaster {
             class='wrn-toast__icon {item.icon}'
             data-show="item.showIcon && item.icon"
             aria-hidden="true"
-          >
+           data-wrn-owner="Toaster" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
           </span>
 
           <!-- Built-in fallback. Inline SVG on purpose: the package cannot
@@ -505,7 +505,7 @@ component Toaster {
             stroke-linecap="round"
             stroke-linejoin="round"
             aria-hidden="true"
-          >
+           data-wrn-owner="Toaster" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
             <g data-show="item.tone === 'success'">
               <circle cx="12" cy="12" r="10" />
               <path d="m9 12 2 2 4-4" />
@@ -529,16 +529,16 @@ component Toaster {
 
           <div
             class="wrn-toast__body"
-          >
+           data-wrn-owner="Toaster" data-wrn-part="body" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
             <p
               class="wrn-toast__title"
               data-show="item.title"
-            >
+             data-wrn-owner="Toaster" data-wrn-part="title" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
               {item.title}
             </p>
             <p
               class="wrn-toast__message"
-            >
+             data-wrn-owner="Toaster" data-wrn-part="message" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
               {item.message}
             </p>
           </div>
@@ -549,14 +549,14 @@ component Toaster {
           <div
             class="wrn-toast__actions"
             data-show="item.actions.length"
-          >
+           data-wrn-owner="Toaster" data-wrn-part="actions" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
             <button
               type="button"
               class="wrn-toast__action"
               data-show="item.actions.length > 0"
               data-tone='{item.actions[0].tone}'
               @click='runAction(item.id, 0, event)'
-            >
+             data-wrn-owner="Toaster" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
               {item.actions[0].label}
             </button>
 
@@ -566,7 +566,7 @@ component Toaster {
               data-show="item.actions.length > 1"
               data-tone='{item.actions[1].tone}'
               @click='runAction(item.id, 1, event)'
-            >
+             data-wrn-owner="Toaster" data-wrn-part="action" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
               {item.actions[1].label}
             </button>
           </div>
@@ -577,7 +577,7 @@ component Toaster {
             data-show="closable"
             aria-label='{closeLabel}'
             @click='dismissToast(item.id, "close-button")'
-          >
+           data-wrn-owner="Toaster" data-wrn-part="close" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
             <svg
               viewBox="0 0 24 24"
               width="14"
@@ -587,7 +587,7 @@ component Toaster {
               stroke-width="2.2"
               stroke-linecap="round"
               aria-hidden="true"
-            >
+             data-wrn-owner="Toaster" data-wrn-part="vector" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
               <path d="M18 6 6 18" />
               <path d="M6 6 18 18" />
             </svg>
@@ -600,7 +600,7 @@ component Toaster {
             data-show="showProgress && item.duration"
             style="--toast-duration: {item.duration}ms"
             aria-hidden="true"
-          >
+           data-wrn-owner="Toaster" data-wrn-part="progress" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
           </span>
         </li>
       </ol>