feat: release design system engine, studio and component contracts

packages/ui/components/TimePicker.wrn

@@ -51,16 +51,16 @@ size: string = "default"
     client function handleInvalid(sourceEvent) { output.invalid({ name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
   }
   view {
-    <div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--time-picker {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}" @keydown="if (event.key === 'Escape') { closePicker(event) }">
-      <div class="wrn-next__field-heading"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint">{cornerHint}</span>{/if}</div>
-      <div class="wrn-next__field-control" data-icon-position="{iconPosition}">
-        {#if icon}<span class="{icon} wrn-next__field-icon" aria-hidden="true"></span>{/if}
-        <input id="{id || name}" class="wrn-next__sr-only wrn-next__time-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" />
-        <button type="button" class="wrn-next__time-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openPicker(event)" @focus="handleFocus(event)" @blur="handleBlur(event)"><span>{currentValue || placeholder || "Select time"}</span><i class="{icon}" aria-hidden="true"></i></button>
+    <div {...attrs} class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--field wrn-next--time-picker {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}" @keydown="if (event.key === 'Escape') { closePicker(event) }" data-wrn-owner="TimePicker" data-wrn-part="root" data-wrn-component="TimePicker" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
+      <div class="wrn-next__field-heading" data-wrn-owner="TimePicker" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><label class="{hiddenLabel ? 'wrn-next__sr-only' : ''}" for="{id || name}" data-wrn-owner="TimePicker" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{label}</label>{#if cornerHint}<span class="wrn-next__field-hint" data-wrn-owner="TimePicker" data-wrn-part="hint" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{cornerHint}</span>{/if}</div>
+      <div class="wrn-next__field-control" data-icon-position="{iconPosition}" data-wrn-owner="TimePicker" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
+        {#if icon}<span class="{icon} wrn-next__field-icon" aria-hidden="true" data-wrn-owner="TimePicker" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>{/if}
+        <input id="{id || name}" class="wrn-next__sr-only wrn-next__time-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)"  data-wrn-owner="TimePicker" data-wrn-part="srOnly" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
+        <button type="button" class="wrn-next__time-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openPicker(event)" @focus="handleFocus(event)" @blur="handleBlur(event)" data-wrn-owner="TimePicker" data-wrn-part="timeTrigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span>{currentValue || placeholder || "Select time"}</span><i class="{icon}" aria-hidden="true"></i></button>
       </div>
-      <button type="button" class="wrn-time-dismiss" aria-label="Close time picker" data-show="expanded" @click="closePicker(event)"></button><div data-show="expanded" class="wrn-next__time-panel" role="dialog" aria-label="{label}"><div><strong>Hour</strong><div class="wrn-next__time-options">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{!!currentValue && String(hour) === selectedHour}" @click="selectTimePart(event)">{hour}</button>{/each}</div></div><div><strong>Minute</strong><div class="wrn-next__time-options">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{!!currentValue && String(minute) === selectedMinute}" @click="selectTimePart(event)">{minute}</button>{/each}</div></div><button type="button" class="wrn-next__time-done" @click="closePicker(event)">Done</button></div>
-      {#if helperText}<small class="wrn-next__field-help">{helperText}</small>{/if}
-      <small class="wrn-next__field-error" data-error="{name}">{error}</small>
+      <button type="button" class="wrn-time-dismiss" aria-label="Close time picker" data-show="expanded" @click="closePicker(event)" data-wrn-owner="TimePicker" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button><div data-show="expanded" class="wrn-next__time-panel" role="dialog" aria-label="{label}" data-wrn-owner="TimePicker" data-wrn-part="timePanel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><div><strong>Hour</strong><div class="wrn-next__time-options" data-wrn-owner="TimePicker" data-wrn-part="timeOptions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{!!currentValue && String(hour) === selectedHour}" @click="selectTimePart(event)" data-wrn-owner="TimePicker" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{hour}</button>{/each}</div></div><div><strong>Minute</strong><div class="wrn-next__time-options" data-wrn-owner="TimePicker" data-wrn-part="timeOptions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{!!currentValue && String(minute) === selectedMinute}" @click="selectTimePart(event)" data-wrn-owner="TimePicker" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{minute}</button>{/each}</div></div><button type="button" class="wrn-next__time-done" @click="closePicker(event)" data-wrn-owner="TimePicker" data-wrn-part="timeDone" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Done</button></div>
+      {#if helperText}<small class="wrn-next__field-help" data-wrn-owner="TimePicker" data-wrn-part="help" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{helperText}</small>{/if}
+      <small class="wrn-next__field-error" data-error="{name}" data-wrn-owner="TimePicker" data-wrn-part="error" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{error}</small>
     </div>
   }