@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/date-picker/date-format.js

@@ -0,0 +1,72 @@
+import { CalendarDate } from "@internationalized/date";
+//#region src/components/date-picker/date-format.ts
+const HINT = {
+	day: "DD",
+	month: "MM",
+	year: "YYYY"
+};
+const SAMPLE = Date.UTC(2e3, 10, 22);
+const cache = /* @__PURE__ */ new Map();
+/** The numeric date format of `locale`. */
+function dateFormat(locale) {
+	const cached = cache.get(locale);
+	if (cached) return cached;
+	const formatter = new Intl.DateTimeFormat(locale, {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		calendar: "gregory",
+		numberingSystem: "latn",
+		timeZone: "UTC"
+	});
+	const parts = formatter.formatToParts(SAMPLE);
+	const result = {
+		order: parts.map((part) => part.type).filter((type) => type === "day" || type === "month" || type === "year"),
+		hint: parts.map((part) => part.type === "literal" ? part.value : HINT[part.type] ?? "").join("").replace(/[‎‏؜]/g, "").trim(),
+		format: (date) => formatter.format(Date.UTC(date.year, date.month - 1, date.day))
+	};
+	cache.set(locale, result);
+	return result;
+}
+/** A two-digit year in the window from 80 years ago to 19 years ahead. */
+function expandYear(year, digits, thisYear) {
+	if (digits > 2) return year;
+	const candidate = Math.floor(thisYear / 100) * 100 + year;
+	return candidate > thisYear + 19 ? candidate - 100 : candidate;
+}
+/**
+* Reads a typed date in the locale's part order. Returns `null` when the text isn't a
+* real date. Accepts any non-digit separators ("3-14-2030", "03 14 2030", "3.14.2030"),
+* eight digits with none ("03142030"), and a two-digit year.
+*/
+function parseDate(text, order, thisYear = (/* @__PURE__ */ new Date()).getFullYear()) {
+	let numbers = text.match(/\d+/g) ?? [];
+	if (numbers.length === 1 && numbers[0].length === 8) {
+		const digits = numbers[0];
+		let offset = 0;
+		numbers = order.map((part) => {
+			const width = part === "year" ? 4 : 2;
+			const slice = digits.slice(offset, offset + width);
+			offset += width;
+			return slice;
+		});
+	}
+	if (numbers.length !== 3 || order.length !== 3) return null;
+	const values = {};
+	for (const [index, part] of order.entries()) {
+		const token = numbers[index];
+		if (part !== "year" && token.length > 2) return null;
+		if (part === "year" && token.length !== 2 && token.length !== 4) return null;
+		const value = Number(token);
+		values[part] = part === "year" ? expandYear(value, token.length, thisYear) : value;
+	}
+	const { year = 0, month = 0, day = 0 } = values;
+	if (year < 1 || month < 1 || month > 12 || day < 1) return null;
+	const first = new CalendarDate(year, month, 1);
+	if (day > first.calendar.getDaysInMonth(first)) return null;
+	return new CalendarDate(year, month, day);
+}
+//#endregion
+export { dateFormat, parseDate };
+
+//# sourceMappingURL=date-format.js.map

