release: WRNexusJS 0.3.5

packages/ui/component-migrations.json

@@ -0,0 +1,5 @@
+{
+  "generatedFrom": "full component catalog reset",
+  "removedCount": 0,
+  "replacements": {}
+}

packages/ui/components/AcceptAllCookiesButton.wrn

@@ -1,11 +0,0 @@
-component AcceptAllCookiesButton {
-  props {
-    label = "Action"
-    href = ""
-    type = "button"
-    variant = "primary"
-    disabled = false
-    class = ""
-  }
-  view { <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span> }
-}

packages/ui/components/AccessibleAccordion.wrn

@@ -1,13 +0,0 @@
-component AccessibleAccordion {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AccessibleCarousel.wrn

@@ -1,13 +0,0 @@
-component AccessibleCarousel {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AccessibleChartSummary.wrn

@@ -1,15 +0,0 @@
-component AccessibleChartSummary {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view {
-    <article class="wire-card wire-catalog-card {class}"><div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60"><div class="flex items-center gap-2 text-sm font-bold"><span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true"></span>Chart summary</div><dl class="grid gap-3"><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Delivered</dt><dd class="font-bold">96.8%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Engaged</dt><dd class="font-bold">42.1%</dd></div><div class="flex items-center justify-between gap-4"><dt class="text-sm text-slate-500">Converted</dt><dd class="font-bold">8.7%</dd></div></dl></div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
-  }
-}

packages/ui/components/AccessibleDialog.wrn

@@ -1,10 +0,0 @@
-component AccessibleDialog {
-  props {
-    title = ""
-    description = ""
-    open = false
-    closeLabel = "Close"
-    class = ""
-  }
-  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
-}

packages/ui/components/AccessibleErrorSummary.wrn

@@ -1,13 +0,0 @@
-component AccessibleErrorSummary {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AccessibleIcon.wrn

@@ -1,13 +0,0 @@
-component AccessibleIcon {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AccessibleMenu.wrn

@@ -1,10 +0,0 @@
-component AccessibleMenu {
-  props {
-    title = ""
-    description = ""
-    open = false
-    closeLabel = "Close"
-    class = ""
-  }
-  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
-}

packages/ui/components/AccessibleTabs.wrn

@@ -1,13 +0,0 @@
-component AccessibleTabs {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AccessibleTooltip.wrn

@@ -1,13 +0,0 @@
-component AccessibleTooltip {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/Accordion.wrn

@@ -1,31 +1,15 @@
 component Accordion {
-    props {
-        class = ""
-        title = "Question"
-        open = false
-    }
-
-    state expanded = open
-
-    view {
-        <div class="border-b border-slate-200 dark:border-slate-800 {class}" >
-            <button
-                type="button"
-                class="flex w-full items-center justify-between gap-4 py-5 text-left font-semibold"
-                aria-expanded="{expanded}"
-                @click="expanded = !expanded"
-            >
-                <span >
-                    {title}
-                </span>
-                <span class="text-xl transition-transform {expanded ? 'rotate-45' : ''}">+</span>
-            </button>
-            <div
-                data-show="expanded"
-                class="pb-5 text-slate-600 dark:text-slate-300"
-            >
-                <slot />
-            </div>
-        </div>
-    }
+  props {
+    size = "default"
+    color = "primary"
+    items = []
+    multiple = false
+    class = ""
+  }
+  view {
+    <div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--accordion {class}">
+      {#each items as item}<details open="{item.open}"><summary>{item.label}</summary><div>{item.content}</div></details>{/each}
+      <slot />
+    </div>
+  }
 }

packages/ui/components/AccountMenu.wrn

@@ -1,10 +0,0 @@
-component AccountMenu {
-  props {
-    title = ""
-    description = ""
-    open = false
-    closeLabel = "Close"
-    class = ""
-  }
-  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
-}

packages/ui/components/AccountStatusBanner.wrn

@@ -1,11 +0,0 @@
-component AccountStatusBanner {
-  props {
-    label = "AccountStatus" 
-    title = ""
-    description = ""
-    value = ""
-    variant = "default"
-    class = ""
-  }
-  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
-}

packages/ui/components/ActionMenu.wrn

@@ -1,10 +0,0 @@
-component ActionMenu {
-  props {
-    title = ""
-    description = ""
-    open = false
-    closeLabel = "Close"
-    class = ""
-  }
-  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
-}

packages/ui/components/ActiveFilterList.wrn

@@ -1,10 +0,0 @@
-component ActiveFilterList {
-  props {
-    title = ""
-    description = ""
-    empty = false
-    emptyText = "No items available."
-    class = ""
-  }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
-}

packages/ui/components/ActivityList.wrn

@@ -1,10 +0,0 @@
-component ActivityList {
-  props {
-    title = ""
-    description = ""
-    empty = false
-    emptyText = "No items available."
-    class = ""
-  }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
-}

packages/ui/components/AddOnCard.wrn

@@ -1,13 +0,0 @@
-component AddOnCard {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AddressInput.wrn

@@ -1,16 +0,0 @@
-component AddressInput {
-  props {
-    label = "Address" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/AddressPreview.wrn

@@ -1,13 +0,0 @@
-component AddressPreview {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AdvancedDatePicker.wrn

@@ -0,0 +1,19 @@
+component AdvancedDatePicker {
+  props {
+    size = "default"
+    color = "primary"
+    title = "Advanced Date Picker"
+    description = ""
+    items = []
+    variant = "default"
+    class = ""
+  }
+  view {
+    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--advanced-date-picker wire-next--variant-{variant} {class}">
+      {#if title}<strong>{title}</strong>{/if}
+      {#if description}<p>{description}</p>{/if}
+      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
+      <slot />
+    </section>
+  }
+}

packages/ui/components/AdvancedFilterBuilder.wrn

@@ -1,13 +0,0 @@
-component AdvancedFilterBuilder {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AdvancedRangeSlider.wrn

@@ -0,0 +1,19 @@
+component AdvancedRangeSlider {
+  props {
+    size = "default"
+    color = "primary"
+    title = "Advanced Range Slider"
+    description = ""
+    items = []
+    variant = "default"
+    class = ""
+  }
+  view {
+    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--advanced-range-slider wire-next--variant-{variant} {class}">
+      {#if title}<strong>{title}</strong>{/if}
+      {#if description}<p>{description}</p>{/if}
+      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
+      <slot />
+    </section>
+  }
+}

packages/ui/components/AdvancedSelect.wrn

@@ -0,0 +1,456 @@
+component AdvancedSelect {
+  props {
+    size = "default"
+    color = "primary"
+    label = "Advanced Select"
+    name = ""
+    value = ""
+    values = []
+    options = []
+    groups = []
+    placeholder = "Select an option"
+    placeholderIcon = ""
+    searchPlaceholder = "Search options…"
+    multiple = false
+    searchable = true
+    defaultOpen = false
+    clearable = true
+    allowEmpty = true
+    tags = false
+    disabled = false
+    required = false
+    invalid = false
+    validationMessage = ""
+    helpText = ""
+    loading = false
+    loadingLabel = "Loading options…"
+    emptyLabel = "No options found"
+    selectedOptionsLabel = "Selected options"
+    clearLabel = "Clear selection"
+    createLabel = "Create"
+    loadMoreLabel = "Load more"
+    searchMode = "contains"
+    searchFields = "label,description"
+    minSearchLength = 0
+    searchResultLimit = 0
+    maxSelections = 0
+    showCounter = false
+    counterTemplate = "{selected} selected"
+    optionTemplate = "default"
+    selectedTemplate = "default"
+    closeOnSelect = true
+    scrollToSelected = true
+    fixed = false
+    placement = "bottom"
+    remote = false
+    remoteUrl = ""
+    remoteQueryParam = "q"
+    remoteDebounce = 250
+    remoteAutoLoad = true
+    infinite = false
+    hasMore = false
+    page = 1
+    class = ""
+    @event search = function
+    @event select = function
+    @event change = function
+    @event clear = function
+    @event open = function
+    @event close = function
+    @event load = function
+    @event error = function
+  }
+
+  state open = defaultOpen
+  state query = ""
+  state activeIndex = -1
+  state selectedValue = value
+  state selectedValues = values
+
+  functions {
+    function allOptions() {
+      return [...groups.flatMap((group) => group.options || []), ...options]
+    }
+
+    function searchableText(option) {
+      return ((option.label || "") + " " + (option.description || "")).toLowerCase()
+    }
+
+    function matches(option) {
+      if (!query || query.length < Number(minSearchLength || 0)) {
+        return true
+      }
+      if (searchMode === "startsWith") {
+        return searchableText(option).startsWith(query.toLowerCase())
+      }
+      if (searchMode === "exact") {
+        return searchableText(option) === query.toLowerCase()
+      }
+      return searchableText(option).includes(query.toLowerCase())
+    }
+
+    function matchingOptions(list) {
+      return list.filter((option) => matches(option))
+    }
+
+    function visibleOptions(list) {
+      if (searchResultLimit > 0) {
+        return matchingOptions(list).slice(0, Number(searchResultLimit))
+      }
+      return matchingOptions(list)
+    }
+
+    function flatVisibleOptions() {
+      return visibleOptions(allOptions())
+    }
+
+    function isSelected(option) {
+      return (
+        multiple
+        ? selectedValues.includes(option.value)
+        : selectedValue === option.value
+      )
+    }
+
+    function selectedOptions() {
+      return allOptions().filter((option) => isSelected(option))
+    }
+
+    function selectedCount() {
+      return multiple ? selectedValues.length : selectedValue ? 1 : 0
+    }
+
+    function counterText() {
+      return (
+        maxSelections
+        ? selectedCount() + " / " + maxSelections + " selected"
+        : selectedCount() + " selected"
+      )
+    }
+
+    function selectedText() {
+      return (
+        multiple
+        ? selectedValues.join(", ")
+        : selectedOptions().length
+          ? selectedOptions()[0].label
+          : ""
+      )
+    }
+
+    function triggerText() {
+      return selectedCount() ? selectedText() : placeholder
+    }
+
+    function canSelect(option) {
+      if (option.disabled) {
+        return false
+      }
+      if (!multiple || isSelected(option)) {
+        return true
+      }
+      if (maxSelections <= 0) {
+        return true
+      }
+      return selectedCount() < maxSelections
+    }
+
+    function chooseSingle(option) {
+      if (!canSelect(option)) {
+        return
+      }
+      selectedValue = option.value
+      query = ""
+      if (closeOnSelect) {
+        open = false
+      }
+    }
+
+    function chooseMultiple(option) {
+      if (!canSelect(option)) {
+        return
+      }
+      if (isSelected(option)) {
+        selectedValues = selectedValues.filter((item) => item !== option.value)
+      } else {
+        selectedValues = selectedValues.concat([option.value])
+      }
+      query = ""
+    }
+
+    function chooseOption(option) {
+      if (multiple) {
+        chooseMultiple(option)
+        return
+      }
+      chooseSingle(option)
+    }
+
+    function clearSelection(event) {
+      event.stopPropagation()
+      selectedValue = ""
+      selectedValues = []
+      query = ""
+      open = false
+    }
+
+    function toggle() {
+      if (disabled) {
+        return;
+      };
+      open = !open;
+      activeIndex = open && flatVisibleOptions().length ? 0 : -1;
+    }
+
+    function moveActive(direction) {
+      if (!flatVisibleOptions().length) {
+        return
+      }
+      activeIndex = (activeIndex + direction + flatVisibleOptions().length) % flatVisibleOptions().length
+    }
+
+    function handleKeydown(event) {
+      if (disabled) {
+        return
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault()
+        if (!open) {
+          open = true
+        }
+        moveActive(1)
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault()
+        if (!open) {
+          open = true
+        }
+        moveActive(-1)
+      } else if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault()
+        if (!open) {
+          open = true
+        } else if (activeIndex >= 0) {
+          chooseOption(flatVisibleOptions()[activeIndex])
+        }
+      } else if (event.key === "Escape") {
+        open = false
+      } else if (event.key === "Home" && open) {
+        event.preventDefault()
+        activeIndex = 0
+      } else if (event.key === "End" && open) {
+        event.preventDefault()
+        activeIndex = flatVisibleOptions().length - 1
+      }
+    }
+
+    function optionIndex(option) {
+      return flatVisibleOptions().findIndex((item) => item.value === option.value)
+    }
+  }
+
+  view {
+    <div
+      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--advanced-select {open ? 'wire-next--open' : ''} {fixed ? 'wire-next--advanced-select-fixed' : ''} {invalid ? 'wire-next--invalid' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
+      data-placement="{placement}"
+      data-search-mode="{searchMode}"
+      data-remote="{remote ? 'true' : 'false'}"
+      data-remote-url="{remoteUrl}"
+      data-remote-query-param="{remoteQueryParam}"
+      data-remote-debounce="{remoteDebounce}"
+      data-remote-auto-load="{remoteAutoLoad ? 'true' : 'false'}"
+      data-infinite="{infinite ? 'true' : 'false'}"
+      data-page="{page}"
+      data-wrn-select
+      @focusout="if (!event.currentTarget.contains(event.relatedTarget)) { open = false }"
+    >
+      <div class="wire-next__row">
+        <label id="{name}-label" for="{name}-trigger">{label}</label>
+        <small data-show="showCounter" data-text="counterText()">{counterText()}</small>
+      </div>
+
+      <div class="wire-next__select-control">
+        <button
+          {...attrs}
+          id="{name}-trigger"
+          type="button"
+          class="wire-next__select-trigger"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded="{open}"
+          aria-controls="{name}-listbox"
+          aria-labelledby="{name}-label"
+          aria-invalid="{invalid}"
+          disabled="{disabled}"
+          @click="toggle()"
+          @keydown="handleKeydown(event)"
+        >
+          <span class="wire-next__select-value">
+            <span data-show="!multiple" data-text="triggerText()">{triggerText()}</span>
+            <span
+              data-show="multiple && selectedTemplate === 'count' && selectedCount() > 0"
+              data-text="selectedCount() + ' selected'"
+            >{selectedCount()} selected</span>
+            <span
+              data-show="multiple && selectedTemplate === 'text' && selectedCount() > 0"
+              data-text="selectedText()"
+            >{selectedText()}</span>
+            <span
+              class="wire-next__select-tags"
+              aria-label="{selectedOptionsLabel}"
+              data-show="multiple && selectedTemplate !== 'count' && selectedTemplate !== 'text' && selectedCount() > 0"
+            >
+              {#each allOptions() as option}
+                <span data-show="isSelected(option)">
+                  {#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
+                  {#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
+                  {#if optionTemplate === "color" && option.color}<i class="wire-next__color-dot" style="--option-color: {option.color}"></i>{/if}
+                  {option.label}
+                </span>
+              {/each}
+            </span>
+            <span data-show="multiple && selectedCount() === 0">
+              {#if placeholderIcon}<i class="{placeholderIcon}" aria-hidden="true"></i>{/if}
+              <span class="wire-next__placeholder">{placeholder}</span>
+            </span>
+          </span>
+          <span
+            class="wire-next__select-chevron icon-[lucide--chevrons-up-down]"
+            aria-hidden="true"
+          ></span>
+        </button>
+
+        <button
+          type="button"
+          class="wire-next__clear-select"
+          data-show="clearable && allowEmpty && selectedCount() > 0 && !disabled"
+          aria-label="{clearLabel}"
+          title="{clearLabel}"
+          @click="clearSelection(event)"
+        >
+          <span class="icon-[lucide--x]" aria-hidden="true"></span>
+        </button>
+      </div>
+
+      <div
+        class="wire-next__select-dropdown {fixed ? 'wire-next__select-dropdown--fixed' : ''}"
+        data-show="open"
+        style="{open ? '' : 'display: none'}"
+      >
+          {#if searchable}
+            <label class="wire-next__select-search">
+              <span class="wire-visually-hidden">{searchPlaceholder}</span>
+              <span class="wire-next__search-icon" aria-hidden="true">⌕</span>
+              <input
+                type="search"
+                value="{query}"
+                placeholder="{searchPlaceholder}"
+                autocomplete="off"
+                @input="query = event.target.value; activeIndex = flatVisibleOptions().length ? 0 : -1"
+                @keydown="handleKeydown(event)"
+              />
+            </label>
+          {/if}
+
+          <div
+            class="wire-next__select-message"
+            data-show="remote && query.length !== 0 && query.length < minSearchLength"
+          >Enter at least {minSearchLength} characters.</div>
+          <div class="wire-next__select-message" data-show="loading" role="status">
+            <i class="wire-spinner wire-spinner--inline" aria-hidden="true"></i>
+            {loadingLabel}
+          </div>
+            <div
+              id="{name}-listbox"
+              class="wire-next__select-list"
+              data-show="(!remote || (query.length === 0 && remoteAutoLoad) || query.length >= minSearchLength) && !loading"
+              role="listbox"
+              aria-multiselectable="{multiple}"
+            >
+              {#each groups as group}
+                {#if visibleOptions(group.options || []).length}
+                  <div class="wire-next__option-group" role="group" aria-label="{group.label}">
+                    <div class="wire-next__group-label">{group.label}</div>
+                    {#each group.options || [] as option}
+                      <button
+                        type="button"
+                        class="wire-next__select-option {isSelected(option) ? 'wire-next__select-option--selected' : ''} {optionIndex(option) === activeIndex ? 'wire-next__select-option--active' : ''}"
+                        data-option-value="{option.value}"
+                        data-show="matches(option)"
+                        role="option"
+                        aria-selected="{isSelected(option)}"
+                        disabled="{!canSelect(option)}"
+                        @mouseenter="activeIndex = optionIndex(option)"
+                        @click="chooseOption(option)"
+                      >
+                        {#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
+                        {#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
+                        {#if optionTemplate === "color" && option.color}<i class="wire-next__color-dot" style="--option-color: {option.color}"></i>{/if}
+                        <span><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
+                        <i
+                          class="wire-next__check icon-[lucide--check]"
+                          data-show="isSelected(option)"
+                          aria-hidden="true"
+                        ></i>
+                      </button>
+                    {/each}
+                  </div>
+                {/if}
+              {/each}
+
+              {#each options as option}
+                <button
+                  type="button"
+                  class="wire-next__select-option {isSelected(option) ? 'wire-next__select-option--selected' : ''} {optionIndex(option) === activeIndex ? 'wire-next__select-option--active' : ''}"
+                  data-option-value="{option.value}"
+                  data-show="matches(option)"
+                  role="option"
+                  aria-selected="{isSelected(option)}"
+                  disabled="{!canSelect(option)}"
+                  @mouseenter="activeIndex = optionIndex(option)"
+                  @click="chooseOption(option)"
+                >
+                  {#if optionTemplate === "icon" && option.icon}<i class="{option.icon}" aria-hidden="true"></i>{/if}
+                  {#if optionTemplate === "avatar" && option.avatar}<img src="{option.avatar}" alt="" />{/if}
+                  {#if optionTemplate === "color" && option.color}<i class="wire-next__color-dot" style="--option-color: {option.color}"></i>{/if}
+                  <span><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
+                  <i
+                    class="wire-next__check icon-[lucide--check]"
+                    data-show="isSelected(option)"
+                    aria-hidden="true"
+                  ></i>
+                </button>
+              {/each}
+
+              {#if !loading && !flatVisibleOptions().length}
+                <div class="wire-next__select-message">{emptyLabel}</div>
+              {/if}
+            </div>
+
+          {#if tags && query && !allOptions().some((option) => option.label.toLowerCase() === query.toLowerCase())}
+            <button type="button" class="wire-next__create-option">{createLabel} “{query}”</button>
+          {/if}
+          <button
+            type="button"
+            class="wire-next__load-more"
+            data-wrn-select-load-more
+            data-show="infinite && hasMore"
+          >{loadMoreLabel}</button>
+      </div>
+
+      <input
+        type="hidden"
+        name="{name}"
+        value="{multiple ? selectedValues.join(',') : selectedValue}"
+        required="{required}"
+        aria-describedby="{validationMessage ? `${name}-validation` : helpText ? `${name}-help` : ''}"
+      />
+
+      {#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
+      <small
+        id="{name}-validation"
+        class="wire-next__validation"
+        data-error="{name}"
+      >{validationMessage}</small>
+    </div>
+  }
+}

packages/ui/components/AlertDialog.wrn

@@ -1,10 +0,0 @@
-component AlertDialog {
-  props {
-    title = ""
-    description = ""
-    open = false
-    closeLabel = "Close"
-    class = ""
-  }
-  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
-}

packages/ui/components/AmountInput.wrn

@@ -1,16 +0,0 @@
-component AmountInput {
-  props {
-    label = "Amount" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/AnalyticsDashboardPreview.wrn

@@ -1,83 +0,0 @@
-component AnalyticsDashboardPreview {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-
-  view {
-    <section class="wire-analytics-preview {class}">
-      <div class="wire-analytics-preview__surface">
-        <div class="wire-analytics-preview__visual">
-          {#if image}
-            <img
-              src="{image}"
-              alt="{alt}"
-              class="wire-analytics-preview__image"
-            />
-          {:else}
-            <div
-              class="wire-analytics-preview__chart"
-              role="img"
-              aria-label="Delivery trend rising over seven days"
-            >
-              <div class="wire-analytics-preview__chart-header">
-                <strong>Delivery trend</strong>
-                <span>↗ 18.4%</span>
-              </div>
-
-              <svg
-                class="wire-analytics-preview__chart-svg"
-                viewBox="0 0 700 250"
-                aria-hidden="true"
-              >
-                <defs>
-                  <linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stop-color="currentColor" stop-opacity=".3"></stop>
-                    <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
-                  </linearGradient>
-                </defs>
-                <g fill="none" stroke="var(--wire-color-border,#e2e8f0)">
-                  <path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path>
-                </g>
-                <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
-                <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
-              </svg>
-
-              <div class="wire-analytics-preview__days">
-                <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
-              </div>
-            </div>
-          {/if}
-        </div>
-
-        <div class="wire-analytics-preview__content">
-          {#if eyebrow}
-            <p class="wire-analytics-preview__eyebrow">{eyebrow}</p>
-          {/if}
-
-          {#if title}
-            <h2 class="wire-analytics-preview__title">{title}</h2>
-          {/if}
-
-          {#if description}
-            <p class="wire-analytics-preview__description">{description}</p>
-          {/if}
-
-          <div class="wire-analytics-preview__metrics"><slot /></div>
-
-          {#if href}
-            <a href="{href}" class="wire-analytics-preview__action">
-              {actionLabel}<span aria-hidden="true">→</span>
-            </a>
-          {/if}
-        </div>
-      </div>
-    </section>
-  }
-}

packages/ui/components/AnchorNavigation.wrn

@@ -1,10 +0,0 @@
-component AnchorNavigation {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    align = "start"
-    class = ""
-  }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
-}

packages/ui/components/AnnouncementBar.wrn

@@ -1,96 +0,0 @@
-component AnnouncementBar {
-    props {
-        class: string = ""
-        badge: string = "New"
-        message: string = "WrNexus Organizations is now available."
-        description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
-        href: string = "/organizations"
-        actionLabel: string = "Explore organizations"
-        ariaLabel: string = "Announcement"
-        badgeIcon: string = "icon-[lucide--sparkles]"
-        actionIcon: string = "icon-[lucide--arrow-right]"
-        dismissLabel: string = "Dismiss announcement"
-        showBadge: boolean = true
-        showDescription: boolean = true
-        showAction: boolean = true
-        dismissible: boolean = true
-    }
-
-    state visible = true
-
-    view {
-        <aside
-            role="region"
-            aria-label="{ariaLabel}"
-            class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white {class}"
-            class:hidden="!visible"
-        >
-            <!-- Decorative background -->
-            <div
-                aria-hidden="true"
-                class="pointer-events-none absolute inset-0 overflow-hidden"
-            >
-                <div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10"></div>
-
-                <div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10"></div>
-            </div>
-
-            <div
-                class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
-            >
-                <div class="flex min-w-0 flex-1 items-center justify-center gap-3">
-                    <!-- Badge -->
-                    <span data-show="showBadge"
-                        class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
-                    >
-                        <span class="{badgeIcon} h-3 w-3" aria-hidden="true" ></span>
-
-                        {badge}
-                    </span>
-
-                    <!-- Message -->
-                    <p
-                        class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
-                    >
-                        <span class="font-semibold text-slate-950 dark:text-white">
-                            {message}
-                        </span>
-
-                        <span data-show="showDescription" class="hidden md:inline">
-                            {description}
-                        </span>
-                    </p>
-
-                    <!-- CTA -->
-                    <a data-show="showAction"
-                        href="{href}"
-                        class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
-                    >
-                        {actionLabel}
-
-                        <span class="{actionIcon} h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
-                    </a>
-                </div>
-
-                <!-- Mobile CTA -->
-                <a data-show="showAction"
-                    href="{href}"
-                    aria-label="{actionLabel}"
-                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
-                >
-                    <span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" ></span>
-                </a>
-
-                <!-- Close -->
-                <button data-show="dismissible"
-                    type="button"
-                    @click="visible = false"
-                    aria-label="{dismissLabel}"
-                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
-                >
-                    <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
-                </button>
-            </div>
-        </aside>
-    }
-}

packages/ui/components/ApartmentInput.wrn

@@ -1,16 +0,0 @@
-component ApartmentInput {
-  props {
-    label = "Apartment" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/ApiAuthenticationNotice.wrn

@@ -1,11 +0,0 @@
-component ApiAuthenticationNotice {
-  props {
-    label = "ApiAuthentication" 
-    title = ""
-    description = ""
-    value = ""
-    variant = "default"
-    class = ""
-  }
-  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
-}

packages/ui/components/ApiEndpointCard.wrn

@@ -1,39 +0,0 @@
-component ApiEndpointCard {
-    props {
-        class = ""
-        method = "GET"
-        path = "/api/example"
-        eyebrow = ""
-        title = ""
-        description = ""
-        href = ""
-        actionLabel = "View endpoint"
-    }
-
-    view {
-        <article
-            class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 {class}"
-        >
-            <div class="flex flex-wrap items-center gap-3" >
-                <span
-                    class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
-                >
-                    {method}
-                </span>
-                <code class="text-sm font-semibold">
-                    {title || path}
-                </code>
-            </div>
-            <p
-                data-show="description"
-                class="mt-3 text-sm text-slate-500"
-            >
-                {description}
-            </p>
-            <div class="mt-4">
-                <slot />
-            </div>
-            {#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}
-        </article>
-    }
-}

packages/ui/components/ApiErrorExample.wrn

@@ -1,13 +0,0 @@
-component ApiErrorExample {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/ApiHeaderTable.wrn

@@ -1,10 +0,0 @@
-component ApiHeaderTable {
-  props {
-    title = ""
-    description = ""
-    empty = false
-    emptyText = "No items available."
-    class = ""
-  }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
-}

packages/ui/components/ApiKeyCreateDialog.wrn

@@ -1,10 +0,0 @@
-component ApiKeyCreateDialog {
-  props {
-    title = ""
-    description = ""
-    open = false
-    closeLabel = "Close"
-    class = ""
-  }
-  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
-}

packages/ui/components/ApiKeyDisplay.wrn

@@ -1,13 +0,0 @@
-component ApiKeyDisplay {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/ApiKeyInput.wrn

@@ -1,16 +0,0 @@
-component ApiKeyInput {
-  props {
-    label = "ApiKey" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/ApiMethodBadge.wrn

@@ -1,11 +0,0 @@
-component ApiMethodBadge {
-  props {
-    label = "ApiMethod" 
-    title = ""
-    description = ""
-    value = ""
-    variant = "default"
-    class = ""
-  }
-  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
-}

packages/ui/components/ApiParameterTable.wrn

@@ -1,10 +0,0 @@
-component ApiParameterTable {
-  props {
-    title = ""
-    description = ""
-    empty = false
-    emptyText = "No items available."
-    class = ""
-  }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
-}

packages/ui/components/ApiRateLimitNotice.wrn

@@ -1,11 +0,0 @@
-component ApiRateLimitNotice {
-  props {
-    label = "ApiRateLimit" 
-    title = ""
-    description = ""
-    value = ""
-    variant = "default"
-    class = ""
-  }
-  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
-}

packages/ui/components/ApiRequestExample.wrn

@@ -1,13 +0,0 @@
-component ApiRequestExample {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/ApiResponseExample.wrn

@@ -1,13 +0,0 @@
-component ApiResponseExample {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/ApiSchemaTable.wrn

@@ -1,10 +0,0 @@
-component ApiSchemaTable {
-  props {
-    title = ""
-    description = ""
-    empty = false
-    emptyText = "No items available."
-    class = ""
-  }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
-}

packages/ui/components/ApiSchemaViewer.wrn

@@ -1,13 +0,0 @@
-component ApiSchemaViewer {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/ApiVersionBadge.wrn

@@ -1,11 +0,0 @@
-component ApiVersionBadge {
-  props {
-    label = "ApiVersion" 
-    title = ""
-    description = ""
-    value = ""
-    variant = "default"
-    class = ""
-  }
-  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
-}

packages/ui/components/AppHeader.wrn

@@ -1,10 +0,0 @@
-component AppHeader {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    align = "start"
-    class = ""
-  }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
-}

packages/ui/components/ArchitectureSection.wrn

@@ -1,10 +0,0 @@
-component ArchitectureSection {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    align = "start"
-    class = ""
-  }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
-}

packages/ui/components/AreaChart.wrn

@@ -1,11 +0,0 @@
-component AreaChart {
-  props {
-    title = ""
-    value = ""
-    description = ""
-    summary = ""
-    loading = false
-    class = ""
-  }
-  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
-}

packages/ui/components/ArticleHero.wrn

@@ -1,10 +0,0 @@
-component ArticleHero {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    align = "start"
-    class = ""
-  }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
-}

packages/ui/components/ArticleLayout.wrn

@@ -1,10 +0,0 @@
-component ArticleLayout {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    align = "start"
-    class = ""
-  }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
-}

packages/ui/components/ArticleNewsletterCTA.wrn

@@ -1,11 +0,0 @@
-component ArticleNewsletterCTA {
-  props {
-    label = "Action"
-    href = ""
-    type = "button"
-    variant = "primary"
-    disabled = false
-    class = ""
-  }
-  view { <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span> }
-}

packages/ui/components/ArticlePageShell.wrn

@@ -1,10 +0,0 @@
-component ArticlePageShell {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    align = "start"
-    class = ""
-  }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
-}

packages/ui/components/ArticleShareActions.wrn

@@ -1,11 +0,0 @@
-component ArticleShareActions {
-  props {
-    label = "Action"
-    href = ""
-    type = "button"
-    variant = "primary"
-    disabled = false
-    class = ""
-  }
-  view { <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span> }
-}

packages/ui/components/AspectRatio.wrn

@@ -1,6 +0,0 @@
-component AspectRatio {
-  props {
-    class = ""
-  }
-  view { <div class="wire-aspect-ratio {class}"><slot /></div> }
-}

packages/ui/components/AssetCard.wrn

@@ -1,9 +0,0 @@
-component AssetCard {
-  props {
-    title = ""
-    description = ""
-    href = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card wire-catalog-card--asset {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
-}

packages/ui/components/AttachmentPicker.wrn

@@ -1,16 +0,0 @@
-component AttachmentPicker {
-  props {
-    label = "Attachment" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/AttachmentUpload.wrn

@@ -1,13 +0,0 @@
-component AttachmentUpload {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AudioUpload.wrn

@@ -1,13 +0,0 @@
-component AudioUpload {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AuditLogPreview.wrn

@@ -1,13 +0,0 @@
-component AuditLogPreview {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AuditTable.wrn

@@ -1,10 +0,0 @@
-component AuditTable {
-  props {
-    title = ""
-    description = ""
-    empty = false
-    emptyText = "No items available."
-    class = ""
-  }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
-}

packages/ui/components/AuthenticatorCodeInput.wrn

@@ -1,16 +0,0 @@
-component AuthenticatorCodeInput {
-  props {
-    label = "AuthenticatorCode" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/AuthorAvatar.wrn

@@ -1,13 +0,0 @@
-component AuthorAvatar {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AuthorCard.wrn

@@ -1,13 +0,0 @@
-component AuthorCard {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AuthorizedApplicationCard.wrn

@@ -1,13 +0,0 @@
-component AuthorizedApplicationCard {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AutoGrid.wrn

@@ -1,6 +0,0 @@
-component AutoGrid {
-  props {
-    class = ""
-  }
-  view { <div class="wire-auto-grid {class}"><slot /></div> }
-}

packages/ui/components/AutomationExampleCard.wrn

@@ -1,13 +0,0 @@
-component AutomationExampleCard {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AvailabilityCalendar.wrn

@@ -1,13 +0,0 @@
-component AvailabilityCalendar {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/AvatarGroup.wrn

@@ -1,16 +1,19 @@
 component AvatarGroup {
   props {
-    label = "Avatar" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
+    size = "default"
+    color = "primary"
+    title = "Avatar Group"
+    description = ""
+    items = []
+    variant = "default"
     class = ""
   }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+  view {
+    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--avatar-group wire-next--variant-{variant} {class}">
+      {#if title}<strong>{title}</strong>{/if}
+      {#if description}<p>{description}</p>{/if}
+      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
+      <slot />
+    </section>
+  }
 }

packages/ui/components/AvatarUpload.wrn

@@ -1,13 +0,0 @@
-component AvatarUpload {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/BackButton.wrn

@@ -1,9 +0,0 @@
-component BackButton {
-  props {
-    label = "Action"
-    type = "button"
-    disabled = false
-    class = ""
-  }
-  view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot /></button> }
-}

packages/ui/components/BackToTop.wrn

@@ -1,94 +0,0 @@
-component BackToTop {
-    props {
-        class = ""
-        label = "Back to top"
-        assistiveLabel = "Return to the top of the page"
-        threshold = 500
-    }
-
-    state visible = false
-
-    functions {
-        function updateBackToTopVisibility() {
-            visible = window.scrollY > threshold
-        }
-
-        function scrollToTop() {
-            window.scrollTo({
-                top: 0,
-                behavior: "smooth"
-            })
-        }
-    }
-
-    lifecycle {
-        mount {
-            updateBackToTopVisibility()
-
-            window.addEventListener(
-            "scroll",
-            updateBackToTopVisibility,
-            { passive: true }
-            )
-        }
-
-        unmount {
-            window.removeEventListener(
-            "scroll",
-            updateBackToTopVisibility
-            )
-        }
-    }
-
-    watch visible {
-        console.debug(
-        "Back-to-top visibility:",
-        value,
-        previous
-        )
-    }
-
-    view {
-        <div
-            class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 {class}"
-            class:pointer-events-none="!visible"
-            class:translate-y-5="!visible"
-            class:scale-90="!visible"
-            class:opacity-0="!visible"
-            class:pointer-events-auto="visible"
-            class:translate-y-0="visible"
-            class:scale-100="visible"
-            class:opacity-100="visible"
-        >
-            <!-- Hover label -->
-            <span
-                class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
-            >
-                {label}
-            </span>
-
-            <!-- Gradient border wrapper -->
-            <div
-                class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
-            >
-                <!-- Glow -->
-                <div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" ></div>
-
-                <button
-                    type="button"
-                    @click="scrollToTop()"
-                    aria-label="{label}"
-                    title="{label}"
-                    class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
-                >
-                    <!-- Arrow -->
-                    <span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" ></span>
-
-                    <span class="sr-only">
-                        {assistiveLabel}
-                    </span>
-                </button>
-            </div>
-        </div>
-    }
-}

packages/ui/components/BankTransferDetails.wrn

@@ -1,13 +0,0 @@
-component BankTransferDetails {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/Banner.wrn

@@ -1,12 +0,0 @@
-component Banner {
-  props {
-    class = ""
-    text = "Announcement"
-    href = ""
-    actionLabel = "Learn more"
-    variant = "brand"
-  }
-  view {
-    <aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'} {class}"><span>{text}</span><a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a></aside>
-  }
-}

packages/ui/components/BarChart.wrn

@@ -1,11 +0,0 @@
-component BarChart {
-  props {
-    title = ""
-    value = ""
-    description = ""
-    summary = ""
-    loading = false
-    class = ""
-  }
-  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
-}

packages/ui/components/BetaBadge.wrn

@@ -1,8 +0,0 @@
-component BetaBadge {
-  props {
-    label = "Beta"
-    variant = "default"
-    class = ""
-  }
-  view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--betabadge {class}">{label}<slot /></span> }
-}

packages/ui/components/BillingAddressForm.wrn

@@ -1,13 +0,0 @@
-component BillingAddressForm {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/BillingExample.wrn

@@ -1,13 +0,0 @@
-component BillingExample {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/BillingPeriodToggle.wrn

@@ -1,16 +0,0 @@
-component BillingPeriodToggle {
-  props {
-    label = "BillingPeriod" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/BlackoutDatePicker.wrn

@@ -1,16 +0,0 @@
-component BlackoutDatePicker {
-  props {
-    label = "BlackoutDate" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/Blockquote.wrn

@@ -0,0 +1,19 @@
+component Blockquote {
+  props {
+    size = "default"
+    color = "primary"
+    title = "Blockquote"
+    description = ""
+    items = []
+    variant = "default"
+    class = ""
+  }
+  view {
+    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--blockquote wire-next--variant-{variant} {class}">
+      {#if title}<strong>{title}</strong>{/if}
+      {#if description}<p>{description}</p>{/if}
+      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
+      <slot />
+    </section>
+  }
+}

packages/ui/components/BlogCard.wrn

@@ -1,13 +0,0 @@
-component BlogCard {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/BlogGrid.wrn

@@ -1,10 +0,0 @@
-component BlogGrid {
-  props {
-    title = ""
-    description = ""
-    empty = false
-    emptyText = "No items available."
-    class = ""
-  }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
-}

packages/ui/components/BlogList.wrn

@@ -1,10 +0,0 @@
-component BlogList {
-  props {
-    title = ""
-    description = ""
-    empty = false
-    emptyText = "No items available."
-    class = ""
-  }
-  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
-}

packages/ui/components/BlogSearch.wrn

@@ -1,13 +0,0 @@
-component BlogSearch {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/BodyText.wrn

@@ -1,8 +0,0 @@
-component BodyText {
-  props {
-    text = ""
-    align = "start"
-    class = ""
-  }
-  view { <div class="wire-type wire-type--body wire-text--{align}  {class}">{text}<slot /></div> }
-}

packages/ui/components/BorderRadiusPicker.wrn

@@ -1,16 +0,0 @@
-component BorderRadiusPicker {
-  props {
-    label = "BorderRadius" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/BottomNavigation.wrn

@@ -1,10 +0,0 @@
-component BottomNavigation {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    align = "start"
-    class = ""
-  }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
-}

packages/ui/components/BrandColorPicker.wrn

@@ -1,16 +0,0 @@
-component BrandColorPicker {
-  props {
-    label = "BrandColor" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/BrandSelector.wrn

@@ -1,16 +0,0 @@
-component BrandSelector {
-  props {
-    label = "Brand" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/Breadcrumb.wrn

@@ -0,0 +1,17 @@
+component Breadcrumb {
+  props {
+    size = "default"
+    color = "primary"
+    label = "Breadcrumb"
+    items = []
+    active = ""
+    orientation = "horizontal"
+    class = ""
+  }
+  view {
+    <nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--breadcrumb wire-next--{orientation} {class}" aria-label="{label}">
+      {#each items as item}<a href="{item.href}" aria-current="{item.value === active ? 'page' : ''}">{item.label}</a>{/each}
+      <slot />
+    </nav>
+  }
+}

packages/ui/components/Breadcrumbs.wrn

@@ -1,105 +0,0 @@
-component Breadcrumbs {
-    props {
-        class: string = ""
-        items = []
-        centered = false
-        compact = false
-        showHome = true
-        homeLabel = "Home"
-        homeHref = "/"
-    }
-
-    view {
-        <nav
-            aria-label="Breadcrumb"
-            class="w-full {class}"
-            class:hidden="items.length === 0 && !showHome"
-        >
-            <ol
-                class="flex flex-wrap items-center text-slate-500 dark:text-slate-400"
-                class:justify-center="centered"
-                class:gap-1.5="compact"
-                class:text-xs="compact"
-                class:gap-2="!compact"
-                class:text-sm="!compact"
-            >
-                <!-- Home -->
-                <li
-                    class:hidden="!showHome"
-                    class:inline-flex="showHome"
-                >
-                    <a
-                        href="{homeHref}"
-                        class="group inline-flex items-center gap-1.5 rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300"
-                    >
-                        <span class="icon-[lucide--home] h-3.5 w-3.5" aria-hidden="true" ></span>
-
-                        <span class:hidden="compact">
-                            {homeLabel}
-                        </span>
-
-                        <span
-                            class="sr-only"
-                            class:hidden="!compact"
-                        >
-                            {homeLabel}
-                        </span>
-                    </a>
-                </li>
-
-                <!-- Separator after home -->
-                <li
-                    aria-hidden="true"
-                    class="text-slate-300 dark:text-slate-700"
-                    class:hidden="!showHome || items.length === 0"
-                    class:inline-flex="showHome && items.length > 0"
-                >
-                    <span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
-                </li>
-
-                <!-- Dynamic breadcrumb items -->
-                {#each items as item, index}
-                <li class="inline-flex min-w-0 items-center gap-2">
-                    <!-- Linked item -->
-                    <a
-                        href="{item.href}"
-                        class="max-w-48 truncate rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300 sm:max-w-64"
-                        class:hidden="item.current || item.href === ''"
-                        class:inline-flex="!item.current && item.href !== ''"
-                    >
-                        {item.label}
-                    </a>
-
-                    <!-- Current item -->
-                    <span
-                        aria-current="page"
-                        class="max-w-48 truncate font-semibold text-slate-950 dark:text-white sm:max-w-64"
-                        class:hidden="!item.current"
-                        class:inline-flex="item.current"
-                    >
-                        {item.label}
-                    </span>
-
-                    <!-- Plain unlinked item -->
-                    <span
-                        class="max-w-48 truncate text-slate-600 dark:text-slate-300 sm:max-w-64"
-                        class:hidden="item.current || item.href !== ''"
-                        class:inline-flex="!item.current && item.href === ''"
-                    >
-                        {item.label}
-                    </span>
-
-                    <!-- Separator -->
-                    <span
-                        aria-hidden="true"
-                        class="inline-flex text-slate-300 dark:text-slate-700"
-                        class:hidden="index === items.length - 1"
-                    >
-                        <span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
-                    </span>
-                </li>
-                {/each}
-            </ol>
-        </nav>
-    }
-}

packages/ui/components/BrowserFrame.wrn

@@ -1,10 +0,0 @@
-component BrowserFrame {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    align = "start"
-    class = ""
-  }
-  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
-}

packages/ui/components/BudgetRangeSlider.wrn

@@ -1,13 +0,0 @@
-component BudgetRangeSlider {
-  props {
-    eyebrow = ""
-    title = ""
-    description = ""
-    href = ""
-    actionLabel = "Learn more"
-    image = ""
-    alt = ""
-    class = ""
-  }
-  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
-}

packages/ui/components/BudgetSelector.wrn

@@ -1,16 +0,0 @@
-component BudgetSelector {
-  props {
-    label = "Budget" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/BusinessHoursPicker.wrn

@@ -1,16 +0,0 @@
-component BusinessHoursPicker {
-  props {
-    label = "BusinessHours" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}

packages/ui/components/ButtonGroup.wrn

@@ -1,16 +1,19 @@
 component ButtonGroup {
   props {
-    label = "Button" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
+    size = "default"
+    color = "primary"
+    title = "Button Group"
+    description = ""
+    items = []
+    variant = "default"
     class = ""
   }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
+  view {
+    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--button-group wire-next--variant-{variant} {class}">
+      {#if title}<strong>{title}</strong>{/if}
+      {#if description}<p>{description}</p>{/if}
+      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
+      <slot />
+    </section>
+  }
 }

packages/ui/components/ButtonSelector.wrn

@@ -1,16 +0,0 @@
-component ButtonSelector {
-  props {
-    label = "Button" 
-    name = ""
-    value = ""
-    placeholder = ""
-    type = "text"
-    required = false
-    disabled = false
-    readonly = false
-    help = ""
-    error = ""
-    class = ""
-  }
-  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
-}