@noxlovette/material 0.4.8 → 0.5.1

package/dist/components/date/theme.js

@@ -18,9 +18,8 @@ export const dateRangeField = tv({
       group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
     `,
         trailingIcon: `
-      text-md-sys-color-on-surface-variant size-6
-      group-focus-within:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error mr-3 text-[24px]
+      mr-1 shrink-0 text-md-sys-color-on-surface-variant
+      group-data-[invalid]:text-md-sys-color-error
     `,
         separator: `
 			text-md-sys-color-on-surface-variant select-none shrink-0
@@ -30,7 +29,7 @@ export const dateRangeField = tv({
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
 			pointer-events-none
-			transition-[top,font-size,line-height,color,transform] duration-200 ease-in-out
+			transition-[top,font-size,line-height,color,transform] md-sys-motion-fast-spatial
 			group-focus-within:text-md-sys-color-primary
 			z-20
 		`,
@@ -38,7 +37,7 @@ export const dateRangeField = tv({
 			ml-0.5
 			text-md-sys-color-error
 			group-focus-within:text-md-sys-color-primary
-			transition-colors duration-200
+			transition-colors md-sys-motion-effects
 		`,
         supportingText: `
 			px-4 pt-1 flex justify-between
@@ -54,7 +53,7 @@ export const dateRangeField = tv({
           after:absolute after:bottom-0 after:left-0 after:right-0
           state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
           after:h-px after:bg-md-sys-color-on-surface-variant
-          after:transition-[height,background-color] after:duration-200
+          after:transition-[height,background-color] after:md-sys-motion-fast-spatial
           hover:after:bg-md-sys-color-on-surface
           focus-within:after:bg-md-sys-color-primary focus-within:after:h-[2px]
           disabled:bg-md-sys-color-on-surface/4
@@ -64,7 +63,7 @@ export const dateRangeField = tv({
             outlined: {
                 base: `
           rounded-xs border border-md-sys-color-outline
-          transition-colors duration-150
+          transition-colors md-sys-motion-fast-effects
           hover:border-md-sys-color-on-surface
           focus-within:border-2 focus-within:border-md-sys-color-primary
         `
@@ -128,16 +127,15 @@ export const dateField = tv({
       group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
     `,
         trailingIcon: `
-      text-md-sys-color-on-surface-variant size-6
-      group-focus-within:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error mr-3 text-[24px]
+      mr-1 shrink-0 text-md-sys-color-on-surface-variant
+      group-data-[invalid]:text-md-sys-color-error
     `,
         label: `
 			absolute left-4 top-1.5
 			md-sys-typescale-body-small
 			text-md-sys-color-on-surface-variant
 			pointer-events-none
-			transition-[top,font-size,line-height,color,transform] duration-200 ease-in-out
+			transition-[top,font-size,line-height,color,transform] md-sys-motion-fast-spatial
 			group-focus-within:text-md-sys-color-primary
 			z-20
 		`,
@@ -145,7 +143,7 @@ export const dateField = tv({
 			ml-0.5
 			text-md-sys-color-error
 			group-focus-within:text-md-sys-color-primary
-			transition-colors duration-200
+			transition-colors md-sys-motion-effects
 		`,
         supportingText: `
 			px-4 pt-1 flex justify-between
@@ -155,7 +153,7 @@ export const dateField = tv({
         fieldset: `
       absolute -top-[5px] left-0 right-0 bottom-0 m-0 px-2
       pointer-events-none rounded-xs border border-md-sys-color-outline
-      transition-colors duration-150
+      transition-colors md-sys-motion-fast-effects
 
       group-hover:border-md-sys-color-on-surface
       group-focus-within:border-2 group-focus-within:border-md-sys-color-primary
@@ -176,7 +174,7 @@ export const dateField = tv({
           after:absolute after:bottom-0 after:left-0 after:right-0
           state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
           after:h-px after:bg-md-sys-color-on-surface-variant
-          after:transition-[height,background-color] after:duration-200
+          after:transition-[height,background-color] after:md-sys-motion-fast-spatial
           hover:after:bg-md-sys-color-on-surface
           focus-within:after:bg-md-sys-color-primary focus-within:after:h-[2px]
           disabled:bg-md-sys-color-on-surface/4
@@ -216,3 +214,94 @@ export const dateField = tv({
         variant: 'outlined'
     }
 });
+/** Segments of the typed date (`DatePicker.Segment` / `DateRangePicker.Segment`). */
+export const dateSegment = tv({
+    base: `
+    rounded-xs px-0.5 py-0.5 select-none cursor-default outline-none
+    transition-colors md-sys-motion-fast-effects
+  `,
+    variants: {
+        part: {
+            literal: 'text-md-sys-color-on-surface-variant px-0',
+            value: `
+        text-md-sys-color-on-surface
+        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant
+        hover:bg-md-sys-color-on-surface/8
+        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container
+      `
+        }
+    },
+    defaultVariants: {
+        part: 'value'
+    }
+});
+/**
+ * Docked date picker surface, shared by DateField and DateRangeField.
+ * @see https://m3.material.io/components/date-pickers/specs#docked-date-picker
+ * 360dp wide = 12dp padding + 7 × 48dp targets; each day is a 40dp circle inside its target.
+ */
+export const dateCalendar = tv({
+    slots: {
+        surface: `
+      w-90 rounded-lg px-3 pb-3
+      bg-md-sys-color-surface-container-high shadow-elevation-3
+      text-md-sys-color-on-surface
+    `,
+        header: `
+      flex h-14 items-center justify-between pl-4 pr-1
+    `,
+        heading: `
+      md-sys-typescale-label-large text-md-sys-color-on-surface-variant
+    `,
+        nav: `
+      flex items-center text-md-sys-color-on-surface-variant
+    `,
+        grid: `
+      w-full border-collapse select-none
+    `,
+        row: `
+      flex w-full
+    `,
+        weekday: `
+      flex size-12 items-center justify-center
+      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
+    `,
+        day: `
+      relative flex size-10 items-center justify-center rounded-full
+      md-sys-typescale-body-large text-md-sys-color-on-surface
+      cursor-pointer outline-none
+      transition-colors md-sys-motion-fast-effects
+
+      focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-md-sys-color-secondary
+
+      data-today:border data-today:border-md-sys-color-primary data-today:text-md-sys-color-primary
+
+      data-range-middle:text-md-sys-color-on-secondary-container
+      data-highlighted:text-md-sys-color-on-secondary-container
+
+      data-selected:not-data-range-middle:border-transparent
+      data-selected:not-data-range-middle:bg-md-sys-color-primary
+      data-selected:not-data-range-middle:text-md-sys-color-on-primary
+
+      data-disabled:cursor-not-allowed data-disabled:text-md-sys-color-on-surface/38
+      data-unavailable:cursor-not-allowed data-unavailable:text-md-sys-color-on-surface/38
+      data-unavailable:line-through
+
+      data-outside-month:invisible
+    `
+    }
+});

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

@@ -1,3 +1,4 @@
+import type { IconProps } from '../../utils/index.js';
 import type { DateValue } from '@internationalized/date';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
@@ -37,6 +38,18 @@ export interface BaseDateProps extends HTMLAttributes<HTMLDivElement> {
      * @default 'outlined'
      */
     variant?: 'filled' | 'outlined';
+    /**
+     * BCP 47 locale for segment order, month names and weekday labels.
+     * @default 'en'
+     */
+    locale?: string;
+    /**
+     * First day of the week in the calendar, 0 = Sunday.
+     * @default 0
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Optional icon before the date segments. */
+    leadingIconProps?: IconProps;
 }
 export interface DateFieldProps extends BaseDateProps {
     /**

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

@@ -3,8 +3,8 @@ export const checkbox = tv({
     slots: {
         root: 'group inline-flex min-h-10 select-none items-start gap-3 text-md-sys-color-on-surface min-h-4.5 cursor-pointer',
         container: 'relative inline-flex size-[18px] shrink-0',
-        control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors duration-[var(--md-sys-motion-duration-fast)] ease-[var(--md-sys-motion-timing-function)]',
-        box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors duration-[var(--md-sys-motion-duration-fast)] ease-[var(--md-sys-motion-timing-function)]',
+        control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
+        box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',
         checkIcon: 'pointer-events-none absolute inset-0 m-auto size-3.5 text-md-sys-color-on-primary opacity-0 scale-75',
         indeterminateIcon: 'pointer-events-none absolute inset-0 m-auto block h-0.5 w-3 rounded-full bg-md-sys-color-on-primary opacity-0 scale-75',
         label: 'md-sys-typescale-body-large leading-5 text-md-sys-color-on-surface cursor-pointer'

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

@@ -3,12 +3,12 @@ export type CommandVariants = VariantProps<typeof command>;
 export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
             inputWrapper?: import("tailwind-variants").ClassValue;
             inputIcon?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
@@ -18,12 +18,12 @@ export declare const command: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
             inputWrapper?: import("tailwind-variants").ClassValue;
             inputIcon?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;
@@ -44,12 +44,12 @@ export declare const command: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            item?: import("tailwind-variants").ClassValue;
             input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
             inputWrapper?: import("tailwind-variants").ClassValue;
             inputIcon?: import("tailwind-variants").ClassValue;
             empty?: import("tailwind-variants").ClassValue;

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

@@ -9,7 +9,7 @@ export const command = tv({
         empty: 'py-6 text-center md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
         group: 'overflow-hidden p-1 text-md-sys-color-on-surface-variant [&_[data-command-group-heading]]:px-3 [&_[data-command-group-heading]]:py-2 [&_[data-command-group-heading]]:md-sys-typescale-label-medium [&_[data-command-group-heading]]:text-md-sys-color-on-surface-variant',
         separator: '-mx-1 h-px bg-md-sys-color-outline-variant',
-        item: 'relative flex cursor-default select-none items-center rounded-lg px-3 py-3 md-sys-typescale-body-medium outline-none data-[selected=true]:bg-md-sys-color-secondary-container data-[selected=true]:text-md-sys-color-on-secondary-container data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 transition-colors',
+        item: 'relative flex cursor-default select-none items-center rounded-lg px-3 py-3 md-sys-typescale-body-medium outline-none data-[selected=true]:bg-md-sys-color-secondary-container data-[selected=true]:text-md-sys-color-on-secondary-container data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 transition-colors md-sys-motion-fast-effects',
         itemIcon: 'mr-3 h-5 w-5 shrink-0'
     }
 });

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

@@ -8,9 +8,9 @@ export const pinInput = tv({
       relative flex h-14 w-12 items-center justify-center
       bg-md-sys-color-surface-container-highest rounded-t-xs
       md-sys-typescale-headline-small text-md-sys-color-on-surface
-      transition-all duration-200
+      transition-colors md-sys-motion-fast-effects
       after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-md-sys-color-on-surface-variant
-      after:transition-[height,background-color] after:duration-200
+      after:transition-[height,background-color] after:md-sys-motion-fast-spatial
       data-[focus]:after:bg-md-sys-color-primary data-[focus]:after:h-[2px]
       data-[placeholder]:text-md-sys-color-on-surface-variant/38
     `,

package/dist/components/forms/radio-group/theme.js

@@ -5,8 +5,8 @@ export const radioGroup = tv({
         item: 'inline-flex min-h-10 cursor-pointer select-none items-center gap-3 text-md-sys-color-on-surface',
         indicator: 'relative inline-flex  size-[20px] shrink-0',
         control: 'relative layer-container absolute -inset-[10px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full',
-        outerRing: 'absolute inset-0 rounded-full border-2 border-md-sys-color-outline transition-colors',
-        innerDot: 'absolute inset-0 m-auto size-2.5 scale-0 rounded-full bg-md-sys-color-on-primary-container transition-transform duration-[350ms] [transition-timing-function:var(--md-sys-motion-timing-function-fast-spatial)]',
+        outerRing: 'absolute inset-0 rounded-full border-2 border-md-sys-color-outline transition-colors md-sys-motion-fast-effects',
+        innerDot: 'absolute inset-0 m-auto size-2.5 scale-0 rounded-full bg-md-sys-color-on-primary-container transition-transform md-sys-motion-fast-spatial',
         label: 'md-sys-typescale-body-large text-md-sys-color-on-surface',
         supporting: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant'
     },

package/dist/components/forms/select/Select.svelte

@@ -8,13 +8,12 @@ Powered by bits-ui for accessibility and behavior.
 @see https://m3.material.io/components/menus/overview
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { Select } from 'bits-ui';
   import { select as selectCls } from './theme.js';
   import { Icon } from '../../../utils/index.js';
   import type { SelectProps } from './types.js';
   import clsx from 'clsx';
-  import { enterExit } from '../../../animation/enterExit.js';
-  import { easeEmphasized } from '../../../animation/easing.js';
 
   let {
     value = $bindable(),
@@ -66,7 +65,6 @@ Powered by bits-ui for accessibility and behavior.
 
         <Select.Portal disabled={portalDisabled}>
           <Select.Content
-            forceMount
             class={cls.content({ class: clsx('z-[100]', contentProps?.class) })}
             sideOffset={4}
             align="start"
@@ -74,58 +72,48 @@ Powered by bits-ui for accessibility and behavior.
           >
             {#snippet child({ wrapperProps, props, open })}
               <div {...wrapperProps} class={clsx('z-[100]', wrapperProps.class as any)}>
-                {#if open}
-                  <div
-                    {...props}
-                    class={clsx('relative flex flex-col outline-none', props.class as any)}
-                    transition:enterExit={{
-                      duration: 200,
-                      easing: easeEmphasized,
-                      mode: 'scale'
-                    }}
-                    style:width="var(--bits-select-anchor-width)"
-                    style:max-width="min(calc(100vw - 32px), 560px)"
-                  >
-                    <Select.Viewport class="w-full">
-                      {#each options as item, i (i)}
-                        {#if item.type === 'group'}
-                          <Select.Group>
-                            {#if item.heading}
-                              <Select.GroupHeading class={cls.groupLabel()}>
-                                {item.heading}
-                              </Select.GroupHeading>
+                <div
+                  {...props}
+                  class={clsx('relative flex flex-col outline-none', props.class as any)}
+                  {@attach presence(() => open, enterExit.scale)}
+                  style:width="var(--bits-select-anchor-width)"
+                  style:max-width="min(calc(100vw - 32px), 560px)"
+                >
+                  <Select.Viewport class="w-full">
+                    {#each options as item, i (i)}
+                      {#if item.type === 'group'}
+                        <Select.Group>
+                          {#if item.heading}
+                            <Select.GroupHeading class={cls.groupLabel()}>
+                              {item.heading}
+                            </Select.GroupHeading>
+                          {/if}
+                          {#each item.items as innerItem, j (j)}
+                            {#if innerItem.type !== 'group'}
+                              <Select.Item {...innerItem} class={cls.item()}>
+                                {#snippet children({ selected })}
+                                  <span class="flex-1 truncate">{innerItem.label}</span>
+                                  {#if selected}
+                                    <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
+                                  {/if}
+                                {/snippet}
+                              </Select.Item>
                             {/if}
-                            {#each item.items as innerItem, j (j)}
-                              {#if innerItem.type !== 'group'}
-                                <Select.Item {...innerItem} class={cls.item()}>
-                                  {#snippet children({ selected })}
-                                    <span class="flex-1 truncate">{innerItem.label}</span>
-                                    {#if selected}
-                                      <Icon
-                                        aria-hidden="true"
-                                        name="check"
-                                        class="size-5 shrink-0"
-                                      />
-                                    {/if}
-                                  {/snippet}
-                                </Select.Item>
-                              {/if}
-                            {/each}
-                          </Select.Group>
-                        {:else}
-                          <Select.Item {...item} class={cls.item()}>
-                            {#snippet children({ selected })}
-                              <span class="flex-1 truncate">{item.label}</span>
-                              {#if selected}
-                                <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
-                              {/if}
-                            {/snippet}
-                          </Select.Item>
-                        {/if}
-                      {/each}
-                    </Select.Viewport>
-                  </div>
-                {/if}
+                          {/each}
+                        </Select.Group>
+                      {:else}
+                        <Select.Item {...item} class={cls.item()}>
+                          {#snippet children({ selected })}
+                            <span class="flex-1 truncate">{item.label}</span>
+                            {#if selected}
+                              <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
+                            {/if}
+                          {/snippet}
+                        </Select.Item>
+                      {/if}
+                    {/each}
+                  </Select.Viewport>
+                </div>
               </div>
             {/snippet}
           </Select.Content>

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

@@ -28,7 +28,7 @@ export const select = tv({
       mr-3 text-md-sys-color-on-surface-variant size-6
       group-data-[state=open]:text-md-sys-color-primary
       group-data-[invalid]:text-md-sys-color-error z-20 text-[24px]
-      transition-transform duration-200
+      transition-transform md-sys-motion-fast-spatial
       group-data-[state=open]:rotate-180
     `,
         content: `
@@ -45,7 +45,7 @@ export const select = tv({
       data-[selected]:bg-md-sys-color-secondary-container
       data-[selected]:text-md-sys-color-on-secondary-container
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
-      transition-colors duration-150
+      transition-colors md-sys-motion-fast-effects
     `,
         groupLabel: `
       px-3 pt-2 pb-1 md-sys-typescale-label-medium
@@ -68,7 +68,7 @@ export const select = tv({
           bg-md-sys-color-surface-container-highest
           rounded-t-xs state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
           after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-md-sys-color-on-surface-variant
-          after:transition-[height,background-color] after:duration-200
+          after:transition-[height,background-color] after:md-sys-motion-fast-spatial
           hover:after:bg-md-sys-color-on-surface
           has-[[data-state=open]]:after:bg-md-sys-color-primary
           has-[[data-state=open]]:after:h-[2px]
@@ -79,7 +79,7 @@ export const select = tv({
             outlined: {
                 base: `
           rounded-xs border border-md-sys-color-outline
-          transition-colors duration-150
+          transition-colors md-sys-motion-fast-effects
           hover:border-md-sys-color-on-surface
           has-[[data-state=open]]:border-2 has-[[data-state=open]]:border-md-sys-color-primary
         `