@djangocfg/ui-core 2.1.511 → 2.1.513

package/README.md

@@ -51,14 +51,14 @@ import { UiProviders, Button, Card } from '@djangocfg/ui-core';
 | Group | Examples |
 |---|---|
 | `components/data/` | Avatar · Badge · Card · Table · BalancedText · Skeleton |
-| `components/forms/` | Button · Input · Textarea · Select · Switch · Checkbox · Slider · Form |
+| `components/forms/` | Button · Input · Textarea · Select · Switch · Checkbox · Slider · Form · DateField · TimeField · DateTimeField |
 | `components/feedback/` | Alert · Toast · Banner · Progress · Spinner |
 | `components/overlay/` | Dialog · Drawer · Popover · Tooltip · HoverCard · Sheet · ContextMenu · DropdownMenu |
 | `components/navigation/` | Sidebar · Tabs · Breadcrumb · Pagination · NavigationMenu · Command · Disclosure |
 | `components/layout/` | Container · Grid · Stack · Separator · ScrollArea · Sticky |
 | `components/select/` | Combobox · MultiSelect |
 | `components/effects/` | Glass · Marquee · Backdrop |
-| `components/specialized/` | Accordion · Collapsible · Toggle · Calendar · DatePicker |
+| `components/specialized/` | Accordion · Collapsible · Toggle · Calendar · DatePicker (legacy — prefer forms/DateField) |
 | `components/boundary/` | ErrorBoundary |
 
 Imports stay flat — group folders are organisational.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.511",
+  "version": "2.1.513",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -128,7 +128,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.511",
+    "@djangocfg/i18n": "^2.1.513",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,8 +206,8 @@
     "@chenglou/pretext": "^0.0.8"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.511",
-    "@djangocfg/typescript-config": "^2.1.511",
+    "@djangocfg/i18n": "^2.1.513",
+    "@djangocfg/typescript-config": "^2.1.513",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/components/data/calendar/calendar.tsx

@@ -1,12 +1,19 @@
 "use client"
 
+import { enUS, ko, ru, type Locale } from 'date-fns/locale';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import * as React from 'react';
 import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 
+import { useLocaleOptional } from '@djangocfg/i18n';
 import { cn } from '../../../lib/utils';
 import { Button, buttonVariants } from '../../forms/button';
 
