@noxlovette/material 0.5.0 → 0.6.0

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

@@ -0,0 +1,162 @@
+import { type VariantProps } from 'tailwind-variants';
+export type CarouselVariants = VariantProps<typeof carousel>;
+export declare const carousel: import("tailwind-variants").TVReturnType<{
+    layout: {
+        multiBrowse: {};
+        hero: {};
+        centeredHero: {};
+        uncontained: {
+            scroller: string;
+        };
+        fullScreen: {
+            scroller: string;
+            item: string;
+        };
+    };
+    keyline: {
+        true: {
+            scroller: string;
+            item: string;
+            content: string;
+        };
+        false: {};
+    };
+    snap: {
+        true: {
+            scroller: string;
+        };
+        false: {};
+    };
+    outlined: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    scroller: string;
+    track: string;
+    snapPoint: string;
+    viewport: string;
+    item: string[];
+    content: string;
+}, undefined, {
+    layout: {
+        multiBrowse: {};
+        hero: {};
+        centeredHero: {};
+        uncontained: {
+            scroller: string;
+        };
+        fullScreen: {
+            scroller: string;
+            item: string;
+        };
+    };
+    keyline: {
+        true: {
+            scroller: string;
+            item: string;
+            content: string;
+        };
+        false: {};
+    };
+    snap: {
+        true: {
+            scroller: string;
+        };
+        false: {};
+    };
+    outlined: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    scroller: string;
+    track: string;
+    snapPoint: string;
+    viewport: string;
+    item: string[];
+    content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    layout: {
+        multiBrowse: {};
+        hero: {};
+        centeredHero: {};
+        uncontained: {
+            scroller: string;
+        };
+        fullScreen: {
+            scroller: string;
+            item: string;
+        };
+    };
+    keyline: {
+        true: {
+            scroller: string;
+            item: string;
+            content: string;
+        };
+        false: {};
+    };
+    snap: {
+        true: {
+            scroller: string;
+        };
+        false: {};
+    };
+    outlined: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+    interactive: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    scroller: string;
+    track: string;
+    snapPoint: string;
+    viewport: string;
+    item: string[];
+    content: string;
+}>>;

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

@@ -0,0 +1,67 @@
+import { tv } from 'tailwind-variants';
+/*
+  M3 carousel (https://m3.material.io/components/carousel/specs): 28dp items on `surface`, 8dp
+  apart. Multi-browse and hero layouts pad 16dp on both sides and 8dp top/bottom; uncontained
+  pads only the leading edge and lets items bleed off the trailing one; full-screen is edge to
+  edge, 16dp between items, scrolling vertically.
+*/
+export const carousel = tv({
+    slots: {
+        base: 'relative h-56 w-full',
+        scroller: 'h-full w-full overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-md-sys-color-secondary',
+        track: 'relative h-full',
+        snapPoint: 'pointer-events-none absolute top-spacing-0 h-px w-px snap-start',
+        viewport: 'sticky left-spacing-0 h-full overflow-clip',
+        item: [
+            'text-md-sys-color-on-surface bg-md-sys-color-surface relative block shrink-0 overflow-hidden rounded-[28px] text-start',
+            'md-sys-state-focus-indicator transition-shadow md-sys-motion-effects'
+        ],
+        content: 'h-full'
+    },
+    variants: {
+        layout: {
+            multiBrowse: {},
+            hero: {},
+            centeredHero: {},
+            uncontained: {
+                scroller: 'flex gap-spacing-100 overflow-x-auto overflow-y-clip ps-spacing-200 pe-spacing-200 pt-spacing-100 pb-spacing-100 [scroll-padding-inline:1rem]'
+            },
+            fullScreen: {
+                scroller: 'flex snap-y snap-mandatory flex-col gap-spacing-200 overflow-y-auto',
+                item: 'h-full w-full snap-start [scroll-snap-stop:always]'
+            }
+        },
+        // Multi-browse and hero layouts: items are positioned by `place()`, content keeps the large
+        // width and stays centred inside its masked item, which gives the parallax as items resize.
+        keyline: {
+            true: {
+                scroller: 'overflow-x-auto overflow-y-clip',
+                item: 'absolute top-spacing-100 bottom-spacing-100 left-spacing-200 will-change-transform',
+                content: 'absolute inset-y-spacing-0 left-1/2 -translate-x-1/2'
+            },
+            false: {}
+        },
+        snap: { true: { scroller: 'snap-x snap-mandatory' }, false: {} },
+        outlined: { true: { item: 'border border-md-sys-color-outline' }, false: {} },
+        interactive: {
+            true: { item: 'cursor-pointer hover:shadow-elevation-1 active:shadow-elevation-0' },
+            false: {}
+        },
+        disabled: {
+            true: { item: 'pointer-events-none opacity-38' },
+            false: {}
+        }
+    },
+    compoundVariants: [
+        { layout: 'uncontained', class: { item: 'h-full snap-start' } },
+        { outlined: true, disabled: true, class: { item: 'border-md-sys-color-outline/12' } }
+    ],
+    defaultVariants: {
+        layout: 'multiBrowse',
+        keyline: true,
+        snap: true,
+        outlined: false,
+        interactive: false,
+        disabled: false
+    }
+});

