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/Toaster.wrn
+83 -83
View File
@@ -70,7 +70,7 @@ component Toaster {
}
props {
// Default tone for toasts raised without one of their own. Every Wire UI
// Default tone for toasts raised without one of their own. Every WrNexus UI
// component takes color and size; here they set the stack defaults.
color: string = "info"
// default | sm | lg -- controls toast width and density.
@@ -442,7 +442,7 @@ component Toaster {
data-toaster="true"
data-position='{position}'
data-size='{size}'
class='wire-toaster {class}'
class='wrn-toaster {class}'
role="region"
aria-label="Notifications"
@window:wrnexus:toast='receiveToast(event)'
@@ -459,7 +459,7 @@ component Toaster {
the whole stack is also what people expect -- reading one toast
should not let its neighbours expire underneath it. -->
<ol
class="wire-toaster__list"
class="wrn-toaster__list"
data-ref="list"
aria-live="polite"
aria-relevant="additions text"
@@ -469,21 +469,21 @@ component Toaster {
@focusout='resumeAll()'
>
<li
class="wire-toast"
class="wrn-toast"
data-for="item in toasts"
data-key="item.id"
data-tone='{item.tone}'
data-leaving='{item.leaving}'
>
<span
class="wire-toast__indicator"
class="wrn-toast__indicator"
aria-hidden="true"
>
</span>
<!-- An app-supplied icon class (iconify or otherwise). -->
<span
class='wire-toast__icon {item.icon}'
class='wrn-toast__icon {item.icon}'
data-show="item.showIcon && item.icon"
aria-hidden="true"
>
@@ -496,7 +496,7 @@ component Toaster {
own glyph via data-show; all of them inherit --toast-accent, so
the icon is green / red / amber / blue with the tone. -->
<svg
class="wire-toast__icon wire-toast__icon--default"
class="wrn-toast__icon wrn-toast__icon--default"
data-show="item.showIcon && !item.icon"
viewBox="0 0 24 24"
fill="none"
@@ -528,16 +528,16 @@ component Toaster {
</svg>
<div
class="wire-toast__body"
class="wrn-toast__body"
>
<p
class="wire-toast__title"
class="wrn-toast__title"
data-show="item.title"
>
{item.title}
</p>
<p
class="wire-toast__message"
class="wrn-toast__message"
>
{item.message}
</p>
@@ -547,12 +547,12 @@ component Toaster {
expanded by the runtime, so an arbitrary list cannot be looped
per row; normalizeActions caps the array at two and warns. -->
<div
class="wire-toast__actions"
class="wrn-toast__actions"
data-show="item.actions.length"
>
<button
type="button"
class="wire-toast__action"
class="wrn-toast__action"
data-show="item.actions.length > 0"
data-tone='{item.actions[0].tone}'
@click='runAction(item.id, 0, event)'
@@ -562,7 +562,7 @@ component Toaster {
<button
type="button"
class="wire-toast__action"
class="wrn-toast__action"
data-show="item.actions.length > 1"
data-tone='{item.actions[1].tone}'
@click='runAction(item.id, 1, event)'
@@ -573,7 +573,7 @@ component Toaster {
<button
type="button"
class="wire-toast__close"
class="wrn-toast__close"
data-show="closable"
aria-label='{closeLabel}'
@click='dismissToast(item.id, "close-button")'
@@ -596,7 +596,7 @@ component Toaster {
<!-- Decoration only: the timer above owns dismissal. Shown when the
toast has a lifetime, and paused in step with it on hover. -->
<span
class="wire-toast__progress"
class="wrn-toast__progress"
data-show="showProgress && item.duration"
style="--toast-duration: {item.duration}ms"
aria-hidden="true"
@@ -608,7 +608,7 @@ component Toaster {
}
style {
.wire-toaster {
.wrn-toaster {
position: fixed;
inset: 0;
z-index: 1400;
@@ -620,7 +620,7 @@ component Toaster {
}
/*
* pointer-events MUST be re-enabled here, not only on .wire-toast.
* pointer-events MUST be re-enabled here, not only on .wrn-toast.
*
* The host is pointer-events: none so the page underneath stays clickable
* through the empty overlay, and the list inherits that. An element with
@@ -634,7 +634,7 @@ component Toaster {
* The list box wraps the stack exactly -- its height is the toasts plus
* their gaps -- so making it interactive costs the page nothing.
*/
.wire-toaster__list {
.wrn-toaster__list {
display: flex;
flex-direction: column;
gap: 0.6rem;
@@ -646,71 +646,71 @@ component Toaster {
}
/* Nothing to hover when the stack is empty. */
.wire-toaster__list:empty {
.wrn-toaster__list:empty {
pointer-events: none;
}
.wire-toaster[data-size="sm"] .wire-toaster__list {
.wrn-toaster[data-size="sm"] .wrn-toaster__list {
width: min(18rem, 100%);
}
.wire-toaster[data-size="lg"] .wire-toaster__list {
.wrn-toaster[data-size="lg"] .wrn-toaster__list {
width: min(28rem, 100%);
}
.wire-toaster[data-size="sm"] .wire-toast {
.wrn-toaster[data-size="sm"] .wrn-toast {
padding: 0.6rem 0.7rem;
font-size: 0.78rem;
}
.wire-toaster[data-size="lg"] .wire-toast {
.wrn-toaster[data-size="lg"] .wrn-toast {
padding: 1.05rem 1.1rem;
}
.wire-toaster[data-position^="top"] {
.wrn-toaster[data-position^="top"] {
align-items: flex-start;
}
.wire-toaster[data-position^="bottom"] {
.wrn-toaster[data-position^="bottom"] {
align-items: flex-end;
}
/* Newest nearest the screen edge: at the bottom that means visually last,
so the column is reversed rather than the state array. */
.wire-toaster[data-position^="bottom"] .wire-toaster__list {
.wrn-toaster[data-position^="bottom"] .wrn-toaster__list {
flex-direction: column-reverse;
}
.wire-toaster[data-position$="left"] {
.wrn-toaster[data-position$="left"] {
justify-content: flex-start;
}
.wire-toaster[data-position$="center"] {
.wrn-toaster[data-position$="center"] {
justify-content: center;
}
.wire-toaster[data-position$="right"] {
.wrn-toaster[data-position$="right"] {
justify-content: flex-end;
}
.wire-toast {
.wrn-toast {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.7rem;
overflow: hidden;
padding: 0.85rem 0.9rem;
color: var(--wire-color-text);
background: var(--wire-color-surface-raised);
border: 1px solid var(--wire-color-border);
color: var(--wrn-color-text);
background: var(--wrn-color-surface-raised);
border: 1px solid var(--wrn-color-border);
border-radius: 0.9rem;
box-shadow: 0 18px 40px color-mix(in srgb, black 28%, transparent);
pointer-events: auto;
animation: wire-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation: wrn-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.wire-toaster[data-position$="left"] .wire-toast {
animation-name: wire-toast-in-left;
.wrn-toaster[data-position$="left"] .wrn-toast {
animation-name: wrn-toast-in-left;
}
/*
@@ -718,33 +718,33 @@ component Toaster {
* occupies its box until it is dropped from the list, so without this it
* can swallow clicks aimed at whatever is under it.
*/
.wire-toast[data-leaving="true"] {
animation: wire-toast-out 200ms ease forwards;
.wrn-toast[data-leaving="true"] {
animation: wrn-toast-out 200ms ease forwards;
pointer-events: none;
}
.wire-toast__indicator {
.wrn-toast__indicator {
flex: 0 0 auto;
width: 0.4rem;
align-self: stretch;
border-radius: 999px;
background: var(--toast-accent, var(--wire-color-primary));
background: var(--toast-accent, var(--wrn-color-primary));
}
.wire-toast[data-tone="success"] {
--toast-accent: var(--wire-color-success);
.wrn-toast[data-tone="success"] {
--toast-accent: var(--wrn-color-success);
}
.wire-toast[data-tone="danger"] {
--toast-accent: var(--wire-color-danger);
.wrn-toast[data-tone="danger"] {
--toast-accent: var(--wrn-color-danger);
}
.wire-toast[data-tone="warning"] {
--toast-accent: var(--wire-color-warning);
.wrn-toast[data-tone="warning"] {
--toast-accent: var(--wrn-color-warning);
}
.wire-toast[data-tone="info"] {
--toast-accent: var(--wire-color-info);
.wrn-toast[data-tone="info"] {
--toast-accent: var(--wrn-color-info);
}
/*
@@ -760,15 +760,15 @@ component Toaster {
* an app icon class that uses currentColor (iconify does) picks up the
* same value for free.
*/
.wire-toast__icon {
.wrn-toast__icon {
flex: 0 0 auto;
align-self: center;
width: 1.15rem;
height: 1.15rem;
color: var(--toast-accent, var(--wire-color-primary));
color: var(--toast-accent, var(--wrn-color-primary));
}
.wire-toast__body {
.wrn-toast__body {
flex: 1 1 auto;
min-width: 0;
align-self: center;
@@ -776,21 +776,21 @@ component Toaster {
gap: 0.15rem;
}
.wire-toast__title,
.wire-toast__message {
.wrn-toast__title,
.wrn-toast__message {
margin: 0;
overflow-wrap: anywhere;
}
.wire-toast__title {
color: var(--wire-color-text);
.wrn-toast__title {
color: var(--wrn-color-text);
font-size: 0.85rem;
font-weight: 650;
line-height: 1.35;
}
.wire-toast__message {
color: var(--wire-color-text-muted);
.wrn-toast__message {
color: var(--wrn-color-text-muted);
font-size: 0.82rem;
line-height: 1.5;
}
@@ -802,7 +802,7 @@ component Toaster {
* centred against the toast body now, and both are the same height, so
* their centres line up whether the toast is one line or three.
*/
.wire-toast__actions {
.wrn-toast__actions {
display: flex;
align-items: center;
flex: 0 0 auto;
@@ -811,21 +811,21 @@ component Toaster {
}
/* A destructive action reads in the danger colour regardless of tone. */
.wire-toast__action[data-tone="danger"] {
color: var(--wire-color-danger);
border-color: color-mix(in srgb, var(--wire-color-danger) 45%, transparent);
.wrn-toast__action[data-tone="danger"] {
color: var(--wrn-color-danger);
border-color: color-mix(in srgb, var(--wrn-color-danger) 45%, transparent);
}
.wire-toast__action {
.wrn-toast__action {
appearance: none;
flex: 0 0 auto;
min-height: 1.75rem;
display: inline-flex;
align-items: center;
padding: 0 0.6rem;
color: var(--toast-accent, var(--wire-color-primary));
color: var(--toast-accent, var(--wrn-color-primary));
background: transparent;
border: 1px solid color-mix(in srgb, var(--toast-accent, var(--wire-color-primary)) 40%, transparent);
border: 1px solid color-mix(in srgb, var(--toast-accent, var(--wrn-color-primary)) 40%, transparent);
border-radius: 0.55rem;
font: inherit;
font-size: 0.78rem;
@@ -838,7 +838,7 @@ component Toaster {
* browser default and collapses the icon to a sliver inside this
* fixed-size button.
*/
.wire-toast__close {
.wrn-toast__close {
appearance: none;
display: inline-flex;
align-items: center;
@@ -849,7 +849,7 @@ component Toaster {
width: 1.75rem;
height: 1.75rem;
margin: 0;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
background: transparent;
border: 0;
border-radius: 999px;
@@ -857,12 +857,12 @@ component Toaster {
transition: color 150ms ease, background 150ms ease;
}
.wire-toast__close:hover {
color: var(--wire-color-text);
background: var(--wire-color-surface-soft);
.wrn-toast__close:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-soft);
}
.wire-toast__close svg {
.wrn-toast__close svg {
flex: 0 0 auto;
width: 0.875rem;
height: 0.875rem;
@@ -873,15 +873,15 @@ component Toaster {
* width as it is dismissed, so the remaining time is readable at a glance.
* (Flip the keyframes below to run 1 -> 0 if you would rather it drain.)
*/
.wire-toast__progress {
.wrn-toast__progress {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
transform-origin: left center;
background: var(--toast-accent, var(--wire-color-primary));
animation: wire-toast-progress var(--toast-duration, 4500ms) linear forwards;
background: var(--toast-accent, var(--wrn-color-primary));
animation: wrn-toast-progress var(--toast-duration, 4500ms) linear forwards;
}
/* Hover pauses the clock, so the bar must pause with it or it would lie
@@ -893,12 +893,12 @@ component Toaster {
* CSS pauses the animation in place and touches no DOM, and the JS timer
* is banked on the same mouseenter, so the two stay in step.
*/
.wire-toaster__list:hover .wire-toast__progress,
.wire-toaster__list:focus-within .wire-toast__progress {
.wrn-toaster__list:hover .wrn-toast__progress,
.wrn-toaster__list:focus-within .wrn-toast__progress {
animation-play-state: paused;
}
@keyframes wire-toast-in {
@keyframes wrn-toast-in {
from {
opacity: 0;
transform: translateX(18px) scale(0.98);
@@ -909,7 +909,7 @@ component Toaster {
}
}
@keyframes wire-toast-in-left {
@keyframes wrn-toast-in-left {
from {
opacity: 0;
transform: translateX(-18px) scale(0.98);
@@ -920,14 +920,14 @@ component Toaster {
}
}
@keyframes wire-toast-out {
@keyframes wrn-toast-out {
to {
opacity: 0;
transform: translateX(12px) scale(0.97);
}
}
@keyframes wire-toast-progress {
@keyframes wrn-toast-progress {
from {
transform: scaleX(0);
}
@@ -937,11 +937,11 @@ component Toaster {
}
@media (max-width: 639px) {
.wire-toaster {
.wrn-toaster {
justify-content: stretch;
}
.wire-toaster__list {
.wrn-toaster__list {
width: 100%;
}
}
@@ -953,8 +953,8 @@ component Toaster {
* 2px bar carries no vestibular risk.
*/
@media (prefers-reduced-motion: reduce) {
.wire-toast,
.wire-toast[data-leaving="true"] {
.wrn-toast,
.wrn-toast[data-leaving="true"] {
animation: none;
}
}