+/** App locale code → date-fns Locale for react-day-picker (month/weekday
+ *  names). `useLocaleOptional` returns null with no I18nProvider, so the
+ *  calendar still works standalone (falls back to English). */
+const DATE_FNS_LOCALES: Record<string, Locale> = { en: enUS, ru, ko };
+
 function Calendar({
   className,
   classNames,
@@ -15,17 +22,27 @@ function Calendar({
   buttonVariant = "ghost",
   formatters,
   components,
+  locale,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
   buttonVariant?: React.ComponentProps<typeof Button>["variant"]
 }) {
   const defaultClassNames = getDefaultClassNames()
 
+  // Localize month/weekday names from the app locale. An explicit `locale` prop
+  // still wins (the caller can override), and a bare calendar with no provider
+  // falls back to English.
+  const appLocale = useLocaleOptional()
+  const resolvedLocale = locale ?? (appLocale ? DATE_FNS_LOCALES[appLocale] : undefined)
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
+      locale={resolvedLocale}
+      // Cell size: compact by default (fits a narrow popover); roomier on ≥sm
+      // so the desktop popover isn't cramped.
       className={cn(
-        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "bg-background group/calendar p-3 [--cell-size:1.75rem] sm:[--cell-size:2.25rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -96,17 +113,27 @@ function Calendar({
           defaultClassNames.week_number
         ),
         day: cn(
-          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          // Range end-caps use `rounded-lg` to MATCH the single-day / today
+          // radius (`rounded-lg` on the button). Previously these were
+          // `rounded-l-md`/`rounded-r-md`, which stamped a 6px radius onto just
+          // the left OR right corners of a cell — so today/selected days at a
+          // row edge came out asymmetric (sharp one side, round the other).
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-lg [&:last-child[data-selected=true]_button]:rounded-r-lg",
           defaultClassNames.day
         ),
         range_start: cn(
-          "bg-accent rounded-l-md",
+          "bg-accent rounded-l-lg",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        range_end: cn("bg-accent rounded-r-lg", defaultClassNames.range_end),
         today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          // "Today" ring only when NOT the selected day — otherwise the accent
+          // panel bled out behind the primary selection and `rounded-none`
+          // squared off one cell, so a selected "today" looked lop-sided vs
+          // other selected days. When selected, the selection styles own the
+          // cell entirely (full `rounded-md`, primary fill).
+          "rounded-lg data-[selected=true]:bg-transparent data-[selected=true]:text-inherit data-[selected=false]:bg-accent data-[selected=false]:text-accent-foreground",
           defaultClassNames.today
         ),
         outside: cn(
@@ -197,7 +224,12 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-1 [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring",
+        // Centered content + a radius that scales with the (now larger) cell so
+        // the selected day reads as a rounded square, not a hard box.
+        "flex aspect-square h-auto w-full min-w-[--cell-size] flex-col items-center justify-center gap-1 rounded-lg font-normal leading-none",
+        "data-[range-end=true]:rounded-lg data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-lg",
+        "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-1 [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}

package/src/components/data/table/index.tsx

@@ -47,6 +47,9 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement> & { sticky?: boolean }
 >(({ className, sticky = false, ...props }, ref) => (
+  // The header band KEEPS `--border`: it divides labels from data, which is a
+  // structural edge rather than one row from the next. Frame and header are
+  // the two strong lines; everything between rows is quieter.
   // Tinted header band with a solid bottom border so the column labels
   // separate clearly from the body in both light and dark.
   // When `sticky`, the band must be fully opaque (solid `bg-muted`, not the
@@ -104,7 +107,11 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-accent",
+      // `--divider`, not `--border`. A row separator lives INSIDE the panel, so
+      // it must read as weaker than the frame around it; both drawing
+      // `--border` made five internal lines shout as loudly as the one edge,
+      // and the table read as a grid of boxes rather than a list.
+      "border-b border-divider transition-colors hover:bg-muted/50 data-[state=selected]:bg-accent",
       className
     )}
     {...props}

package/src/components/forms/checkbox/index.tsx

@@ -14,7 +14,9 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-[1.125rem] w-[1.125rem] shrink-0 rounded-[4px] border border-input bg-background shadow-none",
+      // `select-none`: the box itself is a click target, and a drag that starts
+      // on it must not paint a text selection across the row it lives in.
+      "peer h-[1.125rem] w-[1.125rem] shrink-0 select-none rounded-[4px] border border-input bg-background shadow-none",
       "transition-colors duration-150",
       "focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
       "disabled:cursor-not-allowed disabled:opacity-40",

package/src/components/forms/datetime-field/date-field.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+/**
+ * DateField — native `<input type="date">` engine + our skin + optional
+ * `Calendar` popover. Type the date, or click the chevron to pick from the grid.
+ * Wire value is `YYYY-MM-DD` (native semantics, timezone-less).
+ *
+ * Replaces the click-only `DatePicker` (kept as a back-compat alias).
+ */
+
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { useIsTouch } from '../../../hooks/media';
+import { Popover, PopoverContent, PopoverTrigger } from '../../overlay/popover';
+import { Calendar } from '../../data/calendar/calendar';
+import { formatDateString, parseDateString } from './date-time-utils';
+import { NativeFieldShell, NATIVE_FIELD_INPUT_CLASS } from './native-field-shell';
+import { IconTrigger, PopoverChevron } from './popover-chevron';
+
+export interface DateFieldProps {
+  /** Value as `YYYY-MM-DD`. Controlled. */
+  value?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  /** Invalid state — usually driven by the `Field` / `Form` layer. */
+  invalid?: boolean;
+  /** Native min/max (`YYYY-MM-DD`); also bound the calendar grid. */
+  min?: string;
+  max?: string;
+  /**
+   * Show the calendar chevron + grid.
+   *
+   * Default `undefined` = AUTO: shown on fine-pointer (mouse) devices, hidden on
+   * coarse-pointer (touch) ones, which get the OS date wheel from the native
+   * input instead — a bigger, better tap target than our mouse-first grid. Pass
+   * an explicit `true`/`false` to force it.
+   */
+  showPopover?: boolean;
+  /** Form field name — the native input IS the form control. */
+  name?: string;
+  /**
+   * DOM id for the native control, so an external `<label htmlFor>` binds to
+   * the field a user actually focuses. Without it a caller replacing a bare
+   * `<input id=…>` with this component silently breaks its own label: the
+   * text still renders, but clicking it focuses nothing.
+   */
+  id?: string;
+
+  className?: string;
+  align?: 'start' | 'center' | 'end';
+  'aria-label'?: string;
+}
+
+export const DateField = React.forwardRef<HTMLInputElement, DateFieldProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      disabled = false,
+      invalid = false,
+      min,
+      max,
+      showPopover,
+      name,
+      id,
+      className,
+      align = 'start',
+      'aria-label': ariaLabel,
+    },
+    ref,
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internal, setInternal] = React.useState(defaultValue ?? '');
+    const value = isControlled ? controlledValue : internal;
+
+    const [open, setOpen] = React.useState(false);
+
+    // AUTO popover — see the showPopover prop doc. Touch → OS date wheel.
+    const isTouch = useIsTouch();
+    const withPopover = showPopover ?? !isTouch;
+
+    const commit = React.useCallback(
+      (next: string) => {
+        if (!isControlled) setInternal(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange],
+    );
+
+    const selected = parseDateString(value);
+    const fromDate = min ? parseDateString(min) : undefined;
+    const toDate = max ? parseDateString(max) : undefined;
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <NativeFieldShell
+          icon={
+            withPopover ? (
+              <PopoverTrigger asChild>
+                <IconTrigger disabled={disabled} label="Open calendar">
+                  <CalendarIcon aria-hidden />
+                </IconTrigger>
+              </PopoverTrigger>
+            ) : (
+              <CalendarIcon aria-hidden />
+            )
+          }
+          iconOpensPopover={withPopover}
+          invalid={invalid}
+          disabled={disabled}
+          className={className}
+          popoverTrigger={
+            withPopover ? (
+              <PopoverTrigger asChild>
+                <PopoverChevron disabled={disabled} label="Open calendar" />
+              </PopoverTrigger>
+            ) : null
+          }
+        >
+          <input
+            ref={ref}
+            type="date"
+            className={NATIVE_FIELD_INPUT_CLASS}
+            value={value}
+            onChange={(e) => commit(e.target.value)}
+            disabled={disabled}
+            min={min}
+            max={max}
+            name={name}
+            id={id}
+            aria-label={ariaLabel}
+            aria-invalid={invalid || undefined}
+          />
+        </NativeFieldShell>
+        {withPopover ? (
+          <PopoverContent
+            // Short popover (calendar only) → no height cap; let Radix flip it
+            // above the field when there's no room below, rather than clipping.
+            className="w-auto p-0"
+            align={align}
+            collisionPadding={12}
+          >
+            <Calendar
+              mode="single"
+              selected={selected}
+              onSelect={(date) => {
+                commit(date ? formatDateString(date) : '');
+                setOpen(false);
+              }}
+              disabled={disabled}
+              fromDate={fromDate}
+              toDate={toDate}
+              initialFocus
+            />
+          </PopoverContent>
+        ) : null}
+      </Popover>
+    );
+  },
+);
+DateField.displayName = 'DateField';

package/src/components/forms/datetime-field/date-time-field.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+/**
+ * DateTimeField — the combined date+time field that ui-core was missing. Native
+ * `<input type="datetime-local">` engine + our skin; the popover pairs the
+ * `Calendar` grid with the time columns so a scheduler UI is one control, not a
+ * hand-wired DatePicker + TimePicker.
+ *
+ * Wire value is `YYYY-MM-DDTHH:mm` (native `datetime-local` semantics,
+ * timezone-less wall-clock).
+ */
+
+import { CalendarClock, Clock } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import { useIsTouch } from '../../../hooks/media';
+import { Popover, PopoverContent, PopoverTrigger } from '../../overlay/popover';
+import { Calendar } from '../../data/calendar/calendar';
+import {
+  formatDateString,
+  joinDateTime,
+  parseDateString,
+  splitDateTime,
+} from './date-time-utils';
+import { NativeFieldShell, NATIVE_FIELD_INPUT_CLASS } from './native-field-shell';
+import { IconTrigger, PopoverChevron } from './popover-chevron';
+
+export interface DateTimeFieldProps {
+  /** Value as `YYYY-MM-DDTHH:mm`. Controlled. */
+  value?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  /** Invalid state — usually driven by the `Field` / `Form` layer. */
+  invalid?: boolean;
+  /** Native min/max (`YYYY-MM-DDTHH:mm`). */
+  min?: string;
+  max?: string;
+  /**
+   * Show the popover chevron + combined calendar/time picker.
+   *
+   * Default `undefined` = AUTO: shown on fine-pointer (mouse) devices, hidden on
+   * coarse-pointer (touch) ones. On touch the native `datetime-local` input
+   * opens the OS date+time wheel — a better tap target than our tall combined
+   * grid, which is also the hardest of the three to fit on a small screen. Pass
+   * an explicit `true`/`false` to force it.
+   */
+  showPopover?: boolean;
+  /** Form field name — the native input IS the form control. */
+  name?: string;
+  /**
+   * DOM id for the native control, so an external `<label htmlFor>` binds to
+   * the field a user actually focuses. Without it a caller replacing a bare
+   * `<input id=…>` with this component silently breaks its own label: the
+   * text still renders, but clicking it focuses nothing.
+   */
+  id?: string;
+
+  className?: string;
+  align?: 'start' | 'center' | 'end';
+  'aria-label'?: string;
+}
+
+export const DateTimeField = React.forwardRef<HTMLInputElement, DateTimeFieldProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      disabled = false,
+      invalid = false,
+      min,
+      max,
+      showPopover,
+      name,
+      id,
+      className,
+      align = 'start',
+      'aria-label': ariaLabel,
+    },
+    ref,
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internal, setInternal] = React.useState(defaultValue ?? '');
+    const value = isControlled ? controlledValue : internal;
+
+    const [open, setOpen] = React.useState(false);
+
+    // AUTO popover — see the showPopover prop doc. Touch → OS date+time wheel.
+    const isTouch = useIsTouch();
+    const withPopover = showPopover ?? !isTouch;
+
+    const commit = React.useCallback(
+      (next: string) => {
+        if (!isControlled) setInternal(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange],
+    );
+
+    const { date, time } = splitDateTime(value);
+    const selected = parseDateString(date);
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <NativeFieldShell
+          icon={
+            withPopover ? (
+              <PopoverTrigger asChild>
+                <IconTrigger disabled={disabled} label="Open date & time picker">
+                  <CalendarClock aria-hidden />
+                </IconTrigger>
+              </PopoverTrigger>
+            ) : (
+              <CalendarClock aria-hidden />
+            )
+          }
+          iconOpensPopover={withPopover}
+          invalid={invalid}
+          disabled={disabled}
+          className={className}
+          popoverTrigger={
+            withPopover ? (
+              <PopoverTrigger asChild>
+                <PopoverChevron disabled={disabled} label="Open date & time picker" />
+              </PopoverTrigger>
+            ) : null
+          }
+        >
+          <input
+            ref={ref}
+            type="datetime-local"
+            className={NATIVE_FIELD_INPUT_CLASS}
+            value={value}
+            onChange={(e) => commit(e.target.value)}
+            disabled={disabled}
+            min={min}
+            max={max}
+            name={name}
+            id={id}
+            aria-label={ariaLabel}
+            aria-invalid={invalid || undefined}
+          />
+        </NativeFieldShell>
+        {withPopover ? (
+          // The official shadcn-2026 shape: the popover holds ONLY the calendar
+          // (date), and time is a small NATIVE `<input type="time">` beneath it.
+          // No scroll columns — those were the source of the pill/height/width
+          // churn. `align="start"` (not `align` default center) is what stops
+          // the popover sliding off the right edge on a narrow surface; Radix
+          // still auto-flips on collision. `w-auto p-0` sizes to the calendar.
+          <PopoverContent
+            // `w-auto` sizes to the calendar; `align="start"` keeps it under the
+            // left edge so it doesn't slide off-screen. NO `maxHeight` cap here:
+            // the calendar + time input is a SHORT popover, and
+            // `--radix-popover-content-available-height` is the gap from the
+            // trigger to the viewport edge — when the field sits low on screen
+            // that gap is tiny, so the cap was CLIPPING the calendar (and the
+            // time row under it). Instead we let Radix's default avoidCollisions
+            // flip the whole popover ABOVE the field when there's no room below.
+            // `collisionPadding` just keeps it off the very edge.
+            className="w-auto p-0"
+            align="start"
+            collisionPadding={12}
+          >
+            <Calendar
+              mode="single"
+              selected={selected}
+              onSelect={(picked) => {
+                // Keep the time; swap the date. Default to 00:00 on a first pick
+                // of an empty field so the result is a valid datetime.
+                const nextDate = picked ? formatDateString(picked) : '';
+                commit(joinDateTime(nextDate, time || '00:00'));
+              }}
+              disabled={disabled}
+              initialFocus
+            />
+            {/* Time row: a full, comfortable field — not a cramped chip. The
+              * label + clock icon sit left; the native time input fills the
+              * rest at the same height as the main field (h-10) so it's an easy
+              * tap/click target and reads as a real input. */}
+            <div className="flex items-center gap-2 border-t p-3">
+              <Clock className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+              <span className="text-sm font-medium text-muted-foreground">Time</span>
+              <input
+                type="time"
+                aria-label="Time"
+                // Explicit width, not min-w on a flex — a native `<input>` is a
+                // replaced element and won't reliably grow to a flex min-width,
+                // which is why the earlier `min-w-[8rem]` did nothing. A fixed
+                // width + centered segments gives the value real breathing room.
+                style={{ width: '8.5rem' }}
+                className={cn(
+                  // `--center` variant centers the native segments (see
+                  // datetime-field.css); it sets its own display/justify.
+                  'native-datetime-input native-datetime-input--center ml-auto h-10 rounded-[var(--radius)]',
+                  'border border-border bg-input px-4 text-base tabular-nums text-foreground shadow-sm md:text-sm',
+                  'focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+                  'disabled:cursor-not-allowed disabled:opacity-50',
+                )}
+                value={time}
+                onChange={(e) => commit(joinDateTime(date, e.target.value))}
+                disabled={disabled}
+              />
+            </div>
+          </PopoverContent>
+        ) : null}
+      </Popover>
+    );
+  },
+);
+DateTimeField.displayName = 'DateTimeField';

