@noxlovette/material 0.3.2 → 0.4.0

package/dist/components/nav/breadcrumb/Breadcrumb.stories.svelte

@@ -0,0 +1,50 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Breadcrumb from './Breadcrumb.svelte';
+  import AppBar from '../appbar/AppBar.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Navigation/Breadcrumb',
+    component: Breadcrumb,
+    argTypes: {
+      color: { control: 'select', options: ['primary', 'secondary', 'tertiary', 'surface'] }
+    },
+    args: {
+      color: 'primary',
+      items: [
+        { label: 'Docs', href: '/docs' },
+        { label: 'Navigation', href: '/docs' },
+        { label: 'App Bar' }
+      ]
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Breadcrumb {...args} />
+  {/snippet}
+</Story>
+
+<Story name="Deep Trail" asChild>
+  <Breadcrumb
+    items={[
+      { label: 'Home', href: '#' },
+      { label: 'Library', href: '#' },
+      { label: 'Data', href: '#' },
+      { label: 'Sample Files' }
+    ]}
+  />
+</Story>
+
+<Story name="In App Bar" asChild>
+  <AppBar title="Sample Files" ghost={false}>
+    <Breadcrumb
+      items={[
+        { label: 'Home', href: '#' },
+        { label: 'Library', href: '#' },
+        { label: 'Sample Files' }
+      ]}
+    />
+  </AppBar>
+</Story>

package/dist/components/nav/breadcrumb/Breadcrumb.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Breadcrumb from './Breadcrumb.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Breadcrumb = InstanceType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/nav/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,46 @@
+<!--
+@component
+Breadcrumb trail: `label-large` text links separated by chevron icons, wayfinding for
+where the current screen sits in a hierarchy. Designed to sit inside `AppBar`, via its
+`children` snippet, below the title row.
+
+M3 doesn't define a breadcrumb pattern, so this follows the repo's own typescale/color-role
+conventions instead of a spec page. The last item is always rendered as static text with
+`aria-current="page"`, regardless of whether it has an `href`.
+-->
+<script lang="ts">
+  import { Icon, Layer } from '../../../utils/index.js';
+  import clsx from 'clsx';
+  import { breadcrumb } from './theme.js';
+  import type { BreadcrumbProps } from './types.js';
+
+  let { items, color = 'primary', class: className, ...rest }: BreadcrumbProps = $props();
+
+  const { base, list, item, link, text, current, separator } = $derived(breadcrumb({ color }));
+  const navCls = $derived(base({ class: clsx(className) }));
+</script>
+
+<nav aria-label="Breadcrumb" {...rest} class={navCls}>
+  <ol class={list()}>
+    {#each items as crumb, i (crumb.label + i)}
+      {@const isLast = i === items.length - 1}
+      <li class={item()}>
+        {#if isLast}
+          <span class={current()} aria-current="page">{crumb.label}</span>
+        {:else if crumb.href}
+          <a href={crumb.href} class={link()}>
+            <Layer />
+            {crumb.label}
+          </a>
+        {:else}
+          <span class={text()}>{crumb.label}</span>
+        {/if}
+        {#if !isLast}
+          <span class={separator()} aria-hidden="true">
+            <Icon name="chevron_right" size="sm" />
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/dist/components/nav/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { BreadcrumbProps } from './types.js';
+/**
+ * Breadcrumb trail: `label-large` text links separated by chevron icons, wayfinding for
+ * where the current screen sits in a hierarchy. Designed to sit inside `AppBar`, via its
+ * `children` snippet, below the title row.
+ *
+ * M3 doesn't define a breadcrumb pattern, so this follows the repo's own typescale/color-role
+ * conventions instead of a spec page. The last item is always rendered as static text with
+ * `aria-current="page"`, regardless of whether it has an `href`.
+ */
+declare const Breadcrumb: import("svelte").Component<BreadcrumbProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/nav/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as Breadcrumb } from './Breadcrumb.svelte';

package/dist/components/nav/breadcrumb/index.js

@@ -0,0 +1,6 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './theme.js';
+export * from './types.js';
+// default exports for components in this folder
+export { default as Breadcrumb } from './Breadcrumb.svelte';

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

@@ -0,0 +1,84 @@
+import { type VariantProps } from 'tailwind-variants';
+export type BreadcrumbVariants = VariantProps<typeof breadcrumb>;
+export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            current: string;
+            link: string;
+        };
+        secondary: {
+            current: string;
+            link: string;
+        };
+        tertiary: {
+            current: string;
+            link: string;
+        };
+        surface: {
+            current: string;
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    link: string;
+    text: string;
+    current: string;
+    separator: string;
+}, undefined, {
+    color: {
+        primary: {
+            current: string;
+            link: string;
+        };
+        secondary: {
+            current: string;
+            link: string;
+        };
+        tertiary: {
+            current: string;
+            link: string;
+        };
+        surface: {
+            current: string;
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    link: string;
+    text: string;
+    current: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: {
+            current: string;
+            link: string;
+        };
+        secondary: {
+            current: string;
+            link: string;
+        };
+        tertiary: {
+            current: string;
+            link: string;
+        };
+        surface: {
+            current: string;
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    list: string;
+    item: string;
+    link: string;
+    text: string;
+    current: string;
+    separator: string;
+}>>;

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

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+export const breadcrumb = tv({
+    slots: {
+        base: 'flex',
+        list: 'flex flex-wrap items-center gap-1',
+        item: 'flex items-center gap-1',
+        link: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant md-sys-state-focus-indicator relative inline-flex min-h-12 items-center rounded-full px-3 transition-colors',
+        text: 'md-sys-typescale-label-large text-md-sys-color-on-surface-variant px-1 py-0.5',
+        current: 'md-sys-typescale-label-large font-bold px-1 py-0.5',
+        separator: 'text-md-sys-color-on-surface-variant inline-flex shrink-0'
+    },
+    variants: {
+        color: {
+            primary: {
+                current: 'text-md-sys-color-primary',
+                link: 'hover:text-md-sys-color-primary'
+            },
+            secondary: {
+                current: 'text-md-sys-color-secondary',
+                link: 'hover:text-md-sys-color-secondary'
+            },
+            tertiary: {
+                current: 'text-md-sys-color-tertiary',
+                link: 'hover:text-md-sys-color-tertiary'
+            },
+            surface: {
+                current: 'text-md-sys-color-on-surface',
+                link: 'hover:text-md-sys-color-on-surface'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'primary'
+    }
+});

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

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BreadcrumbVariants } from './theme.js';
+export type BreadcrumbItem = {
+    /** Text shown for this crumb. */
+    label: string;
+    /** Destination URL. Omit for a non-navigable crumb (e.g. the current page — the last item is always rendered as static text regardless of href). */
+    href?: string;
+};
+export type BreadcrumbProps = HTMLAttributes<HTMLElementTagNameMap['nav']> & {
+    /** Ordered from root to current page. */
+    items: BreadcrumbItem[];
+    /** Text color of the current (last) crumb, and the hover color of the links before it. Defaults to 'primary'. */
+    color?: BreadcrumbVariants['color'];
+};

package/dist/components/nav/breadcrumb/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/nav/index.d.ts

@@ -1,4 +1,5 @@
 export * from './appbar/index.js';
+export * from './breadcrumb/index.js';
 export * from './navbar/index.js';
 export * from './rail/index.js';
 export * from './tabs/index.js';

package/dist/components/nav/index.js

@@ -1,6 +1,7 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
 // folder re-exports (export everything from these folders)
 export * from './appbar/index.js';
+export * from './breadcrumb/index.js';
 export * from './navbar/index.js';
 export * from './rail/index.js';
 export * from './tabs/index.js';

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

@@ -1,19 +1,19 @@
 export declare const navbar: import("tailwind-variants").TVReturnType<{
     [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;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            items?: import("tailwind-variants").ClassValue;
+            ghost?: import("tailwind-variants").ClassValue;
+            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [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;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            items?: import("tailwind-variants").ClassValue;
+            ghost?: import("tailwind-variants").ClassValue;
+            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -23,11 +23,11 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     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;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            items?: import("tailwind-variants").ClassValue;
+            ghost?: import("tailwind-variants").ClassValue;
+            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -35,12 +35,12 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
     items: string;
     fab: string;
     ghost: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
     items: string;
     fab: string;
     ghost: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const navitem: import("tailwind-variants").TVReturnType<{
     active: {
         true: {
@@ -79,7 +79,7 @@ export declare const navitem: import("tailwind-variants").TVReturnType<{
     iconContainer: string;
     icon: string;
     label: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     active: {
         true: {
             content: string;
@@ -98,4 +98,4 @@ export declare const navitem: import("tailwind-variants").TVReturnType<{
     iconContainer: string;
     icon: string;
     label: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/nav/rail/Rail.stories.svelte

@@ -3,7 +3,6 @@
   import Rail from './Rail.svelte';
   import RailItem from './RailItem.svelte';
   import FAB from '../../buttons/FAB.svelte';
-  import Avatar from '../../misc/Avatar.svelte';
 
   const { Story } = defineMeta({
     title: 'Navigation/Rail',
@@ -48,7 +47,7 @@
   {/snippet}
 </Story>
 
-<Story name="With FAB and Footer" args={{ withNavbar: false }}>
+<Story name="With FAB">
   {#snippet template(args)}
     <div class="bg-md-sys-color-surface-variant relative h-[420px] overflow-hidden rounded-2xl">
       <Rail
@@ -61,9 +60,6 @@
         {#snippet fab()}
           <FAB size="small" iconProps={{ name: 'add' }} label="New" />
         {/snippet}
-        {#snippet railFooter()}
-          <Avatar seed="DV" />
-        {/snippet}
         <RailItem label="Home" href="/" iconProps={{ name: 'house' }} selected />
         <RailItem label="Inbox" href="#" iconProps={{ name: 'mail' }} badge={4} />
         <RailItem label="Settings" href="#" iconProps={{ name: 'settings' }} />

package/dist/components/nav/rail/Rail.svelte

@@ -10,27 +10,22 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
 <script lang="ts">
   import { clickOutside } from '../../../actions/index.js';
   import clsx from 'clsx';
-  import { setContext } from 'svelte';
+  import { setContext, untrack } from 'svelte';
   import type { RailProps } from './types';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import { rail } from './theme';
   import { NavigationMenu } from 'bits-ui';
   import { railStore } from './railStore.svelte.js';
-  import RailNavContext from './RailNavContext.svelte';
-  import Navbar from '../navbar/Navbar.svelte';
 
   let {
     children,
     rounded = false,
     expandable = true,
     fab,
-    railFooter,
     collapsed = $bindable(true),
     anchor = 'viewport',
     railTop = 0,
-    withNavbar = false,
-    class: className,
-    navbarProps
+    class: className
   }: RailProps = $props();
 
   const expanded = $derived(!collapsed);
@@ -85,28 +80,11 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
 
   <NavigationMenu.Root orientation="vertical" class="w-full">
     <NavigationMenu.List class={`${items()} rail-items`}>
-      <RailNavContext mobile={false}>
-        {@render children?.()}
-      </RailNavContext>
+      {@render children?.()}
     </NavigationMenu.List>
   </NavigationMenu.Root>
-
-  {#if railFooter}
-    <div class="mt-auto flex flex-col items-center pb-2">
-      {@render railFooter()}
-    </div>
-  {/if}
 </div>
 
-<!-- Mobile bottom navbar (md:hidden) -->
-{#if withNavbar}
-  <Navbar {...navbarProps}>
-    <RailNavContext mobile={true}>
-      {@render children?.()}
-    </RailNavContext>
-  </Navbar>
-{/if}
-
 <style>
   .rail-scrim {
     opacity: 0;

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

@@ -67,7 +67,7 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     items: string;
     ghost: string;
     scrim: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     anchor: {
         viewport: {
             base: string;
@@ -100,7 +100,7 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     items: string;
     ghost: string;
     scrim: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const railElement: import("tailwind-variants").TVReturnType<{
     active: {
         true: {
@@ -195,7 +195,7 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
     iconContainer: string;
     icon: string;
     label: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     active: {
         true: {
             content: string;
@@ -242,4 +242,4 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
     iconContainer: string;
     icon: string;
     label: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -1,7 +1,6 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { NavBarProps } from '../navbar/types.js';
 import type { RailItemVariants, RailVariants } from './theme.js';
 /**
  * Props for the RailItem component.
@@ -36,8 +35,6 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     expandable?: boolean;
     /** An optional Floating Action Button snippet. */
     fab?: Snippet;
-    /** An optional snippet rendered at the bottom of the rail (e.g. avatar/settings). */
-    railFooter?: Snippet;
     /** Whether the rail is currently collapsed. */
     collapsed?: boolean;
     /** Where the rail should be anchored. */
@@ -46,6 +43,4 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     railTop?: number;
     /** Render a bottom navbar on mobile. */
     withNavbar?: boolean;
-    /** Customise the navbar inside the rail */
-    navbarProps?: Omit<NavBarProps, 'children'>;
 };

package/dist/components/nav/tabs/TabHolder.svelte

@@ -20,12 +20,13 @@ Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
     onValueChange,
     activationMode = 'automatic',
     variant = 'primary',
+    rounded = false,
     children
   }: TabHolderProps & { children?: Snippet } = $props();
 
   const idx = $derived(items.findIndex((i) => i.value === value));
   const count = $derived(items.length);
-  const { base, bar } = tabHolder();
+  const { base, bar } = $derived(tabHolder({ rounded }));
 </script>
 
 <Tabs.Root bind:value {onValueChange} {activationMode}>

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

@@ -2,36 +2,36 @@ import { type VariantProps } from 'tailwind-variants';
 export type TabVariants = VariantProps<typeof tab>;
 export type TabHolderVariants = VariantProps<typeof tabHolder>;
 export declare const tabHolder: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
+    rounded: {
+        true: {
+            base: string;
         };
+        false: {};
     };
-} | {}, {
+}, {
     base: string;
     bar: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
+    rounded: {
+        true: {
+            base: string;
         };
+        false: {};
     };
-} | {}, {
+}, {
     base: string;
     bar: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<{
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
     base: string;
     bar: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const tab: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: {
@@ -70,7 +70,7 @@ export declare const tab: import("tailwind-variants").TVReturnType<{
     base: string;
     label: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         primary: {
             base: string;
@@ -89,4 +89,4 @@ export declare const tab: import("tailwind-variants").TVReturnType<{
     base: string;
     label: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -3,6 +3,12 @@ export const tabHolder = tv({
     slots: {
         base: 'relative flex w-full bg-md-sys-color-surface',
         bar: 'absolute bottom-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform duration-200 ease-out'
+    },
+    variants: {
+        rounded: {
+            true: { base: 'rounded-t-md' },
+            false: {}
+        }
     }
 });
 export const tab = tv({

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

@@ -1,5 +1,5 @@
 import type { IconProps } from '../../../utils/index.js';
-import type { TabVariants } from './theme.js';
+import type { TabHolderVariants, TabVariants } from './theme.js';
 export type TabProps = {
     /** Props for the Icon component. Omit for secondary tabs. */
     iconProps?: IconProps;
@@ -30,7 +30,7 @@ export type TabHolderProps = {
     variant?: TabVariants['variant'];
     /** Tab items to render. */
     items: TabProps[];
-};
+} & TabHolderVariants;
 export type TabContentProps = {
     /** Must match the value of the corresponding Tab. */
     value: string;