package/dist/components/containers/carousel/types.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * - `multiBrowse`: at least one large, one medium and one small item; items resize as they scroll.
+ * - `hero`: one large item and one small item.
+ * - `centeredHero`: one large item centred between two small ones.
+ * - `uncontained`: fixed-width items that scroll off the trailing edge. With per-item widths
+ *   (`itemWidth` as a function) this is the uncontained multi-aspect-ratio layout.
+ * - `fullScreen`: one edge-to-edge item at a time, scrolling vertically.
+ */
+export type CarouselLayout = 'multiBrowse' | 'hero' | 'centeredHero' | 'uncontained' | 'fullScreen';
+/** What the `item` snippet receives besides the item itself. */
+export type CarouselItemState = {
+    index: number;
+    /**
+     * How large the item currently is, from 0 (small) to 1 (large). Fade labels and other
+     * secondary content with it: they belong on large items only.
+     */
+    progress: number;
+};
+export type CarouselProps<T> = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The items to show. */
+    items: T[];
+    /** Renders one item's content. It fills the item; use `object-cover` media. */
+    item: Snippet<[T, CarouselItemState]>;
+    /** Accessible name of the carousel, e.g. "Featured albums". */
+    label: string;
+    /** @default 'multiBrowse' */
+    layout?: CarouselLayout;
+    /**
+     * Item width in px. Multi-browse: the preferred large width, which the carousel adjusts to fit
+     * whole items. Uncontained: every item's width, or one per item for mixed aspect ratios.
+     * Ignored by the hero and full-screen layouts.
+     * @default 186 (multi-browse), 240 (uncontained)
+     */
+    itemWidth?: number | ((item: T, index: number) => number);
+    /**
+     * Whether scrolling comes to rest on an item. Defaults to on for every layout except
+     * uncontained, which scrolls freely.
+     */
+    snap?: boolean;
+    /** Draws the 1dp outline around items. */
+    outlined?: boolean;
+    /** Makes each item a button. A tapped item typically opens its detail (container transform). */
+    onitemclick?: (item: T, index: number) => void;
+    /** Makes each item a link. */
+    itemHref?: (item: T, index: number) => string;
+    /** Accessible name of each item; defaults to "n of total". */
+    itemLabel?: (item: T, index: number) => string;
+    /** Disables an item: 38% opacity, not interactive. */
+    itemDisabled?: (item: T, index: number) => boolean;
+};

package/dist/components/containers/context-menu/ContextMenu.stories.svelte

@@ -10,6 +10,7 @@
 
   const { Story } = defineMeta({
     title: 'Containers/Context Menu',
+    tags: ['autodocs'],
     component: ContextMenu
   });
 

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -12,7 +12,7 @@ Context menus appear on right-click and provide actions related to the clicked e
   ]}
   onselect={(value) => console.log(value)}
 >
-  <div class="p-10 bg-surface">Right click me</div>
+  <div class="p-spacing-500 bg-surface">Right click me</div>
 </ContextMenu>
 ```
 
@@ -54,7 +54,7 @@ you need it (e.g. a table row):
 
 {#snippet MenuItem(item: ContextMenuDataItem)}
   {#if item.separator}
-    <Divider class="my-1" />
+    <Divider class="my-spacing-50" />
   {:else if item.items && item.items.length > 0}
     <BitsContextMenu.Sub>
       <BitsContextMenu.SubTrigger

package/dist/components/containers/context-menu/ContextMenu.svelte.d.ts

@@ -12,7 +12,7 @@ import type { ContextMenuProps } from './types.js';
  * ]}
  * onselect={(value) => console.log(value)}
  * >
- * <div class="p-10 bg-surface">Right click me</div>
+ * <div class="p-spacing-500 bg-surface">Right click me</div>
  * </ContextMenu>
  * ```
  *

