@noxlovette/material 0.3.3 → 0.4.1

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

@@ -7,7 +7,7 @@
     title: 'Navigation/App Bar',
     component: AppBar,
     parameters: {
-      // AppBar is the mobile top bar (md:hidden) — preview it at a mobile viewport.
+      // AppBar is fixed across all screen sizes — preview it at a mobile viewport.
       viewport: { defaultViewport: 'mobile1' }
     },
     argTypes: {

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

@@ -5,6 +5,11 @@ Material 3 App Bar.
 Top app bars provide content and actions related to the current screen.
 They’re used for branding, screen titles, navigation, and actions.
 
+Publishes its measured height as `--appbar-height` on the document root, so any
+`Pane`/`PaneGrid` on the page (`full`, the default) shrinks its `min-height` by
+that amount with no props or wiring on either side — see Pane.svelte's doc
+comment.
+
 @see https://m3.material.io/components/top-app-bar/overview
 -->
 <script lang="ts">
@@ -19,6 +24,7 @@ They’re used for branding, screen titles, navigation, and actions.
     trailing,
     leading,
     class: className,
+    rowClass,
     showBack,
     ghost = false,
     ...rest
@@ -26,12 +32,15 @@ They’re used for branding, screen titles, navigation, and actions.
 
   let scrollY = $state(0);
   let scrolled = $derived(scrollY > 10);
+  let barHeight = $state(64);
 
   const noTrailing = $derived(!trailing);
   const noLeading = $derived(!leading || !showBack);
 
   const {
     base,
+    row,
+    childrenRow,
     ghost: ghostCls,
     title: titleCLs,
     textContainer,
@@ -40,26 +49,48 @@ They’re used for branding, screen titles, navigation, and actions.
     trailing: trailingCls
   } = $derived(appbar({ scrolled, noLeading, noTrailing }));
   const navClass = $derived(base({ class: clsx(className) }));
+  const rowFull = $derived(row({ class: clsx(rowClass) }));
+
+  function trackHeight(node: HTMLElement) {
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      barHeight = entry?.contentRect.height ?? barHeight;
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }
+
+  $effect(() => {
+    document.documentElement.style.setProperty('--appbar-height', `${barHeight}px`);
+    return () => document.documentElement.style.removeProperty('--appbar-height');
+  });
 </script>
 
 <svelte:window bind:scrollY />
 
-<nav {...rest} class={navClass}>
-  <div class={leadingCls()}>
-    {@render leading?.()}
-  </div>
-  <div class={textContainer()}>
-    <h1 class={titleCLs()}>
-      {title}
-    </h1>
-    {#if subtitle}
-      <p class={subtitleCls()}>{subtitle}</p>
-    {/if}
-  </div>
-  <div class={trailingCls()}>
-    {@render trailing?.()}
+<nav {...rest} class={navClass} {@attach trackHeight}>
+  <div class={rowFull}>
+    <div class={leadingCls()}>
+      {@render leading?.()}
+    </div>
+    <div class={textContainer()}>
+      <h1 class={titleCLs()}>
+        {title}
+      </h1>
+      {#if subtitle}
+        <p class={subtitleCls()}>{subtitle}</p>
+      {/if}
+    </div>
+    <div class={trailingCls()}>
+      {@render trailing?.()}
+    </div>
   </div>
+  {#if children}
+    <div class={childrenRow()}>
+      {@render children()}
+    </div>
+  {/if}
 </nav>
 {#if ghost}
-  <div class={ghostCls()} aria-hidden="true"></div>
+  <div class={ghostCls()} style="height: {barHeight}px" aria-hidden="true"></div>
 {/if}

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

@@ -5,6 +5,11 @@ import type { AppBarProps } from './types.js';
  * Top app bars provide content and actions related to the current screen.
  * They’re used for branding, screen titles, navigation, and actions.
  *
+ * Publishes its measured height as `--appbar-height` on the document root, so any
+ * `Pane`/`PaneGrid` on the page (`full`, the default) shrinks its `min-height` by
+ * that amount with no props or wiring on either side — see Pane.svelte's doc
+ * comment.
+ *
  * @see https://m3.material.io/components/top-app-bar/overview
  */
 declare const AppBar: import("svelte").Component<AppBarProps, {}, "">;

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

@@ -10,23 +10,25 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
         };
     };
     searchContainer: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     noTrailing: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
     noLeading: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
+    row: string;
+    childrenRow: string;
     ghost: string;
     textContainer: string;
     title: string;
@@ -43,30 +45,32 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
         };
     };
     searchContainer: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     noTrailing: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
     noLeading: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
+    row: string;
+    childrenRow: string;
     ghost: string;
     textContainer: string;
     title: string;
     subtitle: string;
     leading: string;
     trailing: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     scrolled: {
         true: {
             base: string;
@@ -76,27 +80,29 @@ export declare const appbar: import("tailwind-variants").TVReturnType<{
         };
     };
     searchContainer: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     noTrailing: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
     noLeading: {
         true: {
             textContainer: string;
         };
-        false: string;
+        false: "";
     };
 }, {
     base: string;
+    row: string;
+    childrenRow: string;
     ghost: string;
     textContainer: string;
     title: string;
     subtitle: string;
     leading: string;
     trailing: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -1,18 +1,22 @@
 import { tv } from 'tailwind-variants';
 export const appbar = tv({
     slots: {
-        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',
+        base: 'fixed top-0 left-0 w-full flex flex-col z-30',
+        row: 'h-16 py-1 flex w-full items-center justify-between',
+        childrenRow: 'w-full px-2 pb-2',
+        ghost: 'w-full shrink-0 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',
         leading: 'text-md-sys-color-on-surface ml-0.5',
-        trailing: 'text-md-sys-color-on-surface-variant mr-4'
+        trailing: 'text-md-sys-color-on-surface-variant mr-4 md:mr-6 lg:mr-8'
     },
     variants: {
         scrolled: {
-            true: { base: 'shadow-elevation-2 bg-md-sys-color-surface-container' },
-            false: { base: 'shadow-elevation-0 bg-md-sys-color-surface' }
+            true: { base: 'shadow-elevation-1 bg-md-sys-color-surface-container' },
+            false: {
+                base: 'shadow-elevation-0 bg-md-sys-color-surface md:bg-md-sys-color-surface-container'
+            }
         },
         searchContainer: {
             true: '',
@@ -20,13 +24,13 @@ export const appbar = tv({
         },
         noTrailing: {
             true: {
-                textContainer: 'pr-2'
+                textContainer: 'pr-4 md:pr-6 lg:pr-8'
             },
             false: ''
         },
         noLeading: {
             true: {
-                textContainer: 'pl-6'
+                textContainer: 'pl-4 md:pl-6 lg:pl-8'
             },
             false: ''
         }

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

@@ -5,7 +5,7 @@ import type { AppbarVariants } from './theme.js';
  * Props for the AppBar component.
  */
 export type AppBarProps = AppbarVariants & HTMLAttributes<HTMLElementTagNameMap['nav']> & {
-    /** The content to be rendered inside the app bar. */
+    /** Extra content rendered in a full-width row below the title, e.g. a Breadcrumb trail. */
     children?: Snippet;
     /** The main title of the app bar. */
     title: string;
@@ -19,4 +19,6 @@ export type AppBarProps = AppbarVariants & HTMLAttributes<HTMLElementTagNameMap[
     showBack?: boolean;
     /** Renders an invisible same-height spacer after the fixed bar so page content isn't obscured. */
     ghost?: boolean;
+    /** Additional classes passed onto the row element */
+    rowClass?: string;
 };

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>>;
+}>>;