@hjmds/design-contracts 0.8.2

package/dist/data-table.js

@@ -0,0 +1,182 @@
+import { collectionItemContract, focusIndicatorContract } from "./component-contracts.js";
+import { control, fontWeight, spacing } from "./foundations.js";
+import { semanticColors } from "./semantic-colors.js";
+export const dataTableColumnDefaults = {
+    align: "start",
+    sortable: false,
+};
+function assertNonEmpty(value, field) {
+    if (typeof value !== "string" || value.trim().length === 0) {
+        throw new TypeError(`DataTable ${field} must not be empty`);
+    }
+}
+export function validateDataTableColumns(columns) {
+    if (columns.length === 0) {
+        throw new TypeError("DataTable must declare at least one column");
+    }
+    const ids = new Set();
+    for (const column of columns) {
+        assertNonEmpty(column.id, "column id");
+        if (ids.has(column.id)) {
+            throw new TypeError(`Duplicate DataTable column id: ${column.id}`);
+        }
+        ids.add(column.id);
+        assertNonEmpty(column.header, `column "${column.id}" header`);
+        if (column.width !== undefined && (!Number.isFinite(column.width) || column.width <= 0)) {
+            throw new RangeError(`DataTable column "${column.id}" width must be a positive finite number`);
+        }
+    }
+}
+export function validateDataTableRows(rows) {
+    const ids = new Set();
+    for (const row of rows) {
+        assertNonEmpty(row.id, "row id");
+        if (ids.has(row.id)) {
+            throw new TypeError(`Duplicate DataTable row id: ${row.id}`);
+        }
+        ids.add(row.id);
+    }
+}
+/**
+ * Header "select all" state as the same tri-state `CheckboxState` the
+ * selection column's checkbox already renders (check/dash), instead of a new
+ * `"none" | "some" | "all"` enum the recipe would have to translate again.
+ * Disabled rows are excluded from both the denominator and the count.
+ */
+export function resolveDataTableSelectAllState(rows, selectedKeys) {
+    const selectable = rows.filter((row) => !row.disabled);
+    if (selectable.length === 0)
+        return false;
+    const selectedCount = selectable.filter((row) => selectedKeys.has(row.id)).length;
+    if (selectedCount === 0)
+        return false;
+    if (selectedCount === selectable.length)
+        return true;
+    return "mixed";
+}
+export const dataTableDefaults = {
+    sortCycle: "three-state",
+};
+export function validateDataTableSortState(state, columns) {
+    if (state === null)
+        return;
+    if (state.direction !== "ascending" && state.direction !== "descending") {
+        throw new TypeError(`Unsupported DataTable sort direction: ${String(state.direction)}`);
+    }
+    const column = columns.find((candidate) => candidate.id === state.columnId);
+    if (!column) {
+        throw new TypeError(`DataTable sort references unknown column id: ${String(state.columnId)}`);
+    }
+    if (!column.sortable) {
+        throw new TypeError(`DataTable column "${String(state.columnId)}" is not sortable`);
+    }
+}
+/**
+ * Pure toggle: does not read or write product data. The product still owns
+ * actually re-sorting rows (Combobox's local/external filtering split is the
+ * same boundary — HJM judges intent, never executes the data operation).
+ */
+export function getNextDataTableSortState(current, columnId, cycle = dataTableDefaults.sortCycle) {
+    if (current === null || current.columnId !== columnId) {
+        return { columnId, direction: "ascending" };
+    }
+    if (current.direction === "ascending") {
+        return { columnId, direction: "descending" };
+    }
+    return cycle === "three-state" ? null : { columnId, direction: "ascending" };
+}
+/**
+ * Reuses `collectionItemContract`'s hover/selected/focus tokens instead of a
+ * second set of row-interaction colors — Menu, Select, and DataTable rows
+ * stay one visual vocabulary.
+ */
+export const dataTableRecipe = {
+    slots: [
+        "root",
+        "header",
+        "headerCell",
+        "sortButton",
+        "sortIcon",
+        "row",
+        "cell",
+        "selectionCell",
+        "emptyState",
+        "errorState",
+    ],
+    defaults: { density: "regular" },
+    density: {
+        compact: { paddingVertical: spacing.xs, paddingHorizontal: spacing.sm },
+        regular: { paddingVertical: spacing.sm, paddingHorizontal: spacing.md },
+    },
+    header: {
+        background: semanticColors.surface.sunken,
+        color: semanticColors.content.secondary,
+        textVariant: "label",
+        fontWeight: fontWeight.bold,
+        borderBottom: semanticColors.border.default,
+    },
+    row: {
+        borderBottom: semanticColors.border.subtle,
+        hoverBackground: collectionItemContract.highlightedBackground,
+        selectedBackground: collectionItemContract.selectedBackground,
+    },
+    cell: {
+        color: semanticColors.content.body,
+        textVariant: "body",
+    },
+    sortButton: {
+        minTarget: control.minTouchTarget,
+        color: semanticColors.content.secondary,
+        activeColor: semanticColors.content.brand,
+    },
+    selectionCell: {
+        width: control.minTouchTarget,
+    },
+    emptyState: {
+        color: semanticColors.content.secondary,
+        textVariant: "body",
+    },
+    errorState: {
+        color: semanticColors.content.danger,
+        textVariant: "body",
+    },
+    states: {
+        focus: focusIndicatorContract,
+    },
+};
+/**
+ * No roving-tabindex grid keyboard navigation (arrow keys between cells):
+ * no product using this contract has measured demand for full ARIA-grid
+ * traversal, and it is a materially bigger accessibility surface than a
+ * sortable header button plus native checkbox/radio tab stops.
+ */
+export const dataTableBehavior = {
+    controlled: ["selection"],
+    inputs: ["columns", "rows", "sortState", "asyncState"],
+    events: ["onSortChange"],
+    configuration: { sortCycle: ["two-state", "three-state"] },
+    defaults: dataTableDefaults,
+    stateAxes: {
+        value: ["selected"],
+        content: ["idle", "loading", "loadingMore", "empty", "error"],
+    },
+    web: {
+        roles: ["table", "row", "columnheader", "cell", "button", "checkbox", "radio"],
+        keyboard: ["Tab", "Enter", "Space"],
+        focus: "native",
+    },
+    native: { roles: [], states: [], actions: [] },
+    scenarios: [
+        "row-selection-reuses-the-shared-collection-selection-model-unchanged",
+        "select-all-reuses-the-shared-tri-state-checkbox-value",
+        "async-state-reuses-the-shared-collection-async-state-unchanged",
+        "sortable-header-is-a-button-inside-the-columnheader-not-the-header-itself",
+        "sort-direction-values-pass-through-to-aria-sort-without-translation",
+        "disabled-rows-are-excluded-from-select-all-accounting",
+        "pagination-or-load-more-is-composed-beneath-the-table-not-owned-by-it",
+        "row-expansion-is-not-owned-here-compose-the-disclosure-group-contract-per-row",
+        "a-data-cell-exposes-at-most-one-focusable-control",
+        "no-roving-tabindex-grid-navigation-is-implied",
+    ],
+};
+//# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ColorReference } from \"./color-references.js\";\nimport type {\n  AsyncCollectionState,\n  BehaviorContract,\n  CheckboxState,\n  CollectionKey,\n  CollectionSelectionModel,\n} from \"./behaviors.js\";\nimport { collectionItemContract, focusIndicatorContract } from \"./component-contracts.js\";\nimport { control, fontWeight, spacing, type FontWeightValue, type TextVariant } from \"./foundations.js\";\nimport { semanticColors } from \"./semantic-colors.js\";\n\nexport type DataTableAlign = \"start\" | \"center\" | \"end\";\n\nexport type DataTableColumnDescriptor<Key extends CollectionKey = CollectionKey> = Readonly<{\n  id: Key;\n  /** Visible column header text; also the columnheader's accessible name. */\n  header: string;\n  align?: DataTableAlign;\n  sortable?: boolean;\n  /** Layout hint only (px or flex-basis); renderers may ignore or clamp it. */\n  width?: number;\n}>;\n\nexport const dataTableColumnDefaults = {\n  align: \"start\",\n  sortable: false,\n} as const satisfies Readonly<{ align: DataTableAlign; sortable: boolean }>;\n\nfunction assertNonEmpty(value: string, field: string): void {\n  if (typeof value !== \"string\" || value.trim().length === 0) {\n    throw new TypeError(`DataTable ${field} must not be empty`);\n  }\n}\n\nexport function validateDataTableColumns<Key extends CollectionKey>(\n  columns: readonly DataTableColumnDescriptor<Key>[],\n): void {\n  if (columns.length === 0) {\n    throw new TypeError(\"DataTable must declare at least one column\");\n  }\n  const ids = new Set<Key>();\n  for (const column of columns) {\n    assertNonEmpty(column.id, \"column id\");\n    if (ids.has(column.id)) {\n      throw new TypeError(`Duplicate DataTable column id: ${column.id}`);\n    }\n    ids.add(column.id);\n    assertNonEmpty(column.header, `column \"${column.id}\" header`);\n    if (column.width !== undefined && (!Number.isFinite(column.width) || column.width <= 0)) {\n      throw new RangeError(`DataTable column \"${column.id}\" width must be a positive finite number`);\n    }\n  }\n}\n\n/**\n * Row identity and selection deliberately do NOT reuse `CollectionItemDescriptor`\n * verbatim: a table row has no single visible `label`/`textValue` the way a\n * Menu or Select item does — its \"content\" is however many columns the\n * product renders per row. Only the parts of the Collection base contract\n * that are genuinely row-shaped (`CollectionKey` identity, `disabled`) apply.\n */\nexport type DataTableRowDescriptor<Key extends CollectionKey = CollectionKey> = Readonly<{\n  id: Key;\n  disabled?: boolean;\n}>;\n\nexport function validateDataTableRows<Key extends CollectionKey>(\n  rows: readonly DataTableRowDescriptor<Key>[],\n): void {\n  const ids = new Set<Key>();\n  for (const row of rows) {\n    assertNonEmpty(row.id, \"row id\");\n    if (ids.has(row.id)) {\n      throw new TypeError(`Duplicate DataTable row id: ${row.id}`);\n    }\n    ids.add(row.id);\n  }\n}\n\n/** Row selection is the unmodified Collection base contract — no DataTable-only selection shape. */\nexport type DataTableSelection<Key extends CollectionKey = CollectionKey> =\n  CollectionSelectionModel<Key>;\n\n/**\n * Header \"select all\" state as the same tri-state `CheckboxState` the\n * selection column's checkbox already renders (check/dash), instead of a new\n * `\"none\" | \"some\" | \"all\"` enum the recipe would have to translate again.\n * Disabled rows are excluded from both the denominator and the count.\n */\nexport function resolveDataTableSelectAllState<Key extends CollectionKey>(\n  rows: readonly DataTableRowDescriptor<Key>[],\n  selectedKeys: ReadonlySet<Key>,\n): CheckboxState {\n  const selectable = rows.filter((row) => !row.disabled);\n  if (selectable.length === 0) return false;\n  const selectedCount = selectable.filter((row) => selectedKeys.has(row.id)).length;\n  if (selectedCount === 0) return false;\n  if (selectedCount === selectable.length) return true;\n  return \"mixed\";\n}\n\n/**\n * Values are the literal `aria-sort` vocabulary (minus `\"none\"`, which is\n * `null`) so the Web renderer passes them through without a translation\n * table — the same \"pass the platform value through\" choice Slider makes\n * for `valueText`.\n */\nexport type DataTableSortDirection = \"ascending\" | \"descending\";\n\nexport type DataTableSortState<Key extends CollectionKey = CollectionKey> = Readonly<{\n  columnId: Key;\n  direction: DataTableSortDirection;\n}> | null;\n\nexport type DataTableSortCycle = \"two-state\" | \"three-state\";\n\nexport const dataTableDefaults = {\n  sortCycle: \"three-state\",\n} as const satisfies Readonly<{ sortCycle: DataTableSortCycle }>;\n\nexport function validateDataTableSortState<Key extends CollectionKey>(\n  state: DataTableSortState<Key>,\n  columns: readonly DataTableColumnDescriptor<Key>[],\n): void {\n  if (state === null) return;\n  if (state.direction !== \"ascending\" && state.direction !== \"descending\") {\n    throw new TypeError(`Unsupported DataTable sort direction: ${String(state.direction)}`);\n  }\n  const column = columns.find((candidate) => candidate.id === state.columnId);\n  if (!column) {\n    throw new TypeError(`DataTable sort references unknown column id: ${String(state.columnId)}`);\n  }\n  if (!column.sortable) {\n    throw new TypeError(`DataTable column \"${String(state.columnId)}\" is not sortable`);\n  }\n}\n\n/**\n * Pure toggle: does not read or write product data. The product still owns\n * actually re-sorting rows (Combobox's local/external filtering split is the\n * same boundary — HJM judges intent, never executes the data operation).\n */\nexport function getNextDataTableSortState<Key extends CollectionKey>(\n  current: DataTableSortState<Key>,\n  columnId: Key,\n  cycle: DataTableSortCycle = dataTableDefaults.sortCycle,\n): DataTableSortState<Key> {\n  if (current === null || current.columnId !== columnId) {\n    return { columnId, direction: \"ascending\" };\n  }\n  if (current.direction === \"ascending\") {\n    return { columnId, direction: \"descending\" };\n  }\n  return cycle === \"three-state\" ? null : { columnId, direction: \"ascending\" };\n}\n\n/** The whole table's row-loading status — the unmodified Collection base async contract. */\nexport type DataTableAsyncState = AsyncCollectionState;\n\nexport type DataTableDensity = \"compact\" | \"regular\";\n\n/**\n * Reuses `collectionItemContract`'s hover/selected/focus tokens instead of a\n * second set of row-interaction colors — Menu, Select, and DataTable rows\n * stay one visual vocabulary.\n */\nexport const dataTableRecipe = {\n  slots: [\n    \"root\",\n    \"header\",\n    \"headerCell\",\n    \"sortButton\",\n    \"sortIcon\",\n    \"row\",\n    \"cell\",\n    \"selectionCell\",\n    \"emptyState\",\n    \"errorState\",\n  ] as const,\n  defaults: { density: \"regular\" },\n  density: {\n    compact: { paddingVertical: spacing.xs, paddingHorizontal: spacing.sm },\n    regular: { paddingVertical: spacing.sm, paddingHorizontal: spacing.md },\n  },\n  header: {\n    background: semanticColors.surface.sunken,\n    color: semanticColors.content.secondary,\n    textVariant: \"label\",\n    fontWeight: fontWeight.bold,\n    borderBottom: semanticColors.border.default,\n  },\n  row: {\n    borderBottom: semanticColors.border.subtle,\n    hoverBackground: collectionItemContract.highlightedBackground,\n    selectedBackground: collectionItemContract.selectedBackground,\n  },\n  cell: {\n    color: semanticColors.content.body,\n    textVariant: \"body\",\n  },\n  sortButton: {\n    minTarget: control.minTouchTarget,\n    color: semanticColors.content.secondary,\n    activeColor: semanticColors.content.brand,\n  },\n  selectionCell: {\n    width: control.minTouchTarget,\n  },\n  emptyState: {\n    color: semanticColors.content.secondary,\n    textVariant: \"body\",\n  },\n  errorState: {\n    color: semanticColors.content.danger,\n    textVariant: \"body\",\n  },\n  states: {\n    focus: focusIndicatorContract,\n  },\n} as const satisfies {\n  slots: readonly [\n    \"root\",\n    \"header\",\n    \"headerCell\",\n    \"sortButton\",\n    \"sortIcon\",\n    \"row\",\n    \"cell\",\n    \"selectionCell\",\n    \"emptyState\",\n    \"errorState\",\n  ];\n  defaults: { density: DataTableDensity };\n  density: Record<DataTableDensity, { paddingVertical: number; paddingHorizontal: number }>;\n  header: {\n    background: ColorReference;\n    color: ColorReference;\n    textVariant: TextVariant;\n    fontWeight: FontWeightValue;\n    borderBottom: ColorReference;\n  };\n  row: {\n    borderBottom: ColorReference;\n    hoverBackground: ColorReference;\n    selectedBackground: ColorReference;\n  };\n  cell: { color: ColorReference; textVariant: TextVariant };\n  sortButton: { minTarget: number; color: ColorReference; activeColor: ColorReference };\n  selectionCell: { width: number };\n  emptyState: { color: ColorReference; textVariant: TextVariant };\n  errorState: { color: ColorReference; textVariant: TextVariant };\n  states: { focus: typeof focusIndicatorContract };\n};\n\n/**\n * No roving-tabindex grid keyboard navigation (arrow keys between cells):\n * no product using this contract has measured demand for full ARIA-grid\n * traversal, and it is a materially bigger accessibility surface than a\n * sortable header button plus native checkbox/radio tab stops.\n */\nexport const dataTableBehavior = {\n  controlled: [\"selection\"],\n  inputs: [\"columns\", \"rows\", \"sortState\", \"asyncState\"],\n  events: [\"onSortChange\"],\n  configuration: { sortCycle: [\"two-state\", \"three-state\"] },\n  defaults: dataTableDefaults,\n  stateAxes: {\n    value: [\"selected\"],\n    content: [\"idle\", \"loading\", \"loadingMore\", \"empty\", \"error\"],\n  },\n  web: {\n    roles: [\"table\", \"row\", \"columnheader\", \"cell\", \"button\", \"checkbox\", \"radio\"],\n    keyboard: [\"Tab\", \"Enter\", \"Space\"],\n    focus: \"native\",\n  },\n  native: { roles: [], states: [], actions: [] },\n  scenarios: [\n    \"row-selection-reuses-the-shared-collection-selection-model-unchanged\",\n    \"select-all-reuses-the-shared-tri-state-checkbox-value\",\n    \"async-state-reuses-the-shared-collection-async-state-unchanged\",\n    \"sortable-header-is-a-button-inside-the-columnheader-not-the-header-itself\",\n    \"sort-direction-values-pass-through-to-aria-sort-without-translation\",\n    \"disabled-rows-are-excluded-from-select-all-accounting\",\n    \"pagination-or-load-more-is-composed-beneath-the-table-not-owned-by-it\",\n    \"row-expansion-is-not-owned-here-compose-the-disclosure-group-contract-per-row\",\n    \"a-data-cell-exposes-at-most-one-focusable-control\",\n    \"no-roving-tabindex-grid-navigation-is-implied\",\n  ],\n} as const satisfies BehaviorContract;\n"]}

