@lekoala/date-picker 0.3.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.
 
@@ -164,6 +164,8 @@ The picker popup uses native Popover for the top layer and `@lekoala/floating` f
 
 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).
@@ -179,10 +181,10 @@ 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.13
-- Playwright 1.63.0
+- Biome 2.5.15
+- Playwright 1.64.0
 - `@lekoala/floating ^0.2.0`
 
 Useful commands:
@@ -214,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;
@@ -236,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"
             },
@@ -375,6 +389,12 @@
             {
               "name": "--dp-accent-fg"
             },
+            {
+              "name": "--dp-focus"
+            },
+            {
+              "name": "--dp-focus-width"
+            },
             {
               "name": "--dp-radius"
             },

package/dist/date-picker.css

@@ -6,6 +6,8 @@
   --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.375rem;
@@ -137,14 +139,6 @@ html[dir="rtl"] .dp-month-select {
   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;
@@ -155,12 +149,13 @@ html[dir="rtl"] .dp-nav svg {
   background: var(--dp-hover);
 }
 
-/* Shared control focus: accent border + light halo. Day cells keep their
-   dedicated outline ring below; the picker trigger has its own inner ring. */
-.dp-calendar-header :where(button, select, input):focus-visible {
-  outline: none;
-  border-color: var(--dp-accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-accent) 22%, transparent);
+/* 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(
@@ -205,15 +200,6 @@ html[dir="rtl"] .dp-nav svg {
   font-size: 0.875rem;
 }
 
-/* Inner ring: keyboard focus stays inside the cell instead of reading as a
-   second selected state or bleeding onto a neighbouring range band. It is an
-   `outline` (not an inset box-shadow) because forced colors computes
-   box-shadow to `none`, which would erase the keyboard indicator entirely. */
-.dp-day:focus-visible {
-  outline: 2px solid var(--dp-accent);
-  outline-offset: -2px;
-}
-
 /* 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);
@@ -275,6 +261,28 @@ html[dir="rtl"] .dp-nav svg {
   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 {
   display: block;
   font-variant-numeric: tabular-nums;
@@ -320,14 +328,6 @@ date-picker {
   max-inline-size: 100%;
 }
 
-/* Visible focus is normalized to --dp-accent so the component holds together
-   without a consumer stylesheet; the field's own look stays consumer-owned. */
-date-picker > input:not([type="hidden"]):focus-visible {
-  border-color: var(--dp-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-accent) 20%, transparent);
-}
-
 /* Every authored control is a grid item. */
 date-picker > input:not([type="hidden"]) {
   min-inline-size: 0;
@@ -368,7 +368,7 @@ date-picker > input:not([type="hidden"]):not([type="time"]) {
    field already shows its own ring through :focus-visible). Same radius as
    everywhere else: no bespoke shape. */
 .dp-picker-button:focus-visible {
-  outline: 2px solid var(--dp-accent);
+  outline: var(--dp-focus-width) solid var(--dp-focus);
   outline-offset: -5px;
   border-radius: var(--dp-radius);
 }