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/ToggleCount.wrn
+137 -71
View File
@@ -1,5 +1,3 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
component ToggleCount {
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)
@@ -224,11 +222,11 @@ component ToggleCount {
data-variant="{variant}"
data-value="{selectedValue}"
data-disabled="{disabled ? 'true' : 'false'}"
class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--toggle-count wire-next--toggle-count-{variant} {fullWidth ? 'wire-next--toggle-count-full' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--toggle-count wrn-next--toggle-count-{variant} {fullWidth ? 'wrn-next--toggle-count-full' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
>
<input type="hidden" name="{name}" value="{selectedValue}" />
<div class="wire-next__toggle-count-control wire-next__toggle-count-control--{align}">
<div class="wrn-next__toggle-count-control wrn-next__toggle-count-control--{align}">
{#if variant === "switch"}
<span data-selected="{isFirstSelected() ? 'true' : 'false'}">{firstLabel}</span>
<button
@@ -238,13 +236,13 @@ component ToggleCount {
aria-checked="{isSecondSelected() ? 'true' : 'false'}"
disabled="{disabled}"
@click="toggleValue(event)"
class="wire-next__toggle-count-switch"
class="wrn-next__toggle-count-switch"
>
<span aria-hidden="true"></span>
</button>
<span data-selected="{isSecondSelected() ? 'true' : 'false'}">{secondLabel}</span>
{:else}
<div class="wire-next__toggle-count-segmented" role="group" aria-label="{ariaLabel}">
<div class="wrn-next__toggle-count-segmented" role="group" aria-label="{ariaLabel}">
<button
type="button"
aria-pressed="{isFirstSelected() ? 'true' : 'false'}"
@@ -262,7 +260,7 @@ component ToggleCount {
</div>
{#if items.length > 0}
<div class="wire-next__toggle-count-items">
<div class="wrn-next__toggle-count-items">
{#each items as item}
<article>
<span>{item.label || item.name}</span>
@@ -281,134 +279,133 @@ component ToggleCount {
</div>
{/if}
</section>
<ComponentBaseStyles hidden />
}
style {
.wire-next__toggle-count-control--start {
.wrn-next__toggle-count-control--start {
justify-content: flex-start;
}
.wire-next__toggle-count-control--center {
.wrn-next__toggle-count-control--center {
justify-content: center;
}
.wire-next__toggle-count-control--end {
.wrn-next__toggle-count-control--end {
justify-content: flex-end;
}
.wire-next--toggle-count {
--wire-toggle-count-accent: var(--wire-component-color);
.wrn-next--toggle-count {
--wrn-toggle-count-accent: var(--wrn-component-color);
display: grid;
width: fit-content;
gap: 0.75rem;
color: var(--wire-color-text);
color: var(--wrn-color-text);
}
.wire-next--toggle-count-full {
.wrn-next--toggle-count-full {
width: 100%;
}
.wire-next__toggle-count-control {
.wrn-next__toggle-count-control {
display: flex;
}
.wire-next__toggle-count-segmented {
.wrn-next__toggle-count-segmented {
display: inline-flex;
gap: 0.2rem;
padding: 0.2rem;
border-radius: calc(var(--wire-radius-sm) + 0.15rem);
background: var(--wire-color-surface-2);
box-shadow: inset 0 0 0 1px var(--wire-color-border);
border-radius: calc(var(--wrn-radius-sm) + 0.15rem);
background: var(--wrn-color-surface-2);
box-shadow: inset 0 0 0 1px var(--wrn-color-border);
}
.wire-next__toggle-count-segmented button {
.wrn-next__toggle-count-segmented button {
min-height: 2.35rem;
padding: 0.45rem 0.8rem;
border: 0;
border-radius: var(--wire-radius-sm);
border-radius: var(--wrn-radius-sm);
background: transparent;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}
.wire-next__toggle-count-segmented button[aria-pressed="true"] {
background: var(--wire-color-surface);
color: var(--wire-color-text);
.wrn-next__toggle-count-segmented button[aria-pressed="true"] {
background: var(--wrn-color-surface);
color: var(--wrn-color-text);
box-shadow:
var(--wire-shadow-1),
inset 0 -2px var(--wire-toggle-count-accent);
var(--wrn-shadow-1),
inset 0 -2px var(--wrn-toggle-count-accent);
}
.wire-next__toggle-count-segmented button:focus-visible,
.wire-next__toggle-count-switch:focus-visible {
outline: 2px solid var(--wire-toggle-count-accent);
.wrn-next__toggle-count-segmented button:focus-visible,
.wrn-next__toggle-count-switch:focus-visible {
outline: 2px solid var(--wrn-toggle-count-accent);
outline-offset: 2px;
}
.wire-next__toggle-count-segmented button:disabled,
.wire-next__toggle-count-switch:disabled {
.wrn-next__toggle-count-segmented button:disabled,
.wrn-next__toggle-count-switch:disabled {
cursor: not-allowed;
}
.wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) {
.wrn-next__toggle-count-control:has(.wrn-next__toggle-count-switch) {
align-items: center;
gap: 0.7rem;
font-size: 0.78rem;
font-weight: 700;
}
.wire-next__toggle-count-control > span {
color: var(--wire-color-muted);
.wrn-next__toggle-count-control > span {
color: var(--wrn-color-muted);
}
.wire-next__toggle-count-control > span[data-selected="true"] {
color: var(--wire-color-text);
.wrn-next__toggle-count-control > span[data-selected="true"] {
color: var(--wrn-color-text);
}
.wire-next__toggle-count-switch {
.wrn-next__toggle-count-switch {
position: relative;
width: 2.65rem;
height: 1.45rem;
padding: 0.15rem;
border: 1px solid var(--wire-color-border);
border: 1px solid var(--wrn-color-border);
border-radius: 999px;
background: var(--wire-color-surface-2);
background: var(--wrn-color-surface-2);
cursor: pointer;
transition: background-color var(--wire-motion-fast) var(--wire-ease-standard);
transition: background-color var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wire-next__toggle-count-switch > span {
.wrn-next__toggle-count-switch > span {
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--wire-color-text);
box-shadow: var(--wire-shadow-1);
transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
background: var(--wrn-color-text);
box-shadow: var(--wrn-shadow-1);
transition: transform var(--wrn-motion-fast) var(--wrn-ease-standard);
}
.wire-next__toggle-count-switch[aria-checked="true"] {
border-color: var(--wire-toggle-count-accent);
background: var(--wire-toggle-count-accent);
.wrn-next__toggle-count-switch[aria-checked="true"] {
border-color: var(--wrn-toggle-count-accent);
background: var(--wrn-toggle-count-accent);
}
.wire-next__toggle-count-switch[aria-checked="true"] > span {
.wrn-next__toggle-count-switch[aria-checked="true"] > span {
background: white;
transform: translateX(1.15rem);
}
.wire-next__toggle-count-items {
.wrn-next__toggle-count-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
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__toggle-count-items article {
.wrn-next__toggle-count-items article {
display: grid;
align-content: start;
gap: 0.35rem;
@@ -416,17 +413,17 @@ component ToggleCount {
padding: 1rem;
}
.wire-next__toggle-count-items article + article {
border-left: 1px solid var(--wire-color-border);
.wrn-next__toggle-count-items article + article {
border-left: 1px solid var(--wrn-color-border);
}
.wire-next__toggle-count-items article > span {
color: var(--wire-color-muted);
.wrn-next__toggle-count-items article > span {
color: var(--wrn-color-muted);
font-size: 0.75rem;
font-weight: 600;
}
.wire-next__toggle-count-items strong {
.wrn-next__toggle-count-items strong {
display: flex;
align-items: baseline;
gap: 0.2rem;
@@ -434,41 +431,110 @@ component ToggleCount {
line-height: 1;
}
.wire-next__toggle-count-items [data-toggle-count-value] {
.wrn-next__toggle-count-items [data-toggle-count-value] {
min-width: 2ch;
font-variant-numeric: tabular-nums;
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__toggle-count-items strong small {
.wrn-next__toggle-count-items strong small {
color: inherit;
font-size: 0.65em;
}
.wire-next__toggle-count-items article > small {
color: var(--wire-color-muted);
.wrn-next__toggle-count-items article > small {
color: var(--wrn-color-muted);
font-size: 0.68rem;
}
@media (max-width: 36rem) {
.wire-next__toggle-count-control {
.wrn-next__toggle-count-control {
justify-content: center;
}
.wire-next__toggle-count-items {
.wrn-next__toggle-count-items {
grid-template-columns: 1fr;
}
.wire-next__toggle-count-items article + article {
border-top: 1px solid var(--wire-color-border);
.wrn-next__toggle-count-items article + article {
border-top: 1px solid var(--wrn-color-border);
border-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.wire-next__toggle-count-items [data-toggle-count-value] {
.wrn-next__toggle-count-items [data-toggle-count-value] {
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;
}
}
}