package/dist/components/date-picker/date-format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-format.js","names":[],"sources":["../../../src/components/date-picker/date-format.ts"],"sourcesContent":["import { CalendarDate } from '@internationalized/date';\n\n/*\n * Typed date entry, as the M3 date picker accessibility guidance asks: no input mask, any\n * of dashes, spaces, slashes or dots between the parts, an optional leading zero on the\n * month and day, and the date reformatted only once the person is done (Enter or leaving\n * the field). The order of the parts and the format hint (\"MM/DD/YYYY\") come from the\n * locale's numeric date format, always in the Gregorian calendar with Latin digits so\n * what is shown can be typed back.\n */\n\ntype Part = 'day' | 'month' | 'year';\n\nexport interface DateFormat {\n  /** The order the locale writes the parts in, e.g. month, day, year for `en-US`. */\n  order: Part[];\n  /** The format hint, e.g. \"MM/DD/YYYY\" (`en-US`) or \"DD.MM.YYYY\" (`de-DE`). */\n  hint: string;\n  /** Writes a date in the locale's numeric format, e.g. \"03/14/2030\". */\n  format: (date: CalendarDate) => string;\n}\n\nconst HINT: Record<Part, string> = { day: 'DD', month: 'MM', year: 'YYYY' };\nconst SAMPLE = Date.UTC(2000, 10, 22);\nconst cache = new Map<string, DateFormat>();\n\n/** The numeric date format of `locale`. */\nexport function dateFormat(locale: string): DateFormat {\n  const cached = cache.get(locale);\n  if (cached) return cached;\n  const formatter = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n    calendar: 'gregory',\n    numberingSystem: 'latn',\n    timeZone: 'UTC',\n  });\n  const parts = formatter.formatToParts(SAMPLE);\n  const order = parts\n    .map((part) => part.type)\n    .filter((type): type is Part => type === 'day' || type === 'month' || type === 'year');\n  const hint = parts\n    .map((part) => (part.type === 'literal' ? part.value : (HINT[part.type as Part] ?? '')))\n    .join('')\n    // Bidi marks some locales put around the parts; the hint is read, not typed back.\n    .replace(/[‎‏؜]/g, '')\n    .trim();\n  const result: DateFormat = {\n    order,\n    hint,\n    format: (date) => formatter.format(Date.UTC(date.year, date.month - 1, date.day)),\n  };\n  cache.set(locale, result);\n  return result;\n}\n\n/** A two-digit year in the window from 80 years ago to 19 years ahead. */\nfunction expandYear(year: number, digits: number, thisYear: number) {\n  if (digits > 2) return year;\n  const century = Math.floor(thisYear / 100) * 100;\n  const candidate = century + year;\n  return candidate > thisYear + 19 ? candidate - 100 : candidate;\n}\n\n/**\n * Reads a typed date in the locale's part order. Returns `null` when the text isn't a\n * real date. Accepts any non-digit separators (\"3-14-2030\", \"03 14 2030\", \"3.14.2030\"),\n * eight digits with none (\"03142030\"), and a two-digit year.\n */\nexport function parseDate(\n  text: string,\n  order: Part[],\n  thisYear = new Date().getFullYear(),\n): CalendarDate | null {\n  let numbers: string[] = text.match(/\\d+/g) ?? [];\n  if (numbers.length === 1 && numbers[0]!.length === 8) {\n    const digits = numbers[0]!;\n    let offset = 0;\n    numbers = order.map((part) => {\n      const width = part === 'year' ? 4 : 2;\n      const slice = digits.slice(offset, offset + width);\n      offset += width;\n      return slice;\n    });\n  }\n  if (numbers.length !== 3 || order.length !== 3) return null;\n  const values: Partial<Record<Part, number>> = {};\n  for (const [index, part] of order.entries()) {\n    const token = numbers[index]!;\n    if (part !== 'year' && token.length > 2) return null;\n    if (part === 'year' && token.length !== 2 && token.length !== 4) return null;\n    const value = Number(token);\n    values[part] = part === 'year' ? expandYear(value, token.length, thisYear) : value;\n  }\n  const { year = 0, month = 0, day = 0 } = values;\n  if (year < 1 || month < 1 || month > 12 || day < 1) return null;\n  const first = new CalendarDate(year, month, 1);\n  if (day > first.calendar.getDaysInMonth(first)) return null;\n  return new CalendarDate(year, month, day);\n}\n"],"mappings":";;AAsBA,MAAM,OAA6B;CAAE,KAAK;CAAM,OAAO;CAAM,MAAM;AAAO;AAC1E,MAAM,SAAS,KAAK,IAAI,KAAM,IAAI,EAAE;AACpC,MAAM,wBAAQ,IAAI,IAAwB;;AAG1C,SAAgB,WAAW,QAA4B;CACrD,MAAM,SAAS,MAAM,IAAI,MAAM;CAC/B,IAAI,QAAQ,OAAO;CACnB,MAAM,YAAY,IAAI,KAAK,eAAe,QAAQ;EAChD,MAAM;EACN,OAAO;EACP,KAAK;EACL,UAAU;EACV,iBAAiB;EACjB,UAAU;CACZ,CAAC;CACD,MAAM,QAAQ,UAAU,cAAc,MAAM;CAU5C,MAAM,SAAqB;EACzB,OAVY,MACX,KAAK,SAAS,KAAK,IAAI,CAAC,CACxB,QAAQ,SAAuB,SAAS,SAAS,SAAS,WAAW,SAAS,MAQ3E;EACJ,MARW,MACV,KAAK,SAAU,KAAK,SAAS,YAAY,KAAK,QAAS,KAAK,KAAK,SAAiB,EAAI,CAAC,CACvF,KAAK,EAAE,CAAC,CAER,QAAQ,UAAU,EAAE,CAAC,CACrB,KAGE;EACH,SAAS,SAAS,UAAU,OAAO,KAAK,IAAI,KAAK,MAAM,KAAK,QAAQ,GAAG,KAAK,GAAG,CAAC;CAClF;CACA,MAAM,IAAI,QAAQ,MAAM;CACxB,OAAO;AACT;;AAGA,SAAS,WAAW,MAAc,QAAgB,UAAkB;CAClE,IAAI,SAAS,GAAG,OAAO;CAEvB,MAAM,YADU,KAAK,MAAM,WAAW,GAAG,IAAI,MACjB;CAC5B,OAAO,YAAY,WAAW,KAAK,YAAY,MAAM;AACvD;;;;;;AAOA,SAAgB,UACd,MACA,OACA,4BAAW,IAAI,KAAK,EAAA,CAAE,YAAY,GACb;CACrB,IAAI,UAAoB,KAAK,MAAM,MAAM,KAAK,CAAC;CAC/C,IAAI,QAAQ,WAAW,KAAK,QAAQ,EAAE,CAAE,WAAW,GAAG;EACpD,MAAM,SAAS,QAAQ;EACvB,IAAI,SAAS;EACb,UAAU,MAAM,KAAK,SAAS;GAC5B,MAAM,QAAQ,SAAS,SAAS,IAAI;GACpC,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS,KAAK;GACjD,UAAU;GACV,OAAO;EACT,CAAC;CACH;CACA,IAAI,QAAQ,WAAW,KAAK,MAAM,WAAW,GAAG,OAAO;CACvD,MAAM,SAAwC,CAAC;CAC/C,KAAK,MAAM,CAAC,OAAO,SAAS,MAAM,QAAQ,GAAG;EAC3C,MAAM,QAAQ,QAAQ;EACtB,IAAI,SAAS,UAAU,MAAM,SAAS,GAAG,OAAO;EAChD,IAAI,SAAS,UAAU,MAAM,WAAW,KAAK,MAAM,WAAW,GAAG,OAAO;EACxE,MAAM,QAAQ,OAAO,KAAK;EAC1B,OAAO,QAAQ,SAAS,SAAS,WAAW,OAAO,MAAM,QAAQ,QAAQ,IAAI;CAC/E;CACA,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,MAAM;CACzC,IAAI,OAAO,KAAK,QAAQ,KAAK,QAAQ,MAAM,MAAM,GAAG,OAAO;CAC3D,MAAM,QAAQ,IAAI,aAAa,MAAM,OAAO,CAAC;CAC7C,IAAI,MAAM,MAAM,SAAS,eAAe,KAAK,GAAG,OAAO;CACvD,OAAO,IAAI,aAAa,MAAM,OAAO,GAAG;AAC1C"}

package/dist/components/date-picker/date-picker-styles.d.ts

