@lekoala/date-picker 0.2.0 → 0.4.0

package/README.md

@@ -2,7 +2,7 @@
 
 Small, native-first date picker and inline calendar primitives.
 
-> v0.2: the interaction contract, event names, public styling tokens and the component API are frozen — see [docs/DECISIONS.md](docs/DECISIONS.md). Internal DOM and class names are `.dp-*` implementation details and stay private.
+> The interaction contract, event names, public styling tokens and the component API are frozen — see [docs/DECISIONS.md](docs/DECISIONS.md). Internal DOM and class names are `.dp-*` implementation details and stay private.
 
 This project fills the gap between a normal editable date field and a full scheduling calendar. A plain date input remains the right answer for simple CMS/editing forms. This component becomes useful when a date has context: availability, disabled days, annotations, remote state, start/end relationships, or a mini calendar that navigates another view.
 
@@ -162,7 +162,11 @@ The calendar follows the WAI-ARIA date-picker/grid interaction model:
 
 The picker popup uses native Popover for the top layer and `@lekoala/floating` for geometry. It has `role="dialog"`, but it is intentionally **not** marked `aria-modal` because the current implementation does not inert the rest of the document.
 
-When the popup opens on the field's focus, grid navigation is reachable via `ArrowDown` (or the trigger button) so the focus-restore/Escape flow stays predictable.
+The calendar trigger is a real button painted inside the field's own box (like the native `input[type=time]` indicator): the field reserves its place with `padding-inline-end`, keeps its own border and background, and its focus ring wraps the trigger too. The trigger draws no chrome of its own and shows a small inner ring when focused.
+
+Fields, header controls and days share an inner outline that survives forced colors. Customize its color with `--dp-focus` (default `var(--dp-accent)`) and thickness with `--dp-focus-width` (default `2px`) on `date-picker` and `date-calendar`. The trigger keeps a `-5px` inset around its icon; selected days and range endpoints use `--dp-accent-fg` for contrast. Fields and header controls now show this solid outline instead of the previous soft halo.
+
+When the popup opens on the field's focus, grid navigation is reachable via `ArrowDown` (or the trigger button) so the focus-restore/Escape flow stays predictable. Closing returns focus to the control that opened the popover: the field when it opened by focus, the trigger when it was activated. In range mode focus follows the active bound instead, because a first pick moves the workflow to the other bound.
 
 See [docs/ACCESSIBILITY.md](docs/ACCESSIBILITY.md).
 
