@noxlovette/material 0.1.25 → 0.1.26

package/dist/components/buttons/FAB.svelte

@@ -14,7 +14,7 @@ Floating action buttons (FABs) help people take primary actions.
   import { fab } from './theme.js';
   import type { FABProps } from './types.js';
   import FABMenu from './FABMenu.svelte';
-  import { Layer, Icon } from '../../utils/index.js';
+  import { Layer, Icon, LoadingIndicator } from '../../utils/index.js';
   import { clickOutside } from '../../actions/index.js';
   import { Button, type ButtonRootProps } from 'bits-ui';
 
@@ -26,6 +26,7 @@ Floating action buttons (FABs) help people take primary actions.
     config = 'primary',
     iconProps,
     label,
+    loading,
     expanded = false,
     class: className,
     withMenu,
@@ -48,7 +49,7 @@ Floating action buttons (FABs) help people take primary actions.
   );
 
   function handleClick(e: MouseEvent) {
-    if (disabled) {
+    if (disabled || loading) {
       e.preventDefault();
       return;
     }
@@ -68,8 +69,12 @@ Floating action buttons (FABs) help people take primary actions.
     data-cy="m3-fab"
     {...restProps as ButtonRootProps}
   >
-    <Icon {...withMenu && showMenu ? { name: 'close' } : iconProps} class={icon()} />
-    <Layer />
+    {#if loading}
+      <LoadingIndicator />
+    {:else}
+      <Icon {...withMenu && showMenu ? { name: 'close' } : iconProps} class={icon()} />
+      <Layer />
+    {/if}
     {#if expanded && !(withMenu && showMenu)}
       <p class={labelClass()}>
         {label}

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

@@ -147,6 +147,8 @@ export type FABProps = FABVariants & AnchorButtonAttributes & {
     withMenu?: boolean;
     /** Configuration for the FAB's icon. */
     iconProps: IconProps;
+    /** Whether the FAB is in a loading state. Displays a loading indicator instead of the icon. */
+    loading?: boolean;
     /** The URL to link to. If provided, the FAB will render as an `<a>` tag. */
     href?: string;
     /** The `formaction` attribute for the FAB when used in a form. */

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

@@ -10,16 +10,17 @@ This component takes NavbarItems as its children
 @see https://m3.material.io/components/navigation-bar/overview
 -->
 <script lang="ts">
+  import clsx from 'clsx';
   import { NavigationMenu } from 'bits-ui';
   import { navbar } from './theme.js';
   import type { NavBarProps } from './types.js';
 
-  const { children, fab, ghost = false }: NavBarProps = $props();
+  const { children, fab, ghost = false, class: className, ...restProps }: NavBarProps = $props();
 
   const { base, items, fab: fabCls, ghost: ghostCls } = $derived(navbar());
 </script>
 
-<div class={base()}>
+<div class={base({ class: clsx(className) })} {...restProps}>
   {#if fab}
     <div class={fabCls()}>
       {@render fab?.()}

package/package.json

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