@@ -0,0 +1,247 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/date-picker/date-picker-styles.d.ts
+/** Variant definitions for {@link DatePicker}, {@link DateRangePicker} and the docked calendar. */
+export declare const datePickerStyles: import("tailwind-variants").TVReturnType<{
+  range: {
+    false: {
+      header: string;
+      headline: string;
+    };
+    true: {
+      header: string;
+      headline: string;
+    };
+  };
+  /**
+   * The docked picker shows the days of the months around the shown one. Its days keep
+   * their classes: the modal picker's tokens (`date-picker-tokens.ts`) colour the others.
+   */
+  docked: {
+    true: {
+      body: string;
+      day: string[];
+    };
+    false: {
+      day: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  headlineRow: string;
+  headline: string;
+  body: string;
+  nav: string;
+  navButtons: string;
+  yearButtonIcon: string[];
+  swipe: string;
+  slide: string[];
+  modeStack: string;
+  modeExit: string;
+  modeView: string[];
+  grid: string;
+  weekday: string;
+  weekdayRow: string;
+  weekdayCell: string;
+  cell: string[];
+  day: string[];
+  years: string[];
+  year: string[];
+  months: string[];
+  monthSubhead: string;
+  input: string;
+}, undefined, {
+  range: {
+    false: {
+      header: string;
+      headline: string;
+    };
+    true: {
+      header: string;
+      headline: string;
+    };
+  };
+  /**
+   * The docked picker shows the days of the months around the shown one. Its days keep
+   * their classes: the modal picker's tokens (`date-picker-tokens.ts`) colour the others.
+   */
+  docked: {
+    true: {
+      body: string;
+      day: string[];
+    };
+    false: {
+      day: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  headlineRow: string;
+  headline: string;
+  body: string;
+  nav: string;
+  navButtons: string;
+  yearButtonIcon: string[];
+  swipe: string;
+  slide: string[];
+  modeStack: string;
+  modeExit: string;
+  modeView: string[];
+  grid: string;
+  weekday: string;
+  weekdayRow: string;
+  weekdayCell: string;
+  cell: string[];
+  day: string[];
+  years: string[];
+  year: string[];
+  months: string[];
+  monthSubhead: string;
+  input: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  range: {
+    false: {
+      header: string;
+      headline: string;
+    };
+    true: {
+      header: string;
+      headline: string;
+    };
+  };
+  /**
+   * The docked picker shows the days of the months around the shown one. Its days keep
+   * their classes: the modal picker's tokens (`date-picker-tokens.ts`) colour the others.
+   */
+  docked: {
+    true: {
+      body: string;
+      day: string[];
+    };
+    false: {
+      day: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  headlineRow: string;
+  headline: string;
+  body: string;
+  nav: string;
+  navButtons: string;
+  yearButtonIcon: string[];
+  swipe: string;
+  slide: string[];
+  modeStack: string;
+  modeExit: string;
+  modeView: string[];
+  grid: string;
+  weekday: string;
+  weekdayRow: string;
+  weekdayCell: string;
+  cell: string[];
+  day: string[];
+  years: string[];
+  year: string[];
+  months: string[];
+  monthSubhead: string;
+  input: string;
+}>>;
+/** Variant definitions for {@link DateField}'s docked calendar. */
+export declare const dockedDatePickerStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      panel?: import("tailwind-variants").ClassValue;
+      actions?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      view?: import("tailwind-variants").ClassValue;
+      check?: import("tailwind-variants").ClassValue;
+      menuIcon?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
+      calendar?: import("tailwind-variants").ClassValue;
+      menuButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      panel?: import("tailwind-variants").ClassValue;
+      actions?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      view?: import("tailwind-variants").ClassValue;
+      check?: import("tailwind-variants").ClassValue;
+      menuIcon?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
+      calendar?: import("tailwind-variants").ClassValue;
+      menuButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  panel: string[];
+  calendar: string;
+  header: string;
+  group: string;
+  menuButton: string;
+  menuIcon: string[];
+  view: string;
+  list: string[];
+  item: string[];
+  check: string;
+  actions: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      panel?: import("tailwind-variants").ClassValue;
+      actions?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      view?: import("tailwind-variants").ClassValue;
+      check?: import("tailwind-variants").ClassValue;
+      menuIcon?: import("tailwind-variants").ClassValue;
+      group?: import("tailwind-variants").ClassValue;
+      calendar?: import("tailwind-variants").ClassValue;
+      menuButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  panel: string[];
+  calendar: string;
+  header: string;
+  group: string;
+  menuButton: string;
+  menuIcon: string[];
+  view: string;
+  list: string[];
+  item: string[];
+  check: string;
+  actions: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  panel: string[];
+  calendar: string;
+  header: string;
+  group: string;
+  menuButton: string;
+  menuIcon: string[];
+  view: string;
+  list: string[];
+  item: string[];
+  check: string;
+  actions: string;
+}>>;
+/**
+ * The variants of {@link datePickerStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type DatePickerStyleProps = VariantProps<typeof datePickerStyles>;
+//#endregion
+//# sourceMappingURL=date-picker-styles.d.ts.map

package/dist/components/date-picker/date-picker-styles.js

@@ -0,0 +1,163 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/date-picker/date-picker-styles.ts
+/**
+* Forced colours paint backgrounds as Canvas, so a picked day or year looked like any
+* other: it keeps a Highlight fill with HighlightText, opting out of the forced palette
+* (2026-10-15). `!important` beats the token colours, whose selectors are as specific.
+*/
+const forcedSelection = ["forced-colors:data-selected:bg-[Highlight]! forced-colors:data-selected:text-[HighlightText]!", "forced-colors:data-selected:forced-color-adjust-none"];
+/** Variant definitions for {@link DatePicker}, {@link DateRangePicker} and the docked calendar. */
+const datePickerStyles = tv({
+	slots: {
+		root: ["group/picker flex w-[360px] max-w-full shrink-0 flex-col text-on-surface", "group-data-full-screen/picker-dialog:min-h-0 group-data-full-screen/picker-dialog:w-full group-data-full-screen/picker-dialog:flex-1"],
+		header: "flex shrink-0 flex-col justify-between border-b border-outline-variant",
+		title: "ps-[24px] pe-[12px] pt-[16px] text-label-large text-on-surface-variant",
+		headlineRow: "flex items-end justify-between gap-[8px] ps-[24px] pe-[12px] pb-[12px]",
+		headline: "min-w-0 flex-1 text-[color:var(--_md-comp-date-picker-modal-header-headline-color)]",
+		body: "relative flex min-h-0 flex-col ps-[12px] pe-[12px]",
+		nav: "flex h-[56px] shrink-0 items-center justify-between",
+		navButtons: "flex items-center text-on-surface-variant",
+		yearButtonIcon: [
+			"inline-flex size-[18px] [&>svg]:size-full",
+			"[transition-property:rotate] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]",
+			"group-data-[years]/picker:rotate-180"
+		],
+		swipe: "touch-pan-y overflow-hidden",
+		slide: [
+			"translate-none opacity-100",
+			"[transition-property:translate,opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-effects-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),var(--md-sys-motion-spring-effects-default-easing)]",
+			"data-[direction=next]:starting:translate-x-[48px] data-[direction=next]:starting:opacity-0",
+			"data-[direction=previous]:starting:-translate-x-[48px] data-[direction=previous]:starting:opacity-0",
+			"rtl:data-[direction=next]:starting:-translate-x-[48px]",
+			"rtl:data-[direction=previous]:starting:translate-x-[48px]",
+			"motion-reduce:starting:translate-none"
+		],
+		modeStack: "grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] overflow-hidden",
+		modeExit: "pointer-events-none h-0 [grid-area:1/1]",
+		modeView: [
+			"flex min-h-0 flex-1 flex-col overflow-hidden [grid-area:1/1]",
+			"[&>*]:[transition-property:translate,opacity]",
+			"[&>*]:[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-effects-default-duration)]",
+			"[&>*]:[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),var(--md-sys-motion-spring-effects-default-easing)]",
+			"data-[enter=input]:[&>*]:starting:translate-y-full data-[enter=input]:[&>*]:starting:opacity-0",
+			"data-[enter=calendar]:[&>*]:starting:-translate-y-[48px] data-[enter=calendar]:[&>*]:starting:opacity-0",
+			"motion-reduce:[&>*]:starting:translate-none"
+		],
+		grid: "w-full table-fixed border-collapse",
+		weekday: "h-[48px] cursor-default p-0 text-center text-body-large font-normal text-on-surface",
+		weekdayRow: "grid shrink-0 grid-cols-7",
+		weekdayCell: "flex h-[48px] cursor-default items-center justify-center text-body-large text-on-surface",
+		cell: [
+			"h-[48px] p-0 text-center",
+			"bg-[length:calc(100%+1px)_40px] bg-center bg-no-repeat",
+			"data-[range=middle]:bg-[image:var(--_md-comp-date-picker-modal-range-middle)]",
+			"data-[range=start]:bg-[image:var(--_md-comp-date-picker-modal-range-to-right)]",
+			"data-[range=end]:bg-[image:var(--_md-comp-date-picker-modal-range-to-left)]",
+			"rtl:data-[range=start]:bg-[image:var(--_md-comp-date-picker-modal-range-to-left)]",
+			"rtl:data-[range=end]:bg-[image:var(--_md-comp-date-picker-modal-range-to-right)]"
+		],
+		day: [
+			"relative mx-auto flex size-[40px] cursor-pointer items-center justify-center rounded-corner-full",
+			"before:absolute before:-inset-[4px] before:rounded-corner-full",
+			"text-body-large text-on-surface outline-none state-layer focus-ring",
+			"data-today:border data-in-range:text-on-secondary-container",
+			"data-disabled:cursor-default data-disabled:text-on-surface/38",
+			"data-outside:invisible",
+			...forcedSelection,
+			"forced-colors:data-in-range:not-data-selected:border forced-colors:data-in-range:not-data-selected:border-[Highlight]"
+		],
+		years: [
+			"grid h-[335px] grid-cols-3 content-start justify-items-center gap-y-[16px] overflow-y-auto overscroll-contain pt-[8px] pb-[8px]",
+			"[clip-path:inset(0)] [transition-property:clip-path,opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+			"starting:[clip-path:inset(0_0_100%_0)] starting:opacity-60 motion-reduce:starting:[clip-path:inset(0)]",
+			"data-exiting:absolute data-exiting:inset-x-[12px] data-exiting:top-[56px] data-exiting:z-10",
+			"data-exiting:bg-[var(--_md-comp-date-picker-modal-container-color)] data-exiting:pointer-events-none",
+			"data-exiting:[clip-path:inset(0_0_100%_0)] data-exiting:opacity-0 motion-reduce:data-exiting:[clip-path:inset(0)]",
+			"data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]"
+		],
+		year: [
+			"relative flex h-[36px] w-[72px] cursor-pointer items-center justify-center rounded-corner-full",
+			"before:absolute before:-inset-y-[6px] before:inset-x-0",
+			"text-body-large text-on-surface-variant outline-none state-layer focus-ring",
+			"data-current:border data-current:border-primary data-current:text-primary",
+			"data-selected:bg-primary data-selected:text-on-primary",
+			"data-disabled:cursor-default data-disabled:text-on-surface/38",
+			...forcedSelection
+		],
+		months: ["h-[344px] min-h-0 overflow-y-auto overscroll-contain", "group-data-full-screen/picker-dialog:h-auto group-data-full-screen/picker-dialog:flex-1"],
+		monthSubhead: "flex h-[48px] items-end ps-[24px] pe-[12px] pb-[8px] text-title-small text-on-surface-variant",
+		input: "flex flex-col gap-[16px] ps-[24px] pe-[24px] pt-[16px] pb-[8px]"
+	},
+	variants: {
+		range: {
+			false: {
+				header: "min-h-[120px]",
+				headline: "text-headline-large"
+			},
+			true: {
+				header: "min-h-[128px] group-data-full-screen/picker-dialog:min-h-[68px]",
+				headline: "text-title-large"
+			}
+		},
+		/**
+		* The docked picker shows the days of the months around the shown one. Its days keep
+		* their classes: the modal picker's tokens (`date-picker-tokens.ts`) colour the others.
+		*/
+		docked: {
+			true: {
+				body: "ps-0 pe-0",
+				day: [
+					"data-today:border-primary data-today:text-primary",
+					"data-selected:bg-primary data-selected:text-on-primary",
+					"data-outside:visible data-outside:text-on-surface-variant"
+				]
+			},
+			false: { day: [
+				"data-today:border-[color:var(--_md-comp-date-picker-modal-date-today-container-outline-color)]",
+				"data-today:text-[color:var(--_md-comp-date-picker-modal-date-today-label-text-color)]",
+				"data-selected:bg-[var(--_md-comp-date-picker-modal-date-selected-container-color)]",
+				"data-selected:text-[color:var(--_md-comp-date-picker-modal-date-selected-label-text-color)]"
+			] }
+		}
+	},
+	defaultVariants: {
+		range: false,
+		docked: false
+	}
+});
+/** Variant definitions for {@link DateField}'s docked calendar. */
+const dockedDatePickerStyles = tv({ slots: {
+	panel: [
+		"flex w-[360px] max-w-full flex-col rounded-corner-large bg-surface-container-high",
+		"ps-[12px] pe-[12px] text-on-surface shadow-elevation-3 outline-none",
+		"forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]"
+	],
+	calendar: "flex flex-col",
+	header: "flex h-[56px] shrink-0 items-center justify-between",
+	group: "flex items-center text-on-surface-variant",
+	menuButton: "min-w-0 ps-[8px] pe-[4px] text-on-surface-variant",
+	menuIcon: [
+		"inline-flex size-[18px] [&>svg]:size-full",
+		"[transition-property:rotate] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+		"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]",
+		"data-open:rotate-180"
+	],
+	view: "h-[336px] min-h-0",
+	list: ["-ms-[12px] -me-[12px] h-[336px] overflow-y-auto overscroll-contain", "border-t border-outline-variant pt-[8px] pb-[8px]"],
+	item: [
+		"flex h-[48px] w-full cursor-pointer items-center gap-[16px] ps-[16px] pe-[24px] text-start",
+		"text-body-large text-on-surface outline-none state-layer focus-ring-inset",
+		"data-selected:bg-surface-variant",
+		"data-disabled:cursor-default data-disabled:text-on-surface/38"
+	],
+	check: "inline-flex size-[24px] shrink-0 [&>svg]:size-full",
+	actions: "flex shrink-0 items-center justify-end gap-[8px] pt-[4px] pb-[8px]"
+} });
+//#endregion
+export { datePickerStyles, dockedDatePickerStyles };
+
+//# sourceMappingURL=date-picker-styles.js.map

package/dist/components/date-picker/date-picker-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-styles.js","names":[],"sources":["../../../src/components/date-picker/date-picker-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 date picker spec, with sizes from Compose Material 3 (DatePicker.kt,\n * DateRangePicker.kt, DatePickerDialog.kt, DatePickerModalTokens).\n *\n * At least 360px wide. Header at least 120px (128px for ranges): a `label-large` title\n * (24px start, 12px end, 16px top) and a `headline-large` headline (`title-large` for\n * ranges; 24px start, 12px end and bottom), both `on-surface-variant`, with the mode toggle\n * at the end, above an `outline-variant` divider. The body has 12px sides: a 56px month row\n * (the month / year button, `on-surface-variant`, and previous / next buttons), a 48px\n * weekday row (`body-large` `on-surface`) and six 48px week rows. Days are 40px circles\n * with a 48px touch target: `body-large` `on-surface`; selected `primary` / `on-primary`;\n * today a 1px `primary` outline with `primary` text; disabled 38%. In a range, the days\n * between are a 40px `secondary-container` band with `on-secondary-container` text. Years\n * are 72 × 36px pills with a 48px-tall target, in three columns 16px apart (selected\n * `primary`, this year outlined), in a 335px area.\n *\n * Months slide in from the side they come from on the default spatial spring (a fade only\n * with reduced motion). The range picker's month list scrolls vertically: each month has a\n * 48px `title-small` `on-surface-variant` subhead (8px below it, 24px in) over its six\n * week rows, under one weekday row.\n *\n * The headline, the picked days, today and the range band come from the modal date\n * picker's component tokens (`date-picker-tokens.ts`, `--md-comp-date-picker-modal-*`): the\n * root carries `data-tokens=\"md-comp-date-picker-modal\"`, and the classes read one private\n * variable per part. A consumer class still wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/**\n * Forced colours paint backgrounds as Canvas, so a picked day or year looked like any\n * other: it keeps a Highlight fill with HighlightText, opting out of the forced palette\n * (2026-10-15). `!important` beats the token colours, whose selectors are as specific.\n */\nconst forcedSelection = [\n  'forced-colors:data-selected:bg-[Highlight]! forced-colors:data-selected:text-[HighlightText]!',\n  'forced-colors:data-selected:forced-color-adjust-none',\n];\n\n/** Variant definitions for {@link DatePicker}, {@link DateRangePicker} and the docked calendar. */\nexport const datePickerStyles = tv({\n  slots: {\n    root: [\n      'group/picker flex w-[360px] max-w-full shrink-0 flex-col text-on-surface',\n      // A full-screen picker dialog spans the window, and the month list fills its height.\n      'group-data-full-screen/picker-dialog:min-h-0 group-data-full-screen/picker-dialog:w-full group-data-full-screen/picker-dialog:flex-1',\n    ],\n    header: 'flex shrink-0 flex-col justify-between border-b border-outline-variant',\n    title: 'ps-[24px] pe-[12px] pt-[16px] text-label-large text-on-surface-variant',\n    headlineRow: 'flex items-end justify-between gap-[8px] ps-[24px] pe-[12px] pb-[12px]',\n    headline: 'min-w-0 flex-1 text-[color:var(--_md-comp-date-picker-modal-header-headline-color)]',\n    body: 'relative flex min-h-0 flex-col ps-[12px] pe-[12px]',\n    nav: 'flex h-[56px] shrink-0 items-center justify-between',\n    navButtons: 'flex items-center text-on-surface-variant',\n    yearButtonIcon: [\n      'inline-flex size-[18px] [&>svg]:size-full',\n      '[transition-property:rotate] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n      'group-data-[years]/picker:rotate-180',\n    ],\n    // Horizontal swipes change the month; vertical ones still scroll the page.\n    swipe: 'touch-pan-y overflow-hidden',\n    // A new month slides in from the side it comes from.\n    slide: [\n      'translate-none opacity-100',\n      '[transition-property:translate,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),var(--md-sys-motion-spring-effects-default-easing)]',\n      'data-[direction=next]:starting:translate-x-[48px] data-[direction=next]:starting:opacity-0',\n      'data-[direction=previous]:starting:-translate-x-[48px] data-[direction=previous]:starting:opacity-0',\n      'rtl:data-[direction=next]:starting:-translate-x-[48px]',\n      'rtl:data-[direction=previous]:starting:translate-x-[48px]',\n      'motion-reduce:starting:translate-none',\n    ],\n    // Calendar ↔ text input (Compose's display mode animation, enter side): the input rises\n    // from below its own height, the calendar comes down 48px, both fading in, inside a\n    // clipping view. Reduced motion keeps the fade.\n    // The view and the outgoing view's copy share one clipping cell; the copy's slot has no\n    // height, so only the new view sizes the picker.\n    modeStack:\n      'grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] overflow-hidden',\n    modeExit: 'pointer-events-none h-0 [grid-area:1/1]',\n    modeView: [\n      'flex min-h-0 flex-1 flex-col overflow-hidden [grid-area:1/1]',\n      '[&>*]:[transition-property:translate,opacity]',\n      '[&>*]:[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-effects-default-duration)]',\n      '[&>*]:[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),var(--md-sys-motion-spring-effects-default-easing)]',\n      'data-[enter=input]:[&>*]:starting:translate-y-full data-[enter=input]:[&>*]:starting:opacity-0',\n      'data-[enter=calendar]:[&>*]:starting:-translate-y-[48px] data-[enter=calendar]:[&>*]:starting:opacity-0',\n      'motion-reduce:[&>*]:starting:translate-none',\n    ],\n    grid: 'w-full table-fixed border-collapse',\n    weekday: 'h-[48px] cursor-default p-0 text-center text-body-large font-normal text-on-surface',\n    weekdayRow: 'grid shrink-0 grid-cols-7',\n    weekdayCell:\n      'flex h-[48px] cursor-default items-center justify-center text-body-large text-on-surface',\n    cell: [\n      'h-[48px] p-0 text-center',\n      // The range band: a 40px stripe behind the days between the ends.\n      // 1px wider than the cell, so neighbouring bands never leave a hairline between them.\n      'bg-[length:calc(100%+1px)_40px] bg-center bg-no-repeat',\n      'data-[range=middle]:bg-[image:var(--_md-comp-date-picker-modal-range-middle)]',\n      'data-[range=start]:bg-[image:var(--_md-comp-date-picker-modal-range-to-right)]',\n      'data-[range=end]:bg-[image:var(--_md-comp-date-picker-modal-range-to-left)]',\n      'rtl:data-[range=start]:bg-[image:var(--_md-comp-date-picker-modal-range-to-left)]',\n      'rtl:data-[range=end]:bg-[image:var(--_md-comp-date-picker-modal-range-to-right)]',\n    ],\n    day: [\n      // The 40px circle; its ::before widens the touch target to the 48px cell.\n      'relative mx-auto flex size-[40px] cursor-pointer items-center justify-center rounded-corner-full',\n      'before:absolute before:-inset-[4px] before:rounded-corner-full',\n      'text-body-large text-on-surface outline-none state-layer focus-ring',\n      'data-today:border data-in-range:text-on-secondary-container',\n      'data-disabled:cursor-default data-disabled:text-on-surface/38',\n      'data-outside:invisible',\n      ...forcedSelection,\n      // The range band is a background, which forced colours drop: the days between the\n      // ends take a Highlight ring instead (2026-10-15).\n      'forced-colors:data-in-range:not-data-selected:border forced-colors:data-in-range:not-data-selected:border-[Highlight]',\n    ],\n    years: [\n      'grid h-[335px] grid-cols-3 content-start justify-items-center gap-y-[16px] overflow-y-auto overscroll-contain pt-[8px] pb-[8px]',\n      // It expands down from the month row as it fades in from 60% (Compose's year picker\n      // `expandVertically` + `fadeIn(initialAlpha = 0.6f)`, default effects); reduced motion\n      // keeps the fade.\n      '[clip-path:inset(0)] [transition-property:clip-path,opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-default-duration)] [transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      'starting:[clip-path:inset(0_0_100%_0)] starting:opacity-60 motion-reduce:starting:[clip-path:inset(0)]',\n      // Closing, it lies over the grid below the month row, on the picker's container colour,\n      // and shrinks back up to the month row as it fades out (Compose's `shrinkVertically` +\n      // `fadeOut`, fast effects). Reduced motion keeps the fade.\n      'data-exiting:absolute data-exiting:inset-x-[12px] data-exiting:top-[56px] data-exiting:z-10',\n      'data-exiting:bg-[var(--_md-comp-date-picker-modal-container-color)] data-exiting:pointer-events-none',\n      'data-exiting:[clip-path:inset(0_0_100%_0)] data-exiting:opacity-0 motion-reduce:data-exiting:[clip-path:inset(0)]',\n      'data-exiting:[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)] data-exiting:[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n    ],\n    year: [\n      // The 36px pill; its ::before makes the touch target 48px tall.\n      'relative flex h-[36px] w-[72px] cursor-pointer items-center justify-center rounded-corner-full',\n      'before:absolute before:-inset-y-[6px] before:inset-x-0',\n      'text-body-large text-on-surface-variant outline-none state-layer focus-ring',\n      'data-current:border data-current:border-primary data-current:text-primary',\n      'data-selected:bg-primary data-selected:text-on-primary',\n      'data-disabled:cursor-default data-disabled:text-on-surface/38',\n      ...forcedSelection,\n    ],\n    months: [\n      'h-[344px] min-h-0 overflow-y-auto overscroll-contain',\n      'group-data-full-screen/picker-dialog:h-auto group-data-full-screen/picker-dialog:flex-1',\n    ],\n    monthSubhead:\n      'flex h-[48px] items-end ps-[24px] pe-[12px] pb-[8px] text-title-small text-on-surface-variant',\n    input: 'flex flex-col gap-[16px] ps-[24px] pe-[24px] pt-[16px] pb-[8px]',\n  },\n  variants: {\n    range: {\n      false: { header: 'min-h-[120px]', headline: 'text-headline-large' },\n      // Full screen, the top row takes the title's space: Compose's range header is the\n      // token's 128px less its 60px `HeaderHeightOffset`.\n      true: {\n        header: 'min-h-[128px] group-data-full-screen/picker-dialog:min-h-[68px]',\n        headline: 'text-title-large',\n      },\n    },\n    /**\n     * The docked picker shows the days of the months around the shown one. Its days keep\n     * their classes: the modal picker's tokens (`date-picker-tokens.ts`) colour the others.\n     */\n    docked: {\n      true: {\n        body: 'ps-0 pe-0',\n        day: [\n          'data-today:border-primary data-today:text-primary',\n          'data-selected:bg-primary data-selected:text-on-primary',\n          'data-outside:visible data-outside:text-on-surface-variant',\n        ],\n      },\n      false: {\n        day: [\n          'data-today:border-[color:var(--_md-comp-date-picker-modal-date-today-container-outline-color)]',\n          'data-today:text-[color:var(--_md-comp-date-picker-modal-date-today-label-text-color)]',\n          'data-selected:bg-[var(--_md-comp-date-picker-modal-date-selected-container-color)]',\n          'data-selected:text-[color:var(--_md-comp-date-picker-modal-date-selected-label-text-color)]',\n        ],\n      },\n    },\n  },\n  defaultVariants: { range: false, docked: false },\n});\n\n/*\n * The docked date picker (M3 \"Docked date picker\"): a `surface-container-high` panel with\n * 16px corners at level 3 below its date field, 360px wide with 12px sides. A 56px row\n * holds two menu buttons (month and year), each between its previous / next icon buttons;\n * the month or year menu replaces the calendar with a 48px-row list under an\n * `outline-variant` divider (the chosen row `surface-variant` with a check), and text\n * buttons end the panel.\n */\n\n/** Variant definitions for {@link DateField}'s docked calendar. */\nexport const dockedDatePickerStyles = tv({\n  slots: {\n    panel: [\n      'flex w-[360px] max-w-full flex-col rounded-corner-large bg-surface-container-high',\n      'ps-[12px] pe-[12px] text-on-surface shadow-elevation-3 outline-none',\n      // Forced colours drop the surface and the shadow: a system-colour outline keeps the edge.\n      'forced-colors:outline-solid forced-colors:outline-1 forced-colors:outline-[CanvasText]',\n    ],\n    calendar: 'flex flex-col',\n    header: 'flex h-[56px] shrink-0 items-center justify-between',\n    group: 'flex items-center text-on-surface-variant',\n    menuButton: 'min-w-0 ps-[8px] pe-[4px] text-on-surface-variant',\n    menuIcon: [\n      'inline-flex size-[18px] [&>svg]:size-full',\n      '[transition-property:rotate] [transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n      'data-open:rotate-180',\n    ],\n    view: 'h-[336px] min-h-0',\n    list: [\n      '-ms-[12px] -me-[12px] h-[336px] overflow-y-auto overscroll-contain',\n      'border-t border-outline-variant pt-[8px] pb-[8px]',\n    ],\n    item: [\n      'flex h-[48px] w-full cursor-pointer items-center gap-[16px] ps-[16px] pe-[24px] text-start',\n      'text-body-large text-on-surface outline-none state-layer focus-ring-inset',\n      'data-selected:bg-surface-variant',\n      'data-disabled:cursor-default data-disabled:text-on-surface/38',\n    ],\n    check: 'inline-flex size-[24px] shrink-0 [&>svg]:size-full',\n    actions: 'flex shrink-0 items-center justify-end gap-[8px] pt-[4px] pb-[8px]',\n  },\n});\n\n/**\n * The variants of {@link datePickerStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type DatePickerStyleProps = VariantProps<typeof datePickerStyles>;\n"],"mappings":";;;;;;;AAoCA,MAAM,kBAAkB,CACtB,iGACA,sDACF;;AAGA,MAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,MAAM,CACJ,4EAEA,sIACF;EACA,QAAQ;EACR,OAAO;EACP,aAAa;EACb,UAAU;EACV,MAAM;EACN,KAAK;EACL,YAAY;EACZ,gBAAgB;GACd;GACA;GACA;GACA;EACF;EAEA,OAAO;EAEP,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAMA,WACE;EACF,UAAU;EACV,UAAU;GACR;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;EACN,SAAS;EACT,YAAY;EACZ,aACE;EACF,MAAM;GACJ;GAGA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,KAAK;GAEH;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GAGH;EACF;EACA,OAAO;GACL;GAIA;GACA;GACA;GAIA;GACA;GACA;GACA;EACF;EACA,MAAM;GAEJ;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;EACL;EACA,QAAQ,CACN,wDACA,yFACF;EACA,cACE;EACF,OAAO;CACT;CACA,UAAU;EACR,OAAO;GACL,OAAO;IAAE,QAAQ;IAAiB,UAAU;GAAsB;GAGlE,MAAM;IACJ,QAAQ;IACR,UAAU;GACZ;EACF;;;;;EAKA,QAAQ;GACN,MAAM;IACJ,MAAM;IACN,KAAK;KACH;KACA;KACA;IACF;GACF;GACA,OAAO,EACL,KAAK;IACH;IACA;IACA;IACA;GACF,EACF;EACF;CACF;CACA,iBAAiB;EAAE,OAAO;EAAO,QAAQ;CAAM;AACjD,CAAC;;AAYD,MAAa,yBAAyB,GAAG,EACvC,OAAO;CACL,OAAO;EACL;EACA;EAEA;CACF;CACA,UAAU;CACV,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,UAAU;EACR;EACA;EACA;EACA;CACF;CACA,MAAM;CACN,MAAM,CACJ,sEACA,mDACF;CACA,MAAM;EACJ;EACA;EACA;EACA;CACF;CACA,OAAO;CACP,SAAS;AACX,EACF,CAAC"}

package/dist/components/date-picker/date-picker-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/date-picker/date-picker-tokens.d.ts
+/** The tokens of {@link DatePicker}, {@link DateRangePicker} and the date {@link PickerDialog}. */
+export declare const datePickerTokenSet: ComponentTokenSet<"container-color" | "container-shape" | "container-elevation" | "header-headline-color" | "date-selected-container-color" | "date-selected-label-text-color" | "date-today-container-outline-color" | "date-today-label-text-color" | "range-selection-active-indicator-container-color">;
+//#endregion
+//# sourceMappingURL=date-picker-tokens.d.ts.map

package/dist/components/date-picker/date-picker-tokens.js

@@ -0,0 +1,104 @@
+import { color, corner, defineComponentTokens, elevation } from "../../tokens/component.js";
+//#region src/components/date-picker/date-picker-tokens.ts
+const RANGE = "var(--_md-comp-date-picker-modal-range-selection-active-indicator-container-color)";
+/** The tokens of {@link DatePicker}, {@link DateRangePicker} and the date {@link PickerDialog}. */
+const datePickerTokenSet = defineComponentTokens({
+	name: "md-comp-date-picker-modal",
+	tokens: {
+		"header-headline-color": {
+			value: color("on-surface-variant"),
+			description: "The headline: the picked date or range.",
+			compose: "DatePickerModalTokens.HeaderHeadlineColor",
+			paints: {
+				property: "color",
+				slot: "headline"
+			}
+		},
+		"date-selected-container-color": {
+			value: color("primary"),
+			description: "The circle of a picked day (and of both ends of a range).",
+			compose: "DatePickerModalTokens.DateSelectedContainerColor",
+			paints: {
+				property: "background-color",
+				slot: "day",
+				state: "selected"
+			}
+		},
+		"date-selected-label-text-color": {
+			value: color("on-primary"),
+			description: "The number of a picked day.",
+			compose: "DatePickerModalTokens.DateSelectedLabelTextColor",
+			paints: {
+				property: "color",
+				slot: "day",
+				state: "selected"
+			}
+		},
+		"date-today-container-outline-color": {
+			value: color("primary"),
+			description: "The 1px outline of today's date.",
+			compose: "DatePickerModalTokens.DateTodayContainerOutlineColor",
+			paints: {
+				property: "border-top-color",
+				slot: "day",
+				state: "today"
+			}
+		},
+		"date-today-label-text-color": {
+			value: color("primary"),
+			description: "The number of today's date.",
+			compose: "DatePickerModalTokens.DateTodayLabelTextColor",
+			paints: {
+				property: "color",
+				slot: "day",
+				state: "today"
+			}
+		},
+		"range-selection-active-indicator-container-color": {
+			value: color("secondary-container"),
+			description: "The band behind the days of a range.",
+			compose: "DatePickerModalTokens.RangeSelectionActiveIndicatorContainerColor",
+			paints: {
+				property: "background-image",
+				slot: "cell",
+				state: "range"
+			}
+		},
+		"container-color": {
+			value: color("surface-container-high"),
+			description: "The dialog panel.",
+			compose: "DatePickerModalTokens.ContainerColor",
+			paints: {
+				property: "background-color",
+				state: "variant"
+			}
+		},
+		"container-shape": {
+			value: corner("extra-large"),
+			description: "The dialog panel's corners.",
+			compose: "DatePickerModalTokens.ContainerShape",
+			paints: {
+				property: "border-top-left-radius",
+				state: "variant"
+			}
+		},
+		"container-elevation": {
+			value: elevation(3),
+			description: "The dialog panel's shadow.",
+			compose: "DatePickerModalTokens.ContainerElevation",
+			paints: {
+				property: "box-shadow",
+				state: "variant"
+			}
+		}
+	},
+	derived: {
+		"range-middle": `linear-gradient(${RANGE}, ${RANGE})`,
+		"range-to-right": `linear-gradient(to right, transparent 50%, ${RANGE} 50%)`,
+		"range-to-left": `linear-gradient(to left, transparent 50%, ${RANGE} 50%)`
+	}
+});
+//#endregion
+export { datePickerTokenSet };
+
+//# sourceMappingURL=date-picker-tokens.js.map

package/dist/components/date-picker/date-picker-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-tokens.js","names":[],"sources":["../../../src/components/date-picker/date-picker-tokens.ts"],"sourcesContent":["import { color, corner, defineComponentTokens, elevation } from '../../tokens/component';\n\n/*\n * The modal date picker's component tokens, M3's `md.comp.date-picker.modal.*` names\n * (checked against m3.material.io's token tables, 2026-10-14), with Compose's\n * DatePickerModalTokens defaults. They apply to `DatePicker` and `DateRangePicker` (each root\n * carries `data-tokens=\"md-comp-date-picker-modal\"`) and to a `PickerDialog` of the `date`\n * variant, whose panel paints the container. The docked calendar of `DateField` is M3's\n * separate docked set, which isn't exposed: its days keep their classes.\n *\n * The range band is a gradient on each day cell, so its three shapes are worked out once\n * here (`derived`) from the band's colour. Hover, focus, pressed and disabled values, the\n * year list and the title stay classes.\n */\n\nconst RANGE = 'var(--_md-comp-date-picker-modal-range-selection-active-indicator-container-color)';\n\n/** The tokens of {@link DatePicker}, {@link DateRangePicker} and the date {@link PickerDialog}. */\nexport const datePickerTokenSet = defineComponentTokens({\n  name: 'md-comp-date-picker-modal',\n  tokens: {\n    'header-headline-color': {\n      value: color('on-surface-variant'),\n      description: 'The headline: the picked date or range.',\n      compose: 'DatePickerModalTokens.HeaderHeadlineColor',\n      paints: { property: 'color', slot: 'headline' },\n    },\n    'date-selected-container-color': {\n      value: color('primary'),\n      description: 'The circle of a picked day (and of both ends of a range).',\n      compose: 'DatePickerModalTokens.DateSelectedContainerColor',\n      paints: { property: 'background-color', slot: 'day', state: 'selected' },\n    },\n    'date-selected-label-text-color': {\n      value: color('on-primary'),\n      description: 'The number of a picked day.',\n      compose: 'DatePickerModalTokens.DateSelectedLabelTextColor',\n      paints: { property: 'color', slot: 'day', state: 'selected' },\n    },\n    'date-today-container-outline-color': {\n      value: color('primary'),\n      description: \"The 1px outline of today's date.\",\n      compose: 'DatePickerModalTokens.DateTodayContainerOutlineColor',\n      paints: { property: 'border-top-color', slot: 'day', state: 'today' },\n    },\n    'date-today-label-text-color': {\n      value: color('primary'),\n      description: \"The number of today's date.\",\n      compose: 'DatePickerModalTokens.DateTodayLabelTextColor',\n      paints: { property: 'color', slot: 'day', state: 'today' },\n    },\n    'range-selection-active-indicator-container-color': {\n      value: color('secondary-container'),\n      description: 'The band behind the days of a range.',\n      compose: 'DatePickerModalTokens.RangeSelectionActiveIndicatorContainerColor',\n      paints: { property: 'background-image', slot: 'cell', state: 'range' },\n    },\n    'container-color': {\n      value: color('surface-container-high'),\n      description: 'The dialog panel.',\n      compose: 'DatePickerModalTokens.ContainerColor',\n      paints: { property: 'background-color', state: 'variant' },\n    },\n    'container-shape': {\n      value: corner('extra-large'),\n      description: \"The dialog panel's corners.\",\n      compose: 'DatePickerModalTokens.ContainerShape',\n      paints: { property: 'border-top-left-radius', state: 'variant' },\n    },\n    'container-elevation': {\n      value: elevation(3),\n      description: \"The dialog panel's shadow.\",\n      compose: 'DatePickerModalTokens.ContainerElevation',\n      paints: { property: 'box-shadow', state: 'variant' },\n    },\n  },\n  derived: {\n    'range-middle': `linear-gradient(${RANGE}, ${RANGE})`,\n    'range-to-right': `linear-gradient(to right, transparent 50%, ${RANGE} 50%)`,\n    'range-to-left': `linear-gradient(to left, transparent 50%, ${RANGE} 50%)`,\n  },\n});\n"],"mappings":";;AAeA,MAAM,QAAQ;;AAGd,MAAa,qBAAqB,sBAAsB;CACtD,MAAM;CACN,QAAQ;EACN,yBAAyB;GACvB,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;GAAW;EAChD;EACA,iCAAiC;GAC/B,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAO,OAAO;GAAW;EACzE;EACA,kCAAkC;GAChC,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;IAAO,OAAO;GAAW;EAC9D;EACA,sCAAsC;GACpC,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAO,OAAO;GAAQ;EACtE;EACA,+BAA+B;GAC7B,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;IAAO,OAAO;GAAQ;EAC3D;EACA,oDAAoD;GAClD,OAAO,MAAM,qBAAqB;GAClC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAQ,OAAO;GAAQ;EACvE;EACA,mBAAmB;GACjB,OAAO,MAAM,wBAAwB;GACrC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,OAAO;GAAU;EAC3D;EACA,mBAAmB;GACjB,OAAO,OAAO,aAAa;GAC3B,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAA0B,OAAO;GAAU;EACjE;EACA,uBAAuB;GACrB,OAAO,UAAU,CAAC;GAClB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAc,OAAO;GAAU;EACrD;CACF;CACA,SAAS;EACP,gBAAgB,mBAAmB,MAAM,IAAI,MAAM;EACnD,kBAAkB,8CAA8C,MAAM;EACtE,iBAAiB,6CAA6C,MAAM;CACtE;AACF,CAAC"}