WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(release): refresh private package staging
Quality / quality (ubuntu-latest) (push) Failing after 14m12s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-10 00:55:12 +05:30
parent bca9549f3a
commit db612df6cd
69 changed files with 5421 additions and 7243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.publish/ui/components/Marquee.wrn
+38 -21
View File
@@ -21,46 +21,44 @@ component Marquee {
<section
data-ui-component="Marquee"
aria-label='{title}'
class='overflow-hidden border-y border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] {class}'
class='wire-marquee {class}'
>
<div class="flex items-stretch">
<div class="wire-marquee__layout">
{#if title}
<div class="relative z-10 flex shrink-0 items-center gap-2 border-r border-[var(--wire-color-border)] bg-[var(--wire-color-primary)] px-4 py-3 text-[var(--wire-color-on-primary)] sm:px-5">
<span class="icon-[lucide--megaphone] size-4" aria-hidden="true"></span>
<span class="text-sm font-bold">{title}</span>
<div class="wire-marquee__title">
<span class="icon-[lucide--megaphone] wire-marquee__icon" aria-hidden="true"></span>
<span>{title}</span>
</div>
{/if}
<div
class="group relative min-w-0 flex-1 overflow-hidden"
class="wire-marquee__window"
@mouseenter='paused = true; output.pause({})'
@mouseleave='paused = false; output.resume({})'
@focusin='paused = true'
@focusout='paused = false'
>
<div
class="wire-marquee-track flex w-max min-w-full items-center"
class="wire-marquee__track"
class:wire-marquee-paused='paused'
>
{#each items as item}
<a
href='{item.href || "#"}'
class="flex shrink-0 items-center gap-3 px-5 py-3 text-sm font-medium text-[var(--wire-color-text)] transition hover:bg-[var(--wire-color-primary-soft)] hover:text-[var(--wire-color-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--wire-color-focus)]"
class="wire-marquee__item"
>
<span
class="size-2 shrink-0 rounded-full bg-[var(--wire-color-primary)]"
class:bg-[var(--wire-color-danger)]='item.color === "danger"'
class:bg-[var(--wire-color-warning)]='item.color === "warning"'
class:bg-[var(--wire-color-success)]='item.color === "success"'
class="wire-marquee__dot"
data-color='{item.color || "primary"}'
aria-hidden="true"
></span>
<span>{item.label || item.title}</span>
{#if item.meta}
<span class="text-xs text-[var(--wire-color-text-muted)]">{item.meta}</span>
<span class="wire-marquee__meta">{item.meta}</span>
{/if}
</a>
{:empty}
<p class="px-5 py-3 text-sm text-[var(--wire-color-text-muted)]">{description || "No announcements available."}</p>
<p class="wire-marquee__empty">{description || "No announcements available."}</p>
{/each}
{#if items.length > 0}
@@ -69,9 +67,9 @@ component Marquee {
href='{item.href || "#"}'
aria-hidden="true"
tabindex="-1"
class="flex shrink-0 items-center gap-3 px-5 py-3 text-sm font-medium text-[var(--wire-color-text)]"
class="wire-marquee__item"
>
<span class="size-2 shrink-0 rounded-full bg-[var(--wire-color-primary)]" aria-hidden="true"></span>
<span class="wire-marquee__dot" aria-hidden="true"></span>
<span>{item.label || item.title}</span>
</a>
{/each}
@@ -82,11 +80,11 @@ component Marquee {
<button
type="button"
aria-label='{paused ? "Resume announcements" : "Pause announcements"}'
class="flex shrink-0 items-center justify-center border-l border-[var(--wire-color-border)] px-4 text-[var(--wire-color-text-muted)] transition hover:bg-[var(--wire-color-surface-soft)] hover:text-[var(--wire-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--wire-color-focus)]"
class="wire-marquee__toggle"
@click='paused = !paused; paused ? output.pause({}) : output.resume({})'
>
<span class="icon-[lucide--pause] size-4" data-show='!paused' aria-hidden="true"></span>
<span class="icon-[lucide--play] size-4" data-show='paused' aria-hidden="true"></span>
<span class="icon-[lucide--pause] wire-marquee__icon" data-show='!paused' aria-hidden="true"></span>
<span class="icon-[lucide--play] wire-marquee__icon" data-show='paused' aria-hidden="true"></span>
</button>
</div>
@@ -95,9 +93,28 @@ component Marquee {
}
style {
.wire-marquee-track {
.wire-marquee { overflow: hidden; border-block: 1px solid var(--wire-color-border); background: var(--wire-color-surface-raised); }
.wire-marquee__layout { display: flex; align-items: stretch; }
.wire-marquee__title { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-right: 1px solid var(--wire-color-border); color: var(--wire-color-on-primary); background: var(--wire-color-primary); font-size: 0.875rem; font-weight: 700; }
.wire-marquee__window { position: relative; min-width: 0; flex: 1; overflow: hidden; }
.wire-marquee__track {
display: flex; width: max-content; min-width: 100%; align-items: center;
animation: wire-marquee 32s linear infinite;
}
.wire-marquee-paused { animation-play-state: paused; }
.wire-marquee__item { display: flex; flex: none; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; color: var(--wire-color-text); font-size: 0.875rem; font-weight: 500; transition: color var(--wire-motion-base), background var(--wire-motion-base); }
.wire-marquee__item:hover { color: var(--wire-color-primary); background: var(--wire-color-primary-soft); }
.wire-marquee__item:focus-visible, .wire-marquee__toggle:focus-visible { outline: 2px solid var(--wire-color-focus); outline-offset: -2px; }
.wire-marquee__dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--wire-color-primary); }
.wire-marquee__dot[data-color="danger"] { background: var(--wire-color-danger); }
.wire-marquee__dot[data-color="warning"] { background: var(--wire-color-warning); }
.wire-marquee__dot[data-color="success"] { background: var(--wire-color-success); }
.wire-marquee__meta { color: var(--wire-color-text-muted); font-size: 0.75rem; }
.wire-marquee__empty { padding: 0.75rem 1.25rem; color: var(--wire-color-text-muted); font-size: 0.875rem; }
.wire-marquee__toggle { display: flex; flex: none; align-items: center; justify-content: center; padding-inline: 1rem; border: 0; border-left: 1px solid var(--wire-color-border); color: var(--wire-color-text-muted); background: transparent; transition: color var(--wire-motion-base), background var(--wire-motion-base); }
.wire-marquee__toggle:hover { color: var(--wire-color-text); background: var(--wire-color-surface-soft); }
.wire-marquee__icon { width: 1rem; height: 1rem; }
@media (min-width: 40rem) { .wire-marquee__title { padding-inline: 1.25rem; } }
.wire-marquee-paused {
animation-play-state: paused;
@@ -109,7 +126,7 @@ component Marquee {
}
@media (prefers-reduced-motion: reduce) {
.wire-marquee-track {
.wire-marquee__track {
animation: none;
}
}