@noxlovette/material 0.4.8 → 0.5.1

package/dist/components/containers/side-sheet/SideSheet.svelte

@@ -4,69 +4,69 @@ Side sheets are supplementary surfaces which are anchored to the edge of the scr
 
 Like BottomSheet, SideSheet owns its own overlay: it renders as a native `<dialog>` pinned to
 the right edge of the screen, dims the rest of the app behind a backdrop, and slides in/out.
-Mounting it calls `showModal()` immediately, so visibility is controlled by conditionally
-rendering the component ({#if open}<SideSheet ...>{/if}).
+Visibility is controlled by `bind:open`; the sheet stays mounted until its exit animation
+finishes. Conditionally rendering it ({#if open}<SideSheet close={…} />{/if}) still works, but
+skips the exit animation.
 
 @see https://m3.material.io/components/side-sheets/guidelines
 -->
 <script lang="ts">
   import type { SideSheetProps } from './types.js';
-  import type { TransitionConfig } from 'svelte/transition';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
-  import { easeEmphasizedAccel, easeEmphasizedDecel } from '../../../animation/easing.js';
-  import { outroClass } from '../../../animation/outroClass.js';
+  import { enterExit, Presence } from '../../../animation/index.js';
 
-  let { headline, children, close }: SideSheetProps = $props();
+  let { headline, children, open = $bindable(true), close }: SideSheetProps = $props();
 
-  const open = (node: HTMLDialogElement) => node.showModal();
+  const sheet = new Presence(() => open);
 
-  const slideAnim = (
-    node: HTMLDialogElement,
-    options: { duration: number; easing: typeof easeEmphasizedDecel }
-  ): TransitionConfig => {
-    const width = node.getBoundingClientRect().width;
-    return {
-      duration: options.duration,
-      easing: options.easing,
-      css: (t) => `transform: translateX(${(1 - t) * width}px)`
-    };
+  const showModal = (node: HTMLDialogElement) => node.showModal();
+
+  const dismiss = () => {
+    open = false;
+    close?.();
   };
 </script>
 
-<dialog
-  class="bg-md-sys-color-surface-container-low text-md-sys-color-on-surface fixed inset-y-0 right-0 left-auto m-0 h-full w-full max-w-sm rounded-l-md"
-  use:open
-  use:outroClass
-  oncancel={(e) => {
-    e.preventDefault();
-    close();
-  }}
-  onmousedown={(e) => {
-    if (e.target != e.currentTarget) return;
-    close();
-  }}
-  in:slideAnim={{ easing: easeEmphasizedDecel, duration: 400 }}
-  out:slideAnim={{ easing: easeEmphasizedAccel, duration: 300 }}
->
-  <div class="flex h-full flex-col">
-    <div class="flex items-center justify-between p-6">
-      <span class="md-sys-typescale-title-large text-md-sys-color-on-surface-variant"
-        >{headline}</span
-      >
-      <ButtonIcon type="button" variant="text" iconProps={{ name: 'close' }} onclick={close} />
+{#if sheet.mounted}
+  <dialog
+    class="bg-md-sys-color-surface-container-low text-md-sys-color-on-surface fixed inset-y-0 right-0 left-auto m-0 h-full w-full max-w-sm rounded-l-md"
+    data-state={open ? 'open' : 'closed'}
+    {@attach showModal}
+    {@attach sheet.attach(enterExit.sideSheet)}
+    oncancel={(e) => {
+      e.preventDefault();
+      dismiss();
+    }}
+    onmousedown={(e) => {
+      if (e.target != e.currentTarget) return;
+      dismiss();
+    }}
+  >
+    <div class="flex h-full flex-col">
+      <div class="flex items-center justify-between p-6">
+        <span class="md-sys-typescale-title-large text-md-sys-color-on-surface-variant"
+          >{headline}</span
+        >
+        <ButtonIcon type="button" variant="text" iconProps={{ name: 'close' }} onclick={dismiss} />
+      </div>
+      {@render children()}
     </div>
-    {@render children()}
-  </div>
-</dialog>
+  </dialog>
+{/if}
 
 <style>
   dialog::backdrop {
     background-color: rgba(0, 0, 0, 0.5);
-    animation: backdrop 400ms;
+    animation: backdrop var(--md-sys-motion-duration-effects-spring)
+      var(--md-sys-motion-timing-function-effects-spring);
+  }
+  dialog[data-state='closed'] {
+    pointer-events: none;
   }
-  dialog:global(.leaving)::backdrop {
+  dialog[data-state='closed']::backdrop {
     background-color: transparent;
-    animation: backdropReverse 400ms;
+    animation: backdropReverse var(--md-sys-motion-duration-fast-effects-spring)
+      var(--md-sys-motion-timing-function-fast-effects-spring);
   }
   @keyframes backdrop {
     from {

package/dist/components/containers/side-sheet/SideSheet.svelte.d.ts

@@ -4,11 +4,12 @@ import type { SideSheetProps } from './types.js';
  *
  * Like BottomSheet, SideSheet owns its own overlay: it renders as a native `<dialog>` pinned to
  * the right edge of the screen, dims the rest of the app behind a backdrop, and slides in/out.
- * Mounting it calls `showModal()` immediately, so visibility is controlled by conditionally
- * rendering the component ({#if open}<SideSheet ...>{/if}).
+ * Visibility is controlled by `bind:open`; the sheet stays mounted until its exit animation
+ * finishes. Conditionally rendering it ({#if open}<SideSheet close={…} />{/if}) still works, but
+ * skips the exit animation.
  *
  * @see https://m3.material.io/components/side-sheets/guidelines
  */
-declare const SideSheet: import("svelte").Component<SideSheetProps, {}, "">;
+declare const SideSheet: import("svelte").Component<SideSheetProps, {}, "open">;
 type SideSheet = ReturnType<typeof SideSheet>;
 export default SideSheet;

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

@@ -12,7 +12,13 @@ export interface SideSheetProps {
      */
     children: Snippet;
     /**
-     * Callback function to close the side sheet.
+     * Whether the sheet is shown. Bind it (`bind:open`) so the sheet can play its exit animation
+     * before unmounting.
+     * @default true
      */
-    close: () => void;
+    open?: boolean;
+    /**
+     * Called when the user dismisses the sheet (close button, Esc, backdrop click).
+     */
+    close?: () => void;
 }

package/dist/components/date/DateField.svelte

@@ -1,40 +1,56 @@
 <!--
 @component
-DateField is a text field that allows users to enter a date or pick it from a calendar.
+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 } from 'bits-ui';
+  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 { dateField } from './theme';
+  import { slideMonth } from './calendarMotion.js';
+  import { dateCalendar, dateField, dateSegment } from './theme';
 
   let {
     value = $bindable(),
     label,
-    id,
+    id = useId(),
     required = false,
     disabled = false,
     error = false,
     variant = 'outlined',
     supportingText,
     name,
+    locale,
+    weekStartsOn,
     leadingIconProps
-  }: DateFieldProps & { leadingIconProps?: any } = $props();
+  }: DateFieldProps = $props();
 
   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
-  weekStartsOn={1}
+  bind:placeholder={() => placeholder as DateValue, setPlaceholder}
+  {weekStartsOn}
   {required}
   {disabled}
-  locale="ru"
-  weekdayFormat="short"
+  {locale}
+  weekdayFormat="narrow"
   fixedWeeks
 >
   <div class="relative w-full">
@@ -47,45 +63,34 @@ DateField is a text field that allows users to enter a date or pick it from a ca
         <DatePicker.Input class={cls.input()} {name} id={id ?? undefined}>
           {#snippet children({ segments })}
             <div class={cls.segments()}>
-              <div class="flex items-center justify-between">
-                <div class="flex">
-                  {#each segments as { part, value }}
-                    {#if part === 'literal'}
-                      <DatePicker.Segment
-                        {part}
-                        class="text-md-sys-color-on-surface-variant px-0.5 select-none first:pl-0"
-                      >
-                        {value}
-                      </DatePicker.Segment>
-                    {:else}
-                      <DatePicker.Segment
-                        {part}
-                        class="text-md-sys-color-on-surface hover:bg-md-sys-color-on-surface/8 focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary
-											   aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant cursor-default
-											   rounded-xs
-											   px-1
-											   py-0.5
-											   transition-colors
-											   duration-100 select-none focus:outline-2
-											   focus-visible:ring-0! focus-visible:ring-offset-0!"
-                      >
-                        {value}
-                      </DatePicker.Segment>
-                    {/if}
-                  {/each}
-                </div>
+              <div class="flex">
+                {#each segments as { part, value: segment }}
+                  <DatePicker.Segment
+                    {part}
+                    class={dateSegment({ part: part === 'literal' ? 'literal' : 'value' })}
+                  >
+                    {segment}
+                  </DatePicker.Segment>
+                {/each}
               </div>
             </div>
           {/snippet}
         </DatePicker.Input>
 
-        <label class={cls.label()} for={id}>
+        <DatePicker.Label class={cls.label()}>
           {label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true">*</span>{/if}
-        </label>
+        </DatePicker.Label>
       </div>
 
-      <DatePicker.Trigger class={cls.trailingIcon({ class: 'flex items-center justify-center' })}>
-        <Icon name="calendar_month" />
+      <DatePicker.Trigger>
+        {#snippet child({ props })}
+          <ButtonIcon
+            {...props}
+            {disabled}
+            class={cls.trailingIcon()}
+            iconProps={{ name: 'calendar_month' }}
+          />
+        {/snippet}
       </DatePicker.Trigger>
 
       {#if variant === 'outlined'}
@@ -103,62 +108,64 @@ DateField is a text field that allows users to enter a date or pick it from a ca
       </div>
     {/if}
   </div>
+
   <DatePicker.Portal>
-    <DatePicker.Content sideOffset={6} class="z-[100]">
-      <DatePicker.Calendar
-        class="bg-md-sys-color-surface-container-high shadow-elevation-3 h-104 w-90 rounded-lg p-6"
-      >
-        {#snippet children({ months, weekdays })}
-          <DatePicker.Header
-            class="text-md-sys-color-on-surface-variant z-10 flex w-full items-center justify-between pb-7.5"
-          >
-            <DatePicker.PrevButton>
-              <ButtonIcon type="button" iconProps={{ name: 'chevron_left' }} />
-            </DatePicker.PrevButton>
-            <DatePicker.Heading class="md-sys-typescale-label-large" />
-            <DatePicker.NextButton>
-              <ButtonIcon type="button" iconProps={{ name: 'chevron_right' }} />
-            </DatePicker.NextButton>
-          </DatePicker.Header>
+    <DatePicker.Content sideOffset={4} align="start">
+      {#snippet child({ wrapperProps, props, open })}
+        <div {...wrapperProps}>
+          <div {...props} {@attach presence(() => open, enterExit.scale)}>
+            <DatePicker.Calendar class={calendar.surface()}>
+              {#snippet children({ months, weekdays })}
+                <DatePicker.Header class={calendar.header()}>
+                  <DatePicker.Heading class={calendar.heading()} />
+                  <div class={calendar.nav()}>
+                    <DatePicker.PrevButton>
+                      {#snippet child({ props })}
+                        <ButtonIcon {...props} iconProps={{ name: 'chevron_left' }} />
+                      {/snippet}
+                    </DatePicker.PrevButton>
+                    <DatePicker.NextButton>
+                      {#snippet child({ props })}
+                        <ButtonIcon {...props} iconProps={{ name: 'chevron_right' }} />
+                      {/snippet}
+                    </DatePicker.NextButton>
+                  </div>
+                </DatePicker.Header>
 
-          {#each months as month}
-            <DatePicker.Grid class="w-full border-collapse select-none">
-              <DatePicker.GridHead>
-                <DatePicker.GridRow class="flex w-full justify-between">
-                  {#each weekdays as day}
-                    <DatePicker.HeadCell
-                      class="md-sys-typescale-label-large text-md-sys-color-on-surface-variant size-10"
-                    >
-                      {day}
-                    </DatePicker.HeadCell>
+                <div bind:this={grids}>
+                  {#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)}
+                          <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}
-                </DatePicker.GridRow>
-              </DatePicker.GridHead>
-              <DatePicker.GridBody>
-                {#each month.weeks as weekDates}
-                  <DatePicker.GridRow class="flex w-full justify-between">
-                    {#each weekDates as date}
-                      <DatePicker.Cell
-                        {date}
-                        month={month.value}
-                        class="md-sys-typescale-body-large text-center"
-                      >
-                        <DatePicker.Day
-                          class="group data-disabled:text-md-sys-color-on-surface/38 data-selected:bg-md-sys-color-primary data-selected:text-md-sys-color-on-primary data-unavailable:text-md-sys-color-on-surface/38 relative flex size-10 items-center justify-center rounded-full bg-transparent p-0 data-disabled:cursor-not-allowed data-outside-month:pointer-events-none data-unavailable:line-through"
-                        >
-                          <Layer />
-
-                          {date.day}
-                        </DatePicker.Day>
-                      </DatePicker.Cell>
-                    {/each}
-                  </DatePicker.GridRow>
-                {/each}
-              </DatePicker.GridBody>
-            </DatePicker.Grid>
-          {/each}
-        {/snippet}
-      </DatePicker.Calendar>
+                </div>
+              {/snippet}
+            </DatePicker.Calendar>
+          </div>
+        </div>
+      {/snippet}
     </DatePicker.Content>
   </DatePicker.Portal>
 </DatePicker.Root>

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

@@ -1,12 +1,11 @@
 import type { DateFieldProps } from './types';
-type $$ComponentProps = DateFieldProps & {
-    leadingIconProps?: any;
-};
 /**
- * DateField is a text field that allows users to enter a date or pick it from a calendar.
+ * 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<$$ComponentProps, {}, "value">;
+declare const DateField: import("svelte").Component<DateFieldProps, {}, "value">;
 type DateField = ReturnType<typeof DateField>;
 export default DateField;