package/src/components/forms/datetime-field/date-time-utils.ts

@@ -0,0 +1,48 @@
+/**
+ * Local-date <-> string helpers for the native fields.
+ *
+ * Native `type="date"` / `type="datetime-local"` speak plain, timezone-less
+ * wall-clock strings (`YYYY-MM-DD`, `YYYY-MM-DDTHH:mm`). We parse/format them
+ * MANUALLY rather than via `new Date(str)` / `.toISOString()` — those go through
+ * UTC and shift the calendar day for users west/east of UTC (the classic
+ * "picked the 5th, got the 4th" bug). The `Calendar` popover works in `Date`, so
+ * we bridge with these local-safe converters.
+ */
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+/** `YYYY-MM-DD` -> local `Date` (midnight local). Empty/invalid -> undefined. */
+export function parseDateString(value: string): Date | undefined {
+  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})/);
+  if (!match) return undefined;
+  const [, y, m, d] = match;
+  return new Date(Number(y), Number(m) - 1, Number(d));
+}
+
+/** local `Date` -> `YYYY-MM-DD`. */
+export function formatDateString(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+/** `YYYY-MM-DDTHH:mm` -> { date, time } split. */
+export function splitDateTime(value: string): { date: string; time: string } {
+  const [date = '', time = ''] = value.split('T');
+  return { date, time };
+}
+
+/** Join a `YYYY-MM-DD` date and `HH:mm` time into `YYYY-MM-DDTHH:mm`. Returns
+ *  empty string when the date is missing (a time alone has no valid datetime). */
+export function joinDateTime(date: string, time: string): string {
+  if (!date) return '';
+  return `${date}T${time || '00:00'}`;
+}
+
+/** `YYYY-MM-DDTHH:mm` -> local `Date`. Empty/invalid -> undefined. */
+export function parseDateTimeString(value: string): Date | undefined {
+  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
+  if (!match) return undefined;
+  const [, y, mo, d, h, mi] = match;
+  return new Date(Number(y), Number(mo) - 1, Number(d), Number(h), Number(mi));
+}

package/src/components/forms/datetime-field/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Native-engine date/time fields.
+ *
+ * A typeable, token-skinned field family built on the browser's native
+ * `<input type="date|time|datetime-local">` engine, with an optional
+ * calendar/columns popover for pointer users. See
+ * `@dev/planned/ui-core-datetime-fields/PLAN.md` for the rationale.
+ *
+ * @module datetime-field
+ */
+
+export { DateField } from './date-field';
+export type { DateFieldProps } from './date-field';
+
+export { TimeField } from './time-field';
+export type { TimeFieldProps } from './time-field';
+
+export { DateTimeField } from './date-time-field';
+export type { DateTimeFieldProps } from './date-time-field';
+
+// Low-level building blocks, exported for advanced composition.
+export { NativeFieldShell, NATIVE_FIELD_INPUT_CLASS } from './native-field-shell';
+export type { NativeFieldShellProps } from './native-field-shell';
+export {
+  parseDateString,
+  formatDateString,
+  parseDateTimeString,
+  splitDateTime,
+  joinDateTime,
+} from './date-time-utils';

package/src/components/forms/datetime-field/native-field-shell.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+/**
+ * NativeFieldShell — the shared visual layer for the native-engine date/time
+ * fields (`DateField`, `TimeField`, `DateTimeField`).
+ *
+ * The strategy (see @dev/planned/ui-core-datetime-fields/PLAN.md): the browser's
+ * native `<input type="date|time|datetime-local">` is the *input engine* — it
+ * gives segmented keyboard entry, locale-aware order, 12/24h, arrow-key
+ * increment, screen-reader support, and OS wheels on mobile for free. This shell
+ * owns everything the native input CANNOT do to our standard: the token-styled
+ * box (`bg-input`, `border-border`, `--ring` focus, `--radius`), a leading
+ * lucide icon, invalid/disabled states, and an OPTIONAL trailing popover trigger
+ * for pointer users.
+ *
+ * The native browser indicator (the clock/calendar glyph) is suppressed via
+ * `native-datetime-input` (see datetime-field.css) so there is exactly one
+ * icon — ours — and one picker — ours. Typing in the field and opening the
+ * popover both write the same value.
+ */
+
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+export interface NativeFieldShellProps {
+  /** Leading icon (lucide element). */
+  icon?: React.ReactNode;
+  /**
+   * When true, the leading icon is a real, sizeable click target that opens the
+   * popover — not a decorative glyph. The field wraps the shell in a
+   * `PopoverTrigger asChild` around the icon so tapping the icon (a much bigger,
+   * left-edge target than the small chevron) opens the picker. The centre of the
+   * field still belongs to the native `<input>` for typing.
+   */
+  iconOpensPopover?: boolean;
+  /** Invalid state — wires `aria-invalid` and a destructive border. Usually
+   *  driven by the surrounding `Field` / `Form` layer. */
+  invalid?: boolean;
+  disabled?: boolean;
+  className?: string;
+  /** The native `<input>` element, already typed and wired by the field. */
+  children: React.ReactNode;
+  /**
+   * Optional popover affordance. When provided, a trailing chevron button is
+   * shown; `open`/`onOpenChange` are controlled by the field so the icon and
+   * the button share one popover.
+   */
+  popoverTrigger?: React.ReactNode;
+}
+
+/**
+ * The class applied to the native `<input>` INSIDE the shell. Mirrors the
+ * standard `Input` surface/focus (bg-input, border, --ring) but drops the
+ * focus ring here — the ring is drawn on the shell so it wraps the icon and
+ * popover button too, reading as one control.
+ */
+export const NATIVE_FIELD_INPUT_CLASS = cn(
+  'native-datetime-input',
+  'peer w-full bg-transparent text-base md:text-sm outline-none',
+  'text-foreground placeholder:text-muted-foreground',
+  'disabled:cursor-not-allowed',
+  // Empty native date/time inputs render their placeholder segments muted so an
+  // unset field reads like a placeholder, not a value.
+  '[&:invalid]:text-muted-foreground',
+);
+
+/**
+ * The outer box. Draws the token surface + the crisp `--ring` focus edge when
+ * anything inside is focused (`focus-within`), matching the standard Input's
+ * sharp Vercel/Linear look rather than a blurry halo.
+ */
+export const NativeFieldShell = React.forwardRef<HTMLDivElement, NativeFieldShellProps>(
+  ({ icon, iconOpensPopover, invalid, disabled, className, children, popoverTrigger }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-invalid={invalid ? '' : undefined}
+        data-disabled={disabled ? '' : undefined}
+        aria-invalid={invalid || undefined}
+        className={cn(
+          'flex h-10 w-full items-center gap-2 rounded-[var(--radius)] border bg-input px-3 shadow-sm',
+          'transition-[color,background-color,border-color,box-shadow]',
+          'border-border',
+          // Crisp focus edge on the whole shell (border + 1px ring = ~2px clean
+          // outline). `:focus-within` so it lights whether the user tabs into
+          // the input or the popover button.
+          'focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+          invalid &&
+            'border-destructive focus-within:border-destructive focus-within:ring-destructive',
+          disabled && 'cursor-not-allowed opacity-50',
+          className,
+        )}
+      >
+        {icon ? (
+          <span
+            className={cn(
+              'flex shrink-0 text-muted-foreground [&_svg]:size-4',
+              // Decorative by default (clicks fall through to the input). When
+              // the icon is a real popover trigger, it must receive clicks.
+              !iconOpensPopover && 'pointer-events-none',
+            )}
+          >
+            {icon}
+          </span>
+        ) : null}
+        {children}
+        {popoverTrigger}
+      </div>
+    );
+  },
+);
+NativeFieldShell.displayName = 'NativeFieldShell';

