@noxlovette/material 0.5.0 → 0.6.0

package/dist/components/containers/side-sheet/types.d.ts

@@ -3,22 +3,50 @@ import type { Snippet } from 'svelte';
  * Props for the SideSheet component.
  */
 export interface SideSheetProps {
+    /** The title at the top of the sheet. It also names the sheet for assistive technology. */
+    headline: string;
+    /** The sheet's content. It scrolls inside the sheet, with 24dp padding. */
+    children: Snippet;
     /**
-     * The title displayed at the top of the side sheet.
+     * Buttons pinned to the bottom of the sheet, e.g. Save and Cancel. Left-aligned, most
+     * important first.
      */
-    headline: string;
+    actions?: Snippet;
     /**
-     * The content of the side sheet.
+     * - `modal`: in front of the app above a scrim, blocking everything else until it's closed
+     *   (close button, Esc, or a scrim tap). Use it on compact and medium windows, or when the
+     *   content needs full attention.
+     * - `standard`: part of the layout. Place it as the last child of a full-height row; the
+     *   content beside it reflows as it opens and closes, and stays usable.
+     * @default 'modal'
      */
-    children: Snippet;
+    variant?: 'modal' | 'standard';
     /**
-     * Whether the sheet is shown. Bind it (`bind:open`) so the sheet can play its exit animation
-     * before unmounting.
+     * Whether the sheet is shown. Bind it (`bind:open`) so the sheet can close itself and play
+     * its exit animation.
      * @default true
      */
     open?: boolean;
     /**
-     * Called when the user dismisses the sheet (close button, Esc, backdrop click).
+     * Sheet width in px. M3 sizes side sheets at 256dp and never wider than 400dp; wider values
+     * are capped at 400.
+     * @default 256
+     */
+    width?: number;
+    /** Floats the sheet 16dp from the window edges with 16dp corners all round. */
+    detached?: boolean;
+    /**
+     * Draws the optional dividers: along a docked standard sheet's inner edge, and above the
+     * actions.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Shows a back button before the headline, for sheets that navigate within themselves. Called
+     * when it's activated.
      */
+    onback?: () => void;
+    /** Called when the user closes the sheet (close button, Esc, or a scrim tap). */
     close?: () => void;
+    class?: string;
 }

