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

refactor: migrate legacy wire namespace to wrn
Quality / quality (ubuntu-latest) (push) Failing after 9m49s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-12 18:51:15 +05:30
parent ec23dd4c93
commit 2c960fc1dc
488 changed files with 27306 additions and 19063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/Navbar.wrn
+162 -162
View File
@@ -60,47 +60,47 @@ size: string = "default"
}
view {
<header class="wire-navbar wire-navbar--width-{maxWidth} wire-component--color-{color} wire-component--size-{size} {sticky ? 'wire-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
<div class="wire-navbar__topbar" aria-label="{topbarLabel}">
<header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
<div class="wrn-navbar__topbar" aria-label="{topbarLabel}">
<slot name="topbar" />
</div>
<div class="wire-navbar__main">
<a class="wire-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
<div class="wrn-navbar__main">
<a class="wrn-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
{#if brand.logo}
<img class="wire-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
<img class="wrn-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
{/if}
{#if brand.icon}
<span class="wire-navbar__brand-icon {brand.icon}" aria-hidden="true"></span>
<span class="wrn-navbar__brand-icon {brand.icon}" aria-hidden="true"></span>
{/if}
{#if brand.label || brand.description}
<span class="wire-navbar__brand-copy">
<span class="wrn-navbar__brand-copy">
{#if brand.label}<strong>{brand.label}</strong>{/if}
{#if brand.description}<small>{brand.description}</small>{/if}
</span>
{/if}
</a>
<button type="button" class="wire-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
<button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</button>
<div class="wire-navbar__collapse {mobileOpen ? 'is-open' : ''}">
<nav class="wire-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal">
<div class="wrn-navbar__collapse {mobileOpen ? 'is-open' : ''}">
<nav class="wrn-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal">
{#each items as item}
{#if item.children && item.children.length}
<details class="wire-navbar__dropdown wire-navbar__dropdown--{item.type || 'dropdown'}" name="wire-navbar-menu" @toggle="toggleDropdown(event, item)">
<details class="wrn-navbar__dropdown wrn-navbar__dropdown--{item.type || 'dropdown'}" name="wrn-navbar-menu" @toggle="toggleDropdown(event, item)">
<summary data-wrn-roving-item="true" aria-current="{isItemActive(item) ? 'page' : 'false'}">
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
<span>{item.label}</span>
<span class="wire-navbar__chevron" aria-hidden="true"></span>
<span class="wrn-navbar__chevron" aria-hidden="true"></span>
</summary>
<div class="wire-navbar__panel wire-navbar__panel--columns-{item.columns || 1}">
{#if item.description}<p class="wire-navbar__panel-intro">{item.description}</p>{/if}
<div class="wrn-navbar__panel wrn-navbar__panel--columns-{item.columns || 1}">
{#if item.description}<p class="wrn-navbar__panel-intro">{item.description}</p>{/if}
{#each item.children as child}
<div class="wire-navbar__group">
<div class="wrn-navbar__group">
{#if child.children && child.children.length}
{#if child.label}<strong class="wire-navbar__group-title">{child.label}</strong>{/if}
{#if child.label}<strong class="wrn-navbar__group-title">{child.label}</strong>{/if}
{#if child.description}<small>{child.description}</small>{/if}
{#each child.children as nested}
<a href="{nested.href || '#'}" target="{nested.target || ''}" rel="{nested.rel || ''}" aria-current="{nested.value === active ? 'page' : 'false'}" @click="selectItem(nested, 3)">
@@ -119,7 +119,7 @@ size: string = "default"
</div>
</details>
{:else}
<a class="wire-navbar__menu-link" data-wrn-roving-item="true" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{item.value === active ? 'page' : 'false'}" @click="selectItem(item, 1)">
<a class="wrn-navbar__menu-link" data-wrn-roving-item="true" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{item.value === active ? 'page' : 'false'}" @click="selectItem(item, 1)">
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
<span>{item.label}</span>
</a>
@@ -127,9 +127,9 @@ size: string = "default"
{/each}
</nav>
<div class="wire-navbar__actions">
<div class="wrn-navbar__actions">
{#each actions as item}
<a class="wire-navbar__action wire-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item)">
<a class="wrn-navbar__action wrn-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item)">
{#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
<span>{item.label}</span>
</a>
@@ -143,41 +143,41 @@ size: string = "default"
style {
/* Full application navigation */
.wire-navbar {
.wrn-navbar {
position: relative;
z-index: 40;
width: 100%;
color: var(--wire-color-text);
background: color-mix(in srgb, var(--wire-color-surface) 96%, transparent);
border-bottom: 1px solid var(--wire-color-border);
color: var(--wrn-color-text);
background: color-mix(in srgb, var(--wrn-color-surface) 96%, transparent);
border-bottom: 1px solid var(--wrn-color-border);
}
.wire-navbar--sticky {
.wrn-navbar--sticky {
position: sticky;
top: 0;
backdrop-filter: blur(16px);
}
.wire-navbar__topbar:empty,
.wire-navbar__topbar:not(:has(*)) {
.wrn-navbar__topbar:empty,
.wrn-navbar__topbar:not(:has(*)) {
display: none;
}
.wire-navbar__topbar:not(:empty) {
.wrn-navbar__topbar:not(:empty) {
display: flex;
min-height: 2.25rem;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.35rem clamp(1rem, 4vw, 3rem);
color: var(--wire-color-muted);
background: var(--wire-color-surface-2);
border-bottom: 1px solid var(--wire-color-border);
color: var(--wrn-color-muted);
background: var(--wrn-color-surface-2);
border-bottom: 1px solid var(--wrn-color-border);
font-size: 0.75rem;
font-weight: 400;
}
.wire-navbar__main {
.wrn-navbar__main {
display: flex;
min-height: 4.25rem;
width: min(100%, 90rem);
@@ -187,25 +187,25 @@ size: string = "default"
gap: 1.5rem;
}
.wire-navbar--width-full .wire-navbar__main {
.wrn-navbar--width-full .wrn-navbar__main {
width: 100%;
max-width: none;
}
.wire-navbar--width-compact .wire-navbar__main {
.wrn-navbar--width-compact .wrn-navbar__main {
width: min(86%, 80rem);
}
.wire-navbar__brand,
.wire-navbar__menu-link,
.wire-navbar__dropdown summary,
.wire-navbar__action,
.wire-navbar__panel a {
.wrn-navbar__brand,
.wrn-navbar__menu-link,
.wrn-navbar__dropdown summary,
.wrn-navbar__action,
.wrn-navbar__panel a {
color: inherit;
text-decoration: none;
}
.wire-navbar__brand {
.wrn-navbar__brand {
display: inline-flex;
min-width: 0;
align-items: center;
@@ -213,7 +213,7 @@ size: string = "default"
flex: 0 0 auto;
}
.wire-navbar__brand-logo {
.wrn-navbar__brand-logo {
display: block;
width: auto;
max-width: 11rem;
@@ -221,57 +221,57 @@ size: string = "default"
object-fit: contain;
}
.wire-navbar__brand-icon {
.wrn-navbar__brand-icon {
width: 2.5rem;
height: 2.5rem;
color: var(--wire-component-color, var(--wire-color-primary));
color: var(--wrn-component-color, var(--wrn-color-primary));
}
.wire-navbar__brand-copy {
.wrn-navbar__brand-copy {
display: grid;
min-width: 0;
line-height: 1.2;
}
.wire-navbar__brand-copy strong {
.wrn-navbar__brand-copy strong {
font-size: 0.9rem;
font-weight: 600;
}
.wire-navbar__brand-copy small {
.wrn-navbar__brand-copy small {
margin-top: 0.2rem;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.6875rem;
font-weight: 400;
}
.wire-navbar__collapse,
.wire-navbar__menus,
.wire-navbar__actions {
.wrn-navbar__collapse,
.wrn-navbar__menus,
.wrn-navbar__actions {
display: flex;
align-items: center;
}
.wire-navbar__collapse {
.wrn-navbar__collapse {
min-width: 0;
flex: 1;
gap: 1rem;
}
.wire-navbar__menus {
.wrn-navbar__menus {
justify-content: center;
flex: 1;
gap: 0.25rem;
}
.wire-navbar__actions {
.wrn-navbar__actions {
justify-content: flex-end;
gap: 0.5rem;
}
.wire-navbar__menu-link,
.wire-navbar__dropdown > summary,
.wire-navbar__action {
.wrn-navbar__menu-link,
.wrn-navbar__dropdown > summary,
.wrn-navbar__action {
display: inline-flex;
min-height: 2.75rem;
padding: 0.65rem 0.8rem;
@@ -284,60 +284,60 @@ size: string = "default"
white-space: nowrap;
}
.wire-navbar__menu-link:hover,
.wire-navbar__dropdown > summary:hover {
color: var(--wire-color-text);
background: var(--wire-color-surface-2);
.wrn-navbar__menu-link:hover,
.wrn-navbar__dropdown > summary:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-2);
}
.wire-navbar__menu-link[aria-current="page"],
.wire-navbar__dropdown > summary[aria-current="page"] {
color: var(--wire-component-color, var(--wire-color-primary));
.wrn-navbar__menu-link[aria-current="page"],
.wrn-navbar__dropdown > summary[aria-current="page"] {
color: var(--wrn-component-color, var(--wrn-color-primary));
font-weight: 600;
background: color-mix(
in srgb,
var(--wire-component-color, var(--wire-color-primary)) 12%,
var(--wrn-component-color, var(--wrn-color-primary)) 12%,
transparent
);
box-shadow: inset 0 -2px 0 var(--wire-component-color, var(--wire-color-primary));
box-shadow: inset 0 -2px 0 var(--wrn-component-color, var(--wrn-color-primary));
}
.wire-navbar__menu-link[aria-current="page"]:hover,
.wire-navbar__dropdown > summary[aria-current="page"]:hover {
color: var(--wire-component-color, var(--wire-color-primary));
.wrn-navbar__menu-link[aria-current="page"]:hover,
.wrn-navbar__dropdown > summary[aria-current="page"]:hover {
color: var(--wrn-component-color, var(--wrn-color-primary));
background: color-mix(
in srgb,
var(--wire-component-color, var(--wire-color-primary)) 16%,
var(--wrn-component-color, var(--wrn-color-primary)) 16%,
transparent
);
}
.wire-navbar__dropdown {
.wrn-navbar__dropdown {
position: relative;
}
.wire-navbar__dropdown > summary {
.wrn-navbar__dropdown > summary {
list-style: none;
}
.wire-navbar__dropdown > summary::-webkit-details-marker {
.wrn-navbar__dropdown > summary::-webkit-details-marker {
display: none;
}
.wire-navbar__chevron {
.wrn-navbar__chevron {
width: 0.45rem;
height: 0.45rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-0.15rem);
transition: transform var(--wire-motion-fast, 150ms) ease;
transition: transform var(--wrn-motion-fast, 150ms) ease;
}
.wire-navbar__dropdown[open] .wire-navbar__chevron {
.wrn-navbar__dropdown[open] .wrn-navbar__chevron {
transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}
.wire-navbar__panel {
.wrn-navbar__panel {
position: absolute;
top: calc(100% + 0.55rem);
left: 50%;
@@ -347,10 +347,10 @@ size: string = "default"
max-width: min(90vw, 64rem);
padding: 0.65rem;
gap: 0.45rem;
border: 1px solid var(--wire-color-border);
border: 1px solid var(--wrn-color-border);
border-radius: 0.9rem;
color: var(--wire-color-text);
background: var(--wire-color-surface);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
box-shadow: 0 18px 48px rgb(15 23 42 / 0.16);
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
@@ -361,7 +361,7 @@ size: string = "default"
display 180ms allow-discrete;
}
.wire-navbar__panel::before {
.wrn-navbar__panel::before {
position: absolute;
right: 0;
bottom: 100%;
@@ -370,57 +370,57 @@ size: string = "default"
content: "";
}
.wire-navbar__dropdown:not([open]) > .wire-navbar__panel {
.wrn-navbar__dropdown:not([open]) > .wrn-navbar__panel {
display: none;
opacity: 0;
transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
}
@starting-style {
.wire-navbar__dropdown[open] > .wire-navbar__panel {
.wrn-navbar__dropdown[open] > .wrn-navbar__panel {
opacity: 0;
transform: translateX(-50%) translateY(-0.5rem) scale(0.98);
}
}
.wire-navbar__dropdown--mega {
.wrn-navbar__dropdown--mega {
position: static;
}
.wire-navbar__dropdown--mega .wire-navbar__panel {
.wrn-navbar__dropdown--mega .wrn-navbar__panel {
right: auto;
left: 50%;
width: min(calc(100vw - 2rem), 64rem);
}
.wire-navbar__panel--columns-2 {
.wrn-navbar__panel--columns-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wire-navbar__panel--columns-3 {
.wrn-navbar__panel--columns-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wire-navbar__panel--columns-4 {
.wrn-navbar__panel--columns-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wire-navbar__panel-intro {
.wrn-navbar__panel-intro {
grid-column: 1 / -1;
margin: 0;
padding: 0.5rem 0.65rem;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.8125rem;
font-weight: 400;
}
.wire-navbar__group {
.wrn-navbar__group {
display: grid;
align-content: start;
gap: 0.25rem;
}
.wire-navbar__group-title {
.wrn-navbar__group-title {
padding: 0.55rem 0.65rem 0.25rem;
font-size: 0.7rem;
font-weight: 600;
@@ -428,14 +428,14 @@ size: string = "default"
text-transform: uppercase;
}
.wire-navbar__group > small {
.wrn-navbar__group > small {
padding: 0 0.65rem 0.4rem;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.7rem;
font-weight: 400;
}
.wire-navbar__panel a {
.wrn-navbar__panel a {
display: flex;
min-height: 2.75rem;
padding: 0.65rem;
@@ -446,52 +446,52 @@ size: string = "default"
font-weight: 450;
}
.wire-navbar__panel a:hover {
background: var(--wire-color-surface-2);
.wrn-navbar__panel a:hover {
background: var(--wrn-color-surface-2);
}
.wire-navbar__panel a span:last-child {
.wrn-navbar__panel a span:last-child {
display: grid;
gap: 0.15rem;
}
.wire-navbar__panel a strong {
.wrn-navbar__panel a strong {
font-weight: 500;
}
.wire-navbar__panel a small {
color: var(--wire-color-muted);
.wrn-navbar__panel a small {
color: var(--wrn-color-muted);
font-size: 0.7rem;
font-weight: 400;
}
.wire-navbar__action {
.wrn-navbar__action {
border: 1px solid transparent;
}
.wire-navbar__action--primary {
color: var(--wire-color-on-primary, #fff);
background: var(--wire-component-color, var(--wire-color-primary));
.wrn-navbar__action--primary {
color: var(--wrn-color-on-primary, #fff);
background: var(--wrn-component-color, var(--wrn-color-primary));
font-weight: 600;
}
.wire-navbar__action--outline {
border-color: var(--wire-color-border);
.wrn-navbar__action--outline {
border-color: var(--wrn-color-border);
}
.wire-navbar__toggle {
.wrn-navbar__toggle {
display: none;
width: 2.75rem;
height: 2.75rem;
margin-left: auto;
padding: 0.65rem;
border: 1px solid var(--wire-color-border);
border: 1px solid var(--wrn-color-border);
border-radius: 0.65rem;
color: inherit;
background: var(--wire-color-surface);
background: var(--wrn-color-surface);
}
.wire-navbar__toggle span {
.wrn-navbar__toggle span {
display: block;
height: 2px;
margin: 0.25rem 0;
@@ -499,13 +499,13 @@ size: string = "default"
}
@media (max-width: 900px) {
.wire-navbar--width-compact .wire-navbar__main {
.wrn-navbar--width-compact .wrn-navbar__main {
width: 100%;
}
.wire-navbar__toggle {
.wrn-navbar__toggle {
display: block;
}
.wire-navbar__collapse {
.wrn-navbar__collapse {
position: absolute;
top: 100%;
right: 0;
@@ -514,30 +514,30 @@ size: string = "default"
padding: 0.75rem 1rem 1rem;
align-items: stretch;
flex-direction: column;
background: var(--wire-color-surface);
border-bottom: 1px solid var(--wire-color-border);
background: var(--wrn-color-surface);
border-bottom: 1px solid var(--wrn-color-border);
box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
max-height: calc(100dvh - 4rem);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.wire-navbar__collapse.is-open {
.wrn-navbar__collapse.is-open {
display: flex;
}
.wire-navbar__menus,
.wire-navbar__actions {
.wrn-navbar__menus,
.wrn-navbar__actions {
width: 100%;
align-items: stretch;
flex-direction: column;
}
.wire-navbar__menu-link,
.wire-navbar__dropdown > summary,
.wire-navbar__action {
.wrn-navbar__menu-link,
.wrn-navbar__dropdown > summary,
.wrn-navbar__action {
width: 100%;
}
.wire-navbar__panel,
.wire-navbar__dropdown--mega .wire-navbar__panel {
.wrn-navbar__panel,
.wrn-navbar__dropdown--mega .wrn-navbar__panel {
position: static;
width: 100%;
max-width: none;
@@ -545,27 +545,27 @@ size: string = "default"
box-shadow: none;
transform: none;
overflow: hidden;
animation: wire-navbar-mobile-panel 180ms ease both;
animation: wrn-navbar-mobile-panel 180ms ease both;
}
.wire-navbar__dropdown:not([open]) > .wire-navbar__panel,
.wire-navbar__dropdown[open] > .wire-navbar__panel {
.wrn-navbar__dropdown:not([open]) > .wrn-navbar__panel,
.wrn-navbar__dropdown[open] > .wrn-navbar__panel {
transform: none;
}
.wire-navbar__panel[class*="wire-navbar__panel--columns-"] {
.wrn-navbar__panel[class*="wrn-navbar__panel--columns-"] {
grid-template-columns: 1fr;
}
.wire-navbar__panel::before {
.wrn-navbar__panel::before {
display: none;
}
}
@media (max-width: 600px) {
.wire-navbar__brand-copy small {
.wrn-navbar__brand-copy small {
display: none;
}
}
@keyframes wire-navbar-mobile-panel {
@keyframes wrn-navbar-mobile-panel {
from {
opacity: 0;
transform: translateY(-0.35rem);
@@ -578,70 +578,70 @@ size: string = "default"
/* Shared component foundation. */
.wire-component {
--wire-component-color: var(--wire-color-primary);
--wire-component-scale: 1;
.wrn-component {
--wrn-component-color: var(--wrn-color-primary);
--wrn-component-scale: 1;
margin: 0;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-family: var(--wrn-font-sans, inherit);
}
.wire-component--color-primary {
--wire-component-color: var(--wire-color-primary);
.wrn-component--color-primary {
--wrn-component-color: var(--wrn-color-primary);
}
.wire-component--color-secondary {
--wire-component-color: var(--wire-color-secondary);
.wrn-component--color-secondary {
--wrn-component-color: var(--wrn-color-secondary);
}
.wire-component--color-success {
--wire-component-color: var(--wire-color-success);
.wrn-component--color-success {
--wrn-component-color: var(--wrn-color-success);
}
.wire-component--color-warning {
--wire-component-color: var(--wire-color-warning);
.wrn-component--color-warning {
--wrn-component-color: var(--wrn-color-warning);
}
.wire-component--color-danger {
--wire-component-color: var(--wire-color-danger);
.wrn-component--color-danger {
--wrn-component-color: var(--wrn-color-danger);
}
.wire-component--color-info {
--wire-component-color: var(--wire-color-info);
.wrn-component--color-info {
--wrn-component-color: var(--wrn-color-info);
}
.wire-component--size-xs {
--wire-component-scale: 0.78;
.wrn-component--size-xs {
--wrn-component-scale: 0.78;
}
.wire-component--size-sm {
--wire-component-scale: 0.88;
.wrn-component--size-sm {
--wrn-component-scale: 0.88;
}
.wire-component--size-default,
.wire-component--size-md {
--wire-component-scale: 1;
.wrn-component--size-default,
.wrn-component--size-md {
--wrn-component-scale: 1;
}
.wire-component--size-lg {
--wire-component-scale: 1.14;
.wrn-component--size-lg {
--wrn-component-scale: 1.14;
}
.wire-component--size-xl {
--wire-component-scale: 1.28;
.wrn-component--size-xl {
--wrn-component-scale: 1.28;
}
.wire-component:not(.wire-btn) {
font-size: calc(1em * var(--wire-component-scale));
.wrn-component:not(.wrn-btn) {
font-size: calc(1em * var(--wrn-component-scale));
}
.wire-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wire-component-color);
.wrn-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wrn-component-color);
}
.wire-component p {
.wrn-component p {
margin: 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
line-height: 1.6;
}
}