{item.label}
{item.content}
+
}
}
diff --git a/.publish/ui/components/Blockquote.wrn b/.publish/ui/components/Blockquote.wrn
index 693b09a3..dc476675 100644
--- a/.publish/ui/components/Blockquote.wrn
+++ b/.publish/ui/components/Blockquote.wrn
@@ -1,19 +1,67 @@
component Blockquote {
props {
- size = "default"
+ quote = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
+ citation = ""
+ citationTitle = ""
+ citationUrl = ""
+ avatarSrc = ""
+ avatarAlt = ""
+ size = "md"
color = "primary"
- title = "Blockquote"
- description = ""
- items = []
+ align = "left"
variant = "default"
+ quoteMark = true
+ italic = true
class = ""
}
+
view {
-
+
+ {#each visibleMembers() as item}
+
+
+ {#if item.src}
+ 
+ {:else if item.initials}
+
+ {:else}
+
+ {/if}
+
+
+ {#if showTooltips && (item.tooltip || item.name)}
+
+ {item.tooltip || item.name}
+
+ {/if}
+
+ {/each}
+
+ {#if hiddenMembers().length > 0}
+
+
+
+
+ {#each hiddenMembers() as item}
+
+
+ {#if item.src}
+
+ {:else}
+ {item.initials || '?'}
+ {/if}
+
+ {item.name || item.alt || item.initials || 'Team member'}
+
+ {/each}
+
+
+ {/if}
+
+ + {#if quoteMark} + + {/if} + ++ + {#if citation || citationTitle || avatarSrc} ++ {#if quote} ++{quote}
+ {:else} ++ {/if} +
{description}
{/if} - {#if items}{#each items as item}{item.label}{/each}
{/if}
+
}
}
diff --git a/.publish/ui/components/Carousel.wrn b/.publish/ui/components/Carousel.wrn
index c9024c86..4efdb206 100644
--- a/.publish/ui/components/Carousel.wrn
+++ b/.publish/ui/components/Carousel.wrn
@@ -1,19 +1,461 @@
+// Interactive, hydration-safe content carousel.
component Carousel {
props {
+ @event initialize = function
+ @event change = function
+ @event previous = function
+ @event next = function
+ @event play = function
+ @event pause = function
+ @event reachStart = function
+ @event reachEnd = function
+ @event dragStart = function
+ @event dragEnd = function
size = "default"
color = "primary"
- title = "Carousel"
+ title = ""
description = ""
items = []
+ activeIndex = 0
+ slidesPerView = 1
+ gap = "0.75rem"
+ showPagination = false
+ isAutoPlay = false
+ autoplayInterval = 4000
+ isInfiniteLoop = false
+ isRTL = false
+ isCentered = false
+ isDraggable = false
+ isAutoHeight = false
+ isSnap = false
+ showCounter = false
+ thumbnails = "none"
+ ariaLabel = "Content carousel"
variant = "default"
class = ""
}
+
+ state currentIndex = activeIndex
+ state playing = false
+ state dragOrigin = null
+ state dragOffset = 0
+ state autoplayTimer = null
+ state carouselRoot = null
+
+ functions {
+ function slideCount() {
+ return items.length
+ }
+
+ function maximumIndex(count, visible) {
+ count = slideCount()
+ visible = Math.max(1, Number(slidesPerView) || 1)
+ if (isCentered || isSnap) {
+ return Math.max(0, count - 1)
+ }
+ return Math.max(0, count - visible)
+ }
+
+ function normalizedIndex(index, maximum) {
+ maximum = maximumIndex()
+ if (slideCount() === 0) {
+ return 0
+ }
+ if (isInfiniteLoop) {
+ if (index < 0) {
+ return maximum
+ }
+ if (index > maximum) {
+ return 0
+ }
+ }
+ return Math.max(0, Math.min(index, maximum))
+ }
+
+ function rememberRoot(sourceEvent, root) {
+ if (!sourceEvent || !sourceEvent.currentTarget) {
+ return
+ }
+ root = sourceEvent.currentTarget.closest(".wire-next--carousel")
+ if (root) {
+ carouselRoot = root
+ }
+ }
+
+ function syncNavigation(sourceEvent, index, root, viewport, slides, slide, thumbnails, thumbnail, rail) {
+ rememberRoot(sourceEvent)
+ root = carouselRoot
+ if (!root) {
+ return
+ }
+ if (isSnap) {
+ viewport = root.querySelector(".wire-next__carousel-viewport")
+ slides = root.querySelectorAll(".wire-next__carousel-slide")
+ slide = slides[index]
+ if (viewport && slide) {
+ viewport.scrollTo({
+ left: slide.offsetLeft - (viewport.clientWidth - slide.clientWidth) / 2,
+ behavior: "smooth"
+ })
+ }
+ }
+ thumbnails = root.querySelectorAll(".wire-next__carousel-thumbnails button")
+ if (thumbnails[index]) {
+ thumbnail = thumbnails[index]
+ rail = thumbnail.parentElement
+ rail.scrollTo({
+ left: thumbnail.offsetLeft - (rail.clientWidth - thumbnail.clientWidth) / 2,
+ top: thumbnail.offsetTop - (rail.clientHeight - thumbnail.clientHeight) / 2,
+ behavior: "smooth"
+ })
+ }
+ }
+
+ function handleSnapScroll(sourceEvent, slides, viewport, viewportCenter, closestIndex, closestDistance, slide, slideCenter, distance, previousIndex) {
+ if (!isSnap) {
+ return
+ }
+ rememberRoot(sourceEvent)
+ viewport = sourceEvent.currentTarget
+ slides = viewport.querySelectorAll(".wire-next__carousel-slide")
+ viewportCenter = viewport.scrollLeft + viewport.clientWidth / 2
+ closestIndex = currentIndex
+ closestDistance = 1000000000
+ slides.forEach(function (candidate, index) {
+ slideCenter = candidate.offsetLeft + candidate.clientWidth / 2
+ distance = Math.abs(slideCenter - viewportCenter)
+ if (distance < closestDistance) {
+ closestDistance = distance
+ closestIndex = index
+ }
+ })
+ closestIndex = normalizedIndex(closestIndex)
+ if (closestIndex !== currentIndex) {
+ previousIndex = currentIndex
+ currentIndex = closestIndex
+ $emit("change", {
+ index: currentIndex,
+ previousIndex: previousIndex,
+ item: items[currentIndex],
+ reason: "snap"
+ })
+ slides = carouselRoot.querySelectorAll(".wire-next__carousel-thumbnails button")
+ slide = slides[currentIndex]
+ if (slide) {
+ viewport = slide.parentElement
+ viewport.scrollTo({
+ left: slide.offsetLeft - (viewport.clientWidth - slide.clientWidth) / 2,
+ top: slide.offsetTop - (viewport.clientHeight - slide.clientHeight) / 2,
+ behavior: "smooth"
+ })
+ }
+ }
+ }
+
+ function selectSlide(index, reason, sourceEvent, previousIndex) {
+ if (slideCount() === 0) {
+ return
+ }
+ previousIndex = currentIndex
+ currentIndex = normalizedIndex(Number(index))
+ syncNavigation(sourceEvent, currentIndex)
+ if (previousIndex === currentIndex && reason !== "initialize") {
+ return
+ }
+ $emit("change", {
+ index: currentIndex,
+ previousIndex: previousIndex,
+ item: items[currentIndex],
+ reason: reason || "select"
+ })
+ if (currentIndex === 0) {
+ $emit("reachStart", { index: currentIndex })
+ }
+ if (currentIndex === maximumIndex()) {
+ $emit("reachEnd", { index: currentIndex })
+ }
+ }
+
+ function previousSlide(sourceEvent, previousIndex) {
+ previousIndex = currentIndex
+ selectSlide(currentIndex - 1, "previous", sourceEvent)
+ $emit("previous", {
+ index: currentIndex,
+ previousIndex: previousIndex,
+ item: items[currentIndex]
+ })
+ }
+
+ function nextSlide(sourceEvent, previousIndex) {
+ previousIndex = currentIndex
+ selectSlide(currentIndex + 1, "next", sourceEvent)
+ $emit("next", {
+ index: currentIndex,
+ previousIndex: previousIndex,
+ item: items[currentIndex]
+ })
+ }
+
+ function handleKeydown(sourceEvent) {
+ if (sourceEvent.key === "ArrowLeft") {
+ sourceEvent.preventDefault()
+ if (isRTL) {
+ nextSlide(sourceEvent)
+ } else {
+ previousSlide(sourceEvent)
+ }
+ }
+ if (sourceEvent.key === "ArrowRight") {
+ sourceEvent.preventDefault()
+ if (isRTL) {
+ previousSlide(sourceEvent)
+ } else {
+ nextSlide(sourceEvent)
+ }
+ }
+ if (sourceEvent.key === "Home") {
+ sourceEvent.preventDefault()
+ selectSlide(0, "keyboard", sourceEvent)
+ }
+ if (sourceEvent.key === "End") {
+ sourceEvent.preventDefault()
+ selectSlide(maximumIndex(), "keyboard", sourceEvent)
+ }
+ }
+
+ function beginDrag(sourceEvent) {
+ if (!isDraggable || isSnap) {
+ return
+ }
+ sourceEvent.preventDefault()
+ dragOrigin = sourceEvent.clientX
+ dragOffset = 0
+ sourceEvent.currentTarget.setPointerCapture(sourceEvent.pointerId)
+ $emit("dragStart", { index: currentIndex, x: dragOrigin })
+ }
+
+ function moveDrag(sourceEvent) {
+ if (!isDraggable || isSnap || dragOrigin === null) {
+ return
+ }
+ sourceEvent.preventDefault()
+ dragOffset = sourceEvent.clientX - dragOrigin
+ }
+
+ function cancelDrag() {
+ dragOrigin = null
+ dragOffset = 0
+ }
+
+ function endDrag(sourceEvent, distance) {
+ if (!isDraggable || isSnap || dragOrigin === null) {
+ return
+ }
+ sourceEvent.preventDefault()
+ distance = dragOffset || sourceEvent.clientX - dragOrigin
+ dragOrigin = null
+ dragOffset = 0
+ if (Math.abs(distance) > 20) {
+ if ((distance < 0 && !isRTL) || (distance > 0 && isRTL)) {
+ nextSlide(sourceEvent)
+ } else {
+ previousSlide(sourceEvent)
+ }
+ }
+ $emit("dragEnd", {
+ index: currentIndex,
+ distance: distance
+ })
+ }
+
+ function advanceAutoplay() {
+ if (currentIndex >= maximumIndex()) {
+ selectSlide(0, "autoplay")
+ } else {
+ selectSlide(currentIndex + 1, "autoplay")
+ }
+ }
+
+ function startAutoplay() {
+ if (!isAutoPlay || playing || slideCount() < 2) {
+ return
+ }
+ playing = true
+ autoplayTimer = setInterval(advanceAutoplay, Math.max(1000, Number(autoplayInterval)))
+ $emit("play", { index: currentIndex, interval: autoplayInterval })
+ }
+
+ function pauseAutoplay() {
+ if (autoplayTimer) {
+ clearInterval(autoplayTimer)
+ }
+ autoplayTimer = null
+ if (playing) {
+ $emit("pause", { index: currentIndex })
+ }
+ playing = false
+ }
+
+ }
+
+ lifecycle {
+ mount {
+ $emit("initialize", { index: currentIndex, count: slideCount() })
+ startAutoplay()
+ }
+ unmount {
+ if (autoplayTimer) {
+ clearInterval(autoplayTimer)
+ }
+ }
+ }
+
view {
- {description}
{/if} - {#if items}{#each items as item}{item.label}{/each}
{/if}
- {title}
{/if} + {#if description}{description}
{/if} +
+ {#if thumbnails === "vertical"}
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+ {#if showPagination}
+
+
+
+
+
+
+ {#if showCounter}
+
+ {/if}
+
+ {#each items as item, index}
+
+ {#if item.imageSrc}
+ 
+ {/if}
+
+
+ {/each}
+
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+
+ {#if thumbnails === "horizontal"}
+
+ {#each items as item, index}
+
+ {/each}
+
+ {/if}
+ {description}
{/if} - {#if items}{#each items as item}{item.label}{/each}
{/if}
-
-
- {#if title}{title}{/if}
- {#if description}
+ {:else if initials}
+
+ {:else}
+
+ {/if}
+
+
+ {#if status}
+
+ {/if}
+
+ {#if badgeIcon}
+
+
+
+ {:else if badge}
+
+ {badge}
+
+ {/if}
+
+ {#if tooltip}
+ {tooltip}
+ {/if}
+
+
+ {#if description}
+
+ {name || alt || initials}
+ {description}
+
+ {/if}
+
}
}
diff --git a/.publish/ui/components/badge.wrn b/.publish/ui/components/badge.wrn
index 3b4d5bdc..e5eb1c9b 100644
--- a/.publish/ui/components/badge.wrn
+++ b/.publish/ui/components/badge.wrn
@@ -1,19 +1,102 @@
component Badge {
props {
- size = "default"
+ label = "Badge"
+ size = "md"
color = "primary"
- title = "Badge"
- description = ""
- items = []
- variant = "default"
+ variant = "solid"
+ shape = "pill"
class = ""
+
+ icon = ""
+ iconPosition = "start"
+ dot = false
+ dotOnly = false
+ dotLabel = "Status"
+ animated = false
+
+ avatarSrc = ""
+ avatarAlt = ""
+ dismissible = false
+ dismissLabel = "Remove badge"
+ truncate = false
+ maxWidth = "12rem"
+
+ anchorLabel = ""
+ anchorIcon = ""
+ placement = "inline"
+ anchorLabelText = "Badge anchor"
+
+ @event dismiss = function
}
+
+ state visible = true
+
+ functions {
+ function dismissBadge(sourceEvent, root, customEvent) {
+ visible = false
+ root = sourceEvent.currentTarget.closest("[data-wrn-badge]")
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("dismiss", true, false, {
+ component: "Badge",
+ label: label
+ })
+ root.dispatchEvent(customEvent)
+ }
+ }
+
view {
-
+
+ {#if anchorLabel || anchorIcon}
+
+ {/if}
+
+
+ {#if animated}
+
+ {/if}
+ {#if avatarSrc}
+ 
+ {/if}
+ {#if dot || dotOnly}
+
+ {/if}
+ {#if icon && iconPosition === "start"}
+
+ {/if}
+ {#if !dotOnly}
+
+ {label}
+
+ {/if}
+ {#if icon && iconPosition === "end"}
+
+ {/if}
+ {#if dismissible}
+
+ {/if}
+
+
}
}
diff --git a/.publish/ui/components/button.wrn b/.publish/ui/components/button.wrn
index be7c4d75..34bf88b4 100644
--- a/.publish/ui/components/button.wrn
+++ b/.publish/ui/components/button.wrn
@@ -1,5 +1,8 @@
component Button {
props {
+ @event click = function
+ @event focus = function
+ @event blur = function
label = "Button"
loadingLabel = "Loading…"
description = ""
diff --git a/.publish/ui/components/card.wrn b/.publish/ui/components/card.wrn
index f9572262..1948c5b0 100644
--- a/.publish/ui/components/card.wrn
+++ b/.publish/ui/components/card.wrn
@@ -1,19 +1,259 @@
component Card {
props {
- size = "default"
- color = "primary"
- title = "Card"
+ @event click = function
+ @event action = function
+ @event navigate = function
+ @event dismiss = function
+ @event load = function
+ @event error = function
+ title = "Card title"
+ subtitle = ""
description = ""
+ header = ""
+ footer = ""
+ imageSrc = ""
+ imageAlt = ""
+ imagePosition = "top"
+ actionLabel = ""
+ actionHref = ""
+ headerActions = []
+ navigation = []
+ activeNav = ""
+ mobileNavigation = false
+ alertTitle = ""
+ alertDescription = ""
+ empty = false
+ emptyTitle = "No data to show"
+ emptyIcon = "icon-[lucide--inbox]"
items = []
+ size = "md"
+ color = "primary"
variant = "default"
+ layout = "vertical"
+ align = "left"
+ hover = "none"
+ scrollable = false
+ maxHeight = "18rem"
+ dismissible = false
+ ariaLabel = ""
class = ""
}
+
+ state visible = true
+ state selectedNav = activeNav
+
+ functions {
+ function chooseNavigation(item, index) {
+ previousValue = selectedNav
+ selectedNav = item.value || item.label
+ $emit("navigate", {
+ value: selectedNav,
+ previousValue: previousValue,
+ item: item,
+ index: index
+ })
+ }
+
+ function chooseMobileNavigation(sourceEvent) {
+ previousValue = selectedNav
+ selectedNav = sourceEvent.target.value
+ $emit("navigate", {
+ value: selectedNav,
+ previousValue: previousValue
+ })
+ }
+
+ function chooseAction(action, index) {
+ $emit("action", {
+ action: action,
+ index: index
+ })
+ }
+
+ function dismissCard(sourceEvent) {
+ panel = sourceEvent.currentTarget.closest(".wire-next__card-panel")
+ if (panel) {
+ panel.setAttribute("hidden", "")
+ }
+ visible = false
+ $emit("dismiss", {
+ title: title
+ })
+ }
+ }
+
view {
-
- {#if title}{title}{/if}
- {#if description}
+ {#if items.length > 0}
+
+ {#if imagePosition === "overlay" && imageSrc}
+
+ {header}
+ {#if headerActions.length > 0 || dismissible}
+
+ {#each headerActions as action, index}
+
+ {/each}
+ {#if dismissible}
+
+ {/if}
+
+ {/if}
+
+ {/if}
+
+ {#if navigation.length > 0}
+
+ {/if}
+
+ {#if imageSrc && imagePosition !== "bottom"}
+
+ {/if}
}
}
diff --git a/.publish/ui/components/checkbox.wrn b/.publish/ui/components/checkbox.wrn
index eca1f3cc..63461a67 100644
--- a/.publish/ui/components/checkbox.wrn
+++ b/.publish/ui/components/checkbox.wrn
@@ -1,15 +1,62 @@
component Checkbox {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
size = "default"
color = "primary"
- label = "Checkbox"
+ id = ""
name = ""
+ label = "Checkbox"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
value = "on"
+ values = []
+ options = []
checked = false
+ indeterminate = false
+ orientation = "vertical"
+ card = false
+ rightAligned = false
+ list = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
disabled = false
+ required = false
class = ""
}
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, values: values, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/input.wrn b/.publish/ui/components/input.wrn
index 2111900c..3e12c986 100644
--- a/.publish/ui/components/input.wrn
+++ b/.publish/ui/components/input.wrn
@@ -1,20 +1,92 @@
component Input {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
+ @event keydown = function
+ @event keyup = function
size = "default"
color = "primary"
- label = "Input"
+ id = ""
name = ""
- value = ""
+ label = "Input"
+ hiddenLabel = false
placeholder = ""
+ value = ""
type = "text"
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
+ disabled = false
+ required = false
+ autocomplete = ""
+ inputmode = ""
+ minlength = ""
+ maxlength = ""
+ pattern = ""
min = ""
max = ""
step = ""
- disabled = false
- required = false
class = ""
}
+ functions {
+ function detail(sourceEvent) {
+ return { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }
+ }
+ function handleInput(sourceEvent) { sourceEvent.stopPropagation(); $emit("input", detail(sourceEvent)) }
+ function handleChange(sourceEvent) { sourceEvent.stopPropagation(); $emit("change", detail(sourceEvent)) }
+ function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); $emit("focus", detail(sourceEvent)) }
+ function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); $emit("blur", detail(sourceEvent)) }
+ function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); $emit("invalid", { value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); $emit("keydown", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); $emit("keyup", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/radio.wrn b/.publish/ui/components/radio.wrn
index 1d1266aa..1da0c2a8 100644
--- a/.publish/ui/components/radio.wrn
+++ b/.publish/ui/components/radio.wrn
@@ -1,15 +1,56 @@
component Radio {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
size = "default"
color = "primary"
- label = "Radio"
+ id = ""
name = ""
+ label = "Radio"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
value = "on"
+ options = []
checked = false
+ orientation = "vertical"
+ card = false
+ rightAligned = false
+ list = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
disabled = false
+ required = false
class = ""
}
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/select.wrn b/.publish/ui/components/select.wrn
index a7bd6d33..23c13a94 100644
--- a/.publish/ui/components/select.wrn
+++ b/.publish/ui/components/select.wrn
@@ -1,17 +1,61 @@
component Select {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event open = function
+ @event close = function
+ @event invalid = function
size = "default"
color = "primary"
- label = "Select"
+ id = ""
name = ""
+ label = "Select"
+ hiddenLabel = false
value = ""
+ values = []
options = []
placeholder = "Select an option"
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
multiple = false
+ readonly = false
disabled = false
+ required = false
class = ""
}
+ functions {
+ function selected(option) {
+ if (multiple) return values.includes(option.value)
+ return option.value === value
+ }
+ function emitField(nameEvent, sourceEvent) {
+ sourceEvent.stopPropagation()
+ $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
+ }
+ function handleFocus(sourceEvent) { emitField("focus", sourceEvent); $emit("open", { name: name, sourceEvent: sourceEvent }) }
+ function handleBlur(sourceEvent) { emitField("blur", sourceEvent); $emit("close", { name: name, sourceEvent: sourceEvent }) }
+ function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/switch.wrn b/.publish/ui/components/switch.wrn
index 6bfcc875..478a92fe 100644
--- a/.publish/ui/components/switch.wrn
+++ b/.publish/ui/components/switch.wrn
@@ -1,15 +1,39 @@
component Switch {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
size = "default"
color = "primary"
- label = "Switch"
+ id = ""
name = ""
+ label = "Switch"
+ hiddenLabel = false
+ placeholder = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
value = "on"
checked = false
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
disabled = false
+ required = false
class = ""
}
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: value, name: name, sourceEvent: sourceEvent }) }
+ function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/table.wrn b/.publish/ui/components/table.wrn
index 8ad3b313..1f5dc29f 100644
--- a/.publish/ui/components/table.wrn
+++ b/.publish/ui/components/table.wrn
@@ -1,5 +1,8 @@
component Table {
props {
+ @event sort = function
+ @event select = function
+ @event rowClick = function
size = "default"
color = "primary"
caption = "Table"
diff --git a/.publish/ui/components/textarea.wrn b/.publish/ui/components/textarea.wrn
index a75c8ce2..98cfc33f 100644
--- a/.publish/ui/components/textarea.wrn
+++ b/.publish/ui/components/textarea.wrn
@@ -1,17 +1,53 @@
component Textarea {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event invalid = function
size = "default"
color = "primary"
- label = "Textarea"
+ id = ""
name = ""
- value = ""
+ label = "Textarea"
+ hiddenLabel = false
placeholder = ""
+ value = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
rows = 5
+ resize = "vertical"
+ readonly = false
disabled = false
required = false
+ minlength = ""
+ maxlength = ""
class = ""
}
+ functions {
+ function emitField(nameEvent, sourceEvent) {
+ sourceEvent.stopPropagation()
+ $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
+ }
+ function handleInvalid(sourceEvent) {
+ $emit("invalid", { value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent })
+ }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/tooltip.wrn b/.publish/ui/components/tooltip.wrn
index abab9060..240da14c 100644
--- a/.publish/ui/components/tooltip.wrn
+++ b/.publish/ui/components/tooltip.wrn
@@ -1,5 +1,7 @@
component Tooltip {
props {
+ @event open = function
+ @event close = function
size = "default"
color = "primary"
title = "Tooltip"
diff --git a/.publish/ui/package.json b/.publish/ui/package.json
index c7b21836..eb4c0344 100644
--- a/.publish/ui/package.json
+++ b/.publish/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
- "version": "0.4.0",
+ "version": "0.5.0",
"type": "module",
"description": "@wrnexus/ui — part of the WrNexus framework.",
"license": "MIT",
@@ -26,7 +26,7 @@
"./ui.css": "./ui.css"
},
"dependencies": {
- "@wrnexus/core": "^0.4.0"
+ "@wrnexus/core": "^0.5.0"
},
"files": [
"dist",
diff --git a/.publish/ui/ui.css b/.publish/ui/ui.css
index c8077cd7..f02cd380 100644
--- a/.publish/ui/ui.css
+++ b/.publish/ui/ui.css
@@ -632,6 +632,449 @@
border: 1px solid var(--wire-color-border);
}
+/* --- Avatar -------------------------------------------------------------- */
+.wire-next--avatar {
+ display: inline-flex;
+ width: fit-content;
+ max-width: 100%;
+ align-items: center;
+}
+
+.wire-next--avatar-media {
+ gap: 0.8rem;
+}
+
+.wire-next__avatar-wrap {
+ --wire-avatar-size: 3rem;
+ --wire-avatar-color: var(--wire-color-primary);
+ position: relative;
+ display: inline-grid;
+ width: var(--wire-avatar-size);
+ height: var(--wire-avatar-size);
+ flex: none;
+ place-items: center;
+ border-radius: 999px;
+ outline: none;
+}
+
+.wire-next__avatar-wrap[data-size="xs"] {
+ --wire-avatar-size: 1.75rem;
+}
+.wire-next__avatar-wrap[data-size="sm"] {
+ --wire-avatar-size: 2.25rem;
+}
+.wire-next__avatar-wrap[data-size="md"],
+.wire-next__avatar-wrap[data-size="default"] {
+ --wire-avatar-size: 3rem;
+}
+.wire-next__avatar-wrap[data-size="lg"] {
+ --wire-avatar-size: 4rem;
+}
+.wire-next__avatar-wrap[data-size="xl"] {
+ --wire-avatar-size: 5rem;
+}
+
+.wire-next__avatar-wrap[data-color="secondary"] {
+ --wire-avatar-color: #737373;
+}
+.wire-next__avatar-wrap[data-color="success"] {
+ --wire-avatar-color: var(--wire-color-success);
+}
+.wire-next__avatar-wrap[data-color="info"] {
+ --wire-avatar-color: var(--wire-color-info);
+}
+.wire-next__avatar-wrap[data-color="danger"] {
+ --wire-avatar-color: var(--wire-color-danger);
+}
+.wire-next__avatar-wrap[data-color="warning"] {
+ --wire-avatar-color: var(--wire-color-warning);
+}
+.wire-next__avatar-wrap[data-color="light"] {
+ --wire-avatar-color: #f4f4f5;
+}
+.wire-next__avatar-wrap[data-color="dark"] {
+ --wire-avatar-color: #27272a;
+}
+
+.wire-next__avatar {
+ display: grid;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ place-items: center;
+ color: white;
+ border: 1px solid color-mix(in srgb, var(--wire-avatar-color) 58%, var(--wire-color-border));
+ border-radius: inherit;
+ background: var(--wire-avatar-color);
+ box-shadow:
+ 0 0 0 2px var(--wire-color-bg),
+ 0 5px 14px rgb(0 0 0 / 0.16);
+}
+
+.wire-next__avatar-wrap[data-shape="rounded"] {
+ border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72);
+}
+
+.wire-next__avatar-wrap[data-shape="square"] {
+ border-radius: 0;
+}
+
+.wire-next__avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.wire-next__avatar-initials {
+ font-size: calc(var(--wire-avatar-size) * 0.32);
+ font-weight: 750;
+ line-height: 1;
+ letter-spacing: -0.02em;
+}
+
+.wire-next__avatar-placeholder {
+ width: 54%;
+ height: 54%;
+ color: currentColor;
+ opacity: 0.72;
+}
+
+.wire-next__avatar-wrap[data-variant="soft"] .wire-next__avatar {
+ color: var(--wire-avatar-color);
+ border-color: transparent;
+ background: color-mix(in srgb, var(--wire-avatar-color) 15%, var(--wire-color-surface));
+ box-shadow: none;
+}
+
+.wire-next__avatar-wrap[data-variant="outline"] .wire-next__avatar {
+ color: var(--wire-avatar-color);
+ border-color: var(--wire-avatar-color);
+ background: transparent;
+ box-shadow: none;
+}
+
+.wire-next__avatar-wrap[data-variant="white"] .wire-next__avatar {
+ color: var(--wire-color-text);
+ border-color: var(--wire-color-border);
+ background: var(--wire-color-surface);
+ box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+}
+
+.wire-next__avatar-status {
+ position: absolute;
+ right: -0.04rem;
+ bottom: -0.04rem;
+ z-index: 2;
+ width: max(0.58rem, calc(var(--wire-avatar-size) * 0.24));
+ height: max(0.58rem, calc(var(--wire-avatar-size) * 0.24));
+ border: 2px solid var(--wire-color-bg);
+ border-radius: 999px;
+ background: var(--wire-color-muted);
+}
+
+.wire-next__avatar-wrap[data-status-position="top"] .wire-next__avatar-status {
+ top: -0.04rem;
+ bottom: auto;
+}
+
+.wire-next__avatar-status[data-status="online"],
+.wire-next__avatar-status[data-status="success"] {
+ background: #14cba8;
+}
+.wire-next__avatar-status[data-status="busy"],
+.wire-next__avatar-status[data-status="danger"] {
+ background: #fb5b68;
+}
+.wire-next__avatar-status[data-status="away"],
+.wire-next__avatar-status[data-status="warning"] {
+ background: #ffc400;
+}
+
+.wire-next__avatar-badge {
+ position: absolute;
+ right: -0.25rem;
+ bottom: -0.25rem;
+ z-index: 3;
+ display: grid;
+ width: max(1rem, calc(var(--wire-avatar-size) * 0.42));
+ height: max(1rem, calc(var(--wire-avatar-size) * 0.42));
+ place-items: center;
+ color: white;
+ border: 2px solid var(--wire-color-bg);
+ border-radius: 999px;
+ background: #27272a;
+ box-shadow: 0 4px 10px rgb(0 0 0 / 0.22);
+}
+
+.wire-next__avatar-badge > span {
+ width: 62%;
+ height: 62%;
+}
+
+.wire-next__avatar-badge--text {
+ font-size: calc(var(--wire-avatar-size) * 0.18);
+ font-weight: 800;
+}
+
+.wire-next__avatar-tooltip {
+ position: absolute;
+ left: 50%;
+ bottom: calc(100% + 0.65rem);
+ z-index: 20;
+ width: max-content;
+ max-width: 15rem;
+ padding: 0.4rem 0.6rem;
+ color: var(--wire-color-bg);
+ border-radius: 0.4rem;
+ background: var(--wire-color-text);
+ box-shadow: 0 8px 22px rgb(0 0 0 / 0.2);
+ font-size: 0.75rem;
+ font-weight: 650;
+ line-height: 1.25;
+ pointer-events: none;
+ opacity: 0;
+ transform: translate(-50%, 0.25rem);
+ transition:
+ opacity var(--wire-motion-fast) var(--wire-ease-standard),
+ transform var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next__avatar-tooltip::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ border: 0.3rem solid transparent;
+ border-top-color: var(--wire-color-text);
+ transform: translateX(-50%);
+}
+
+.wire-next__avatar-wrap:hover .wire-next__avatar-tooltip,
+.wire-next__avatar-wrap:focus-visible .wire-next__avatar-tooltip {
+ opacity: 1;
+ transform: translate(-50%, 0);
+}
+
+.wire-next__avatar-wrap:focus-visible {
+ outline: 2px solid var(--wire-avatar-color);
+ outline-offset: 4px;
+}
+
+.wire-next__avatar-copy {
+ display: grid;
+ min-width: 0;
+ gap: 0.15rem;
+}
+
+.wire-next__avatar-copy strong {
+ color: var(--wire-color-text);
+ font-size: 0.9rem;
+}
+
+.wire-next__avatar-copy > span {
+ overflow: hidden;
+ color: var(--wire-color-muted);
+ font-size: 0.78rem;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* --- Avatar group -------------------------------------------------------- */
+.wire-next--avatar-group {
+ --wire-avatar-group-size: 3rem;
+ position: relative;
+ display: inline-flex;
+ width: fit-content;
+ max-width: 100%;
+}
+
+.wire-next--avatar-group[data-size="xs"] {
+ --wire-avatar-group-size: 1.75rem;
+}
+.wire-next--avatar-group[data-size="sm"] {
+ --wire-avatar-group-size: 2.25rem;
+}
+.wire-next--avatar-group[data-size="md"],
+.wire-next--avatar-group[data-size="default"] {
+ --wire-avatar-group-size: 3rem;
+}
+.wire-next--avatar-group[data-size="lg"] {
+ --wire-avatar-group-size: 4rem;
+}
+.wire-next--avatar-group[data-size="xl"] {
+ --wire-avatar-group-size: 5rem;
+}
+
+.wire-next__avatar-group-members {
+ display: flex;
+ align-items: center;
+}
+
+.wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-member,
+.wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-overflow {
+ margin-left: calc(var(--wire-avatar-group-size) * -0.22);
+}
+
+.wire-next--avatar-group[data-layout="stack"] :first-child {
+ margin-left: 0;
+}
+
+.wire-next--avatar-group[data-layout="grid"] .wire-next__avatar-group-members {
+ display: grid;
+ grid-template-columns: repeat(var(--wire-avatar-group-columns), var(--wire-avatar-group-size));
+ gap: 0.65rem;
+}
+
+.wire-next__avatar-group-member,
+.wire-next__avatar-group-overflow {
+ --wire-avatar-group-color: var(--wire-color-primary);
+ position: relative;
+ display: inline-grid;
+ width: var(--wire-avatar-group-size);
+ height: var(--wire-avatar-group-size);
+ flex: none;
+ place-items: center;
+ border-radius: 999px;
+ outline: none;
+ transition:
+ z-index var(--wire-motion-fast),
+ transform var(--wire-motion-base) var(--wire-ease-emphasized);
+}
+
+.wire-next__avatar-group-member[data-color="secondary"] {
+ --wire-avatar-group-color: #737373;
+}
+.wire-next__avatar-group-member[data-color="success"] {
+ --wire-avatar-group-color: var(--wire-color-success);
+}
+.wire-next__avatar-group-member[data-color="info"] {
+ --wire-avatar-group-color: var(--wire-color-info);
+}
+.wire-next__avatar-group-member[data-color="warning"] {
+ --wire-avatar-group-color: var(--wire-color-warning);
+}
+.wire-next__avatar-group-member[data-color="danger"] {
+ --wire-avatar-group-color: var(--wire-color-danger);
+}
+
+.wire-next__avatar-group-member[data-shape="rounded"] {
+ border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72);
+}
+
+.wire-next__avatar-group-avatar,
+.wire-next__avatar-group-overflow-button {
+ display: grid;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ place-items: center;
+ color: white;
+ border: 2px solid var(--wire-avatar-group-ring);
+ border-radius: inherit;
+ background: var(--wire-avatar-group-color, var(--wire-color-primary));
+ box-shadow: 0 5px 14px rgb(0 0 0 / 0.16);
+ font: inherit;
+ font-size: calc(var(--wire-avatar-group-size) * 0.3);
+ font-weight: 800;
+}
+
+.wire-next__avatar-group-avatar img,
+.wire-next__avatar-group-menu-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.wire-next__avatar-group-overflow-button {
+ cursor: pointer;
+ color: var(--wire-color-text);
+ background: var(--wire-color-surface-2);
+}
+
+.wire-next__avatar-group-member:hover,
+.wire-next__avatar-group-member:focus-visible,
+.wire-next__avatar-group-overflow:focus-within {
+ z-index: 5;
+ transform: translateY(-3px);
+}
+
+.wire-next__avatar-group-member:focus-visible,
+.wire-next__avatar-group-overflow-button:focus-visible {
+ outline: 2px solid var(--wire-color-primary);
+ outline-offset: 3px;
+}
+
+.wire-next__avatar-group-tooltip {
+ position: absolute;
+ left: 50%;
+ bottom: calc(100% + 0.65rem);
+ z-index: 20;
+ width: max-content;
+ max-width: 14rem;
+ padding: 0.4rem 0.6rem;
+ color: var(--wire-color-bg);
+ border-radius: 0.4rem;
+ background: var(--wire-color-text);
+ box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
+ font-size: 0.75rem;
+ font-weight: 650;
+ pointer-events: none;
+ opacity: 0;
+ transform: translate(-50%, 0.25rem);
+ transition:
+ opacity var(--wire-motion-fast),
+ transform var(--wire-motion-fast);
+}
+
+.wire-next__avatar-group-member:hover .wire-next__avatar-group-tooltip,
+.wire-next__avatar-group-member:focus-visible .wire-next__avatar-group-tooltip {
+ opacity: 1;
+ transform: translate(-50%, 0);
+}
+
+.wire-next__avatar-group-menu {
+ position: absolute;
+ top: calc(100% + 0.65rem);
+ right: 0;
+ z-index: 30;
+ display: grid;
+ width: max-content;
+ min-width: 12rem;
+ gap: 0.25rem;
+ padding: 0.45rem;
+ color: var(--wire-color-text);
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm, 0.5rem);
+ background: var(--wire-color-surface);
+ box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
+}
+
+.wire-next__avatar-group-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ padding: 0.45rem 0.55rem;
+ border-radius: 0.4rem;
+ font-size: 0.82rem;
+}
+
+.wire-next__avatar-group-menu-item:hover {
+ background: var(--wire-color-surface-2);
+}
+
+.wire-next__avatar-group-menu-avatar {
+ display: grid;
+ width: 1.75rem;
+ height: 1.75rem;
+ overflow: hidden;
+ flex: none;
+ place-items: center;
+ border-radius: 999px;
+ background: var(--wire-color-surface-2);
+ font-size: 0.65rem;
+ font-weight: 800;
+}
+
/* --- Spinner -------------------------------------------------------------- */
.wire-spinner {
display: inline-block;
@@ -1842,13 +2285,165 @@
font-size: 0.75rem;
}
-.wire-next--accordion,
-.wire-next--collapse,
-.wire-next--card,
-.wire-next--alert,
+.wire-next--button-group {
+ display: inline-flex;
+ align-items: stretch;
+ width: fit-content;
+ max-width: 100%;
+ isolation: isolate;
+}
+
+.wire-next--button-group[data-orientation="vertical"] {
+ flex-direction: column;
+}
+
+.wire-next--button-group[data-attached="false"] {
+ gap: 0.5rem;
+}
+
+.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) {
+ position: relative;
+ margin: 0;
+}
+
+.wire-next--button-group[data-attached="true"] > .wire-action {
+ display: flex;
+}
+
+.wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) :is(.wire-btn) {
+ height: 100%;
+}
+
+.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
+ > :is(.wire-btn, .wire-action):not(:first-child) {
+ margin-inline-start: -1px;
+}
+
+.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
+ > .wire-btn:not(:first-child):not(:last-child),
+.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
+ > .wire-action:not(:first-child):not(:last-child)
+ > .wire-btn {
+ border-radius: 0;
+}
+
+.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
+ > .wire-btn:first-child:not(:last-child),
+.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
+ > .wire-action:first-child:not(:last-child)
+ > .wire-btn {
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+}
+
+.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
+ > .wire-btn:last-child:not(:first-child),
+.wire-next--button-group[data-attached="true"][data-orientation="horizontal"]
+ > .wire-action:last-child:not(:first-child)
+ > .wire-btn {
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+}
+
+.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
+ > :is(.wire-btn, .wire-action):not(:first-child) {
+ margin-top: -1px;
+}
+
+.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
+ > .wire-btn:not(:first-child):not(:last-child),
+.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
+ > .wire-action:not(:first-child):not(:last-child)
+ > .wire-btn {
+ border-radius: 0;
+}
+
+.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
+ > .wire-btn:first-child:not(:last-child),
+.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
+ > .wire-action:first-child:not(:last-child)
+ > .wire-btn {
+ border-end-start-radius: 0;
+ border-end-end-radius: 0;
+}
+
+.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
+ > .wire-btn:last-child:not(:first-child),
+.wire-next--button-group[data-attached="true"][data-orientation="vertical"]
+ > .wire-action:last-child:not(:first-child)
+ > .wire-btn {
+ border-start-start-radius: 0;
+ border-start-end-radius: 0;
+}
+
+.wire-next--button-group > :is(.wire-btn, .wire-action):focus-within,
+.wire-next--button-group > .wire-btn:focus-visible {
+ z-index: 2;
+}
+
+.wire-next--button-group[data-selectable="true"] > .wire-btn[data-selected="true"] {
+ z-index: 1;
+ border-color: var(--wire-component-color);
+ background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface));
+ color: var(--wire-component-color);
+}
+
+.wire-next--button-group[data-disabled="true"] {
+ cursor: not-allowed;
+ opacity: 0.6;
+}
+
+@media (max-width: 480px) {
+ .wire-next--button-group[data-responsive="true"] {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ }
+
+ .wire-next--button-group[data-responsive="true"] > :is(.wire-btn, .wire-action) {
+ width: 100%;
+ }
+
+ .wire-next--button-group[data-responsive="true"] > .wire-action > .wire-btn {
+ width: 100%;
+ }
+
+ .wire-next--button-group[data-responsive="true"][data-attached="true"]
+ > :is(.wire-btn, .wire-action) {
+ margin-top: -1px;
+ margin-inline-start: 0;
+ }
+
+ .wire-next--button-group[data-responsive="true"][data-attached="true"]
+ > :is(.wire-btn, .wire-action):first-child {
+ margin-top: 0;
+ }
+
+ .wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn,
+ .wire-next--button-group[data-responsive="true"][data-attached="true"]
+ > .wire-action
+ > .wire-btn {
+ border-radius: 0;
+ }
+
+ .wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:first-child,
+ .wire-next--button-group[data-responsive="true"][data-attached="true"]
+ > .wire-action:first-child
+ > .wire-btn {
+ border-start-start-radius: var(--wire-radius-sm);
+ border-start-end-radius: var(--wire-radius-sm);
+ }
+
+ .wire-next--button-group[data-responsive="true"][data-attached="true"] > .wire-btn:last-child,
+ .wire-next--button-group[data-responsive="true"][data-attached="true"]
+ > .wire-action:last-child
+ > .wire-btn {
+ border-end-start-radius: var(--wire-radius-sm);
+ border-end-end-radius: var(--wire-radius-sm);
+ }
+}
+
.wire-next--toast,
-.wire-next--chat-bubble,
-.wire-next--blockquote,
.wire-next--device-frame,
.wire-next--tree-view,
.wire-next--timeline,
@@ -1866,8 +2461,7 @@
.wire-next--file-upload,
.wire-next--toast-notifications,
.wire-next--clipboard,
-.wire-next--copy-markup,
-.wire-next--toggle-count {
+.wire-next--copy-markup {
display: grid;
gap: 0.75rem;
padding: 1rem;
@@ -1877,6 +2471,1988 @@
box-shadow: var(--wire-shadow-1);
}
+.wire-next--collapse {
+ --wire-collapse-color: var(--wire-component-color, var(--wire-color-primary));
+ display: grid;
+ width: 100%;
+ min-width: 0;
+ gap: 0.75rem;
+ color: var(--wire-color-text);
+}
+
+.wire-next--device-frame > header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.wire-next__device-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.4rem;
+}
+
+.wire-next__device-actions button {
+ min-height: 2.25rem;
+ padding-inline: 0.7rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface-2);
+ color: inherit;
+}
+
+.wire-next__device-shell {
+ overflow: hidden;
+ width: min(100%, 24rem);
+ min-height: 28rem;
+ margin-inline: auto;
+ border: 0.65rem solid var(--wire-color-text);
+ border-radius: 2rem;
+ background: var(--wire-color-background);
+ transition: width var(--wire-motion-normal) var(--wire-ease-standard);
+}
+
+.wire-next--device-frame[data-device="tablet"] .wire-next__device-shell {
+ width: min(100%, 42rem);
+}
+
+.wire-next--device-frame[data-device="desktop"] .wire-next__device-shell {
+ width: 100%;
+ border-width: 0.4rem;
+ border-radius: var(--wire-radius-md);
+}
+
+.wire-next--device-frame[data-orientation="landscape"] .wire-next__device-shell {
+ width: min(100%, 48rem);
+ min-height: 20rem;
+}
+
+.wire-next__device-shell :is(iframe, .wire-next__device-content) {
+ width: 100%;
+ min-height: inherit;
+ border: 0;
+}
+
+@media (max-width: 640px) {
+ .wire-next--device-frame > header {
+ align-items: stretch;
+ flex-direction: column;
+ }
+}
+
+.wire-next__collapse-item {
+ display: grid;
+ min-width: 0;
+ justify-items: start;
+ gap: 0;
+}
+
+.wire-next__collapse-trigger {
+ display: inline-flex;
+ min-height: 2.75rem;
+ align-items: center;
+ justify-content: center;
+ gap: 0.55rem;
+ padding: 0.7rem 1rem;
+ border: 1px solid var(--wire-collapse-color);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-collapse-color);
+ color: var(--wire-color-primary-contrast, #fff);
+ font: inherit;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+.wire-next__collapse-trigger:focus-visible {
+ outline: 2px solid var(--wire-collapse-color);
+ outline-offset: 3px;
+}
+
+.wire-next__collapse-trigger:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.wire-next__collapse-chevron {
+ transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next__collapse-item[data-open="true"] .wire-next__collapse-chevron {
+ transform: rotate(180deg);
+}
+
+.wire-next__collapse-panel {
+ width: min(100%, 42rem);
+ max-height: 0;
+ overflow: hidden;
+ margin-top: 0;
+ opacity: 0;
+ transition:
+ max-height 350ms var(--wire-ease-emphasized),
+ margin-top 300ms var(--wire-ease-emphasized),
+ opacity 200ms var(--wire-ease-standard);
+}
+
+.wire-next__collapse-panel[data-open="true"] {
+ max-height: 40rem;
+ margin-top: 0.75rem;
+ opacity: 1;
+}
+
+.wire-next__collapse-content {
+ display: grid;
+ overflow: hidden;
+ min-height: 0;
+ gap: 0.65rem;
+ padding: 1rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-md);
+ background: var(--wire-color-surface-raised, var(--wire-color-surface));
+}
+
+.wire-next__collapse-content h4,
+.wire-next__collapse-content p,
+.wire-next__collapse-preview {
+ margin: 0;
+}
+
+.wire-next__collapse-content nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+}
+
+.wire-next__collapse-content a {
+ color: var(--wire-collapse-color);
+ font-weight: 650;
+ text-decoration: none;
+}
+
+.wire-next--collapse[data-mode="inline"] .wire-next__collapse-item {
+ gap: 0;
+}
+
+.wire-next--collapse[data-mode="inline"] .wire-next__collapse-preview {
+ order: 1;
+ margin-bottom: 0.5rem;
+}
+
+.wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel {
+ order: 2;
+ width: 100%;
+}
+
+.wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel[data-open="true"] {
+ margin-top: 0;
+}
+
+.wire-next--collapse[data-mode="inline"] .wire-next__collapse-trigger {
+ order: 3;
+ margin-top: 0.5rem;
+ min-height: auto;
+ padding: 0;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ color: var(--wire-collapse-color);
+}
+
+.wire-next--collapse[data-mode="inline"] .wire-next__collapse-content {
+ padding: 0;
+ border: 0;
+ background: transparent;
+}
+
+.wire-next--collapse.wire-next--size-sm {
+ font-size: 0.875rem;
+}
+
+.wire-next--collapse.wire-next--size-lg {
+ font-size: 1.0625rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .wire-next__collapse-chevron,
+ .wire-next__collapse-panel {
+ transition: none;
+ }
+}
+
+.wire-next--chat-bubble {
+ --wire-chat-color: var(--wire-component-color, var(--wire-color-primary));
+ --wire-chat-padding: 1rem;
+ display: grid;
+ width: 100%;
+ min-width: 0;
+ gap: 1rem;
+ color: var(--wire-color-text);
+}
+
+.wire-next--chat-bubble.wire-next--size-sm {
+ --wire-chat-padding: 0.75rem;
+ font-size: 0.875rem;
+}
+
+.wire-next--chat-bubble.wire-next--size-lg {
+ --wire-chat-padding: 1.25rem;
+ font-size: 1.0625rem;
+}
+
+.wire-next__chat-header h3,
+.wire-next__chat-header p,
+.wire-next__chat-content h4,
+.wire-next__chat-content p {
+ margin: 0;
+}
+
+.wire-next__chat-header p {
+ margin-top: 0.35rem;
+ color: var(--wire-color-text-muted);
+}
+
+.wire-next__chat-thread {
+ display: grid;
+ min-width: 0;
+ gap: 1.25rem;
+}
+
+.wire-next__chat-message {
+ display: grid;
+ width: min(78%, 34rem);
+ min-width: 0;
+ justify-self: start;
+ gap: 0.4rem;
+}
+
+.wire-next__chat-message[data-direction="outgoing"] {
+ justify-self: end;
+}
+
+.wire-next--chat-bubble[data-one-sided="true"] .wire-next__chat-message {
+ justify-self: start;
+}
+
+.wire-next__chat-row {
+ display: flex;
+ min-width: 0;
+ align-items: flex-start;
+ gap: 0.75rem;
+}
+
+.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-row {
+ flex-direction: row-reverse;
+}
+
+.wire-next--chat-bubble[data-one-sided="true"]
+ .wire-next__chat-message[data-direction="outgoing"]
+ .wire-next__chat-row {
+ flex-direction: row;
+}
+
+.wire-next__chat-content {
+ min-width: 0;
+ padding: var(--wire-chat-padding);
+ border: 1px solid var(--wire-color-border);
+ border-radius: 1rem;
+ background: var(--wire-color-surface-raised, var(--wire-color-surface));
+ color: var(--wire-color-text);
+ cursor: pointer;
+}
+
+.wire-next__chat-content:focus-visible {
+ outline: 2px solid var(--wire-chat-color);
+ outline-offset: 2px;
+}
+
+.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content {
+ border-color: var(--wire-chat-color);
+ background: var(--wire-chat-color);
+ color: var(--wire-color-primary-contrast, #fff);
+}
+
+.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content :is(h4, p, li, span) {
+ color: inherit;
+}
+
+.wire-next__chat-content h4 {
+ margin-bottom: 0.65rem;
+ font-size: 1em;
+}
+
+.wire-next__chat-content p + p,
+.wire-next__chat-content p + nav {
+ margin-top: 0.75rem;
+}
+
+.wire-next__chat-content ul {
+ display: grid;
+ margin: 0.55rem 0 0;
+ padding-inline-start: 1.25rem;
+ gap: 0.35rem;
+}
+
+.wire-next__chat-content nav {
+ display: grid;
+ margin-top: 0.75rem;
+ gap: 0.3rem;
+}
+
+.wire-next__chat-content a {
+ color: var(--wire-chat-color);
+ font-weight: 650;
+ text-decoration: none;
+}
+
+.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content a {
+ color: inherit;
+ text-decoration: underline;
+}
+
+.wire-next__chat-avatar {
+ display: grid;
+ flex: 0 0 2.5rem;
+ width: 2.5rem;
+ min-height: 2.5rem;
+ overflow: hidden;
+ padding: 0;
+ border: 1px solid var(--wire-color-border);
+ border-radius: 999px;
+ background: var(--wire-color-surface-raised, var(--wire-color-surface));
+ color: var(--wire-color-text);
+ cursor: pointer;
+ place-items: center;
+}
+
+.wire-next__chat-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.wire-next__chat-avatar:focus-visible {
+ outline: 2px solid var(--wire-chat-color);
+ outline-offset: 2px;
+}
+
+.wire-next__chat-meta {
+ display: flex;
+ align-items: center;
+ gap: 0.3rem;
+ padding-inline: calc(2.5rem + 0.75rem);
+ color: var(--wire-color-text-muted);
+ font-size: 0.78em;
+}
+
+.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-meta {
+ justify-content: flex-end;
+}
+
+.wire-next__chat-meta[data-tone="danger"] {
+ color: var(--wire-color-danger);
+}
+
+.wire-next__chat-meta button {
+ padding: 0;
+ border: 0;
+ background: transparent;
+ color: inherit;
+ font: inherit;
+ font-weight: 700;
+ cursor: pointer;
+ text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+ .wire-next__chat-message {
+ width: min(92%, 34rem);
+ }
+
+ .wire-next__chat-avatar {
+ flex-basis: 2rem;
+ width: 2rem;
+ min-height: 2rem;
+ }
+
+ .wire-next__chat-meta {
+ padding-inline: 0;
+ }
+}
+
+.wire-next--card {
+ --wire-card-color: var(--wire-component-color, var(--wire-color-primary));
+ --wire-card-padding: 1.25rem;
+ display: block;
+ width: 100%;
+ color: var(--wire-color-text);
+}
+
+.wire-next--carousel {
+ --wire-carousel-color: var(--wire-component-color, var(--wire-color-primary));
+ display: grid;
+ width: 100%;
+ min-width: 0;
+ gap: 1rem;
+ color: var(--wire-color-text);
+}
+
+.wire-next__carousel-header h3,
+.wire-next__carousel-header p {
+ margin: 0;
+}
+
+.wire-next__carousel-header p {
+ margin-top: 0.35rem;
+ color: var(--wire-color-text-muted);
+}
+
+.wire-next__carousel-layout {
+ display: flex;
+ min-width: 0;
+ gap: 0.75rem;
+}
+
+.wire-next__carousel-main {
+ display: grid;
+ flex: 1;
+ min-width: 0;
+ gap: 0.75rem;
+}
+
+.wire-next__carousel-stage {
+ position: relative;
+ min-width: 0;
+}
+
+.wire-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));
+ outline: none;
+}
+
+.wire-next__carousel-viewport:focus-visible {
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-carousel-color) 30%, transparent);
+}
+
+.wire-next__carousel-track {
+ display: flex;
+ align-items: stretch;
+ gap: var(--wire-carousel-gap);
+ transform: translateX(
+ calc(
+ var(--wire-carousel-index) * -1 *
+ (
+ (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
+ var(--wire-carousel-per-view) + var(--wire-carousel-gap)
+ )
+ )
+ );
+ transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
+ translate: var(--wire-carousel-drag-offset, 0) 0;
+ will-change: transform;
+}
+
+.wire-next--carousel[data-dragging="true"] .wire-next__carousel-track {
+ transition: none;
+}
+
+.wire-next--carousel[data-rtl="true"] .wire-next__carousel-track {
+ transform: translateX(
+ calc(
+ var(--wire-carousel-index) *
+ (
+ (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
+ var(--wire-carousel-per-view) + var(--wire-carousel-gap)
+ )
+ )
+ );
+}
+
+.wire-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)
+ );
+ overflow: hidden;
+ min-width: 0;
+ min-height: 20rem;
+ place-items: center;
+ background: var(--wire-color-surface-raised, var(--wire-color-surface));
+}
+
+.wire-next--carousel[data-auto-height="true"] .wire-next__carousel-slide {
+ min-height: 0;
+}
+
+.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide {
+ flex-basis: min(78%, 32rem);
+}
+
+.wire-next--carousel[data-centered="true"] .wire-next__carousel-track {
+ box-sizing: border-box;
+ transform: translateX(
+ calc(var(--wire-carousel-index) * -1 * (min(78%, 32rem) + var(--wire-carousel-gap)))
+ );
+}
+
+.wire-next--carousel[data-centered="true"] .wire-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 {
+ margin-inline-end: calc((100% - min(78%, 32rem)) / 2);
+}
+
+.wire-next--carousel[data-centered="true"][data-rtl="true"] .wire-next__carousel-track {
+ transform: translateX(
+ calc(var(--wire-carousel-index) * (min(78%, 32rem) + var(--wire-carousel-gap)))
+ );
+}
+
+.wire-next__carousel-slide > img {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ inset: 0;
+}
+
+.wire-next__carousel-slide-content {
+ position: relative;
+ z-index: 1;
+ width: min(100%, 38rem);
+ padding: clamp(2rem, 8vw, 5rem);
+ text-align: center;
+}
+
+.wire-next__carousel-slide-content h4,
+.wire-next__carousel-slide-content p {
+ margin: 0;
+}
+
+.wire-next__carousel-slide-content h4 {
+ font-size: clamp(1.5rem, 4vw, 2.4rem);
+}
+
+.wire-next__carousel-slide-content p {
+ margin-top: 0.65rem;
+ color: var(--wire-color-text-muted);
+}
+
+.wire-next__carousel-control {
+ position: absolute;
+ z-index: 3;
+ top: 50%;
+ display: grid;
+ width: 2.75rem;
+ min-height: 2.75rem;
+ padding: 0;
+ border: 1px solid color-mix(in srgb, var(--wire-color-border) 70%, transparent);
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--wire-color-text) 76%, transparent);
+ color: var(--wire-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);
+ outline-offset: 2px;
+}
+
+.wire-next__carousel-control:disabled {
+ cursor: not-allowed;
+ opacity: 0.35;
+}
+
+.wire-next__carousel-control--previous {
+ left: 1rem;
+}
+
+.wire-next__carousel-control--next {
+ right: 1rem;
+}
+
+.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--previous {
+ right: 1rem;
+ left: auto;
+}
+
+.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--next {
+ right: auto;
+ left: 1rem;
+}
+
+.wire-next__carousel-pagination {
+ display: flex;
+ min-height: 1.5rem;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+}
+
+.wire-next__carousel-pagination button {
+ width: 0.65rem;
+ min-height: 0.65rem;
+ padding: 0;
+ border: 1px solid var(--wire-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);
+}
+
+.wire-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);
+ font-weight: 700;
+ transform: translateX(-50%);
+}
+
+.wire-next__carousel-thumbnails {
+ display: flex;
+ overflow: auto;
+ gap: 0.55rem;
+ scrollbar-width: thin;
+}
+
+.wire-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);
+ 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);
+}
+
+.wire-next__carousel-thumbnails img {
+ width: 100%;
+ height: 4rem;
+ object-fit: cover;
+}
+
+.wire-next__carousel-thumbnails span {
+ padding: 0.5rem;
+}
+
+.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
+ flex: 0 0 9rem;
+ flex-direction: column;
+ max-height: 28rem;
+}
+
+.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
+ flex-basis: 7.5rem;
+ width: 100%;
+}
+
+.wire-next--carousel[data-draggable="true"] .wire-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 {
+ cursor: grabbing;
+}
+
+.wire-next--carousel[data-draggable="true"] img,
+.wire-next--carousel[data-draggable="true"] a {
+ -webkit-user-drag: none;
+}
+
+.wire-next--carousel[data-snap="true"] .wire-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)
+ );
+ display: grid;
+ width: 100%;
+ min-width: 100%;
+ box-sizing: content-box;
+ grid-auto-columns: var(--wire-carousel-snap-slide);
+ grid-auto-flow: column;
+ padding-inline: calc((100% - var(--wire-carousel-snap-slide)) / 2);
+ transform: none;
+}
+
+.wire-next--carousel[data-snap="true"] .wire-next__carousel-slide {
+ width: auto;
+ min-width: 0;
+ scroll-snap-align: center;
+}
+
+@media (max-width: 640px) {
+ .wire-next__carousel-slide {
+ flex-basis: 100%;
+ min-height: 16rem;
+ }
+
+ .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-layout {
+ flex-direction: column-reverse;
+ }
+
+ .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
+ flex: auto;
+ flex-direction: row;
+ max-height: none;
+ }
+
+ .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
+ flex-basis: 8.5rem;
+ width: auto;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .wire-next__carousel-track {
+ transition-duration: 0.01ms;
+ }
+}
+
+.wire-next--card[data-size="sm"] {
+ --wire-card-padding: 0.85rem;
+}
+
+.wire-next--card[data-size="lg"] {
+ --wire-card-padding: 1.75rem;
+}
+
+.wire-next__card-panel {
+ position: relative;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ width: 100%;
+ min-width: 0;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-md);
+ background: var(--wire-color-surface);
+ box-shadow: var(--wire-shadow-1);
+ transition:
+ transform var(--wire-motion-base) var(--wire-ease-emphasized),
+ border-color var(--wire-motion-base) ease,
+ box-shadow var(--wire-motion-base) var(--wire-ease-emphasized);
+}
+
+.wire-next--card[data-variant="top-border"] > .wire-next__card-panel,
+.wire-next--card[data-variant="accent"] > .wire-next__card-panel {
+ border-top: 4px solid var(--wire-card-color);
+}
+
+.wire-next--card[data-hover="raise"] > .wire-next__card-panel:hover {
+ border-color: color-mix(in srgb, var(--wire-card-color) 38%, var(--wire-color-border));
+ box-shadow: var(--wire-shadow-3);
+ transform: translateY(-4px);
+}
+
+.wire-next__card-header,
+.wire-next__card-footer {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.85rem var(--wire-card-padding);
+ background: var(--wire-color-surface-2);
+ color: var(--wire-color-muted);
+ font-size: 0.875rem;
+}
+
+.wire-next__card-header {
+ border-bottom: 1px solid var(--wire-color-border);
+}
+
+.wire-next__card-footer {
+ margin-top: auto;
+ border-top: 1px solid var(--wire-color-border);
+}
+
+.wire-next__card-header-actions {
+ display: inline-flex;
+ gap: 0.2rem;
+ align-items: center;
+}
+
+.wire-next__card-header-actions button {
+ display: inline-grid;
+ width: 2rem;
+ height: 2rem;
+ border: 0;
+ border-radius: var(--wire-radius-sm);
+ background: transparent;
+ color: var(--wire-color-muted);
+ cursor: pointer;
+ place-items: center;
+}
+
+.wire-next__card-header-actions button:hover {
+ background: color-mix(in srgb, var(--wire-card-color) 12%, transparent);
+ color: var(--wire-card-color);
+}
+
+.wire-next__card-header-actions button:focus-visible {
+ outline: 2px solid var(--wire-card-color);
+ outline-offset: 1px;
+}
+
+.wire-next__card-media {
+ position: relative;
+ overflow: hidden;
+ min-height: 10rem;
+ background: var(--wire-color-surface-2);
+}
+
+.wire-next__card-media > img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ min-height: inherit;
+ object-fit: cover;
+ transition: transform 420ms var(--wire-ease-emphasized);
+}
+
+.wire-next--card[data-hover="image"] .wire-next__card-panel:hover .wire-next__card-media > img {
+ transform: scale(1.06);
+}
+
+.wire-next__card-media--overlay {
+ aspect-ratio: 16 / 9;
+ min-height: 18rem;
+}
+
+.wire-next__card-media--overlay > img {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.wire-next__card-overlay {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.55rem;
+ padding: clamp(1.25rem, 4vw, 2rem);
+ background: linear-gradient(
+ 180deg,
+ rgb(2 6 23 / 0.9) 0%,
+ rgb(2 6 23 / 0.68) 38%,
+ rgb(2 6 23 / 0.34) 58%,
+ rgb(2 6 23 / 0.86) 100%
+ );
+ color: white;
+ text-shadow: 0 1px 2px rgb(0 0 0 / 0.42);
+}
+
+.wire-next__card-overlay h3 {
+ color: white;
+ font-size: clamp(1.1rem, 2.2vw, 1.35rem);
+}
+
+.wire-next__card-overlay p {
+ max-width: 48rem;
+ color: #fff;
+ font-weight: 500;
+ line-height: 1.6;
+ text-shadow:
+ 0 1px 2px rgb(0 0 0 / 0.9),
+ 0 2px 8px rgb(0 0 0 / 0.62);
+}
+
+.wire-next__card-overlay .wire-next__card-subtitle {
+ color: rgb(255 255 255 / 0.78);
+}
+
+.wire-next__card-overlay small {
+ margin-top: auto;
+ color: rgb(255 255 255 / 0.88);
+ font-weight: 600;
+ text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
+}
+
+.wire-next__card-body {
+ display: grid;
+ gap: 0.65rem;
+ min-width: 0;
+ padding: var(--wire-card-padding);
+}
+
+.wire-next__card-body[data-scrollable="true"] {
+ max-height: var(--wire-card-max-height);
+ overflow: auto;
+ overscroll-behavior: contain;
+ scrollbar-color: var(--wire-card-color) transparent;
+ scrollbar-width: thin;
+}
+
+.wire-next__card-body h3,
+.wire-next__card-body p,
+.wire-next__card-overlay h3,
+.wire-next__card-overlay p {
+ margin: 0;
+}
+
+.wire-next__card-body p {
+ color: var(--wire-color-muted);
+ line-height: 1.65;
+}
+
+.wire-next__card-subtitle {
+ color: var(--wire-color-muted);
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
+
+.wire-next__card-action {
+ display: inline-flex;
+ gap: 0.25rem;
+ align-items: center;
+ width: fit-content;
+ margin-top: 0.2rem;
+ color: var(--wire-card-color);
+ font-weight: 700;
+ text-decoration: none;
+}
+
+.wire-next__card-action:hover {
+ text-decoration: underline;
+ text-underline-offset: 0.2em;
+}
+
+.wire-next__card-navigation {
+ background: var(--wire-color-surface-2);
+}
+
+.wire-next__card-tabs {
+ display: flex;
+ overflow-x: auto;
+}
+
+.wire-next__card-tabs button {
+ min-height: 3rem;
+ flex: 1 0 auto;
+ padding-inline: 1rem;
+ border: 0;
+ border-bottom: 2px solid transparent;
+ background: transparent;
+ color: var(--wire-color-muted);
+ cursor: pointer;
+ font-weight: 700;
+}
+
+.wire-next__card-tabs button[data-active="true"] {
+ border-color: var(--wire-card-color);
+ color: var(--wire-color-text);
+}
+
+.wire-next__card-navigation-select {
+ display: none;
+ width: calc(100% - 2rem);
+ min-height: 2.75rem;
+ margin: 1rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface);
+ color: var(--wire-color-text);
+}
+
+.wire-next__card-alert {
+ display: flex;
+ gap: 0.35rem;
+ padding: 0.8rem var(--wire-card-padding);
+ background: color-mix(in srgb, var(--wire-card-color) 14%, var(--wire-color-surface-2));
+ color: var(--wire-color-text);
+ font-size: 0.875rem;
+}
+
+.wire-next__card-empty {
+ display: grid;
+ min-height: 12rem;
+ color: var(--wire-color-muted);
+ place-content: center;
+ place-items: center;
+}
+
+.wire-next__card-empty > span {
+ margin-bottom: 0.75rem;
+ font-size: 2.25rem;
+}
+
+.wire-next--card[data-align="center"] .wire-next__card-body {
+ text-align: center;
+ place-items: center;
+}
+
+.wire-next--card[data-layout="horizontal"] > .wire-next__card-panel {
+ display: grid;
+ grid-template-columns: minmax(12rem, 42%) minmax(0, 1fr);
+}
+
+.wire-next--card[data-layout="horizontal"] .wire-next__card-media {
+ grid-row: 1 / span 4;
+ min-height: 100%;
+}
+
+.wire-next__card-group {
+ display: grid;
+ grid-template-columns: repeat(var(--wire-card-columns, 3), minmax(0, 1fr));
+}
+
+.wire-next__card-group > .wire-next__card-panel {
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.wire-next__card-group > .wire-next__card-panel:not(:first-child) {
+ margin-inline-start: -1px;
+}
+
+.wire-next__card-group > .wire-next__card-panel:first-child {
+ border-start-start-radius: var(--wire-radius-md);
+ border-end-start-radius: var(--wire-radius-md);
+}
+
+.wire-next__card-group > .wire-next__card-panel:last-child {
+ border-start-end-radius: var(--wire-radius-md);
+ border-end-end-radius: var(--wire-radius-md);
+}
+
+@media (max-width: 768px) {
+ .wire-next--card[data-layout="horizontal"] > .wire-next__card-panel {
+ display: flex;
+ }
+
+ .wire-next--card[data-layout="horizontal"] .wire-next__card-media {
+ min-height: 12rem;
+ }
+
+ .wire-next__card-group {
+ grid-template-columns: 1fr;
+ }
+
+ .wire-next__card-group > .wire-next__card-panel:not(:first-child) {
+ margin-top: -1px;
+ margin-inline-start: 0;
+ }
+
+ .wire-next__card-group > .wire-next__card-panel {
+ border-radius: 0;
+ }
+
+ .wire-next__card-group > .wire-next__card-panel:first-child {
+ border-start-start-radius: var(--wire-radius-md);
+ border-start-end-radius: var(--wire-radius-md);
+ }
+
+ .wire-next__card-group > .wire-next__card-panel:last-child {
+ border-end-start-radius: var(--wire-radius-md);
+ border-end-end-radius: var(--wire-radius-md);
+ }
+}
+
+@media (max-width: 480px) {
+ .wire-next__card-media--overlay {
+ aspect-ratio: 4 / 3;
+ min-height: 16rem;
+ }
+
+ .wire-next__card-tabs:has(+ .wire-next__card-navigation-select) {
+ display: none;
+ }
+
+ .wire-next__card-navigation-select {
+ display: block;
+ }
+}
+
+.wire-next--blockquote {
+ --wire-blockquote-color: var(--wire-component-color, var(--wire-color-primary));
+ --wire-blockquote-font-size: 1.125rem;
+ --wire-blockquote-mark-size: 4.25rem;
+ display: grid;
+ gap: 1.25rem;
+ width: 100%;
+ color: var(--wire-color-text);
+ text-align: left;
+}
+
+.wire-next--blockquote[data-size="xs"] {
+ --wire-blockquote-font-size: 0.875rem;
+ --wire-blockquote-mark-size: 3rem;
+}
+
+.wire-next--blockquote[data-size="sm"] {
+ --wire-blockquote-font-size: 1rem;
+ --wire-blockquote-mark-size: 3.5rem;
+}
+
+.wire-next--blockquote[data-size="md"],
+.wire-next--blockquote[data-size="default"] {
+ --wire-blockquote-font-size: 1.125rem;
+}
+
+.wire-next--blockquote[data-size="lg"] {
+ --wire-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem);
+ --wire-blockquote-mark-size: 5rem;
+}
+
+.wire-next--blockquote[data-size="xl"] {
+ --wire-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem);
+ --wire-blockquote-mark-size: 5.75rem;
+}
+
+.wire-next--blockquote > blockquote {
+ position: relative;
+ display: block;
+ min-width: 0;
+ margin: 0;
+ padding-top: calc(var(--wire-blockquote-mark-size) * 0.78);
+}
+
+.wire-next__blockquote-mark {
+ position: absolute;
+ top: 0;
+ inset-inline: 0;
+ display: block;
+ width: 100%;
+ color: color-mix(in srgb, var(--wire-blockquote-color) 28%, var(--wire-color-text));
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: var(--wire-blockquote-mark-size);
+ font-style: normal;
+ font-weight: 700;
+ line-height: 0.8;
+ text-align: start;
+ user-select: none;
+}
+
+.wire-next__blockquote-copy {
+ min-width: 0;
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: var(--wire-blockquote-font-size);
+ line-height: 1.55;
+ text-wrap: pretty;
+}
+
+.wire-next--blockquote[data-italic="true"] .wire-next__blockquote-copy {
+ font-style: italic;
+}
+
+.wire-next__blockquote-copy > :first-child {
+ margin-top: 0;
+}
+
+.wire-next__blockquote-copy > :last-child {
+ margin-bottom: 0;
+}
+
+.wire-next__blockquote-citation {
+ display: inline-flex;
+ gap: 0.75rem;
+ align-items: center;
+ width: fit-content;
+ margin-inline-start: 0;
+ color: var(--wire-color-muted);
+ font-size: 0.875rem;
+ line-height: 1.35;
+}
+
+.wire-next__blockquote-avatar {
+ width: 2.5rem;
+ height: 2.5rem;
+ flex: 0 0 auto;
+ border: 2px solid color-mix(in srgb, var(--wire-blockquote-color) 35%, transparent);
+ border-radius: 999px;
+ object-fit: cover;
+}
+
+.wire-next__blockquote-attribution {
+ display: grid;
+ gap: 0.15rem;
+}
+
+.wire-next__blockquote-attribution cite {
+ color: var(--wire-color-text);
+ font-style: normal;
+ font-weight: 700;
+}
+
+.wire-next__blockquote-attribution a {
+ color: inherit;
+ text-decoration-color: color-mix(in srgb, var(--wire-blockquote-color) 55%, transparent);
+ text-underline-offset: 0.2em;
+}
+
+.wire-next__blockquote-attribution a:hover {
+ color: var(--wire-blockquote-color);
+}
+
+.wire-next--blockquote[data-align="center"] {
+ text-align: center;
+}
+
+.wire-next--blockquote[data-align="right"],
+.wire-next--blockquote[data-align="end"] {
+ text-align: right;
+}
+
+.wire-next--blockquote[data-align="center"] > blockquote,
+.wire-next--blockquote[data-align="right"] > blockquote,
+.wire-next--blockquote[data-align="end"] > blockquote {
+ text-align: inherit;
+}
+
+.wire-next--blockquote[data-align="center"] .wire-next__blockquote-mark {
+ text-align: center;
+}
+
+.wire-next--blockquote[data-align="right"] .wire-next__blockquote-mark,
+.wire-next--blockquote[data-align="end"] .wire-next__blockquote-mark {
+ text-align: end;
+}
+
+.wire-next--blockquote[data-align="center"] .wire-next__blockquote-citation {
+ margin-inline: auto;
+}
+
+.wire-next--blockquote[data-align="right"] .wire-next__blockquote-citation,
+.wire-next--blockquote[data-align="end"] .wire-next__blockquote-citation {
+ margin-inline-start: auto;
+}
+
+.wire-next--blockquote[data-variant="bordered"],
+.wire-next--blockquote[data-variant="border"],
+.wire-next--blockquote[data-variant="left-border"] {
+ padding-inline-start: 1.5rem;
+ border-inline-start: 4px solid var(--wire-blockquote-color);
+}
+
+.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-mark,
+.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-mark,
+.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-mark {
+ display: none;
+}
+
+.wire-next--blockquote[data-variant="bordered"] > blockquote,
+.wire-next--blockquote[data-variant="border"] > blockquote,
+.wire-next--blockquote[data-variant="left-border"] > blockquote {
+ display: block;
+ padding-top: 0;
+}
+
+.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-copy,
+.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-copy,
+.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-copy {
+ padding-top: 0;
+}
+
+.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-citation,
+.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-citation,
+.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-citation {
+ margin-inline-start: 0;
+}
+
+@media (max-width: 480px) {
+ .wire-next--blockquote {
+ --wire-blockquote-mark-size: 3.25rem;
+ --wire-blockquote-font-size: 1rem;
+ gap: 1rem;
+ }
+
+ .wire-next--blockquote[data-size="lg"],
+ .wire-next--blockquote[data-size="xl"] {
+ --wire-blockquote-font-size: 1.25rem;
+ }
+
+ .wire-next__blockquote-citation {
+ margin-inline-start: 0;
+ }
+}
+
+.wire-next--alert {
+ --wire-alert-color: var(--wire-component-color);
+ --wire-alert-soft: color-mix(in srgb, var(--wire-alert-color) 16%, var(--wire-color-surface));
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ gap: 0.8rem;
+ width: 100%;
+ padding: 1rem;
+ border: 1px solid transparent;
+ border-radius: var(--wire-radius, 0.75rem);
+ color: var(--wire-color-text);
+}
+
+.wire-next--alert[data-radius="none"] {
+ border-radius: 0;
+}
+
+.wire-next--alert[data-radius="sm"] {
+ border-radius: var(--wire-radius-sm, 0.375rem);
+}
+
+.wire-next--alert[data-radius="lg"] {
+ border-radius: calc(var(--wire-radius, 0.75rem) * 1.35);
+}
+
+.wire-next--alert[data-radius="xl"] {
+ border-radius: calc(var(--wire-radius, 0.75rem) * 1.75);
+}
+
+.wire-next--alert[data-shadow="none"] {
+ box-shadow: none;
+}
+
+.wire-next--alert[data-shadow="sm"] {
+ box-shadow: 0 6px 16px color-mix(in srgb, #000 14%, transparent);
+}
+
+.wire-next--alert[data-shadow="md"] {
+ box-shadow:
+ 0 2px 6px color-mix(in srgb, #000 10%, transparent),
+ 0 12px 28px color-mix(in srgb, #000 18%, transparent);
+}
+
+.wire-next--alert[data-shadow="lg"] {
+ box-shadow:
+ 0 4px 10px color-mix(in srgb, #000 12%, transparent),
+ 0 20px 48px color-mix(in srgb, #000 24%, transparent);
+}
+
+.wire-next--alert[data-color="secondary"] {
+ --wire-alert-color: #737373;
+}
+
+.wire-next--alert[data-color="success"] {
+ --wire-alert-color: #0f9f8f;
+}
+
+.wire-next--alert[data-color="danger"] {
+ --wire-alert-color: #dc3545;
+}
+
+.wire-next--alert[data-color="warning"] {
+ --wire-alert-color: #eab308;
+}
+
+.wire-next--alert[data-color="info"] {
+ --wire-alert-color: #2563eb;
+}
+
+.wire-next--alert[data-color="dark"] {
+ --wire-alert-color: #27272a;
+}
+
+.wire-next--alert[data-color="light"] {
+ --wire-alert-color: #f4f4f5;
+}
+
+.wire-next--alert-soft {
+ border-color: color-mix(in srgb, var(--wire-alert-color) 45%, var(--wire-color-border));
+ background: var(--wire-alert-soft);
+}
+
+.wire-next--alert-soft .wire-next__alert-title,
+.wire-next--alert-soft .wire-next__alert-icon,
+.wire-next--alert-soft .wire-next__alert-actions a {
+ color: var(--wire-alert-color);
+}
+
+.wire-next--alert-solid {
+ border-color: var(--wire-alert-color);
+ background: var(--wire-alert-color);
+ color: white;
+}
+
+.wire-next--alert.wire-next--alert-solid
+ :is(
+ .wire-next__alert-title,
+ .wire-next__alert-body > p,
+ .wire-next__alert-body li,
+ .wire-next__alert-actions a,
+ .wire-next__alert-icon
+ ) {
+ color: currentColor;
+}
+
+.wire-next--alert-solid[data-color="light"] {
+ color: #18181b;
+}
+
+.wire-next--alert-solid[data-color="warning"] {
+ color: #18181b;
+}
+
+.wire-next--alert-bordered {
+ border-color: var(--wire-alert-color);
+ background: var(--wire-color-surface);
+}
+
+.wire-next--alert-bordered .wire-next__alert-title,
+.wire-next--alert-bordered .wire-next__alert-icon,
+.wire-next--alert-bordered .wire-next__alert-actions a {
+ color: var(--wire-alert-color);
+}
+
+.wire-next--alert-accent {
+ border-color: color-mix(in srgb, var(--wire-alert-color) 35%, var(--wire-color-border));
+ border-left: 4px solid var(--wire-alert-color);
+ background: var(--wire-alert-soft);
+}
+
+.wire-next--alert-accent .wire-next__alert-title,
+.wire-next--alert-accent .wire-next__alert-icon,
+.wire-next--alert-accent .wire-next__alert-actions a {
+ color: var(--wire-alert-color);
+}
+
+.wire-next--alert-compact {
+ padding: 0.75rem 0.9rem;
+}
+
+.wire-next--alert-compact:not(:has(.wire-next__alert-icon)):not(:has(.wire-next__alert-dismiss)) {
+ grid-template-columns: minmax(0, 1fr);
+}
+
+.wire-next--alert-compact .wire-next__alert-body {
+ display: block;
+}
+
+.wire-next--alert-compact .wire-next__alert-title {
+ margin-right: 0.25rem;
+}
+
+.wire-next--alert-compact .wire-next__alert-body > p {
+ display: inline;
+}
+
+.wire-next__alert-icon {
+ display: inline-grid;
+ width: 1.25rem;
+ height: 1.25rem;
+ place-items: center;
+ margin-top: 0.05rem;
+ color: var(--wire-alert-color);
+}
+
+.wire-next__alert-icon > span {
+ width: 1rem;
+ height: 1rem;
+}
+
+.wire-next__alert-body {
+ display: grid;
+ min-width: 0;
+ gap: 0.35rem;
+}
+
+.wire-next__alert-title {
+ font-size: 0.88rem;
+ line-height: 1.45;
+}
+
+.wire-next__alert-body > p,
+.wire-next__alert-body li {
+ color: inherit;
+ font-size: 0.8rem;
+ line-height: 1.55;
+}
+
+.wire-next__alert-body > ul {
+ display: grid;
+ gap: 0.25rem;
+ margin: 0.15rem 0 0;
+ padding-left: 1.25rem;
+}
+
+.wire-next__alert-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem 1rem;
+ margin-top: 0.35rem;
+}
+
+.wire-next__alert-actions a {
+ color: var(--wire-alert-color);
+ font-size: 0.78rem;
+ font-weight: 700;
+ text-decoration: none;
+}
+
+.wire-next__alert-actions a:hover {
+ text-decoration: underline;
+}
+
+.wire-next__alert-actions a[data-variant="action"] {
+ padding: 0.35rem 0.6rem;
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-alert-color);
+ color: white;
+ text-decoration: none;
+}
+
+.wire-next__alert-dismiss {
+ display: inline-grid;
+ width: 1.75rem;
+ height: 1.75rem;
+ place-items: center;
+ padding: 0;
+ border: 0;
+ border-radius: var(--wire-radius-sm);
+ background: transparent;
+ color: currentColor;
+ cursor: pointer;
+}
+
+.wire-next__alert-dismiss:hover {
+ background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.wire-next__alert-dismiss:focus-visible {
+ outline: 2px solid currentColor;
+ outline-offset: 2px;
+}
+
+@media (max-width: 36rem) {
+ .wire-next--alert {
+ grid-template-columns: auto minmax(0, 1fr);
+ }
+
+ .wire-next__alert-dismiss {
+ grid-column: 2;
+ grid-row: 1;
+ justify-self: end;
+ }
+}
+
+.wire-next--accordion {
+ --wire-accordion-accent: var(--wire-component-color);
+ display: grid;
+ width: 100%;
+ color: var(--wire-color-text);
+}
+
+.wire-next__accordion-item {
+ min-width: 0;
+}
+
+.wire-next__accordion-heading {
+ margin: 0;
+ font: inherit;
+}
+
+.wire-next__accordion-heading > button {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.85rem 0;
+ border: 0;
+ background: transparent;
+ color: var(--wire-color-text);
+ font: inherit;
+ font-size: 0.88rem;
+ font-weight: 700;
+ text-align: left;
+ cursor: pointer;
+}
+
+.wire-next__accordion-heading > button > span:not(.wire-next__accordion-indicator) {
+ min-width: 0;
+ flex: 1;
+}
+
+.wire-next__accordion-heading > button:focus-visible {
+ border-radius: var(--wire-radius-sm);
+ outline: 2px solid var(--wire-accordion-accent);
+ outline-offset: 2px;
+}
+
+.wire-next__accordion-heading > button:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.wire-next__accordion-indicator {
+ display: inline-flex;
+ width: 1rem;
+ height: 1rem;
+ flex: 0 0 1rem;
+ align-items: center;
+ justify-content: center;
+ color: var(--wire-color-muted);
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 1;
+ transition:
+ color var(--wire-motion-fast) var(--wire-ease-standard),
+ transform var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next__accordion-indicator > span {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.wire-next__accordion-indicator > [class*="icon-["] {
+ width: 0.95rem;
+ height: 0.95rem;
+}
+
+.wire-next__accordion-item[data-open="true"]
+ > .wire-next__accordion-heading
+ .wire-next__accordion-indicator {
+ color: var(--wire-accordion-accent);
+ transform: rotate(45deg);
+}
+
+.wire-next--accordion[data-indicator="chevron"]
+ .wire-next__accordion-item[data-open="true"]
+ > .wire-next__accordion-heading
+ .wire-next__accordion-indicator {
+ transform: rotate(180deg);
+}
+
+.wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading > button {
+ color: var(--wire-accordion-accent);
+}
+
+.wire-next__accordion-panel {
+ display: grid;
+ grid-template-rows: 0fr;
+ opacity: 0;
+ transition:
+ grid-template-rows var(--wire-motion-base) var(--wire-ease-standard),
+ opacity var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next__accordion-item[data-open="true"] > .wire-next__accordion-panel {
+ grid-template-rows: 1fr;
+ opacity: 1;
+}
+
+.wire-next__accordion-panel > div {
+ overflow: hidden;
+}
+
+.wire-next__accordion-content {
+ padding: 0 0 1rem 1.75rem;
+ color: var(--wire-color-muted);
+ font-size: 0.86rem;
+ line-height: 1.65;
+}
+
+.wire-next__accordion-content > p {
+ color: inherit;
+}
+
+.wire-next__accordion-content-italic > p::first-line {
+ font-style: italic;
+}
+
+.wire-next__accordion-nested {
+ display: grid;
+ margin-top: 0.5rem;
+}
+
+.wire-next__accordion-nested .wire-next__accordion-content {
+ padding-left: 1.5rem;
+}
+
+.wire-next--accordion-bordered {
+ overflow: hidden;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-md);
+ background: var(--wire-color-surface);
+}
+
+.wire-next--accordion-bordered > .wire-next__accordion-item + .wire-next__accordion-item {
+ border-top: 1px solid var(--wire-color-border);
+}
+
+.wire-next--accordion-bordered
+ > .wire-next__accordion-item
+ > .wire-next__accordion-heading
+ > button {
+ padding-inline: 1rem;
+}
+
+.wire-next--accordion-bordered
+ > .wire-next__accordion-item
+ > .wire-next__accordion-panel
+ .wire-next__accordion-content {
+ padding-inline: 1rem;
+}
+
+.wire-next--accordion-separated {
+ gap: 0.5rem;
+}
+
+.wire-next--accordion-separated > .wire-next__accordion-item {
+ overflow: hidden;
+ border: 1px solid transparent;
+ border-radius: var(--wire-radius-md);
+ background: var(--wire-color-surface-2);
+}
+
+.wire-next--accordion-separated > .wire-next__accordion-item[data-open="true"] {
+ border-color: var(--wire-color-border);
+}
+
+.wire-next--accordion-separated
+ > .wire-next__accordion-item
+ > .wire-next__accordion-heading
+ > button,
+.wire-next--accordion-separated
+ > .wire-next__accordion-item
+ > .wire-next__accordion-panel
+ .wire-next__accordion-content {
+ padding-inline: 1rem;
+}
+
+.wire-next--accordion-flush {
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .wire-next__accordion-panel,
+ .wire-next__accordion-indicator {
+ transition: none;
+ }
+}
+
+.wire-next--toggle-count {
+ --wire-toggle-count-accent: var(--wire-component-color);
+ display: grid;
+ width: fit-content;
+ gap: 0.75rem;
+ color: var(--wire-color-text);
+}
+
+.wire-next--toggle-count-full {
+ width: 100%;
+}
+
+.wire-next__toggle-count-control {
+ display: flex;
+}
+
+.wire-next__toggle-count-control--start {
+ justify-content: flex-start;
+}
+
+.wire-next__toggle-count-control--center {
+ justify-content: center;
+}
+
+.wire-next__toggle-count-control--end {
+ justify-content: flex-end;
+}
+
+.wire-next__toggle-count-segmented {
+ display: inline-flex;
+ gap: 0.2rem;
+ padding: 0.2rem;
+ border-radius: calc(var(--wire-radius-sm) + 0.15rem);
+ background: var(--wire-color-surface-2);
+ box-shadow: inset 0 0 0 1px var(--wire-color-border);
+}
+
+.wire-next__toggle-count-segmented button {
+ min-height: 2.35rem;
+ padding: 0.45rem 0.8rem;
+ border: 0;
+ border-radius: var(--wire-radius-sm);
+ background: transparent;
+ color: var(--wire-color-muted);
+ font: inherit;
+ font-size: 0.78rem;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+.wire-next__toggle-count-segmented button[aria-pressed="true"] {
+ background: var(--wire-color-surface);
+ color: var(--wire-color-text);
+ box-shadow:
+ var(--wire-shadow-1),
+ inset 0 -2px var(--wire-toggle-count-accent);
+}
+
+.wire-next__toggle-count-segmented button:focus-visible,
+.wire-next__toggle-count-switch:focus-visible {
+ outline: 2px solid var(--wire-toggle-count-accent);
+ outline-offset: 2px;
+}
+
+.wire-next__toggle-count-segmented button:disabled,
+.wire-next__toggle-count-switch:disabled {
+ cursor: not-allowed;
+}
+
+.wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) {
+ align-items: center;
+ gap: 0.7rem;
+ font-size: 0.78rem;
+ font-weight: 700;
+}
+
+.wire-next__toggle-count-control > span {
+ color: var(--wire-color-muted);
+}
+
+.wire-next__toggle-count-control > span[data-selected="true"] {
+ color: var(--wire-color-text);
+}
+
+.wire-next__toggle-count-switch {
+ position: relative;
+ width: 2.65rem;
+ height: 1.45rem;
+ padding: 0.15rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: 999px;
+ background: var(--wire-color-surface-2);
+ cursor: pointer;
+ transition: background-color var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next__toggle-count-switch > span {
+ display: block;
+ width: 1rem;
+ height: 1rem;
+ border-radius: 50%;
+ background: var(--wire-color-text);
+ box-shadow: var(--wire-shadow-1);
+ transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next__toggle-count-switch[aria-checked="true"] {
+ border-color: var(--wire-toggle-count-accent);
+ background: var(--wire-toggle-count-accent);
+}
+
+.wire-next__toggle-count-switch[aria-checked="true"] > span {
+ background: white;
+ transform: translateX(1.15rem);
+}
+
+.wire-next__toggle-count-items {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+ overflow: hidden;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-md);
+ background: var(--wire-color-surface);
+}
+
+.wire-next__toggle-count-items article {
+ display: grid;
+ align-content: start;
+ gap: 0.35rem;
+ min-width: 0;
+ padding: 1rem;
+}
+
+.wire-next__toggle-count-items article + article {
+ border-left: 1px solid var(--wire-color-border);
+}
+
+.wire-next__toggle-count-items article > span {
+ color: var(--wire-color-muted);
+ font-size: 0.75rem;
+ font-weight: 600;
+}
+
+.wire-next__toggle-count-items strong {
+ display: flex;
+ align-items: baseline;
+ gap: 0.2rem;
+ font-size: 1.5rem;
+ line-height: 1;
+}
+
+.wire-next__toggle-count-items [data-toggle-count-value] {
+ min-width: 2ch;
+ font-variant-numeric: tabular-nums;
+ transition:
+ color var(--wire-motion-fast) var(--wire-ease-standard),
+ transform var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next__toggle-count-items strong small {
+ color: inherit;
+ font-size: 0.65em;
+}
+
+.wire-next__toggle-count-items article > small {
+ color: var(--wire-color-muted);
+ font-size: 0.68rem;
+}
+
+@media (max-width: 36rem) {
+ .wire-next__toggle-count-control {
+ justify-content: center;
+ }
+
+ .wire-next__toggle-count-items {
+ grid-template-columns: 1fr;
+ }
+
+ .wire-next__toggle-count-items article + article {
+ border-top: 1px solid var(--wire-color-border);
+ border-left: 0;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .wire-next__toggle-count-items [data-toggle-count-value] {
+ transition: none;
+ }
+}
+
.wire-next p {
margin: 0;
color: var(--wire-color-muted);
@@ -1888,14 +4464,253 @@
flex-wrap: wrap;
gap: 0.5rem;
}
-.wire-next__items > span,
-.wire-next--badge {
+.wire-next__items > span {
padding: 0.3rem 0.55rem;
border-radius: 999px;
background: var(--wire-color-surface-2);
font-size: 0.75rem;
}
+/* --- Badge --------------------------------------------------------------- */
+.wire-next--badge-root {
+ position: relative;
+ display: inline-flex;
+ width: fit-content;
+ max-width: 100%;
+ vertical-align: middle;
+}
+
+.wire-next__badge {
+ --wire-badge-color: var(--wire-color-primary);
+ position: relative;
+ isolation: isolate;
+ display: inline-flex;
+ min-width: 0;
+ min-height: 1.65rem;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ max-width: var(--wire-badge-max-width);
+ padding: 0.25rem 0.6rem;
+ color: white;
+ border: 1px solid var(--wire-badge-color);
+ border-radius: 999px;
+ background: var(--wire-badge-color);
+ box-shadow: 0 4px 12px color-mix(in srgb, var(--wire-badge-color) 18%, transparent);
+ font-size: 0.75rem;
+ font-weight: 750;
+ line-height: 1;
+ white-space: nowrap;
+}
+
+.wire-next__badge[data-size="xs"] {
+ min-height: 1.25rem;
+ padding: 0.15rem 0.4rem;
+ font-size: 0.625rem;
+}
+
+.wire-next__badge[data-size="sm"] {
+ min-height: 1.45rem;
+ padding: 0.2rem 0.5rem;
+ font-size: 0.6875rem;
+}
+
+.wire-next__badge[data-size="lg"] {
+ min-height: 2rem;
+ padding: 0.35rem 0.75rem;
+ font-size: 0.825rem;
+}
+
+.wire-next__badge[data-color="secondary"] {
+ --wire-badge-color: #737373;
+}
+.wire-next__badge[data-color="success"] {
+ --wire-badge-color: #0f9f8f;
+}
+.wire-next__badge[data-color="info"] {
+ --wire-badge-color: #2563eb;
+}
+.wire-next__badge[data-color="danger"] {
+ --wire-badge-color: #ef3340;
+}
+.wire-next__badge[data-color="warning"] {
+ --wire-badge-color: #eab308;
+}
+.wire-next__badge[data-color="dark"] {
+ --wire-badge-color: #27272a;
+}
+.wire-next__badge[data-color="light"] {
+ --wire-badge-color: #f4f4f5;
+}
+
+.wire-next__badge[data-color="warning"][data-variant="solid"],
+.wire-next__badge[data-color="light"][data-variant="solid"] {
+ color: #18181b;
+}
+
+.wire-next__badge[data-variant="soft"] {
+ color: var(--wire-badge-color);
+ border-color: transparent;
+ background: color-mix(in srgb, var(--wire-badge-color) 15%, var(--wire-color-surface));
+ box-shadow: none;
+}
+
+.wire-next__badge[data-variant="outline"] {
+ color: var(--wire-badge-color);
+ background: transparent;
+ box-shadow: none;
+}
+
+.wire-next__badge[data-variant="white"] {
+ color: var(--wire-color-text);
+ border-color: var(--wire-color-border);
+ background: var(--wire-color-surface);
+ box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+}
+
+.wire-next__badge[data-shape="rounded"] {
+ border-radius: 0.4rem;
+}
+
+.wire-next__badge[data-shape="square"] {
+ border-radius: 0;
+}
+
+.wire-next__badge-label {
+ min-width: 0;
+}
+
+.wire-next__badge-label--truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.wire-next__badge-dot {
+ width: 0.42rem;
+ height: 0.42rem;
+ flex: none;
+ border-radius: 999px;
+ background: currentColor;
+}
+
+.wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) {
+ width: 0.7rem;
+ min-width: 0.7rem;
+ height: 0.7rem;
+ min-height: 0.7rem;
+ padding: 0;
+ border: 2px solid var(--wire-color-bg);
+}
+
+.wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label))
+ .wire-next__badge-dot {
+ width: 100%;
+ height: 100%;
+}
+
+.wire-next__badge-icon {
+ width: 0.9rem;
+ height: 0.9rem;
+ flex: none;
+}
+
+.wire-next__badge-avatar {
+ width: 1.25rem;
+ height: 1.25rem;
+ margin-left: -0.35rem;
+ object-fit: cover;
+ border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+ border-radius: 999px;
+}
+
+.wire-next__badge-dismiss {
+ display: grid;
+ width: 1.15rem;
+ height: 1.15rem;
+ margin-right: -0.3rem;
+ padding: 0;
+ place-items: center;
+ color: currentColor;
+ border: 0;
+ border-radius: 999px;
+ background: color-mix(in srgb, currentColor 12%, transparent);
+ cursor: pointer;
+}
+
+.wire-next__badge-dismiss:hover {
+ background: color-mix(in srgb, currentColor 22%, transparent);
+}
+
+.wire-next__badge-dismiss:focus-visible {
+ outline: 2px solid currentColor;
+ outline-offset: 2px;
+}
+
+.wire-next__badge-dismiss span {
+ width: 0.75rem;
+ height: 0.75rem;
+}
+
+.wire-next__badge-anchor {
+ display: inline-flex;
+ min-height: 2.75rem;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.65rem 0.9rem;
+ color: var(--wire-color-text);
+ border: 1px solid var(--wire-color-border);
+ border-radius: 0.5rem;
+ background: var(--wire-color-surface);
+ font: inherit;
+ font-size: 0.875rem;
+ font-weight: 700;
+}
+
+.wire-next__badge-anchor > [class*="icon-"] {
+ width: 1rem;
+ height: 1rem;
+}
+
+.wire-next--badge-anchored[data-placement="inline"] {
+ align-items: center;
+}
+
+.wire-next--badge-anchored[data-placement="inline"] .wire-next__badge {
+ margin-left: -0.55rem;
+}
+
+.wire-next--badge-anchored[data-placement="top-right"] .wire-next__badge {
+ position: absolute;
+ top: -0.55rem;
+ right: -0.75rem;
+ z-index: 2;
+}
+
+.wire-next__badge-ping {
+ position: absolute;
+ z-index: -1;
+ inset: -0.25rem;
+ border-radius: inherit;
+ background: var(--wire-badge-color);
+ opacity: 0.5;
+ animation: wire-badge-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes wire-badge-ping {
+ 75%,
+ 100% {
+ opacity: 0;
+ transform: scale(1.45);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .wire-next__badge-ping {
+ animation: none;
+ }
+}
+
.wire-next details {
overflow: hidden;
border: 1px solid var(--wire-color-border);
@@ -2132,6 +4947,830 @@
resize: vertical;
}
+.wire-next--field,
+.wire-next--choice-field {
+ --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+ width: min(100%, 34rem);
+ min-width: 0;
+ color: var(--wire-color-text);
+ font-size: 0.875rem;
+ font-weight: 500;
+}
+
+.wire-next--field.wire-next--size-sm,
+.wire-next--choice-field.wire-next--size-sm {
+ font-size: 0.8125rem;
+}
+
+.wire-next--field.wire-next--size-lg,
+.wire-next--choice-field.wire-next--size-lg {
+ font-size: 1rem;
+}
+
+.wire-next__field-heading {
+ display: flex;
+ min-width: 0;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.wire-next__field-heading label {
+ color: var(--wire-color-text);
+ font-weight: 700;
+}
+
+.wire-next__field-hint,
+.wire-next__field-help {
+ color: var(--wire-color-muted);
+ font-size: 0.82em;
+ font-weight: 500;
+}
+
+.wire-next__field-control {
+ position: relative;
+ min-width: 0;
+}
+
+.wire-next__field-control > :is(input, textarea, select) {
+ padding-inline: 0.85rem;
+ border-color: var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface);
+}
+
+.wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+ padding-inline-start: 2.5rem;
+}
+
+.wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+ padding-inline-end: 2.5rem;
+}
+
+.wire-next__field-icon {
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ left: 0.85rem;
+ color: var(--wire-color-muted);
+ pointer-events: none;
+ transform: translateY(-50%);
+}
+
+.wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+ right: 0.85rem;
+ left: auto;
+}
+
+.wire-next--field[data-variant="outlined"]
+ .wire-next__field-control
+ > :is(input, textarea, select) {
+ border-width: 2px;
+}
+
+.wire-next--field[data-variant="underline"]
+ .wire-next__field-control
+ > :is(input, textarea, select) {
+ padding-inline: 0;
+ border-width: 0 0 1px;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+}
+
+.wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+ border-radius: 999px;
+ padding-inline: 1.15rem;
+}
+
+.wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+ border-color: transparent;
+ background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+}
+
+.wire-next__field-floating-label {
+ position: absolute;
+ top: 50%;
+ left: 0.85rem;
+ color: var(--wire-color-muted);
+ pointer-events: none;
+ transform: translateY(-50%);
+ transition: 150ms ease;
+}
+
+.wire-next--textarea .wire-next__field-floating-label {
+ top: 1.35rem;
+}
+
+.wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+ padding-top: 1.2rem;
+ padding-bottom: 0.3rem;
+}
+
+.wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ overflow: hidden !important;
+ margin: -1px !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+}
+
+.wire-next--field[data-floating="true"]
+ .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+ display: none;
+}
+
+.wire-next--field[data-floating="true"]
+ .wire-next__field-control
+ > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+ + .wire-next__field-floating-label {
+ top: 0.42rem;
+ font-size: 0.7em;
+ transform: none;
+}
+
+.wire-next__field-error {
+ min-height: 1em;
+ color: var(--wire-color-danger);
+ font-size: 0.82em;
+ font-weight: 600;
+}
+
+.wire-next__field-error:empty {
+ display: none;
+}
+
+.wire-next--field[data-invalid="true"] :is(input, textarea, select),
+.wire-next--choice-field[data-invalid="true"] input {
+ border-color: var(--wire-color-danger);
+}
+
+.wire-next--field :is(input, textarea, select):disabled,
+.wire-next--choice-field input:disabled {
+ cursor: not-allowed;
+ opacity: 0.58;
+}
+
+.wire-next--field :is(input, textarea, select):read-only {
+ background: var(--wire-color-surface-2);
+}
+
+.wire-next--field[data-inline="true"],
+.wire-next--choice-field[data-inline="true"] {
+ display: grid;
+ width: 100%;
+ max-width: none;
+ grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+ justify-content: center;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.wire-next--field[data-inline="true"] .wire-next__field-heading,
+.wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+ min-height: 2.65rem;
+ align-items: center;
+}
+
+.wire-next--field[data-inline="true"] .wire-next__field-heading {
+ justify-content: flex-end;
+}
+
+.wire-next--field[data-inline="true"] .wire-next__field-help,
+.wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+ display: flex;
+ min-height: 2.65rem;
+ align-items: center;
+}
+
+.wire-next--choice-field[data-inline="true"] {
+ grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+}
+
+.wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+ display: none;
+}
+
+.wire-next--field[data-inline="true"] .wire-next__field-error,
+.wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+ grid-column: 2 / -1;
+}
+
+.wire-next__sr-only {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ border: 0 !important;
+ margin: -1px !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+}
+
+.wire-next__choice-field {
+ display: grid;
+ gap: 0.4rem;
+}
+
+.wire-next__choice {
+ display: flex;
+ min-width: 0;
+ align-items: center;
+ gap: 0.65rem;
+ color: var(--wire-color-text);
+ font-weight: 650;
+}
+
+.wire-next__choice input {
+ flex: 0 0 auto;
+ margin: 0;
+ accent-color: var(--wire-field-color);
+}
+
+.wire-next__choice-copy {
+ display: grid;
+ min-width: 0;
+ gap: 0.15rem;
+ line-height: 1.35;
+}
+
+.wire-next__choice-copy small {
+ color: var(--wire-color-muted);
+ font-weight: 500;
+}
+
+.wire-next__radio-group,
+.wire-next__checkbox-group {
+ display: grid;
+ min-width: 0;
+ gap: 0.65rem;
+}
+
+.wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+.wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+ grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+ align-items: stretch;
+}
+
+.wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+.wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+}
+
+.wire-next--radio-field[data-card="true"] .wire-next--radio,
+.wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+ min-height: 4.5rem;
+ padding: 0.85rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface);
+}
+
+.wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+.wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+ border-color: var(--wire-field-color);
+ box-shadow: 0 0 0 1px var(--wire-field-color);
+}
+
+.wire-next--radio-field[data-list="true"] .wire-next--radio,
+.wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+ padding-block: 0.75rem;
+ border-bottom: 1px solid var(--wire-color-border);
+}
+
+.wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+.wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+ justify-content: space-between;
+}
+
+.wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+.wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+ order: 2;
+}
+
+.wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+.wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+ order: 1;
+}
+
+.wire-next__choice[data-variant="outlined"],
+.wire-next__choice[data-variant="floating"] {
+ padding: 0.65rem 0.8rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+}
+
+.wire-next__choice[data-variant="pill"] {
+ padding: 0.65rem 1rem;
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+}
+
+.wire-next__choice[data-variant="ghost"] {
+ padding: 0.65rem 0.8rem;
+ border-radius: var(--wire-radius-sm);
+ background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+}
+
+.wire-next__choice[data-variant="underline"] {
+ padding-block: 0.5rem;
+ border-bottom: 1px solid var(--wire-color-border);
+}
+
+.wire-next--switch input {
+ appearance: none;
+ position: relative;
+ width: 2.5rem;
+ height: 1.4rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: 999px;
+ background: var(--wire-color-surface-2);
+ transition: background var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next--switch {
+ min-height: 2.65rem;
+ justify-content: flex-start;
+}
+
+.wire-next--switch > span:last-child {
+ line-height: 1.35;
+}
+
+.wire-next--select .wire-next__field-control {
+ display: flex;
+ align-items: center;
+}
+
+.wire-next--select select {
+ width: 100%;
+ min-height: 2.65rem;
+ margin: 0;
+ line-height: 1.35;
+}
+
+.wire-next--switch input::after {
+ position: absolute;
+ top: 0.15rem;
+ left: 0.15rem;
+ width: 1rem;
+ height: 1rem;
+ border-radius: 999px;
+ background: var(--wire-color-text);
+ content: "";
+ transition: transform var(--wire-motion-fast) var(--wire-ease-standard);
+}
+
+.wire-next--switch input:checked {
+ border-color: var(--wire-field-color);
+ background: var(--wire-field-color);
+}
+
+.wire-next--switch input:checked::after {
+ background: var(--wire-color-primary-contrast, #fff);
+ transform: translateX(1.1rem);
+}
+
+.wire-next__color-control,
+.wire-next__range-control,
+.wire-next__input-group-control,
+.wire-next__file-control {
+ display: flex;
+ min-width: 0;
+ align-items: center;
+ gap: 0.65rem;
+}
+
+.wire-next__color-control input[type="color"] {
+ width: 3rem;
+ padding: 0.2rem;
+}
+
+.wire-next__range-track {
+ display: grid;
+ flex: 1;
+ min-width: 0;
+ gap: 0.35rem;
+}
+
+.wire-next__range-control input {
+ width: 100%;
+ min-width: 0;
+ margin: 0;
+ flex: 1;
+ accent-color: var(--wire-field-color);
+}
+
+.wire-next__custom-slider {
+ position: relative;
+ width: 100%;
+ height: 1.5rem;
+ cursor: pointer;
+ touch-action: none;
+}
+
+.wire-next__custom-slider::before,
+.wire-next__slider-fill {
+ position: absolute;
+ top: 50%;
+ height: 0.4rem;
+ border-radius: 999px;
+ transform: translateY(-50%);
+ content: "";
+}
+
+.wire-next__custom-slider::before {
+ right: 0;
+ left: 0;
+ background: var(--wire-color-surface-2);
+ box-shadow: inset 0 0 0 1px var(--wire-color-border);
+}
+
+.wire-next__slider-fill {
+ z-index: 1;
+ left: 0;
+ width: var(--wire-range-progress);
+ background: var(--wire-field-color);
+}
+
+.wire-next__slider-thumb {
+ position: absolute;
+ z-index: 3;
+ top: 50%;
+ left: var(--wire-range-progress);
+ width: 1.25rem;
+ height: 1.25rem;
+ border: 3px solid var(--wire-field-color);
+ border-radius: 50%;
+ background: var(--wire-color-surface);
+ box-shadow: var(--wire-shadow-1);
+ transform: translate(-50%, -50%);
+}
+
+.wire-next__custom-slider:focus-visible {
+ outline: 3px solid color-mix(in srgb, var(--wire-field-color) 28%, transparent);
+ outline-offset: 3px;
+}
+
+.wire-next__slider-marks button {
+ position: absolute;
+ z-index: 2;
+ top: 50%;
+ width: 0.55rem;
+ height: 0.55rem;
+ padding: 0;
+ border: 2px solid var(--wire-color-surface);
+ border-radius: 50%;
+ background: var(--wire-color-muted);
+ transform: translate(-50%, -50%);
+}
+
+.wire-next__range-control[data-show-steps="true"] input {
+ background-image: repeating-linear-gradient(
+ 90deg,
+ transparent 0,
+ transparent calc(10% - 1px),
+ var(--wire-color-border) calc(10% - 1px),
+ var(--wire-color-border) 10%
+ );
+}
+
+.wire-next__range-bounds {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ color: var(--wire-color-muted);
+ font-size: 0.78em;
+ font-variant-numeric: tabular-nums;
+}
+
+.wire-next__range-bounds span:nth-child(2) {
+ text-align: center;
+}
+
+.wire-next__range-bounds span:last-child {
+ text-align: right;
+}
+
+.wire-next__range-control output {
+ min-width: 3ch;
+ font-variant-numeric: tabular-nums;
+}
+
+.wire-next__range-stepper {
+ display: inline-grid;
+ width: 2.35rem;
+ height: 2.35rem;
+ flex: 0 0 auto;
+ place-items: center;
+ border: 1px solid var(--wire-color-border);
+ border-radius: 50%;
+ background: var(--wire-color-surface);
+ color: var(--wire-color-text);
+ font: inherit;
+ font-size: 1.2rem;
+ cursor: pointer;
+}
+
+.wire-next__range-stepper:hover:not(:disabled) {
+ border-color: var(--wire-field-color);
+ color: var(--wire-field-color);
+}
+
+.wire-next__range-stepper:disabled {
+ cursor: not-allowed;
+ opacity: 0.45;
+}
+
+.wire-next__picker-control,
+.wire-next--time-picker .wire-next__field-control {
+ position: relative;
+ display: flex;
+ min-width: 0;
+ align-items: center;
+}
+
+.wire-next__picker-control > button:first-of-type,
+.wire-next__time-trigger {
+ display: flex;
+ width: 100%;
+ min-height: 2.65rem;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ padding: 0.7rem 0.85rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface);
+ color: var(--wire-color-text);
+ font: inherit;
+ text-align: left;
+}
+
+.wire-next__picker-clear {
+ position: absolute;
+ right: 2.5rem;
+ border: 0;
+ background: transparent;
+ color: var(--wire-color-muted);
+}
+
+.wire-next__calendar,
+.wire-next__time-panel {
+ z-index: 20;
+ display: grid;
+ width: min(100%, 22rem);
+ gap: 0.75rem;
+ padding: 0.85rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-md);
+ background: var(--wire-color-surface);
+ box-shadow: var(--wire-shadow-3);
+}
+
+.wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+.wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+ display: none;
+}
+
+.wire-next__date-selectors {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ gap: 0.65rem;
+}
+
+.wire-next__date-selectors label {
+ display: grid;
+ gap: 0.3rem;
+ color: var(--wire-color-muted);
+ font-size: 0.78rem;
+ font-weight: 600;
+}
+
+.wire-next__date-selectors select {
+ width: 100%;
+ min-height: 2.35rem;
+ padding: 0.45rem 0.65rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface);
+ color: var(--wire-color-text);
+ font: inherit;
+}
+
+.wire-next__date-done {
+ background: var(--wire-field-color) !important;
+ color: var(--wire-color-primary-contrast, #fff) !important;
+ font-weight: 650;
+}
+
+.wire-next__calendar > header {
+ display: grid;
+ grid-template-columns: 2.25rem 1fr 2.25rem;
+ align-items: center;
+ text-align: center;
+}
+
+.wire-next__calendar button,
+.wire-next__time-panel button {
+ min-height: 2.25rem;
+ border: 0;
+ border-radius: var(--wire-radius-sm);
+ background: transparent;
+ color: inherit;
+}
+
+.wire-next__calendar-weekdays,
+.wire-next__calendar-grid {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ gap: 0.2rem;
+ text-align: center;
+}
+
+.wire-next__calendar-weekdays {
+ color: var(--wire-color-muted);
+ font-size: 0.75rem;
+}
+
+.wire-next__calendar-grid button:hover,
+.wire-next__time-panel button:hover {
+ background: var(--wire-color-surface-2);
+}
+
+.wire-next__calendar-grid button[aria-pressed="true"],
+.wire-next__time-panel button[aria-pressed="true"] {
+ background: var(--wire-field-color);
+ color: var(--wire-color-primary-contrast, #fff);
+}
+
+.wire-next__calendar-grid button[data-outside="true"] {
+ color: var(--wire-color-muted);
+ opacity: 0.55;
+}
+
+.wire-next__calendar-grid button[data-today="true"] {
+ box-shadow: inset 0 0 0 1px var(--wire-field-color);
+}
+
+.wire-next__time-panel {
+ grid-template-columns: 1fr 1fr;
+}
+
+.wire-next__time-options {
+ display: grid;
+ max-height: 12rem;
+ margin-top: 0.4rem;
+ overflow-y: auto;
+ gap: 0.2rem;
+}
+
+.wire-next__time-period {
+ display: flex;
+ gap: 0.35rem;
+}
+
+.wire-next__time-done {
+ align-self: end;
+ background: var(--wire-field-color) !important;
+ color: var(--wire-color-primary-contrast, #fff) !important;
+}
+
+.wire-next--file-upload-progress {
+ display: grid;
+ width: min(100%, 36rem);
+ gap: 0.75rem;
+ padding: 1rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-md);
+ background: var(--wire-color-surface);
+ box-shadow: var(--wire-shadow-1);
+}
+
+.wire-next--file-upload-progress .wire-next__row,
+.wire-next__upload-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+}
+
+.wire-next--file-upload-progress .wire-next__row > span {
+ display: grid;
+ min-width: 0;
+}
+
+.wire-next--file-upload-progress progress {
+ width: 100%;
+ height: 0.55rem;
+ overflow: hidden;
+ border: 0;
+ border-radius: 999px;
+ accent-color: var(--wire-component-color);
+}
+
+.wire-next__upload-actions {
+ justify-content: flex-end;
+}
+
+.wire-next__upload-actions button {
+ min-height: 2.25rem;
+ padding-inline: 0.8rem;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface-2);
+ color: inherit;
+}
+
+@media (max-width: 640px) {
+ .wire-next__time-panel {
+ grid-template-columns: 1fr;
+ }
+}
+
+.wire-next__file-control {
+ position: relative;
+ min-height: 2.75rem;
+ padding: 0.65rem 0.85rem;
+ border: 1px dashed var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface);
+}
+
+.wire-next__file-control input {
+ position: absolute;
+ cursor: pointer;
+ opacity: 0;
+ inset: 0;
+}
+
+.wire-next__input-group-control {
+ overflow: hidden;
+ border: 1px solid var(--wire-color-border);
+ border-radius: var(--wire-radius-sm);
+ background: var(--wire-color-surface);
+}
+
+.wire-next--field[data-variant="underline"]
+ :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+ border-width: 0 0 1px;
+ border-radius: 0;
+ background: transparent;
+}
+
+.wire-next--field[data-variant="outlined"]
+ :is(.wire-next__input-group-control, .wire-next__file-control) {
+ border-width: 2px;
+}
+
+.wire-next--field[data-variant="pill"]
+ :is(.wire-next__input-group-control, .wire-next__file-control) {
+ border-radius: 999px;
+}
+
+.wire-next--field[data-variant="ghost"]
+ :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+ border-color: transparent;
+ background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+}
+
+.wire-next__input-group-control input {
+ flex: 1;
+ min-width: 0;
+ border: 0;
+ box-shadow: none;
+}
+
+.wire-next__input-addon,
+.wire-next__input-group-control button {
+ padding: 0.7rem 0.85rem;
+ white-space: nowrap;
+}
+
+.wire-next__input-group-control button {
+ align-self: stretch;
+ border: 0;
+ background: var(--wire-field-color);
+ color: var(--wire-color-primary-contrast, #fff);
+ font: inherit;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+@media (max-width: 640px) {
+ .wire-next--field[data-inline="true"],
+ .wire-next--choice-field[data-inline="true"] {
+ grid-template-columns: 1fr;
+ }
+
+ .wire-next--field[data-inline="true"] .wire-next__field-error,
+ .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+ grid-column: auto;
+ }
+}
+
.wire-next--toggle-password {
display: grid;
width: min(100%, 28rem);
@@ -2379,6 +6018,7 @@
}
.wire-next__strong-password-requirements li > span {
+ position: relative;
width: 0.9rem;
height: 0.9rem;
flex: 0 0 auto;
@@ -2387,16 +6027,30 @@
border-radius: 50%;
}
+.wire-next__strong-password-requirements li > span::after {
+ position: absolute;
+ top: 0.12rem;
+ left: 0.29rem;
+ width: 0.22rem;
+ height: 0.42rem;
+ border: solid var(--wire-color-surface);
+ border-width: 0 0.1rem 0.1rem 0;
+ content: "";
+ opacity: 0;
+ transform: rotate(45deg);
+}
+
.wire-next__strong-password-requirements li[data-met="true"] {
color: var(--wire-color-success);
}
.wire-next__strong-password-requirements li[data-met="true"] > span {
border-color: var(--wire-color-success);
- background:
- linear-gradient(135deg, transparent 42%, var(--wire-color-surface) 42% 52%, transparent 52%)
- 0.05rem 0.07rem / 0.52rem 0.52rem no-repeat,
- var(--wire-color-success);
+ background: var(--wire-color-success);
+}
+
+.wire-next__strong-password-requirements li[data-met="true"] > span::after {
+ opacity: 1;
}
.wire-next__strong-password-details > small {
diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json
index 3f3da297..b369ded7 100644
--- a/.publish/uploader/package.json
+++ b/.publish/uploader/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/uploader",
- "version": "0.4.0",
+ "version": "0.5.0",
"type": "module",
"description": "@wrnexus/uploader — part of the WrNexus framework.",
"license": "MIT",
@@ -21,7 +21,7 @@
}
},
"dependencies": {
- "@wrnexus/core": "^0.4.0"
+ "@wrnexus/core": "^0.5.0"
},
"files": [
"dist"
diff --git a/.publish/validation/package.json b/.publish/validation/package.json
index 79d68fc0..6aa564f3 100644
--- a/.publish/validation/package.json
+++ b/.publish/validation/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/validation",
- "version": "0.4.0",
+ "version": "0.5.0",
"type": "module",
"description": "@wrnexus/validation — part of the WrNexus framework.",
"license": "MIT",
diff --git a/AUTH-MANIFEST.md b/AUTH-MANIFEST.md
new file mode 100644
index 00000000..075895d1
--- /dev/null
+++ b/AUTH-MANIFEST.md
@@ -0,0 +1,14 @@
+# @wrnexus/auth bundle manifest
+
+- Package: `packages/auth`
+- Version: `0.5.0`
+- Components: 16
+- Package API routes: 25
+- Package middleware: auth-session hydration
+- Browser runtime: passkey/WebAuthn coordinator
+- Stores: memory and generic SQL
+- Migration: 13 authentication/security tables
+- Showcase: `examples/auth-showcase`
+- Root validation: `bun run validate:auth`
+
+The package includes password, verification, recovery, passwordless OTP, MFA, TOTP, recovery codes, passkeys, OAuth, invitations, sessions, trusted devices, risk/CAPTCHA escalation, account status, impersonation, secret protection, and audit events.
diff --git a/AUTH-VALIDATION.md b/AUTH-VALIDATION.md
new file mode 100644
index 00000000..f9433349
--- /dev/null
+++ b/AUTH-VALIDATION.md
@@ -0,0 +1,19 @@
+# @wrnexus/auth validation report
+
+Validated in the artifact environment:
+
+- Strict TypeScript check for package source and tests: passed
+- Strict TypeScript check for authentication showcase: passed
+- WRN parser check for package components and showcase pages: 27 files passed
+- Browser runtime JavaScript syntax check: passed
+- Structural package verification: passed
+- Compiled engine runtime smoke test: registration, verification, password login, passwordless OTP, invitation, sessions, and impersonation passed
+- Compiled security smoke test: encrypted TOTP/OAuth values, TOTP replay rejection, passkey flow, unverified OAuth-link rejection, and CAPTCHA escalation passed
+
+The full Bun 1.3.14 test/build suite must be run in the WRNexusJS repository with:
+
+```bash
+bun install
+bun run validate:auth
+bun run check
+```
diff --git a/INSTALL.md b/INSTALL.md
new file mode 100644
index 00000000..532098e8
--- /dev/null
+++ b/INSTALL.md
@@ -0,0 +1,33 @@
+# WRNexusJS auth form and validation fix
+
+Copy this patch over the WRNexusJS repository root (`E:\WireJS`) and allow matching files to be replaced.
+
+## What this fixes
+
+- Auth API files now export HTTP method handlers (`GET` / `POST`) instead of unsupported default-only handlers.
+- The package auth dispatcher exports `GET` and `POST`, so package-contributed API routes are callable by the runtime.
+- The sign-up form is intercepted by the `@wrnexus/validation` browser runtime instead of navigating the browser directly to the JSON API.
+- The same `signUpSchema` validates registration in the browser and in the showcase API route.
+- Shared auth HTTP handlers validate core request bodies with `parseBody(...)` from `@wrnexus/validation`.
+- Backend field errors and network/API failures are displayed in the form.
+- Successful registration redirects to `/sign-in`.
+- The in-memory auth showcase disables SQL migration bundling, so its production build does not require `config.db`.
+
+## Run
+
+```bash
+cd E:/WireJS
+bun install
+bun run format
+bun run check
+bun run validate:auth
+bun run auth:dev
+```
+
+Open:
+
+```text
+http://localhost:3000/sign-up
+```
+
+Do not use `/api/auth/register` as the registration page. It is a POST-only JSON endpoint. Opening it directly with GET should now return a JSON `405 Method Not Allowed` response instead of an invalid server response.
diff --git a/README.md b/README.md
index af132cc4..eee8aea3 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,39 @@
-# WRNexusJS 0.4.0 UI reference determinism fix
+# WRNexusJS
-This fixes the release loop where `generate-ui-component-reference.mjs` writes one layout and Prettier rewrites it differently. The generator now formats both generated files with the repository Prettier configuration before writing them.
+WRNexusJS is an SSR-first, Bun-powered full-stack framework with a dedicated `.wrn` language, server rendering, selective client reactivity, file-based routing, database tooling, realtime communication, UI components, mobile support, and framework-native system packages.
-Replace:
+## WRNexusJS 0.4.0
-- `scripts/generate-ui-component-reference.mjs`
+Version 0.4 introduces a package contribution platform. Installed `@wrnexus/*` systems can now register components, page/API/realtime routes, middleware, browser runtimes, static assets, Tailwind scan sources, database migrations, CLI inspection data, and DevToolbar panels.
-Then run:
+A package-owned browser runtime is injected only when rendered markup asks for it:
+
+```wrn
+ {
++ // Validate the same schema used by .
++ // Clone the request because the shared auth handler also reads the body using
++ // the generic package registration schema.
++ const validation = await parseBody(signUpSchema, ctx.req.clone());
++ if (!validation.ok) return validation.response;
++ return handlers.register(ctx);
++}
+--- a/examples/auth-showcase/app/api/auth/sessions/index.ts
++++ b/examples/auth-showcase/app/api/auth/sessions/index.ts
+@@ -1,2 +1,2 @@
+ import { handlers } from "../../../lib/auth.ts";
+-export default handlers.sessions;
++export const GET = handlers.sessions;
+--- a/examples/auth-showcase/app/api/auth/sessions/revoke.ts
++++ b/examples/auth-showcase/app/api/auth/sessions/revoke.ts
+@@ -1,2 +1,2 @@
+ import { handlers } from "../../../lib/auth.ts";
+-export default handlers.revokeSession;
++export const POST = handlers.revokeSession;
+--- a/examples/auth-showcase/app/api/auth/verify/email.ts
++++ b/examples/auth-showcase/app/api/auth/verify/email.ts
+@@ -1,2 +1,3 @@
+ import { handlers } from "../../../lib/auth.ts";
+-export default handlers.verifyEmail;
++export const GET = handlers.verifyEmail;
++export const POST = handlers.verifyEmail;
+--- a/examples/auth-showcase/app/api/auth/verify/phone.ts
++++ b/examples/auth-showcase/app/api/auth/verify/phone.ts
+@@ -1,2 +1,2 @@
+ import { handlers } from "../../../lib/auth.ts";
+-export default handlers.verifyPhone;
++export const POST = handlers.verifyPhone;
+--- a/examples/auth-showcase/app/pages/sign-up.wrn
++++ b/examples/auth-showcase/app/pages/sign-up.wrn
+@@ -1,4 +1,8 @@
+ page SignUpPage {
+ seo { title = "Create account" }
+- view {
++
++ }
+ }
+--- /dev/null
++++ b/examples/auth-showcase/app/schemas/auth-register.ts
+@@ -0,0 +1,3 @@
++import { signUpSchema } from "@wrnexus/auth";
++
++export default signUpSchema;
+--- a/examples/auth-showcase/package.json
++++ b/examples/auth-showcase/package.json
+@@ -12,7 +12,8 @@
+ },
+ "dependencies": {
+ "@wrnexus/auth": "workspace:*",
+- "@wrnexus/core": "workspace:*"
++ "@wrnexus/core": "workspace:*",
++ "@wrnexus/validation": "workspace:*"
+ },
+ "devDependencies": {
+ "@iconify-json/lucide": "^1.2.0",
+--- a/examples/auth-showcase/test/showcase.test.ts
++++ b/examples/auth-showcase/test/showcase.test.ts
+@@ -33,3 +33,15 @@
+ expect(readFileSync(join(root, "app", "pages", "magic-link.wrn"), "utf8")).toContain("MagicLinkSignIn");
+ expect(readFileSync(join(root, "app", "pages", "impersonation.wrn"), "utf8")).toContain("ImpersonationBanner");
+ });
++
++
++test("registration uses one @wrnexus/validation schema on the client and server", () => {
++ const schema = readFileSync(join(root, "app", "schemas", "auth-register.ts"), "utf8");
++ const route = readFileSync(join(root, "app", "api", "auth", "register.ts"), "utf8");
++ const page = readFileSync(join(root, "app", "pages", "sign-up.wrn"), "utf8");
++
++ expect(schema).toContain("signUpSchema");
++ expect(route).toContain("parseBody(signUpSchema");
++ expect(route).toContain("export async function POST");
++ expect(page).toContain('schema="auth-register"');
++});
+--- a/examples/auth-showcase/wrnexus.config.ts
++++ b/examples/auth-showcase/wrnexus.config.ts
+@@ -1,7 +1,9 @@
++import { authPlugin } from "@wrnexus/auth/plugin";
+ import type { AppConfig } from "@wrnexus/styles";
+ import { auth } from "./app/lib/auth.ts";
+
+ const config: AppConfig & { auth: { engine: typeof auth } } = {
++ plugins: [authPlugin({ includeMigrations: false })],
+ seo: {
+ title: "WRNexus Auth Showcase",
+ description: "Complete authentication, MFA, passkey, recovery, session, and security examples.",
+--- a/packages/auth/README.md
++++ b/packages/auth/README.md
+@@ -203,10 +203,36 @@
+
+ ## Validation
+
+-Reusable schemas are exported for registration, login, reset, OTP, MFA, invitation acceptance, magic links, and password changes.
++Reusable `@wrnexus/validation` schemas are exported for registration, sign-up forms, login, reset, OTP, MFA, invitation acceptance, magic links, and password changes. The HTTP handlers validate request bodies before calling the auth engine.
++
++Expose the same schema to the browser through the application's conventional `app/schemas/` directory:
++
++```ts
++// app/schemas/auth-register.ts
++import { signUpSchema } from "@wrnexus/auth";
++
++export default signUpSchema;
++```
++
++Then use the matching schema name on the packaged component:
++
++```wrn
++ {
++ const validation = await parseBody(signUpSchema, ctx.req.clone());
++ if (!validation.ok) return validation.response;
++ return handlers.register(ctx);
++}
+ ```
+
+ ## Development
+--- a/packages/auth/components/SignUp.wrn
++++ b/packages/auth/components/SignUp.wrn
+@@ -1,6 +1,8 @@
+ component SignUp {
+ props {
+ action = "/api/auth/register"
++ schema = "auth-register"
++ redirect = ""
+ title = "Create your account"
+ description = "Use a strong password and verify your contact details."
+ submitLabel = "Create account"
+@@ -14,17 +16,71 @@
+ }
+ view {
+
+-
+ }
+--- a/packages/auth/src/http/index.ts
++++ b/packages/auth/src/http/index.ts
+@@ -1,6 +1,18 @@
+ import type { Context } from "@wrnexus/core";
++import { parseBody } from "@wrnexus/validation";
+ import type { AuthEngine } from "../engine.ts";
+ import { clearAuthSession, establishAuthSession, getAuthSession, getAuthUser } from "../middleware.ts";
++import {
++ invitationAcceptSchema,
++ loginSchema,
++ magicLinkRequestSchema,
++ mfaSchema,
++ otpLoginRequestSchema,
++ otpSchema,
++ passwordResetRequestSchema,
++ passwordResetSchema,
++ registerSchema,
++} from "../validation.ts";
+
+ async function body(request: Request): Promise> {
+ const type = request.headers.get("content-type") ?? "";
+@@ -34,7 +46,9 @@
+ const engine = options.engine;
+ return {
+ async register(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(registerSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ const result = await engine.register({
+ email: text(input.email) || undefined,
+ phone: text(input.phone) || undefined,
+@@ -48,7 +62,9 @@
+ },
+
+ async login(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(loginSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ const result = await engine.login({
+ identifier: text(input.identifier),
+ password: text(input.password),
+@@ -87,19 +103,25 @@
+ },
+
+ async requestPasswordReset(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(passwordResetRequestSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ await engine.requestPasswordReset(text(input.identifier), options.baseUrl ?? ctx.url.origin);
+ return json({ ok: true });
+ },
+
+ async resetPassword(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(passwordResetSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ const result = await engine.resetPassword(text(input.token), text(input.password));
+ return json(result, result.ok ? 200 : 400);
+ },
+
+ async acceptInvitation(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(invitationAcceptSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ const result = await engine.acceptInvitation(text(input.token), {
+ password: text(input.password) || undefined,
+ displayName: text(input.displayName) || undefined,
+@@ -108,7 +130,9 @@
+ },
+
+ async requestMagicLink(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(magicLinkRequestSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ await engine.requestMagicLink(text(input.identifier), options.baseUrl ?? ctx.url.origin);
+ return json({ ok: true });
+ },
+@@ -138,7 +162,9 @@
+ },
+
+ async requestOtpLogin(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(otpLoginRequestSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ const method = text(input.method) === "sms-otp" ? "sms-otp" : "email-otp";
+ const challenge = await engine.requestOtpLogin(text(input.identifier), method);
+ return json({ ok: true, challenge: challenge ?? null });
+@@ -165,7 +191,9 @@
+ },
+
+ async verifyOtp(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(otpSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ const result = await engine.verifyOtp(text(input.challengeId), text(input.code));
+ return json(result, result.ok ? 200 : 400);
+ },
+@@ -178,7 +206,9 @@
+ },
+
+ async completeMfa(ctx: Context): Promise {
+- const input = await body(ctx.req);
++ const validation = await parseBody(mfaSchema, ctx.req);
++ if (!validation.ok) return validation.response;
++ const input = validation.value;
+ const methodValue = text(input.method);
+ const method = ["totp", "recovery-code", "email-otp", "sms-otp"].includes(methodValue)
+ ? methodValue as "totp" | "recovery-code" | "email-otp" | "sms-otp"
+--- a/packages/auth/src/index.ts
++++ b/packages/auth/src/index.ts
+@@ -22,4 +22,4 @@
+ export { MemoryPasskeyChallengeStore, assertPasskeyProvider } from "./passkeys/index.ts";
+ export * from "./types.ts";
+
+-export { registerSchema, loginSchema, passwordResetRequestSchema, passwordResetSchema, otpSchema, mfaSchema, otpLoginRequestSchema, magicLinkRequestSchema, invitationAcceptSchema, changePasswordSchema } from "./validation.ts";
++export { registerSchema, signUpSchema, loginSchema, passwordResetRequestSchema, passwordResetSchema, otpSchema, mfaSchema, otpLoginRequestSchema, magicLinkRequestSchema, invitationAcceptSchema, changePasswordSchema } from "./validation.ts";
+--- a/packages/auth/src/routes/api.ts
++++ b/packages/auth/src/routes/api.ts
+@@ -55,3 +55,8 @@
+
+ return Response.json({ ok: false, error: "Not Found" }, { status: 404 });
+ }
++
++// Package-contributed API entries are loaded by HTTP method. Export both
++// supported methods while retaining the default export for compatibility.
++export const GET = authApi;
++export const POST = authApi;
+--- a/packages/auth/src/server/index.ts
++++ b/packages/auth/src/server/index.ts
+@@ -15,6 +15,6 @@
+ export { SqlAuthStore } from "../stores/sql.ts";
+ export * from "../types.ts";
+
+-export { registerSchema, loginSchema, passwordResetRequestSchema, passwordResetSchema, otpSchema, mfaSchema, otpLoginRequestSchema, magicLinkRequestSchema, invitationAcceptSchema, changePasswordSchema } from "../validation.ts";
++export { registerSchema, signUpSchema, loginSchema, passwordResetRequestSchema, passwordResetSchema, otpSchema, mfaSchema, otpLoginRequestSchema, magicLinkRequestSchema, invitationAcceptSchema, changePasswordSchema } from "../validation.ts";
+
+ export { createAuthSecretProtector } from "../protector.ts";
+--- a/packages/auth/src/validation.ts
++++ b/packages/auth/src/validation.ts
+@@ -1,11 +1,46 @@
+ import { v } from "@wrnexus/validation";
+
++const strongPassword = () =>
++ v
++ .string()
++ .min(12, "Password must be at least 12 characters")
++ .max(256, "Password must be at most 256 characters")
++ .pattern(
++ /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/,
++ "Password must include uppercase, lowercase, and a number",
++ );
++
++/** Generic registration API schema. At least one identity is enforced by the auth engine. */
+ export const registerSchema = v.object({
+ displayName: v.string().trim().min(2).max(120),
+ email: v.string().trim().email().optional(),
+ phone: v.string().trim().min(7).max(24).optional(),
+- username: v.string().trim().min(3).max(64).pattern(/^[a-zA-Z0-9._-]+$/).optional(),
+- password: v.string().min(12).max(256),
++ username: v
++ .string()
++ .trim()
++ .min(3)
++ .max(64)
++ .pattern(/^[a-zA-Z0-9._-]+$/, "Use only letters, numbers, dots, underscores, or hyphens")
++ .optional(),
++ password: strongPassword(),
++ locale: v.string().max(32).optional(),
++ timezone: v.string().max(64).optional(),
++});
++
++/** Browser sign-up form schema used by the packaged SignUp component. */
++export const signUpSchema = v.object({
++ displayName: v.string().trim().min(2, "Enter your full name").max(120),
++ email: v.string().trim().email("Enter a valid email address"),
++ phone: v.string().trim().min(7).max(24).optional(),
++ username: v
++ .string()
++ .trim()
++ .min(3)
++ .max(64)
++ .pattern(/^[a-zA-Z0-9._-]+$/, "Use only letters, numbers, dots, underscores, or hyphens")
++ .optional(),
++ password: strongPassword(),
++ consent: v.boolean().required("Accept the terms and privacy policy to continue"),
+ locale: v.string().max(32).optional(),
+ timezone: v.string().max(64).optional(),
+ });
+@@ -25,7 +60,7 @@
+
+ export const passwordResetSchema = v.object({
+ token: v.string().min(20).max(512),
+- password: v.string().min(12).max(256),
++ password: strongPassword(),
+ });
+
+ export const otpSchema = v.object({
+@@ -38,6 +73,7 @@
+ method: v.string().oneOf(["totp", "recovery-code", "email-otp", "sms-otp"]),
+ challengeId: v.string().max(191).optional(),
+ code: v.string().trim().min(6).max(32),
++ returnTo: v.string().max(2048).optional(),
+ });
+
+ export const otpLoginRequestSchema = v.object({
+@@ -52,10 +88,10 @@
+ export const invitationAcceptSchema = v.object({
+ token: v.string().min(20).max(512),
+ displayName: v.string().trim().min(2).max(120).optional(),
+- password: v.string().min(12).max(256).optional(),
++ password: strongPassword().optional(),
+ });
+
+ export const changePasswordSchema = v.object({
+ currentPassword: v.string().min(1).max(256),
+- nextPassword: v.string().min(12).max(256),
++ nextPassword: strongPassword(),
+ });
+--- a/packages/auth/test/http.test.ts
++++ b/packages/auth/test/http.test.ts
+@@ -69,3 +69,34 @@
+ expect(response.status).toBe(200);
+ expect(await response.json()).toMatchObject({ ok: true });
+ });
++
++
++test("register handler returns validation field errors before calling the engine", async () => {
++ let registerCalls = 0;
++ const engine = {
++ register: async () => {
++ registerCalls += 1;
++ return { ok: true };
++ },
++ } as unknown as ReturnType;
++ const handlers = createAuthHttpHandlers({ engine });
++ const ctx = context(
++ new Request("https://example.test/api/auth/register", {
++ method: "POST",
++ headers: { "content-type": "application/json" },
++ body: JSON.stringify({ displayName: "A", email: "bad", password: "short" }),
++ }),
++ );
++
++ const response = await handlers.register(ctx);
++ expect(response.status).toBe(400);
++ expect(await response.json()).toMatchObject({
++ ok: false,
++ errors: {
++ displayName: expect.any(String),
++ email: expect.any(String),
++ password: expect.any(String),
++ },
++ });
++ expect(registerCalls).toBe(0);
++});
+--- a/packages/auth/test/validation.test.ts
++++ b/packages/auth/test/validation.test.ts
+@@ -5,6 +5,7 @@
+ mfaSchema,
+ otpLoginRequestSchema,
+ registerSchema,
++ signUpSchema,
+ } from "../src/validation.ts";
+
+ test("authentication schemas reject malformed input", () => {
+@@ -14,3 +15,28 @@
+ expect(invitationAcceptSchema.parse({ token: "short" }).ok).toBe(false);
+ expect(mfaSchema.parse({ mfaToken: "short", method: "unknown", code: "1" }).ok).toBe(false);
+ });
++
++
++test("sign-up schema is shared by browser and server registration", () => {
++ const invalid = signUpSchema.parse({
++ displayName: "A",
++ email: "bad",
++ password: "weak",
++ consent: false,
++ });
++ expect(invalid.ok).toBe(false);
++ expect(invalid.errors).toMatchObject({
++ displayName: "Enter your full name",
++ email: "Enter a valid email address",
++ consent: "Accept the terms and privacy policy to continue",
++ });
++
++ expect(
++ signUpSchema.parse({
++ displayName: "Ada Lovelace",
++ email: "ada@example.com",
++ password: "StrongPassword123",
++ consent: true,
++ }).ok,
++ ).toBe(true);
++});
+--- a/packages/validation/src/runtime.ts
++++ b/packages/validation/src/runtime.ts
+@@ -1,178 +1,205 @@
+-/**
+- * Client-side validation. `renderSchemasScript` bakes the discovered schema
+- * descriptors into `window.__wireSchemas`; `VALIDATE_RUNTIME` is a generic,
+- * eval-free validator that reads them and validates every `form[data-schema]`
+- * on submit and blur, writing messages into `[data-error=""]` elements.
+- * The rule logic mirrors `checkField`/`applyRule` in index.ts.
+- */
+-
+-import type { SchemaDescriptor } from "./index.ts";
+-
+-/** `window.__wireSchemas = { name: descriptor, ... }` for the client validator. */
+-export function renderSchemasScript(descriptors: Record): string {
+- return `window.__wireSchemas=${JSON.stringify(descriptors)};`;
+-}
+-
+-export const VALIDATE_RUNTIME = String.raw`
+-(function () {
+- var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+- var URL_RE = /^https?:\/\/[^\s/$.?#][^\s]*$/i;
+- var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+-
+- function applyRule(type, r, value) {
+- if (r.kind === "min") {
+- if (type === "string") return String(value).length < r.n ? (r.message || ("Must be at least " + r.n + " characters")) : null;
+- return value < r.n ? (r.message || ("Must be at least " + r.n)) : null;
+- }
+- if (r.kind === "max") {
+- if (type === "string") return String(value).length > r.n ? (r.message || ("Must be at most " + r.n + " characters")) : null;
+- return value > r.n ? (r.message || ("Must be at most " + r.n)) : null;
+- }
+- if (r.kind === "length") return String(value).length !== r.n ? (r.message || ("Must be exactly " + r.n + " characters")) : null;
+- if (r.kind === "email") return EMAIL.test(String(value)) ? null : (r.message || "Must be a valid email");
+- if (r.kind === "url") return URL_RE.test(String(value)) ? null : (r.message || "Must be a valid URL");
+- if (r.kind === "uuid") return UUID_RE.test(String(value)) ? null : (r.message || "Must be a valid UUID");
+- if (r.kind === "date") return isNaN(Date.parse(String(value))) ? (r.message || "Must be a valid date") : null;
+- if (r.kind === "oneOf") return r.values.indexOf(value) !== -1 ? null : (r.message || ("Must be one of: " + r.values.join(", ")));
+- if (r.kind === "pattern") { try { return new RegExp(r.source, r.flags || "").test(String(value)) ? null : (r.message || "Invalid format"); } catch (e) { return null; } }
+- if (r.kind === "integer") return Number.isInteger(value) ? null : (r.message || "Must be a whole number");
+- return null;
+- }
+-
+- function checkField(desc, raw) {
+- if (desc.type === "boolean") {
+- var b = raw === true || raw === "true" || raw === "on";
+- return (!desc.optional && !b) ? (desc.requiredMessage || "Required") : null;
+- }
+- var pre = desc.trim && typeof raw === "string" ? raw.trim() : raw;
+- var empty = pre === undefined || pre === null || pre === "";
+- if (empty) return desc.optional ? null : (desc.requiredMessage || "Required");
+- var value;
+- if (desc.type === "number") { value = Number(pre); if (isNaN(value)) return "Must be a number"; }
+- else value = String(pre);
+- for (var i = 0; i < desc.rules.length; i++) {
+- var err = applyRule(desc.type, desc.rules[i], value);
+- if (err) return err;
+- }
+- return null;
+- }
+-
+- function rawValue(form, name) {
+- var el = form.elements[name];
+- if (!el) return undefined;
+- return el.type === "checkbox" ? el.checked : el.value;
+- }
+-
+- function showError(form, name, err) {
+- var box = form.querySelector('[data-error="' + name + '"]');
+- if (box) box.textContent = err || "";
+- var el = form.elements[name];
+- if (el && el.setAttribute) {
+- if (err) { el.setAttribute("aria-invalid", "true"); if (el.classList) el.classList.add("wire-invalid"); }
+- else { el.removeAttribute("aria-invalid"); if (el.classList) el.classList.remove("wire-invalid"); }
+- }
+- }
+-
+- function validateForm(form, schema) {
+- var errors = 0;
+- Object.keys(schema.fields).forEach(function (name) {
+- var err = checkField(schema.fields[name], rawValue(form, name));
+- if (err) errors++;
+- showError(form, name, err);
+- });
+- return errors;
+- }
+-
+- function collect(form) {
+- var out = {};
+- for (var i = 0; i < form.elements.length; i++) {
+- var el = form.elements[i];
+- if (!el.name) continue;
+- if (el.type === "checkbox") out[el.name] = el.checked;
+- else if (el.type === "radio") { if (el.checked) out[el.name] = el.value; }
+- else out[el.name] = el.value;
+- }
+- return out;
+- }
+-
+- function onSuccess(form, data) {
+- var redirect = form.getAttribute("data-redirect") || (data && data.redirect);
+- if (redirect) {
+- // Prefer client-side navigation (no full reload) when it is available.
+- if (window.__wrnexusNavigate) window.__wrnexusNavigate(redirect);
+- else location.assign(redirect);
+- return;
+- }
+- var box = form.querySelector("[data-success]");
+- if (box) { box.textContent = box.getAttribute("data-success") || "Success"; box.hidden = false; }
+- form.reset();
+- form.dispatchEvent(new CustomEvent("wire:success", { detail: data, bubbles: true }));
+- }
+-
+- function csrfHeader() {
+- var m = document.cookie.match(/(?:^|;\s*)wire-csrf=([^;]+)/);
+- return m ? { "x-csrf-token": decodeURIComponent(m[1]) } : {};
+- }
+-
+- function submitForm(form, schema) {
+- var method = (form.getAttribute("method") || "post").toUpperCase();
+- var action = form.getAttribute("action") || location.pathname;
+- var btns = form.querySelectorAll("[type=submit]");
+- btns.forEach(function (b) { b.disabled = true; });
+- var headers = { "content-type": "application/json", accept: "application/json" };
+- var csrf = csrfHeader();
+- for (var k in csrf) headers[k] = csrf[k];
+- fetch(action, {
+- method: method,
+- headers: headers,
+- credentials: "same-origin",
+- body: JSON.stringify(collect(form)),
+- })
+- .then(function (res) {
+- return res.json().catch(function () { return {}; }).then(function (data) { return { res: res, data: data }; });
+- })
+- .then(function (r) {
+- if (r.res.ok) { onSuccess(form, r.data); return; }
+- // Surface server-side field errors (e.g. "email already taken").
+- var errors = r.data && r.data.errors;
+- if (errors) Object.keys(errors).forEach(function (f) { showError(form, f, errors[f]); });
+- form.dispatchEvent(new CustomEvent("wire:error", { detail: r.data, bubbles: true }));
+- })
+- .catch(function () {
+- form.dispatchEvent(new CustomEvent("wire:error", { detail: { network: true }, bubbles: true }));
+- })
+- .then(function () { btns.forEach(function (b) { b.disabled = false; }); });
+- }
+-
+- function bind(form) {
+- if (form.__wireValidateBound) return;
+- form.__wireValidateBound = 1;
+- var name = form.getAttribute("data-schema");
+- var schema = (window.__wireSchemas || {})[name];
+- if (!schema) return;
+- // Schema-backed forms use WRNexus messages instead of the browser's
+- // non-themeable native validation bubbles.
+- form.noValidate = true;
+- form.setAttribute("novalidate", "");
+- form.addEventListener("submit", function (e) {
+- e.preventDefault();
+- if (validateForm(form, schema) > 0) return; // client-invalid: stay put, errors shown
+- submitForm(form, schema);
+- });
+- form.addEventListener("blur", function (e) {
+- var t = e.target;
+- if (t && t.name && schema.fields[t.name]) {
+- showError(form, t.name, checkField(schema.fields[t.name], t.type === "checkbox" ? t.checked : t.value));
+- }
+- }, true);
+- }
+-
+- function init(root) {
+- (root || document).querySelectorAll("form[data-schema]").forEach(bind);
+- }
+-
+- window.__wireValidate = { init: init };
+- if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", function () { init(document); });
+- else init(document);
+-})();
+-`.trim();
++/**
++ * Client-side validation. `renderSchemasScript` bakes the discovered schema
++ * descriptors into `window.__wireSchemas`; `VALIDATE_RUNTIME` is a generic,
++ * eval-free validator that reads them and validates every `form[data-schema]`
++ * on submit and blur, writing messages into `[data-error=""]` elements.
++ * The rule logic mirrors `checkField`/`applyRule` in index.ts.
++ */
++
++import type { SchemaDescriptor } from "./index.ts";
++
++/** `window.__wireSchemas = { name: descriptor, ... }` for the client validator. */
++export function renderSchemasScript(descriptors: Record): string {
++ return `window.__wireSchemas=${JSON.stringify(descriptors)};`;
++}
++
++export const VALIDATE_RUNTIME = String.raw`
++(function () {
++ var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
++ var URL_RE = /^https?:\/\/[^\s/$.?#][^\s]*$/i;
++ var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
++
++ function applyRule(type, r, value) {
++ if (r.kind === "min") {
++ if (type === "string") return String(value).length < r.n ? (r.message || ("Must be at least " + r.n + " characters")) : null;
++ return value < r.n ? (r.message || ("Must be at least " + r.n)) : null;
++ }
++ if (r.kind === "max") {
++ if (type === "string") return String(value).length > r.n ? (r.message || ("Must be at most " + r.n + " characters")) : null;
++ return value > r.n ? (r.message || ("Must be at most " + r.n)) : null;
++ }
++ if (r.kind === "length") return String(value).length !== r.n ? (r.message || ("Must be exactly " + r.n + " characters")) : null;
++ if (r.kind === "email") return EMAIL.test(String(value)) ? null : (r.message || "Must be a valid email");
++ if (r.kind === "url") return URL_RE.test(String(value)) ? null : (r.message || "Must be a valid URL");
++ if (r.kind === "uuid") return UUID_RE.test(String(value)) ? null : (r.message || "Must be a valid UUID");
++ if (r.kind === "date") return isNaN(Date.parse(String(value))) ? (r.message || "Must be a valid date") : null;
++ if (r.kind === "oneOf") return r.values.indexOf(value) !== -1 ? null : (r.message || ("Must be one of: " + r.values.join(", ")));
++ if (r.kind === "pattern") { try { return new RegExp(r.source, r.flags || "").test(String(value)) ? null : (r.message || "Invalid format"); } catch (e) { return null; } }
++ if (r.kind === "integer") return Number.isInteger(value) ? null : (r.message || "Must be a whole number");
++ return null;
++ }
++
++ function checkField(desc, raw) {
++ if (desc.type === "boolean") {
++ var b = raw === true || raw === "true" || raw === "on";
++ return (!desc.optional && !b) ? (desc.requiredMessage || "Required") : null;
++ }
++ var pre = desc.trim && typeof raw === "string" ? raw.trim() : raw;
++ var empty = pre === undefined || pre === null || pre === "";
++ if (empty) return desc.optional ? null : (desc.requiredMessage || "Required");
++ var value;
++ if (desc.type === "number") { value = Number(pre); if (isNaN(value)) return "Must be a number"; }
++ else value = String(pre);
++ for (var i = 0; i < desc.rules.length; i++) {
++ var err = applyRule(desc.type, desc.rules[i], value);
++ if (err) return err;
++ }
++ return null;
++ }
++
++ function rawValue(form, name) {
++ var el = form.elements[name];
++ if (!el) return undefined;
++ return el.type === "checkbox" ? el.checked : el.value;
++ }
++
++ function showError(form, name, err) {
++ var box = form.querySelector('[data-error="' + name + '"]');
++ if (box) box.textContent = err || "";
++ var el = form.elements[name];
++ if (el && el.setAttribute) {
++ if (err) { el.setAttribute("aria-invalid", "true"); if (el.classList) el.classList.add("wire-invalid"); }
++ else { el.removeAttribute("aria-invalid"); if (el.classList) el.classList.remove("wire-invalid"); }
++ }
++ }
++
++ function showFormError(form, message) {
++ var box = form.querySelector('[data-error="_form"]');
++ if (!box) return;
++ box.textContent = message || "";
++ box.hidden = !message;
++ if (box.classList) box.classList.toggle("hidden", !message);
++ }
++
++ function validateForm(form, schema) {
++ var errors = 0;
++ Object.keys(schema.fields).forEach(function (name) {
++ var err = checkField(schema.fields[name], rawValue(form, name));
++ if (err) errors++;
++ showError(form, name, err);
++ });
++ return errors;
++ }
++
++ function collect(form) {
++ var out = {};
++ for (var i = 0; i < form.elements.length; i++) {
++ var el = form.elements[i];
++ if (!el.name) continue;
++ if (el.type === "checkbox") out[el.name] = el.checked;
++ else if (el.type === "radio") { if (el.checked) out[el.name] = el.value; }
++ else out[el.name] = el.value;
++ }
++ return out;
++ }
++
++ function onSuccess(form, data, responseRedirect) {
++ showFormError(form, "");
++ form.dispatchEvent(new CustomEvent("wire:success", { detail: data, bubbles: true }));
++ var redirect = responseRedirect || form.getAttribute("data-redirect") || (data && data.redirect);
++ if (redirect) {
++ // Prefer client-side navigation for same-origin application redirects.
++ try {
++ var target = new URL(redirect, location.href);
++ if (target.origin === location.origin && window.__wrnexusNavigate) {
++ window.__wrnexusNavigate(target.pathname + target.search + target.hash);
++ } else location.assign(target.href);
++ } catch (e) {
++ location.assign(redirect);
++ }
++ return;
++ }
++ var box = form.querySelector("[data-success]");
++ if (box) { box.textContent = box.getAttribute("data-success") || "Success"; box.hidden = false; }
++ form.reset();
++ }
++
++ function csrfHeader() {
++ var m = document.cookie.match(/(?:^|;\s*)wire-csrf=([^;]+)/);
++ return m ? { "x-csrf-token": decodeURIComponent(m[1]) } : {};
++ }
++
++ function submitForm(form, schema) {
++ var method = (form.getAttribute("method") || "post").toUpperCase();
++ var action = form.getAttribute("action") || location.pathname;
++ var btns = form.querySelectorAll("[type=submit]");
++ showFormError(form, "");
++ btns.forEach(function (b) { b.disabled = true; });
++ var headers = { "content-type": "application/json", accept: "application/json" };
++ var csrf = csrfHeader();
++ for (var k in csrf) headers[k] = csrf[k];
++ fetch(action, {
++ method: method,
++ headers: headers,
++ credentials: "same-origin",
++ body: JSON.stringify(collect(form)),
++ })
++ .then(function (res) {
++ var responseRedirect = res.redirected && res.url ? res.url : "";
++ return res.json().catch(function () { return {}; }).then(function (data) {
++ return { res: res, data: data, responseRedirect: responseRedirect };
++ });
++ })
++ .then(function (r) {
++ if (r.res.ok && (!r.data || r.data.ok !== false)) {
++ onSuccess(form, r.data, r.responseRedirect);
++ return;
++ }
++ // Surface server-side field errors and a form-level API message.
++ var errors = r.data && r.data.errors;
++ if (errors) Object.keys(errors).forEach(function (f) { showError(form, f, errors[f]); });
++ var message = r.data && (r.data.message || r.data.error);
++ showFormError(form, message || ("Request failed (" + r.res.status + ")"));
++ form.dispatchEvent(new CustomEvent("wire:error", { detail: r.data, bubbles: true }));
++ })
++ .catch(function (error) {
++ var detail = { network: true, message: error && error.message ? error.message : "Network request failed" };
++ showFormError(form, detail.message);
++ form.dispatchEvent(new CustomEvent("wire:error", { detail: detail, bubbles: true }));
++ })
++ .then(function () { btns.forEach(function (b) { b.disabled = false; }); });
++ }
++
++ function bind(form) {
++ if (form.__wireValidateBound) return;
++ form.__wireValidateBound = 1;
++ var name = form.getAttribute("data-schema");
++ var schema = (window.__wireSchemas || {})[name];
++ if (!schema) return;
++ // Schema-backed forms use WRNexus messages instead of the browser's
++ // non-themeable native validation bubbles.
++ form.noValidate = true;
++ form.setAttribute("novalidate", "");
++ form.addEventListener("submit", function (e) {
++ e.preventDefault();
++ showFormError(form, "");
++ if (validateForm(form, schema) > 0) return; // client-invalid: stay put, errors shown
++ submitForm(form, schema);
++ });
++ form.addEventListener("blur", function (e) {
++ var t = e.target;
++ if (t && t.name && schema.fields[t.name]) {
++ showError(form, t.name, checkField(schema.fields[t.name], t.type === "checkbox" ? t.checked : t.value));
++ }
++ }, true);
++ }
++
++ function init(root) {
++ (root || document).querySelectorAll("form[data-schema]").forEach(bind);
++ }
++
++ window.__wireValidate = { init: init };
++ if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", function () { init(document); });
++ else init(document);
++})();
++`.trim();
diff --git a/bun.lock b/bun.lock
index d317eb64..eb1631b6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -15,6 +15,23 @@
"typescript-eslint": "latest",
},
},
+ "examples/auth-showcase": {
+ "name": "auth-showcase",
+ "version": "0.1.0",
+ "dependencies": {
+ "@wrnexus/auth": "workspace:*",
+ "@wrnexus/captcha": "workspace:*",
+ "@wrnexus/core": "workspace:*",
+ "@wrnexus/validation": "workspace:*",
+ },
+ "devDependencies": {
+ "@iconify-json/lucide": "^1.2.0",
+ "@iconify/tailwind4": "^1.0.0",
+ "@tailwindcss/cli": "^4.0.0",
+ "tailwindcss": "^4.0.0",
+ "typescript": "^5.9.2",
+ },
+ },
"examples/basic-app": {
"name": "basic-app",
"version": "0.1.0",
@@ -68,6 +85,27 @@
"name": "@wrnexus/ai",
"version": "0.4.0",
},
+ "packages/auth": {
+ "name": "@wrnexus/auth",
+ "version": "0.5.0-alpha.1",
+ "dependencies": {
+ "@wrnexus/authz": "workspace:*",
+ "@wrnexus/captcha": "workspace:*",
+ "@wrnexus/core": "workspace:*",
+ "@wrnexus/db": "workspace:*",
+ "@wrnexus/encryption": "workspace:*",
+ "@wrnexus/jwt": "workspace:*",
+ "@wrnexus/oauth": "workspace:*",
+ "@wrnexus/plugin": "workspace:*",
+ "@wrnexus/queue": "workspace:*",
+ "@wrnexus/validation": "workspace:*",
+ },
+ "devDependencies": {
+ "@types/bun": "latest",
+ "@wrnexus/syntax": "workspace:*",
+ "typescript": "^5.9.2",
+ },
+ },
"packages/authz": {
"name": "@wrnexus/authz",
"version": "0.4.0",
@@ -529,6 +567,8 @@
"@wrnexus/ai": ["@wrnexus/ai@workspace:packages/ai"],
+ "@wrnexus/auth": ["@wrnexus/auth@workspace:packages/auth"],
+
"@wrnexus/authz": ["@wrnexus/authz@workspace:packages/authz"],
"@wrnexus/captcha": ["@wrnexus/captcha@workspace:packages/captcha"],
@@ -597,6 +637,8 @@
"any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="],
+ "auth-showcase": ["auth-showcase@workspace:examples/auth-showcase"],
+
"balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
"basic-app": ["basic-app@workspace:examples/basic-app"],
diff --git a/docs/AUTH-SCHEMA-CONFIG.md b/docs/AUTH-SCHEMA-CONFIG.md
new file mode 100644
index 00000000..771f4fa1
--- /dev/null
+++ b/docs/AUTH-SCHEMA-CONFIG.md
@@ -0,0 +1,84 @@
+# Auth schemas and route configuration
+
+`@wrnexus/auth` registers its browser validation schemas automatically. Applications using packaged components do not create default files under `app/schemas` and do not duplicate package API routes.
+
+## Default use
+
+```ts
+import type { AuthConfig } from "@wrnexus/auth";
+import type { AppConfig } from "@wrnexus/styles";
+import { auth } from "./app/lib/auth.ts";
+
+const config = {
+ auth: {
+ engine: auth,
+ routes: true,
+ middleware: true,
+ migrations: false,
+ },
+} satisfies AppConfig & { auth: AuthConfig };
+
+export default config;
+```
+
+Keep behavioral hooks such as `delivery`, `tokenUrl`, `onSignedIn`, and
+`onSignedOut` in the application's `createAuthEngine(...)` call. `config.auth`
+selects framework integration features such as routes, middleware, migrations,
+components, schemas, base URL, CSRF, and passkey HTTP settings.
+
+Components such as ` {
+ return (await captchaHandlers.handle(ctx.req, ctx)) ?? new Response("Not Found", { status: 404 });
+}
+
+export const GET = handle;
+export const HEAD = handle;
+export const POST = handle;
diff --git a/examples/auth-showcase/app/lib/auth.ts b/examples/auth-showcase/app/lib/auth.ts
new file mode 100644
index 00000000..2f07274a
--- /dev/null
+++ b/examples/auth-showcase/app/lib/auth.ts
@@ -0,0 +1,29 @@
+import { createAuthEngine, MemoryAuthStore } from "@wrnexus/auth";
+
+export const outbox: unknown[] = [];
+
+export const auth = createAuthEngine({
+ store: new MemoryAuthStore(),
+ secret: "development-auth-showcase-secret-change-in-production",
+ issuer: "WRNexus Auth Showcase",
+ sendLoginAlerts: true,
+ onSignedIn(ctx, returnTo) {
+ const safe = returnTo?.startsWith("/") && !returnTo.startsWith("//") ? returnTo : "/account";
+ return Response.redirect(new URL(safe, ctx.url), 303);
+ },
+ onSignedOut(ctx) {
+ return Response.redirect(new URL("/sign-in", ctx.url), 303);
+ },
+ onSuccessfulSignUp() {
+ return {
+ autoSignIn: true,
+ redirectTo: "/account",
+ };
+ },
+ delivery: {
+ async send(message) {
+ outbox.push(message);
+ console.info(`[auth-showcase] queued ${message.template} for ${message.destination}`);
+ },
+ },
+});
diff --git a/examples/auth-showcase/app/lib/captcha.ts b/examples/auth-showcase/app/lib/captcha.ts
new file mode 100644
index 00000000..1e911418
--- /dev/null
+++ b/examples/auth-showcase/app/lib/captcha.ts
@@ -0,0 +1,21 @@
+import {
+ createCaptchaEngine,
+ createCaptchaHttpHandlers,
+ MemoryCaptchaStore,
+} from "@wrnexus/captcha/server";
+
+export const captchaEngine = createCaptchaEngine({
+ secret: process.env.CAPTCHA_SECRET ?? "development-auth-showcase-captcha-secret-change-this",
+ store: new MemoryCaptchaStore(),
+ basePath: "/api/captcha",
+ challengeTtlMs: 2 * 60_000,
+ responseTokenTtlMs: 5 * 60_000,
+ maxAttempts: 3,
+ minCompletionMs: 800,
+});
+
+export const captchaHandlers = createCaptchaHttpHandlers(captchaEngine, {
+ createLimit: 60,
+ verifyLimit: 60,
+ windowMs: 60_000,
+});
diff --git a/examples/auth-showcase/app/middleware/auth.ts b/examples/auth-showcase/app/middleware/auth.ts
new file mode 100644
index 00000000..2527b959
--- /dev/null
+++ b/examples/auth-showcase/app/middleware/auth.ts
@@ -0,0 +1,14 @@
+import { authSession, requireAuth } from "@wrnexus/auth";
+import type { Middleware } from "@wrnexus/core";
+import { auth } from "../lib/auth.ts";
+
+const hydrate = authSession(auth);
+const accountGuard = requireAuth({ loginPath: "/sign-in" });
+
+const middleware: Middleware = async (ctx, next) => {
+ return hydrate(ctx, () =>
+ ctx.url.pathname.startsWith("/account") ? accountGuard(ctx, next) : next(),
+ );
+};
+
+export default middleware;
diff --git a/examples/auth-showcase/app/middleware/captcha-login.ts b/examples/auth-showcase/app/middleware/captcha-login.ts
new file mode 100644
index 00000000..c3e0c570
--- /dev/null
+++ b/examples/auth-showcase/app/middleware/captcha-login.ts
@@ -0,0 +1,31 @@
+import type { Context, Next } from "@wrnexus/core";
+import { captchaGuard } from "@wrnexus/captcha/server";
+import { captchaEngine } from "../lib/captcha.ts";
+
+const protectLogin = captchaGuard({
+ action: "auth-login",
+ engine: captchaEngine,
+ responseField: "wrn-captcha-response",
+ bindHostname: true,
+ bindSession: true,
+ verifiedForMs: 5 * 60_000,
+ onFailure(_ctx, result) {
+ return Response.json(
+ {
+ ok: false,
+ code: result.code ?? "captcha-invalid",
+ message: result.message ?? "Complete the security check below before signing in.",
+ },
+ {
+ status: 403,
+ headers: { "cache-control": "no-store" },
+ },
+ );
+ },
+});
+
+export default function captchaLogin(ctx: Context, next: Next) {
+ return ctx.req.method === "POST" && ctx.url.pathname === "/api/auth/login"
+ ? protectLogin(ctx, next)
+ : next();
+}
diff --git a/examples/auth-showcase/app/pages/account.wrn b/examples/auth-showcase/app/pages/account.wrn
new file mode 100644
index 00000000..e1d02823
--- /dev/null
+++ b/examples/auth-showcase/app/pages/account.wrn
@@ -0,0 +1,20 @@
+page AccountPage {
+ state user = ctx.user
+ seo { title = "Account" }
+ view {
+
+
+ }
+}
diff --git a/examples/auth-showcase/app/pages/authenticator.wrn b/examples/auth-showcase/app/pages/authenticator.wrn
new file mode 100644
index 00000000..53baaef4
--- /dev/null
+++ b/examples/auth-showcase/app/pages/authenticator.wrn
@@ -0,0 +1,4 @@
+page AuthenticatorPage {
+ seo { title = "Authenticator setup" }
+ view {
+
+ }
+}
diff --git a/examples/auth-showcase/app/pages/invitation.wrn b/examples/auth-showcase/app/pages/invitation.wrn
new file mode 100644
index 00000000..ac8aed40
--- /dev/null
+++ b/examples/auth-showcase/app/pages/invitation.wrn
@@ -0,0 +1,4 @@
+page InvitationPage {
+ seo { title = "Accept invitation" }
+ view {
+
+
+
+ }
+}
diff --git a/examples/auth-showcase/app/pages/sign-up.wrn b/examples/auth-showcase/app/pages/sign-up.wrn
new file mode 100644
index 00000000..31222f4f
--- /dev/null
+++ b/examples/auth-showcase/app/pages/sign-up.wrn
@@ -0,0 +1,8 @@
+page SignUpPage {
+ seo { title = "Create account" }
+ view {
+
+
+ }
+}
diff --git a/examples/auth-showcase/app/pages/two-factor.wrn b/examples/auth-showcase/app/pages/two-factor.wrn
new file mode 100644
index 00000000..5536e54d
--- /dev/null
+++ b/examples/auth-showcase/app/pages/two-factor.wrn
@@ -0,0 +1,4 @@
+page TwoFactorPage {
+ seo { title = "Two-factor authentication" }
+ view { ;
+ "/account": Record;
+ "/authenticator": Record;
+ "/impersonation": Record;
+ "/invitation": Record;
+ "/magic-link": Record;
+ "/otp": Record;
+ "/recover": Record;
+ "/sign-in": Record;
+ "/sign-up": Record;
+ "/two-factor": Record;
+}
+
+export type RoutePath = keyof Routes;
+type RouteValue = string | readonly string[] | undefined;
+
+function encodeRouteValue(value: RouteValue, catchAll: boolean): string {
+ if (value === undefined) return "";
+ const values = Array.isArray(value) ? value : catchAll ? String(value).split("/") : [String(value)];
+ return values.map((part) => encodeURIComponent(part)).join("/");
+}
+
+export function href
@@ -263,389 +99,395 @@ page AccordionDetail {
-
+
-
+
Component usage.wrn
-
+
-
+
Component usage.wrn
-
+
-
+
Component usage.wrn
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
Event listener.js
{label}{#if showValue}{value}%{/if}
-
+
}
}
diff --git a/.publish/ui/components/Image.wrn b/.publish/ui/components/Image.wrn
index 5f03305e..9d563ff9 100644
--- a/.publish/ui/components/Image.wrn
+++ b/.publish/ui/components/Image.wrn
@@ -1,5 +1,7 @@
component Image {
props {
+ @event load = function
+ @event error = function
size = "default"
color = "primary"
src = ""
diff --git a/.publish/ui/components/InputGroup.wrn b/.publish/ui/components/InputGroup.wrn
index 69087104..aea3fd7a 100644
--- a/.publish/ui/components/InputGroup.wrn
+++ b/.publish/ui/components/InputGroup.wrn
@@ -1,20 +1,51 @@
component InputGroup {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event submit = function
+ @event action = function
size = "default"
color = "primary"
- label = "Input Group"
+ id = ""
name = ""
+ label = "Input group"
+ hiddenLabel = false
value = ""
placeholder = ""
type = "text"
- min = ""
- max = ""
- step = ""
+ startText = ""
+ endText = ""
+ icon = ""
+ iconPosition = "start"
+ actionLabel = ""
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ variant = "normal"
+ readonly = false
disabled = false
required = false
class = ""
}
+ functions {
+ function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
+ function handleKeydown(sourceEvent) { if (sourceEvent.key === "Enter") { sourceEvent.stopPropagation(); $emit("submit", { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) } }
+ function handleAction(sourceEvent) { $emit("action", { name: name, sourceEvent: sourceEvent }) }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/LayoutSplitter.wrn b/.publish/ui/components/LayoutSplitter.wrn
index 0833ebdf..f9ad4d58 100644
--- a/.publish/ui/components/LayoutSplitter.wrn
+++ b/.publish/ui/components/LayoutSplitter.wrn
@@ -1,5 +1,8 @@
component LayoutSplitter {
props {
+ @event resizeStart = function
+ @event resize = function
+ @event resizeEnd = function
size = "default"
color = "primary"
columns = 2
diff --git a/.publish/ui/components/LegendIndicator.wrn b/.publish/ui/components/LegendIndicator.wrn
index 21905dc7..1fae3791 100644
--- a/.publish/ui/components/LegendIndicator.wrn
+++ b/.publish/ui/components/LegendIndicator.wrn
@@ -1,5 +1,7 @@
component LegendIndicator {
props {
+ @event toggle = function
+ @event select = function
size = "default"
color = "primary"
title = "Legend Indicator"
diff --git a/.publish/ui/components/Link.wrn b/.publish/ui/components/Link.wrn
index 34d19bee..a40cd330 100644
--- a/.publish/ui/components/Link.wrn
+++ b/.publish/ui/components/Link.wrn
@@ -1,5 +1,8 @@
component Link {
props {
+ @event click = function
+ @event focus = function
+ @event blur = function
size = "default"
color = "primary"
label = "Link"
diff --git a/.publish/ui/components/List.wrn b/.publish/ui/components/List.wrn
index 12f2e6bd..27941140 100644
--- a/.publish/ui/components/List.wrn
+++ b/.publish/ui/components/List.wrn
@@ -1,5 +1,7 @@
component List {
props {
+ @event select = function
+ @event click = function
size = "default"
color = "primary"
title = "List"
diff --git a/.publish/ui/components/ListGroup.wrn b/.publish/ui/components/ListGroup.wrn
index 374e8cfd..35366c9c 100644
--- a/.publish/ui/components/ListGroup.wrn
+++ b/.publish/ui/components/ListGroup.wrn
@@ -1,5 +1,7 @@
component ListGroup {
props {
+ @event select = function
+ @event change = function
size = "default"
color = "primary"
title = "List Group"
diff --git a/.publish/ui/components/Map.wrn b/.publish/ui/components/Map.wrn
index ca451ebf..f0037c76 100644
--- a/.publish/ui/components/Map.wrn
+++ b/.publish/ui/components/Map.wrn
@@ -1,5 +1,9 @@
component Map {
props {
+ @event ready = function
+ @event move = function
+ @event zoom = function
+ @event markerClick = function
size = "default"
color = "primary"
title = "Map"
diff --git a/.publish/ui/components/Marquee.wrn b/.publish/ui/components/Marquee.wrn
index 5f525cf6..f0b772dd 100644
--- a/.publish/ui/components/Marquee.wrn
+++ b/.publish/ui/components/Marquee.wrn
@@ -1,5 +1,7 @@
component Marquee {
props {
+ @event pause = function
+ @event resume = function
size = "default"
color = "primary"
title = "Marquee"
diff --git a/.publish/ui/components/MegaMenu.wrn b/.publish/ui/components/MegaMenu.wrn
index ccac682b..303025b0 100644
--- a/.publish/ui/components/MegaMenu.wrn
+++ b/.publish/ui/components/MegaMenu.wrn
@@ -1,5 +1,8 @@
component MegaMenu {
props {
+ @event open = function
+ @event close = function
+ @event select = function
size = "default"
color = "primary"
label = "Mega Menu"
diff --git a/.publish/ui/components/Modal.wrn b/.publish/ui/components/Modal.wrn
index 9a4ce3fb..2366e70f 100644
--- a/.publish/ui/components/Modal.wrn
+++ b/.publish/ui/components/Modal.wrn
@@ -1,5 +1,9 @@
component Modal {
props {
+ @event open = function
+ @event close = function
+ @event cancel = function
+ @event confirm = function
size = "default"
color = "primary"
title = "Modal"
diff --git a/.publish/ui/components/Nav.wrn b/.publish/ui/components/Nav.wrn
index 39475a9f..de980dc7 100644
--- a/.publish/ui/components/Nav.wrn
+++ b/.publish/ui/components/Nav.wrn
@@ -1,5 +1,7 @@
component Nav {
props {
+ @event select = function
+ @event change = function
size = "default"
color = "primary"
label = "Nav"
diff --git a/.publish/ui/components/Navbar.wrn b/.publish/ui/components/Navbar.wrn
index ba6fb974..69f23205 100644
--- a/.publish/ui/components/Navbar.wrn
+++ b/.publish/ui/components/Navbar.wrn
@@ -1,5 +1,8 @@
component Navbar {
props {
+ @event toggle = function
+ @event open = function
+ @event close = function
size = "default"
color = "primary"
label = "Navbar"
diff --git a/.publish/ui/components/Pagination.wrn b/.publish/ui/components/Pagination.wrn
index 2898cdb1..afbfc65c 100644
--- a/.publish/ui/components/Pagination.wrn
+++ b/.publish/ui/components/Pagination.wrn
@@ -1,5 +1,8 @@
component Pagination {
props {
+ @event change = function
+ @event previous = function
+ @event next = function
size = "default"
color = "primary"
label = "Pagination"
diff --git a/.publish/ui/components/Popover.wrn b/.publish/ui/components/Popover.wrn
index e53b737f..2b196a00 100644
--- a/.publish/ui/components/Popover.wrn
+++ b/.publish/ui/components/Popover.wrn
@@ -1,5 +1,7 @@
component Popover {
props {
+ @event open = function
+ @event close = function
size = "default"
color = "primary"
title = "Popover"
diff --git a/.publish/ui/components/RangeSlider.wrn b/.publish/ui/components/RangeSlider.wrn
index 2c04e82f..f501e7bb 100644
--- a/.publish/ui/components/RangeSlider.wrn
+++ b/.publish/ui/components/RangeSlider.wrn
@@ -1,20 +1,68 @@
component RangeSlider {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
size = "default"
color = "primary"
- label = "Range Slider"
+ id = ""
name = ""
- value = ""
+ label = "Range"
+ hiddenLabel = false
placeholder = ""
- type = "range"
- min = ""
- max = ""
- step = ""
+ variant = "normal"
+ icon = ""
+ iconPosition = "start"
+ value = 50
+ min = 0
+ max = 100
+ step = 1
+ showValue = true
+ showBounds = true
+ showSteps = false
+ marks = []
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
+ readonly = false
disabled = false
required = false
class = ""
}
+ state currentValue = value
+ functions {
+ function percent() { if (Number(max) === Number(min)) { return 0 } return (Number(currentValue) - Number(min)) / (Number(max) - Number(min)) * 100 }
+ function setValue(nextValue, sourceEvent, commit, detail, root, slider, input, output, progressValue) { if (readonly || disabled) { return } currentValue = Number(nextValue); root = sourceEvent.currentTarget.closest(".wire-next--range-slider"); if (root) { slider = root.querySelector("[role=slider]"); input = root.querySelector("input[name='" + name + "']"); output = root.querySelector("output"); progressValue = (currentValue - Number(min)) / (Number(max) - Number(min)) * 100; if (slider) { slider.setAttribute("aria-valuenow", String(currentValue)); slider.style.setProperty("--wire-range-progress", progressValue + "%") } if (input) { input.value = String(currentValue) } if (output) { output.textContent = String(currentValue) } } detail = { value: currentValue, min: min, max: max, step: step, name: name, sourceEvent: sourceEvent }; $emit("input", detail); if (commit) { $emit("change", detail) } }
+ function valueFromPointer(sourceEvent, rect, ratio) { rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); return Number(min) + ratio * (Number(max) - Number(min)) }
+ function beginSlide(sourceEvent, rect, ratio, rawValue) { if (readonly || disabled) { return } sourceEvent.currentTarget.setPointerCapture(sourceEvent.pointerId); rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function moveSlide(sourceEvent, rect, ratio, rawValue) { if (!sourceEvent.currentTarget.hasPointerCapture(sourceEvent.pointerId)) { return } rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function endSlide(sourceEvent, rect, ratio, rawValue) { rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); if (sourceEvent.currentTarget.hasPointerCapture(sourceEvent.pointerId)) { sourceEvent.currentTarget.releasePointerCapture(sourceEvent.pointerId) } $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function selectMark(sourceEvent, root, slider, input, output, nextValue, progressValue, detail) { if (readonly || disabled) { return } root = sourceEvent.currentTarget.closest(".wire-next--range-slider"); slider = root.querySelector(".wire-next__custom-slider"); input = root.querySelector(".wire-next__range-value"); output = root.querySelector("output"); nextValue = Number(sourceEvent.currentTarget.dataset.value); currentValue = nextValue; progressValue = (nextValue - Number(min)) / (Number(max) - Number(min)) * 100; slider.setAttribute("aria-valuenow", String(nextValue)); slider.style.setProperty("--wire-range-progress", progressValue + "%"); input.setAttribute("value", String(nextValue)); output.replaceChildren(String(nextValue)); detail = { value: nextValue, min: min, max: max, step: step, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
+ function handleKey(sourceEvent) { if (sourceEvent.key === "ArrowRight") { sourceEvent.preventDefault(); currentValue = Math.min(Number(max), Number(currentValue) + Number(step)); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) } if (sourceEvent.key === "ArrowLeft") { sourceEvent.preventDefault(); currentValue = Math.max(Number(min), Number(currentValue) - Number(step)); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) } if (sourceEvent.key === "Home") { sourceEvent.preventDefault(); currentValue = Number(min); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) } if (sourceEvent.key === "End") { sourceEvent.preventDefault(); currentValue = Number(max); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) } }
+ function emitFocus(nameEvent, sourceEvent) { $emit(nameEvent, { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function decreaseValue(sourceEvent) { currentValue = Math.max(Number(min), Number(currentValue) - Number(step)); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function increaseValue(sourceEvent) { currentValue = Math.min(Number(max), Number(currentValue) + Number(step)); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/Rating.wrn b/.publish/ui/components/Rating.wrn
index 1298a069..a92de2af 100644
--- a/.publish/ui/components/Rating.wrn
+++ b/.publish/ui/components/Rating.wrn
@@ -1,5 +1,7 @@
component Rating {
props {
+ @event input = function
+ @event change = function
size = "default"
color = "primary"
title = "Rating"
diff --git a/.publish/ui/components/Scrollspy.wrn b/.publish/ui/components/Scrollspy.wrn
index cbde5bae..305d2d72 100644
--- a/.publish/ui/components/Scrollspy.wrn
+++ b/.publish/ui/components/Scrollspy.wrn
@@ -1,5 +1,6 @@
component Scrollspy {
props {
+ @event change = function
size = "default"
color = "primary"
label = "Scrollspy"
diff --git a/.publish/ui/components/SearchBox.wrn b/.publish/ui/components/SearchBox.wrn
index e319a93a..941e22f3 100644
--- a/.publish/ui/components/SearchBox.wrn
+++ b/.publish/ui/components/SearchBox.wrn
@@ -1,5 +1,10 @@
component SearchBox {
props {
+ @event input = function
+ @event change = function
+ @event search = function
+ @event submit = function
+ @event clear = function
size = "default"
color = "primary"
label = "Search Box"
diff --git a/.publish/ui/components/Sidebar.wrn b/.publish/ui/components/Sidebar.wrn
index 150b8395..32bcbc99 100644
--- a/.publish/ui/components/Sidebar.wrn
+++ b/.publish/ui/components/Sidebar.wrn
@@ -1,5 +1,8 @@
component Sidebar {
props {
+ @event toggle = function
+ @event open = function
+ @event close = function
size = "default"
color = "primary"
label = "Sidebar"
diff --git a/.publish/ui/components/Stepper.wrn b/.publish/ui/components/Stepper.wrn
index d279d4ae..725ab1c2 100644
--- a/.publish/ui/components/Stepper.wrn
+++ b/.publish/ui/components/Stepper.wrn
@@ -1,5 +1,9 @@
component Stepper {
props {
+ @event change = function
+ @event previous = function
+ @event next = function
+ @event complete = function
size = "default"
color = "primary"
label = "Stepper"
diff --git a/.publish/ui/components/Tabs.wrn b/.publish/ui/components/Tabs.wrn
index 7bdfea2b..a9270a70 100644
--- a/.publish/ui/components/Tabs.wrn
+++ b/.publish/ui/components/Tabs.wrn
@@ -1,5 +1,7 @@
component Tabs {
props {
+ @event change = function
+ @event select = function
size = "default"
color = "primary"
label = "Tabs"
diff --git a/.publish/ui/components/TimePicker.wrn b/.publish/ui/components/TimePicker.wrn
index 79dc66a7..64398d44 100644
--- a/.publish/ui/components/TimePicker.wrn
+++ b/.publish/ui/components/TimePicker.wrn
@@ -1,20 +1,63 @@
component TimePicker {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
+ @event open = function
+ @event close = function
+ @event invalid = function
size = "default"
color = "primary"
- label = "Time Picker"
+ id = ""
name = ""
+ label = "Time"
+ hiddenLabel = false
value = ""
placeholder = ""
- type = "time"
+ variant = "normal"
+ icon = "icon-[lucide--clock-3]"
+ iconPosition = "end"
+ helperText = ""
+ cornerHint = ""
+ error = ""
+ inline = false
min = ""
max = ""
step = ""
+ format = "24"
+ minuteStep = 5
+ hours = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
+ minutes = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
+ readonly = false
disabled = false
required = false
class = ""
}
+ state currentValue = value
+ state selectedHour = value ? value.split(":")[0] : "00"
+ state selectedMinute = value ? value.split(":")[1] : "00"
+ state expanded = false
+ functions {
+ function commit(part, nextValue, sourceEvent, next, detail) { if (part === "hour") { selectedHour = String(nextValue).padStart(2, "0") } if (part === "minute") { selectedMinute = String(nextValue).padStart(2, "0") } next = selectedHour + ":" + selectedMinute; if ((min && next < min) || (max && next > max)) { return } currentValue = next; detail = { value: currentValue, hour: selectedHour, minute: selectedMinute, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
+ function selectTimePart(sourceEvent, root, input, parts, hourValue, minuteValue, next, trigger, detail) { root = sourceEvent.currentTarget.closest(".wire-next--time-picker"); input = root.querySelector(".wire-next__time-value"); parts = String(input.value || value || "00:00").split(":"); hourValue = sourceEvent.currentTarget.dataset.part === "hour" ? sourceEvent.currentTarget.dataset.value : parts[0]; minuteValue = sourceEvent.currentTarget.dataset.part === "minute" ? sourceEvent.currentTarget.dataset.value : parts[1]; next = hourValue + ":" + minuteValue; if ((min && next < min) || (max && next > max)) { return } currentValue = next; input.setAttribute("value", next); trigger = root.querySelector(".wire-next__time-trigger span"); if (trigger) { trigger.replaceChildren(next) } sourceEvent.currentTarget.setAttribute("aria-pressed", "true"); detail = { value: next, hour: hourValue, minute: minuteValue, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
+ function openPicker(sourceEvent) { expanded = true; $emit("open", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function closePicker(sourceEvent) { expanded = false; $emit("close", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function handleFocus(sourceEvent) { $emit("focus", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function handleBlur(sourceEvent) { $emit("blur", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
+ function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
+ }
view {
-
+
}
}
diff --git a/.publish/ui/components/Timeline.wrn b/.publish/ui/components/Timeline.wrn
index e7db15c1..ccf30f46 100644
--- a/.publish/ui/components/Timeline.wrn
+++ b/.publish/ui/components/Timeline.wrn
@@ -1,5 +1,6 @@
component Timeline {
props {
+ @event select = function
size = "default"
color = "primary"
title = "Timeline"
diff --git a/.publish/ui/components/Toast.wrn b/.publish/ui/components/Toast.wrn
index 0b52e5bf..bda42b49 100644
--- a/.publish/ui/components/Toast.wrn
+++ b/.publish/ui/components/Toast.wrn
@@ -1,5 +1,7 @@
component Toast {
props {
+ @event dismiss = function
+ @event action = function
size = "default"
color = "primary"
title = "Toast"
diff --git a/.publish/ui/components/ToastNotifications.wrn b/.publish/ui/components/ToastNotifications.wrn
index f786700e..d49d5547 100644
--- a/.publish/ui/components/ToastNotifications.wrn
+++ b/.publish/ui/components/ToastNotifications.wrn
@@ -1,5 +1,9 @@
component ToastNotifications {
props {
+ @event add = function
+ @event dismiss = function
+ @event clear = function
+ @event action = function
size = "default"
color = "primary"
title = "Toast Notifications"
diff --git a/.publish/ui/components/ToggleCount.wrn b/.publish/ui/components/ToggleCount.wrn
index 7003bda2..0a858af9 100644
--- a/.publish/ui/components/ToggleCount.wrn
+++ b/.publish/ui/components/ToggleCount.wrn
@@ -2,19 +2,236 @@ component ToggleCount {
props {
size = "default"
color = "primary"
- label = "Toggle Count"
- name = ""
- value = ""
- placeholder = ""
- type = "text"
- min = ""
- max = ""
- step = ""
- disabled = false
- required = false
+ variant = "segmented"
class = ""
+
+ name = "billing-cycle"
+ value = "monthly"
+ firstValue = "monthly"
+ firstLabel = "Monthly"
+ secondValue = "annual"
+ secondLabel = "Annual"
+ ariaLabel = "Billing frequency"
+
+ items = []
+ currency = "$"
+ suffix = ""
+ firstValueKey = "monthly"
+ secondValueKey = "annual"
+ emptyValue = "—"
+
+ align = "end"
+ fullWidth = true
+ disabled = false
+ animate = true
+ animationDuration = 450
+ animationSteps = 18
+
+ @event change = function
+ @event toggle = function
}
+
+ state selectedValue = value
+
+ functions {
+ function isFirstSelected() {
+ return selectedValue === firstValue
+ }
+
+ function isSecondSelected() {
+ return selectedValue === secondValue
+ }
+
+ function displayValue(item) {
+ if (isSecondSelected()) {
+ return item[secondValueKey] !== undefined
+ ? item[secondValueKey]
+ : emptyValue
+ }
+
+ return item[firstValueKey] !== undefined
+ ? item[firstValueKey]
+ : emptyValue
+ }
+
+ function dispatchToggleEvent(sourceEvent, previousValue, root, customEvent) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("change", true, false, {
+ component: "ToggleCount",
+ name: name,
+ value: selectedValue,
+ previousValue: previousValue,
+ firstValue: firstValue,
+ secondValue: secondValue
+ })
+ root.dispatchEvent(customEvent)
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent("toggle", true, false, {
+ component: "ToggleCount",
+ name: name,
+ value: selectedValue,
+ previousValue: previousValue,
+ firstValue: firstValue,
+ secondValue: secondValue
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function selectValue(sourceEvent, nextValue, previousValue) {
+ if (disabled || selectedValue === nextValue) {
+ return
+ }
+
+ previousValue = selectedValue
+ selectedValue = nextValue
+
+ if (
+ animate &&
+ !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+ ) {
+ animateDisplayedValues(sourceEvent, previousValue)
+ }
+
+ dispatchToggleEvent(sourceEvent, previousValue)
+ }
+
+ function animateDisplayedValues(sourceEvent, previousValue, root, nodes) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
+
+ if (!root) {
+ return
+ }
+
+ nodes = root.querySelectorAll("[data-toggle-count-value]")
+ animateValueAt(nodes, 0, previousValue)
+ }
+
+ function animateValueAt(nodes, index, previousValue, node, fromValue, toValue) {
+ if (index >= nodes.length) {
+ return
+ }
+
+ node = nodes[index]
+ fromValue = Number(
+ previousValue === secondValue
+ ? node.getAttribute("data-second-value")
+ : node.getAttribute("data-first-value")
+ )
+ toValue = Number(
+ selectedValue === secondValue
+ ? node.getAttribute("data-second-value")
+ : node.getAttribute("data-first-value")
+ )
+
+ if (!Number.isNaN(fromValue) && !Number.isNaN(toValue)) {
+ animateValueFrame(node, fromValue, toValue, 0)
+ }
+
+ animateValueAt(nodes, index + 1, previousValue)
+ }
+
+ function animateValueFrame(node, fromValue, toValue, frame, totalFrames, nextValue) {
+ totalFrames = Math.max(1, Number(animationSteps) || 1)
+
+ if (frame >= totalFrames) {
+ node.replaceChildren(String(toValue))
+ return
+ }
+
+ nextValue = Math.round(
+ fromValue +
+ (toValue - fromValue) * (frame / totalFrames)
+ )
+ node.replaceChildren(String(nextValue))
+
+ setTimeout(
+ animateValueFrame,
+ Math.max(1, Number(animationDuration) / totalFrames),
+ node,
+ fromValue,
+ toValue,
+ frame + 1
+ )
+ }
+
+ function toggleValue(sourceEvent) {
+ selectValue(
+ sourceEvent,
+ isFirstSelected() ? secondValue : firstValue
+ )
+ }
+ }
+
view {
-
+
}
}
diff --git a/.publish/ui/components/TreeView.wrn b/.publish/ui/components/TreeView.wrn
index e0bab164..d04a730b 100644
--- a/.publish/ui/components/TreeView.wrn
+++ b/.publish/ui/components/TreeView.wrn
@@ -1,5 +1,9 @@
component TreeView {
props {
+ @event select = function
+ @event toggle = function
+ @event expand = function
+ @event collapse = function
size = "default"
color = "primary"
title = "Tree View"
diff --git a/.publish/ui/components/WysiwygEditor.wrn b/.publish/ui/components/WysiwygEditor.wrn
index 2114ab00..dfb91935 100644
--- a/.publish/ui/components/WysiwygEditor.wrn
+++ b/.publish/ui/components/WysiwygEditor.wrn
@@ -1,5 +1,9 @@
component WysiwygEditor {
props {
+ @event input = function
+ @event change = function
+ @event focus = function
+ @event blur = function
size = "default"
color = "primary"
title = "Wysiwyg Editor"
diff --git a/.publish/ui/components/alert.wrn b/.publish/ui/components/alert.wrn
index 152a419d..ba2e904b 100644
--- a/.publish/ui/components/alert.wrn
+++ b/.publish/ui/components/alert.wrn
@@ -1,19 +1,142 @@
component Alert {
props {
size = "default"
- color = "primary"
+ color = "info"
+ variant = "soft"
+ class = ""
+ radius = "md"
+ shadow = "sm"
+
title = "Alert"
description = ""
items = []
- variant = "default"
- class = ""
+ actions = []
+
+ showIcon = false
+ icon = ""
+ dismissible = false
+ dismissLabel = "Dismiss alert"
+ role = "alert"
+ live = "polite"
+
+ linkLabel = ""
+ linkHref = ""
+ actionLabel = ""
+ actionHref = ""
+ compact = false
+
+ @event dismiss = function
+ @event action = function
}
+
+ state visible = true
+
+ functions {
+ function dispatchAlertEvent(sourceEvent, eventName, action, root, customEvent) {
+ root = sourceEvent.currentTarget.closest("[data-wrn-alert]")
+
+ if (!root) {
+ return
+ }
+
+ customEvent = document.createEvent("CustomEvent")
+ customEvent.initCustomEvent(eventName, true, false, {
+ component: "Alert",
+ title: title,
+ color: color,
+ variant: variant,
+ action: action
+ })
+ root.dispatchEvent(customEvent)
+ }
+
+ function dismissAlert(sourceEvent) {
+ visible = false
+ dispatchAlertEvent(sourceEvent, "dismiss", null)
+ }
+
+ function selectAction(sourceEvent, action) {
+ dispatchAlertEvent(sourceEvent, "action", action)
+ }
+ }
+
view {
- {description}
{/if} - {#if items}{#each items as item}{item.label}{/each}
{/if}
- {description}
{/if} - {#if items}{#each items as item}{item.label}{/each}
{/if}
-
+ {#each items as item}
+
+ {#if item.imageSrc}
+
+ {/each}
+
+ {:else if visible}
+
+
+
+ {/if}
+
+ {#if item.title}
+ {#if item.footer}{/if}
+ {item.title}
{/if} + {#if item.description}{item.description}
{/if} +
+ 
+
+
+ {:else}
+ {#if header || headerActions.length > 0 || dismissible}
+
+
+
+ {/if}
+
+ {#if alertTitle || alertDescription}
+
+ {/if}
+
+
+ {#if empty}
+
+
+ {#if footer}{/if}
+
+ {#if imageSrc && imagePosition === "bottom"}
+
+
+ {emptyTitle}
+
+ {:else}
+ {#if title}{title}
{/if} + {#if subtitle}{subtitle}{/if} + {#if description}{description}
{/if} +
+
+
+ {/if}
+ {/if}
+ {title}
{description}
Already have an account? Sign in
+
+
+ Account security
+Signed in as {user.displayName || user.username || user.id}
+
+
+ Support impersonation
The banner remains visible while an audited support session is active.
+
+
+
+ {#each ["Password and magic links", "Email, SMS, TOTP and recovery", "Passkeys and OAuth", "Sessions and trusted devices", "Adaptive CAPTCHA risk", "Security event audit"] as feature}
+
+
+
+ @wrnexus/auth
+Complete authentication for WRNexusJS
+Password login, verification, recovery, OTP, authenticator apps, recovery codes, passkeys, OAuth linking, devices, sessions, risk, and audit events.
+ +{feature}
(
+ path: P,
+ ...args: keyof Routes[P] extends never
+ ? []
+ : Record No components found. 9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API. Theme-aware, responsive toggle count component. 27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API. Theme-aware, responsive accordion component. Theme-aware, responsive alert component. Theme-aware, responsive avatar component. Theme-aware, responsive avatar group component. Theme-aware, responsive badge component. Theme-aware, responsive blockquote component. Theme-aware, responsive button group component. Theme-aware, responsive card component. Theme-aware, responsive carousel component. Theme-aware, responsive chat bubble component. Theme-aware, responsive collapse component. Theme-aware, responsive date picker component. Theme-aware, responsive device frame component. Theme-aware, responsive file upload progress component. Theme-aware, responsive accordion component. Change any prop and inspect the server-rendered component immediately.AccordionAlertAvatarAvatar GroupBadgeBlockquoteButtonButton GroupCardCarouselChat BubbleCollapseDate PickerDevice FrameFile Upload ProgressLegend IndicatorListList GroupMarqueeProgressRatingSkeletonSpinnerStyled IconTimelineToastTree View
+ AccordionCompleteAlertCompleteAvatarCompleteAvatar GroupCompleteBadgeCompleteBlockquoteCompleteButtonCompleteButton GroupCompleteCardCompleteCarouselCompleteChat BubbleCompleteCollapseCompleteDate PickerCompleteDevice FrameCompleteFile Upload ProgressCompleteLegend IndicatorPendingListPendingList GroupPendingMarqueePendingProgressPendingRatingPendingSkeletonPendingSpinnerPendingStyled IconPendingTimelinePendingToastPendingTree ViewPending
Advanced Forms
-
+
Advanced Forms
-
+
Toggle Count
Base
-
-
+ Composable content area.
Base
-
+
Accordion
-
+
Base
-
+
Alert
-
+
Base
-
+
Avatar
-
+
Base
-
+
Avatar Group
-
+
Base
-
+
Badge
-
+
Base
-
+
Blockquote
-
+
Base
-
+
Button Group
-
+
Base
-
+
Card
-
+
Base
-
+
Carousel
-
+
Base
-
+
Chat Bubble
-
+
Base
-
+
Collapse
-
+
Base
-
+
Date Picker
-
+
Base
-
+
Device Frame
-
+
Base
-
+
File Upload Progress
Accordion
5 props1 slots0 eventsTheme readyResponsive
+ 17 props0 slots3 eventsTheme readyResponsive
Interactive playground
Configure Accordion
Live preview
-
+ Composable content area.
+ ]'
+ defaultOpen='[
+ "first"
+ ]'
+ contentItalic="true"
+/>
<Accordion
+ id="accordion-example-1"
items='[
{
- "id": "accordion-0-1",
- "key": "accordion-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
},
{
- "id": "accordion-0-2",
- "key": "accordion-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
}
- ]'>
- <!-- Add default slot content here -->
-</Accordion>
Live examples
Designed for real product surfaces
Compare configurations and resize the browser to check responsive behavior.
Recommended
+ Production default
Balanced spacing, hierarchy, and content for the most common product workflow.
Basic usage
01
Default accordion
Open one section at a time with a clear plus and minus indicator.
Live preview
- Composable content area.
<Accordion
+ id="accordion-example-1"
items='[
{
- "id": "accordion-0-1",
- "key": "accordion-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
},
{
- "id": "accordion-0-2",
- "key": "accordion-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
}
- ]'>
- <!-- Add default slot content here -->
-</Accordion>Dense UI
+ Compact application
A tighter variation for dashboards, side panels, tables, and operational interfaces.
Behavior
02
Always open
Allow several content sections to remain expanded at the same time.
Live preview
- Composable content area.
<Accordion
- size="sm"
+ id="accordion-example-2"
items='[
{
- "id": "accordion-1-1",
- "key": "accordion-1-1",
- "value": "primary",
- "label": "Secondary workflow",
- "title": "Secondary workflow",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 24,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
},
{
- "id": "accordion-1-2",
- "key": "accordion-1-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 48,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
}
- ]'>
- <!-- Add default slot content here -->
-</Accordion>Extended
+ Rich configuration
A more expressive variation using additional data, stronger emphasis, and optional states.
Composition
03
Nested accordion
Place a coordinated secondary accordion inside an expanded parent section.
Live preview
- Rich supporting content with additional context.
<Accordion
- size="lg"
+ id="accordion-example-3"
items='[
{
- "id": "accordion-2-1",
- "key": "accordion-2-1",
- "value": "primary",
- "label": "Advanced workflow",
- "title": "Advanced workflow",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 32,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 1",
- "items": [
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.",
+ "children": [
{
- "label": "Nested option A",
- "value": "nested-a"
+ "value": "sub-first",
+ "label": "Sub accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
},
{
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
+ "value": "sub-second",
+ "label": "Sub accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
},
{
- "label": "API reference",
- "href": "#api-reference"
+ "value": "sub-third",
+ "label": "Sub accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
}
- ],
- "values": [
- "Included",
- "Unlimited"
]
},
{
- "id": "accordion-2-2",
- "key": "accordion-2-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": true,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 64,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
}
- ]'>
- <!-- Add default slot content here -->
-</Accordion>Indicators
+ 04
+ Without an indicator
Use a minimal text-only accordion when visual indicators are unnecessary.
+
+ Component usage.wrn
+
+
+
+
+ Live preview
+
+
<Accordion
+ id="accordion-example-4"
+ items='[
+ {
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ }
+ ]'
+ defaultOpen='[
+ "first"
+ ]'
+ showIndicator="false"
+ contentItalic="true"
+/>Indicators
+ 05
+ Chevron indicator
Communicate expanded state with a rotating chevron.
+
+ Component usage.wrn
+
+
+
+
+ Live preview
+
+
<Accordion
+ variant="chevron"
+ id="accordion-example-5"
+ items='[
+ {
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ }
+ ]'
+ defaultOpen='[
+ "first"
+ ]'
+ indicator="chevron"
+ contentItalic="true"
+/>Layout
+ 06
+ Separated title and indicator
Place the title and state indicator at opposite ends of each trigger.
+
+ Component usage.wrn
+
+
+
+
+ Live preview
+
+
<Accordion
+ variant="chevron"
+ id="accordion-example-6"
+ items='[
+ {
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ }
+ ]'
+ defaultOpen='[
+ "first"
+ ]'
+ indicator="chevron"
+ indicatorPosition="end"
+ contentItalic="true"
+/>Surface
+ 07
+ Bordered accordion
Group sections inside one bordered surface with dividing lines.
+
+ Component usage.wrn
+
+
+
+
+ Live preview
+
+
<Accordion
+ id="accordion-example-7"
+ items='[
+ {
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ }
+ ]'
+ defaultOpen='[
+ "first"
+ ]'
+ bordered="true"
+ contentItalic="true"
+/>Surface
+ 08
+ Bordered open content
Render each section as an independent rounded card.
+
+ Component usage.wrn
+
+
+
+
+ Live preview
+
+
<Accordion
+ id="accordion-example-8"
+ items='[
+ {
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ }
+ ]'
+ defaultOpen='[
+ "second"
+ ]'
+ indicatorPosition="end"
+ separated="true"
+ contentItalic="true"
+/>States
+ 09
+ Disabled section
Disable an individual section while keeping the rest of the accordion interactive.
+
+ Component usage.wrn
+
+
+ Live preview
+
+
<Accordion
+ id="accordion-example-9"
+ items='[
+ {
+ "value": "first",
+ "label": "Accordion #1",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ },
+ {
+ "value": "second",
+ "label": "Accordion #2",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.",
+ "disabled": true
+ },
+ {
+ "value": "third",
+ "label": "Accordion #3",
+ "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+ }
+ ]'
+ defaultOpen='[
+ "first"
+ ]'
+ contentItalic="true"
+/>Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
items | string | [] | No |
multiple | boolean | false | No |
class | string | "" | No |
Component events
Events
Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.
@changeFires when the component value or selection changes.@openFires when the component opens.@closeFires when the component closes.const component = document.querySelector('[data-wrn-events]')
+
+component.addEventListener('change', (event) => {
+ console.log(event.detail)
+})Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
variant | string | "default" | No |
class | string | "" | No |
id | string | "accordion" | No |
items | string | [] | No |
defaultOpen | string | [] | No |
multiple | boolean | false | No |
alwaysOpen | boolean | false | No |
disabled | boolean | false | No |
indicator | string | "plus" | No |
indicatorPosition | string | "start" | No |
showIndicator | boolean | true | No |
bordered | boolean | false | No |
separated | boolean | false | No |
flush | boolean | false | No |
contentItalic | boolean | false | No |