package/dist/components/date/DateField.stories.svelte

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Date/DateField',
+    tags: ['autodocs'],
     component: DateField,
     argTypes: {
       label: { control: 'text' },
@@ -24,14 +25,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-sm p-6">
+    <div class="p-spacing-300 max-w-sm">
       <DateField {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Outlined States" asChild>
-  <div class="flex max-w-sm flex-col gap-6 p-6">
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-sm flex-col">
     <DateField variant="outlined" label="Default" />
     <DateField variant="outlined" label="Required" required />
     <DateField variant="outlined" label="Error" error>
@@ -44,7 +45,7 @@
 </Story>
 
 <Story name="Filled States" asChild>
-  <div class="flex max-w-sm flex-col gap-6 p-6">
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-sm flex-col">
     <DateField variant="filled" label="Default" />
     <DateField variant="filled" label="Required" required />
     <DateField variant="filled" label="Error" error>

package/dist/components/date/DateField.svelte

@@ -2,15 +2,19 @@
 @component
 DateField is a text field that allows users to enter a date or pick it from a docked calendar.
 
+Changing the visible month slides the grid with the M3 lateral transition (see calendarMotion.ts).
+
 @see https://m3.material.io/components/date-pickers/guidelines
 -->
 <script lang="ts">
   import { DatePicker, useId } from 'bits-ui';
+  import type { DateValue } from '@internationalized/date';
   import { enterExit, presence } from '../../animation/index.js';
   import ButtonIcon from '../buttons/ButtonIcon.svelte';
   import Icon from '../../utils/icon/Icon.svelte';
   import Layer from '../../utils/Layer.svelte';
   import type { DateFieldProps } from './types';
+  import { slideMonth } from './calendarMotion.js';
   import { dateCalendar, dateField, dateSegment } from './theme';
 
   let {
@@ -30,10 +34,18 @@ DateField is a text field that allows users to enter a date or pick it from a do
 
   const cls = $derived(dateField({ disabled, error, variant }));
   const calendar = dateCalendar();
+
+  // Starts undefined on purpose: bits-ui writes its own default (from value, else today) through
+  // the setter on mount, which is why the getter below can assert.
+  let placeholder = $state<DateValue>();
+  let grids = $state<HTMLElement | null>(null);
+  const setPlaceholder = (next: DateValue) =>
+    slideMonth(placeholder, next, grids, (date) => (placeholder = date));
 </script>
 
 <DatePicker.Root
   bind:value
+  bind:placeholder={() => placeholder as DateValue, setPlaceholder}
   {weekStartsOn}
   {required}
   {disabled}
@@ -73,6 +85,7 @@ DateField is a text field that allows users to enter a date or pick it from a do
       <DatePicker.Trigger>
         {#snippet child({ props })}
           <ButtonIcon
+            variant="standard"
             {...props}
             {disabled}
             class={cls.trailingIcon()}
@@ -109,44 +122,54 @@ DateField is a text field that allows users to enter a date or pick it from a do
                   <div class={calendar.nav()}>
                     <DatePicker.PrevButton>
                       {#snippet child({ props })}
-                        <ButtonIcon {...props} iconProps={{ name: 'chevron_left' }} />
+                        <ButtonIcon
+                          variant="standard"
+                          {...props}
+                          iconProps={{ name: 'chevron_left' }}
+                        />
                       {/snippet}
                     </DatePicker.PrevButton>
                     <DatePicker.NextButton>
                       {#snippet child({ props })}
-                        <ButtonIcon {...props} iconProps={{ name: 'chevron_right' }} />
+                        <ButtonIcon
+                          variant="standard"
+                          {...props}
+                          iconProps={{ name: 'chevron_right' }}
+                        />
                       {/snippet}
                     </DatePicker.NextButton>
                   </div>
                 </DatePicker.Header>
 
-                {#each months as month (month.value.toString())}
-                  <DatePicker.Grid class={calendar.grid()}>
-                    <DatePicker.GridHead>
-                      <DatePicker.GridRow class={calendar.row()}>
-                        {#each weekdays as day, i (i)}
-                          <DatePicker.HeadCell class={calendar.weekday()}>
-                            {day}
-                          </DatePicker.HeadCell>
-                        {/each}
-                      </DatePicker.GridRow>
-                    </DatePicker.GridHead>
-                    <DatePicker.GridBody>
-                      {#each month.weeks as weekDates, i (i)}
+                <div bind:this={grids}>
+                  {#each months as month (month.value.toString())}
+                    <DatePicker.Grid class={calendar.grid()}>
+                      <DatePicker.GridHead>
                         <DatePicker.GridRow class={calendar.row()}>
-                          {#each weekDates as date (date.toString())}
-                            <DatePicker.Cell {date} month={month.value} class={calendar.cell()}>
-                              <DatePicker.Day class={calendar.day()}>
-                                <Layer />
-                                {date.day}
-                              </DatePicker.Day>
-                            </DatePicker.Cell>
+                          {#each weekdays as day, i (i)}
+                            <DatePicker.HeadCell class={calendar.weekday()}>
+                              {day}
+                            </DatePicker.HeadCell>
                           {/each}
                         </DatePicker.GridRow>
-                      {/each}
-                    </DatePicker.GridBody>
-                  </DatePicker.Grid>
-                {/each}
+                      </DatePicker.GridHead>
+                      <DatePicker.GridBody>
+                        {#each month.weeks as weekDates, i (i)}
+                          <DatePicker.GridRow class={calendar.row()}>
+                            {#each weekDates as date (date.toString())}
+                              <DatePicker.Cell {date} month={month.value} class={calendar.cell()}>
+                                <DatePicker.Day class={calendar.day()}>
+                                  <Layer />
+                                  {date.day}
+                                </DatePicker.Day>
+                              </DatePicker.Cell>
+                            {/each}
+                          </DatePicker.GridRow>
+                        {/each}
+                      </DatePicker.GridBody>
+                    </DatePicker.Grid>
+                  {/each}
+                </div>
               {/snippet}
             </DatePicker.Calendar>
           </div>

package/dist/components/date/DateField.svelte.d.ts

@@ -2,6 +2,8 @@ import type { DateFieldProps } from './types';
 /**
  * DateField is a text field that allows users to enter a date or pick it from a docked calendar.
  *
+ * Changing the visible month slides the grid with the M3 lateral transition (see calendarMotion.ts).
+ *
  * @see https://m3.material.io/components/date-pickers/guidelines
  */
 declare const DateField: import("svelte").Component<DateFieldProps, {}, "value">;

package/dist/components/date/DateRangeField.stories.svelte

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Date/DateRangeField',
+    tags: ['autodocs'],
     component: DateRangeField,
     argTypes: {
       variant: { control: 'select', options: ['filled', 'outlined'] },
@@ -22,14 +23,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-sm p-6">
+    <div class="p-spacing-300 max-w-sm">
       <DateRangeField {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Outlined States" asChild>
-  <div class="flex max-w-sm flex-col gap-6 p-6">
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-sm flex-col">
     <DateRangeField variant="outlined" />
     <DateRangeField variant="outlined" error>
       {#snippet supportingText()}
@@ -41,7 +42,7 @@
 </Story>
 
 <Story name="Filled States" asChild>
-  <div class="flex max-w-sm flex-col gap-6 p-6">
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-sm flex-col">
     <DateRangeField variant="filled" />
     <DateRangeField variant="filled" error>
       {#snippet supportingText()}

package/dist/components/date/DateRangeField.svelte

@@ -3,15 +3,19 @@
 DateRangeField lets users enter or pick a date range (start + end) via two
 segment inputs and a shared docked calendar.
 
+Changing the visible month slides the grid with the M3 lateral transition (see calendarMotion.ts).
+
 @see https://m3.material.io/components/date-pickers/guidelines
 -->
 <script lang="ts">
   import { DateRangePicker, Portal, useId } from 'bits-ui';
+  import type { DateValue } from '@internationalized/date';
   import { enterExit, presence } from '../../animation/index.js';
   import ButtonIcon from '../buttons/ButtonIcon.svelte';
   import Icon from '../../utils/icon/Icon.svelte';
   import Layer from '../../utils/Layer.svelte';
   import type { DateRangeFieldProps } from './types';
+  import { slideMonth } from './calendarMotion.js';
   import { dateCalendar, dateRangeField, dateSegment } from './theme';
 
   let {
@@ -33,6 +37,13 @@ segment inputs and a shared docked calendar.
 
   const cls = $derived(dateRangeField({ disabled, error, variant }));
   const calendar = dateCalendar();
+
+  // Starts undefined on purpose: bits-ui writes its own default (from value, else today) through
+  // the setter on mount, which is why the getter below can assert.
+  let placeholder = $state<DateValue>();
+  let grids = $state<HTMLElement | null>(null);
+  const setPlaceholder = (next: DateValue) =>
+    slideMonth(placeholder, next, grids, (date) => (placeholder = date));
 </script>
 
 {#snippet rangeInput(type: 'start' | 'end', fieldLabel: string)}
@@ -44,7 +55,7 @@ segment inputs and a shared docked calendar.
       id={`${id}-${type}`}
     >
       {#snippet children({ segments })}
-        <div class="flex w-full pt-4 tabular-nums">
+        <div class="pt-spacing-200 flex w-full tabular-nums">
           {#each segments as { part, value: segment }}
             <DateRangePicker.Segment
               {part}
@@ -66,6 +77,7 @@ segment inputs and a shared docked calendar.
 
 <DateRangePicker.Root
   bind:value
+  bind:placeholder={() => placeholder as DateValue, setPlaceholder}
   {weekStartsOn}
   {required}
   {disabled}
@@ -90,6 +102,7 @@ segment inputs and a shared docked calendar.
       <DateRangePicker.Trigger>
         {#snippet child({ props })}
           <ButtonIcon
+            variant="standard"
             {...props}
             {disabled}
             class={cls.trailingIcon()}
@@ -118,48 +131,58 @@ segment inputs and a shared docked calendar.
                   <div class={calendar.nav()}>
                     <DateRangePicker.PrevButton>
                       {#snippet child({ props })}
-                        <ButtonIcon {...props} iconProps={{ name: 'chevron_left' }} />
+                        <ButtonIcon
+                          variant="standard"
+                          {...props}
+                          iconProps={{ name: 'chevron_left' }}
+                        />
                       {/snippet}
                     </DateRangePicker.PrevButton>
                     <DateRangePicker.NextButton>
                       {#snippet child({ props })}
-                        <ButtonIcon {...props} iconProps={{ name: 'chevron_right' }} />
+                        <ButtonIcon
+                          variant="standard"
+                          {...props}
+                          iconProps={{ name: 'chevron_right' }}
+                        />
                       {/snippet}
                     </DateRangePicker.NextButton>
                   </div>
                 </DateRangePicker.Header>
 
-                {#each months as month (month.value.toString())}
-                  <DateRangePicker.Grid class={calendar.grid()}>
-                    <DateRangePicker.GridHead>
-                      <DateRangePicker.GridRow class={calendar.row()}>
-                        {#each weekdays as day, i (i)}
-                          <DateRangePicker.HeadCell class={calendar.weekday()}>
-                            {day}
-                          </DateRangePicker.HeadCell>
-                        {/each}
-                      </DateRangePicker.GridRow>
-                    </DateRangePicker.GridHead>
-                    <DateRangePicker.GridBody>
-                      {#each month.weeks as weekDates, i (i)}
+                <div bind:this={grids}>
+                  {#each months as month (month.value.toString())}
+                    <DateRangePicker.Grid class={calendar.grid()}>
+                      <DateRangePicker.GridHead>
                         <DateRangePicker.GridRow class={calendar.row()}>
-                          {#each weekDates as date (date.toString())}
-                            <DateRangePicker.Cell
-                              {date}
-                              month={month.value}
-                              class={calendar.cell()}
-                            >
-                              <DateRangePicker.Day class={calendar.day()}>
-                                <Layer />
-                                {date.day}
-                              </DateRangePicker.Day>
-                            </DateRangePicker.Cell>
+                          {#each weekdays as day, i (i)}
+                            <DateRangePicker.HeadCell class={calendar.weekday()}>
+                              {day}
+                            </DateRangePicker.HeadCell>
                           {/each}
                         </DateRangePicker.GridRow>
-                      {/each}
-                    </DateRangePicker.GridBody>
-                  </DateRangePicker.Grid>
-                {/each}
+                      </DateRangePicker.GridHead>
+                      <DateRangePicker.GridBody>
+                        {#each month.weeks as weekDates, i (i)}
+                          <DateRangePicker.GridRow class={calendar.row()}>
+                            {#each weekDates as date (date.toString())}
+                              <DateRangePicker.Cell
+                                {date}
+                                month={month.value}
+                                class={calendar.cell()}
+                              >
+                                <DateRangePicker.Day class={calendar.day()}>
+                                  <Layer />
+                                  {date.day}
+                                </DateRangePicker.Day>
+                              </DateRangePicker.Cell>
+                            {/each}
+                          </DateRangePicker.GridRow>
+                        {/each}
+                      </DateRangePicker.GridBody>
+                    </DateRangePicker.Grid>
+                  {/each}
+                </div>
               {/snippet}
             </DateRangePicker.Calendar>
           </div>

package/dist/components/date/DateRangeField.svelte.d.ts

@@ -3,6 +3,8 @@ import type { DateRangeFieldProps } from './types';
  * DateRangeField lets users enter or pick a date range (start + end) via two
  * segment inputs and a shared docked calendar.
  *
+ * Changing the visible month slides the grid with the M3 lateral transition (see calendarMotion.ts).
+ *
  * @see https://m3.material.io/components/date-pickers/guidelines
  */
 declare const DateRangeField: import("svelte").Component<DateRangeFieldProps, {}, "value">;

package/dist/components/date/calendarMotion.d.ts

@@ -0,0 +1,9 @@
+import type { DateValue } from '@internationalized/date';
+/**
+ * Applies a new calendar placeholder (the month the grid shows). When the visible month changes
+ * while the calendar is open, the grid runs the M3 lateral transition — months are peers, so a
+ * later month pushes in from the right and an earlier one from the left. Covers every way the
+ * month changes: prev/next buttons, arrow keys past the month edge, picking an outside day.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#lateral
+ */
+export declare const slideMonth: (current: DateValue | undefined, next: DateValue, target: HTMLElement | null | undefined, apply: (next: DateValue) => void) => undefined;

package/dist/components/date/calendarMotion.js

@@ -0,0 +1,23 @@
+import { lateral } from '../../animation/index.js';
+import { tick } from 'svelte';
+const monthIndex = (date) => date.year * 12 + date.month;
+/**
+ * Applies a new calendar placeholder (the month the grid shows). When the visible month changes
+ * while the calendar is open, the grid runs the M3 lateral transition — months are peers, so a
+ * later month pushes in from the right and an earlier one from the left. Covers every way the
+ * month changes: prev/next buttons, arrow keys past the month edge, picking an outside day.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#lateral
+ */
+export const slideMonth = (current, next, target, apply) => {
+    const update = async () => {
+        apply(next);
+        await tick();
+    };
+    if (!current || !target?.isConnected || monthIndex(current) === monthIndex(next)) {
+        return void update();
+    }
+    lateral(update, {
+        target,
+        direction: monthIndex(next) > monthIndex(current) ? 'forward' : 'backward'
+    });
+};

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

@@ -228,17 +228,17 @@ export declare const dateField: import("tailwind-variants").TVReturnType<{
 /** Segments of the typed date (`DatePicker.Segment` / `DateRangePicker.Segment`). */
 export declare const dateSegment: import("tailwind-variants").TVReturnType<{
     part: {
-        literal: "text-md-sys-color-on-surface-variant px-0";
+        literal: "text-md-sys-color-on-surface-variant px-spacing-0";
         value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
     };
-}, undefined, "\n    rounded-xs px-0.5 py-0.5 select-none cursor-default outline-none\n    transition-colors md-sys-motion-fast-effects\n  ", {
+}, undefined, "\n    rounded-xs px-spacing-25 py-spacing-25 select-none cursor-default outline-none\n    transition-colors md-sys-motion-fast-effects\n  ", {
     part: {
-        literal: "text-md-sys-color-on-surface-variant px-0";
+        literal: "text-md-sys-color-on-surface-variant px-spacing-0";
         value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     part: {
-        literal: "text-md-sys-color-on-surface-variant px-0";
+        literal: "text-md-sys-color-on-surface-variant px-spacing-0";
         value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
     };
 }, undefined>>;
@@ -251,12 +251,12 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
             surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
             day?: import("tailwind-variants").ClassValue;
         };
@@ -265,12 +265,12 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
             surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
             day?: import("tailwind-variants").ClassValue;
         };
@@ -289,12 +289,12 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
             surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
             day?: import("tailwind-variants").ClassValue;
         };