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/Popover.wrn
+98 -98
View File
@@ -91,12 +91,12 @@ component Popover {
data-size='{size}'
data-color='{color}'
data-variant='{variant}'
class='wire-popover {class}'
class='wrn-popover {class}'
@keydown='handleKeydown(event)'
>
<button
type="button"
class="wire-popover__trigger"
class="wrn-popover__trigger"
disabled='{disabled}'
aria-haspopup="dialog"
aria-expanded='{open || visible ? "true" : "false"}'
@@ -114,7 +114,7 @@ component Popover {
{#if closeOnOutside}
<button
type="button"
class="wire-popover__dismiss-layer"
class="wrn-popover__dismiss-layer"
data-show='{open || visible}'
aria-label='{closeLabel}'
@click='hidePopover("outside", event)'
@@ -122,23 +122,23 @@ component Popover {
{/if}
<section
class="wire-popover__panel"
class="wrn-popover__panel"
data-wrn-anchored="true"
data-show='{open || visible}'
role="dialog"
aria-label='{title || triggerLabel}'
>
{#if showArrow}
<span class="wire-popover__arrow" data-wrn-anchor-arrow="true" aria-hidden="true"></span>
<span class="wrn-popover__arrow" data-wrn-anchor-arrow="true" aria-hidden="true"></span>
{/if}
{#if title || description || icon || showClose}
<header class="wire-popover__header">
<div class="wire-popover__heading">
<header class="wrn-popover__header">
<div class="wrn-popover__heading">
{#if icon}
<span class='wire-popover__icon {icon}' aria-hidden="true"></span>
<span class='wrn-popover__icon {icon}' aria-hidden="true"></span>
{/if}
<div class="wire-popover__heading-copy">
<div class="wrn-popover__heading-copy">
<slot name="header"></slot>
{#if title}
<h3>{title}</h3>
@@ -152,7 +152,7 @@ component Popover {
{#if showClose}
<button
type="button"
class="wire-popover__close"
class="wrn-popover__close"
aria-label='{closeLabel}'
@click='hidePopover("close-button", event)'
>
@@ -162,16 +162,16 @@ component Popover {
</header>
{/if}
<div class="wire-popover__body">
<div class="wrn-popover__body">
<slot></slot>
</div>
{#if actionLabel}
<footer class="wire-popover__footer">
<footer class="wrn-popover__footer">
{#if actionHref}
<a
href='{actionHref}'
class="wire-popover__action"
class="wrn-popover__action"
@click='activateAction(event)'
>
<span>{actionLabel}</span>
@@ -184,7 +184,7 @@ component Popover {
{:else}
<button
type="button"
class="wire-popover__action"
class="wrn-popover__action"
@click='activateAction(event)'
>
<span>{actionLabel}</span>
@@ -204,45 +204,45 @@ component Popover {
}
style {
.wire-popover {
--popover-accent: var(--wire-color-primary);
--popover-soft: var(--wire-color-primary-soft);
--popover-contrast: var(--wire-color-primary-contrast);
.wrn-popover {
--popover-accent: var(--wrn-color-primary);
--popover-soft: var(--wrn-color-primary-soft);
--popover-contrast: var(--wrn-color-primary-contrast);
position: relative;
display: inline-flex;
}
.wire-popover[data-color="secondary"] {
--popover-accent: var(--wire-color-secondary);
--popover-soft: var(--wire-color-secondary-soft);
--popover-contrast: var(--wire-color-secondary-contrast);
.wrn-popover[data-color="secondary"] {
--popover-accent: var(--wrn-color-secondary);
--popover-soft: var(--wrn-color-secondary-soft);
--popover-contrast: var(--wrn-color-secondary-contrast);
}
.wire-popover[data-color="info"] {
--popover-accent: var(--wire-color-info);
--popover-soft: var(--wire-color-info-soft);
--popover-contrast: var(--wire-color-info-contrast);
.wrn-popover[data-color="info"] {
--popover-accent: var(--wrn-color-info);
--popover-soft: var(--wrn-color-info-soft);
--popover-contrast: var(--wrn-color-info-contrast);
}
.wire-popover[data-color="success"] {
--popover-accent: var(--wire-color-success);
--popover-soft: var(--wire-color-success-soft);
--popover-contrast: var(--wire-color-success-contrast);
.wrn-popover[data-color="success"] {
--popover-accent: var(--wrn-color-success);
--popover-soft: var(--wrn-color-success-soft);
--popover-contrast: var(--wrn-color-success-contrast);
}
.wire-popover[data-color="warning"] {
--popover-accent: var(--wire-color-warning);
--popover-soft: var(--wire-color-warning-soft);
--popover-contrast: var(--wire-color-warning-text);
.wrn-popover[data-color="warning"] {
--popover-accent: var(--wrn-color-warning);
--popover-soft: var(--wrn-color-warning-soft);
--popover-contrast: var(--wrn-color-warning-text);
}
.wire-popover[data-color="danger"] {
--popover-accent: var(--wire-color-danger);
--popover-soft: var(--wire-color-danger-soft);
--popover-contrast: var(--wire-color-on-danger);
.wrn-popover[data-color="danger"] {
--popover-accent: var(--wrn-color-danger);
--popover-soft: var(--wrn-color-danger-soft);
--popover-contrast: var(--wrn-color-on-danger);
}
.wire-popover__trigger {
.wrn-popover__trigger {
appearance: none;
display: inline-flex;
align-items: center;
@@ -250,9 +250,9 @@ component Popover {
gap: 0.55rem;
min-height: 2.55rem;
padding: 0.65rem 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.78rem;
font: inherit;
font-size: 0.84rem;
@@ -261,33 +261,33 @@ component Popover {
transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.wire-popover__trigger:hover,
.wire-popover__trigger:focus-visible,
.wire-popover[data-open="true"] .wire-popover__trigger {
.wrn-popover__trigger:hover,
.wrn-popover__trigger:focus-visible,
.wrn-popover[data-open="true"] .wrn-popover__trigger {
color: var(--popover-accent);
background: var(--popover-soft);
border-color: color-mix(in srgb, var(--popover-accent) 38%, var(--wire-color-border));
border-color: color-mix(in srgb, var(--popover-accent) 38%, var(--wrn-color-border));
outline: none;
}
.wire-popover__trigger:disabled {
.wrn-popover__trigger:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wire-popover[data-size="sm"] .wire-popover__trigger {
.wrn-popover[data-size="sm"] .wrn-popover__trigger {
min-height: 2.2rem;
padding: 0.5rem 0.72rem;
font-size: 0.78rem;
}
.wire-popover[data-size="lg"] .wire-popover__trigger {
.wrn-popover[data-size="lg"] .wrn-popover__trigger {
min-height: 2.9rem;
padding: 0.78rem 1.05rem;
font-size: 0.9rem;
}
.wire-popover__dismiss-layer {
.wrn-popover__dismiss-layer {
position: fixed;
inset: 0;
z-index: 1120;
@@ -297,18 +297,18 @@ component Popover {
border: 0;
}
.wire-popover__panel {
.wrn-popover__panel {
position: absolute;
z-index: 1121;
top: calc(100% + 0.72rem);
left: 0;
width: 18rem;
max-width: calc(100vw - 1.5rem);
color: var(--wire-color-text);
color: var(--wrn-color-text);
background:
linear-gradient(145deg, color-mix(in srgb, var(--popover-accent) 5%, transparent), transparent 62%),
color-mix(in srgb, var(--wire-color-surface-raised) 97%, transparent);
border: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wire-color-border));
color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
border: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
border-radius: 1rem;
box-shadow:
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
@@ -316,125 +316,125 @@ component Popover {
backdrop-filter: blur(18px);
}
.wire-popover[data-width="sm"] .wire-popover__panel {
.wrn-popover[data-width="sm"] .wrn-popover__panel {
width: 14rem;
}
.wire-popover[data-width="lg"] .wire-popover__panel {
.wrn-popover[data-width="lg"] .wrn-popover__panel {
width: 24rem;
}
.wire-popover[data-width="xl"] .wire-popover__panel {
.wrn-popover[data-width="xl"] .wrn-popover__panel {
width: 32rem;
}
.wire-popover[data-width="trigger"] .wire-popover__panel {
.wrn-popover[data-width="trigger"] .wrn-popover__panel {
width: 100%;
min-width: 100%;
}
.wire-popover[data-placement="bottom-end"] .wire-popover__panel {
.wrn-popover[data-placement="bottom-end"] .wrn-popover__panel {
right: 0;
left: auto;
}
.wire-popover[data-placement="top-start"] .wire-popover__panel {
.wrn-popover[data-placement="top-start"] .wrn-popover__panel {
top: auto;
bottom: calc(100% + 0.72rem);
}
.wire-popover[data-placement="top-end"] .wire-popover__panel {
.wrn-popover[data-placement="top-end"] .wrn-popover__panel {
top: auto;
right: 0;
bottom: calc(100% + 0.72rem);
left: auto;
}
.wire-popover[data-placement="left"] .wire-popover__panel {
.wrn-popover[data-placement="left"] .wrn-popover__panel {
top: 50%;
right: calc(100% + 0.72rem);
left: auto;
transform: translateY(-50%);
}
.wire-popover[data-placement="right"] .wire-popover__panel {
.wrn-popover[data-placement="right"] .wrn-popover__panel {
top: 50%;
left: calc(100% + 0.72rem);
transform: translateY(-50%);
}
.wire-popover[data-variant="soft"] .wire-popover__panel {
.wrn-popover[data-variant="soft"] .wrn-popover__panel {
background:
linear-gradient(145deg, var(--popover-soft), transparent 70%),
var(--wire-color-surface-raised);
var(--wrn-color-surface-raised);
box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
}
.wire-popover[data-variant="outline"] .wire-popover__panel {
background: var(--wire-color-surface-raised);
.wrn-popover[data-variant="outline"] .wrn-popover__panel {
background: var(--wrn-color-surface-raised);
box-shadow: none;
}
.wire-popover[data-variant="solid"] .wire-popover__panel {
.wrn-popover[data-variant="solid"] .wrn-popover__panel {
color: var(--popover-contrast);
background: var(--popover-accent);
border-color: color-mix(in srgb, white 20%, transparent);
}
.wire-popover__arrow {
.wrn-popover__arrow {
position: absolute;
top: -0.35rem;
left: 1.25rem;
width: 0.7rem;
height: 0.7rem;
background: inherit;
border-top: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wire-color-border));
border-left: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wire-color-border));
border-top: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
border-left: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wrn-color-border));
transform: rotate(45deg);
}
.wire-popover[data-placement="bottom-end"] .wire-popover__arrow {
.wrn-popover[data-placement="bottom-end"] .wrn-popover__arrow {
right: 1.25rem;
left: auto;
}
.wire-popover[data-placement="top-start"] .wire-popover__arrow,
.wire-popover[data-placement="top-end"] .wire-popover__arrow {
.wrn-popover[data-placement="top-start"] .wrn-popover__arrow,
.wrn-popover[data-placement="top-end"] .wrn-popover__arrow {
top: auto;
bottom: -0.35rem;
transform: rotate(225deg);
}
.wire-popover[data-placement="left"] .wire-popover__arrow {
.wrn-popover[data-placement="left"] .wrn-popover__arrow {
top: 50%;
right: -0.35rem;
left: auto;
transform: translateY(-50%) rotate(135deg);
}
.wire-popover[data-placement="right"] .wire-popover__arrow {
.wrn-popover[data-placement="right"] .wrn-popover__arrow {
top: 50%;
left: -0.35rem;
transform: translateY(-50%) rotate(-45deg);
}
.wire-popover__header {
.wrn-popover__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.8rem;
padding: 1rem 1rem 0.8rem;
border-bottom: 1px solid var(--wire-color-border);
border-bottom: 1px solid var(--wrn-color-border);
}
.wire-popover__heading {
.wrn-popover__heading {
display: flex;
align-items: flex-start;
gap: 0.7rem;
min-width: 0;
}
.wire-popover__icon {
.wrn-popover__icon {
flex: 0 0 auto;
width: 1.05rem;
height: 1.05rem;
@@ -442,33 +442,33 @@ component Popover {
color: var(--popover-accent);
}
.wire-popover[data-variant="solid"] .wire-popover__icon {
.wrn-popover[data-variant="solid"] .wrn-popover__icon {
color: currentColor;
}
.wire-popover__heading-copy {
.wrn-popover__heading-copy {
display: grid;
gap: 0.2rem;
min-width: 0;
}
.wire-popover__heading-copy h3,
.wire-popover__heading-copy p {
.wrn-popover__heading-copy h3,
.wrn-popover__heading-copy p {
margin: 0;
}
.wire-popover__heading-copy h3 {
.wrn-popover__heading-copy h3 {
font-size: 0.9rem;
font-weight: 650;
}
.wire-popover__heading-copy p {
color: var(--wire-color-text-muted);
.wrn-popover__heading-copy p {
color: var(--wrn-color-text-muted);
font-size: 0.74rem;
line-height: 1.5;
}
.wire-popover[data-variant="solid"] .wire-popover__heading-copy p {
.wrn-popover[data-variant="solid"] .wrn-popover__heading-copy p {
color: color-mix(in srgb, currentColor 76%, transparent);
}
@@ -477,7 +477,7 @@ component Popover {
* outranks the browser default and crushes the icon inside this
* fixed-size button. Same trap as Modal and Drawer.
*/
.wire-popover__close {
.wrn-popover__close {
padding: 0;
appearance: none;
display: inline-flex;
@@ -486,25 +486,25 @@ component Popover {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
color: var(--wire-color-text-muted);
background: var(--wire-color-surface-soft);
border: 1px solid var(--wire-color-border);
color: var(--wrn-color-text-muted);
background: var(--wrn-color-surface-soft);
border: 1px solid var(--wrn-color-border);
border-radius: 0.65rem;
cursor: pointer;
}
.wire-popover__body {
.wrn-popover__body {
padding: 1rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
font-size: 0.8rem;
line-height: 1.6;
}
.wire-popover__footer {
.wrn-popover__footer {
padding: 0 1rem 1rem;
}
.wire-popover__action {
.wrn-popover__action {
appearance: none;
display: inline-flex;
align-items: center;
@@ -524,7 +524,7 @@ component Popover {
}
@media (max-width: 639px) {
.wire-popover__panel {
.wrn-popover__panel {
position: fixed;
right: 0.75rem;
bottom: 0.75rem;
@@ -535,7 +535,7 @@ component Popover {
transform: none;
}
.wire-popover__arrow {
.wrn-popover__arrow {
display: none;
}
}