@noxlovette/material 0.4.8 → 0.5.0

package/dist/components/containers/popover/Popover.svelte

@@ -5,11 +5,11 @@ Popovers display rich content in a non-modal overlay anchored to a trigger eleme
 @see https://m3.material.io/components/dialogs/overview (non-modal surface variant)
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { Popover } from 'bits-ui';
   import clsx from 'clsx';
   import { popover } from './theme.js';
   import type { PopoverProps } from './types.js';
-  import { enterExit, easeEmphasizedDecel, easeEmphasizedAccel } from '../../../animation/index.js';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import Title from '../../typography/title/Title.svelte';
   let {
@@ -35,49 +35,38 @@ Popovers display rich content in a non-modal overlay anchored to a trigger eleme
   </Popover.Trigger>
 
   <Popover.Portal>
-    <Popover.Content forceMount {side} {align} {sideOffset}>
+    <Popover.Content {side} {align} {sideOffset}>
       {#snippet child({ wrapperProps, props, open: isOpen })}
-        {#if isOpen}
-          <div {...wrapperProps} class={wrapperProps.class as any}>
-            <div
-              {...props}
-              class={base({ class: clsx(className, props.class as any) })}
-              in:enterExit={{
-                duration: 200,
-                easing: easeEmphasizedDecel,
-                mode: 'scale'
-              }}
-              out:enterExit={{
-                duration: 150,
-                easing: easeEmphasizedAccel,
-                mode: 'scale'
-              }}
-            >
-              {#if title || showClose}
-                <div class={header()}>
-                  {#if title}
-                    <Title class={titleCls()}>{title}</Title>
-                  {/if}
-                  {#if showClose}
-                    <Popover.Close>
-                      {#snippet child({ props: closeProps })}
-                        <div class={close()}>
-                          <ButtonIcon
-                            {...closeProps}
-                            iconProps={{ name: 'close' }}
-                            variant="text"
-                            size="sm"
-                          />
-                        </div>
-                      {/snippet}
-                    </Popover.Close>
-                  {/if}
-                </div>
-              {/if}
-              {@render children()}
-            </div>
+        <div {...wrapperProps} class={wrapperProps.class as any}>
+          <div
+            {...props}
+            class={base({ class: clsx(className, props.class as any) })}
+            {@attach presence(() => isOpen, enterExit.scale)}
+          >
+            {#if title || showClose}
+              <div class={header()}>
+                {#if title}
+                  <Title class={titleCls()}>{title}</Title>
+                {/if}
+                {#if showClose}
+                  <Popover.Close>
+                    {#snippet child({ props: closeProps })}
+                      <div class={close()}>
+                        <ButtonIcon
+                          {...closeProps}
+                          iconProps={{ name: 'close' }}
+                          variant="text"
+                          size="sm"
+                        />
+                      </div>
+                    {/snippet}
+                  </Popover.Close>
+                {/if}
+              </div>
+            {/if}
+            {@render children()}
           </div>
-        {/if}
+        </div>
       {/snippet}
     </Popover.Content>
   </Popover.Portal>

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

@@ -3,21 +3,21 @@ export type PopoverVariants = VariantProps<typeof popover>;
 export declare const popover: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -29,11 +29,11 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/components/containers/scroll-area/theme.js

@@ -3,8 +3,8 @@ export const scrollArea = tv({
     slots: {
         root: 'relative overflow-hidden',
         viewport: 'size-full rounded-[inherit]',
-        scrollbar: 'flex touch-none select-none transition-colors duration-150 ease-out',
-        thumb: 'relative flex-1 rounded-full bg-md-sys-color-outline-variant hover:bg-md-sys-color-secondary active:bg-md-sys-color-secondary transition-colors duration-150',
+        scrollbar: 'flex touch-none select-none transition-colors md-sys-motion-fast-effects',
+        thumb: 'relative flex-1 rounded-full bg-md-sys-color-outline-variant hover:bg-md-sys-color-secondary active:bg-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
         corner: 'bg-md-sys-color-surface-container-highest'
     },
     variants: {

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

@@ -1,9 +1,6 @@
 <!--
-  SideSheet has no `open` prop of its own — mounting it calls the native <dialog>'s showModal()
-  immediately, so visibility is controlled by conditionally rendering the component
-  ({#if open}<SideSheet ...>{/if}), same as BottomSheet. `close` is a required callback the
-  sheet invokes on Esc or backdrop click — the consumer is expected to flip its own `open` flag
-  to false in response.
+  SideSheet is controlled with `bind:open`: it dismisses itself (close button, Esc, backdrop
+  click) by setting `open` to false, and stays mounted until its exit animation finishes.
 -->
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -31,16 +28,14 @@
   {#snippet template(args)}
     <div class="p-6">
       <Button onclick={() => (playgroundOpen = true)}>Show side sheet</Button>
-      {#if playgroundOpen}
-        <SideSheet headline={args.headline} close={() => (playgroundOpen = false)}>
-          <div class="flex flex-col gap-3 px-6 pb-6">
-            <Body class="text-md-sys-color-on-surface-variant">
-              Supplementary content and actions, anchored to the edge of the screen while the main
-              content stays visible.
-            </Body>
-          </div>
-        </SideSheet>
-      {/if}
+      <SideSheet headline={args.headline} bind:open={playgroundOpen}>
+        <div class="flex flex-col gap-3 px-6 pb-6">
+          <Body class="text-md-sys-color-on-surface-variant">
+            Supplementary content and actions, anchored to the edge of the screen while the main
+            content stays visible.
+          </Body>
+        </div>
+      </SideSheet>
     </div>
   {/snippet}
 </Story>

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,44 @@
 <!--
 @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.
 
 @see https://m3.material.io/components/date-pickers/guidelines
 -->
 <script lang="ts">
-  import { DatePicker } from 'bits-ui';
+  import { DatePicker, useId } from 'bits-ui';
+  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 { 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();
 </script>
 
 <DatePicker.Root
   bind:value
-  weekStartsOn={1}
+  {weekStartsOn}
   {required}
   {disabled}
-  locale="ru"
-  weekdayFormat="short"
+  {locale}
+  weekdayFormat="narrow"
   fixedWeeks
 >
   <div class="relative w-full">
@@ -47,45 +51,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 +96,62 @@ 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>
 
-          {#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>
-                  {/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 />
+  <DatePicker.Portal>
+    <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>
 
-                          {date.day}
-                        </DatePicker.Day>
-                      </DatePicker.Cell>
-                    {/each}
-                  </DatePicker.GridRow>
+                {#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.GridBody>
-            </DatePicker.Grid>
-          {/each}
-        {/snippet}
-      </DatePicker.Calendar>
+              {/snippet}
+            </DatePicker.Calendar>
+          </div>
+        </div>
+      {/snippet}
     </DatePicker.Content>
   </DatePicker.Portal>
 </DatePicker.Root>

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

@@ -1,12 +1,9 @@
 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.
  *
  * @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;