@noxlovette/material 0.1.27 → 0.1.29

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

@@ -20,7 +20,9 @@ SinglePane provides a centered or full-width container for content.
     ...rest
   }: SinglePaneProps = $props();
 
-  const { base, content } = $derived(singlePane({ padding, gap, centered, full, background, rounded }));
+  const { base, content } = $derived(
+    singlePane({ padding, gap, centered, full, background, rounded })
+  );
 </script>
 
 <div class={base({ class: clsx(className) })} {...rest}>

package/dist/components/toolbar/Toolbar.svelte

@@ -4,6 +4,8 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
 
 - variant="floating" — elevated, rounded, inline (default)
 - variant="docked"   — full-width, flat, anchored to top/bottom
+- variant="mobile"   — fixed above the bottom Navbar (bottom-20), full-width
+- ghost             — renders a h-16 spacer after the toolbar to prevent content scroll-under (pair with variant="mobile")
 - color="standard"   — surface-container background
 - color="vibrant"    — secondary-container background with inverted toggle selection
 - fab snippet        — renders a FAB at the trailing edge (canonical for docked bottom bars)
@@ -20,6 +22,7 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
   let {
     children,
     fab,
+    ghost = false,
     orientation = 'horizontal',
     loop = true,
     variant = 'floating',
@@ -42,3 +45,6 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
     </div>
   {/if}
 </Toolbar.Root>
+{#if ghost}
+  <div class={cls.ghost()} aria-hidden="true"></div>
+{/if}

package/dist/components/toolbar/Toolbar.svelte.d.ts

@@ -5,6 +5,8 @@ import type { ToolbarProps } from './types.js';
  *
  * - variant="floating" — elevated, rounded, inline (default)
  * - variant="docked"   — full-width, flat, anchored to top/bottom
+ * - variant="mobile"   — fixed above the bottom Navbar (bottom-20), full-width
+ * - ghost             — renders a h-16 spacer after the toolbar to prevent content scroll-under (pair with variant="mobile")
  * - color="standard"   — surface-container background
  * - color="vibrant"    — secondary-container background with inverted toggle selection
  * - fab snippet        — renders a FAB at the trailing edge (canonical for docked bottom bars)

package/dist/components/toolbar/theme.d.ts

@@ -20,6 +20,9 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
         docked: {
             root: string;
         };
+        mobile: {
+            root: string;
+        };
     };
     color: {
         standard: {
@@ -34,6 +37,7 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
     group: string;
     divider: string;
     fabSlot: string;
+    ghost: string;
 }, undefined, {
     orientation: {
         horizontal: {
@@ -52,6 +56,9 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
         docked: {
             root: string;
         };
+        mobile: {
+            root: string;
+        };
     };
     color: {
         standard: {
@@ -66,6 +73,7 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
     group: string;
     divider: string;
     fabSlot: string;
+    ghost: string;
 }, import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: {
@@ -84,6 +92,9 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
         docked: {
             root: string;
         };
+        mobile: {
+            root: string;
+        };
     };
     color: {
         standard: {
@@ -98,6 +109,7 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
     group: string;
     divider: string;
     fabSlot: string;
+    ghost: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
     color: {

package/dist/components/toolbar/theme.js

@@ -4,7 +4,8 @@ export const toolbar = tv({
         root: 'items-center gap-0.5 px-2',
         group: 'inline-flex items-center gap-0.5',
         divider: 'shrink-0 bg-md-sys-color-outline-variant',
-        fabSlot: 'ml-auto flex items-center ps-2'
+        fabSlot: 'ml-auto flex items-center ps-2',
+        ghost: 'h-16 w-full shrink-0 pointer-events-none'
     },
     variants: {
         orientation: {
@@ -13,7 +14,10 @@ export const toolbar = tv({
         },
         variant: {
             floating: { root: 'inline-flex rounded-2xl shadow-elevation-1 py-1' },
-            docked: { root: 'flex w-full rounded-none py-3' }
+            docked: { root: 'flex w-full rounded-none py-3' },
+            mobile: {
+                root: 'flex w-full rounded-none py-3 fixed bottom-20 left-0 z-10 shadow-elevation-2'
+            }
         },
         color: {
             standard: { root: 'bg-md-sys-color-surface-container' },

package/dist/components/toolbar/types.d.ts

@@ -6,6 +6,7 @@ export type ToolbarColor = 'standard' | 'vibrant';
 export type ToolbarProps = ToolbarVariants & Omit<ToolbarRootProps, 'children' | 'child'> & {
     children?: Snippet;
     fab?: Snippet;
+    ghost?: boolean;
     class?: string;
 };
 export type ToolbarButtonProps = Omit<BitsToolbarButtonProps, 'children' | 'child'> & {

package/package.json

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