j3w1/theme implementation brief — date-picker
theme: j3w1-theme 1.1.0  profile: default  sourceDigest: sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=
pin: https://raw.githubusercontent.com/j3w1/theme/v1.1.0/exports/components/date-picker.json
spec: spec/components/date-picker.md  site: https://j3w1.github.io/theme/reference/#c-date-picker
maturity: stable  priority: R1

Summary: A themed date editor and calendar, alone or as a from/to pair, backed by native form values and constraints.

Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.
Tokens (resolved):
  root.bg                 #000000  ({color.surface.input})  use
  root.border             #a3676b  ({color.border.control})  use-and-report (D-007)
  root.bg-hover           #1c0a09  ({color.interaction.hover.bg})  use
  root.border-focus       #e53935  ({color.border.active})  use
  root.ring               #e53935  ({color.interaction.focus.ring})  use
  root.ring-invalid       #ffa2a7  ({color.interaction.focus.ring-container})  use
  root.border-invalid     #e53935  ({color.status.danger.border})  use
  root.border-disabled    #7d1310  ({color.border.disabled})  use
  root.bg-disabled        #160b0b  ({color.interaction.disabled.bg})  use
  root.border-readonly    #2b0e0d  ({color.border.divider})  use-and-report (D-008)
  root.bg-readonly        #000000  ({color.surface.canvas})  use
  input.text              #e99499  ({color.text.default})  use
  input.text-disabled     #8a5559  ({color.text.disabled})  use
  input.caret             #e99499  ({color.code.caret})  use
  label.text              #ffa2a7  ({color.text.bright})  use
  legend.text             #ffa2a7  ({color.text.bright})  use
  separator.text          #bd787d  ({color.text.muted})  use
  help.text               #bd787d  ({color.text.muted})  use
  message.text            #f73f35  ({color.status.danger.text})  use
  calendar.bg             #160b0b  ({color.surface.raised})  use
  calendar.border         #e53935  ({color.border.overlay})  use-and-report (D-008)
  calendar.text           #e99499  ({color.text.default})  use
  calendar.selected-bg    #531310  ({color.interaction.selection.bg})  use
  calendar.selected-text  #f4eeee  ({color.interaction.selection.text})  use
State dependency disclosures: D-007

States: default, hover, focus-visible, invalid, invalid+focus-visible, disabled, read-only
  default: Input surface, default text and control border.
  hover: The declared hover fill.
  focus-visible: Active border and the canonical focus ring.
  invalid: Danger border and a linked message.
  invalid+focus-visible: Danger border plus the container focus ring.
  disabled: Disabled colors; editor and calendar actions unavailable.
  read-only: Readable canvas text and bottom edge; calendar action unavailable.

Keyboard:
  Tab / Shift+Tab: Moves through the editor, calendar trigger and other controls.
  Alt+Down: Opens the calendar from the editor.
  Arrows / Home / End: Moves among dates; Home and End reach the beginning and end of the week.
  PageUp / PageDown: Moves to the previous or next month.
  Enter / Space: Chooses a focused calendar date or activates a month button.
  Escape: Closes the calendar and returns focus to the editor.

ARIA: Labeled textbox with calendar dialog and roving date grid; native backing input (https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)
Responsive: The box fills its field container with min-width 0; the range pair sits side by side and wraps to two rows below 320px; the label is always stacked above. RTL keeps the from/to order of reading and mirrors the separator.
Portability: Theme-owned editor and calendar backed by a native date input. Keep native min/max/step, labels, form ownership and reset. Without JavaScript the original native control is visible.
  native: GTK4 Calendar in a Popover opened from an Entry; the entry carries the field styling.
  native: Qt QDateEdit with calendarPopup; the popup frame through the QCalendarWidget stylesheet.
  native: Terminal UI: a masked line editor (YYYY-MM-DD); no popup.

Rules: use only these values; no invented colours; radius 0; borders 1px (2px emphasis); focus is a 1px dashed ring, selection is a fill;
do not restyle unrelated elements; report deviations per agents/consume.md; record theme.lock.json at the pinned revision.