@noxlovette/material 0.5.1 → 0.6.1

package/dist/components/buttons/FAB.mdx

@@ -0,0 +1,84 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as FABStories from './FAB.stories.svelte';
+
+<Meta of={FABStories} />
+
+<Title />
+
+<Subtitle>FABs help people take the primary action on a screen.</Subtitle>
+
+[FAB spec](https://m3.material.io/components/floating-action-button/specs) ·
+[Extended FAB spec](https://m3.material.io/components/extended-fab/specs) ·
+[FAB menu spec](https://m3.material.io/components/fab-menu/specs) ·
+`import { FAB, FABMenuItem } from '@noxlovette/material';`
+
+<Canvas of={FABStories.Playground} />
+
+<Controls of={FABStories.Playground} />
+
+## Sizes
+
+| `size`    | FAB  | Icon | Corners | Extended: label, padding, gap |
+| --------- | ---- | ---- | ------- | ----------------------------- |
+| `regular` | 56dp | 24dp | 16dp    | title medium, 16dp, 8dp       |
+| `medium`  | 80dp | 28dp | 20dp    | title large, 26dp, 12dp       |
+| `large`   | 96dp | 36dp | 28dp    | headline small, 28dp, 16dp    |
+| `small`   | 40dp | 24dp | 12dp    | none                          |
+
+`small` is the baseline small FAB, which M3 no longer recommends. FABs sit at elevation 3 and
+rise to 4 on hover. Keep 16dp from the window edges.
+
+<Canvas of={FABStories.Sizes} />
+
+## Colour
+
+`primary-container` (default), `secondary-container` and `tertiary-container`, or the stronger
+`primary`, `secondary` and `tertiary`. The state layer always takes the icon's colour.
+
+<Canvas of={FABStories.Colours} />
+
+## FAB and extended FAB
+
+Give the FAB a `label` and it becomes an extended FAB where there's room. The two transform
+into each other with the space available, so `expanded` is responsive:
+
+- **Default:** a FAB on compact windows, an extended FAB from medium windows up
+  (`{ small: false, medium: true }`).
+- **In a `Rail`:** a FAB while the rail is collapsed, an extended FAB while it's expanded.
+- **Your own:** pass `true`, `false`, or per-window values; toggle it to collapse the label
+  while the page scrolls.
+
+The label slides open and shut on the spatial spring. It also names the FAB for assistive
+technology when collapsed; a FAB without a label needs an `aria-label`.
+
+<Canvas of={FABStories.Extended} />
+
+<Canvas of={FABStories.Responsive} />
+
+## FAB menu
+
+`withMenu` opens up to six `FABMenuItem`s above the FAB, which springs into a 56dp round close
+button in the same top trailing corner. The close button is 56dp whatever the FAB's size, as
+M3 specifies, so a medium or large FAB shrinks into it. The items grow out of it one after
+another, nearest first. Items are 56dp pills 4dp apart, 8dp above the close
+button, in the FAB's colour set: a primary, secondary or tertiary close button with items in the
+matching container colour. The menu takes arrow keys, Escape and outside clicks.
+
+<Canvas of={FABStories.FabMenu} />
+
+## Container transform
+
+Pass a `surface` snippet and the FAB opens into it: the FAB's container grows from its corner
+into the surface and turns from the FAB's colour into the surface's, and the content fades in
+once it has room (M3's container transform, with a persistent container). It shrinks back on
+Escape, an outside click, or the snippet's `close()`, and focus returns to the FAB. Keep the
+FAB's icon in the surface, as on the "Compose new" row below, so the icon persists too.
+
+<Canvas of={FABStories.ContainerTransform} />
+
+## Migrating
+
+`config` is now `color`, with the Expressive names: the old `primary` is now `primary-container`
+(the default). `size` gains `medium`. `FABMenuItem` loses `variant`; items follow the FAB's
+colour. `expanded` now defaults to responsive instead of `false`, so a labelled FAB extends on
+wider windows; pass `expanded={false}` to keep the old behaviour.

package/dist/components/buttons/FAB.stories.svelte

@@ -2,26 +2,31 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import FAB from './FAB.svelte';
   import FABMenuItem from './FABMenuItem.svelte';
+  import ListItem from '../containers/list/ListItem.svelte';
+  import List from '../containers/list/List.svelte';
+  import Icon from '../../utils/icon/Icon.svelte';
+
+  const colors = [
+    'primary-container',
+    'secondary-container',
+    'tertiary-container',
+    'primary',
+    'secondary',
+    'tertiary'
+  ] as const;
 
   const { Story } = defineMeta({
     title: 'Buttons/FAB',
     component: FAB,
     argTypes: {
-      config: {
-        control: 'select',
-        options: ['primary', 'secondary', 'tertiary']
-      },
-      size: {
-        control: 'select',
-        options: ['small', 'regular', 'large']
-      },
+      color: { control: 'select', options: colors },
+      size: { control: 'select', options: ['small', 'regular', 'medium', 'large'] },
       expanded: { control: 'boolean' },
-      label: { control: 'text' },
       disabled: { control: 'boolean' },
       loading: { control: 'boolean' }
     },
     args: {
-      config: 'primary',
+      color: 'primary-container',
       size: 'regular',
       expanded: false,
       label: 'Compose',
@@ -32,28 +37,102 @@
   });
 </script>
 
-<Story name="Playground" />
+<script lang="ts">
+  let extended = $state(true);
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <FAB {...args} iconProps={{ name: 'edit' }} />
+  {/snippet}
+</Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-wrap items-end gap-4 p-6">
-    <FAB size="small" config="primary" iconProps={{ name: 'edit' }} />
-    <FAB size="regular" config="primary" iconProps={{ name: 'edit' }} />
-    <FAB size="large" config="primary" iconProps={{ name: 'edit' }} />
+  <div class="gap-spacing-300 p-spacing-300 flex items-end">
+    <FAB size="regular" aria-label="Compose" iconProps={{ name: 'edit' }} />
+    <FAB size="medium" aria-label="Compose" iconProps={{ name: 'edit' }} />
+    <FAB size="large" aria-label="Compose" iconProps={{ name: 'edit' }} />
+    <FAB size="small" aria-label="Compose (baseline small)" iconProps={{ name: 'edit' }} />
+  </div>
+</Story>
+
+<Story name="Colours" asChild>
+  <div class="gap-spacing-300 p-spacing-300 flex flex-wrap">
+    {#each colors as color (color)}
+      <FAB {color} aria-label={color} iconProps={{ name: 'edit' }} />
+    {/each}
   </div>
 </Story>
 
 <Story name="Extended" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
-    <FAB config="primary" expanded label="Compose" iconProps={{ name: 'edit' }} />
+  <div class="gap-spacing-300 p-spacing-300 flex flex-col items-start">
+    <FAB expanded label="Compose" iconProps={{ name: 'edit' }} />
+    <FAB size="medium" expanded label="Compose" iconProps={{ name: 'edit' }} />
+    <FAB size="large" expanded label="Compose" iconProps={{ name: 'edit' }} />
   </div>
 </Story>
 
-<Story name="With Menu" asChild>
-  <div class="relative flex h-40 items-end gap-4 p-6">
-    <FAB config="primary" withMenu iconProps={{ name: 'add' }}>
-      <FABMenuItem variant="primary" iconProps={{ name: 'draw' }}>Draw</FABMenuItem>
-      <FABMenuItem variant="secondary" iconProps={{ name: 'image' }}>Insert Image</FABMenuItem>
-      <FABMenuItem variant="tertiary" iconProps={{ name: 'mic' }}>Record</FABMenuItem>
-    </FAB>
+<Story name="Responsive" asChild>
+  <div class="gap-spacing-300 p-spacing-300 flex flex-col items-start">
+    <label class="md-sys-typescale-body-medium gap-spacing-100 flex items-center">
+      <input type="checkbox" bind:checked={extended} /> Extended
+    </label>
+    <FAB expanded={extended} label="Create" iconProps={{ name: 'add' }} />
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant max-w-md">
+      By default a labelled FAB is a FAB on compact windows and extended from medium windows up;
+      resize the preview to see it transform.
+    </p>
+    <FAB label="Create" iconProps={{ name: 'add' }} />
   </div>
 </Story>
+
+<Story
+  name="FAB menu"
+  exportName="FabMenu"
+  parameters={{ docs: { story: { inline: false, height: '28rem' } } }}
+>
+  {#snippet template()}
+    <div class="end-spacing-200 bottom-spacing-200 gap-spacing-200 fixed flex">
+      <FAB
+        withMenu
+        size="medium"
+        color="tertiary-container"
+        aria-label="New"
+        iconProps={{ name: 'add' }}
+      >
+        <FABMenuItem iconProps={{ name: 'chat' }}>Message</FABMenuItem>
+        <FABMenuItem iconProps={{ name: 'folder' }}>Folder</FABMenuItem>
+        <FABMenuItem iconProps={{ name: 'upload' }}>Upload</FABMenuItem>
+      </FAB>
+      <FAB withMenu aria-label="New" iconProps={{ name: 'add' }}>
+        <FABMenuItem iconProps={{ name: 'chat' }}>Message</FABMenuItem>
+        <FABMenuItem iconProps={{ name: 'folder' }}>Folder</FABMenuItem>
+        <FABMenuItem iconProps={{ name: 'upload' }}>Upload</FABMenuItem>
+      </FAB>
+    </div>
+  {/snippet}
+</Story>
+
+<Story
+  name="Container transform"
+  parameters={{ docs: { story: { inline: false, height: '32rem' } } }}
+>
+  {#snippet template()}
+    <div class="end-spacing-200 bottom-spacing-200 fixed">
+      <FAB label="Compose" iconProps={{ name: 'edit' }} expanded={false}>
+        {#snippet surface({ close })}
+          <List>
+            {#each ['Lily MacDonald', 'So Duri', 'Ziad Aouad'] as name (name)}
+              <ListItem headline={name} onclick={close}>
+                {#snippet leading()}<Icon name="person" />{/snippet}
+              </ListItem>
+            {/each}
+            <ListItem headline="Compose new" onclick={close}>
+              {#snippet leading()}<Icon name="edit" />{/snippet}
+            </ListItem>
+          </List>
+        {/snippet}
+      </FAB>
+    </div>
+  {/snippet}
+</Story>

package/dist/components/buttons/FAB.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import FAB from './FAB.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 FAB: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FAB = InstanceType<typeof FAB>;
+declare const FAB: import("svelte").Component<Record<string, never>, {}, "">;
+type FAB = ReturnType<typeof FAB>;
 export default FAB;