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/Modal.wrn
+132 -132
View File
@@ -59,7 +59,7 @@ component Modal {
// )
//
// The listener is on the modal root, so the event only ever closes the
// modal the dispatching element is actually inside -- no ids to wire up
// modal the dispatching element is actually inside -- no ids to wrn up
// and no way to close somebody else's modal by accident.
client function hideModal(reason, sourceEvent) {
visible = false
@@ -106,13 +106,13 @@ component Modal {
data-scrollable='{scrollable ? "true" : "false"}'
data-scroll='{scrollBehavior}'
data-destructive='{destructive ? "true" : "false"}'
class='wire-modal {class}'
class='wrn-modal {class}'
@wrnexus:modal:close='hideModal("api", event)'
>
{#if triggerLabel}
<button
type="button"
class="wire-modal__trigger"
class="wrn-modal__trigger"
aria-haspopup="dialog"
aria-expanded='{isOpen() ? "true" : "false"}'
@click='showModal(event)'
@@ -129,7 +129,7 @@ component Modal {
{/if}
<span
class="wire-modal__trigger-slot"
class="wrn-modal__trigger-slot"
@click='showModal(event)'
>
<slot
@@ -139,42 +139,42 @@ component Modal {
</span>
<div
class="wire-modal__layer"
class="wrn-modal__layer"
data-show="isOpen()"
role="presentation"
@keydown='handleKeydown(event)'
>
<button
type="button"
class="wire-modal__backdrop"
class="wrn-modal__backdrop"
aria-label='{closeLabel}'
@click='if (closeOnBackdrop) { cancelModal(event) }'
>
</button>
<section
class="wire-modal__panel"
class="wrn-modal__panel"
role="dialog"
aria-modal="true"
aria-label='{label || title}'
tabindex="-1"
>
<header
class="wire-modal__header"
class="wrn-modal__header"
>
<div
class="wire-modal__heading"
class="wrn-modal__heading"
>
{#if icon}
<span
class='wire-modal__icon {icon}'
class='wrn-modal__icon {icon}'
aria-hidden="true"
>
</span>
{/if}
<div
class="wire-modal__heading-copy"
class="wrn-modal__heading-copy"
>
<slot
name="header"
@@ -192,7 +192,7 @@ component Modal {
{#if showClose}
<button
type="button"
class="wire-modal__close"
class="wrn-modal__close"
aria-label='{closeLabel}'
@click='hideModal("close-button", event)'
>
@@ -215,17 +215,17 @@ component Modal {
</header>
<div
class="wire-modal__body"
class="wrn-modal__body"
>
<slot></slot>
</div>
{#if showFooter}
<footer
class="wire-modal__footer"
class="wrn-modal__footer"
>
<div
class="wire-modal__custom-footer"
class="wrn-modal__custom-footer"
>
<slot
name="footer"
@@ -234,12 +234,12 @@ component Modal {
</div>
<div
class="wire-modal__actions"
class="wrn-modal__actions"
>
{#if cancelLabel}
<button
type="button"
class="wire-modal__button wire-modal__button--secondary"
class="wrn-modal__button wrn-modal__button--secondary"
@click='cancelModal(event)'
>
{#if cancelIcon}
@@ -256,13 +256,13 @@ component Modal {
{#if confirmLabel}
<button
type="button"
class="wire-modal__button wire-modal__button--primary"
class="wrn-modal__button wrn-modal__button--primary"
disabled='{confirmDisabled || confirmLoading}'
@click='confirmModal(event)'
>
{#if confirmLoading}
<span
class="wire-modal__spinner"
class="wrn-modal__spinner"
aria-hidden="true"
>
</span>
@@ -285,63 +285,63 @@ component Modal {
}
style {
.wire-modal {
--modal-accent: var(--wire-color-primary);
--modal-soft: var(--wire-color-primary-soft);
--modal-contrast: var(--wire-color-primary-contrast);
.wrn-modal {
--modal-accent: var(--wrn-color-primary);
--modal-soft: var(--wrn-color-primary-soft);
--modal-contrast: var(--wrn-color-primary-contrast);
position: relative;
display: inline-flex;
}
.wire-modal[data-color="secondary"] {
--modal-accent: var(--wire-color-secondary);
--modal-soft: var(--wire-color-secondary-soft);
--modal-contrast: var(--wire-color-secondary-contrast);
.wrn-modal[data-color="secondary"] {
--modal-accent: var(--wrn-color-secondary);
--modal-soft: var(--wrn-color-secondary-soft);
--modal-contrast: var(--wrn-color-secondary-contrast);
}
/*
* Fallbacks below (the second var() argument): the theme token generator
* (packages/styles/src/theme.ts) only emits a real -contrast token for
* primary and secondary. info, success, and danger have no contrast
* token defined at all, so var(--wire-color-info-contrast) with no
* token defined at all, so var(--wrn-color-info-contrast) with no
* fallback resolves to nothing, and --modal-contrast becomes invalid --
* which made confirm-button and solid-panel text unreadable. White is a
* safe default against these saturated colors until the theme package
* defines real tokens for them.
*/
.wire-modal[data-color="info"] {
--modal-accent: var(--wire-color-info);
--modal-soft: var(--wire-color-info-soft);
--modal-contrast: var(--wire-color-info-contrast, white);
.wrn-modal[data-color="info"] {
--modal-accent: var(--wrn-color-info);
--modal-soft: var(--wrn-color-info-soft);
--modal-contrast: var(--wrn-color-info-contrast, white);
}
.wire-modal[data-color="success"] {
--modal-accent: var(--wire-color-success);
--modal-soft: var(--wire-color-success-soft);
--modal-contrast: var(--wire-color-success-contrast, white);
.wrn-modal[data-color="success"] {
--modal-accent: var(--wrn-color-success);
--modal-soft: var(--wrn-color-success-soft);
--modal-contrast: var(--wrn-color-success-contrast, white);
}
.wire-modal[data-color="warning"] {
--modal-accent: var(--wire-color-warning);
--modal-soft: var(--wire-color-warning-soft);
--modal-contrast: var(--wire-color-warning-text);
.wrn-modal[data-color="warning"] {
--modal-accent: var(--wrn-color-warning);
--modal-soft: var(--wrn-color-warning-soft);
--modal-contrast: var(--wrn-color-warning-text);
}
.wire-modal[data-color="danger"],
.wire-modal[data-destructive="true"] {
--modal-accent: var(--wire-color-danger);
--modal-soft: var(--wire-color-danger-soft);
--modal-contrast: var(--wire-color-on-danger, white);
.wrn-modal[data-color="danger"],
.wrn-modal[data-destructive="true"] {
--modal-accent: var(--wrn-color-danger);
--modal-soft: var(--wrn-color-danger-soft);
--modal-contrast: var(--wrn-color-on-danger, white);
}
.wire-modal__trigger,
.wire-modal__trigger-slot {
.wrn-modal__trigger,
.wrn-modal__trigger-slot {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.wire-modal__trigger {
.wrn-modal__trigger {
appearance: none;
min-height: 2.55rem;
padding: 0.65rem 1rem;
@@ -356,22 +356,22 @@ component Modal {
transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.wire-modal__trigger:hover {
.wrn-modal__trigger:hover {
opacity: 0.92;
}
.wire-modal__trigger:active {
.wrn-modal__trigger:active {
transform: scale(0.97);
}
.wire-modal__trigger:focus-visible {
.wrn-modal__trigger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent) 40%, transparent);
}
/*
* Hidden by default so the SSR-rendered HTML never paints the layer before
* hydration runs. data-open on the wire-modal root is evaluated and
* hydration runs. data-open on the wrn-modal root is evaluated and
* serialized to a real true or false string at render time -- a plain
* bind, not the raw-expression data-show directive -- so this selector
* is correct on first paint with zero flash, with no dependency on
@@ -382,7 +382,7 @@ component Modal {
* animate -- a box that starts at display: none has no prior frame to
* transition from.
*/
.wire-modal__layer {
.wrn-modal__layer {
position: fixed;
inset: 0;
z-index: 1250;
@@ -395,24 +395,24 @@ component Modal {
transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.wire-modal[data-open="true"] .wire-modal__layer {
.wrn-modal[data-open="true"] .wrn-modal__layer {
visibility: visible;
opacity: 1;
transition: opacity 180ms ease, visibility 0s linear 0s;
}
.wire-modal[data-placement="top"] .wire-modal__layer {
.wrn-modal[data-placement="top"] .wrn-modal__layer {
align-items: flex-start;
padding-top: clamp(1rem, 8vh, 5rem);
}
.wire-modal[data-scroll="page"] .wire-modal__layer {
.wrn-modal[data-scroll="page"] .wrn-modal__layer {
align-items: flex-start;
overflow-y: auto;
padding: 2.5rem 1rem;
}
.wire-modal__backdrop {
.wrn-modal__backdrop {
position: absolute;
inset: 0;
z-index: 0;
@@ -423,22 +423,22 @@ component Modal {
backdrop-filter: blur(9px);
}
.wire-modal__panel {
.wrn-modal__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(32rem, calc(100vw - 2rem));
max-height: min(88vh, 52rem);
color: var(--wire-color-text);
color: var(--wrn-color-text);
background:
radial-gradient(
circle at 100% 0%,
color-mix(in srgb, var(--modal-accent) 9%, transparent),
transparent 34%
),
var(--wire-color-surface-raised);
border: 1px solid color-mix(in srgb, var(--modal-accent) 18%, var(--wire-color-border));
var(--wrn-color-surface-raised);
border: 1px solid color-mix(in srgb, var(--modal-accent) 18%, var(--wrn-color-border));
border-radius: 1.35rem;
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
@@ -449,71 +449,71 @@ component Modal {
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wire-modal[data-open="true"] .wire-modal__panel {
.wrn-modal[data-open="true"] .wrn-modal__panel {
opacity: 1;
transform: none;
}
.wire-modal[data-size="xs"] .wire-modal__panel {
.wrn-modal[data-size="xs"] .wrn-modal__panel {
width: min(19rem, calc(100vw - 2rem));
}
.wire-modal[data-size="sm"] .wire-modal__panel {
.wrn-modal[data-size="sm"] .wrn-modal__panel {
width: min(25rem, calc(100vw - 2rem));
}
.wire-modal[data-size="lg"] .wire-modal__panel {
.wrn-modal[data-size="lg"] .wrn-modal__panel {
width: min(44rem, calc(100vw - 2rem));
}
.wire-modal[data-size="xl"] .wire-modal__panel {
.wrn-modal[data-size="xl"] .wrn-modal__panel {
width: min(64rem, calc(100vw - 2rem));
}
.wire-modal[data-size="full"] .wire-modal__panel {
.wrn-modal[data-size="full"] .wrn-modal__panel {
width: calc(100vw - 2rem);
height: calc(100vh - 2rem);
max-height: none;
}
.wire-modal[data-scroll="page"] .wire-modal__panel {
.wrn-modal[data-scroll="page"] .wrn-modal__panel {
max-height: none;
}
.wire-modal[data-variant="soft"] .wire-modal__panel {
.wrn-modal[data-variant="soft"] .wrn-modal__panel {
background:
linear-gradient(145deg, var(--modal-soft), transparent 68%),
var(--wire-color-surface-raised);
var(--wrn-color-surface-raised);
}
.wire-modal[data-variant="outline"] .wire-modal__panel {
background: var(--wire-color-surface-raised);
.wrn-modal[data-variant="outline"] .wrn-modal__panel {
background: var(--wrn-color-surface-raised);
box-shadow: 0 24px 72px color-mix(in srgb, black 24%, transparent);
}
.wire-modal[data-variant="solid"] .wire-modal__panel {
.wrn-modal[data-variant="solid"] .wrn-modal__panel {
color: var(--modal-contrast);
background: var(--modal-accent);
border-color: color-mix(in srgb, white 20%, transparent);
}
.wire-modal__header {
.wrn-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.4rem 1.4rem 1.15rem;
border-bottom: 1px solid var(--wire-color-border);
border-bottom: 1px solid var(--wrn-color-border);
}
.wire-modal__heading {
.wrn-modal__heading {
display: flex;
align-items: flex-start;
gap: 0.9rem;
min-width: 0;
}
.wire-modal__icon {
.wrn-modal__icon {
flex: 0 0 auto;
width: 1.3rem;
height: 1.3rem;
@@ -521,35 +521,35 @@ component Modal {
color: var(--modal-accent);
}
.wire-modal[data-variant="solid"] .wire-modal__icon {
.wrn-modal[data-variant="solid"] .wrn-modal__icon {
color: currentColor;
}
.wire-modal__heading-copy {
.wrn-modal__heading-copy {
display: grid;
gap: 0.3rem;
min-width: 0;
}
.wire-modal__heading-copy h2,
.wire-modal__heading-copy p {
.wrn-modal__heading-copy h2,
.wrn-modal__heading-copy p {
margin: 0;
}
.wire-modal__heading-copy h2 {
.wrn-modal__heading-copy h2 {
color: inherit;
font-size: 1.08rem;
font-weight: 650;
line-height: 1.3;
}
.wire-modal__heading-copy p {
color: var(--wire-color-text-muted);
.wrn-modal__heading-copy p {
color: var(--wrn-color-text-muted);
font-size: 0.8rem;
line-height: 1.55;
}
.wire-modal[data-variant="solid"] .wire-modal__heading-copy p {
.wrn-modal[data-variant="solid"] .wrn-modal__heading-copy p {
color: color-mix(in srgb, currentColor 76%, transparent);
}
@@ -559,7 +559,7 @@ component Modal {
* 2.15rem button with a ~2px content box -- which squeezed the icon to
* 0.4px wide and read as "the close button has no icon".
*/
.wire-modal__close {
.wrn-modal__close {
appearance: none;
display: inline-flex;
align-items: center;
@@ -568,7 +568,7 @@ component Modal {
padding: 0;
width: 2.15rem;
height: 2.15rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
background: transparent;
border: 1px solid transparent;
border-radius: 9999px;
@@ -582,34 +582,34 @@ component Modal {
* missing rather than subtle. Derive it from the panel contrast color
* instead, and give it a faint ring so it is unmistakably a control.
*/
.wire-modal[data-variant="solid"] .wire-modal__close {
.wrn-modal[data-variant="solid"] .wrn-modal__close {
color: color-mix(in srgb, currentColor 82%, transparent);
border-color: color-mix(in srgb, currentColor 35%, transparent);
}
.wire-modal[data-variant="solid"] .wire-modal__close:hover {
.wrn-modal[data-variant="solid"] .wrn-modal__close:hover {
color: currentColor;
background: color-mix(in srgb, black 18%, transparent);
border-color: color-mix(in srgb, currentColor 55%, transparent);
}
.wire-modal__close:hover {
color: var(--wire-color-text);
background: var(--wire-color-surface-soft);
.wrn-modal__close:hover {
color: var(--wrn-color-text);
background: var(--wrn-color-surface-soft);
}
.wire-modal__close:focus-visible {
.wrn-modal__close:focus-visible {
color: var(--modal-accent);
border-color: color-mix(in srgb, var(--modal-accent) 45%, transparent);
outline: none;
}
.wire-modal__close:active {
.wrn-modal__close:active {
transform: scale(0.92);
}
/* Never let the glyph be shrunk by the flex container. */
.wire-modal__close svg {
.wrn-modal__close svg {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
@@ -628,46 +628,46 @@ component Modal {
* block scanner treats a quote as a string delimiter while it counts
* braces, so a stray one breaks parsing of the whole component.
*/
.wire-modal__body {
.wrn-modal__body {
flex: 1 1 auto;
min-height: 0;
padding: 1.4rem;
color: var(--wire-color-text);
color: var(--wrn-color-text);
}
/*
* :where() keeps this at the specificity of .wire-modal__body alone, so it
* :where() keeps this at the specificity of .wrn-modal__body alone, so it
* outranks a global element selector but still yields to any class the app
* puts on its own slot content (an error message, a muted caption). A
* plain .wire-modal__body p list would have quietly overridden those.
* plain .wrn-modal__body p list would have quietly overridden those.
*/
.wire-modal__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
.wrn-modal__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
color: inherit;
}
.wire-modal[data-variant="solid"] .wire-modal__body {
.wrn-modal[data-variant="solid"] .wrn-modal__body {
color: var(--modal-contrast);
}
.wire-modal[data-scrollable="true"] .wire-modal__body {
.wrn-modal[data-scrollable="true"] .wrn-modal__body {
overflow: auto;
overscroll-behavior: contain;
}
.wire-modal__footer {
.wrn-modal__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.4rem 1.4rem;
border-top: 1px solid var(--wire-color-border);
border-top: 1px solid var(--wrn-color-border);
}
.wire-modal__custom-footer:empty {
.wrn-modal__custom-footer:empty {
display: none;
}
.wire-modal__actions {
.wrn-modal__actions {
display: flex;
align-items: center;
justify-content: flex-end;
@@ -675,7 +675,7 @@ component Modal {
margin-left: auto;
}
.wire-modal__button {
.wrn-modal__button {
appearance: none;
display: inline-flex;
align-items: center;
@@ -691,17 +691,17 @@ component Modal {
transition: transform 150ms ease, opacity 150ms ease, border-color 150ms ease;
}
.wire-modal__button:active {
.wrn-modal__button:active {
transform: scale(0.985);
}
.wire-modal__button--secondary {
color: var(--wire-color-text);
.wrn-modal__button--secondary {
color: var(--wrn-color-text);
background: transparent;
border: 1px solid var(--wire-color-border);
border: 1px solid var(--wrn-color-border);
}
.wire-modal__button--primary {
.wrn-modal__button--primary {
color: var(--modal-contrast);
background: var(--modal-accent);
border: 1px solid transparent;
@@ -713,73 +713,73 @@ component Modal {
* Darken the fill slightly and add a light border so the button still
* reads as a distinct, clickable pill instead of blending into the panel.
*/
.wire-modal[data-variant="solid"] .wire-modal__button--primary {
.wrn-modal[data-variant="solid"] .wrn-modal__button--primary {
background: color-mix(in srgb, black 18%, var(--modal-accent));
border-color: color-mix(in srgb, white 32%, transparent);
box-shadow: 0 1px 0 color-mix(in srgb, white 12%, transparent) inset;
}
.wire-modal__button:disabled {
.wrn-modal__button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.wire-modal__spinner {
.wrn-modal__spinner {
width: 0.95rem;
height: 0.95rem;
border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
border-top-color: currentColor;
border-radius: 50%;
animation: wire-modal-spin 750ms linear infinite;
animation: wrn-modal-spin 750ms linear infinite;
}
@keyframes wire-modal-spin {
@keyframes wrn-modal-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 639px) {
.wire-modal__layer {
.wrn-modal__layer {
align-items: flex-end;
padding: 0;
}
.wire-modal__panel,
.wire-modal[data-size="xs"] .wire-modal__panel,
.wire-modal[data-size="sm"] .wire-modal__panel,
.wire-modal[data-size="lg"] .wire-modal__panel,
.wire-modal[data-size="xl"] .wire-modal__panel {
.wrn-modal__panel,
.wrn-modal[data-size="xs"] .wrn-modal__panel,
.wrn-modal[data-size="sm"] .wrn-modal__panel,
.wrn-modal[data-size="lg"] .wrn-modal__panel,
.wrn-modal[data-size="xl"] .wrn-modal__panel {
width: 100%;
max-height: 92vh;
border-radius: 1.25rem 1.25rem 0 0;
}
.wire-modal__footer {
.wrn-modal__footer {
align-items: stretch;
flex-direction: column;
}
.wire-modal__actions {
.wrn-modal__actions {
width: 100%;
}
.wire-modal__button {
.wrn-modal__button {
flex: 1 1 0;
}
}
@media (prefers-reduced-motion: reduce) {
.wire-modal__button,
.wire-modal__spinner,
.wire-modal__layer,
.wire-modal__panel,
.wire-modal__close {
.wrn-modal__button,
.wrn-modal__spinner,
.wrn-modal__layer,
.wrn-modal__panel,
.wrn-modal__close {
animation: none;
transition: none;
}
.wire-modal__panel {
.wrn-modal__panel {
transform: none;
}
}