package/dist/components/containers/context-menu/theme.js

@@ -2,31 +2,31 @@ import { tv } from 'tailwind-variants';
 export const contextMenu = tv({
     slots: {
         content: `
-      z-[100] min-w-48 max-w-sm gap-1 overflow-y-auto rounded-lg
-      bg-md-sys-color-surface-container-high px-2 py-1
+      z-[100] min-w-48 max-w-sm gap-spacing-50 overflow-y-auto rounded-lg
+      bg-md-sys-color-surface-container-high px-spacing-100 py-spacing-50
       shadow-elevation-3 ring-md-sys-color-outline/10
     `,
         item: `
-      rounded-sm relative flex w-full cursor-pointer select-none items-center gap-2
-      px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
+      rounded-sm relative flex w-full cursor-pointer select-none items-center gap-spacing-100
+      px-spacing-150 py-spacing-100 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
       outline-none transition-colors md-sys-motion-fast-effects
       hover:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
     `,
         subTrigger: `
-      rounded-sm relative flex w-full cursor-pointer select-none items-center gap-2
-      px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
+      rounded-sm relative flex w-full cursor-pointer select-none items-center gap-spacing-100
+      px-spacing-150 py-spacing-100 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
       outline-none transition-colors md-sys-motion-fast-effects
       hover:bg-md-sys-color-on-surface/8 data-[state=open]:bg-md-sys-color-on-surface/8
       data-[highlighted]:bg-md-sys-color-on-surface/8
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
     `,
-        itemContent: 'flex flex-1 flex-col gap-0.5 min-w-0',
+        itemContent: 'flex flex-1 flex-col gap-spacing-25 min-w-spacing-0',
         label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
         helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        icon: 'size-5 text-[20px] text-md-sys-color-on-surface-variant shrink-0',
-        separator: 'my-1 h-px bg-md-sys-color-outline-variant',
-        rightSlot: 'ml-auto size-5 text-[20px] shrink-0 text-md-sys-color-on-surface-variant'
+        icon: 'size-spacing-250 text-[20px] text-md-sys-color-on-surface-variant shrink-0',
+        separator: 'my-spacing-50 h-px bg-md-sys-color-outline-variant',
+        rightSlot: 'ml-auto size-spacing-250 text-[20px] shrink-0 text-md-sys-color-on-surface-variant'
     },
     variants: {
         selected: {

package/dist/components/containers/dialogue/Dialogue.mdx

@@ -0,0 +1,65 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DialogueStories from './Dialogue.stories.svelte';
+
+<Meta of={DialogueStories} />
+
+<Title />
+
+<Subtitle>
+  Dialogs give important information or ask for a decision, and block the app until the user
+  responds.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/dialogs/specs) ·
+`import { Dialogue } from '@noxlovette/material';`
+
+<Canvas of={DialogueStories.Playground} />
+
+<Controls of={DialogueStories.Playground} />
+
+## It's `Dialogue`, not `Dialog`
+
+The export uses the British spelling. `import { Dialog } from '@noxlovette/material'` fails;
+`Dialog` is bits-ui's headless primitive, which `Dialogue` wraps.
+
+## The confirm button submits a form
+
+`enhance` and `confirmText` are required. The confirm button is a real submit button in a form
+that posts to `confirmAction`, so the action runs through SvelteKit (or Superforms) rather than a
+click handler. Any other bits-ui `Dialog.Root` props are passed through to the root.
+
+```svelte
+<script lang="ts">
+  import { Dialogue } from '@noxlovette/material';
+  import { enhance } from '$app/forms';
+
+  let open = $state(false);
+</script>
+
+<Dialogue
+  bind:open
+  {enhance}
+  headline="Delete this file?"
+  supportingText="This action cannot be undone."
+  confirmText="Delete"
+  cancelText="Cancel"
+  confirmAction="?/deleteFile"
+/>
+```
+
+By default the confirm button also closes the dialog. To keep it open until the server
+responds, for example on a validation error, set `delegateClose` and close it yourself. `loading`
+shows progress on the confirm button meanwhile.
+
+<Canvas of={DialogueStories.LoadingConfirm} />
+
+`children` renders between the supporting text and the buttons:
+
+<Canvas of={DialogueStories.WithExtraContent} />
+
+## Accessibility
+
+- **Focus.** Focus is trapped inside while open and goes back to the trigger on close.
+- **Labelling.** `headline` and `supportingText` become the dialog's accessible name and
+  description.
+- **Escape** closes the dialog.

package/dist/components/containers/dialogue/Dialogue.stories.svelte

@@ -38,7 +38,7 @@
 </script>
 
 <Story name="Playground" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Button onclick={() => (playgroundOpen = true)}>Open dialog</Button>
     <Dialogue
       bind:open={playgroundOpen}
@@ -52,7 +52,7 @@
 </Story>
 
 <Story name="With Extra Content" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Button onclick={() => (extraContentOpen = true)}>Open dialog with content</Button>
     <Dialogue
       bind:open={extraContentOpen}
@@ -64,14 +64,14 @@
       <input
         type="text"
         value="Untitled project"
-        class="border-md-sys-color-outline-variant bg-md-sys-color-surface w-full rounded-lg border px-3 py-2"
+        class="border-md-sys-color-outline-variant bg-md-sys-color-surface px-spacing-150 py-spacing-100 w-full rounded-lg border"
       />
     </Dialogue>
   </div>
 </Story>
 
 <Story name="Loading Confirm" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Button onclick={() => (loadingOpen = true)}>Open dialog</Button>
     <Dialogue
       bind:open={loadingOpen}

package/dist/components/containers/dialogue/Dialogue.svelte

@@ -73,7 +73,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
           {/if}
 
           {#if children}
-            <div class="flex w-full flex-col gap-4">
+            <div class="gap-spacing-200 flex w-full flex-col">
               {@render children()}
             </div>
           {/if}

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

@@ -1,10 +1,10 @@
 import { tv } from 'tailwind-variants';
 export const dialogue = tv({
     slots: {
-        base: 'fixed inset-0 z-40 bg-md-sys-color-scrim/32',
-        inner: 'fixed inset-0 z-50 m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-6 gap-4',
+        base: 'fixed inset-spacing-0 z-40 bg-md-sys-color-scrim/32',
+        inner: 'fixed inset-spacing-0 z-50 m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-spacing-300 gap-spacing-200',
         headlineContainer: 'md-sys-typescale-headline-small text-md-sys-color-on-surface',
         supportingTextContainer: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        buttonContainer: 'mt-2 flex items-center justify-end gap-2'
+        buttonContainer: 'mt-spacing-100 flex items-center justify-end gap-spacing-100'
     }
 });

package/dist/components/containers/divider/Divider.stories.svelte

@@ -5,6 +5,7 @@
 
   const { Story } = defineMeta({
     title: 'Containers/Divider',
+    tags: ['autodocs'],
     component: Divider,
     argTypes: {
       variant: { control: 'select', options: ['full', 'inset', 'wavy'] },
@@ -54,7 +55,7 @@
 </Story>
 
 <Story name="Vertical" asChild>
-  <div class="flex h-24 items-center gap-4">
+  <div class="gap-spacing-200 flex h-24 items-center">
     <Body>Left</Body>
     <Divider orientation="vertical" />
     <Body>Right</Body>

package/dist/components/containers/divider/Divider.svelte

@@ -31,7 +31,7 @@ Powered by bits-ui for accessibility.
       orientation === 'horizontal' ? 'h-[1px] w-full' : 'w-[1px] h-full'
     )
   );
-  let insetClass = $derived(variant === 'inset' ? 'mr-2 ml-4' : '');
+  let insetClass = $derived(variant === 'inset' ? 'mr-spacing-100 ml-spacing-200' : '');
 
   let width = $state(0);
   let waveHeight = 12;
@@ -79,7 +79,7 @@ Powered by bits-ui for accessibility.
 {:else if children && orientation === 'horizontal'}
   <div
     {...restProps}
-    class={clsx('flex h-full w-full items-center gap-3', insetClass, className)}
+    class={clsx('gap-spacing-150 flex h-full w-full items-center', insetClass, className)}
     role={decorative ? 'none' : 'separator'}
     aria-orientation="horizontal"
   >

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

@@ -2,31 +2,31 @@ import { type VariantProps } from 'tailwind-variants';
 export type HrVariants = VariantProps<typeof hr>;
 export declare const hr: import("tailwind-variants").TVReturnType<{
     orientation: {
-        horizontal: "h-[1px] mt-1 mb-2 w-full";
+        horizontal: "h-[1px] mt-spacing-50 mb-spacing-100 w-full";
         vertical: "w-[1px] self-stretch min-h-[1em]";
     };
     variant: {
-        inset: "mr-2 ml-4";
+        inset: "mr-spacing-100 ml-spacing-200";
         full: "";
         wavy: "";
     };
 }, undefined, "bg-md-sys-color-outline-variant", {
     orientation: {
-        horizontal: "h-[1px] mt-1 mb-2 w-full";
+        horizontal: "h-[1px] mt-spacing-50 mb-spacing-100 w-full";
         vertical: "w-[1px] self-stretch min-h-[1em]";
     };
     variant: {
-        inset: "mr-2 ml-4";
+        inset: "mr-spacing-100 ml-spacing-200";
         full: "";
         wavy: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
-        horizontal: "h-[1px] mt-1 mb-2 w-full";
+        horizontal: "h-[1px] mt-spacing-50 mb-spacing-100 w-full";
         vertical: "w-[1px] self-stretch min-h-[1em]";
     };
     variant: {
-        inset: "mr-2 ml-4";
+        inset: "mr-spacing-100 ml-spacing-200";
         full: "";
         wavy: "";
     };

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

@@ -3,11 +3,11 @@ export const hr = tv({
     base: 'bg-md-sys-color-outline-variant',
     variants: {
         orientation: {
-            horizontal: 'h-[1px] mt-1 mb-2 w-full',
+            horizontal: 'h-[1px] mt-spacing-50 mb-spacing-100 w-full',
             vertical: 'w-[1px] self-stretch min-h-[1em]'
         },
         variant: {
-            inset: 'mr-2 ml-4',
+            inset: 'mr-spacing-100 ml-spacing-200',
             full: '',
             wavy: ''
         }

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

@@ -1,6 +1,7 @@
 export * from './action-rail/index.js';
 export * from './app/index.js';
 export * from './bottom-sheet/index.js';
+export * from './carousel/index.js';
 export * from './context-menu/index.js';
 export * from './dialogue/index.js';
 export * from './divider/index.js';
@@ -11,4 +12,3 @@ export * from './pane/index.js';
 export * from './popover/index.js';
 export * from './scroll-area/index.js';
 export * from './side-sheet/index.js';
-export * from './stack/index.js';

package/dist/components/containers/index.js

@@ -3,6 +3,7 @@
 export * from './action-rail/index.js';
 export * from './app/index.js';
 export * from './bottom-sheet/index.js';
+export * from './carousel/index.js';
 export * from './context-menu/index.js';
 export * from './dialogue/index.js';
 export * from './divider/index.js';
@@ -13,4 +14,3 @@ export * from './pane/index.js';
 export * from './popover/index.js';
 export * from './scroll-area/index.js';
 export * from './side-sheet/index.js';
-export * from './stack/index.js';

package/dist/components/containers/link-preview/theme.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const linkPreview = tv({
     slots: {
-        base: 'relative z-[100] min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-4 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20 overflow-hidden',
-        content: 'flex flex-col gap-2'
+        base: 'relative z-[100] min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-spacing-200 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20 overflow-hidden',
+        content: 'flex flex-col gap-spacing-100'
     }
 });

package/dist/components/containers/list/List.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import clsx from 'clsx';
+  import { list } from './theme.js';
+  import { setListContext } from './context.js';
+  import type { ListProps } from './types.js';
+
+  let { variant = 'standard', class: className, children, ...restProps }: ListProps = $props();
+
+  setListContext({
+    get variant() {
+      return variant;
+    }
+  });
+</script>
+
+<ul class={list({ variant, class: clsx(className) })} {...restProps}>
+  {@render children?.()}
+</ul>

package/dist/components/containers/list/List.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ListProps } from './types.js';
+declare const List: import("svelte").Component<ListProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;