Add the M3 date pickers

Docked, modal and modal input date pickers for single dates and ranges,
with locale month names, week start and typed format from Intl, min and
max, and the APG grid keyboard. Completes Phase 7.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

resources/css/components/datepicker.css

@@ -0,0 +1,508 @@
+/*
+ * M3's date pickers — docked, modal and modal input (resources/views/components/datepicker.blade.php).
+ *
+ * One `<dialog>` wears both: docked it is a popover hung under the field by CSS anchor positioning
+ * (large corner), modal it is opened with `showModal()` over a scrim (extra-large corner, with M3's
+ * header: a title, the chosen date as the headline, and the switch between calendar and typing).
+ * Both are 360px of surface-container-high at elevation 3.
+ *
+ * Values from DatePickerModalTokens and DateInputModalTokens (androidx Compose Material 3, commit
+ * 27cf9a7d5788aa0f5f2d8b6699ce279560daf326) and the layout of DatePicker.kt, DateRangePicker.kt and
+ * DateInput.kt; the docked picker's from material-web's md-comp-date-picker-docked tokens (v0_192).
+ * Apache-2.0.
+ *
+ *   [data-datepicker]                   the root: the field, its support line, the dialog
+ *     [data-datepicker-support]         the hint, a server error, or what is wrong with the typed date
+ *     [data-datepicker-picker]          the <dialog>; data-presentation="docked" | "modal"
+ *       [data-datepicker-surface]
+ *         [data-datepicker-header]      modal only: title, headline, switch
+ *         [data-datepicker-calendar]
+ *           [data-datepicker-nav]       month and year: one menu button and arrows (modal),
+ *                                       or a month and a year stepper (docked, data-docked)
+ *           [data-datepicker-grid]      the weekdays and six weeks of [data-datepicker-day] cells:
+ *                                       data-today, data-selected, data-start, data-end,
+ *                                       data-between, data-outside, data-blank, aria-disabled
+ *           [data-datepicker-years]     the modal year grid
+ *           [data-datepicker-menu]      a docked month or year list of [data-datepicker-option]s
+ *         [data-datepicker-entry]       the text field(s) of the modal input
+ *         [data-datepicker-actions]     Cancel and OK
+ *
+ * Every state layer is the content colour at 8% on hover (only where a pointer can hover) and 10% on
+ * focus and press; keyboard focus adds the package's 3px secondary ring.
+ */
+
+@layer components {
+    /* ---- The support line under the field ------------------------------------------------------ */
+
+    /* The padding is on the lines, not the box, so a box with nothing to say takes no room. */
+    [data-datepicker-support] {
+        --datepicker-pad: 1rem;
+
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+    }
+
+    [data-datepicker-support] > * {
+        padding: 0.25rem var(--datepicker-pad) 0;
+    }
+
+    [data-datepicker-support][data-size="sm"] {
+        --datepicker-pad: 0.75rem;
+    }
+
+    [data-datepicker-support][data-size="xs"] {
+        --datepicker-pad: 0.625rem;
+    }
+
+    [data-datepicker-error] {
+        color: var(--md-sys-color-error);
+    }
+
+    /* ---- The dialog ---------------------------------------------------------------------------- */
+
+    [data-datepicker-picker] {
+        inset: auto;
+        width: 22.5rem;
+        max-width: calc(100vw - 1rem);
+        max-height: calc(100dvh - 1rem);
+        margin: 0;
+        padding: 0;
+        overflow: visible;
+        border: 0;
+        background: transparent;
+        color: var(--md-sys-color-on-surface);
+    }
+
+    [data-datepicker-picker]:popover-open {
+        top: anchor(bottom);
+        left: anchor(left);
+        margin-block: 0.25rem;
+        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+        opacity: 1;
+        transition-property: opacity;
+        transition-duration: var(--md-sys-motion-effects-fast-duration);
+        transition-timing-function: var(--md-sys-motion-effects-fast);
+    }
+
+    @starting-style {
+        [data-datepicker-picker]:popover-open {
+            opacity: 0;
+        }
+    }
+
+    [data-datepicker-picker]:modal {
+        inset: 0;
+        margin: auto;
+        opacity: 1;
+        scale: 1;
+        transition-property: opacity, scale;
+        transition-duration: var(--md-sys-motion-spatial-fast-duration);
+        transition-timing-function: var(--md-sys-motion-spatial-fast);
+    }
+
+    @starting-style {
+        [data-datepicker-picker]:modal {
+            opacity: 0;
+            scale: 0.95;
+        }
+    }
+
+    [data-datepicker-picker]:modal::backdrop {
+        background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
+    }
+
+    [data-datepicker-surface] {
+        display: flex;
+        flex-direction: column;
+        max-height: inherit;
+        overflow-x: hidden;
+        overflow-y: auto;
+        border-radius: var(--md-sys-shape-corner-lg);
+        background-color: var(--md-sys-color-surface-container-high);
+        box-shadow: var(--md-sys-elevation-3);
+        outline: none;
+    }
+
+    [data-datepicker-picker][data-presentation="modal"] [data-datepicker-surface] {
+        border-radius: var(--md-sys-shape-corner-xl);
+    }
+
+    /* ---- The modal header ---------------------------------------------------------------------- */
+
+    [data-datepicker-header] {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex: none;
+        min-height: 7.5rem;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface-variant);
+    }
+
+    [data-datepicker-header][data-range] {
+        min-height: 8rem;
+    }
+
+    [data-datepicker-title] {
+        padding: 1rem 0.75rem 0 1.5rem;
+        font: var(--md-sys-typescale-label-lg);
+        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
+    }
+
+    [data-datepicker-headline-row] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        padding: 0 0.75rem 0.75rem 1.5rem;
+    }
+
+    [data-datepicker-headline] {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font: var(--md-sys-typescale-headline-lg);
+        letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
+    }
+
+    [data-datepicker-header][data-range] [data-datepicker-headline] {
+        font: var(--md-sys-typescale-title-lg);
+        letter-spacing: var(--md-sys-typescale-title-lg-tracking);
+    }
+
+    /* ---- Month and year navigation -------------------------------------------------------------- */
+
+    [data-datepicker-nav] {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: space-between;
+        height: 3.5rem;
+        padding-inline: 0.75rem;
+        color: var(--md-sys-color-on-surface-variant);
+    }
+
+    [data-datepicker-nav][data-docked] {
+        height: 4rem;
+        padding-inline: 0.25rem;
+    }
+
+    [data-datepicker-stepper],
+    [data-datepicker-arrows] {
+        display: flex;
+        align-items: center;
+    }
+
+    /* While a year or month list is open the arrows keep their place but are gone, as androidx hides them. */
+    [data-datepicker-arrows][data-concealed] {
+        visibility: hidden;
+    }
+
+    [data-datepicker-menu-button] {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        height: 2.5rem;
+        padding-inline: 0.75rem 0.5rem;
+        border-radius: var(--md-sys-shape-corner-full);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-label-lg);
+        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
+        white-space: nowrap;
+        cursor: pointer;
+        outline: none;
+        isolation: isolate;
+    }
+
+    [data-datepicker-nav][data-docked] [data-datepicker-menu-button] {
+        padding-inline: 0.5rem 0.25rem;
+        gap: 0.25rem;
+    }
+
+    [data-datepicker-menu-arrow] {
+        transition: rotate var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
+    }
+
+    [data-datepicker-menu-button][aria-expanded="true"] [data-datepicker-menu-arrow] {
+        rotate: 180deg;
+    }
+
+    /* ---- State layers shared by days, years, menu buttons and list rows ------------------------ */
+
+    [data-datepicker-menu-button]::before,
+    [data-datepicker-day] > span::before,
+    [data-datepicker-year]::before,
+    [data-datepicker-option]::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        background-color: var(--datepicker-layer, currentColor);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
+    }
+
+    @media (hover: hover) {
+        [data-datepicker-menu-button]:hover::before,
+        [data-datepicker-day]:not([aria-disabled="true"], [data-blank]):hover > span::before,
+        [data-datepicker-year]:hover::before,
+        [data-datepicker-option]:not([aria-disabled="true"]):hover::before {
+            opacity: 0.08;
+        }
+    }
+
+    [data-datepicker-menu-button]:focus-visible::before,
+    [data-datepicker-menu-button]:active::before,
+    [data-datepicker-day]:focus-visible > span::before,
+    [data-datepicker-day]:not([aria-disabled="true"], [data-blank]):active > span::before,
+    [data-datepicker-year]:focus-visible::before,
+    [data-datepicker-year]:active::before,
+    [data-datepicker-option]:focus-visible::before,
+    [data-datepicker-option]:not([aria-disabled="true"]):active::before {
+        opacity: 0.1;
+    }
+
+    [data-datepicker-menu-button]:focus-visible,
+    [data-datepicker-day]:focus-visible > span,
+    [data-datepicker-year]:focus-visible {
+        outline: 3px solid var(--md-sys-color-secondary);
+        outline-offset: 2px;
+    }
+
+    [data-datepicker-option]:focus-visible {
+        outline: 3px solid var(--md-sys-color-secondary);
+        outline-offset: -3px;
+    }
+
+    /* ---- The days ----------------------------------------------------------------------------- */
+
+    [data-datepicker-grid] {
+        width: calc(100% - 1.5rem);
+        margin-inline: 0.75rem;
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+
+    [data-datepicker-grid] th {
+        height: 3rem;
+        padding: 0;
+        color: var(--md-sys-color-on-surface);
+        font: var(--md-sys-typescale-body-lg);
+        letter-spacing: var(--md-sys-typescale-body-lg-tracking);
+        text-align: center;
+    }
+
+    [data-datepicker-day] {
+        --datepicker-layer: var(--md-sys-color-on-surface-variant);
+
+        position: relative;
+        height: 3rem;
+        padding: 0;
+        color: var(--md-sys-color-on-surface);
+        font: var(--md-sys-typescale-body-lg);
+        letter-spacing: var(--md-sys-typescale-body-lg-tracking);
+        text-align: center;
+        cursor: pointer;
+        outline: none;
+        isolation: isolate;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    [data-datepicker-day] > span {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        margin: auto;
+        border-radius: var(--md-sys-shape-corner-full);
+        transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
+    }
+
+    [data-datepicker-day][data-blank] {
+        cursor: default;
+    }
+
+    /* A docked picker shows the neighbouring months' days, quieter. */
+    [data-datepicker-day][data-outside] {
+        color: var(--md-sys-color-on-surface-variant);
+    }
+
+    [data-datepicker-day][data-today] {
+        --datepicker-layer: var(--md-sys-color-primary);
+
+        color: var(--md-sys-color-primary);
+    }
+
+    [data-datepicker-day][data-today] > span {
+        box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
+    }
+
+    /* A range's band: secondary-container behind the days between its ends, from the middle of each end. */
+    [data-datepicker-day][data-between]::before,
+    [data-datepicker-day][data-start]::before,
+    [data-datepicker-day][data-end]::before {
+        content: "";
+        position: absolute;
+        inset-block: 0.25rem;
+        inset-inline: 0;
+        z-index: -1;
+        background-color: var(--md-sys-color-secondary-container);
+    }
+
+    [data-datepicker-day][data-start]::before {
+        inset-inline-start: 50%;
+    }
+
+    [data-datepicker-day][data-end]::before {
+        inset-inline-end: 50%;
+    }
+
+    [data-datepicker-day][data-between] {
+        --datepicker-layer: var(--md-sys-color-on-secondary-container);
+
+        color: var(--md-sys-color-on-secondary-container);
+    }
+
+    [data-datepicker-day][data-selected] {
+        --datepicker-layer: var(--md-sys-color-on-primary);
+
+        color: var(--md-sys-color-on-primary);
+    }
+
+    [data-datepicker-day][data-selected] > span {
+        background-color: var(--md-sys-color-primary);
+        box-shadow: none;
+    }
+
+    [data-datepicker-day][aria-disabled="true"] {
+        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+        cursor: default;
+    }
+
+    [data-datepicker-day][aria-disabled="true"][data-today] > span {
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    }
+
+    /* ---- The modal year grid ----------------------------------------------------------------- */
+
+    [data-datepicker-years] {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        align-content: start;
+        justify-items: center;
+        row-gap: 1rem;
+        height: 20.9375rem;
+        padding: 0.5rem 0.75rem;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    [data-datepicker-year] {
+        --datepicker-layer: var(--md-sys-color-on-surface-variant);
+
+        position: relative;
+        width: 4.5rem;
+        height: 2.25rem;
+        border-radius: var(--md-sys-shape-corner-full);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-lg);
+        letter-spacing: var(--md-sys-typescale-body-lg-tracking);
+        cursor: pointer;
+        outline: none;
+        isolation: isolate;
+        scroll-margin-block: 0.5rem;
+    }
+
+    [data-datepicker-year][data-current] {
+        --datepicker-layer: var(--md-sys-color-primary);
+
+        color: var(--md-sys-color-primary);
+        box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
+    }
+
+    [data-datepicker-year][aria-selected="true"] {
+        --datepicker-layer: var(--md-sys-color-on-primary);
+
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+        box-shadow: none;
+    }
+
+    /* ---- The docked month and year lists ------------------------------------------------------ */
+
+    [data-datepicker-menu] {
+        height: 21.5rem;
+        padding-block: 0.5rem;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    [data-datepicker-option] {
+        --datepicker-layer: var(--md-sys-color-on-surface);
+
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        width: 100%;
+        height: 3rem;
+        padding-inline: 1rem;
+        color: var(--md-sys-color-on-surface);
+        font: var(--md-sys-typescale-body-lg);
+        letter-spacing: var(--md-sys-typescale-body-lg-tracking);
+        text-align: start;
+        cursor: pointer;
+        outline: none;
+        isolation: isolate;
+    }
+
+    [data-datepicker-option][aria-selected="true"] {
+        background-color: var(--md-sys-color-surface-container-highest);
+    }
+
+    [data-datepicker-option][aria-disabled="true"] {
+        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+        cursor: default;
+    }
+
+    [data-datepicker-check] {
+        color: var(--md-sys-color-on-surface);
+    }
+
+    [data-datepicker-option]:not([aria-selected="true"]) [data-datepicker-check] {
+        visibility: hidden;
+    }
+
+    /* ---- The modal input ------------------------------------------------------------------------ */
+
+    [data-datepicker-entry] {
+        padding: 0.625rem 1.5rem 1rem;
+    }
+
+    [data-datepicker-entry-fields][data-range] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.5rem;
+    }
+
+
+    /* ---- Cancel and OK ---------------------------------------------------------------------------- */
+
+    [data-datepicker-actions] {
+        display: flex;
+        flex: none;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 0.5rem;
+        padding: 0.25rem 0.375rem 0.5rem 0.75rem;
+    }
+}

resources/css/material.css

@@ -26,6 +26,7 @@
 @import './components/menu.css';
 @import './components/selection.css';
 @import './components/search.css';
+@import './components/datepicker.css';
 @import './components/timepicker.css';
 @import './components/tabs.css';
 @import './components/app-bar.css';