WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: release design system engine, studio and component contracts

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/Stepper.wrn
+20 -20
View File
@@ -146,72 +146,72 @@ component Stepper {
data-color='{color}'
data-size='{size}'
data-clickable='{clickable}'
>
data-wrn-owner="Stepper" data-wrn-part="root" data-wrn-component="Stepper" data-wrn-axis-color='{color}' data-wrn-axis-size='{size}'>
<ol
class="wrn-stepper__list"
data-wrn-roving='{rovingAxis()}'
aria-label='{label}'
>
data-wrn-owner="Stepper" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each stepList() as step, index}
<li
class="wrn-stepper__step"
data-status='{statusFor(index)}'
aria-current='{statusFor(index) === "current" ? "step" : "false"}'
>
data-wrn-owner="Stepper" data-wrn-part="step" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<button
type="button"
class="wrn-stepper__button"
data-wrn-roving-item='{clickable ? "true" : "false"}'
@click='selectStep(index, step)'
>
<span class="wrn-stepper__marker" aria-hidden="true">
<span class='wrn-stepper__icon {step.icon}' data-show="step.icon"></span>
<span class="wrn-stepper__number" data-show="!step.icon">{index + 1}</span>
data-wrn-owner="Stepper" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-stepper__marker" aria-hidden="true" data-wrn-owner="Stepper" data-wrn-part="marker" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class='wrn-stepper__icon {step.icon}' data-show="step.icon" data-wrn-owner="Stepper" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<span class="wrn-stepper__number" data-show="!step.icon" data-wrn-owner="Stepper" data-wrn-part="number" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{index + 1}</span>
</span>
<span class="wrn-stepper__body">
<span class="wrn-stepper__label">{step.label}</span>
<span class="wrn-stepper__description" data-show="step.description">
<span class="wrn-stepper__body" data-wrn-owner="Stepper" data-wrn-part="body" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<span class="wrn-stepper__label" data-wrn-owner="Stepper" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{step.label}</span>
<span class="wrn-stepper__description" data-show="step.description" data-wrn-owner="Stepper" data-wrn-part="description" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{step.description}
</span>
</span>
</button>
<span class="wrn-stepper__custom">
<span class="wrn-stepper__custom" data-wrn-owner="Stepper" data-wrn-part="custom" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<slot name="step-{index}"></slot>
</span>
</li>
{/each}
</ol>
<div class="wrn-stepper__panels" data-show="showPanel">
<div class="wrn-stepper__panels" data-show="showPanel" data-wrn-owner="Stepper" data-wrn-part="panels" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{#each stepList() as step, index}
<div
class="wrn-stepper__panel"
data-show='isActiveStep(index)'
aria-hidden='{index === activeIndex() ? "false" : "true"}'
>
<h4 class="wrn-stepper__panel-title" data-show="step.title">{step.title}</h4>
<p class="wrn-stepper__panel-body" data-show="step.content">{step.content}</p>
data-wrn-owner="Stepper" data-wrn-part="panel" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<h4 class="wrn-stepper__panel-title" data-show="step.title" data-wrn-owner="Stepper" data-wrn-part="panelTitle" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{step.title}</h4>
<p class="wrn-stepper__panel-body" data-show="step.content" data-wrn-owner="Stepper" data-wrn-part="panelBody" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{step.content}</p>
<slot name="panel-{index}"></slot>
</div>
{/each}
</div>
<div class="wrn-stepper__controls" data-show="controls">
<div class="wrn-stepper__controls" data-show="controls" data-wrn-owner="Stepper" data-wrn-part="controls" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
<button
type="button"
class="wrn-stepper__button-control wrn-stepper__back"
disabled='{activeIndex() === 0}'
@click='goBack()'
>
data-wrn-owner="Stepper" data-wrn-part="buttonControl" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{backLabel}
</button>
<span class="wrn-stepper__controls-spacer"></span>
<span class="wrn-stepper__controls-spacer" data-wrn-owner="Stepper" data-wrn-part="controlsSpacer" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></span>
<button
type="button"
class="wrn-stepper__button-control wrn-stepper__skip"
data-show="allowSkip && !onLastStep()"
@click='goSkip()'
>
data-wrn-owner="Stepper" data-wrn-part="buttonControl" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{skipLabel}
</button>
<button
@@ -220,7 +220,7 @@ component Stepper {
data-primary="true"
disabled='{nextDisabled}'
@click='goNext()'
>
data-wrn-owner="Stepper" data-wrn-part="buttonControl" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
{onLastStep() ? finishLabel : nextLabel}
</button>
</div>