@noxlovette/material 0.1.37 → 0.2.1

package/dist/components/nav/navbar/Navbar.svelte

@@ -15,7 +15,14 @@ This component takes NavbarItems as its children
   import { navbar } from './theme.js';
   import type { NavBarProps } from './types.js';
 
-  const { children, fab, ghost = false, class: className, ...restProps }: NavBarProps = $props();
+  const {
+    children,
+    fab,
+    trailing,
+    ghost = false,
+    class: className,
+    ...restProps
+  }: NavBarProps = $props();
   const { base, items, fab: fabCls, ghost: ghostCls } = $derived(navbar());
 </script>
 
@@ -36,6 +43,11 @@ This component takes NavbarItems as its children
       {/snippet}
     </NavigationMenu.List>
   </NavigationMenu.Root>
+  {#if trailing}
+    <div class="shrink-0 px-2">
+      {@render trailing()}
+    </div>
+  {/if}
 </div>
 {#if ghost}
   <div class={ghostCls()} aria-hidden="true"></div>

package/dist/components/nav/navbar/types.d.ts

@@ -28,6 +28,8 @@ export type NavBarProps = NavBarVariants & HTMLAttributes<HTMLDivElement> & {
     children: Snippet;
     /** An optional Floating Action Button snippet. */
     fab?: Snippet;
+    /** An optional snippet rendered after the nav items (e.g. an avatar/settings shortcut). */
+    trailing?: Snippet;
     /** Renders an invisible same-height spacer after the fixed bar so page content isn't obscured. */
     ghost?: boolean;
 };

package/dist/components/nav/rail/Rail.svelte

@@ -17,6 +17,7 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
   import { NavigationMenu } from 'bits-ui';
   import { railStore } from './railStore.svelte.js';
   import RailNavContext from './RailNavContext.svelte';
+  import Navbar from '../navbar/Navbar.svelte';
 
   let {
     children,
@@ -27,10 +28,9 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
     collapsed = $bindable(true),
     anchor = 'viewport',
     railTop = 0,
-    mobileNav = true,
-    showMobileFab = true,
-    showMobileFooter = false,
-    class: className
+    withNavbar = false,
+    class: className,
+    navbarProps
   }: RailProps = $props();
 
   const expanded = $derived(!collapsed);
@@ -99,34 +99,12 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
 </div>
 
 <!-- Mobile bottom navbar (md:hidden) -->
-{#if mobileNav}
-  {#if showMobileFab && fab}
-    <div class="fixed right-4 bottom-24 z-30 md:hidden">
-      {@render fab?.()}
-    </div>
-  {/if}
-
-  <nav
-    class="bg-md-sys-color-surface-container shadow-elevation-2 fixed right-0 bottom-0 left-0 z-20 flex h-20 items-center py-3 md:hidden"
-    aria-label="Mobile navigation"
-  >
-    <NavigationMenu.Root orientation="horizontal" class="flex w-full">
-      <NavigationMenu.List class="flex w-full justify-around">
-        <RailNavContext mobile={true}>
-          {@render children?.()}
-        </RailNavContext>
-      </NavigationMenu.List>
-    </NavigationMenu.Root>
-
-    {#if showMobileFooter && railFooter}
-      <div class="shrink-0 px-2">
-        {@render railFooter()}
-      </div>
-    {/if}
-  </nav>
-
-  <!-- Spacer so page content clears the fixed mobile navbar -->
-  <div class="h-20 w-full shrink-0 md:hidden" aria-hidden="true"></div>
+{#if withNavbar}
+  <Navbar {...navbarProps}>
+    <RailNavContext mobile={true}>
+      {@render children?.()}
+    </RailNavContext>
+  </Navbar>
 {/if}
 
 <style>

package/dist/components/nav/rail/types.d.ts

@@ -1,6 +1,7 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { NavBarProps } from '../navbar/types.js';
 import type { RailItemVariants, RailVariants } from './theme.js';
 /**
  * Props for the RailItem component.
@@ -43,10 +44,8 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     anchor?: RailVariants['anchor'];
     /** Top offset in px for viewport/parent anchor (e.g. height of a top bar). Default 0. */
     railTop?: number;
-    /** Render a bottom navbar on mobile (< md). Default true. */
-    mobileNav?: boolean;
-    /** Show the fab slot above the mobile navbar. Default true. */
-    showMobileFab?: boolean;
-    /** Show the railFooter slot inside the mobile navbar. Default false. */
-    showMobileFooter?: boolean;
+    /** Render a bottom navbar on mobile. */
+    withNavbar?: boolean;
+    /** Customise the navbar inside the rail */
+    navbarProps?: NavBarProps;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.37",
+  "version": "0.2.1",
   "type": "module",
   "license": "MIT",
   "repository": {