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/TogglePassword.wrn
+19 -19
View File
@@ -68,13 +68,13 @@ component TogglePassword {
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--toggle-password {invalid || validationMessage || nativeError ? 'wrn-next--invalid' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
data-wrn-toggle-password
data-visible="{revealed ? 'true' : 'false'}"
>
data-wrn-owner="TogglePassword" data-wrn-part="root" data-wrn-component="TogglePassword" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if fields.length}
<div class="wrn-next__password-fields">
<div class="wrn-next__password-fields" data-wrn-owner="TogglePassword" data-wrn-part="passwordFields" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each fields as field, index}
<div class="wrn-next__password-field">
<label for="{fieldId(field, index)}">{field.label || label}</label>
<div class="wrn-next__password-control">
<div class="wrn-next__password-field" data-wrn-owner="TogglePassword" data-wrn-part="passwordField" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<label for="{fieldId(field, index)}" data-wrn-owner="TogglePassword" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{field.label || label}</label>
<div class="wrn-next__password-control" data-wrn-owner="TogglePassword" data-wrn-part="passwordControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<input
id="{fieldId(field, index)}"
type="{revealed ? 'text' : 'password'}"
@@ -91,7 +91,7 @@ component TogglePassword {
aria-invalid="{invalid || nativeError ? 'true' : 'false'}"
@invalid="handleInvalid(event)" @input="nativeError = ''; output.input({ name: event.target.name, value: event.target.value, visible: revealed })"
@change="output.change({ name: event.target.name, value: event.target.value, visible: revealed })"
/>
data-wrn-owner="TogglePassword" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{#if toggleable && toggleMode === "button"}
<button
type="button"
@@ -101,8 +101,8 @@ component TogglePassword {
aria-pressed="{revealed ? 'true' : 'false'}"
disabled="{disabled || readonly}"
@click="toggleVisibility(); output.toggle({ visible: revealed })"
>
<span class="wrn-next__password-icon wrn-next__password-icon--show" aria-hidden="true"></span>
data-wrn-owner="TogglePassword" data-wrn-part="passwordToggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-next__password-icon wrn-next__password-icon--show" aria-hidden="true" data-wrn-owner="TogglePassword" data-wrn-part="passwordIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
{/if}
</div>
@@ -110,14 +110,14 @@ component TogglePassword {
{/each}
</div>
{:else}
<div class="wrn-next__password-heading">
<label for="{name}-password">{label}</label>
<div class="wrn-next__password-heading" data-wrn-owner="TogglePassword" data-wrn-part="passwordHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<label for="{name}-password" data-wrn-owner="TogglePassword" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{label}</label>
{#if cornerHint}
{#if cornerHref}<a href="{cornerHref}">{cornerHint}</a>{:else}<span>{cornerHint}</span>{/if}
{#if cornerHref}<a href="{cornerHref}" data-wrn-owner="TogglePassword" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{cornerHint}</a>{:else}<span>{cornerHint}</span>{/if}
{/if}
</div>
<div class="wrn-next__password-control">
{#if icon}<span class="wrn-next__password-leading-icon {icon}" aria-hidden="true"></span>{/if}
<div class="wrn-next__password-control" data-wrn-owner="TogglePassword" data-wrn-part="passwordControl" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if icon}<span class="wrn-next__password-leading-icon {icon}" aria-hidden="true" data-wrn-owner="TogglePassword" data-wrn-part="passwordLeadingIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>{/if}
<input
{...attrs}
id="{name}-password"
@@ -136,7 +136,7 @@ component TogglePassword {
aria-describedby="{(validationMessage || nativeError) ? name + '-validation' : helpText ? name + '-help' : ''}"
@invalid="handleInvalid(event)" @input="nativeError = ''; output.input({ value: event.target.value, visible: revealed })"
@change="output.change({ value: event.target.value, visible: revealed })"
/>
data-wrn-owner="TogglePassword" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
{#if toggleable && toggleMode === "button"}
<button
type="button"
@@ -146,20 +146,20 @@ component TogglePassword {
aria-pressed="{revealed ? 'true' : 'false'}"
disabled="{disabled || readonly}"
@click="toggleVisibility(); output.toggle({ visible: revealed })"
>
<span class="wrn-next__password-icon wrn-next__password-icon--show" aria-hidden="true"></span>
data-wrn-owner="TogglePassword" data-wrn-part="passwordToggle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-next__password-icon wrn-next__password-icon--show" aria-hidden="true" data-wrn-owner="TogglePassword" data-wrn-part="passwordIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
{/if}
</div>
{/if}
{#if toggleable && toggleMode === "checkbox"}
<label class="wrn-next__password-checkbox">
<label class="wrn-next__password-checkbox" data-wrn-owner="TogglePassword" data-wrn-part="passwordCheckbox" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<input
type="checkbox"
checked="{revealed}"
disabled="{disabled || readonly}"
@change="revealed = event.target.checked; output.toggle({ visible: revealed })"
/>
data-wrn-owner="TogglePassword" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"/>
<span>{checkboxLabel}</span>
</label>
{/if}
@@ -168,7 +168,7 @@ component TogglePassword {
id="{name}-validation"
class="wrn-next__validation"
data-error="{name}"
>{(validationMessage || nativeError)}</small>
data-wrn-owner="TogglePassword" data-wrn-part="validation" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{(validationMessage || nativeError)}</small>
</fieldset>
}