@lekoala/date-picker 0.2.0 → 0.3.0

package/src/date-picker.css

@@ -1,17 +1,18 @@
 :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-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 +49,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 +63,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 +78,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 {
@@ -139,6 +155,14 @@ 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);
+}
+
 .dp-day:hover:not([data-disabled="true"]):not([data-selected="true"]):not([data-range-start="true"]):not(
   [data-range-end="true"]
 ) {
@@ -151,8 +175,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 +189,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 +205,18 @@ 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;
-  /* 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;
+  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);
 }
 
 /* Base tint for days outside the displayed month. It stays before the
@@ -203,7 +231,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 +266,13 @@ 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);
 }
 
 .dp-day-number {
@@ -284,97 +315,125 @@ 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%;
 }
 
+/* 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;
+}
+
+/* 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: 2px solid var(--dp-accent);
+  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;
-  }
 }