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
.publish/ui/components/Accordion.wrn
+150 -84
View File
@@ -1,5 +1,3 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component Accordion {
outputs {
change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -105,15 +103,15 @@ component Accordion {
data-variant="{variant}"
data-indicator="{indicator}"
data-multiple="{allowsMultiple() ? 'true' : 'false'}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--accordion wire-next--accordion-{variant} {bordered ? 'wire-next--accordion-bordered' : ''} {separated ? 'wire-next--accordion-separated' : ''} {flush ? 'wire-next--accordion-flush' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--accordion wrn-next--accordion-{variant} {bordered ? 'wrn-next--accordion-bordered' : ''} {separated ? 'wrn-next--accordion-separated' : ''} {flush ? 'wrn-next--accordion-flush' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
>
{#each items as item, index}
<section
class="wire-next__accordion-item"
class="wrn-next__accordion-item"
data-open="{isOpen(itemValue(item, index)) ? 'true' : 'false'}"
data-disabled="{disabled || item.disabled ? 'true' : 'false'}"
>
<h3 class="wire-next__accordion-heading">
<h3 class="wrn-next__accordion-heading">
<button
type="button"
id="{id}-trigger-{index}"
@@ -123,7 +121,7 @@ component Accordion {
@click="toggleItem(event, itemValue(item, index), item)"
>
{#if showIndicator && indicatorPosition === "start"}
<span class="wire-next__accordion-indicator" aria-hidden="true">
<span class="wrn-next__accordion-indicator" aria-hidden="true">
{#if indicator === "chevron"}
<span class="icon-[lucide--chevron-down]"></span>
{:else}
@@ -133,7 +131,7 @@ component Accordion {
{/if}
<span>{item.label || item.title}</span>
{#if showIndicator && indicatorPosition === "end"}
<span class="wire-next__accordion-indicator" aria-hidden="true">
<span class="wrn-next__accordion-indicator" aria-hidden="true">
{#if indicator === "chevron"}
<span class="icon-[lucide--chevron-down]"></span>
{:else}
@@ -146,23 +144,23 @@ component Accordion {
<div
id="{id}-panel-{index}"
class="wire-next__accordion-panel"
class="wrn-next__accordion-panel"
role="region"
aria-labelledby="{id}-trigger-{index}"
aria-hidden="{isOpen(itemValue(item, index)) ? 'false' : 'true'}"
>
<div>
<div class="wire-next__accordion-content {contentItalic ? 'wire-next__accordion-content-italic' : ''}">
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}">
{#if item.content}<p>{item.content}</p>{/if}
{#if item.children && item.children.length > 0}
<div class="wire-next__accordion-nested">
<div class="wrn-next__accordion-nested">
{#each item.children as child, childIndex}
<section
class="wire-next__accordion-item"
class="wrn-next__accordion-item"
data-open="{isOpen(nestedValue(item, index, child, childIndex)) ? 'true' : 'false'}"
>
<h4 class="wire-next__accordion-heading">
<h4 class="wrn-next__accordion-heading">
<button
type="button"
id="{id}-trigger-{index}-{childIndex}"
@@ -172,7 +170,7 @@ component Accordion {
@click="toggleItem(event, nestedValue(item, index, child, childIndex), child)"
>
{#if showIndicator}
<span class="wire-next__accordion-indicator" aria-hidden="true">
<span class="wrn-next__accordion-indicator" aria-hidden="true">
{#if indicator === "chevron"}
<span class="icon-[lucide--chevron-down]"></span>
{:else}
@@ -185,13 +183,13 @@ component Accordion {
</h4>
<div
id="{id}-panel-{index}-{childIndex}"
class="wire-next__accordion-panel"
class="wrn-next__accordion-panel"
role="region"
aria-labelledby="{id}-trigger-{index}-{childIndex}"
aria-hidden="{isOpen(nestedValue(item, index, child, childIndex)) ? 'false' : 'true'}"
>
<div>
<div class="wire-next__accordion-content {contentItalic ? 'wire-next__accordion-content-italic' : ''}">
<div class="wrn-next__accordion-content {contentItalic ? 'wrn-next__accordion-content-italic' : ''}">
<p>{child.content}</p>
</div>
</div>
@@ -206,27 +204,26 @@ component Accordion {
</section>
{/each}
</div>
<ComponentBaseStyles hidden />
}
style {
.wire-next--accordion {
--wire-accordion-accent: var(--wire-component-color);
.wrn-next--accordion {
--wrn-accordion-accent: var(--wrn-component-color);
display: grid;
width: 100%;
color: var(--wire-color-text);
color: var(--wrn-color-text);
}
.wire-next__accordion-item {
.wrn-next__accordion-item {
min-width: 0;
}
.wire-next__accordion-heading {
.wrn-next__accordion-heading {
margin: 0;
font: inherit;
}
.wire-next__accordion-heading > button {
.wrn-next__accordion-heading > button {
display: flex;
width: 100%;
align-items: center;
@@ -234,7 +231,7 @@ component Accordion {
padding: 0.85rem 0;
border: 0;
background: transparent;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font: inherit;
font-size: 0.88rem;
font-weight: 700;
@@ -242,171 +239,240 @@ component Accordion {
cursor: pointer;
}
.wire-next__accordion-heading > button > span:not(.wire-next__accordion-indicator) {
.wrn-next__accordion-heading > button > span:not(.wrn-next__accordion-indicator) {
min-width: 0;
flex: 1;
}
.wire-next__accordion-heading > button:focus-visible {
border-radius: var(--wire-radius-sm);
outline: 2px solid var(--wire-accordion-accent);
.wrn-next__accordion-heading > button:focus-visible {
border-radius: var(--wrn-radius-sm);
outline: 2px solid var(--wrn-accordion-accent);
outline-offset: 2px;
}
.wire-next__accordion-heading > button:disabled {
.wrn-next__accordion-heading > button:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.wire-next__accordion-indicator {
.wrn-next__accordion-indicator {
display: inline-flex;
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
align-items: center;
justify-content: center;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 1rem;
font-weight: 500;
line-height: 1;
transition:
color var(--wire-motion-fast) var(--wire-ease-standard),
transform var(--wire-motion-fast) var(--wire-ease-standard);
color var(--wrn-motion-fast) var(--wrn-ease-standard),
transform var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wire-next__accordion-indicator > span {
.wrn-next__accordion-indicator > span {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wire-next__accordion-indicator > [class*="icon-["] {
.wrn-next__accordion-indicator > [class*="icon-["] {
width: 0.95rem;
height: 0.95rem;
}
.wire-next__accordion-item[data-open="true"]
> .wire-next__accordion-heading
.wire-next__accordion-indicator {
color: var(--wire-accordion-accent);
.wrn-next__accordion-item[data-open="true"]
> .wrn-next__accordion-heading
.wrn-next__accordion-indicator {
color: var(--wrn-accordion-accent);
transform: rotate(45deg);
}
.wire-next--accordion[data-indicator="chevron"]
.wire-next__accordion-item[data-open="true"]
> .wire-next__accordion-heading
.wire-next__accordion-indicator {
.wrn-next--accordion[data-indicator="chevron"]
.wrn-next__accordion-item[data-open="true"]
> .wrn-next__accordion-heading
.wrn-next__accordion-indicator {
transform: rotate(180deg);
}
.wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading > button {
color: var(--wire-accordion-accent);
.wrn-next__accordion-item[data-open="true"] > .wrn-next__accordion-heading > button {
color: var(--wrn-accordion-accent);
}
.wire-next__accordion-panel {
.wrn-next__accordion-panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows var(--wire-motion-base) var(--wire-ease-standard),
opacity var(--wire-motion-fast) var(--wire-ease-standard);
grid-template-rows var(--wrn-motion-base) var(--wrn-ease-standard),
opacity var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wire-next__accordion-item[data-open="true"] > .wire-next__accordion-panel {
.wrn-next__accordion-item[data-open="true"] > .wrn-next__accordion-panel {
grid-template-rows: 1fr;
opacity: 1;
}
.wire-next__accordion-panel > div {
.wrn-next__accordion-panel > div {
overflow: hidden;
}
.wire-next__accordion-content {
.wrn-next__accordion-content {
padding: 0 0 1rem 1.75rem;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.86rem;
line-height: 1.65;
}
.wire-next__accordion-content > p {
.wrn-next__accordion-content > p {
color: inherit;
}
.wire-next__accordion-content-italic > p::first-line {
.wrn-next__accordion-content-italic > p::first-line {
font-style: italic;
}
.wire-next__accordion-nested {
.wrn-next__accordion-nested {
display: grid;
margin-top: 0.5rem;
}
.wire-next__accordion-nested .wire-next__accordion-content {
.wrn-next__accordion-nested .wrn-next__accordion-content {
padding-left: 1.5rem;
}
.wire-next--accordion-bordered {
.wrn-next--accordion-bordered {
overflow: hidden;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface);
}
.wire-next--accordion-bordered > .wire-next__accordion-item + .wire-next__accordion-item {
border-top: 1px solid var(--wire-color-border);
.wrn-next--accordion-bordered > .wrn-next__accordion-item + .wrn-next__accordion-item {
border-top: 1px solid var(--wrn-color-border);
}
.wire-next--accordion-bordered
> .wire-next__accordion-item
> .wire-next__accordion-heading
.wrn-next--accordion-bordered
> .wrn-next__accordion-item
> .wrn-next__accordion-heading
> button {
padding-inline: 1rem;
}
.wire-next--accordion-bordered
> .wire-next__accordion-item
> .wire-next__accordion-panel
.wire-next__accordion-content {
.wrn-next--accordion-bordered
> .wrn-next__accordion-item
> .wrn-next__accordion-panel
.wrn-next__accordion-content {
padding-inline: 1rem;
}
.wire-next--accordion-separated {
.wrn-next--accordion-separated {
gap: 0.5rem;
}
.wire-next--accordion-separated > .wire-next__accordion-item {
.wrn-next--accordion-separated > .wrn-next__accordion-item {
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface-2);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface-2);
}
.wire-next--accordion-separated > .wire-next__accordion-item[data-open="true"] {
border-color: var(--wire-color-border);
.wrn-next--accordion-separated > .wrn-next__accordion-item[data-open="true"] {
border-color: var(--wrn-color-border);
}
.wire-next--accordion-separated
> .wire-next__accordion-item
> .wire-next__accordion-heading
.wrn-next--accordion-separated
> .wrn-next__accordion-item
> .wrn-next__accordion-heading
> button,
.wire-next--accordion-separated
> .wire-next__accordion-item
> .wire-next__accordion-panel
.wire-next__accordion-content {
.wrn-next--accordion-separated
> .wrn-next__accordion-item
> .wrn-next__accordion-panel
.wrn-next__accordion-content {
padding-inline: 1rem;
}
.wire-next--accordion-flush {
.wrn-next--accordion-flush {
border-radius: 0;
background: transparent;
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
.wire-next__accordion-panel,
.wire-next__accordion-indicator {
.wrn-next__accordion-panel,
.wrn-next__accordion-indicator {
transition: none;
}
}
/* Shared component foundation. */
.wrn-component {
--wrn-component-color: var(--wrn-color-primary);
--wrn-component-scale: 1;
margin: 0;
color: var(--wrn-color-text);
font-family: var(--wrn-font-sans, inherit);
}
.wrn-component--color-primary {
--wrn-component-color: var(--wrn-color-primary);
}
.wrn-component--color-secondary {
--wrn-component-color: var(--wrn-color-secondary);
}
.wrn-component--color-success {
--wrn-component-color: var(--wrn-color-success);
}
.wrn-component--color-warning {
--wrn-component-color: var(--wrn-color-warning);
}
.wrn-component--color-danger {
--wrn-component-color: var(--wrn-color-danger);
}
.wrn-component--color-info {
--wrn-component-color: var(--wrn-color-info);
}
.wrn-component--size-xs {
--wrn-component-scale: 0.78;
}
.wrn-component--size-sm {
--wrn-component-scale: 0.88;
}
.wrn-component--size-default,
.wrn-component--size-md {
--wrn-component-scale: 1;
}
.wrn-component--size-lg {
--wrn-component-scale: 1.14;
}
.wrn-component--size-xl {
--wrn-component-scale: 1.28;
}
.wrn-component:not(.wrn-btn) {
font-size: calc(1em * var(--wrn-component-scale));
}
.wrn-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wrn-component-color);
}
.wrn-component p {
margin: 0;
color: var(--wrn-color-muted);
line-height: 1.6;
}
}
}