@noxlovette/material 0.1.24 → 0.1.25

package/dist/components/nav/appbar/AppBar.svelte

@@ -20,6 +20,7 @@ They’re used for branding, screen titles, navigation, and actions.
     leading,
     class: className,
     showBack,
+    ghost = false,
     ...rest
   }: AppBarProps = $props();
 
@@ -31,6 +32,7 @@ They’re used for branding, screen titles, navigation, and actions.
 
   const {
     base,
+    ghost: ghostCls,
     title: titleCLs,
     textContainer,
     subtitle: subtitleCls,
@@ -58,3 +60,6 @@ They’re used for branding, screen titles, navigation, and actions.
     {@render trailing?.()}
   </div>
 </nav>
+{#if ghost}
+  <div class={ghostCls()} aria-hidden="true"></div>
+{/if}

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

@@ -27,6 +27,7 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    ghost: string;
     textContainer: string;
     title: string;
     subtitle: string;
@@ -59,6 +60,7 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    ghost: string;
     textContainer: string;
     title: string;
     subtitle: string;
@@ -91,6 +93,7 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
+    ghost: string;
     textContainer: string;
     title: string;
     subtitle: string;

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

@@ -1,7 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const appbar = tv({
     slots: {
-        base: 'py-1 fixed top-0 left-0 w-full md:hidden flex z-40 items-center justify-between',
+        base: 'h-16 py-1 fixed top-0 left-0 w-full md:hidden flex z-40 items-center justify-between',
+        ghost: 'h-16 w-full shrink-0 md:hidden pointer-events-none',
         textContainer: 'flex flex-col items-start gap-0.5 grow',
         title: 'text-md-sys-color-on-surface md-sys-typescale-title-large line-clamp-1   capitalize ',
         subtitle: 'text-md-sys-color-on-surface-variant md-sys-typescale-label-medium',

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

@@ -17,4 +17,6 @@ export type AppBarProps = AppbarVariants & HTMLAttributes<HTMLElementTagNameMap[
     trailing?: Snippet;
     /** Whether to show a back button in the leading section. */
     showBack?: boolean;
+    /** Renders an invisible same-height spacer after the fixed bar so page content isn't obscured. */
+    ghost?: boolean;
 };

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

@@ -10,13 +10,13 @@ This component takes NavbarItems as its children
 @see https://m3.material.io/components/navigation-bar/overview
 -->
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { navbar } from './theme.js';
   import { NavigationMenu } from 'bits-ui';
+  import { navbar } from './theme.js';
+  import type { NavBarProps } from './types.js';
 
-  const { children, fab }: { children: Snippet; fab?: Snippet } = $props();
+  const { children, fab, ghost = false }: NavBarProps = $props();
 
-  const { base, items, fab: fabCls } = $derived(navbar());
+  const { base, items, fab: fabCls, ghost: ghostCls } = $derived(navbar());
 </script>
 
 <div class={base()}>
@@ -31,3 +31,6 @@ This component takes NavbarItems as its children
     </NavigationMenu.List>
   </NavigationMenu.Root>
 </div>
+{#if ghost}
+  <div class={ghostCls()} aria-hidden="true"></div>
+{/if}

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

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    children: Snippet;
-    fab?: Snippet;
-};
+import type { NavBarProps } from './types.js';
 /**
  * Material 3 Navigation Bar.
  *
@@ -13,6 +9,6 @@ type $$ComponentProps = {
  *
  * @see https://m3.material.io/components/navigation-bar/overview
  */
-declare const Navbar: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Navbar: import("svelte").Component<NavBarProps, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;
 export default Navbar;

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

@@ -3,6 +3,7 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
             items?: import("tailwind-merge").ClassNameValue;
+            ghost?: import("tailwind-merge").ClassNameValue;
             fab?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -11,6 +12,7 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
             items?: import("tailwind-merge").ClassNameValue;
+            ghost?: import("tailwind-merge").ClassNameValue;
             fab?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -18,11 +20,13 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     base: string;
     items: string;
     fab: string;
+    ghost: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
             items?: import("tailwind-merge").ClassNameValue;
+            ghost?: import("tailwind-merge").ClassNameValue;
             fab?: import("tailwind-merge").ClassNameValue;
         };
     };
@@ -30,10 +34,12 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     base: string;
     items: string;
     fab: string;
+    ghost: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
     items: string;
     fab: string;
+    ghost: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const navitem: import("tailwind-variants").TVReturnType<{
     active: {

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

@@ -3,7 +3,8 @@ export const navbar = tv({
     slots: {
         base: 'shadow-elevation-2 bg-md-sys-color-surface-container relative z-20 flex h-20 fixed bottom-0 w-full left-0 justify-around py-3 md:hidden',
         items: 'flex justify-around w-full',
-        fab: 'bottom-24 right-4 absolute'
+        fab: 'bottom-24 right-4 absolute',
+        ghost: 'h-20 w-full shrink-0 md:hidden pointer-events-none'
     }
 });
 export const navitem = tv({

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

@@ -26,4 +26,6 @@ export type NavBarProps = NavBarVariants & HTMLAttributes<HTMLDivElement> & {
     children: Snippet;
     /** An optional Floating Action Button snippet. */
     fab?: Snippet;
+    /** Renders an invisible same-height spacer after the fixed bar so page content isn't obscured. */
+    ghost?: boolean;
 };

package/dist/components/toolbar/Toolbar.svelte

@@ -2,25 +2,43 @@
 @component
 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
+- 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)
+
 @see https://m3.material.io/components/toolbars
 -->
 <script lang="ts">
   import { Toolbar } from 'bits-ui';
   import clsx from 'clsx';
+  import { setContext } from 'svelte';
   import { toolbar } from './theme.js';
   import type { ToolbarProps } from './types.js';
 
   let {
     children,
+    fab,
     orientation = 'horizontal',
     loop = true,
+    variant = 'floating',
+    color = 'standard',
     class: className,
     ...restProps
   }: ToolbarProps = $props();
 
-  const cls = $derived(toolbar({ orientation }));
+  setContext('toolbar-color', color);
+  setContext('toolbar-orientation', orientation);
+
+  const cls = $derived(toolbar({ orientation, variant, color }));
 </script>
 
 <Toolbar.Root {orientation} {loop} class={cls.root({ class: clsx(className) })} {...restProps}>
   {@render children?.()}
+  {#if fab}
+    <div class={cls.fabSlot()}>
+      {@render fab()}
+    </div>
+  {/if}
 </Toolbar.Root>

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

@@ -3,6 +3,12 @@ import type { ToolbarProps } from './types.js';
 /**
  * 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
+ * - 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)
+ *
  * @see https://m3.material.io/components/toolbars
  */
 declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "">;

package/dist/components/toolbar/ToolbarButton.svelte

@@ -1,13 +1,16 @@
 <!--
 @component
 An action button within a Toolbar. Non-toggleable.
+Color is inherited from the parent Toolbar via context.
 -->
 <script lang="ts">
   import { Toolbar } from 'bits-ui';
   import clsx from 'clsx';
+  import { getContext } from 'svelte';
   import { Icon, Layer } from '../../utils/index.js';
   import { toolbarButton } from './theme.js';
   import type { ToolbarButtonProps } from './types.js';
+  import type { ToolbarColor } from './types.js';
 
   let {
     iconProps,
@@ -16,7 +19,8 @@ An action button within a Toolbar. Non-toggleable.
     ...restProps
   }: ToolbarButtonProps = $props();
 
-  const { base, icon } = toolbarButton();
+  const color = getContext<ToolbarColor>('toolbar-color') ?? 'standard';
+  const { base, icon } = toolbarButton({ color });
 </script>
 
 <Toolbar.Button {disabled} class={base({ class: clsx(className) })} {...restProps}>

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

@@ -1,5 +1,8 @@
 import type { ToolbarButtonProps } from './types.js';
-/** An action button within a Toolbar. Non-toggleable. */
+/**
+ * An action button within a Toolbar. Non-toggleable.
+ * Color is inherited from the parent Toolbar via context.
+ */
 declare const ToolbarButton: import("svelte").Component<ToolbarButtonProps, {}, "">;
 type ToolbarButton = ReturnType<typeof ToolbarButton>;
 export default ToolbarButton;

package/dist/components/toolbar/ToolbarDivider.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
+  import { getContext } from 'svelte';
   import { toolbar } from './theme.js';
-  const cls = toolbar();
+
+  const orientation = getContext<'horizontal' | 'vertical'>('toolbar-orientation') ?? 'horizontal';
+  const cls = toolbar({ orientation });
+
+  // separator runs perpendicular to the toolbar flow
+  const ariaOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
 </script>
 
-<div class={cls.divider()} role="separator" aria-orientation="vertical"></div>
+<div class={cls.divider()} role="separator" aria-orientation={ariaOrientation}></div>

package/dist/components/toolbar/ToolbarGroupItem.svelte

@@ -2,13 +2,16 @@
 @component
 A toggleable icon button within a ToolbarGroup.
 Selected state is driven by data-[state=on] from Bits UI.
+Color is inherited from the parent Toolbar via context.
 -->
 <script lang="ts">
   import { Toolbar } from 'bits-ui';
   import clsx from 'clsx';
+  import { getContext } from 'svelte';
   import { Icon, Layer } from '../../utils/index.js';
   import { toolbarGroupItem } from './theme.js';
   import type { ToolbarGroupItemProps } from './types.js';
+  import type { ToolbarColor } from './types.js';
 
   let {
     iconProps,
@@ -18,7 +21,8 @@ Selected state is driven by data-[state=on] from Bits UI.
     ...restProps
   }: ToolbarGroupItemProps = $props();
 
-  const { base, icon } = toolbarGroupItem();
+  const color = getContext<ToolbarColor>('toolbar-color') ?? 'standard';
+  const { base, icon } = toolbarGroupItem({ color });
 </script>
 
 <Toolbar.GroupItem {value} {disabled} class={base({ class: clsx(className) })} {...restProps}>

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

@@ -2,6 +2,7 @@ import type { ToolbarGroupItemProps } from './types.js';
 /**
  * A toggleable icon button within a ToolbarGroup.
  * Selected state is driven by data-[state=on] from Bits UI.
+ * Color is inherited from the parent Toolbar via context.
  */
 declare const ToolbarGroupItem: import("svelte").Component<ToolbarGroupItemProps, {}, "">;
 type ToolbarGroupItem = ReturnType<typeof ToolbarGroupItem>;

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

@@ -6,101 +6,170 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: {
             root: string;
+            divider: string;
         };
         vertical: {
             root: string;
+            divider: string;
+        };
+    };
+    variant: {
+        floating: {
+            root: string;
+        };
+        docked: {
+            root: string;
+        };
+    };
+    color: {
+        standard: {
+            root: string;
+        };
+        vibrant: {
+            root: string;
         };
     };
 }, {
     root: string;
     group: string;
     divider: string;
+    fabSlot: string;
 }, undefined, {
     orientation: {
         horizontal: {
             root: string;
+            divider: string;
         };
         vertical: {
             root: string;
+            divider: string;
+        };
+    };
+    variant: {
+        floating: {
+            root: string;
+        };
+        docked: {
+            root: string;
+        };
+    };
+    color: {
+        standard: {
+            root: string;
+        };
+        vibrant: {
+            root: string;
         };
     };
 }, {
     root: string;
     group: string;
     divider: string;
+    fabSlot: string;
 }, import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: {
             root: string;
+            divider: string;
         };
         vertical: {
             root: string;
+            divider: string;
+        };
+    };
+    variant: {
+        floating: {
+            root: string;
+        };
+        docked: {
+            root: string;
+        };
+    };
+    color: {
+        standard: {
+            root: string;
+        };
+        vibrant: {
+            root: string;
         };
     };
 }, {
     root: string;
     group: string;
     divider: string;
+    fabSlot: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+    color: {
+        standard: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+        vibrant: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     icon: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+    color: {
+        standard: {
+            base: string;
+        };
+        vibrant: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        standard: {
+            base: string;
+        };
+        vibrant: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     icon: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const toolbarGroupItem: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+    color: {
+        standard: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+        vibrant: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     icon: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
+    color: {
+        standard: {
+            base: string;
+        };
+        vibrant: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        standard: {
+            base: string;
+        };
+        vibrant: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     icon: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/toolbar/theme.js

@@ -1,27 +1,59 @@
 import { tv } from 'tailwind-variants';
 export const toolbar = tv({
     slots: {
-        root: 'inline-flex items-center gap-0.5 rounded-2xl bg-md-sys-color-surface-container px-2 py-1 shadow-elevation-1',
+        root: 'items-center gap-0.5 px-2',
         group: 'inline-flex items-center gap-0.5',
-        divider: 'mx-1 h-6 w-px shrink-0 bg-md-sys-color-outline-variant'
+        divider: 'shrink-0 bg-md-sys-color-outline-variant',
+        fabSlot: 'ml-auto flex items-center ps-2'
     },
     variants: {
         orientation: {
-            horizontal: { root: 'flex-row' },
-            vertical: { root: 'flex-col h-auto w-14' }
+            horizontal: { root: 'flex-row', divider: 'mx-1 h-6 w-px' },
+            vertical: { root: 'flex-col h-auto w-14 py-2 px-1', divider: 'my-1 h-px w-6' }
+        },
+        variant: {
+            floating: { root: 'inline-flex rounded-2xl shadow-elevation-1 py-1' },
+            docked: { root: 'flex w-full rounded-none py-3' }
+        },
+        color: {
+            standard: { root: 'bg-md-sys-color-surface-container' },
+            vibrant: { root: 'bg-md-sys-color-secondary-container' }
         }
     },
-    defaultVariants: { orientation: 'horizontal' }
+    defaultVariants: {
+        orientation: 'horizontal',
+        variant: 'floating',
+        color: 'standard'
+    }
 });
 export const toolbarButton = tv({
     slots: {
-        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full text-md-sys-color-on-surface-variant outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38',
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38',
         icon: 'size-5 text-[20px]'
-    }
+    },
+    variants: {
+        color: {
+            standard: { base: 'text-md-sys-color-on-surface-variant' },
+            vibrant: { base: 'text-md-sys-color-on-secondary-container' }
+        }
+    },
+    defaultVariants: { color: 'standard' }
 });
 export const toolbarGroupItem = tv({
     slots: {
-        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full text-md-sys-color-on-surface-variant outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38 data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container',
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38',
         icon: 'size-5 text-[20px]'
-    }
+    },
+    variants: {
+        color: {
+            standard: {
+                base: 'text-md-sys-color-on-surface-variant data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container'
+            },
+            vibrant: {
+                // inverted: selected uses on-secondary-container as bg so it pops against the secondary-container toolbar
+                base: 'text-md-sys-color-on-secondary-container data-[state=on]:bg-md-sys-color-on-secondary-container data-[state=on]:text-md-sys-color-secondary-container'
+            }
+        }
+    },
+    defaultVariants: { color: 'standard' }
 });

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

@@ -1,12 +1,14 @@
 import type { IconProps } from '../../utils/index.js';
 import type { ToolbarButtonProps as BitsToolbarButtonProps, ToolbarGroupItemProps as BitsToolbarGroupItemProps, ToolbarGroupProps as BitsToolbarGroupProps, ToolbarRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
-import type { ToolbarButtonVariants, ToolbarGroupItemVariants, ToolbarVariants } from './theme.js';
+import type { ToolbarVariants } from './theme.js';
+export type ToolbarColor = 'standard' | 'vibrant';
 export type ToolbarProps = ToolbarVariants & Omit<ToolbarRootProps, 'children' | 'child'> & {
     children?: Snippet;
+    fab?: Snippet;
     class?: string;
 };
-export type ToolbarButtonProps = ToolbarButtonVariants & Omit<BitsToolbarButtonProps, 'children' | 'child'> & {
+export type ToolbarButtonProps = Omit<BitsToolbarButtonProps, 'children' | 'child'> & {
     iconProps: IconProps;
     class?: string;
 };
@@ -14,7 +16,7 @@ export type ToolbarGroupProps = Omit<BitsToolbarGroupProps, 'children' | 'child'
     children?: Snippet;
     class?: string;
 };
-export type ToolbarGroupItemProps = ToolbarGroupItemVariants & Omit<BitsToolbarGroupItemProps, 'children' | 'child'> & {
+export type ToolbarGroupItemProps = Omit<BitsToolbarGroupItemProps, 'children' | 'child'> & {
     iconProps: IconProps;
     class?: string;
 };

package/package.json

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