feat: release design system engine, studio and component contracts

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

No files matched your search

+9 -9
View File
@@ -54,11 +54,11 @@ size: string = "default"
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--collapse {class}"
data-mode="{mode}"
aria-label="{ariaLabel}"
>
data-wrn-owner="Collapse" data-wrn-part="root" data-wrn-component="Collapse" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each items as item, index}
<article class="wrn-next__collapse-item" data-open="{isOpen(index)}">
<article class="wrn-next__collapse-item" data-open="{isOpen(index)}" data-wrn-owner="Collapse" data-wrn-part="item" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if mode === "inline" && item.preview}
<p class="wrn-next__collapse-preview">{item.preview}</p>
<p class="wrn-next__collapse-preview" data-wrn-owner="Collapse" data-wrn-part="preview" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{item.preview}</p>
{/if}
<button
@@ -68,9 +68,9 @@ size: string = "default"
aria-controls="{item.id || 'collapse-panel-' + index}"
disabled="{item.disabled}"
@click="toggleItem(index, item)"
>
data-wrn-owner="Collapse" data-wrn-part="trigger" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span>{isOpen(index) && (mode === "inline" || item.closeLabel) ? (item.closeLabel || "Read less") : item.label}</span>
<span class="icon-[lucide--chevron-down] wrn-next__collapse-chevron" aria-hidden="true"></span>
<span class="icon-[lucide--chevron-down] wrn-next__collapse-chevron" aria-hidden="true" data-wrn-owner="Collapse" data-wrn-part="chevron" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
</button>
<div
@@ -79,13 +79,13 @@ size: string = "default"
data-open="{isOpen(index)}"
aria-hidden="{isOpen(index) ? 'false' : 'true'}"
inert="{!isOpen(index)}"
>
<div class="wrn-next__collapse-content">
{#if item.title}<h4>{item.title}</h4>{/if}
data-wrn-owner="Collapse" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-next__collapse-content" data-wrn-owner="Collapse" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if item.title}<h4 data-wrn-owner="Collapse" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{item.title}</h4>{/if}
{#if item.content}<p>{item.content}</p>{/if}
{#if item.links && item.links.length}
<nav aria-label="Related links">
{#each item.links as link}<a href="{link.href || '#'}">{link.label}</a>{/each}
{#each item.links as link}<a href="{link.href || '#'}" data-wrn-owner="Collapse" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{link.label}</a>{/each}
</nav>
{/if}
</div>