WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 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/Collapse.wrn
+81 -81
View File
@@ -51,18 +51,18 @@ size: string = "default"
view {
<section
{...attrs}
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--collapse {class}"
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--collapse {class}"
data-mode="{mode}"
aria-label="{ariaLabel}"
>
{#each items as item, index}
<article class="wire-next__collapse-item" data-open="{isOpen(index)}">
<article class="wrn-next__collapse-item" data-open="{isOpen(index)}">
{#if mode === "inline" && item.preview}
<p class="wire-next__collapse-preview">{item.preview}</p>
<p class="wrn-next__collapse-preview">{item.preview}</p>
{/if}
<button
class="wire-next__collapse-trigger"
class="wrn-next__collapse-trigger"
type="button"
aria-expanded="{isOpen(index) ? 'true' : 'false'}"
aria-controls="{item.id || 'collapse-panel-' + index}"
@@ -70,17 +70,17 @@ size: string = "default"
@click="toggleItem(index, item)"
>
<span>{isOpen(index) ? (item.closeLabel || "Read less") : item.label}</span>
<span class="icon-[lucide--chevron-down] wire-next__collapse-chevron" aria-hidden="true"></span>
<span class="icon-[lucide--chevron-down] wrn-next__collapse-chevron" aria-hidden="true"></span>
</button>
<div
id="{item.id || 'collapse-panel-' + index}"
class="wire-next__collapse-panel"
class="wrn-next__collapse-panel"
data-open="{isOpen(index)}"
aria-hidden="{isOpen(index) ? 'false' : 'true'}"
inert="{!isOpen(index)}"
>
<div class="wire-next__collapse-content">
<div class="wrn-next__collapse-content">
{#if item.title}<h4>{item.title}</h4>{/if}
{#if item.content}<p>{item.content}</p>{/if}
{#if item.links && item.links.length}
@@ -97,129 +97,129 @@ size: string = "default"
}
style {
.wire-next--collapse.wire-component--size-sm {
.wrn-next--collapse.wrn-component--size-sm {
font-size: 0.875rem;
}
.wire-next--collapse.wire-component--size-lg {
.wrn-next--collapse.wrn-component--size-lg {
font-size: 1.0625rem;
}
.wire-next--collapse {
--wire-collapse-color: var(--wire-component-color, var(--wire-color-primary));
.wrn-next--collapse {
--wrn-collapse-color: var(--wrn-component-color, var(--wrn-color-primary));
display: grid;
width: 100%;
min-width: 0;
gap: 0.75rem;
color: var(--wire-color-text);
color: var(--wrn-color-text);
}
.wire-next__collapse-item {
.wrn-next__collapse-item {
display: grid;
min-width: 0;
justify-items: start;
gap: 0;
}
.wire-next__collapse-trigger {
.wrn-next__collapse-trigger {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.7rem 1rem;
border: 1px solid var(--wire-collapse-color);
border-radius: var(--wire-radius-sm);
background: var(--wire-collapse-color);
color: var(--wire-color-primary-contrast, #fff);
border: 1px solid var(--wrn-collapse-color);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-collapse-color);
color: var(--wrn-color-primary-contrast, #fff);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.wire-next__collapse-trigger:focus-visible {
outline: 2px solid var(--wire-collapse-color);
.wrn-next__collapse-trigger:focus-visible {
outline: 2px solid var(--wrn-collapse-color);
outline-offset: 3px;
}
.wire-next__collapse-trigger:disabled {
.wrn-next__collapse-trigger:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.wire-next__collapse-chevron {
transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
.wrn-next__collapse-chevron {
transition: transform var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wire-next__collapse-item[data-open="true"] .wire-next__collapse-chevron {
.wrn-next__collapse-item[data-open="true"] .wrn-next__collapse-chevron {
transform: rotate(180deg);
}
.wire-next__collapse-panel {
.wrn-next__collapse-panel {
width: min(100%, 42rem);
max-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
transition:
max-height 350ms var(--wire-ease-emphasized),
margin-top 300ms var(--wire-ease-emphasized),
opacity 200ms var(--wire-ease-standard);
max-height 350ms var(--wrn-ease-emphasized),
margin-top 300ms var(--wrn-ease-emphasized),
opacity 200ms var(--wrn-ease-standard);
}
.wire-next__collapse-panel[data-open="true"] {
.wrn-next__collapse-panel[data-open="true"] {
max-height: 40rem;
margin-top: 0.75rem;
opacity: 1;
}
.wire-next__collapse-content {
.wrn-next__collapse-content {
display: grid;
overflow: hidden;
min-height: 0;
gap: 0.65rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface-raised, var(--wire-color-surface));
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
}
.wire-next__collapse-content h4,
.wire-next__collapse-content p,
.wire-next__collapse-preview {
.wrn-next__collapse-content h4,
.wrn-next__collapse-content p,
.wrn-next__collapse-preview {
margin: 0;
}
.wire-next__collapse-content nav {
.wrn-next__collapse-content nav {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.wire-next__collapse-content a {
color: var(--wire-collapse-color);
.wrn-next__collapse-content a {
color: var(--wrn-collapse-color);
font-weight: 650;
text-decoration: none;
}
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-item {
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-item {
gap: 0;
}
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-preview {
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-preview {
order: 1;
margin-bottom: 0.5rem;
}
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel {
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-panel {
order: 2;
width: 100%;
}
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel[data-open="true"] {
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-panel[data-open="true"] {
margin-top: 0;
}
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-trigger {
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-trigger {
order: 3;
margin-top: 0.5rem;
min-height: auto;
@@ -227,88 +227,88 @@ size: string = "default"
border: 0;
border-radius: 0;
background: transparent;
color: var(--wire-collapse-color);
color: var(--wrn-collapse-color);
}
.wire-next--collapse[data-mode="inline"] .wire-next__collapse-content {
.wrn-next--collapse[data-mode="inline"] .wrn-next__collapse-content {
padding: 0;
border: 0;
background: transparent;
}
@media (prefers-reduced-motion: reduce) {
.wire-next__collapse-chevron,
.wire-next__collapse-panel {
.wrn-next__collapse-chevron,
.wrn-next__collapse-panel {
transition: none;
}
}
/* 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;
}
}