@@ -177,11 +181,11 @@ If a previous `bun run dev` is still holding port `4859`, clear it with `bun run
 
 Tooling is aligned with the current LeKoala component repos:
 
-- Bun 1.4.2
+- Bun 1.4.3
 - TypeScript 7.0.2 (`checkJs` + declaration emit)
-- Biome 2.5.11
-- Playwright 1.62.1
-- `@lekoala/floating ^0.1.1`
+- Biome 2.5.15
+- Playwright 1.64.0
+- `@lekoala/floating ^0.2.0`
 
 Useful commands:
 
@@ -212,7 +216,7 @@ The default ESM exports point at `src/`, matching the native-first development s
 
 ## Scope
 
-Included in v0.2:
+Included:
 
 - inline single-date selection;
 - mini-calendar/navigation-only use;
@@ -234,7 +238,7 @@ Included in v0.2:
 - ISO week numbers;
 - keyboard and focus contracts.
 
-Deliberately out of scope for v0.2:
+Deliberately out of scope:
 
 - custom time-picker UI and combined datetime values (only native `input[type=time]` companions are supported);
 - timezones;

package/custom-elements.json

@@ -139,6 +139,11 @@
               "kind": "method",
               "name": "focusGrid"
             },
+            {
+              "kind": "method",
+              "name": "activateDate",
+              "description": "Run one explicit activation: availability check, then the cancelable `dateactivate` seam, then selection. Click, keyboard and any other input device share this single path, so an application that cancels `dateactivate` cannot be bypassed by a new interaction."
+            },
             {
               "kind": "method",
               "name": "render"
@@ -151,6 +156,9 @@
             {
               "name": "datechange"
             },
+            {
+              "name": "datefocus"
+            },
             {
               "name": "dateinvalid"
             },
@@ -189,6 +197,12 @@
             {
               "name": "--dp-accent-fg"
             },
+            {
+              "name": "--dp-focus"
+            },
+            {
+              "name": "--dp-focus-width"
+            },
             {
               "name": "--dp-radius"
             },
@@ -205,7 +219,10 @@
               "name": "--dp-header-block-gap"
             },
             {
-              "name": "--dp-nav-gap"
+              "name": "--dp-row-gap"
+            },
+            {
+              "name": "--dp-picker-button-size"
             },
             {
               "name": "--dp-year-inline-size"
@@ -316,6 +333,10 @@
               "kind": "getter",
               "name": "isDateDisabled"
             },
+            {
+              "kind": "getter",
+              "name": "coordinateSpace"
+            },
             {
               "kind": "method",
               "name": "validate"
@@ -368,6 +389,12 @@
             {
               "name": "--dp-accent-fg"
             },
+            {
+              "name": "--dp-focus"
+            },
+            {
+              "name": "--dp-focus-width"
+            },
             {
               "name": "--dp-radius"
             },
@@ -384,7 +411,10 @@
               "name": "--dp-header-block-gap"
             },
             {
-              "name": "--dp-nav-gap"
+              "name": "--dp-row-gap"
+            },
+            {
+              "name": "--dp-picker-button-size"
             },
             {
               "name": "--dp-year-inline-size"

package/dist/date-picker.css

@@ -1,17 +1,20 @@
 :where(date-calendar, date-picker) {
-  --dp-bg: Canvas;
-  --dp-fg: CanvasText;
-  --dp-muted: color-mix(in srgb, CanvasText 58%, Canvas);
-  --dp-border: color-mix(in srgb, CanvasText 22%, Canvas);
-  --dp-hover: color-mix(in srgb, CanvasText 7%, Canvas);
-  --dp-accent: Highlight;
-  --dp-accent-fg: HighlightText;
+  --dp-bg: #ffffff;
+  --dp-fg: #1f2328;
+  --dp-muted: color-mix(in srgb, var(--dp-fg) 58%, var(--dp-bg));
+  --dp-border: color-mix(in srgb, var(--dp-fg) 16%, var(--dp-bg));
+  --dp-hover: color-mix(in srgb, var(--dp-fg) 5%, var(--dp-bg));
+  --dp-accent: #2563eb;
+  --dp-accent-fg: #fff;
+  --dp-focus: var(--dp-accent);
+  --dp-focus-width: 2px;
   --dp-radius: 0.5rem;
   --dp-day-size: 2.75rem;
-  --dp-gap: 0.25rem;
+  --dp-gap: 0.375rem;
   --dp-header-control-size: 2.25rem;
-  --dp-header-block-gap: 0.4rem;
-  --dp-nav-gap: calc(var(--dp-gap) * 2.5);
+  --dp-header-block-gap: 0.75rem;
+  --dp-row-gap: 0.375rem;
+  --dp-picker-button-size: 2.5rem;
   --dp-year-inline-size: 5.5rem;
   --dp-day-radius: calc(var(--dp-radius) * 0.75);
   color: var(--dp-fg);
@@ -48,6 +51,9 @@ date-calendar {
      --dp-header-control-size, the row grows to the tallest control and the
      others stretch to match, so month/year/nav stay equal. */
   align-items: stretch;
+  /* Uniform horizontal rhythm: the four header controls are self-evident from
+     their kind and position, so no group gets an extra semantic gap. The air
+     belongs to the vertical zones (header -> weekdays -> dates). */
   gap: var(--dp-gap);
   margin-block-end: var(--dp-header-block-gap);
 }
@@ -59,10 +65,6 @@ date-calendar[data-year-first] .dp-calendar-header {
   grid-template-columns: auto minmax(0, 1fr) auto auto;
 }
 
-.dp-calendar-header .dp-prev {
-  margin-inline-start: var(--dp-nav-gap);
-}
-
 .dp-calendar-header :where(button, select, input) {
   min-block-size: var(--dp-header-control-size);
   box-sizing: border-box;
@@ -78,26 +80,42 @@ date-calendar[data-year-first] .dp-calendar-header {
   line-height: 1.2;
 }
 
-/* The select menulist carries UA-internal leading that author padding only
-   adds to (and it ignores line-height), so it gets zero author padding.
-   Equal outer heights come from the header grid's stretch alignment: the row
-   sizes to the tallest control and the others stretch to match. */
-.dp-calendar-header select {
-  padding-block: 0;
-}
-
-.dp-calendar-header select,
 .dp-calendar-header input {
   min-inline-size: 0;
   padding-inline: 0.45rem;
 }
 
+/* Author-drawn caret so the month select matches the nav controls without a
+   hardcoded SVG color (currentColor keeps theming). Equal outer heights come
+   from the header grid's stretch alignment: the row sizes to the tallest
+   control and the others stretch to match. */
 .dp-month-select {
   inline-size: 100%;
+  min-inline-size: 0;
   /* Long month names in a narrow track (compact consumers, long locales)
-     would paint under the native caret: truncate with an ellipsis instead. */
+     would paint under the caret: truncate with an ellipsis instead. */
   overflow: hidden;
   text-overflow: ellipsis;
+  appearance: none;
+  padding-inline: 0.45rem 2rem;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 0.9rem) 50%,
+    calc(100% - 0.65rem) 50%;
+  background-size: 0.3rem 0.3rem;
+  background-repeat: no-repeat;
+}
+
+/* Inherited RTL mirrors the header layout via the grid. The logical
+   `padding-inline` already flips, so only the physically-positioned caret has
+   to follow it to the other side. */
+[dir="rtl"] .dp-month-select,
+html[dir="rtl"] .dp-month-select {
+  background-position:
+    0.9rem 50%,
+    0.65rem 50%;
 }
 
 .dp-year-input {
@@ -121,14 +139,6 @@ date-calendar[data-year-first] .dp-calendar-header {
   pointer-events: none;
 }
 
-/* Inherited RTL mirrors the header layout via the grid; mirror the nav glyphs
-   so previous/next keep their visual sense. Actions stay chronological: no
-   button swap, no keyboard remapping. */
-[dir="rtl"] .dp-nav svg,
-html[dir="rtl"] .dp-nav svg {
-  transform: scaleX(-1);
-}
-
 .dp-calendar-header :where(button, select, input):disabled,
 .dp-picker-button:disabled {
   cursor: not-allowed;
@@ -139,6 +149,15 @@ html[dir="rtl"] .dp-nav svg {
   background: var(--dp-hover);
 }
 
+/* Inner outlines survive forced colors and keep focus inside each control.
+   The picker trigger uses a tighter inset around its icon below. */
+.dp-calendar-header :where(button, select, input):focus-visible,
+date-picker > input:not([type="hidden"]):focus-visible,
+.dp-day:focus-visible {
+  outline: var(--dp-focus-width) solid var(--dp-focus);
+  outline-offset: calc(var(--dp-focus-width) * -1);
+}
+
 .dp-day:hover:not([data-disabled="true"]):not([data-selected="true"]):not([data-range-start="true"]):not(
   [data-range-end="true"]
 ) {
@@ -151,8 +170,8 @@ html[dir="rtl"] .dp-nav svg {
 
 .dp-grid {
   border-collapse: separate;
-  /* --dp-gap scopes to the header grid; day-cell spacing stays fixed. */
-  border-spacing: 0 0.25rem;
+  /* --dp-gap scopes to the header grid; vertical week rhythm is --dp-row-gap. */
+  border-spacing: 0 var(--dp-row-gap);
   table-layout: fixed;
 }
 
@@ -165,10 +184,10 @@ html[dir="rtl"] .dp-nav svg {
 }
 
 .dp-grid thead th {
-  block-size: 1.6rem;
+  block-size: 1.5rem;
   color: var(--dp-muted);
   font-size: 0.72rem;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .dp-day {
@@ -181,14 +200,9 @@ html[dir="rtl"] .dp-nav svg {
   font-size: 0.875rem;
 }
 
-.dp-day:focus-visible {
-  outline: 2px solid var(--dp-accent);
-  outline-offset: 2px;
-  /* Separation gap between the cell fill and the ring: invisible on plain
-     days, but keeps the ring readable on accent-filled days (selected, range
-     endpoints) where an accent-on-accent outline would disappear. */
-  box-shadow: 0 0 0 2px var(--dp-bg);
-  z-index: 1;
+/* On an accent-filled cell the ring inverts so it stays readable. */
+.dp-day:is([data-selected="true"], [data-range-start="true"], [data-range-end="true"]):focus-visible {
+  outline-color: var(--dp-accent-fg);
 }
 
 /* Base tint for days outside the displayed month. It stays before the
@@ -203,7 +217,10 @@ html[dir="rtl"] .dp-nav svg {
   color: var(--dp-accent-fg);
 }
 
-.dp-day[data-today="true"]:not([data-selected="true"]) {
+/* Today never competes with a stronger state: a selected day or a range
+   endpoint keeps its own treatment, in normal rendering and in
+   forced-colors alike. */
+.dp-day[data-today="true"]:not([data-selected="true"], [data-range-start="true"], [data-range-end="true"]) {
   border-color: var(--dp-accent);
 }
 
@@ -235,13 +252,35 @@ html[dir="rtl"] .dp-nav svg {
 }
 
 .dp-day[data-in-range="true"]:first-of-type {
-  border-start-start-radius: var(--dp-radius);
-  border-end-start-radius: var(--dp-radius);
+  border-start-start-radius: var(--dp-day-radius);
+  border-end-start-radius: var(--dp-day-radius);
 }
 
 .dp-day[data-in-range="true"]:last-of-type {
-  border-start-end-radius: var(--dp-radius);
-  border-end-end-radius: var(--dp-radius);
+  border-start-end-radius: var(--dp-day-radius);
+  border-end-end-radius: var(--dp-day-radius);
+}
+
+/* Projected band: the range the next commit would produce. It reads as one
+   step short of the committed band, so a hovered, keyboard or dragged preview
+   is never mistaken for the selection itself. */
+[data-range-preview] .dp-day:is([data-range-start="true"], [data-range-end="true"]) {
+  background: color-mix(in srgb, var(--dp-accent) 58%, var(--dp-bg));
+}
+
+[data-range-preview] .dp-day[data-in-range="true"] {
+  background: color-mix(in srgb, var(--dp-accent) 11%, var(--dp-bg));
+}
+
+/* Endpoint handles are draggable only while the committed range is complete
+   and its two ends sit on different days. */
+[data-range-drag] .dp-day:is([data-range-start="true"], [data-range-end="true"]) {
+  cursor: grab;
+}
+
+[data-range-drag="active"],
+[data-range-drag="active"] .dp-day {
+  cursor: grabbing;
 }
 
 .dp-day-number {
@@ -284,97 +323,117 @@ html[dir="rtl"] .dp-nav svg {
 date-picker {
   position: relative;
   display: inline-grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr);
   align-items: stretch;
   max-inline-size: 100%;
 }
 
+/* Every authored control is a grid item. */
 date-picker > input:not([type="hidden"]) {
+  min-inline-size: 0;
+}
+
+/* Date fields reserve room for the trigger, which is painted inside the
+   field's own box: the field is the real outer box, so its focus ring wraps
+   the affordance too. `grid-row` must stay explicit, otherwise the trigger
+   (placed with a definite row) claims the row and pushes the field down. */
+date-picker > input:not([type="hidden"]):not([type="time"]) {
   grid-column: 1;
+  grid-row: 1;
+  box-sizing: border-box;
+  inline-size: 100%;
+  padding-inline-end: calc(var(--dp-picker-button-size) + 0.5rem);
+}
+
+/* The trigger is a real button overlaid on the field's inline-end, like the
+   native `input[type=time]` indicator: no chrome of its own, transparent, so
+   the authored field background and border stay visible underneath. */
+.dp-picker-button {
+  display: grid;
+  place-items: center;
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: end;
+  align-self: stretch;
+  inline-size: var(--dp-picker-button-size);
   min-inline-size: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dp-fg);
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Like the native time indicator: the ring wraps the icon, not the field (the
+   field already shows its own ring through :focus-visible). Same radius as
+   everywhere else: no bespoke shape. */
+.dp-picker-button:focus-visible {
+  outline: var(--dp-focus-width) solid var(--dp-focus);
+  outline-offset: -5px;
+  border-radius: var(--dp-radius);
 }
 
 /* Optional native time companions share the date row; authored inputs stay
    consumer-styled, the picker only reserves their grid cells. Time tracks are
-   flexible (never `auto`) so a wide UA time control cannot squeeze the date. */
+   flexible (never `auto`) so a wide UA time control cannot squeeze the date.
+   Each companion keeps its own box and its own gap: nothing is joined, so
+   focus rings never merge and no neighbour swallows another's focus. */
 date-picker:has(> [data-time-start], > [data-time-end]) {
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  column-gap: var(--dp-gap);
 }
 
 date-picker:has(> [data-time-start]):has(> [data-time-end]) {
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
 }
 
 date-picker > input[data-time-start] {
-  grid-column: 3;
+  grid-column: 2;
   grid-row: 1;
   min-inline-size: 0;
-  inline-size: 100%;
-  margin-inline-start: var(--dp-gap);
 }
 
 date-picker > input[data-time-end] {
-  grid-column: 4;
+  grid-column: 3;
   grid-row: 1;
   min-inline-size: 0;
-  inline-size: 100%;
 }
 
-/* From/to read as one joined control: square the inner corners, but only
-   when both companions are present so a lone time keeps its own radius. */
-date-picker:has(> [data-time-start]):has(> [data-time-end]) > input[data-time-start] {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-date-picker:has(> [data-time-start]):has(> [data-time-end]) > input[data-time-end] {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-date-picker[range] > input:not([type="hidden"]) {
-  grid-column: 1;
+/* Range: two stacked fields, each owning its trigger, sharing one popup and
+   one calendar. No trigger spans both bounds, so each bound keeps a local
+   affordance and a local focus target. */
+date-picker[range] {
+  row-gap: var(--dp-gap);
 }
 
 date-picker[range] > input[data-range-start] {
   grid-row: 1;
-  border-end-start-radius: 0;
 }
 
 date-picker[range] > input[data-range-end] {
   grid-row: 2;
-  border-start-start-radius: 0;
 }
 
-.dp-picker-button {
-  grid-column: 2;
-  min-inline-size: 2.5rem;
-  border: 1px solid var(--dp-border);
-  border-inline-start: 0;
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  border-start-end-radius: var(--dp-radius);
-  border-end-end-radius: var(--dp-radius);
-  background: var(--dp-bg);
-  color: var(--dp-fg);
-  font: inherit;
-  cursor: pointer;
+date-picker[range] > .dp-picker-button[data-endpoint="start"] {
+  grid-row: 1;
 }
 
-date-picker[range] > .dp-picker-button {
-  grid-row: 1 / span 2;
+date-picker[range] > .dp-picker-button[data-endpoint="end"] {
+  grid-row: 2;
 }
 
 .dp-picker-panel[popover] {
+  /* Safe baseline. show() switches to absolute only when the consumer
+   * explicitly selects document coordinate space. */
   position: fixed;
   inset: auto;
   margin: 0;
-  padding: 0.65rem;
+  padding: 0.875rem 1rem;
   border: 1px solid var(--dp-border);
   border-radius: var(--dp-radius);
   background: var(--dp-bg);
   color: var(--dp-fg);
-  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.16);
+  box-shadow: 0 0.5rem 1.5rem rgb(15 23 42 / 0.12);
   max-block-size: var(--available-height, 90svh);
   max-inline-size: calc(100vi - 1rem);
   overflow: auto;
@@ -385,19 +444,22 @@ date-picker[range] > .dp-picker-button {
 }
 
 @media (forced-colors: active) {
-  .dp-day[data-selected="true"] {
-    border: 2px solid Highlight;
-    background-color: Canvas;
-    color: CanvasText;
-    font-weight: 700;
+  /* The author-drawn caret is a gradient and disappears here: hand the
+     control back to the browser instead of trying to rebuild it. */
+  .dp-month-select,
+  [dir="rtl"] .dp-month-select {
+    appearance: auto;
+    background-image: none;
+    padding-inline: 0.45rem;
   }
 
-  .dp-day[data-range-start="true"],
-  .dp-day[data-range-end="true"] {
+  /* Fills vanish here, so selection and endpoints fall back to a 2px
+     Highlight border. The in-range underline is the only band marker left:
+     the range fill is lost and the browser does not know the semantics. */
+  .dp-day:is([data-selected="true"], [data-range-start="true"], [data-range-end="true"]) {
     border: 2px solid Highlight;
     background-color: Canvas;
     color: CanvasText;
-    font-weight: 700;
   }
 
   .dp-day[data-in-range="true"] {
@@ -413,15 +475,8 @@ date-picker[range] > .dp-picker-button {
     background-color: Highlight;
   }
 
-  .dp-day[data-selected="true"]::before {
-    content: "";
-    position: absolute;
-    inset: 3px;
-    border: 1px solid CanvasText;
-    border-radius: calc(var(--dp-radius) * 0.5);
-    pointer-events: none;
-  }
-
+  /* Pin the today marker: the deterministic accent is a non-system color
+     and would otherwise remap unpredictably here. */
   .dp-day[data-today="true"] {
     border-color: Highlight;
   }
@@ -430,11 +485,4 @@ date-picker[range] > .dp-picker-button {
     color: CanvasText;
     forced-color-adjust: none;
   }
-
-  .dp-day[data-disabled="true"],
-  .dp-calendar-header :where(button, select, input):disabled,
-  .dp-picker-button:disabled {
-    opacity: 1;
-    color: GrayText;
-  }
 }