feat: release design system engine, studio and component contracts
This commit is contained in:
Clintchiz committed
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -421,18 +421,18 @@ component InputNumber {
|
||||
data-full-width='{fullWidth ? "true" : "false"}'
|
||||
style='--input-number-accent: {componentColor()};'
|
||||
class='wrn-input-number {class}'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="root" data-wrn-component="InputNumber" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>
|
||||
{#if label !== "" && variant !== "labeled" && variant !== "seat"}
|
||||
<label
|
||||
for='{inputId()}'
|
||||
class='wrn-input-number__label'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="label" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span>{label}</span>
|
||||
{#if required}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='wrn-input-number__required'
|
||||
>*</span>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="required" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">*</span>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
@@ -441,14 +441,14 @@ component InputNumber {
|
||||
<p
|
||||
id='{descriptionId()}'
|
||||
class='wrn-input-number__description'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="description" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class='wrn-input-number__control'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="control" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if variant === "horizontal" && showButtons}
|
||||
<button
|
||||
type="button"
|
||||
@@ -457,30 +457,30 @@ component InputNumber {
|
||||
disabled='{decrementDisabled()}'
|
||||
@click='decrementValue(event)'
|
||||
class='wrn-input-number__button wrn-input-number__button--start'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='icon-[lucide--minus] wrn-input-number__icon'
|
||||
></span>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class='wrn-input-number__content'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if variant === "labeled" || variant === "seat"}
|
||||
<div class='wrn-input-number__copy'>
|
||||
<div class='wrn-input-number__copy' data-wrn-owner="InputNumber" data-wrn-part="copy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if label !== ""}
|
||||
<label
|
||||
for='{inputId()}'
|
||||
class='wrn-input-number__inner-label'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="innerLabel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{label}
|
||||
{#if required}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='wrn-input-number__required'
|
||||
>*</span>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="required" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">*</span>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
@@ -489,7 +489,7 @@ component InputNumber {
|
||||
<span
|
||||
id='{descriptionId()}'
|
||||
class='wrn-input-number__inner-description'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="innerDescription" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{description}
|
||||
</span>
|
||||
{/if}
|
||||
@@ -498,12 +498,12 @@ component InputNumber {
|
||||
|
||||
<div
|
||||
class='wrn-input-number__field'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="field" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{#if prefix !== ""}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='wrn-input-number__prefix'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="prefix" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{prefix}
|
||||
</span>
|
||||
{/if}
|
||||
@@ -533,13 +533,13 @@ component InputNumber {
|
||||
@keydown='handleKeydown(event)'
|
||||
@wheel='handleWheel(event)'
|
||||
class='wrn-input-number__input'
|
||||
/>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="input" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"/>
|
||||
|
||||
{#if suffix !== ""}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='wrn-input-number__suffix'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="suffix" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{suffix}
|
||||
</span>
|
||||
{/if}
|
||||
@@ -554,11 +554,11 @@ component InputNumber {
|
||||
disabled='{incrementDisabled()}'
|
||||
@click='incrementValue(event)'
|
||||
class='wrn-input-number__button wrn-input-number__button--end'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='icon-[lucide--plus] wrn-input-number__icon'
|
||||
></span>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</button>
|
||||
{:else}
|
||||
{#if showButtons}
|
||||
@@ -566,7 +566,7 @@ component InputNumber {
|
||||
role="group"
|
||||
aria-label='{controlsLabel}'
|
||||
class='wrn-input-number__buttons'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="buttons" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<button
|
||||
type="button"
|
||||
aria-label='{decrementLabel}'
|
||||
@@ -574,11 +574,11 @@ component InputNumber {
|
||||
disabled='{decrementDisabled()}'
|
||||
@click='decrementValue(event)'
|
||||
class='wrn-input-number__button wrn-input-number__button--decrement'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='icon-[lucide--minus] wrn-input-number__icon'
|
||||
></span>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -588,11 +588,11 @@ component InputNumber {
|
||||
disabled='{incrementDisabled()}'
|
||||
@click='incrementValue(event)'
|
||||
class='wrn-input-number__button wrn-input-number__button--increment'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='icon-[lucide--plus] wrn-input-number__icon'
|
||||
></span>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -605,11 +605,11 @@ component InputNumber {
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
class='wrn-input-number__message wrn-input-number__message--error'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="message" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class='icon-[lucide--circle-alert] wrn-input-number__error-icon'
|
||||
></span>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="errorIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
|
||||
<span>{validationMessage()}</span>
|
||||
</p>
|
||||
{/if}
|
||||
@@ -618,7 +618,7 @@ component InputNumber {
|
||||
<p
|
||||
id='{messageId()}'
|
||||
class='wrn-input-number__message'
|
||||
>
|
||||
data-wrn-owner="InputNumber" data-wrn-part="message" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
||||
{helpText}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
Reference in new issue
Block a user