release: WRNexusJS 0.5.10

packages/ui/components/AuthForm.wrn

@@ -0,0 +1,84 @@
+component AuthForm {
+  props {
+    @event submit = function
+    @event change = function
+    @event input = function
+    @event focus = function
+    @event blur = function
+    size = "default"
+    color = "primary"
+    mode = "sign-in"
+    action = "/api/auth/login"
+    method = "post"
+    title = "Sign in"
+    description = ""
+    returnTo = ""
+    schema = ""
+    showRemember = true
+    showName = true
+    submitLabel = "Continue"
+    class = ""
+  }
+
+  functions {
+    function schemaName() {
+      if (schema) return schema
+      if (mode === "sign-in") return "auth-login"
+      if (mode === "register") return "auth-register"
+      if (mode === "recover") return "auth-password-request"
+      if (mode === "reset") return "auth-password-reset"
+      if (mode === "mfa") return "auth-mfa"
+      return "auth-empty"
+    }
+
+    function submitForm(event) {
+      $emit("submit", { event: event, mode: mode, action: action })
+    }
+    function fieldEvent(type, event) {
+      const detail = event.detail || {}
+      $emit(type, { event: event, name: detail.name || "", value: detail.value || "" })
+    }
+  }
+
+  view {
+    <section class="wire-auth-form wire-next--color-{color} wire-next--size-{size} {class}">
+      <header>
+        <span class="wire-auth-form__icon icon-[lucide--fingerprint]" aria-hidden="true"></span>
+        <div><h2>{title}</h2>{#if description}<p>{description}</p>{/if}</div>
+      </header>
+      <form
+        action="{action}"
+        method="{method}"
+        data-schema="{schemaName()}"
+        data-wrnexus-runtime="auth"
+        novalidate="true"
+        @submit="submitForm($event)"
+      >
+        {#if returnTo}<input type="hidden" name="returnTo" value="{returnTo}" />{/if}
+        {#if mode === "register" && showName}
+          <Input label="Full name" name="displayName" autocomplete="name" placeholder="Enter your full name" required="true" icon="icon-[lucide--user-round]" iconPosition="start" @change="fieldEvent('change', $event)" @input="fieldEvent('input', $event)" @focus="fieldEvent('focus', $event)" @blur="fieldEvent('blur', $event)" />
+        {/if}
+        {#if mode === "sign-in" || mode === "register" || mode === "recover"}
+          <Input label="{mode === 'recover' ? 'Registered email or mobile' : 'Email, mobile, or username'}" name="{mode === 'recover' ? 'identifier' : mode === 'register' ? 'email' : 'identifier'}" type="{mode === 'register' ? 'email' : 'text'}" autocomplete="{mode === 'register' ? 'email' : 'username'}" placeholder="{mode === 'recover' ? 'Enter your registered identity' : 'Enter your identity'}" required="true" icon="icon-[lucide--at-sign]" iconPosition="start" @change="fieldEvent('change', $event)" @input="fieldEvent('input', $event)" @focus="fieldEvent('focus', $event)" @blur="fieldEvent('blur', $event)" />
+        {/if}
+        {#if mode === "sign-in" || mode === "register" || mode === "reset"}
+          <Input label="{mode === 'reset' ? 'New password' : 'Password'}" name="password" type="password" autocomplete="{mode === 'sign-in' ? 'current-password' : 'new-password'}" placeholder="Enter your password" required="true" icon="icon-[lucide--lock-keyhole]" iconPosition="start" @change="fieldEvent('change', $event)" @input="fieldEvent('input', $event)" @focus="fieldEvent('focus', $event)" @blur="fieldEvent('blur', $event)" />
+        {/if}
+        {#if mode === "register" || mode === "reset"}
+          <Input label="Confirm password" name="confirmPassword" type="password" autocomplete="new-password" placeholder="Enter the password again" required="true" icon="icon-[lucide--shield-check]" iconPosition="start" @change="fieldEvent('change', $event)" @input="fieldEvent('input', $event)" @focus="fieldEvent('focus', $event)" @blur="fieldEvent('blur', $event)" />
+        {/if}
+        {#if mode === "mfa"}
+          <PinInput label="Verification code" name="code" length={6} inputMode="numeric" />
+        {/if}
+        {#if mode === "sign-in" && showRemember}
+          <div class="wire-auth-form__options">
+        <Checkbox label="Remember this device" name="rememberDevice" value="on" />
+            <a href="/forgot-password">Forgot password?</a>
+          </div>
+        {/if}
+        <Button type="submit" label="{submitLabel}" variant="default" color="{color}" size="lg" fullWidth="true" icon="icon-[lucide--arrow-right]" iconPosition="end" class="wire-auth-form__submit" />
+      </form>
+      <slot />
+    </section>
+  }
+}

packages/ui/components/AuthSplitLayout.wrn

@@ -0,0 +1,83 @@
+component AuthSplitLayout {
+  props {
+    size = "default"
+    color = "primary"
+    eyebrow = "Secure identity"
+    title = "Welcome back"
+    description = ""
+    brand = "Police Management System"
+    features = []
+    class = ""
+  }
+
+  view {
+    <main
+      class="wire-auth-split wire-next--color-{color} wire-next--size-{size} {class}"
+    >
+      <section
+        class="wire-auth-split__content"
+      >
+        <div
+          class="wire-auth-split__brand"
+        >
+          <span
+            class="icon-[lucide--shield-check]"
+            aria-hidden="true"
+          >
+          </span>
+          <span><strong>{brand}</strong><small>Unified identity and access</small></span>
+        </div>
+        <div
+          class="wire-auth-split__message"
+        >
+          <span
+            class="wire-auth-split__eyebrow"
+          >
+            {eyebrow}
+          </span>
+          <h1>{title}</h1>
+          {#if description}
+            <p>{description}</p>
+          {/if}
+          <div
+            class="wire-auth-split__features"
+          >
+            {#each features as item}
+              <article>
+                <span
+                  class="{item.icon || 'icon-[lucide--check-circle-2]'}"
+                  aria-hidden="true"
+                >
+                </span>
+                <span><strong>{item.label}</strong>
+                  {#if item.description}
+                    <small>{item.description}</small>
+                  {/if}
+                </span>
+              </article>
+            {/each}
+          </div>
+          <slot
+            name="aside-extra"
+          />
+        </div>
+        <small
+          class="wire-auth-split__legal"
+        >
+          Authorised access only · Activity may be monitored and audited.
+        </small>
+      </section>
+      <section
+        class="wire-auth-split__form"
+      >
+        <div
+          class="wire-auth-split__form-inner"
+        >
+          <slot
+            name="form"
+          />
+        </div>
+      </section>
+    </main>
+  }
+}

packages/ui/components/AvatarGroup.wrn

@@ -53,7 +53,9 @@ component AvatarGroup {
       role="group"
       aria-label="Avatar group"
     >
-      <div class="wire-next__avatar-group-members">
+      <div
+        class="wire-next__avatar-group-members"
+      >
         {#each visibleMembers() as item}
           <span
             class="wire-next__avatar-group-member"
@@ -64,18 +66,35 @@ component AvatarGroup {
             tabindex="{showTooltips && (item.tooltip || item.name) ? '0' : '-1'}"
             aria-label="{item.name || item.alt || item.initials || 'Group member'}"
           >
-            <span class="wire-next__avatar-group-avatar">
+            <span
+              class="wire-next__avatar-group-avatar"
+            >
               {#if item.src}
-                <img src="{item.src}" alt="{item.alt || item.name || ''}" loading="lazy" />
+                <img
+                  src="{item.src}"
+                  alt="{item.alt || item.name || ''}"
+                  loading="lazy"
+                />
               {:else if item.initials}
-                <span aria-hidden="true">{item.initials}</span>
+                <span
+                  aria-hidden="true"
+                >
+                  {item.initials}
+                </span>
               {:else}
-                <span class="icon-[lucide--user-round]" aria-hidden="true"></span>
+                <span
+                  class="icon-[lucide--user-round]"
+                  aria-hidden="true"
+                >
+                </span>
               {/if}
             </span>
 
             {#if showTooltips && (item.tooltip || item.name)}
-              <span class="wire-next__avatar-group-tooltip" role="tooltip">
+              <span
+                class="wire-next__avatar-group-tooltip"
+                role="tooltip"
+              >
                 {item.tooltip || item.name}
               </span>
             {/if}
@@ -83,7 +102,9 @@ component AvatarGroup {
         {/each}
 
         {#if hiddenMembers().length > 0}
-          <span class="wire-next__avatar-group-overflow">
+          <span
+            class="wire-next__avatar-group-overflow"
+          >
             <button
               type="button"
               class="wire-next__avatar-group-overflow-button"
@@ -101,10 +122,19 @@ component AvatarGroup {
               aria-hidden="{overflowOpen ? 'false' : 'true'}"
             >
               {#each hiddenMembers() as item}
-                <span class="wire-next__avatar-group-menu-item" role="menuitem">
-                  <span class="wire-next__avatar-group-menu-avatar">
+                <span
+                  class="wire-next__avatar-group-menu-item"
+                  role="menuitem"
+                >
+                  <span
+                    class="wire-next__avatar-group-menu-avatar"
+                  >
                     {#if item.src}
-                      <img src="{item.src}" alt="" loading="lazy" />
+                      <img
+                        src="{item.src}"
+                        alt=""
+                        loading="lazy"
+                      />
                     {:else}
                       <span>{item.initials || '?'}</span>
                     {/if}

packages/ui/components/Dropdown.wrn

@@ -1,23 +1,53 @@
 component Dropdown {
   props {
+    @event toggle = function
     @event open = function
     @event close = function
     @event select = function
-    @event change = function
     size = "default"
     color = "primary"
-    title = "Dropdown"
-    description = ""
-    open = false
-    placement = "bottom"
-    closeLabel = "Close"
+    label = "Open menu"
+    items = []
+    placement = "end"
     class = ""
   }
+
+  functions {
+    function toggleMenu(event) {
+      $emit("toggle", { open: event.currentTarget.open })
+      $emit(event.currentTarget.open ? "open" : "close", { source: "trigger" })
+    }
+
+    function selectItem(item) {
+      $emit("select", { item: item, value: item.value || "" })
+    }
+  }
+
   view {
-    <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--dropdown wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
-      <header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
-      {#if description}<p>{description}</p>{/if}
-      <slot />
-    </div>
+    <details class="wire-dropdown wire-dropdown--{placement} wire-next--color-{color} wire-next--size-{size} {class}" data-wrn-dropdown @toggle="toggleMenu($event)">
+      <summary aria-label="{label}">
+        <slot name="trigger" />
+        <span class="wire-dropdown__chevron icon-[lucide--chevron-down]" aria-hidden="true"></span>
+      </summary>
+      <div class="wire-dropdown__panel" role="menu" aria-label="{label}">
+        <slot name="header" />
+        {#each items as item}
+          {#if item.type === "divider"}
+            <hr />
+          {:else}
+            {#if item.type === "header"}
+              <span class="wire-dropdown__heading">{item.label}</span>
+            {:else}
+              <a class="wire-dropdown__item {item.danger ? 'wire-dropdown__item--danger' : ''}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" role="menuitem" @click="selectItem(item)">
+                {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
+                {#if item.external}<span class="icon-[lucide--arrow-up-right]" aria-hidden="true"></span>{/if}
+              </a>
+            {/if}
+          {/if}
+        {/each}
+        <slot name="footer" />
+      </div>
+    </details>
   }
 }

packages/ui/components/Footer.wrn

@@ -0,0 +1,101 @@
+component Footer {
+  props {
+    @event select = function
+    @event action = function
+    size = "default"
+    color = "primary"
+    label = "Footer navigation"
+    items = []
+    columns = 3
+    maxWidth = "compact"
+    copyright = ""
+    class = ""
+  }
+
+  functions {
+    function groupedItems() {
+      const groups = []
+      let group = null
+      items.forEach((item) => {
+        if (item.type === "header") {
+          group = {
+            heading: item,
+            links: []
+          }
+          groups.push(group)
+          return
+        }
+        if (!group) {
+          group = {
+            heading: null,
+            links: []
+          }
+          groups.push(group)
+        }
+        group.links.push(item)
+      })
+      return groups
+    }
+
+    function selectItem(item) {
+      $emit(item.type === "action" ? "action" : "select", {
+        item: item,
+        value: item.value || ""
+      })
+    }
+  }
+
+  view {
+    <footer class="wire-footer wire-footer--width-{maxWidth} wire-next--color-{color} wire-next--size-{size} wire-footer--columns-{columns} {class}">
+      <div class="wire-footer__grid">
+        <div class="wire-footer__pre">
+          <slot name="pre-footer" />
+        </div>
+
+        <nav class="wire-footer__links" aria-label="{label}">
+          {#each groupedItems() as group}
+            <section class="wire-footer__column">
+              {#if group.heading}
+                <strong class="wire-footer__heading">{group.heading.label}</strong>
+              {/if}
+              <div class="wire-footer__column-links">
+                {#each group.links as item}
+                  <a class="wire-footer__link wire-footer__link--{item.type || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectItem(item)">
+                    {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                    <span>{item.label}</span>
+                    {#if item.external}<span aria-hidden="true">↗</span>{/if}
+                  </a>
+                {/each}
+              </div>
+            </section>
+          {/each}
+        </nav>
+
+        <div class="wire-footer__post">
+          <slot name="post-footer" />
+        </div>
+      </div>
+
+      {#if copyright}
+        <div class="wire-footer__bottom">
+          <div class="wire-footer__copyright-left">
+            <slot name="copyright-left" />
+          </div>
+          <div class="wire-footer__copyright">{copyright}</div>
+          <div class="wire-footer__copyright-right">
+            <slot name="copyright-right" />
+          </div>
+        </div>
+      {:else}
+        <div class="wire-footer__bottom wire-footer__bottom--slots">
+          <div class="wire-footer__copyright-left">
+            <slot name="copyright-left" />
+          </div>
+          <div class="wire-footer__copyright-right">
+            <slot name="copyright-right" />
+          </div>
+        </div>
+      {/if}
+    </footer>
+  }
+}

packages/ui/components/Navbar.wrn

@@ -3,18 +3,138 @@ component Navbar {
     @event toggle = function
     @event open = function
     @event close = function
+    @event select = function
+    @event action = function
     size = "default"
     color = "primary"
-    label = "Navbar"
+    label = "Primary navigation"
+    topbarLabel = "Utility navigation"
+    brand = {}
     items = []
+    actions = []
     active = ""
-    orientation = "horizontal"
+    sticky = false
+    openOnHover = false
+    maxWidth = "full"
+    mobileLabel = "Toggle navigation"
     class = ""
   }
+
+  state mobileOpen = false
+
+  functions {
+    function toggleNavigation() {
+      mobileOpen = !mobileOpen
+      $emit("toggle", { open: mobileOpen })
+      $emit(mobileOpen ? "open" : "close", { source: "mobile" })
+    }
+
+    function selectItem(item, level) {
+      mobileOpen = false
+      $emit("select", { item: item, value: item.value || "", level: level })
+    }
+
+    function selectAction(item) {
+      mobileOpen = false
+      $emit("action", { item: item, value: item.value || "" })
+    }
+
+    function isItemActive(item) {
+      if (!item) return false
+      if (item.value && item.value === active) return true
+      if (!item.children || !item.children.length) return false
+      return item.children.some(function (child) {
+        return isItemActive(child)
+      })
+    }
+
+    function toggleDropdown(event, item) {
+      $emit(event.currentTarget.open ? "open" : "close", {
+        source: "menu",
+        item: item
+      })
+    }
+  }
+
   view {
-    <nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--navbar 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>
+    <header class="wire-navbar wire-navbar--width-{maxWidth} wire-next--color-{color} wire-next--size-{size} {sticky ? 'wire-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
+      <div class="wire-navbar__topbar" aria-label="{topbarLabel}">
+        <slot name="topbar" />
+      </div>
+
+      <div class="wire-navbar__main">
+        <a class="wire-navbar__brand" href="{brand.href || '/'}" aria-label="{brand.ariaLabel || brand.label || label}">
+          {#if brand.logo}
+            <img class="wire-navbar__brand-logo" src="{brand.logo}" alt="{brand.logoAlt || brand.label || ''}" width="{brand.logoWidth || ''}" height="{brand.logoHeight || ''}" />
+          {/if}
+          {#if brand.icon}
+            <span class="wire-navbar__brand-icon {brand.icon}" aria-hidden="true"></span>
+          {/if}
+          {#if brand.label || brand.description}
+            <span class="wire-navbar__brand-copy">
+              {#if brand.label}<strong>{brand.label}</strong>{/if}
+              {#if brand.description}<small>{brand.description}</small>{/if}
+            </span>
+          {/if}
+        </a>
+
+        <button type="button" class="wire-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
+          <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
+        </button>
+
+        <div class="wire-navbar__collapse {mobileOpen ? 'is-open' : ''}">
+          <nav class="wire-navbar__menus" aria-label="{label}">
+            {#each items as item}
+              {#if item.children && item.children.length}
+                <details class="wire-navbar__dropdown wire-navbar__dropdown--{item.type || 'dropdown'}" name="wire-navbar-menu" @toggle="toggleDropdown($event, item)">
+                  <summary aria-current="{isItemActive(item) ? 'page' : ''}">
+                    {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                    <span>{item.label}</span>
+                    <span class="wire-navbar__chevron" aria-hidden="true"></span>
+                  </summary>
+                  <div class="wire-navbar__panel wire-navbar__panel--columns-{item.columns || 1}">
+                    {#if item.description}<p class="wire-navbar__panel-intro">{item.description}</p>{/if}
+                    {#each item.children as child}
+                      <div class="wire-navbar__group">
+                        {#if child.children && child.children.length}
+                          {#if child.label}<strong class="wire-navbar__group-title">{child.label}</strong>{/if}
+                          {#if child.description}<small>{child.description}</small>{/if}
+                          {#each child.children as nested}
+                            <a href="{nested.href || '#'}" target="{nested.target || ''}" rel="{nested.rel || ''}" aria-current="{nested.value === active ? 'page' : ''}" @click="selectItem(nested, 3)">
+                              {#if nested.icon}<span class="{nested.icon}" aria-hidden="true"></span>{/if}
+                              <span><strong>{nested.label}</strong>{#if nested.description}<small>{nested.description}</small>{/if}</span>
+                            </a>
+                          {/each}
+                        {:else}
+                          <a href="{child.href || '#'}" target="{child.target || ''}" rel="{child.rel || ''}" aria-current="{child.value === active ? 'page' : ''}" @click="selectItem(child, 2)">
+                            {#if child.icon}<span class="{child.icon}" aria-hidden="true"></span>{/if}
+                            <span><strong>{child.label}</strong>{#if child.description}<small>{child.description}</small>{/if}</span>
+                          </a>
+                        {/if}
+                      </div>
+                    {/each}
+                  </div>
+                </details>
+              {:else}
+                <a class="wire-navbar__menu-link" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" aria-current="{item.value === active ? 'page' : ''}" @click="selectItem(item, 1)">
+                  {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                  <span>{item.label}</span>
+                </a>
+              {/if}
+            {/each}
+          </nav>
+
+          <div class="wire-navbar__actions">
+            {#each actions as item}
+              <a class="wire-navbar__action wire-navbar__action--{item.variant || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectAction(item)">
+                {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                <span>{item.label}</span>
+              </a>
+            {/each}
+            <slot name="actions" />
+          </div>
+        </div>
+      </div>
+    </header>
   }
 }

packages/ui/components/PortalDashboard.wrn

@@ -0,0 +1,98 @@
+component PortalDashboard {
+  props {
+    @event action = function
+    @event navigate = function
+    size = "default"
+    color = "primary"
+    eyebrow = "Overview"
+    eyebrowKey = ""
+    title = "Dashboard"
+    titleKey = ""
+    description = ""
+    descriptionKey = ""
+    userName = ""
+    metrics = []
+    actions = []
+    updates = []
+    tasks = []
+    class = ""
+  }
+
+  functions {
+    function chooseAction(item, index) {
+      $emit("action", { item: item, value: item.value || "", index: index })
+    }
+
+    function chooseNavigation(item, index) {
+      $emit("navigate", { item: item, value: item.value || "", index: index })
+    }
+  }
+
+  view {
+    <main class="wire-portal-dashboard wire-next--color-{color} wire-next--size-{size} {class}">
+      <header class="wire-portal-dashboard__hero">
+        <div>
+          {#if eyebrowKey}<span class="wire-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
+          {#if !eyebrowKey}<span class="wire-portal-dashboard__eyebrow">{eyebrow}</span>{/if}
+          <h1>
+            {#if titleKey}<span data-t="{titleKey}">{title}</span>{/if}
+            {#if !titleKey}<span>{title}</span>{/if}
+            {#if userName}, {userName}{/if}
+          </h1>
+          {#if descriptionKey}<p data-t="{descriptionKey}">{description}</p>{/if}
+          {#if !descriptionKey && description}<p>{description}</p>{/if}
+        </div>
+        <div class="wire-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
+      </header>
+
+      <section class="wire-portal-dashboard__metrics" aria-label="Summary">
+        {#each metrics as item}
+          <article class="wire-portal-dashboard__metric">
+            <span class="wire-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true"></span>
+            <div><small>{item.label}</small><strong>{item.value}</strong>{#if item.detail}<span>{item.detail}</span>{/if}</div>
+          </article>
+        {/each}
+      </section>
+
+      <div class="wire-portal-dashboard__grid">
+        <section class="wire-portal-dashboard__panel wire-portal-dashboard__panel--actions">
+          <div class="wire-portal-dashboard__panel-heading"><div><small>Shortcuts</small><h2>Quick actions</h2></div></div>
+          <div class="wire-portal-dashboard__actions">
+            {#each actions as item, index}
+              <a href="{item.href || '#'}" @click="chooseAction(item, index)">
+                <span class="{item.icon || 'icon-[lucide--arrow-up-right]'}" aria-hidden="true"></span>
+                <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
+                <span class="icon-[lucide--chevron-right]" aria-hidden="true"></span>
+              </a>
+            {/each}
+          </div>
+        </section>
+
+        <section class="wire-portal-dashboard__panel">
+          <div class="wire-portal-dashboard__panel-heading"><div><small>Priority</small><h2>Tasks requiring attention</h2></div></div>
+          <div class="wire-portal-dashboard__list">
+            {#each tasks as item, index}
+              <a href="{item.href || '#'}" @click="chooseNavigation(item, index)">
+                <span class="wire-portal-dashboard__status wire-portal-dashboard__status--{item.status || 'default'}"></span>
+                <span><strong>{item.label}</strong>{#if item.detail}<small>{item.detail}</small>{/if}</span>
+                {#if item.meta}<em>{item.meta}</em>{/if}
+              </a>
+            {/each}
+          </div>
+        </section>
+
+        <section class="wire-portal-dashboard__panel wire-portal-dashboard__panel--updates">
+          <div class="wire-portal-dashboard__panel-heading"><div><small>Latest</small><h2>Recent updates</h2></div></div>
+          <div class="wire-portal-dashboard__timeline">
+            {#each updates as item}
+              <article>
+                <span class="{item.icon || 'icon-[lucide--bell]'}" aria-hidden="true"></span>
+                <div><strong>{item.label}</strong>{#if item.detail}<p>{item.detail}</p>{/if}<small>{item.time || ''}</small></div>
+              </article>
+            {/each}
+          </div>
+        </section>
+      </div>
+    </main>
+  }
+}

packages/ui/components/PreferenceSwitcher.wrn

@@ -0,0 +1,82 @@
+component PreferenceSwitcher {
+  props {
+    @event theme = function
+    @event color = function
+    @event language = function
+    size = "default"
+    color = "primary"
+    themeLabel = "Theme"
+    colorLabel = "Accent color"
+    languageLabel = "Language"
+    languages = [
+      {"label": "English", "shortLabel": "EN", "value": "en"},
+      {"label": "हिन्दी", "shortLabel": "हि", "value": "hi"},
+      {"label": "मराठी", "shortLabel": "म", "value": "mr"}
+    ]
+    colors = [
+      {"label": "Blue", "value": "blue", "hex": "#2563eb"},
+      {"label": "Cyan", "value": "cyan", "hex": "#0891b2"},
+      {"label": "Emerald", "value": "emerald", "hex": "#059669"},
+      {"label": "Violet", "value": "violet", "hex": "#7c3aed"},
+      {"label": "Rose", "value": "rose", "hex": "#e11d48"},
+      {"label": "Amber", "value": "amber", "hex": "#d97706"}
+    ]
+    compact = true
+    class = ""
+  }
+
+  functions {
+    function choose(type, value) {
+      $emit(type, { value: value })
+    }
+  }
+
+  view {
+    <div class="wire-preferences wire-next--color-{color} wire-next--size-{size} {compact ? 'wire-preferences--compact' : ''} {class}" data-wrn-preferences aria-label="Display and language preferences">
+      <details class="wire-preferences__menu" name="wire-preference-menu">
+        <summary aria-label="{themeLabel}" title="{themeLabel}">
+          <span class="icon-[lucide--sun-moon]" aria-hidden="true"></span>
+          {#if !compact}<span>{themeLabel}</span>{/if}
+        </summary>
+        <div class="wire-preferences__panel">
+          <strong>{themeLabel}</strong>
+          <div class="wire-preferences__options">
+            <button type="button" data-wire-theme-set="light" @click="choose('theme', 'light')"><span class="icon-[lucide--sun]" aria-hidden="true"></span>Light</button>
+            <button type="button" data-wire-theme-set="dark" @click="choose('theme', 'dark')"><span class="icon-[lucide--moon]" aria-hidden="true"></span>Dark</button>
+          </div>
+        </div>
+      </details>
+
+      <details class="wire-preferences__menu" name="wire-preference-menu">
+        <summary aria-label="{colorLabel}" title="{colorLabel}">
+          <span class="icon-[lucide--palette]" aria-hidden="true"></span>
+          {#if !compact}<span>{colorLabel}</span>{/if}
+        </summary>
+        <div class="wire-preferences__panel wire-preferences__panel--colors">
+          <strong>{colorLabel}</strong>
+          <div class="wire-preferences__swatches">
+            {#each colors as item}
+              <button type="button" data-wire-accent-set="{item.value}" aria-label="{item.label}" title="{item.label}" style="--wire-preference-swatch: {item.hex}" @click="choose('color', item.value)"></button>
+            {/each}
+          </div>
+        </div>
+      </details>
+
+      <details class="wire-preferences__menu wire-preferences__menu--language" name="wire-preference-menu">
+        <summary aria-label="{languageLabel}" title="{languageLabel}">
+          <span class="icon-[lucide--languages]" aria-hidden="true"></span>
+          <span class="wire-preferences__current-language" aria-hidden="true">EN</span>
+          {#if !compact}<span>{languageLabel}</span>{/if}
+        </summary>
+        <div class="wire-preferences__panel wire-preferences__panel--language">
+          <strong>{languageLabel}</strong>
+          {#each languages as item}
+            <button type="button" data-wire-lang-set="{item.value}" lang="{item.value}" @click="choose('language', item.value)">
+              <span>{item.shortLabel}</span>{item.label}
+            </button>
+          {/each}
+        </div>
+      </details>
+    </div>
+  }
+}

packages/ui/components/Sidebar.wrn

@@ -3,18 +3,77 @@ component Sidebar {
     @event toggle = function
     @event open = function
     @event close = function
+    @event select = function
     size = "default"
     color = "primary"
     label = "Sidebar"
     items = []
     active = ""
     orientation = "horizontal"
+    mobileLabel = "Open navigation"
     class = ""
   }
+
+  state mobileOpen = false
+
+  functions {
+    function toggleSidebar() {
+      mobileOpen = !mobileOpen
+      $emit("toggle", { open: mobileOpen })
+      $emit(mobileOpen ? "open" : "close", { source: "mobile" })
+    }
+
+    function closeSidebar() {
+      mobileOpen = false
+      $emit("close", { source: "mobile" })
+    }
+
+    function selectItem(item, level) {
+      mobileOpen = false
+      $emit("select", { item: item, value: item.value || "", level: level })
+    }
+  }
+
   view {
-    <nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--sidebar 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>
+    <div class="wire-sidebar-shell wire-next--color-{color} wire-next--size-{size} {mobileOpen ? 'is-open' : ''} {class}">
+      <button type="button" class="wire-sidebar-toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleSidebar()">
+        <span class="icon-[lucide--panel-left-open]" aria-hidden="true"></span>
+        <span>{label}</span>
+      </button>
+      <button type="button" class="wire-sidebar-backdrop" aria-label="Close navigation" @click="closeSidebar()"></button>
+      <nav class="wire-next wire-next--sidebar wire-next--{orientation} wire-sidebar-panel" aria-label="{label}">
+        <div class="wire-sidebar-panel__head">
+          <strong>{label}</strong>
+          <button type="button" aria-label="Close navigation" @click="closeSidebar()"><span class="icon-[lucide--x]" aria-hidden="true"></span></button>
+        </div>
+        <div class="wire-sidebar-items">
+          {#each items as item}
+            {#if item.children && item.children.length}
+              <details class="wire-sidebar-group" name="wire-sidebar-group">
+                <summary>
+                  {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                  <span>{item.label}</span>
+                  <span class="icon-[lucide--chevron-down]" aria-hidden="true"></span>
+                </summary>
+                <div class="wire-sidebar-group__children">
+                  {#each item.children as child}
+                    <a href="{child.href || '#'}" aria-current="{child.value === active ? 'page' : ''}" @click="selectItem(child, 2)">
+                      {#if child.icon}<span class="{child.icon}" aria-hidden="true"></span>{/if}
+                      <span>{child.label}</span>
+                    </a>
+                  {/each}
+                </div>
+              </details>
+            {:else}
+              <a href="{item.href || '#'}" aria-current="{item.value === active ? 'page' : ''}" @click="selectItem(item, 1)">
+                {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                <span>{item.label}</span>
+              </a>
+            {/if}
+          {/each}
+        </div>
+        <slot />
+      </nav>
+    </div>
   }
 }

packages/ui/components/checkbox.wrn

@@ -38,25 +38,136 @@ component Checkbox {
     function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
   }
   view {
-    <div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-orientation="{orientation}" data-card="{card}" data-list="{list}" data-right-aligned="{rightAligned}">
-      <div class="wire-next__field-heading">{#if options.length || cornerHint}<span class="{hiddenLabel ? 'wire-next__sr-only' : ''}">{label}</span>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}{/if}</div>
+    <div
+      {...attrs}
+      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}"
+      data-inline="{inline}"
+      data-invalid="{error ? 'true' : 'false'}"
+      data-orientation="{orientation}"
+      data-card="{card}"
+      data-list="{list}"
+      data-right-aligned="{rightAligned}"
+    >
+      <div
+        class="wire-next__field-heading"
+      >
+        {#if options.length || cornerHint}
+          <span
+            class="{hiddenLabel ? 'wire-next__sr-only' : ''}"
+          >
+            {label}
+          </span>
+          {#if cornerHint}
+            <span
+              class="wire-next__field-hint"
+            >
+              {cornerHint}
+            </span>
+          {/if}
+        {/if}
+      </div>
       {#if options.length}
-        <div class="wire-next__checkbox-group" role="group" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
+        <div
+          class="wire-next__checkbox-group"
+          role="group"
+          aria-label="{hiddenLabel ? label : ''}"
+          aria-invalid="{error ? 'true' : 'false'}"
+        >
           {#each options as option}
-            <label class="wire-next__choice wire-next--checkbox" for="{id || name}-{option.value}" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
-              <input id="{id || name}-{option.value}" type="checkbox" name="{name}" value="{option.value}" checked="{values.includes(option.value) || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
-              <span class="wire-next__choice-copy"><strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
+            <label
+              class="wire-next__choice wire-next--checkbox"
+              for="{id || name}-{option.value}"
+              data-variant="{variant}"
+              data-disabled="{disabled || option.disabled}"
+            >
+              <input
+                id="{id || name}-{option.value}"
+                type="checkbox"
+                name="{name}"
+                value="{option.value}"
+                checked="{values.includes(option.value) || option.checked}"
+                disabled="{disabled || option.disabled}"
+                required="{required}"
+                readonly="{readonly}"
+                @click="preventReadonly(event)"
+                @input="emitField('input', event)"
+                @change="emitField('change', event)"
+                @focus="emitField('focus', event)"
+                @blur="emitField('blur', event)"
+                @invalid="emitField('invalid', event)"
+              />
+              <span
+                class="wire-next__choice-copy"
+              >
+                <strong>{option.label}</strong>
+                {#if option.description}
+                  <small>{option.description}</small>
+                {/if}
+              </span>
             </label>
           {/each}
         </div>
       {:else}
-        <label class="wire-next__choice wire-next--checkbox" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}">
-          <input id="{id || name}" type="checkbox" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{indeterminate ? 'mixed' : (checked ? 'true' : 'false')}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
-          {#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}
-          <span class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}">{label}</span>
-        </label>
+        <div
+          class="wire-next__checkbox-content"
+        >
+          <label
+            class="wire-next__choice wire-next--checkbox"
+            for="{id || name}"
+            data-variant="{variant}"
+            data-icon-position="{iconPosition}"
+          >
+            <input
+              id="{id || name}"
+              type="checkbox"
+              name="{name}"
+              value="{value}"
+              checked="{checked}"
+              disabled="{disabled}"
+              required="{required}"
+              readonly="{readonly}"
+              aria-checked="{indeterminate ? 'mixed' : (checked ? 'true' : 'false')}"
+              aria-invalid="{error ? 'true' : 'false'}"
+              @click="preventReadonly(event)"
+              @input="emitField('input', event)"
+              @change="emitField('change', event)"
+              @focus="emitField('focus', event)"
+              @blur="emitField('blur', event)"
+              @invalid="emitField('invalid', event)"
+            />
+            {#if icon}
+              <span
+                class="{icon}"
+                aria-hidden="true"
+              >
+              </span>
+            {/if}
+            <span
+              class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}"
+            >
+              {label}
+            </span>
+            <div
+              class="wire-next__checkbox-slot"
+            >
+              <slot></slot>
+            </div>
+          </label>
+        </div>
       {/if}
-      {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
+      {#if helperText}
+        <small
+          class="wire-next__field-help"
+        >
+          {helperText}
+        </small>
+      {/if}
+      <small
+        class="wire-next__field-error"
+        data-error="{name}"
+      >
+        {error}
+      </small>
     </div>
   }
 }