package/src/components/forms/datetime-field/popover-chevron.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+/**
+ * Shared popover triggers for the date/time fields, so the two large click
+ * targets (leading icon + trailing chevron) look and behave identically across
+ * all three fields. Both are `PopoverTrigger asChild` children, so the shell's
+ * `focus-within` ring covers them.
+ *
+ * Why two targets: the CENTRE of the field is the native `<input>` (for typing),
+ * so the popover can't open from there without stealing keyboard entry. The
+ * icon and the chevron are the two edges that DON'T type, so both open the
+ * picker — the icon in particular is a big, obvious left-edge target, far easier
+ * to hit than a lone chevron.
+ */
+
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+export const PopoverChevron = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { label?: string }
+>(({ className, label = 'Open picker', ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    aria-label={label}
+    className={cn(
+      'flex size-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground',
+      'transition-colors hover:bg-accent hover:text-foreground',
+      'focus-visible:outline-none disabled:pointer-events-none',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="size-4" aria-hidden />
+  </button>
+));
+PopoverChevron.displayName = 'PopoverChevron';
+
+/**
+ * IconTrigger — the leading icon rendered as a real, comfortably-sized popover
+ * button. It hugs the left edge (`-ml-1` reclaims the shell's px-3) and carries
+ * a generous padded hit area so the target is far bigger than the glyph itself.
+ */
+export const IconTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { label?: string }
+>(({ className, label = 'Open picker', children, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    aria-label={label}
+    className={cn(
+      '-ml-1 flex h-8 shrink-0 items-center rounded-[var(--radius-sm)] px-1.5 text-muted-foreground',
+      'transition-colors hover:bg-accent hover:text-foreground',
+      'focus-visible:outline-none disabled:pointer-events-none [&_svg]:size-4',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </button>
+));
+IconTrigger.displayName = 'IconTrigger';

package/src/components/forms/datetime-field/time-field.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+/**
+ * TimeField — native `<input type="time">` in our token skin. Type `14:30`
+ * straight in (segmented keyboard entry, arrow increment); on touch the OS time
+ * wheel opens on tap. AM/PM vs 24-hour is decided by the browser from the user's
+ * locale — we don't render our own picker, so there's nothing to desync.
+ *
+ * Wire value is `HH:mm` (24h) — or `HH:mm:ss` when `step` yields seconds —
+ * matching the native input and the old `TimePicker` contract, so migration from
+ * the click-only `TimePicker` (kept as a back-compat alias) is mechanical.
+ */
+
+import { Clock } from 'lucide-react';
+import * as React from 'react';
+
+import { NativeFieldShell, NATIVE_FIELD_INPUT_CLASS } from './native-field-shell';
+
+export interface TimeFieldProps {
+  /** Value as `HH:mm` (24h). Controlled. */
+  value?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  /** Invalid state — usually driven by the `Field` / `Form` layer. */
+  invalid?: boolean;
+  /** Native min/max (`HH:mm`). */
+  min?: string;
+  max?: string;
+  /**
+   * Native `step` in seconds. `60` (default) → HH:mm; smaller values expose a
+   * seconds segment. Controls the arrow-key increment too.
+   */
+  step?: number;
+  /** Form field name — the native input IS the form control. */
+  name?: string;
+  /**
+   * DOM id for the native control, so an external `<label htmlFor>` binds to
+   * the field a user actually focuses.
+   */
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+}
+
+export const TimeField = React.forwardRef<HTMLInputElement, TimeFieldProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      disabled = false,
+      invalid = false,
+      min,
+      max,
+      step,
+      name,
+      id,
+      className,
+      'aria-label': ariaLabel,
+    },
+    ref,
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [internal, setInternal] = React.useState(defaultValue ?? '');
+    const value = isControlled ? controlledValue : internal;
+
+    const commit = React.useCallback(
+      (next: string) => {
+        if (!isControlled) setInternal(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange],
+    );
+
+    return (
+      <NativeFieldShell
+        icon={<Clock aria-hidden />}
+        invalid={invalid}
+        disabled={disabled}
+        className={className}
+      >
+        <input
+          ref={ref}
+          type="time"
+          className={NATIVE_FIELD_INPUT_CLASS}
+          value={value}
+          onChange={(e) => commit(e.target.value)}
+          disabled={disabled}
+          min={min}
+          max={max}
+          step={step}
+          name={name}
+          id={id}
+          aria-label={ariaLabel}
+          aria-invalid={invalid || undefined}
+        />
+      </NativeFieldShell>
+    );
+  },
+);
+TimeField.displayName = 'TimeField';

package/src/components/forms/label/index.tsx

@@ -7,8 +7,16 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 import { cn } from '../../../lib/utils';
 
+// `select-none` is not cosmetic here.
+//
+// A label is text whose whole purpose is to be CLICKED, and a click that lands
+// slightly off — or a click that drags a pixel — leaves the word highlighted in
+// the selection colour. In a filter rail that reads as a selected FILTER rather
+// than selected TEXT, so the control reports a state the user never set. The
+// same shape appears in every checkbox list, radio group and switch row, which
+// is why it belongs to the primitive and not to any one screen.
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "select-none text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 )
 
 const Label = React.forwardRef<

package/src/components/forms/radio-group/index.tsx

@@ -29,7 +29,9 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        // `select-none` for the same reason as Checkbox and Switch: the dot is
+        // a click target, and a click that drags must not select text.
+        "aspect-square h-4 w-4 shrink-0 select-none rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}

package/src/components/forms/switch/index.tsx

@@ -13,7 +13,9 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       // Track: generous Cloudflare-style pill (44×24) with an inset thumb.
-      "peer group relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
+      // `select-none`: a drag starting on the pill must toggle or do nothing —
+      // never paint a text selection across the row the switch sits in.
+      "peer group relative inline-flex h-6 w-11 shrink-0 cursor-pointer select-none items-center rounded-full",
       "p-0.5 outline-none transition-colors duration-200 ease-out",
       // On/off surfaces — all on-token so every preset & theme follows along.
       "data-[state=unchecked]:bg-input data-[state=checked]:bg-primary",

package/src/components/index.ts

@@ -42,10 +42,30 @@ export type { SegmentedInputProps } from './forms/segmented-input';
 export { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputItemDelete } from './forms/tags-input';
 export type { TagsInputRootProps, TagsInputInputProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputItemDeleteProps } from './forms/tags-input';
 
-// Time Picker
+// Time Picker (click-only legacy; prefer the native-engine TimeField below).
 export { TimePicker } from './forms/time-picker';
 export type { TimePickerProps } from './forms/time-picker';
 
+// Native-engine date/time fields — typeable, token-skinned, optional popover.
+export {
+  DateField,
+  TimeField,
+  DateTimeField,
+  NativeFieldShell,
+  NATIVE_FIELD_INPUT_CLASS,
+  parseDateString,
+  formatDateString,
+  parseDateTimeString,
+  splitDateTime,
+  joinDateTime,
+} from './forms/datetime-field';
+export type {
+  DateFieldProps,
+  TimeFieldProps,
+  DateTimeFieldProps,
+  NativeFieldShellProps,
+} from './forms/datetime-field';
+
 // Editable
 export { Editable, EditablePreview, EditableInput, EditableTextarea } from './forms/editable';
 export type { EditableRootProps, EditablePreviewProps, EditableInputProps, EditableTextareaProps } from './forms/editable';

package/src/components/overlay/popover/index.tsx

@@ -34,6 +34,13 @@ const PopoverContent = React.forwardRef<
     <PopoverPrimitive.Content
       forceMount={forceMount}
       ref={ref}
+      // `data-slot` lets descendants detect they're inside a popover surface.
+      // The Calendar keys its `bg-transparent` override off
+      // `[[data-slot=popover-content]_&]` so a calendar rendered in a popover
+      // drops its own `bg-background` panel and inherits the popover surface —
+      // without this attribute that rule never matches and the calendar shows a
+      // mismatched darker rectangle inside the popover.
+      data-slot="popover-content"
       aria-describedby={undefined}
       align={align}
       sideOffset={sideOffset}

package/src/styles/css/presets/dense.css

@@ -21,9 +21,20 @@
   --radius: 0.25rem;
   --border: hsl(0 0% 24%);
   --input: hsl(0 0% 24%);
-  --divider: hsl(0 0% 46% / 0.18);
+    /* 0.10, not 0.18. A divider separates rows INSIDE a panel, so it must be
+     weaker than that panel's own --border — otherwise the five lines between
+     rows shout as loudly as the one frame around them, which is what was
+     left of "кондово" after the fills were calmed. Over a 12% card this
+     lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
+     hierarchy, frame first. */
+  --divider: hsl(0 0% 46% / 0.10);
   --muted: hsl(0 0% 12%);
-  --card: hsl(0 0% 10%);
+  /* 12%, against an INHERITED --background of 14.5% from dark.css — this
+     preset declares no background of its own, so the card sits DARKER than the
+     page here rather than lighter. Direction is not the contract; the size of
+     the step is. Capped by MAXIMUM_RESTING_SURFACE_GAP in
+     check-preset-contrast.mjs. */
+  --card: hsl(0 0% 12%);
   /* 20%, not 14%: --background is 14.5%, so this was HALF a point — the
      hover was effectively invisible. */
   --accent: hsl(0 0% 20%);

package/src/styles/css/presets/ios.css

@@ -62,7 +62,11 @@
 .dark {
   --background: hsl(240 6% 10%);
   --foreground: hsl(0 0% 96%);
-  --card: hsl(240 6% 16%);
+    /* Three points above --background, not seven. A resting surface is
+     separated by its BORDER; when the fill does that job the page reads as
+     stacked plates and a table looks like a sticker laid over it. Capped by
+     MAXIMUM_RESTING_SURFACE_GAP in check-preset-contrast.mjs. */
+  --card: hsl(240 6% 14%);
   --card-foreground: hsl(0 0% 96%);
   --popover: hsl(240 6% 20%);
   --popover-foreground: hsl(0 0% 96%);
@@ -76,10 +80,20 @@
   --accent-foreground: hsl(0 0% 96%);
   --destructive: hsl(0 100% 67%);
   --destructive-foreground: hsl(0 0% 100%);
-  --border: hsl(240 5% 27%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     definite edge at one device pixel without becoming the loudest thing on
+     the page — which it was once the fills stopped separating surfaces.
+     Capped by MAXIMUM_BORDER_GAP in check-preset-contrast.mjs. */
+  --border: hsl(240 5% 20%);
   --input: hsl(240 5% 22%);
   --ring: hsl(211 100% 55%);
-  --divider: hsl(240 5% 48% / 0.18);
+    /* 0.10, not 0.18. A divider separates rows INSIDE a panel, so it must be
+     weaker than that panel's own --border — otherwise the five lines between
+     rows shout as loudly as the one frame around them, which is what was
+     left of "кондово" after the fills were calmed. Over a 12% card this
+     lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
+     hierarchy, frame first. */
+  --divider: hsl(240 5% 48% / 0.10);
   --radius: 0.75rem;
   --overlay: hsl(0 0% 0% / 0.55);
   --sidebar-background: hsl(240 6% 8%);

package/src/styles/css/presets/macos.css

@@ -83,7 +83,11 @@
 .dark {
   --background: hsl(240 5% 8%);
   --foreground: hsl(0 0% 95%);
-  --card: hsl(240 3% 15%);
+    /* Three points above --background, not seven. A resting surface is
+     separated by its BORDER; when the fill does that job the page reads as
+     stacked plates and a table looks like a sticker laid over it. Capped by
+     MAXIMUM_RESTING_SURFACE_GAP in check-preset-contrast.mjs. */
+  --card: hsl(240 3% 12%);
   --card-foreground: hsl(0 0% 95%);
   --popover: hsl(240 3% 20%);
   --popover-foreground: hsl(0 0% 95%);
@@ -99,9 +103,19 @@
   --accent-foreground: hsl(211 100% 72%);
   --destructive: hsl(3 100% 62%);
   --destructive-foreground: hsl(0 0% 9%);
-  --border: hsl(240 3% 22%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     definite edge at one device pixel without becoming the loudest thing on
+     the page — which it was once the fills stopped separating surfaces.
+     Capped by MAXIMUM_BORDER_GAP in check-preset-contrast.mjs. */
+  --border: hsl(240 3% 18%);
   --input: hsl(240 3% 22%);
-  --divider: hsl(240 4% 46% / 0.18);
+    /* 0.10, not 0.18. A divider separates rows INSIDE a panel, so it must be
+     weaker than that panel's own --border — otherwise the five lines between
+     rows shout as loudly as the one frame around them, which is what was
+     left of "кондово" after the fills were calmed. Over a 12% card this
+     lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
+     hierarchy, frame first. */
+  --divider: hsl(240 4% 46% / 0.10);
   --ring: hsl(211 100% 58%);
   --radius: 0.625rem;
   --overlay: hsl(0 0% 0% / 0.55);

package/src/styles/css/presets/soft.css

@@ -34,9 +34,19 @@
   --muted-foreground: hsl(240 5% 64%);
   --accent: hsl(240 5% 16%);
   --accent-foreground: hsl(0 0% 96%);
-  --border: hsl(240 5% 20%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     definite edge at one device pixel without becoming the loudest thing on
+     the page — which it was once the fills stopped separating surfaces.
+     Capped by MAXIMUM_BORDER_GAP in check-preset-contrast.mjs. */
+  --border: hsl(240 5% 18%);
   --input: hsl(240 5% 20%);
-  --divider: hsl(240 5% 48% / 0.18);
+    /* 0.10, not 0.18. A divider separates rows INSIDE a panel, so it must be
+     weaker than that panel's own --border — otherwise the five lines between
+     rows shout as loudly as the one frame around them, which is what was
+     left of "кондово" after the fills were calmed. Over a 12% card this
+     lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
+     hierarchy, frame first. */
+  --divider: hsl(240 5% 48% / 0.10);
   --radius: 1rem;
   --sidebar-background: hsl(240 6% 6%);
   --sidebar-accent: hsl(240 5% 14%);

package/src/styles/css/presets/windows.css

@@ -92,9 +92,19 @@
   --accent-foreground: hsl(200 100% 75%);
   --destructive: hsl(0 90% 62%);
   --destructive-foreground: hsl(0 0% 100%);
-  --border: hsl(0 0% 28%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     definite edge at one device pixel without becoming the loudest thing on
+     the page — which it was once the fills stopped separating surfaces.
+     Capped by MAXIMUM_BORDER_GAP in check-preset-contrast.mjs. */
+  --border: hsl(0 0% 23%);
   --input: hsl(0 0% 24%);
-  --divider: hsl(0 0% 46% / 0.18);
+    /* 0.10, not 0.18. A divider separates rows INSIDE a panel, so it must be
+     weaker than that panel's own --border — otherwise the five lines between
+     rows shout as loudly as the one frame around them, which is what was
+     left of "кондово" after the fills were calmed. Over a 12% card this
+     lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
+     hierarchy, frame first. */
+  --divider: hsl(0 0% 46% / 0.10);
   --ring: hsl(200 100% 69%);
   --overlay: hsl(0 0% 0% / 0.55);
   --radius: 0.375rem;

package/src/styles/css/theme/dark.css

@@ -44,14 +44,24 @@
   --destructive-foreground: hsl(0 0% 98%);
   /* Soft warm border — Claude draws hairlines from a light border at low
    * contrast, so a mid warm-gray keeps lines visible but never harsh. */
-  --border: hsl(48 3% 28%);
+    /* A hairline divides, it does not glow. Ten points over --background is a
+     definite edge at one device pixel without becoming the loudest thing on
+     the page — which it was once the fills stopped separating surfaces.
+     Capped by MAXIMUM_BORDER_GAP in check-preset-contrast.mjs. */
+  --border: hsl(48 3% 24%);
   /* Input surface — a notch above card so fields read as raised controls. */
   --input: hsl(48 2.5% 24%);
   /* Divider — TRANSLUCENT hairline (Apple-style): a light warm-gray at low alpha
    * that dissolves into whatever sits behind it, so structural separators
    * (columns, headers, rows) stay quiet on the dark page instead of reading as a
    * hard opaque rule. Backs default + django-cfg (they don't re-declare it). */
-  --divider: hsl(48 4% 46% / 0.18);
+    /* 0.10, not 0.18. A divider separates rows INSIDE a panel, so it must be
+     weaker than that panel's own --border — otherwise the five lines between
+     rows shout as loudly as the one frame around them, which is what was
+     left of "кондово" after the fills were calmed. Over a 12% card this
+     lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
+     hierarchy, frame first. */
+  --divider: hsl(48 4% 46% / 0.10);
   /* Overlay — modal scrim / backdrop behind dialogs, drawers, sheets. Black in
    * both themes; slightly darker here so it still reads on the dark page. */
   --overlay: hsl(0 0% 0% / 0.7);

package/src/styles/css/utilities/datetime-field.css

@@ -0,0 +1,65 @@
+/**
+ * Native date/time field — chrome suppression.
+ *
+ * The native-engine fields (`DateField` / `TimeField` / `DateTimeField`) use a
+ * real `<input type="date|time|datetime-local">` as the input engine and wrap it
+ * in `NativeFieldShell`, which supplies OUR icon and OUR popover. So the
+ * browser's built-in indicator glyph and inner spin buttons must be hidden —
+ * otherwise there are two icons and a double-picker.
+ *
+ * The `.native-datetime-input` class is applied by the field to the raw input.
+ */
+
+.native-datetime-input::-webkit-calendar-picker-indicator {
+  /* Kill the browser clock/calendar button entirely. We suppress it rather than
+   * repurpose it because clicking it opens the OS picker, which would race our
+   * own popover. Our leading icon / chevron drives our popover instead. */
+  display: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.native-datetime-input::-webkit-inner-spin-button,
+.native-datetime-input::-webkit-outer-spin-button {
+  display: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+/* Firefox draws a clear ("×") button on filled date inputs — hide it so the
+ * clearing affordance stays inside our own UI, consistent across browsers. */
+.native-datetime-input::-moz-clear {
+  display: none;
+}
+
+/* Segment text follows the active theme. (No blanket `padding:0` here — the
+ * in-shell inputs already sit flush via their own flex layout, and the standalone
+ * time input in the DateTimeField popover NEEDS its px-* padding; a global reset
+ * would fight it.) */
+.native-datetime-input {
+  color-scheme: light dark;
+}
+
+/* Horizontal centering of a native time/date input's VALUE.
+ *
+ * `text-align: center` on the input alone does NOT center a `type="time"` value:
+ * the value is a group of segments (HH, MM, …) the browser lays out inside
+ * `::-webkit-datetime-edit`, which is left-aligned and only as wide as its
+ * content. The reliable cross-engine fix (verified against MDN + WebKit
+ * internals) is to make the INPUT ITSELF a centering flex container — that
+ * centers `::-webkit-datetime-edit` as a flex child regardless of text-align —
+ * and keep `text-align:center` for Firefox (which ignores `::-webkit-*` and
+ * renders the value as plain inline text). Opt in with
+ * `.native-datetime-input--center`. */
+.native-datetime-input--center {
+  display: inline-flex;
+  justify-content: center;
+  text-align: center; /* Firefox path */
+}
+.native-datetime-input--center::-webkit-datetime-edit {
+  text-align: center; /* Chrome/Safari: centers the segment group */
+}
+.native-datetime-input--center::-webkit-datetime-edit-fields-wrapper {
+  justify-content: center; /* belt-and-braces for older Safari */
+}

package/src/styles/css/utilities.css

@@ -10,6 +10,7 @@
 @import './utilities/divider.css';
 @import './utilities/overlay.css';
 @import './utilities/controls.css';
+@import './utilities/datetime-field.css';
 @import './utilities/step.css';
 @import './utilities/animations.css';
 @import './utilities/glass.css';