package/dist/date-picker.d.ts

@@ -0,0 +1,268 @@
+import { type CalendarGridDescriptor, type CalendarMonthNavigation, type ComposeCalendarAccessibleName, type ResolvedCalendarGridCell } from "./calendar.js";
+/**
+ * Mirrors `SelectLabel` by shape rather than importing it: Select's type
+ * lives in `collection.ts` for Select/Combobox/Menu's shared collection
+ * story, and DatePicker's date grid deliberately does not adopt that
+ * collection contract (see docs/calendar.md). Repeating the small, obvious
+ * "visible label or accessibility label" shape here keeps this module
+ * self-sufficient while staying consistent with the rest of the system.
+ */
+export type DatePickerLabel = Readonly<{
+    label: string;
+    accessibilityLabel?: string;
+}> | Readonly<{
+    label?: never;
+    accessibilityLabel: string;
+}>;
+export type DatePickerOpenChangeReason = "trigger" | "keyboard" | "selection" | "clear" | "escape" | "outside" | "blur" | "programmatic";
+export type DatePickerOpenState = Readonly<{
+    open: boolean;
+    defaultOpen?: never;
+    onOpenChange(open: boolean, reason: DatePickerOpenChangeReason): void;
+}> | Readonly<{
+    open?: never;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, reason: DatePickerOpenChangeReason) => void;
+}>;
+/**
+ * A committed date closes the popover/sheet the same way Select's
+ * `selection-requests-close-and-restores-trigger-focus` scenario works.
+ * `clear` commits `null` without reopening — this is the field's only
+ * "empty" affordance; there is no separate disallow-empty configuration
+ * because an optional date field is the common case (unlike Select, which
+ * more often names a required option).
+ */
+export type DatePickerSelection = Readonly<{
+    selectedDate: string | null;
+    defaultSelectedDate?: never;
+    onSelectionChange(date: string | null, reason: "activate" | "clear"): void;
+}> | Readonly<{
+    selectedDate?: never;
+    defaultSelectedDate?: string | null;
+    onSelectionChange?: (date: string | null, reason: "activate" | "clear") => void;
+}>;
+export declare function validateDatePickerSelection(selection: DatePickerSelection): void;
+/**
+ * Field + grid + adaptive overlay. The grid itself is the exact
+ * `CalendarGridDescriptor` from `calendar.ts` — Web renders it inside an
+ * anchored popover, Native inside a Sheet (the `Select` adaptive split:
+ * `adaptive: { web: "popover", native: "sheet" }`), but neither renderer
+ * reinterprets the grid's cells, navigation, or accessible-name contract.
+ */
+export type DatePickerDescriptor<Content = unknown> = Readonly<{
+    grid: CalendarGridDescriptor<Content>;
+    /** Product-formatted trigger copy for the committed date ("2026년 8월 19일"); DatePicker never formats a date itself. */
+    displayValue: string | null;
+    placeholder: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+}> & DatePickerLabel & DatePickerOpenState & DatePickerSelection & CalendarMonthNavigation;
+export declare function validateDatePickerDescriptor<Content>(descriptor: DatePickerDescriptor<Content>): void;
+/** Trigger copy is the committed display value, or the placeholder when nothing is selected yet. */
+export declare function resolveDatePickerTriggerText(descriptor: Pick<DatePickerDescriptor, "displayValue" | "placeholder">): string;
+/**
+ * Resolves the popover/sheet content: the exact same cell shape, today/
+ * selected marks, and accessible names Calendar renders inline. DatePicker
+ * adds no per-cell semantics of its own — only the surrounding field/overlay
+ * lifecycle is new.
+ */
+export declare function resolveDatePickerGrid<Content>(descriptor: DatePickerDescriptor<Content>, options: Readonly<{
+    composeAccessibleName: ComposeCalendarAccessibleName<Content>;
+}>): readonly ResolvedCalendarGridCell<Content>[];
+export type DatePickerSize = "medium" | "large";
+/**
+ * Reuses `fieldFrameContract`/`formSupportContract` verbatim, exactly like
+ * NumberField and Select each do independently — a second field frame would
+ * drift the first time either one's border or height changes. `calendar`
+ * anatomy is intentionally not re-declared here: the popover/sheet mounts
+ * `calendarRecipe` unchanged, so this recipe only owns the field/trigger and
+ * the overlay frame around it.
+ */
+export declare const datePickerRecipe: {
+    readonly slots: readonly ["root", "label", "trigger", "leading", "value", "placeholder", "clear", "indicator", "description", "error", "popover"];
+    readonly defaults: {
+        readonly size: "medium";
+    };
+    readonly adaptive: {
+        readonly web: "popover";
+        readonly native: "sheet";
+    };
+    readonly frame: {
+        readonly background: Readonly<{
+            source: "theme";
+            key: "surface";
+            alpha?: number;
+        }>;
+        readonly border: Readonly<{
+            source: "theme";
+            key: "textMuted";
+            alpha?: number;
+        }>;
+        readonly focusBorder: Readonly<{
+            source: "theme";
+            key: "contentBrand";
+            alpha?: number;
+        }>;
+        readonly invalidBorder: Readonly<{
+            source: "theme";
+            key: "danger";
+            alpha?: number;
+        }>;
+        readonly radius: "md";
+        readonly borderWidth: 1;
+        readonly minHeight: 44;
+        readonly paddingHorizontal: 16;
+    };
+    readonly sizes: {
+        readonly medium: {
+            readonly minHeight: 44;
+            readonly paddingHorizontal: 16;
+            readonly textVariant: "body";
+            readonly glyph: "sm";
+        };
+        readonly large: {
+            readonly minHeight: 52;
+            readonly paddingHorizontal: 20;
+            readonly textVariant: "bodyLarge";
+            readonly glyph: "md";
+        };
+    };
+    readonly support: {
+        readonly label: {
+            readonly color: Readonly<{
+                source: "theme";
+                key: "textBody";
+                alpha?: number;
+            }>;
+            readonly textVariant: "body";
+            readonly fontWeight: "600";
+        };
+        readonly hint: {
+            readonly color: Readonly<{
+                source: "theme";
+                key: "textMuted";
+                alpha?: number;
+            }>;
+            readonly textVariant: "label";
+        };
+        readonly error: {
+            readonly color: Readonly<{
+                source: "theme";
+                key: "danger";
+                alpha?: number;
+            }>;
+            readonly textVariant: "label";
+        };
+        readonly gap: 8;
+    };
+    readonly value: {
+        readonly color: Readonly<{
+            source: "theme";
+            key: "textBody";
+            alpha?: number;
+        }>;
+        readonly placeholderColor: Readonly<{
+            source: "theme";
+            key: "textMuted";
+            alpha?: number;
+        }>;
+    };
+    readonly leading: {
+        readonly color: Readonly<{
+            source: "theme";
+            key: "textMuted";
+            alpha?: number;
+        }>;
+        readonly icon: "calendar";
+    };
+    readonly indicator: {
+        readonly color: Readonly<{
+            source: "theme";
+            key: "textMuted";
+            alpha?: number;
+        }>;
+    };
+    readonly clear: {
+        readonly diameter: 36;
+        readonly hitSlop: 4;
+        readonly glyph: "xs";
+        readonly color: Readonly<{
+            source: "theme";
+            key: "textMuted";
+            alpha?: number;
+        }>;
+    };
+    readonly popover: {
+        readonly minWidth: 300;
+        readonly maxWidth: 360;
+        readonly sideOffset: 8;
+        readonly collisionPadding: 8;
+        readonly background: Readonly<{
+            source: "theme";
+            key: "bg";
+            alpha?: number;
+        }>;
+        readonly border: Readonly<{
+            source: "theme";
+            key: "border";
+            alpha?: number;
+        }>;
+        readonly borderWidth: 1;
+        readonly radius: "md";
+        readonly shadow: {
+            readonly color: "#000000";
+            readonly opacity: 0.12;
+            readonly radius: 12;
+            readonly offsetY: 4;
+        };
+        readonly padding: 8;
+    };
+    readonly states: {
+        readonly focus: {
+            readonly color: Readonly<{
+                source: "theme";
+                key: "contentBrand";
+                alpha?: number;
+            }>;
+            readonly width: 2;
+            readonly offset: 2;
+        };
+        readonly invalidBorder: Readonly<{
+            source: "theme";
+            key: "danger";
+            alpha?: number;
+        }>;
+    };
+};
+/**
+ * Web mounts the grid as a real focus-bearing `dialog` (APG's Date Picker
+ * Dialog pattern moves actual DOM focus through gridcells via roving
+ * tabindex, unlike Select's `activeDescendant` listbox where focus stays on
+ * the trigger). Native mounts the same grid inside a Sheet. Both close on a
+ * committed selection or `clear` and restore trigger focus, matching
+ * Select's own dismiss-and-restore scenario.
+ */
+export declare const datePickerBehavior: {
+    readonly controlled: readonly ["selectedDate", "defaultSelectedDate", "onSelectionChange", "open", "defaultOpen", "onOpenChange"];
+    readonly inputs: readonly ["grid", "displayValue", "focusedMonth", "defaultFocusedMonth"];
+    readonly stateAxes: {
+        readonly availability: readonly ["enabled", "disabled", "readOnly", "busy"];
+        readonly value: readonly ["empty", "selected", "open"];
+        readonly validation: readonly ["valid", "invalid"];
+    };
+    readonly web: {
+        readonly roles: readonly ["button", "dialog", "grid", "row", "gridcell"];
+        readonly keyboard: readonly ["Tab", "Enter", "Space", "Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
+        readonly focus: "roving";
+        readonly dismiss: readonly ["selection", "escape", "outside", "blur"];
+    };
+    readonly native: {
+        readonly roles: readonly ["button", "dialog"];
+        readonly states: readonly ["disabled", "expanded"];
+        readonly actions: readonly ["activate", "dismiss"];
+        readonly dismiss: readonly ["selection", "back", "outside"];
+    };
+    readonly scenarios: readonly ["visible-label-or-accessibility-label-names-trigger", "trigger-shows-the-product-formatted-display-value-or-placeholder", "popover-and-sheet-content-reuse-the-calendar-grid-contract-unchanged", "activating-an-enabled-date-commits-selection-and-closes", "disabled-dates-remain-focusable-but-never-commit-or-close", "clear-commits-null-and-closes-without-reopening", "escape-closes-without-commit-and-restores-trigger-focus", "outside-press-closes-without-commit", "controlled-owner-may-defer-a-selection-close-request", "changing-the-focused-month-never-changes-or-clears-the-selection", "range-selection-is-not-part-of-the-contract"];
+};
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../src/date-picker.ts"],"names":[],"mappings":"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"}

package/dist/date-picker.js

@@ -0,0 +1,168 @@
+import { assertIsoCalendarDate, validateCalendarGridDescriptor, resolveCalendarGridDescriptor, validateCalendarMonthNavigation, } from "./calendar.js";
+import { fieldFrameContract, floatingSurfaceContract, focusIndicatorContract, formSupportContract } from "./component-contracts.js";
+import { control, spacing } from "./foundations.js";
+import { semanticColors } from "./semantic-colors.js";
+function assertNonEmpty(value, field) {
+    if (typeof value !== "string" || value.trim().length === 0) {
+        throw new TypeError(`DatePicker ${field} must not be empty`);
+    }
+}
+export function validateDatePickerSelection(selection) {
+    const selected = selection.selectedDate ?? selection.defaultSelectedDate;
+    if (selected != null)
+        assertIsoCalendarDate(selected, "selectedDate");
+}
+export function validateDatePickerDescriptor(descriptor) {
+    validateCalendarGridDescriptor(descriptor.grid);
+    assertNonEmpty(descriptor.placeholder, "placeholder");
+    if (descriptor.displayValue !== null) {
+        assertNonEmpty(descriptor.displayValue, "displayValue");
+    }
+    const label = descriptor.label ?? descriptor.accessibilityLabel;
+    assertNonEmpty(label, "label or accessibilityLabel");
+    validateDatePickerSelection(descriptor);
+    validateCalendarMonthNavigation(descriptor);
+}
+/** Trigger copy is the committed display value, or the placeholder when nothing is selected yet. */
+export function resolveDatePickerTriggerText(descriptor) {
+    if (descriptor.displayValue !== null)
+        assertNonEmpty(descriptor.displayValue, "displayValue");
+    assertNonEmpty(descriptor.placeholder, "placeholder");
+    return descriptor.displayValue ?? descriptor.placeholder;
+}
+/**
+ * Resolves the popover/sheet content: the exact same cell shape, today/
+ * selected marks, and accessible names Calendar renders inline. DatePicker
+ * adds no per-cell semantics of its own — only the surrounding field/overlay
+ * lifecycle is new.
+ */
+export function resolveDatePickerGrid(descriptor, options) {
+    validateDatePickerDescriptor(descriptor);
+    const selectedDate = descriptor.selectedDate ?? descriptor.defaultSelectedDate ?? null;
+    return resolveCalendarGridDescriptor(descriptor.grid, selectedDate, options);
+}
+/**
+ * Reuses `fieldFrameContract`/`formSupportContract` verbatim, exactly like
+ * NumberField and Select each do independently — a second field frame would
+ * drift the first time either one's border or height changes. `calendar`
+ * anatomy is intentionally not re-declared here: the popover/sheet mounts
+ * `calendarRecipe` unchanged, so this recipe only owns the field/trigger and
+ * the overlay frame around it.
+ */
+export const datePickerRecipe = {
+    slots: [
+        "root",
+        "label",
+        "trigger",
+        "leading",
+        "value",
+        "placeholder",
+        "clear",
+        "indicator",
+        "description",
+        "error",
+        "popover",
+    ],
+    defaults: { size: "medium" },
+    adaptive: { web: "popover", native: "sheet" },
+    frame: fieldFrameContract,
+    sizes: {
+        medium: {
+            minHeight: fieldFrameContract.minHeight,
+            paddingHorizontal: fieldFrameContract.paddingHorizontal,
+            textVariant: "body",
+            glyph: "sm",
+        },
+        large: {
+            minHeight: control.buttonHeight.large,
+            paddingHorizontal: spacing.lg,
+            textVariant: "bodyLarge",
+            glyph: "md",
+        },
+    },
+    support: formSupportContract,
+    value: {
+        color: semanticColors.content.body,
+        placeholderColor: semanticColors.content.secondary,
+    },
+    leading: { color: semanticColors.content.secondary, icon: "calendar" },
+    indicator: { color: semanticColors.content.secondary },
+    clear: {
+        diameter: control.buttonHeight.small,
+        hitSlop: control.buttonHitSlop.small,
+        glyph: "xs",
+        color: semanticColors.content.secondary,
+    },
+    popover: {
+        ...floatingSurfaceContract,
+        minWidth: 300,
+        maxWidth: 360,
+        sideOffset: spacing.xs,
+        collisionPadding: spacing.xs,
+    },
+    states: {
+        focus: focusIndicatorContract,
+        invalidBorder: semanticColors.border.danger,
+    },
+};
+/**
+ * Web mounts the grid as a real focus-bearing `dialog` (APG's Date Picker
+ * Dialog pattern moves actual DOM focus through gridcells via roving
+ * tabindex, unlike Select's `activeDescendant` listbox where focus stays on
+ * the trigger). Native mounts the same grid inside a Sheet. Both close on a
+ * committed selection or `clear` and restore trigger focus, matching
+ * Select's own dismiss-and-restore scenario.
+ */
+export const datePickerBehavior = {
+    controlled: [
+        "selectedDate",
+        "defaultSelectedDate",
+        "onSelectionChange",
+        "open",
+        "defaultOpen",
+        "onOpenChange",
+    ],
+    inputs: ["grid", "displayValue", "focusedMonth", "defaultFocusedMonth"],
+    stateAxes: {
+        availability: ["enabled", "disabled", "readOnly", "busy"],
+        value: ["empty", "selected", "open"],
+        validation: ["valid", "invalid"],
+    },
+    web: {
+        roles: ["button", "dialog", "grid", "row", "gridcell"],
+        keyboard: [
+            "Tab",
+            "Enter",
+            "Space",
+            "Escape",
+            "ArrowUp",
+            "ArrowDown",
+            "ArrowLeft",
+            "ArrowRight",
+            "Home",
+            "End",
+        ],
+        focus: "roving",
+        dismiss: ["selection", "escape", "outside", "blur"],
+    },
+    native: {
+        roles: ["button", "dialog"],
+        states: ["disabled", "expanded"],
+        actions: ["activate", "dismiss"],
+        dismiss: ["selection", "back", "outside"],
+    },
+    scenarios: [
+        "visible-label-or-accessibility-label-names-trigger",
+        "trigger-shows-the-product-formatted-display-value-or-placeholder",
+        "popover-and-sheet-content-reuse-the-calendar-grid-contract-unchanged",
+        "activating-an-enabled-date-commits-selection-and-closes",
+        "disabled-dates-remain-focusable-but-never-commit-or-close",
+        "clear-commits-null-and-closes-without-reopening",
+        "escape-closes-without-commit-and-restores-trigger-focus",
+        "outside-press-closes-without-commit",
+        "controlled-owner-may-defer-a-selection-close-request",
+        "changing-the-focused-month-never-changes-or-clears-the-selection",
+        "range-selection-is-not-part-of-the-contract",
+    ],
+};
+//# sourceMappingURL=date-picker.js.map