@noxlovette/material 0.1.25 → 0.1.27

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/cards/Card.svelte

@@ -17,13 +17,14 @@ and serve as an entry point to more detailed information.
   let {
     children,
     type = 'filled',
+    padding = 'md',
     class: className,
     href,
     hoverable = !!href,
     ...restProps
   }: CardProps = $props();
 
-  const { base } = $derived(card({ type, hoverable }));
+  const { base } = $derived(card({ type, hoverable, padding }));
 </script>
 
 {#if href}

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

@@ -4,6 +4,20 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         filled: string;
         outlined: string;
     };
+    padding: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
     hoverable: {
         true: string;
     };
@@ -16,6 +30,20 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         filled: string;
         outlined: string;
     };
+    padding: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
     hoverable: {
         true: string;
     };
@@ -28,6 +56,20 @@ export declare const card: import("tailwind-variants").TVReturnType<{
         filled: string;
         outlined: string;
     };
+    padding: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
     hoverable: {
         true: string;
     };

package/dist/components/cards/theme.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const card = tv({
     slots: {
-        base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-sys-color-surface-variant state-layer before:rounded-lg focus:outline-3 focus:outline-md-sys-color-secondary p-4 [transition:box-shadow_var(--md-sys-motion-duration,200ms)_var(--md-sys-motion-timing-function,cubic-bezier(0.34,0.8,0.34,1))]',
+        base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-sys-color-surface-variant state-layer before:rounded-lg focus:outline-3 focus:outline-md-sys-color-secondary [transition:box-shadow_var(--md-sys-motion-duration,200ms)_var(--md-sys-motion-timing-function,cubic-bezier(0.34,0.8,0.34,1))]',
         icon: 'size-6 text-[24px] text-md-sys-color-primary'
     },
     variants: {
@@ -10,6 +10,12 @@ export const card = tv({
             filled: 'bg-md-sys-color-surface-container-high',
             outlined: 'bg-md-sys-color-surface outline-1 outline-md-sys-color-outline-variant'
         },
+        padding: {
+            none: { base: 'p-0' },
+            sm: { base: 'p-3' },
+            md: { base: 'p-4' },
+            lg: { base: 'p-6' }
+        },
         hoverable: {
             true: ''
         }

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

@@ -23,6 +23,11 @@ export type CardProps = CardVariants & HTMLAttributes<HTMLDivElement> & HTMLAnch
      * @default 'filled'
      */
     type?: CardVariants['type'];
+    /**
+     * Internal padding of the card.
+     * @default 'md'
+     */
+    padding?: CardVariants['padding'];
     /**
      * Whether the card should show a state layer on hover.
      * Defaults to true if `href` is provided.

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

@@ -6,20 +6,21 @@ SinglePane provides a centered or full-width container for content.
   import clsx from 'clsx';
   import { singlePane } from './theme.js';
   import type { SinglePaneProps } from './types.js';
-  import type { Snippet } from 'svelte';
 
   const {
     children,
     centered = 'none',
     background = true,
     full = true,
+    padding = 'md',
+    gap = 'md',
     rounded = true,
     class: className,
     contentClass,
     ...rest
   }: SinglePaneProps = $props();
 
-  const { base, content } = $derived(singlePane({ 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/containers/panes/SupportingPane.svelte

@@ -17,6 +17,7 @@ SupportingPane provides a layout with a main content area and a supporting side
     position = 'right',
     centered = false,
     rounded = true,
+    gap = 'md',
     class: className,
     mainClass,
     full = true,
@@ -34,7 +35,7 @@ SupportingPane provides a layout with a main content area and a supporting side
     base,
     main: mainCls,
     supporting: supportingCls
-  } = $derived(supportingPane({ anchor, position, centered, full, rounded }));
+  } = $derived(supportingPane({ anchor, position, centered, full, rounded, gap }));
 
   const cssVars = $derived(
     anchor === 'viewport'

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

@@ -128,10 +128,40 @@ export declare const singlePane: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    gap: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
 }, {
     base: string;
     content: string;
-    headline: string;
 }, undefined, {
     background: {
         true: string;
@@ -158,10 +188,40 @@ export declare const singlePane: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    gap: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
 }, {
     base: string;
     content: string;
-    headline: string;
 }, import("tailwind-variants").TVReturnType<{
     background: {
         true: string;
@@ -188,10 +248,40 @@ export declare const singlePane: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    padding: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+    };
+    gap: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
 }, {
     base: string;
     content: string;
-    headline: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const supportingPane: import("tailwind-variants").TVReturnType<{
     anchor: {
@@ -220,6 +310,20 @@ export declare const supportingPane: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    gap: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
     full: {
         true: {
             base: string;
@@ -265,6 +369,20 @@ export declare const supportingPane: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    gap: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
     full: {
         true: {
             base: string;
@@ -310,6 +428,20 @@ export declare const supportingPane: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    gap: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
     full: {
         true: {
             base: string;

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

@@ -43,8 +43,7 @@ export const splitPane = tv({
 export const singlePane = tv({
     slots: {
         base: 'flex flex-col box-border overflow-clip items-center',
-        content: 'flex flex-1 flex-col gap-3 w-full md:pb-12 max-w-7xl mx-auto',
-        headline: 'md-sys-typescale-title-medium mb-4'
+        content: 'flex flex-1 flex-col w-full max-w-7xl mx-auto'
     },
     variants: {
         background: {
@@ -71,6 +70,19 @@ export const singlePane = tv({
             false: {
                 base: ''
             }
+        },
+        padding: {
+            none: { content: 'p-0' },
+            sm: { content: 'p-3 md:p-4' },
+            md: { content: 'p-4 md:p-6 lg:p-8' },
+            lg: { content: 'p-6 md:p-8 lg:p-12' }
+        },
+        gap: {
+            none: { content: 'gap-0' },
+            sm: { content: 'gap-2' },
+            md: { content: 'gap-3' },
+            lg: { content: 'gap-4' },
+            xl: { content: 'gap-6' }
         }
     },
     defaultVariants: {
@@ -79,7 +91,7 @@ export const singlePane = tv({
 });
 export const supportingPane = tv({
     slots: {
-        base: 'flex w-full flex-col gap-6 md:flex-row',
+        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'
     },
@@ -112,6 +124,12 @@ export const supportingPane = tv({
                 base: 'justify-between'
             }
         },
+        gap: {
+            none: { base: 'gap-0' },
+            sm: { base: 'gap-4' },
+            md: { base: 'gap-6' },
+            lg: { base: 'gap-8' }
+        },
         full: {
             true: { base: 'min-h-dvh' },
             false: ''
@@ -147,6 +165,7 @@ export const supportingPane = tv({
         anchor: 'parent',
         position: 'right',
         centered: true,
-        rounded: true
+        rounded: true,
+        gap: 'md'
     }
 });

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

@@ -14,10 +14,12 @@ export declare const stack: import("tailwind-variants").TVReturnType<{
         h: string;
     };
     gap: {
-        md: string;
+        none: string;
+        xs: string;
         sm: string;
+        md: string;
         lg: string;
-        none: string;
+        xl: string;
     };
 }, undefined, "flex relative", {
     type: {
@@ -33,10 +35,12 @@ export declare const stack: import("tailwind-variants").TVReturnType<{
         h: string;
     };
     gap: {
-        md: string;
+        none: string;
+        xs: string;
         sm: string;
+        md: string;
         lg: string;
-        none: string;
+        xl: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     type: {
@@ -52,9 +56,11 @@ export declare const stack: import("tailwind-variants").TVReturnType<{
         h: string;
     };
     gap: {
-        md: string;
+        none: string;
+        xs: string;
         sm: string;
+        md: string;
         lg: string;
-        none: string;
+        xl: string;
     };
 }, undefined, "flex relative", unknown, unknown, undefined>>;

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

@@ -15,10 +15,12 @@ export const stack = tv({
             h: 'h-full'
         },
         gap: {
+            none: 'gap-0',
+            xs: 'gap-1',
+            sm: 'gap-2',
             md: 'gap-3',
-            sm: 'gap-px',
-            lg: 'gap-6',
-            none: 'gap-0'
+            lg: 'gap-4',
+            xl: 'gap-6'
         }
     }
 });

package/dist/components/misc/ThemeSwitcher.svelte

@@ -6,7 +6,7 @@
   let open = $state(false);
 </script>
 
-<div class="fixed right-4 bottom-4 z-50">
+<div class="fixed right-4 bottom-4 z-50 hidden md:block">
   <Popover bind:open title="Theme Settings" side="top" align="end" sideOffset={16}>
     {#snippet trigger()}
       <FAB iconProps={{ name: 'palette' }} config="primary" />

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

@@ -10,24 +10,30 @@ 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?.()}
     </div>
   {/if}
   <NavigationMenu.Root orientation="horizontal" class="flex w-full">
-    <NavigationMenu.List class={items()}>
-      {@render children()}
+    <NavigationMenu.List>
+      {#snippet child({ props, wrapperProps })}
+        <div {...wrapperProps} class="w-full">
+          <ul {...props} class={items()}>
+            {@render children()}
+          </ul>
+        </div>
+      {/snippet}
     </NavigationMenu.List>
   </NavigationMenu.Root>
 </div>

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

@@ -12,7 +12,7 @@ export const navitem = tv({
         base: 'group relative flex flex-1 flex-col items-center justify-center min-w-0 max-w-[168px] h-full transition-colors',
         content: 'flex flex-col items-center justify-center gap-1 w-full',
         iconContainer: 'relative flex items-center justify-center h-8 w-16 rounded-full transition-colors duration-200 ease-in-out',
-        icon: 'text-[24px]',
+        icon: 'text-[24px] size-6',
         label: 'md-sys-typescale-label-medium truncate w-full text-center'
     },
     variants: {

package/package.json

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