@noxlovette/material 0.5.0 → 0.5.1

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)}
@@ -66,6 +77,7 @@ segment inputs and a shared docked calendar.
 
 <DateRangePicker.Root
   bind:value
+  bind:placeholder={() => placeholder as DateValue, setPlaceholder}
   {weekStartsOn}
   {required}
   {disabled}
@@ -129,37 +141,39 @@ segment inputs and a shared docked calendar.
                   </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.js

@@ -264,14 +264,18 @@ export const dateCalendar = tv({
     `,
         weekday: `
       flex size-12 items-center justify-center
-      md-sys-typescale-body-large text-md-sys-color-on-surface
+      md-sys-typescale-body-large font-normal text-md-sys-color-on-surface
     `,
+        /* The range band runs behind every day in the range. On the endpoints it covers only the inner
+           half, so it meets the selected circle instead of sticking out past it. A one-day range has
+           no band. */
         cell: `
       relative flex size-12 items-center justify-center p-0
       before:absolute before:inset-x-0 before:h-10 before:bg-md-sys-color-secondary-container
       before:opacity-0 before:transition-opacity before:md-sys-motion-fast-effects
       data-range-middle:before:opacity-100
       data-highlighted:before:opacity-100
+      data-range-start:before:opacity-100 data-range-end:before:opacity-100
       data-range-start:before:left-1/2 data-range-end:before:right-1/2
       data-range-start:data-range-end:before:opacity-0
       data-outside-month:before:opacity-0

package/dist/components/forms/textfield/theme.d.ts

@@ -4,6 +4,7 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: {
             base: string;
+            input: string;
             label: string;
         };
         outlined: {
@@ -45,6 +46,7 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: {
             base: string;
+            input: string;
             label: string;
         };
         outlined: {
@@ -86,6 +88,7 @@ export declare const textfield: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: {
             base: string;
+            input: string;
             label: string;
         };
         outlined: {

package/dist/components/forms/textfield/theme.js

@@ -10,7 +10,7 @@ export const textfield = tv({
       relative flex-1 self-stretch flex items-center px-4
     `,
         input: `
-      peer w-full pt-4 bg-transparent outline-none
+      peer w-full bg-transparent outline-none
       md-sys-typescale-body-large text-md-sys-color-on-surface
       disabled:text-md-sys-color-on-surface/38
     `,
@@ -78,6 +78,9 @@ export const textfield = tv({
           disabled:bg-md-sys-color-on-surface/4
           disabled:after:bg-md-sys-color-on-surface/12
         `,
+                /* Room for the label floated inside the container. Outlined labels float into the border
+                   notch instead, so their input stays vertically centered. */
+                input: 'pt-4',
                 label: `
           peer-focus:top-2 peer-focus:md-sys-typescale-body-small peer-focus:translate-y-0
           peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:md-sys-typescale-body-small peer-not-placeholder-shown:translate-y-0

package/dist/components/nav/tabs/TabHolder.svelte

@@ -4,15 +4,18 @@ Material 3 Tabs container.
 
 Wraps bits-ui Tabs.Root + Tabs.List and renders a sliding active indicator.
 Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
+Switching panels runs the M3 lateral transition: the new panel pushes the old one out in the
+direction of the selected tab.
 
 @see https://m3.material.io/components/tabs/overview
 -->
 <script lang="ts">
+  import { lateral } from '../../../animation/index.js';
   import { tabHolder } from './theme.js';
   import type { TabHolderProps } from './types.js';
   import Tab from './Tab.svelte';
   import { Tabs } from 'bits-ui';
-  import type { Snippet } from 'svelte';
+  import { tick, type Snippet } from 'svelte';
 
   let {
     items,
@@ -27,9 +30,28 @@ Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
   const idx = $derived(items.findIndex((i) => i.value === value));
   const count = $derived(items.length);
   const { base, bar } = $derived(tabHolder({ rounded }));
+
+  let panels = $state<HTMLElement>();
+
+  /**
+   * Tabs are peers, so switching panels is the M3 lateral transition: the new panel pushes the
+   * old one out toward the side of the newly selected tab. Navigation (href) tabs have no panels
+   * here — the route change is the app's to animate.
+   * https://m3.material.io/styles/motion/transitions/transition-patterns#lateral
+   */
+  const select = (next: string) => {
+    const from = idx;
+    const to = items.findIndex((i) => i.value === next);
+    const update = async () => {
+      value = next;
+      await tick();
+    };
+    if (!children || !panels || from === -1 || to === -1 || from === to) return void update();
+    lateral(update, { target: panels, direction: to > from ? 'forward' : 'backward' });
+  };
 </script>
 
-<Tabs.Root bind:value {onValueChange} {activationMode}>
+<Tabs.Root bind:value={() => value, select} {onValueChange} {activationMode}>
   <Tabs.List class={base()}>
     {#each items as item (item)}
       <Tab {...item} {variant} />
@@ -41,5 +63,9 @@ Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
     ></div>
   </Tabs.List>
 
-  {@render children?.()}
+  {#if children}
+    <div bind:this={panels}>
+      {@render children()}
+    </div>
+  {/if}
 </Tabs.Root>

package/dist/components/nav/tabs/TabHolder.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { TabHolderProps } from './types.js';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = TabHolderProps & {
     children?: Snippet;
 };
@@ -8,6 +8,8 @@ type $$ComponentProps = TabHolderProps & {
  *
  * Wraps bits-ui Tabs.Root + Tabs.List and renders a sliding active indicator.
  * Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
+ * Switching panels runs the M3 lateral transition: the new panel pushes the old one out in the
+ * direction of the selected tab.
  *
  * @see https://m3.material.io/components/tabs/overview
  */

package/dist/components/time/TimeField.svelte

@@ -11,9 +11,11 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
   import Textfield from '../forms/textfield/Textfield.svelte';
   import TimepickerInput from './TimepickerInput.svelte';
   import { Popover } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { TimepickerLabels } from './types.js';
 
   let {
-    label = 'Время',
+    label = 'Time',
     value = $bindable(),
     required = false,
     disabled = false,
@@ -21,6 +23,8 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
     datePickerTitle = 'Pick date',
     name,
     leadingIconProps,
+    supportingText,
+    pickerLabels,
     ...restProps
   }: {
     /** The label for the text field. */
@@ -39,6 +43,10 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
     datePickerTitle?: string;
     /** Props for the leading icon. */
     leadingIconProps?: any;
+    /** Supporting text under the field. */
+    supportingText?: Snippet;
+    /** Headline, input and button strings for the picker overlay (English by default). */
+    pickerLabels?: TimepickerLabels;
   } & HTMLInputAttributes = $props();
 
   const id = $props.id();
@@ -58,14 +66,11 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
       {error}
       {leadingIconProps}
       class="pointer-events-none"
-      trailingIconProps={{ name: 'timer' }}
+      trailingIconProps={{ name: 'schedule' }}
       trailingOnClick={() => !disabled && (picker = !picker)}
+      {supportingText}
       {...restProps as any}
-    >
-      {#snippet supportingText()}
-        ЧЧ-ММ
-      {/snippet}
-    </Textfield>
+    />
 
     <Popover.Trigger {disabled}>
       {#snippet child({ props })}
@@ -100,6 +105,7 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
             {@attach presence(() => open, enterExit.scale)}
           >
             <TimepickerInput
+              {...pickerLabels}
               time={value}
               close={() => (picker = false)}
               setTime={(t) => (value = t)}

package/dist/components/time/TimeField.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { TimepickerLabels } from './types.js';
 type $$ComponentProps = {
     /** The label for the text field. */
     label?: string;
@@ -16,6 +18,10 @@ type $$ComponentProps = {
     datePickerTitle?: string;
     /** Props for the leading icon. */
     leadingIconProps?: any;
+    /** Supporting text under the field. */
+    supportingText?: Snippet;
+    /** Headline, input and button strings for the picker overlay (English by default). */
+    pickerLabels?: TimepickerLabels;
 } & HTMLInputAttributes;
 /**
  * TimeField component provides a text input that opens a Timepicker overlay when interacted with.

package/dist/components/time/TimepickerInput.svelte

@@ -15,7 +15,11 @@ It follows the Material 3 design for time input pickers.
   import { ButtonIcon } from '../buttons/index.js';
 
   const {
-    label = 'Введите время',
+    label = 'Enter time',
+    hourLabel = 'Hour',
+    minuteLabel = 'Minute',
+    cancelText = 'Cancel',
+    confirmText = 'OK',
     time = '09:41',
     close,
     setTime,
@@ -48,7 +52,7 @@ It follows the Material 3 design for time input pickers.
                   {value}
                 </TimeField.Segment>
                 <p class={cls.timeInputSupportingText()}>
-                  {part === 'hour' ? 'Часы' : 'Минуты'}
+                  {part === 'hour' ? hourLabel : minuteLabel}
                 </p>
               </div>
             {/if}
@@ -61,7 +65,7 @@ It follows the Material 3 design for time input pickers.
   <div class={cls.buttonDiv()}>
     <ButtonIcon type="button" iconProps={{ name: 'schedule' }} />
     <div>
-      <Button variant="text" type="button" onclick={() => close()}>Отмена</Button>
+      <Button variant="text" type="button" onclick={() => close()}>{cancelText}</Button>
       <Button
         variant="text"
         type="button"
@@ -69,7 +73,7 @@ It follows the Material 3 design for time input pickers.
           setTime(output);
           close();
         }}
-        data-cy="calendar-time-confirm">Готово</Button
+        data-cy="calendar-time-confirm">{confirmText}</Button
       >
     </div>
   </div>

package/dist/components/time/types.d.ts

@@ -9,9 +9,17 @@ import type { TimepickerVariants } from './theme.js';
 export type TimepickerProps = TimepickerVariants & HTMLAttributes<HTMLInputElement> & {
     /**
      * The label displayed at the top of the timepicker.
-     * @default 'Введите время'
+     * @default 'Enter time'
      */
     label?: string;
+    /** Supporting text under the hour input. @default 'Hour' */
+    hourLabel?: string;
+    /** Supporting text under the minute input. @default 'Minute' */
+    minuteLabel?: string;
+    /** Label of the dismiss button. @default 'Cancel' */
+    cancelText?: string;
+    /** Label of the confirm button. @default 'OK' */
+    confirmText?: string;
     /**
      * The current time value in HH:MM format.
      * @default '09:41'
@@ -32,3 +40,5 @@ export type TimepickerProps = TimepickerVariants & HTMLAttributes<HTMLInputEleme
      */
     setTime: (time: string) => void;
 };
+/** The TimepickerInput strings a TimeField forwards to its picker overlay. */
+export type TimepickerLabels = Partial<Pick<TimepickerProps, 'label' | 'hourLabel' | 'minuteLabel' | 'cancelText' | 'confirmText'>>;

package/dist/utils/icon/loadingShapes.js

@@ -1,15 +1,16 @@
+import { pathAnimatableSmallFourSidedCookie, pathAnimatableSmallNineSidedCookie, pathAnimatableSmallOval, pathAnimatableSmallPentagon, pathAnimatableSmallPill, pathAnimatableSmallSoftBurst, pathAnimatableSmallSunny } from '../../animation/shapesAnimatableSmall.js';
 /*
-  The seven shapes the M3 loading indicator morphs through, in a 48 × 48 viewBox. Every path has
-  the same command structure (120 relative points), so Motion's `mix` can interpolate between any
-  two.
+  The seven shapes the M3 loading indicator morphs through, in a 48 × 48 viewBox. They come from the
+  small animatable set, so every path has the same command structure (120 relative points) and
+  Motion's `mix` can interpolate between any two.
   https://m3.material.io/components/loading-indicator/specs
 */
 export const LOADING_SHAPES = [
-    'm37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z',
-    'm39.9 24.0 -0.3 0.8 -0.4 0.8 -0.3 0.8 -0.2 1.5 0.1 0.9 0.1 0.9 -0.1 0.9 -0.2 0.8 -0.3 0.8 -0.2 0.4 -0.3 0.4 -0.5 0.7 -0.7 0.5 -0.8 0.4 -0.8 0.4 -0.8 0.4 -1.2 1.0 -0.5 0.7 -0.5 0.8 -0.6 0.6 -0.6 0.6 -0.8 0.4 -0.4 0.2 -0.5 0.1 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.9 -0.3 -0.8 -0.1 -1.6 -0.1 -0.8 0.2 -0.9 0.3 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.5 -0.1 -0.4 -0.2 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.5 -0.8 -0.5 -0.7 -1.2 -1.0 -0.7 -0.4 -0.9 -0.4 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.3 -0.4 -0.2 -0.4 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.9 0.1 -0.9 -0.2 -1.5 -0.3 -0.8 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.7 -0.0 -0.2 0.2 -0.8 0.4 -0.8 0.5 -0.7 0.6 -0.6 0.7 -0.7 0.5 -0.6 0.6 -1.3 0.3 -0.9 0.2 -0.8 0.3 -0.8 0.5 -0.7 0.5 -0.6 0.2 -0.2 0.5 -0.4 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.9 -0.0 0.8 -0.1 1.4 -0.5 0.7 -0.4 0.7 -0.5 0.7 -0.5 0.8 -0.3 0.8 -0.2 0.9 -0.1 0.0 -0.0 0.8 0.1 0.9 0.2 0.8 0.3 0.7 0.5 0.7 0.5 0.7 0.4 1.4 0.5 0.8 0.1 0.9 0.0 0.9 0.2 0.8 0.3 0.7 0.4 0.5 0.4 0.2 0.1 0.5 0.7 0.5 0.7 0.3 0.8 0.2 0.8 0.3 0.9 0.6 1.3 0.5 0.6 0.7 0.7 0.6 0.6 0.5 0.7 0.4 0.8 0.2 0.8 0.0 0.2 0.1 0.7 -0.1 0.9 z',
-    'm38.9 24.2 -0.2 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.3 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.4 1.0 -0.4 0.8 -0.4 0.8 -0.6 0.6 -0.7 0.5 0.0 0.1 -0.7 0.4 -0.8 0.3 -0.8 0.3 -0.9 0.1 -1.1 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -1.1 -0.0 -0.9 -0.1 -0.8 -0.3 -0.8 -0.3 -0.7 -0.5 -0.1 0.0 -0.6 -0.5 -0.6 -0.7 -0.4 -0.7 -0.4 -0.8 -0.4 -1.0 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -0.8 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -1.1 -0.2 -0.9 -0.0 -0.8 0.0 -0.9 0.2 -0.8 0.1 -0.1 0.3 -0.7 0.4 -0.8 0.6 -0.6 0.6 -0.6 0.9 -0.7 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.9 -0.7 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.8 -0.0 0.1 -0.0 0.9 0.0 0.8 0.2 0.8 0.3 0.8 0.4 0.9 0.7 0.6 0.5 0.7 0.4 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.4 0.6 0.5 0.9 0.7 0.6 0.6 0.6 0.7 0.4 0.7 0.3 0.7 0.0 0.1 0.2 0.8 0.1 0.9 -0.0 0.9 -0.2 0.8 -0.3 1.1 z',
-    'm39.6 24.0 -0.1 0.8 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.3 0.8 -0.4 0.7 -0.4 0.7 -0.5 0.6 -0.4 0.6 -0.6 0.6 -0.6 0.6 -0.4 0.4 -0.6 0.6 -0.4 0.5 -0.9 0.8 -0.5 0.5 -0.6 0.6 -0.4 0.4 -0.7 0.7 -0.5 0.5 -0.6 0.4 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.7 0.3 -0.8 0.3 -0.8 0.3 -0.8 0.2 -0.8 0.1 -0.8 0.1 -0.8 0.1 -0.9 0.0 -0.8 -0.0 -0.9 -0.1 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.3 -0.8 -0.4 -0.8 -0.4 -0.7 -0.5 -0.7 -0.5 -0.7 -0.5 -0.6 -0.6 -0.1 -0.1 -0.5 -0.6 -0.6 -0.7 -0.5 -0.7 -0.5 -0.8 -0.4 -0.7 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.1 -0.9 0.0 -0.8 0.0 -0.9 0.1 -0.8 0.1 -0.8 0.1 -0.8 0.3 -0.8 0.2 -0.8 0.3 -0.7 0.4 -0.8 0.3 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.5 0.6 -0.6 0.6 -0.7 0.4 -0.4 0.6 -0.6 0.5 -0.4 0.8 -0.9 0.5 -0.5 0.6 -0.6 0.4 -0.4 0.7 -0.7 0.5 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.4 0.7 -0.4 0.7 -0.3 0.8 -0.3 0.8 -0.3 0.8 -0.2 0.8 -0.1 0.8 -0.1 0.8 -0.1 0.9 -0.0 0.8 0.0 0.9 0.1 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.4 0.8 0.3 0.8 0.4 0.7 0.5 0.7 0.5 0.7 0.5 0.6 0.7 0.1 -0.0 0.5 0.6 0.6 0.7 0.5 0.7 0.5 0.8 0.4 0.7 0.3 0.8 0.4 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.1 0.9 0.0 0.8 -0.0 0.8 -0.1 0.9 z',
-    'm40.0 24.0 -0.1 0.8 -0.5 0.8 -0.6 0.8 -0.6 0.6 -0.6 0.7 -0.5 0.6 -0.7 1.2 -0.1 0.7 -0.1 0.8 -0.0 0.9 -0.1 0.9 -0.1 0.9 -0.2 0.9 -0.5 0.7 -0.0 0.0 -0.7 0.5 -0.9 0.2 -0.9 0.1 -0.9 0.1 -0.8 0.0 -0.8 0.1 -0.8 0.1 -1.2 0.7 -0.6 0.5 -0.7 0.6 -0.6 0.6 -0.8 0.6 -0.8 0.5 -0.8 0.1 -0.0 0.0 -0.8 -0.1 -0.8 -0.5 -0.8 -0.6 -0.6 -0.6 -0.7 -0.6 -0.6 -0.5 -1.2 -0.7 -0.7 -0.1 -0.8 -0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.2 -0.7 -0.5 -0.0 0.0 -0.5 -0.7 -0.2 -0.9 -0.1 -0.9 -0.1 -0.9 -0.0 -0.8 -0.1 -0.8 -0.1 -0.8 -0.7 -1.2 -0.5 -0.6 -0.6 -0.7 -0.6 -0.6 -0.6 -0.8 -0.5 -0.8 -0.1 -0.8 -0.0 -0.0 0.1 -0.8 0.5 -0.8 0.6 -0.8 0.6 -0.6 0.6 -0.7 0.5 -0.6 0.7 -1.2 0.1 -0.7 0.1 -0.8 0.0 -0.9 0.1 -0.9 0.1 -0.9 0.2 -0.9 0.5 -0.7 -0.0 -0.0 0.7 -0.5 0.9 -0.2 0.9 -0.1 0.9 -0.1 0.8 -0.0 0.8 -0.1 0.8 -0.1 1.2 -0.7 0.6 -0.5 0.7 -0.6 0.6 -0.6 0.8 -0.6 0.8 -0.5 0.8 -0.1 0.0 -0.0 0.8 0.1 0.8 0.5 0.8 0.6 0.6 0.6 0.7 0.6 0.6 0.5 1.2 0.7 0.7 0.1 0.8 0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.2 0.7 0.5 0.0 -0.0 0.5 0.7 0.2 0.9 0.1 0.9 0.1 0.9 0.0 0.8 0.1 0.8 0.1 0.8 0.7 1.2 0.5 0.6 0.6 0.7 0.6 0.6 0.6 0.8 0.5 0.8 0.1 0.8 z',
-    'm36.9 24.6 0.1 0.7 0.2 0.8 0.2 0.7 0.4 0.9 0.4 0.9 0.2 0.9 0.1 1.0 0.1 0.9 -0.1 0.9 -0.3 0.9 -0.3 0.9 -0.4 0.8 -0.5 0.8 -0.6 0.6 -0.1 0.1 -0.6 0.6 -0.8 0.5 -0.8 0.4 -0.9 0.3 -0.9 0.3 -0.9 0.1 -0.9 -0.1 -1.0 -0.1 -0.9 -0.2 -0.9 -0.4 -0.9 -0.4 -0.7 -0.2 -0.8 -0.2 -0.7 -0.1 -1.2 0.0 -0.7 0.1 -0.8 0.2 -0.7 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -1.0 0.1 -0.9 0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.5 -0.6 -0.6 -0.1 -0.1 -0.6 -0.6 -0.5 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 0.1 -0.9 0.1 -1.0 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -0.7 0.2 -0.8 0.1 -0.7 -0.0 -1.2 -0.1 -0.7 -0.2 -0.8 -0.2 -0.7 -0.4 -0.9 -0.4 -0.9 -0.2 -0.9 -0.1 -1.0 -0.1 -0.9 0.1 -0.9 0.3 -0.9 0.3 -0.9 0.4 -0.8 0.5 -0.8 0.6 -0.6 0.1 -0.1 0.6 -0.6 0.8 -0.5 0.8 -0.4 0.9 -0.3 0.9 -0.3 0.9 -0.1 0.9 0.1 1.0 0.1 0.9 0.2 0.9 0.4 0.9 0.4 0.7 0.2 0.8 0.2 0.7 0.1 1.2 -0.0 0.7 -0.1 0.8 -0.2 0.7 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 1.0 -0.1 0.9 -0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.5 0.6 0.6 0.1 0.1 0.6 0.6 0.5 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 -0.1 0.9 -0.1 1.0 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 0.7 -0.2 0.8 -0.1 0.7 z',
-    'm37.7 24.0 -0.3 0.7 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.6 -0.3 0.5 -0.4 0.6 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.3 0.4 -0.5 0.4 -0.8 0.8 -0.4 0.5 -0.4 0.3 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.6 0.4 -0.5 0.3 -0.6 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.7 0.3 -0.7 0.2 -0.7 0.3 -0.9 0.3 -0.8 0.2 -0.8 0.1 -0.9 0.1 -1.0 0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.6 -0.7 -0.6 -0.0 0.0 -0.6 -0.7 -0.6 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 -0.1 -0.9 0.0 -0.9 0.1 -1.0 0.1 -0.9 0.1 -0.8 0.2 -0.8 0.3 -0.9 0.3 -0.7 0.2 -0.7 0.3 -0.7 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.6 0.3 -0.5 0.4 -0.6 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.3 -0.4 0.5 -0.4 0.8 -0.8 0.4 -0.5 0.4 -0.3 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.6 -0.4 0.5 -0.3 0.6 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.7 -0.3 0.7 -0.2 0.7 -0.3 0.9 -0.3 0.8 -0.2 0.8 -0.1 0.9 -0.1 1.0 -0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.6 0.7 0.6 -0.0 0.0 0.6 0.7 0.6 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 0.1 0.9 -0.0 0.9 -0.1 1.0 -0.1 0.9 -0.1 0.8 -0.2 0.8 -0.3 0.9 -0.3 0.7 z'
+    pathAnimatableSmallSoftBurst,
+    pathAnimatableSmallNineSidedCookie,
+    pathAnimatableSmallPentagon,
+    pathAnimatableSmallPill,
+    pathAnimatableSmallSunny,
+    pathAnimatableSmallFourSidedCookie,
+    pathAnimatableSmallOval
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [