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/Nav.wrn
+23 -23
View File
@@ -57,7 +57,7 @@ component Nav {
}
view {
<nav
<nav data-wrn-owner="Nav" data-wrn-part="root" data-wrn-component="Nav" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
{...attrs}
data-ui-component="Nav"
class='wrn-nav {class}'
@@ -68,7 +68,7 @@ component Nav {
role="navigation"
aria-label='{label}'
>
<button
<button data-wrn-owner="Nav" data-wrn-part="toggle" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
type="button"
class="wrn-nav__toggle"
data-show="collapsible"
@@ -76,14 +76,14 @@ component Nav {
aria-label='{toggleLabel}'
@click='toggleMenu()'
>
<span class="wrn-nav__toggle-bar" aria-hidden="true"></span>
<span class="wrn-nav__toggle-text">{toggleLabel}</span>
<span data-wrn-owner="Nav" data-wrn-part="toggleBar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__toggle-bar" aria-hidden="true"></span>
<span data-wrn-owner="Nav" data-wrn-part="toggleText" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__toggle-text">{toggleLabel}</span>
</button>
<ul class="wrn-nav__list" data-wrn-roving='{rovingAxis()}'>
<ul data-wrn-owner="Nav" data-wrn-part="list" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__list" data-wrn-roving='{rovingAxis()}'>
{#each itemList() as item}
<li class="wrn-nav__item" data-has-children='{childrenOf(item).length > 0}'>
<a
<li data-wrn-owner="Nav" data-wrn-part="item" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__item" data-has-children='{childrenOf(item).length > 0}'>
<a data-wrn-owner="Nav" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__link"
href='{item.href || "#"}'
data-wrn-roving-item="true"
@@ -92,28 +92,28 @@ component Nav {
aria-disabled='{item.disabled ? "true" : "false"}'
@click='choose(item)'
>
<span
<span data-wrn-owner="Nav" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class='wrn-nav__icon {item.icon}'
data-show="item.icon"
aria-hidden="true"
></span>
<span class="wrn-nav__label">{item.label}</span>
<span class="wrn-nav__badge" data-show="item.badge">{item.badge}</span>
<span
<span data-wrn-owner="Nav" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__label">{item.label}</span>
<span data-wrn-owner="Nav" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__badge" data-show="item.badge">{item.badge}</span>
<span data-wrn-owner="Nav" data-wrn-part="arrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__arrow"
data-show="childrenOf(item).length > 0"
aria-hidden="true"
>&#8250;</span>
</a>
<ul
<ul data-wrn-owner="Nav" data-wrn-part="submenu" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__submenu"
data-wrn-anchored="true"
data-show="childrenOf(item).length > 0"
>
{#each childrenOf(item) as child}
<li class="wrn-nav__item" data-has-children='{childrenOf(child).length > 0}'>
<a
<li data-wrn-owner="Nav" data-wrn-part="item" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__item" data-has-children='{childrenOf(child).length > 0}'>
<a data-wrn-owner="Nav" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__link"
href='{child.href || "#"}'
data-active='{isActive(child)}'
@@ -121,28 +121,28 @@ component Nav {
aria-disabled='{child.disabled ? "true" : "false"}'
@click='choose(child)'
>
<span
<span data-wrn-owner="Nav" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class='wrn-nav__icon {child.icon}'
data-show="child.icon"
aria-hidden="true"
></span>
<span class="wrn-nav__label">{child.label}</span>
<span class="wrn-nav__badge" data-show="child.badge">{child.badge}</span>
<span
<span data-wrn-owner="Nav" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__label">{child.label}</span>
<span data-wrn-owner="Nav" data-wrn-part="badge" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__badge" data-show="child.badge">{child.badge}</span>
<span data-wrn-owner="Nav" data-wrn-part="arrow" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__arrow"
data-show="childrenOf(child).length > 0"
aria-hidden="true"
>&#8250;</span>
</a>
<ul
<ul data-wrn-owner="Nav" data-wrn-part="submenu" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__submenu wrn-nav__submenu--level3"
data-wrn-anchored="true"
data-show="childrenOf(child).length > 0"
>
{#each childrenOf(child) as leaf}
<li class="wrn-nav__item">
<a
<li data-wrn-owner="Nav" data-wrn-part="item" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__item">
<a data-wrn-owner="Nav" data-wrn-part="link" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class="wrn-nav__link"
href='{leaf.href || "#"}'
data-active='{isActive(leaf)}'
@@ -150,12 +150,12 @@ component Nav {
aria-disabled='{leaf.disabled ? "true" : "false"}'
@click='choose(leaf)'
>
<span
<span data-wrn-owner="Nav" data-wrn-part="icon" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"
class='wrn-nav__icon {leaf.icon}'
data-show="leaf.icon"
aria-hidden="true"
></span>
<span class="wrn-nav__label">{leaf.label}</span>
<span data-wrn-owner="Nav" data-wrn-part="label" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}" class="wrn-nav__label">{leaf.label}</span>
</a>
</li>
{/each}