@lekoala/date-picker 0.3.0 → 0.5.0

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;
@@ -44,7 +46,7 @@ date-calendar {
 
 .dp-calendar-header {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  grid-template-columns: minmax(0, 1fr) var(--dp-year-inline-size) auto auto;
   /* Stretch (not center): once a UA natural height exceeds
      --dp-header-control-size, the row grows to the tallest control and the
      others stretch to match, so month/year/nav stay equal. */
@@ -60,12 +62,16 @@ date-calendar {
    track stays under the month select so the fixed-width year input never
    stretches. Visual mirroring itself is left to the inherited `dir`. */
 date-calendar[data-year-first] .dp-calendar-header {
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  grid-template-columns: var(--dp-year-inline-size) minmax(0, 1fr) auto auto;
 }
 
 .dp-calendar-header :where(button, select, input) {
-  min-block-size: var(--dp-header-control-size);
   box-sizing: border-box;
+  min-inline-size: 0;
+}
+
+.dp-calendar-header .dp-skin {
+  min-block-size: var(--dp-header-control-size);
   /* Shared vertical metrics: UA default padding/line-height differ per control
      (up to ~13px apart), which only shows once --dp-header-control-size drops
      below content size. */
@@ -78,8 +84,7 @@ date-calendar[data-year-first] .dp-calendar-header {
   line-height: 1.2;
 }
 
-.dp-calendar-header input {
-  min-inline-size: 0;
+.dp-calendar-header input.dp-skin {
   padding-inline: 0.45rem;
 }
 
@@ -89,11 +94,13 @@ date-calendar[data-year-first] .dp-calendar-header {
    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 caret: truncate with an ellipsis instead. */
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.dp-month-select.dp-skin {
   appearance: none;
   padding-inline: 0.45rem 2rem;
   background-image:
@@ -109,18 +116,18 @@ date-calendar[data-year-first] .dp-calendar-header {
 /* 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 {
+[dir="rtl"] .dp-month-select.dp-skin,
+html[dir="rtl"] .dp-month-select.dp-skin {
   background-position:
     0.9rem 50%,
     0.65rem 50%;
 }
 
 .dp-year-input {
-  inline-size: var(--dp-year-inline-size);
+  inline-size: 100%;
 }
 
-.dp-nav {
+.dp-nav.dp-skin {
   display: grid;
   place-items: center;
   inline-size: var(--dp-header-control-size);
@@ -137,30 +144,23 @@ 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-calendar-header .dp-skin:disabled,
 .dp-picker-button:disabled {
   cursor: not-allowed;
   opacity: 0.45;
 }
 
-.dp-nav:hover:not(:disabled) {
+.dp-nav.dp-skin:hover:not(:disabled) {
   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 .dp-skin: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 +205,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 +266,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 +333,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 +373,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);
 }
@@ -446,8 +451,8 @@ date-picker[range] > .dp-picker-button[data-endpoint="end"] {
 @media (forced-colors: active) {
   /* 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 {
+  .dp-month-select.dp-skin,
+  [dir="rtl"] .dp-month-select.dp-skin {
     appearance: auto;
     background-image: none;
     padding-inline: 0.45rem;