@noxlovette/material 0.1.36 → 0.2.0

package/dist/components/containers/app/App.svelte

@@ -1,7 +1,8 @@
 <!--
 @component
 The core App wrapper that gives default backgrounds and sets up tooltips and icons.
-It manages the Material 3 Dynamic Theme, dark mode, and icon providers.
+By default it also manages the Material 3 Dynamic Theme and dark mode; pass
+`dynamicTheme={false}` to opt out and rely on static theme CSS instead.
 -->
 <script lang="ts">
   import { MaterialSymbolsProvider, Theme } from '../../../utils/index.js';
@@ -10,13 +11,21 @@ It manages the Material 3 Dynamic Theme, dark mode, and icon providers.
   import type { AppProps } from './types';
   import ThemeScript from '../../../utils/ThemeScript.svelte';
 
-  let { children, class: className, iconProviderProps = {}, ...restProps }: AppProps = $props();
+  let {
+    children,
+    class: className,
+    iconProviderProps = {},
+    dynamicTheme = true,
+    ...restProps
+  }: AppProps = $props();
 
   const baseCls = $derived(app({ class: className }));
 </script>
 
-<ThemeScript />
-<Theme />
+{#if dynamicTheme}
+  <ThemeScript />
+  <Theme />
+{/if}
 <MaterialSymbolsProvider {...iconProviderProps} />
 <Tooltip.Provider>
   <div class={baseCls} {...restProps}>

package/dist/components/containers/app/App.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { AppProps } from './types';
 /**
  * The core App wrapper that gives default backgrounds and sets up tooltips and icons.
- * It manages the Material 3 Dynamic Theme, dark mode, and icon providers.
+ * By default it also manages the Material 3 Dynamic Theme and dark mode; pass
+ * `dynamicTheme={false}` to opt out and rely on static theme CSS instead.
  */
 declare const App: import("svelte").Component<AppProps, {}, "">;
 type App = ReturnType<typeof App>;

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

@@ -8,4 +8,12 @@ export type AppProps = DivAttrs & {
     class?: string;
     /** Props to pass to the material symbols provider */
     iconProviderProps?: Partial<MaterialSymbolsProviderProps>;
+    /**
+     * Whether App manages the M3 dynamic theme (source-color extraction, dark-mode
+     * sync, and the injected `<ThemeScript>`/`<Theme>` head elements).
+     * Set to `false` if you supply your own static `@noxlovette/material/theme/*` CSS
+     * and want to opt out of the runtime dynamic-theming machinery entirely.
+     * @default true
+     */
+    dynamicTheme?: boolean;
 };

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

@@ -16,6 +16,7 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
     };
     full: {
         true: {
+            left: string;
             right: string;
         };
         false: string;
@@ -23,9 +24,11 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
     rounded: {
         true: {
             left: string;
+            right: string;
         };
         false: {
             left: string;
+            right: string;
         };
     };
 }, {
@@ -49,6 +52,7 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
     };
     full: {
         true: {
+            left: string;
             right: string;
         };
         false: string;
@@ -56,9 +60,11 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
     rounded: {
         true: {
             left: string;
+            right: string;
         };
         false: {
             left: string;
+            right: string;
         };
     };
 }, {
@@ -82,6 +88,7 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
     };
     full: {
         true: {
+            left: string;
             right: string;
         };
         false: string;
@@ -89,9 +96,11 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
     rounded: {
         true: {
             left: string;
+            right: string;
         };
         false: {
             left: string;
+            right: string;
         };
     };
 }, {

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

@@ -22,16 +22,19 @@ export const splitPane = tv({
         },
         full: {
             true: {
+                left: 'md:bottom-[30px]',
                 right: 'md:min-h-[calc(100dvh-30px)]'
             },
             false: ''
         },
         rounded: {
             true: {
-                left: 'md:rounded-t-lg'
+                left: 'md:rounded-t-lg md:rounded-b-lg',
+                right: 'md:rounded-b-lg'
             },
             false: {
-                left: ''
+                left: '',
+                right: ''
             }
         }
     },

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,7 +28,7 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
     collapsed = $bindable(true),
     anchor = 'viewport',
     railTop = 0,
-    mobileNav = true,
+    withNavbar = false,
     showMobileFab = true,
     showMobileFooter = false,
     class: className
@@ -99,34 +100,16 @@ 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"
+{#if withNavbar}
+  <Navbar
+    fab={showMobileFab ? fab : undefined}
+    trailing={showMobileFooter ? railFooter : undefined}
+    ghost
   >
-    <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>
+    <RailNavContext mobile={true}>
+      {@render children?.()}
+    </RailNavContext>
+  </Navbar>
 {/if}
 
 <style>

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

@@ -43,8 +43,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;
+    /** Render a bottom navbar on mobile (< md). Default false — opt in, since consumers may render their own mobile nav. */
+    withNavbar?: boolean;
     /** Show the fab slot above the mobile navbar. Default true. */
     showMobileFab?: boolean;
     /** Show the railFooter slot inside the mobile navbar. Default false. */

package/package.json

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