@noxlovette/material 0.1.32 → 0.1.33

package/dist/components/containers/panes/SplitPane.svelte

@@ -22,6 +22,7 @@ SplitPane provides a resizable two-column layout.
     persist = true,
     onPaddingChange,
     anchor = 'viewport',
+    mobilePane = 'right',
     class: className,
     leftClass,
     rightClass
@@ -35,6 +36,11 @@ SplitPane provides a resizable two-column layout.
     handleGrip
   } = $derived(splitPane({ full, anchor, rounded }));
 
+  const leftMobileClass = $derived(
+    mobilePane === 'left' ? 'block w-full md:w-[var(--splitpane-left-width)]' : ''
+  );
+  const rightMobileClass = $derived(mobilePane === 'left' ? 'hidden md:flex' : '');
+
   const leftOffset = $derived(anchor === 'viewport' ? 'var(--splitpane-offset, 0px)' : '0px');
   const handleOffset = $derived(
     anchor === 'viewport'
@@ -98,8 +104,10 @@ SplitPane provides a resizable two-column layout.
 <div class={base({ class: clsx(className) })} style={`--splitpane-left-width: ${leftWidth}px;`}>
   <!-- LEFT PANE -->
   <div
-    class={lCls({ class: leftClass })}
-    style={`width: var(--splitpane-left-width); left: ${leftOffset};`}
+    class={lCls({ class: clsx(leftClass, leftMobileClass) })}
+    style={mobilePane === 'left'
+      ? `left: ${leftOffset};`
+      : `width: var(--splitpane-left-width); left: ${leftOffset};`}
   >
     {@render left()}
   </div>
@@ -126,7 +134,7 @@ SplitPane provides a resizable two-column layout.
   </div>
 
   <!-- RIGHT PANE -->
-  <div class={rCls({ class: rightClass })}>
+  <div class={rCls({ class: clsx(rightClass, rightMobileClass) })}>
     {@render right()}
   </div>
 </div>

package/dist/components/containers/panes/SupportingPane.svelte

@@ -9,6 +9,38 @@ SupportingPane provides a layout with a main content area and a supporting side
   import type { SupportingPaneProps } from './types.js';
   import { supportingPane } from './theme.js';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import {
+    easeEmphasized,
+    easeEmphasizedAccel,
+    easeEmphasizedDecel
+  } from '../../../animation/easing.js';
+  import { fade } from 'svelte/transition';
+  import type { TransitionConfig } from 'svelte/transition';
+
+  function slideWidth(node: HTMLElement): TransitionConfig {
+    const width = node.offsetWidth;
+    return {
+      duration: 500,
+      easing: easeEmphasized,
+      css: (t) => `width: ${t * width}px; min-width: 0; overflow: hidden;`
+    };
+  }
+
+  function sheetIn(_node: HTMLElement): TransitionConfig {
+    return {
+      duration: 500,
+      easing: easeEmphasizedDecel,
+      css: (t) => `transform: translateY(${(1 - t) * 100}%);`
+    };
+  }
+
+  function sheetOut(_node: HTMLElement): TransitionConfig {
+    return {
+      duration: 280,
+      easing: easeEmphasizedAccel,
+      css: (t) => `transform: translateY(${(1 - t) * 100}%);`
+    };
+  }
 
   const {
     main,
@@ -24,11 +56,15 @@ SupportingPane provides a layout with a main content area and a supporting side
     supportingClass,
     collapsible,
     supportingWidth = 320,
-    supportingTop = 0
+    supportingTop = 0,
+    mobileSheet = false,
+    mobileSheetIcon = 'info',
+    mobileTriggerClass
   }: SupportingPaneProps = $props();
 
   let entered = $state(false);
   let supportingVisible = $state(true);
+  let mobileSheetOpen = $state(false);
   const supportingId = 'supporting-pane';
 
   const {
@@ -42,12 +78,14 @@ SupportingPane provides a layout with a main content area and a supporting side
       ? `--supporting-pane-width: ${supportingWidth}px; --supporting-pane-top: ${supportingTop}px;`
       : ''
   );
+
+  const inlineSupportingClass = $derived(mobileSheet ? 'hidden lg:block' : '');
 </script>
 
 <div class={base({ class: clsx(className) })} style={cssVars}>
   <div class={mainCls({ class: clsx('relative', mainClass) })}>
     {#if collapsible}
-      <div class="top-3 right-3 z-10 hidden h-12 w-12 md:absolute md:block">
+      <div class="top-3 right-3 z-10 hidden h-12 w-12 lg:absolute lg:block">
         <ButtonIcon
           triggerClass=""
           type="button"
@@ -67,12 +105,24 @@ SupportingPane provides a layout with a main content area and a supporting side
       </div>
     {/if}
     {@render main()}
+    {#if mobileSheet}
+      <ButtonIcon
+        class={clsx('fixed right-4 bottom-6 z-30 lg:hidden', mobileTriggerClass)}
+        type="button"
+        variant="tonal"
+        iconProps={{ name: mobileSheetIcon }}
+        aria-label="Open supporting panel"
+        onclick={() => (mobileSheetOpen = true)}
+      />
+    {/if}
   </div>
+
   {#if supportingVisible}
     <aside
+      transition:slideWidth
       id={supportingId}
       class={supportingCls({
-        class: clsx(supportingClass)
+        class: clsx(supportingClass, inlineSupportingClass)
       })}
       data-entered={entered}
       data-position={position}
@@ -81,3 +131,31 @@ SupportingPane provides a layout with a main content area and a supporting side
     </aside>
   {/if}
 </div>
+
+{#if mobileSheet && mobileSheetOpen}
+  <!-- Scrim -->
+  <div
+    class="bg-md-sys-color-scrim/40 fixed inset-0 z-40 lg:hidden"
+    transition:fade={{ duration: 220 }}
+    onclick={() => (mobileSheetOpen = false)}
+    aria-hidden="true"
+  ></div>
+
+  <!-- Sheet -->
+  <div
+    class="bg-md-sys-color-surface-container-low fixed inset-x-0 bottom-0 z-50 max-h-[85dvh] scrollbar-none overflow-y-auto rounded-t-[28px] pb-[env(safe-area-inset-bottom)] lg:hidden"
+    in:sheetIn
+    out:sheetOut
+    role="dialog"
+    aria-modal="true"
+  >
+    <button
+      class="flex w-full cursor-pointer items-center justify-center pt-4 pb-2"
+      aria-label="Close supporting panel"
+      onclick={() => (mobileSheetOpen = false)}
+    >
+      <div class="bg-md-sys-color-on-surface-variant/40 h-1 w-8 rounded-full"></div>
+    </button>
+    {@render supporting()}
+  </div>
+{/if}

package/dist/components/containers/panes/theme.d.ts

@@ -312,16 +312,16 @@ export declare const supportingPane: import("tailwind-variants").TVReturnType<{
     };
     gap: {
         none: {
-            base: string;
+            main: string;
         };
         sm: {
-            base: string;
+            main: string;
         };
         md: {
-            base: string;
+            main: string;
         };
         lg: {
-            base: string;
+            main: string;
         };
     };
     full: {
@@ -371,16 +371,16 @@ export declare const supportingPane: import("tailwind-variants").TVReturnType<{
     };
     gap: {
         none: {
-            base: string;
+            main: string;
         };
         sm: {
-            base: string;
+            main: string;
         };
         md: {
-            base: string;
+            main: string;
         };
         lg: {
-            base: string;
+            main: string;
         };
     };
     full: {
@@ -430,16 +430,16 @@ export declare const supportingPane: import("tailwind-variants").TVReturnType<{
     };
     gap: {
         none: {
-            base: string;
+            main: string;
         };
         sm: {
-            base: string;
+            main: string;
         };
         md: {
-            base: string;
+            main: string;
         };
         lg: {
-            base: string;
+            main: string;
         };
     };
     full: {

package/dist/components/containers/panes/theme.js

@@ -91,28 +91,28 @@ export const singlePane = tv({
 });
 export const supportingPane = tv({
     slots: {
-        base: 'flex w-full flex-col md:flex-row',
-        main: 'bg-md-sys-color-surface box-border grow order-2 md:order-1',
-        supporting: 'text-md-sys-color-on-surface-container box-border order-1 md:order-2 min-w-min md:w-80 overflow-x-visible'
+        base: 'flex w-full flex-col lg:flex-row',
+        main: 'bg-md-sys-color-surface box-border grow order-2 lg:order-1',
+        supporting: 'text-md-sys-color-on-surface-container box-border order-1 lg:order-2 min-w-0 lg:w-80'
     },
     variants: {
         anchor: {
             // supporting scrolls independently; main scrolls the page
             viewport: {
-                supporting: 'md:fixed md:top-[var(--supporting-pane-top,0px)] md:bottom-0 md:w-[var(--supporting-pane-width,320px)] md:overflow-y-auto scrollbar-none'
+                supporting: 'lg:fixed lg:top-[var(--supporting-pane-top,0px)] lg:bottom-0 lg:w-[var(--supporting-pane-width,320px)] lg:overflow-y-auto scrollbar-none'
             },
             // supporting sticks as user scrolls the page (classic sticky)
             parent: {
-                supporting: 'md:sticky md:top-4 overflow-y-scroll'
+                supporting: 'lg:sticky lg:top-4 overflow-y-scroll'
             }
         },
         position: {
             right: {
-                base: 'md:flex-row',
+                base: 'lg:flex-row',
                 supporting: ''
             },
             left: {
-                base: 'md:flex-row-reverse',
+                base: 'lg:flex-row-reverse',
                 supporting: ''
             }
         },
@@ -125,10 +125,10 @@ export const supportingPane = tv({
             }
         },
         gap: {
-            none: { base: 'gap-0' },
-            sm: { base: 'gap-4' },
-            md: { base: 'gap-6' },
-            lg: { base: 'gap-8' }
+            none: { main: 'gap-0' },
+            sm: { main: 'gap-4' },
+            md: { main: 'gap-6' },
+            lg: { main: 'gap-8' }
         },
         full: {
             true: { base: 'min-h-dvh' },
@@ -148,16 +148,16 @@ export const supportingPane = tv({
             anchor: 'viewport',
             position: 'right',
             class: {
-                supporting: 'md:right-0',
-                main: 'md:mr-[var(--supporting-pane-width,320px)]'
+                supporting: 'lg:right-0',
+                main: 'lg:mr-[var(--supporting-pane-width,320px)]'
             }
         },
         {
             anchor: 'viewport',
             position: 'left',
             class: {
-                supporting: 'md:left-0',
-                main: 'md:ml-[var(--supporting-pane-width,320px)]'
+                supporting: 'lg:left-0',
+                main: 'lg:ml-[var(--supporting-pane-width,320px)]'
             }
         }
     ],

package/dist/components/containers/panes/types.d.ts

@@ -38,6 +38,11 @@ export type SplitPaneProps = SplitPaneVariants & DivAttrs & {
     onPaddingChange?: (padding: number) => void;
     /** The anchor mode for the panes. */
     anchor?: SplitPaneVariants['anchor'];
+    /**
+     * Which pane to show on mobile. On desktop both panes are always visible.
+     * @default 'right'
+     */
+    mobilePane?: 'left' | 'right';
     /** Optional class for the left pane. */
     leftClass?: string;
     /** Optional class for the right pane. */
@@ -55,8 +60,14 @@ export type SupportingPaneProps = SupportingPaneVariants & DivAttrs & {
     mainClass?: string;
     /** Optional class for the supporting pane. */
     supportingClass?: string;
-    /** Whether the supporting pane can be collapsed. */
+    /** Whether the supporting pane can be collapsed (desktop). */
     collapsible?: boolean;
+    /** Show a bottom sheet on mobile instead of inline stacking. @default false */
+    mobileSheet?: boolean;
+    /** Material symbol name for the mobile sheet trigger button. @default 'info' */
+    mobileSheetIcon?: string;
+    /** Extra class for the mobile trigger button (use to position above navbars). */
+    mobileTriggerClass?: string;
     /**
      * Width of the supporting pane in px (viewport anchor mode).
      * @default 320

package/dist/components/forms/switch/Switch.svelte

@@ -59,10 +59,10 @@ Switches toggle the state of a single setting on or off.
       <div class={String(handle())}>
         {#if icons !== 'none'}
           <!-- checked icon -->
-          <Icon class={clsx(icon(), iconChecked())} {...checkedIconProps} />
+          <Icon size="xs" class={clsx(icon(), iconChecked())} {...checkedIconProps} />
           {#if icons === 'both'}
             <!-- unchecked icon -->
-            <Icon class={clsx(icon(), iconUnchecked())} {...uncheckedIconProps} />
+            <Icon size="xs" class={clsx(icon(), iconUnchecked())} {...uncheckedIconProps} />
           {/if}
         {/if}
       </div>

package/dist/components/forms/switch/theme.js

@@ -44,14 +44,20 @@ export const toggle = tv({
             'group-hover:bg-md-sys-color-on-surface/8',
             'group-data-[state=checked]:group-hover:bg-md-sys-color-primary/8'
         ].join(' '),
-        // Icon inside thumb - shared base
+        // Icon inside thumb - shared base (sized via size="xs" prop on Icon, not here)
         icon: [
-            'absolute inset-0 m-auto pointer-events-none flex h-4 w-4 items-center justify-center text-[16px]',
+            'absolute inset-0 m-auto pointer-events-none flex items-center justify-center',
             'opacity-0 transition-opacity duration-150 shrink-0'
         ].join(' '),
-        // Specific icon states - using group state
-        iconChecked: 'group-data-[state=checked]:opacity-100',
-        iconUnchecked: 'group-data-[state=unchecked]:opacity-100'
+        // Specific icon states - colour matches M3 spec for each thumb background
+        iconChecked: [
+            'group-data-[state=checked]:opacity-100',
+            'text-md-sys-color-on-primary-container'
+        ].join(' '),
+        iconUnchecked: [
+            'group-data-[state=unchecked]:opacity-100',
+            'text-md-sys-color-on-surface-variant'
+        ].join(' ')
     },
     variants: {
         icons: {

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

@@ -3,6 +3,7 @@
 Material 3 Navigation Rail.
 
 Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.
+On mobile (< md) it automatically renders as a bottom navigation bar.
 
 @see https://m3.material.io/components/navigation-rail/overview
 -->
@@ -14,6 +15,8 @@ Navigation rails provide access to primary destinations in apps when using table
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import { rail } from './theme';
   import { NavigationMenu } from 'bits-ui';
+  import { railStore } from './railStore.svelte.js';
+  import RailNavContext from './RailNavContext.svelte';
 
   let {
     children,
@@ -24,6 +27,9 @@ Navigation rails provide access to primary destinations in apps when using table
     collapsed = $bindable(true),
     anchor = 'viewport',
     railTop = 0,
+    mobileNav = true,
+    showMobileFab = true,
+    showMobileFooter = false,
     class: className
   }: RailProps = $props();
 
@@ -34,15 +40,29 @@ Navigation rails provide access to primary destinations in apps when using table
     }
   };
   setContext('rail', railCtx);
+
+  $effect(() => {
+    railStore.collapsed = collapsed;
+  });
+
   const { base, items, ghost, scrim } = $derived(rail({ expanded, anchor, rounded }));
   const railBaseClass = $derived(`${base({ class: clsx(className) })} rail-base`);
   const toggleClass = $derived(collapsed ? 'cursor-e-resize' : 'cursor-w-resize');
   const cssVars = $derived(`--rail-top: ${railTop}px;`);
 </script>
 
+<!-- Push ghost: hidden on mobile, becomes flex item on md+ to push content -->
 <div class={ghost()}></div>
 
-<div class={`${scrim()} rail-scrim`} data-expanded={expanded}></div>
+<!-- Tablet scrim (md:block lg:hidden) — overlays content on expand -->
+<div
+  class={`${scrim()} rail-scrim`}
+  data-expanded={expanded}
+  onclick={() => (collapsed = true)}
+  role="presentation"
+></div>
+
+<!-- Desktop/tablet sidebar rail -->
 <div
   class={railBaseClass}
   style={cssVars}
@@ -65,7 +85,9 @@ Navigation rails provide access to primary destinations in apps when using table
 
   <NavigationMenu.Root orientation="vertical" class="w-full">
     <NavigationMenu.List class={`${items()} rail-items`}>
-      {@render children?.()}
+      <RailNavContext mobile={false}>
+        {@render children?.()}
+      </RailNavContext>
     </NavigationMenu.List>
   </NavigationMenu.Root>
 
@@ -76,14 +98,50 @@ Navigation rails provide access to primary destinations in apps when using table
   {/if}
 </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}
+
 <style>
   .rail-scrim {
     opacity: 0;
     pointer-events: none;
+    background-color: transparent;
+    z-index: -1;
+    transition: opacity 200ms ease;
   }
 
   .rail-scrim[data-expanded='true'] {
     opacity: 1;
     pointer-events: auto;
+    background-color: rgb(0 0 0 / 0.4);
+    z-index: 30;
   }
 </style>

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

@@ -3,6 +3,7 @@ import type { RailProps } from './types';
  * Material 3 Navigation Rail.
  *
  * Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.
+ * On mobile (< md) it automatically renders as a bottom navigation bar.
  *
  * @see https://m3.material.io/components/navigation-rail/overview
  */

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

@@ -3,6 +3,7 @@
 Material 3 Navigation Rail Item.
 
 A single destination within a navigation rail.
+In mobile (navbar) mode the same item renders as a bottom-bar tab.
 -->
 <script lang="ts">
   import { page } from '$app/state';
@@ -27,7 +28,11 @@ A single destination within a navigation rail.
   }: RailItemProps = $props();
 
   const railCtx = getContext<{ collapsed: boolean } | undefined>('rail');
-  const collapsed = $derived(collapsedProp ?? railCtx?.collapsed ?? true);
+  const railModeCtx = getContext<{ mobile: boolean } | undefined>('railMode');
+  const isMobile = $derived(railModeCtx?.mobile ?? false);
+
+  // Mobile items always render in collapsed (icon+label stacked) layout
+  const collapsed = $derived(isMobile ? true : (collapsedProp ?? railCtx?.collapsed ?? true));
 
   const isDisabled = $derived(!!disabled);
   const target = $derived(!isDisabled && external ? '_blank' : undefined);
@@ -57,11 +62,18 @@ A single destination within a navigation rail.
     railElement({
       active: isActive,
       expanded: !collapsed,
-      disabled: isDisabled
+      disabled: isDisabled,
+      mobile: isMobile
     })
   );
   const rootClass = $derived([base(), className].filter(Boolean).join(' '));
 
+  const itemClass = $derived(
+    isMobile
+      ? 'flex h-full flex-1 justify-center'
+      : ['flex w-full items-center', collapsed && 'justify-center'].filter(Boolean).join(' ')
+  );
+
   function handleClick(event: MouseEvent) {
     if (isDisabled) {
       event.preventDefault();
@@ -70,9 +82,7 @@ A single destination within a navigation rail.
   }
 </script>
 
-<NavigationMenu.Item
-  class={['flex w-full items-center', collapsed && 'justify-center'].filter(Boolean).join(' ')}
->
+<NavigationMenu.Item class={itemClass}>
   <NavigationMenu.Link active={isActive} href={hrefValue}>
     {#snippet child({ props })}
       <a

package/dist/components/nav/rail/RailItem.svelte.d.ts

@@ -3,6 +3,7 @@ import type { RailItemProps } from './types.js';
  * Material 3 Navigation Rail Item.
  *
  * A single destination within a navigation rail.
+ * In mobile (navbar) mode the same item renders as a bottom-bar tab.
  */
 declare const RailItem: import("svelte").Component<RailItemProps, {}, "">;
 type RailItem = ReturnType<typeof RailItem>;

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  let { children, mobile = false }: { children: Snippet; mobile?: boolean } = $props();
+
+  setContext('railMode', {
+    get mobile() {
+      return mobile;
+    }
+  });
+</script>
+
+{@render children()}

package/dist/components/nav/rail/RailNavContext.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    mobile?: boolean;
+};
+declare const RailNavContext: import("svelte").Component<$$ComponentProps, {}, "">;
+type RailNavContext = ReturnType<typeof RailNavContext>;
+export default RailNavContext;

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

@@ -1,3 +1,4 @@
+export * from './railStore.svelte.js';
 export * from './theme.js';
 export * from './types.js';
 export { default as Rail } from './Rail.svelte';

package/dist/components/nav/rail/index.js

@@ -1,5 +1,6 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
 // re-export TS/JS modules from this folder
+export * from './railStore.svelte.js';
 export * from './theme.js';
 export * from './types.js';
 // default exports for components in this folder

package/dist/components/nav/rail/railStore.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare const railStore: {
+    collapsed: boolean;
+};

package/dist/components/nav/rail/railStore.svelte.js

@@ -0,0 +1,9 @@
+let _collapsed = $state(true);
+export const railStore = {
+    get collapsed() {
+        return _collapsed;
+    },
+    set collapsed(v) {
+        _collapsed = v;
+    }
+};

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

@@ -16,7 +16,6 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
             ghost: string;
-            scrim: string;
         };
         false: {
             base: string;
@@ -50,7 +49,6 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
             ghost: string;
-            scrim: string;
         };
         false: {
             base: string;
@@ -84,7 +82,6 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
         true: {
             base: string;
             ghost: string;
-            scrim: string;
         };
         false: {
             base: string;
@@ -135,6 +132,16 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    mobile: {
+        true: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            icon: string;
+            label: string;
+        };
+        false: {};
+    };
 }, {
     base: string;
     content: string;
@@ -172,6 +179,16 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    mobile: {
+        true: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            icon: string;
+            label: string;
+        };
+        false: {};
+    };
 }, {
     base: string;
     content: string;
@@ -209,6 +226,16 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    mobile: {
+        true: {
+            base: string;
+            content: string;
+            iconContainer: string;
+            icon: string;
+            label: string;
+        };
+        false: {};
+    };
 }, {
     base: string;
     content: string;

package/dist/components/nav/rail/theme.js

@@ -4,7 +4,7 @@ export const rail = tv({
         base: 'py-12 hidden bg-md-sys-color-surface-container z-40 flex-col md:flex gap-6 transition-[width,padding,background-color] duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
         items: 'flex flex-col gap-3 pt-6 scrollbar-none w-full overflow-x-hidden',
         ghost: 'hidden md:block shrink-0 transition-[width] duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]',
-        scrim: 'xl:hidden inset-0 -z-10 transition-opacity duration-[var(--md-sys-motion-duration-spatial)] ease-[var(--md-sys-motion-timing-function-emphasized)]'
+        scrim: 'hidden md:block lg:hidden inset-0'
     },
     variants: {
         anchor: {
@@ -19,9 +19,8 @@ export const rail = tv({
         },
         expanded: {
             true: {
-                base: 'pl-9 w-60 items-start bg-md-sys-color-surface-container-highest xl:bg-md-sys-color-surface-container rounded-r-lg',
-                ghost: 'w-24 xl:w-60',
-                scrim: 'z-20 bg-black/40'
+                base: 'pl-9 w-60 items-start bg-md-sys-color-surface-container-highest lg:bg-md-sys-color-surface-container rounded-r-lg',
+                ghost: 'w-24 lg:w-60'
             },
             false: {
                 base: 'w-24 items-center',
@@ -78,6 +77,16 @@ export const railElement = tv({
             true: {
                 base: 'cursor-not-allowed opacity-38'
             }
+        },
+        mobile: {
+            true: {
+                base: 'flex-1 flex-col items-center justify-center h-full min-w-0 max-w-[168px]',
+                content: 'py-0 gap-1 items-center justify-center w-full',
+                iconContainer: 'h-8 w-16 py-0 px-0',
+                icon: 'size-6',
+                label: 'truncate w-full text-center'
+            },
+            false: {}
         }
     },
     compoundVariants: [

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

@@ -43,4 +43,10 @@ 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;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -42,38 +42,38 @@
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.59.1",
-    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/kit": "^2.63.0",
+    "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tailwindcss/cli": "^4.3.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.3.0",
-    "@types/node": "^25.6.2",
-    "eslint": "^10.3.0",
+    "@types/node": "^25.9.2",
+    "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.17.1",
+    "eslint-plugin-svelte": "^3.19.0",
     "globals": "^17.6.0",
-    "lefthook": "^2.1.6",
+    "lefthook": "^2.1.9",
     "prettier": "^3.8.3",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-svelte": "^3.5.1",
+    "prettier-plugin-svelte": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.8.0",
-    "publint": "^0.3.20",
-    "svelte": "^5.55.5",
-    "svelte-check": "^4.4.8",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.2",
+    "svelte-check": "^4.6.0",
     "sveltekit-superforms": "^2.30.1",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.12",
+    "typescript-eslint": "^8.60.1",
+    "vite": "^8.0.16",
     "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^4.1.5",
+    "vitest": "^4.1.8",
     "zod": "^4.4.3"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@internationalized/date": "^3.12.1",
+    "@internationalized/date": "^3.12.2",
     "@ktibow/material-color-utilities-nightly": "^0.4.1772748028000",
     "bits-ui": "^2.18.1",
     "clsx": "^2.1.1",