@noxlovette/material 0.4.7 → 0.5.0

package/dist/components/date/DateRangeField.svelte

@@ -1,140 +1,101 @@
 <!--
 @component
 DateRangeField lets users enter or pick a date range (start + end) via two
-segment inputs and a shared calendar popover.
+segment inputs and a shared docked calendar.
 
 @see https://m3.material.io/components/date-pickers/guidelines
 -->
 <script lang="ts">
-  import { DateRangePicker } from 'bits-ui';
+  import { DateRangePicker, Portal, 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 { DateRangeFieldProps } from './types';
-  import { dateRangeField } from './theme';
+  import { dateCalendar, dateRangeField, dateSegment } from './theme';
 
   let {
     value = $bindable(),
     label,
     startLabel = 'Start',
     endLabel = 'End',
-    id,
+    id = useId(),
     required = false,
     disabled = false,
     error = false,
     variant = 'outlined',
     supportingText,
     name,
+    locale,
+    weekStartsOn,
     leadingIconProps
-  }: DateRangeFieldProps & { leadingIconProps?: any } = $props();
+  }: DateRangeFieldProps = $props();
 
   const cls = $derived(dateRangeField({ disabled, error, variant }));
+  const calendar = dateCalendar();
 </script>
 
+{#snippet rangeInput(type: 'start' | 'end', fieldLabel: string)}
+  <div class={cls.inputWrapper()}>
+    <DateRangePicker.Input
+      {type}
+      class={cls.input()}
+      name={type === 'start' ? name : undefined}
+      id={`${id}-${type}`}
+    >
+      {#snippet children({ segments })}
+        <div class="flex w-full pt-4 tabular-nums">
+          {#each segments as { part, value: segment }}
+            <DateRangePicker.Segment
+              {part}
+              class={dateSegment({ part: part === 'literal' ? 'literal' : 'value' })}
+            >
+              {segment}
+            </DateRangePicker.Segment>
+          {/each}
+        </div>
+      {/snippet}
+    </DateRangePicker.Input>
+
+    <span class={cls.label()}>
+      {fieldLabel}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true">*</span
+        >{/if}
+    </span>
+  </div>
+{/snippet}
+
 <DateRangePicker.Root
   bind:value
-  weekStartsOn={1}
+  {weekStartsOn}
   {required}
   {disabled}
-  locale="ru"
-  weekdayFormat="short"
+  {locale}
+  weekdayFormat="narrow"
   fixedWeeks
   closeOnRangeSelect
 >
   <div class="relative w-full">
+    {#if label}
+      <DateRangePicker.Label class="sr-only">{label}</DateRangePicker.Label>
+    {/if}
     <div class={cls.base()} data-invalid={error || undefined}>
       {#if leadingIconProps}
         <Icon class={cls.leadingIcon()} {...leadingIconProps} />
       {/if}
 
-      <div class={cls.inputWrapper()}>
-        <!-- Start date input -->
-        <DateRangePicker.Input type="start" class={cls.input()} {name} id={id ?? undefined}>
-          {#snippet children({ segments })}
-            <div class="flex w-full flex-col pt-4 tabular-nums">
-              <div class="flex">
-                {#each segments as { part, value: segVal }}
-                  {#if part === 'literal'}
-                    <DateRangePicker.Segment
-                      {part}
-                      class="text-md-sys-color-on-surface-variant px-0.5 select-none first:pl-0"
-                    >
-                      {segVal}
-                    </DateRangePicker.Segment>
-                  {:else}
-                    <DateRangePicker.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!"
-                    >
-                      {segVal}
-                    </DateRangePicker.Segment>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-          {/snippet}
-        </DateRangePicker.Input>
-
-        <label class={cls.label()} for={id}>
-          {startLabel ?? label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true"
-              >*</span
-            >{/if}
-        </label>
-      </div>
-
+      {@render rangeInput('start', startLabel)}
       <span class={cls.separator()}>–</span>
+      {@render rangeInput('end', endLabel)}
 
-      <div class={cls.inputWrapper()}>
-        <!-- End date input -->
-        <DateRangePicker.Input type="end" class={cls.input()} id={id ? `${id}-end` : undefined}>
-          {#snippet children({ segments })}
-            <div class="flex w-full flex-col pt-4 tabular-nums">
-              <div class="flex">
-                {#each segments as { part, value: segVal }}
-                  {#if part === 'literal'}
-                    <DateRangePicker.Segment
-                      {part}
-                      class="text-md-sys-color-on-surface-variant px-0.5 select-none first:pl-0"
-                    >
-                      {segVal}
-                    </DateRangePicker.Segment>
-                  {:else}
-                    <DateRangePicker.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!"
-                    >
-                      {segVal}
-                    </DateRangePicker.Segment>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-          {/snippet}
-        </DateRangePicker.Input>
-
-        <label class={cls.label()} for={id ? `${id}-end` : undefined}>
-          {endLabel ?? label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true"
-              >*</span
-            >{/if}
-        </label>
-      </div>
-
-      <DateRangePicker.Trigger
-        class={cls.trailingIcon({ class: 'flex items-center justify-center' })}
-      >
-        <Icon name="calendar_month" />
+      <DateRangePicker.Trigger>
+        {#snippet child({ props })}
+          <ButtonIcon
+            {...props}
+            {disabled}
+            class={cls.trailingIcon()}
+            iconProps={{ name: 'date_range' }}
+          />
+        {/snippet}
       </DateRangePicker.Trigger>
     </div>
 
@@ -145,68 +106,65 @@ segment inputs and a shared calendar popover.
     {/if}
   </div>
 
-  <DateRangePicker.Content sideOffset={6} class="z-[100]">
-    <DateRangePicker.Calendar
-      class="bg-md-sys-color-surface-container-high shadow-elevation-3 h-104 w-90 rounded-lg p-6"
-    >
-      {#snippet children({ months, weekdays })}
-        <DateRangePicker.Header
-          class="text-md-sys-color-on-surface-variant z-10 flex w-full items-center justify-between pb-7.5"
-        >
-          <DateRangePicker.PrevButton>
-            <ButtonIcon type="button" iconProps={{ name: 'chevron_left' }} />
-          </DateRangePicker.PrevButton>
-          <DateRangePicker.Heading class="md-sys-typescale-label-large" />
-          <DateRangePicker.NextButton>
-            <ButtonIcon type="button" iconProps={{ name: 'chevron_right' }} />
-          </DateRangePicker.NextButton>
-        </DateRangePicker.Header>
+  <Portal>
+    <DateRangePicker.Content sideOffset={4} align="start">
+      {#snippet child({ wrapperProps, props, open })}
+        <div {...wrapperProps}>
+          <div {...props} {@attach presence(() => open, enterExit.scale)}>
+            <DateRangePicker.Calendar class={calendar.surface()}>
+              {#snippet children({ months, weekdays })}
+                <DateRangePicker.Header class={calendar.header()}>
+                  <DateRangePicker.Heading class={calendar.heading()} />
+                  <div class={calendar.nav()}>
+                    <DateRangePicker.PrevButton>
+                      {#snippet child({ props })}
+                        <ButtonIcon {...props} iconProps={{ name: 'chevron_left' }} />
+                      {/snippet}
+                    </DateRangePicker.PrevButton>
+                    <DateRangePicker.NextButton>
+                      {#snippet child({ props })}
+                        <ButtonIcon {...props} iconProps={{ name: 'chevron_right' }} />
+                      {/snippet}
+                    </DateRangePicker.NextButton>
+                  </div>
+                </DateRangePicker.Header>
 
-        {#each months as month}
-          <DateRangePicker.Grid class="w-full border-collapse select-none">
-            <DateRangePicker.GridHead>
-              <DateRangePicker.GridRow class="flex w-full justify-between">
-                {#each weekdays as day}
-                  <DateRangePicker.HeadCell
-                    class="md-sys-typescale-label-large text-md-sys-color-on-surface-variant size-10"
-                  >
-                    {day}
-                  </DateRangePicker.HeadCell>
+                {#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)}
+                        <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}
-              </DateRangePicker.GridRow>
-            </DateRangePicker.GridHead>
-            <DateRangePicker.GridBody>
-              {#each month.weeks as weekDates}
-                <DateRangePicker.GridRow class="flex w-full justify-between">
-                  {#each weekDates as date}
-                    <DateRangePicker.Cell
-                      {date}
-                      month={month.value}
-                      class="md-sys-typescale-body-large text-center"
-                    >
-                      <DateRangePicker.Day
-                        class="group data-disabled:text-md-sys-color-on-surface/38 data-highlighted:bg-md-sys-color-primary-container/20 data-range-end:bg-md-sys-color-primary data-range-end:text-md-sys-color-on-primary data-range-middle:bg-md-sys-color-primary-container/40 data-range-start:bg-md-sys-color-primary
-												   data-range-start:text-md-sys-color-on-primary 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
-												   transition-colors
-												   duration-100 data-disabled:cursor-not-allowed
-												   data-outside-month:pointer-events-none data-outside-month:opacity-0
-												   data-range-middle:rounded-none data-unavailable:line-through"
-                      >
-                        <Layer />
-                        {date.day}
-                      </DateRangePicker.Day>
-                    </DateRangePicker.Cell>
-                  {/each}
-                </DateRangePicker.GridRow>
-              {/each}
-            </DateRangePicker.GridBody>
-          </DateRangePicker.Grid>
-        {/each}
+              {/snippet}
+            </DateRangePicker.Calendar>
+          </div>
+        </div>
       {/snippet}
-    </DateRangePicker.Calendar>
-  </DateRangePicker.Content>
+    </DateRangePicker.Content>
+  </Portal>
 </DateRangePicker.Root>

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

@@ -1,13 +1,10 @@
 import type { DateRangeFieldProps } from './types';
-type $$ComponentProps = DateRangeFieldProps & {
-    leadingIconProps?: any;
-};
 /**
  * DateRangeField lets users enter or pick a date range (start + end) via two
- * segment inputs and a shared calendar popover.
+ * segment inputs and a shared docked calendar.
  *
  * @see https://m3.material.io/components/date-pickers/guidelines
  */
-declare const DateRangeField: import("svelte").Component<$$ComponentProps, {}, "value">;
+declare const DateRangeField: import("svelte").Component<DateRangeFieldProps, {}, "value">;
 type DateRangeField = ReturnType<typeof DateRangeField>;
 export default DateRangeField;

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

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

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,90 @@ 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 text-md-sys-color-on-surface
+    `,
+        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: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'