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/Carousel.wrn
+194 -128
View File
@@ -1,5 +1,3 @@
import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
// Interactive, hydration-safe content carousel.
component Carousel {
outputs {
@@ -81,7 +79,7 @@ component Carousel {
if (!sourceEvent || !sourceEvent.currentTarget) {
return
}
root = sourceEvent.currentTarget.closest(".wire-next--carousel")
root = sourceEvent.currentTarget.closest(".wrn-next--carousel")
if (root) {
carouselRoot = root
}
@@ -94,8 +92,8 @@ component Carousel {
return
}
if (isSnap) {
viewport = root.querySelector(".wire-next__carousel-viewport")
slides = root.querySelectorAll(".wire-next__carousel-slide")
viewport = root.querySelector(".wrn-next__carousel-viewport")
slides = root.querySelectorAll(".wrn-next__carousel-slide")
slide = slides[index]
if (viewport && slide) {
viewport.scrollTo({
@@ -104,7 +102,7 @@ component Carousel {
})
}
}
thumbnails = root.querySelectorAll(".wire-next__carousel-thumbnails button")
thumbnails = root.querySelectorAll(".wrn-next__carousel-thumbnails button")
if (thumbnails[index]) {
thumbnail = thumbnails[index]
rail = thumbnail.parentElement
@@ -122,7 +120,7 @@ component Carousel {
}
rememberRoot(sourceEvent)
viewport = sourceEvent.currentTarget
slides = viewport.querySelectorAll(".wire-next__carousel-slide")
slides = viewport.querySelectorAll(".wrn-next__carousel-slide")
viewportCenter = viewport.scrollLeft + viewport.clientWidth / 2
closestIndex = currentIndex
closestDistance = 1000000000
@@ -144,7 +142,7 @@ component Carousel {
item: items[currentIndex],
reason: "snap"
})
slides = carouselRoot.querySelectorAll(".wire-next__carousel-thumbnails button")
slides = carouselRoot.querySelectorAll(".wrn-next__carousel-thumbnails button")
slide = slides[currentIndex]
if (slide) {
viewport = slide.parentElement
@@ -318,7 +316,7 @@ component Carousel {
view {
<section
{...attrs}
class="wire-component wire-next--carousel wire-component--color-{color} wire-component--size-{size} wire-next--variant-{variant} {class}"
class="wrn-component wrn-next--carousel wrn-component--color-{color} wrn-component--size-{size} wrn-next--variant-{variant} {class}"
data-rtl="{isRTL}"
data-centered="{isCentered}"
data-draggable="{isDraggable && !isSnap}"
@@ -337,15 +335,15 @@ component Carousel {
@focusout="startAutoplay()"
>
{#if title || description}
<header class="wire-next__carousel-header">
<header class="wrn-next__carousel-header">
{#if title}<h3>{title}</h3>{/if}
{#if description}<p>{description}</p>{/if}
</header>
{/if}
<div class="wire-next__carousel-layout">
<div class="wrn-next__carousel-layout">
{#if thumbnails === "vertical"}
<div class="wire-next__carousel-thumbnails" aria-label="Choose a slide">
<div class="wrn-next__carousel-thumbnails" aria-label="Choose a slide">
{#each items as item, index}
<button
type="button"
@@ -361,10 +359,10 @@ component Carousel {
</div>
{/if}
<div class="wire-next__carousel-main">
<div class="wire-next__carousel-stage">
<div class="wrn-next__carousel-main">
<div class="wrn-next__carousel-stage">
<div
class="wire-next__carousel-viewport"
class="wrn-next__carousel-viewport"
tabindex="0"
@scroll="handleSnapScroll(event)"
@pointerdown="beginDrag(event)"
@@ -374,12 +372,12 @@ component Carousel {
@lostpointercapture="cancelDrag()"
>
<div
class="wire-next__carousel-track"
style="--wire-carousel-index: {currentIndex}; --wire-carousel-per-view: {slidesPerView}; --wire-carousel-gap: {gap}; --wire-carousel-drag-offset: {dragOffset}px"
class="wrn-next__carousel-track"
style="--wrn-carousel-index: {currentIndex}; --wrn-carousel-per-view: {slidesPerView}; --wrn-carousel-gap: {gap}; --wrn-carousel-drag-offset: {dragOffset}px"
>
{#each items as item, index}
<article
class="wire-next__carousel-slide"
class="wrn-next__carousel-slide"
data-active="{index === currentIndex}"
role="group"
aria-roledescription="slide"
@@ -389,7 +387,7 @@ component Carousel {
{#if item.imageSrc}
<img src="{item.imageSrc}" alt="{item.imageAlt || item.title || ''}" />
{/if}
<div class="wire-next__carousel-slide-content">
<div class="wrn-next__carousel-slide-content">
{#if item.eyebrow}<span>{item.eyebrow}</span>{/if}
{#if item.title || item.label}<h4>{item.title || item.label}</h4>{/if}
{#if item.description}<p>{item.description}</p>{/if}
@@ -404,7 +402,7 @@ component Carousel {
</div>
<button
class="wire-next__carousel-control wire-next__carousel-control--previous"
class="wrn-next__carousel-control wrn-next__carousel-control--previous"
type="button"
aria-label="Previous slide"
disabled="{!isInfiniteLoop && currentIndex === 0}"
@@ -413,7 +411,7 @@ component Carousel {
<span class="icon-[lucide--chevron-left]" aria-hidden="true"></span>
</button>
<button
class="wire-next__carousel-control wire-next__carousel-control--next"
class="wrn-next__carousel-control wrn-next__carousel-control--next"
type="button"
aria-label="Next slide"
disabled="{!isInfiniteLoop && currentIndex === maximumIndex()}"
@@ -423,14 +421,14 @@ component Carousel {
</button>
{#if showCounter}
<output class="wire-next__carousel-counter" aria-live="polite">
<output class="wrn-next__carousel-counter" aria-live="polite">
{currentIndex + 1} / {items.length}
</output>
{/if}
</div>
{#if showPagination}
<div class="wire-next__carousel-pagination" aria-label="Choose a slide">
<div class="wrn-next__carousel-pagination" aria-label="Choose a slide">
{#each items as item, index}
<button
type="button"
@@ -444,7 +442,7 @@ component Carousel {
{/if}
{#if thumbnails === "horizontal"}
<div class="wire-next__carousel-thumbnails" aria-label="Choose a slide">
<div class="wrn-next__carousel-thumbnails" aria-label="Choose a slide">
{#each items as item, index}
<button
type="button"
@@ -462,145 +460,144 @@ component Carousel {
</div>
</div>
</section>
<ComponentBaseStyles hidden />
}
style {
.wire-next--carousel {
--wire-carousel-color: var(--wire-component-color, var(--wire-color-primary));
.wrn-next--carousel {
--wrn-carousel-color: var(--wrn-component-color, var(--wrn-color-primary));
display: grid;
width: 100%;
min-width: 0;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
color: var(--wire-color-text);
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-1);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-1);
}
.wire-next__carousel-header h3,
.wire-next__carousel-header p {
.wrn-next__carousel-header h3,
.wrn-next__carousel-header p {
margin: 0;
}
.wire-next__carousel-header p {
.wrn-next__carousel-header p {
margin-top: 0.35rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
}
.wire-next__carousel-layout {
.wrn-next__carousel-layout {
display: flex;
min-width: 0;
gap: 0.75rem;
}
.wire-next__carousel-main {
.wrn-next__carousel-main {
display: grid;
flex: 1;
min-width: 0;
gap: 0.75rem;
}
.wire-next__carousel-stage {
.wrn-next__carousel-stage {
position: relative;
min-width: 0;
}
.wire-next__carousel-viewport {
.wrn-next__carousel-viewport {
position: relative;
overflow: hidden;
min-width: 0;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-md);
background: var(--wire-color-surface-subtle, var(--wire-color-surface));
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-md);
background: var(--wrn-color-surface-subtle, var(--wrn-color-surface));
outline: none;
}
.wire-next__carousel-viewport:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-carousel-color) 30%, transparent);
.wrn-next__carousel-viewport:focus-visible {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-carousel-color) 30%, transparent);
}
.wire-next__carousel-track {
.wrn-next__carousel-track {
display: flex;
align-items: stretch;
gap: var(--wire-carousel-gap);
gap: var(--wrn-carousel-gap);
transform: translateX(
calc(
var(--wire-carousel-index) * -1 *
var(--wrn-carousel-index) * -1 *
(
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
var(--wire-carousel-per-view) + var(--wire-carousel-gap)
(100% - (var(--wrn-carousel-per-view) - 1) * var(--wrn-carousel-gap)) /
var(--wrn-carousel-per-view) + var(--wrn-carousel-gap)
)
)
);
transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
translate: var(--wire-carousel-drag-offset, 0) 0;
transition: transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
translate: var(--wrn-carousel-drag-offset, 0) 0;
will-change: transform;
}
.wire-next--carousel[data-dragging="true"] .wire-next__carousel-track {
.wrn-next--carousel[data-dragging="true"] .wrn-next__carousel-track {
transition: none;
}
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-track {
.wrn-next--carousel[data-rtl="true"] .wrn-next__carousel-track {
transform: translateX(
calc(
var(--wire-carousel-index) *
var(--wrn-carousel-index) *
(
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
var(--wire-carousel-per-view) + var(--wire-carousel-gap)
(100% - (var(--wrn-carousel-per-view) - 1) * var(--wrn-carousel-gap)) /
var(--wrn-carousel-per-view) + var(--wrn-carousel-gap)
)
)
);
}
.wire-next__carousel-slide {
.wrn-next__carousel-slide {
position: relative;
display: grid;
flex: 0 0
calc(
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
var(--wire-carousel-per-view)
(100% - (var(--wrn-carousel-per-view) - 1) * var(--wrn-carousel-gap)) /
var(--wrn-carousel-per-view)
);
overflow: hidden;
min-width: 0;
min-height: 20rem;
place-items: center;
background: var(--wire-color-surface-raised, var(--wire-color-surface));
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
}
.wire-next--carousel[data-auto-height="true"] .wire-next__carousel-slide {
.wrn-next--carousel[data-auto-height="true"] .wrn-next__carousel-slide {
min-height: 0;
}
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide {
.wrn-next--carousel[data-centered="true"] .wrn-next__carousel-slide {
flex-basis: min(78%, 32rem);
}
.wire-next--carousel[data-centered="true"] .wire-next__carousel-track {
.wrn-next--carousel[data-centered="true"] .wrn-next__carousel-track {
box-sizing: border-box;
transform: translateX(
calc(var(--wire-carousel-index) * -1 * (min(78%, 32rem) + var(--wire-carousel-gap)))
calc(var(--wrn-carousel-index) * -1 * (min(78%, 32rem) + var(--wrn-carousel-gap)))
);
}
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:first-child {
.wrn-next--carousel[data-centered="true"] .wrn-next__carousel-slide:first-child {
margin-inline-start: calc((100% - min(78%, 32rem)) / 2);
}
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:last-child {
.wrn-next--carousel[data-centered="true"] .wrn-next__carousel-slide:last-child {
margin-inline-end: calc((100% - min(78%, 32rem)) / 2);
}
.wire-next--carousel[data-centered="true"][data-rtl="true"] .wire-next__carousel-track {
.wrn-next--carousel[data-centered="true"][data-rtl="true"] .wrn-next__carousel-track {
transform: translateX(
calc(var(--wire-carousel-index) * (min(78%, 32rem) + var(--wire-carousel-gap)))
calc(var(--wrn-carousel-index) * (min(78%, 32rem) + var(--wrn-carousel-gap)))
);
}
.wire-next__carousel-slide > img {
.wrn-next__carousel-slide > img {
position: absolute;
width: 100%;
height: 100%;
@@ -608,7 +605,7 @@ component Carousel {
inset: 0;
}
.wire-next__carousel-slide-content {
.wrn-next__carousel-slide-content {
position: relative;
z-index: 1;
width: min(100%, 38rem);
@@ -616,21 +613,21 @@ component Carousel {
text-align: center;
}
.wire-next__carousel-slide-content h4,
.wire-next__carousel-slide-content p {
.wrn-next__carousel-slide-content h4,
.wrn-next__carousel-slide-content p {
margin: 0;
}
.wire-next__carousel-slide-content h4 {
.wrn-next__carousel-slide-content h4 {
font-size: clamp(1.5rem, 4vw, 2.4rem);
}
.wire-next__carousel-slide-content p {
.wrn-next__carousel-slide-content p {
margin-top: 0.65rem;
color: var(--wire-color-text-muted);
color: var(--wrn-color-text-muted);
}
.wire-next__carousel-control {
.wrn-next__carousel-control {
position: absolute;
z-index: 3;
top: 50%;
@@ -638,46 +635,46 @@ component Carousel {
width: 2.75rem;
min-height: 2.75rem;
padding: 0;
border: 1px solid color-mix(in srgb, var(--wire-color-border) 70%, transparent);
border: 1px solid color-mix(in srgb, var(--wrn-color-border) 70%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--wire-color-text) 76%, transparent);
color: var(--wire-color-surface);
background: color-mix(in srgb, var(--wrn-color-text) 76%, transparent);
color: var(--wrn-color-surface);
cursor: pointer;
place-items: center;
transform: translateY(-50%);
}
.wire-next__carousel-control:focus-visible,
.wire-next__carousel-pagination button:focus-visible,
.wire-next__carousel-thumbnails button:focus-visible {
outline: 2px solid var(--wire-carousel-color);
.wrn-next__carousel-control:focus-visible,
.wrn-next__carousel-pagination button:focus-visible,
.wrn-next__carousel-thumbnails button:focus-visible {
outline: 2px solid var(--wrn-carousel-color);
outline-offset: 2px;
}
.wire-next__carousel-control:disabled {
.wrn-next__carousel-control:disabled {
cursor: not-allowed;
opacity: 0.35;
}
.wire-next__carousel-control--previous {
.wrn-next__carousel-control--previous {
left: 1rem;
}
.wire-next__carousel-control--next {
.wrn-next__carousel-control--next {
right: 1rem;
}
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--previous {
.wrn-next--carousel[data-rtl="true"] .wrn-next__carousel-control--previous {
right: 1rem;
left: auto;
}
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--next {
.wrn-next--carousel[data-rtl="true"] .wrn-next__carousel-control--next {
right: auto;
left: 1rem;
}
.wire-next__carousel-pagination {
.wrn-next__carousel-pagination {
display: flex;
min-height: 1.5rem;
align-items: center;
@@ -685,148 +682,217 @@ component Carousel {
gap: 0.5rem;
}
.wire-next__carousel-pagination button {
.wrn-next__carousel-pagination button {
width: 0.65rem;
min-height: 0.65rem;
padding: 0;
border: 1px solid var(--wire-color-text-muted);
border: 1px solid var(--wrn-color-text-muted);
border-radius: 999px;
background: transparent;
cursor: pointer;
}
.wire-next__carousel-pagination button[data-active="true"] {
border-color: var(--wire-carousel-color);
background: var(--wire-carousel-color);
.wrn-next__carousel-pagination button[data-active="true"] {
border-color: var(--wrn-carousel-color);
background: var(--wrn-carousel-color);
}
.wire-next__carousel-counter {
.wrn-next__carousel-counter {
position: absolute;
z-index: 3;
bottom: 0.8rem;
left: 50%;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: color-mix(in srgb, var(--wire-color-text) 82%, transparent);
color: var(--wire-color-surface);
background: color-mix(in srgb, var(--wrn-color-text) 82%, transparent);
color: var(--wrn-color-surface);
font-weight: 700;
transform: translateX(-50%);
}
.wire-next__carousel-thumbnails {
.wrn-next__carousel-thumbnails {
display: flex;
overflow: auto;
gap: 0.55rem;
scrollbar-width: thin;
}
.wire-next__carousel-thumbnails button {
.wrn-next__carousel-thumbnails button {
display: grid;
flex: 0 0 8.5rem;
min-height: 3.75rem;
overflow: hidden;
padding: 0;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius-sm);
background: var(--wire-color-surface);
color: var(--wire-color-text);
border: 1px solid var(--wrn-color-border);
border-radius: var(--wrn-radius-sm);
background: var(--wrn-color-surface);
color: var(--wrn-color-text);
cursor: pointer;
place-items: center;
}
.wire-next__carousel-thumbnails button[data-active="true"] {
border-color: var(--wire-carousel-color);
box-shadow: inset 0 0 0 1px var(--wire-carousel-color);
.wrn-next__carousel-thumbnails button[data-active="true"] {
border-color: var(--wrn-carousel-color);
box-shadow: inset 0 0 0 1px var(--wrn-carousel-color);
}
.wire-next__carousel-thumbnails img {
.wrn-next__carousel-thumbnails img {
width: 100%;
height: 4rem;
object-fit: cover;
}
.wire-next__carousel-thumbnails span {
.wrn-next__carousel-thumbnails span {
padding: 0.5rem;
}
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
.wrn-next--carousel[data-thumbnails="vertical"] .wrn-next__carousel-thumbnails {
flex: 0 0 9rem;
flex-direction: column;
max-height: 28rem;
}
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
.wrn-next--carousel[data-thumbnails="vertical"] .wrn-next__carousel-thumbnails button {
flex-basis: 7.5rem;
width: 100%;
}
.wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport {
.wrn-next--carousel[data-draggable="true"] .wrn-next__carousel-viewport {
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport:active {
.wrn-next--carousel[data-draggable="true"] .wrn-next__carousel-viewport:active {
cursor: grabbing;
}
.wire-next--carousel[data-draggable="true"] img,
.wire-next--carousel[data-draggable="true"] a {
.wrn-next--carousel[data-draggable="true"] img,
.wrn-next--carousel[data-draggable="true"] a {
-webkit-user-drag: none;
}
.wire-next--carousel[data-snap="true"] .wire-next__carousel-viewport {
.wrn-next--carousel[data-snap="true"] .wrn-next__carousel-viewport {
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.wire-next--carousel[data-snap="true"] .wire-next__carousel-track {
--wire-carousel-snap-slide: calc(
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
var(--wire-carousel-per-view)
.wrn-next--carousel[data-snap="true"] .wrn-next__carousel-track {
--wrn-carousel-snap-slide: calc(
(100% - (var(--wrn-carousel-per-view) - 1) * var(--wrn-carousel-gap)) /
var(--wrn-carousel-per-view)
);
display: grid;
width: 100%;
min-width: 100%;
box-sizing: content-box;
grid-auto-columns: var(--wire-carousel-snap-slide);
grid-auto-columns: var(--wrn-carousel-snap-slide);
grid-auto-flow: column;
padding-inline: calc((100% - var(--wire-carousel-snap-slide)) / 2);
padding-inline: calc((100% - var(--wrn-carousel-snap-slide)) / 2);
transform: none;
}
.wire-next--carousel[data-snap="true"] .wire-next__carousel-slide {
.wrn-next--carousel[data-snap="true"] .wrn-next__carousel-slide {
width: auto;
min-width: 0;
scroll-snap-align: center;
}
@media (max-width: 640px) {
.wire-next__carousel-slide {
.wrn-next__carousel-slide {
flex-basis: 100%;
min-height: 16rem;
}
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-layout {
.wrn-next--carousel[data-thumbnails="vertical"] .wrn-next__carousel-layout {
flex-direction: column-reverse;
}
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
.wrn-next--carousel[data-thumbnails="vertical"] .wrn-next__carousel-thumbnails {
flex: auto;
flex-direction: row;
max-height: none;
}
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
.wrn-next--carousel[data-thumbnails="vertical"] .wrn-next__carousel-thumbnails button {
flex-basis: 8.5rem;
width: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.wire-next__carousel-track {
.wrn-next__carousel-track {
transition-duration: 0.01ms;
}
}
/* 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;
}
}
}