diff --git a/resources/css/components.css b/resources/css/components.css
index bedf3183..d6309bee 100644
--- a/resources/css/components.css
+++ b/resources/css/components.css
@@ -52,6 +52,7 @@
 @import './components/table.css';
 @import './components/sort-header.css';
 @import './components/pagination.css';
+@import './components/datepicker.css';
 
 /* Containment */
 
diff --git a/resources/css/components/datepicker.css b/resources/css/components/datepicker.css
index 1d10d92e..1a077731 100644
--- a/resources/css/components/datepicker.css
+++ b/resources/css/components/datepicker.css
@@ -13,35 +13,49 @@
  * 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" | "full"
- *       [data-datepicker-surface]
- *         [data-datepicker-header]      modal only: title, headline, switch
- *         [data-datepicker-full]        full only: [data-datepicker-app-bar] (close, switch, Save)
- *                                       and [data-datepicker-full-headline] (title, headline)
- *         [data-datepicker-calendar]    the scroller, full screen
- *           [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 —
- *                                       full screen, every month of the window under a
- *                                       [data-datepicker-month-label] row
- *           [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
+ *   [data-md-datepicker]                   the root: the field, its support line, the dialog
+ *     [data-md-datepicker-support]         the hint, a server error, or what is wrong with the typed date
+ *     [data-md-datepicker-picker]          the <dialog>; data-md-presentation="docked" | "modal" | "full"
+ *       [data-md-datepicker-surface]
+ *         [data-md-datepicker-header]      modal only: title, headline, switch
+ *         [data-md-datepicker-full]        full only: [data-md-datepicker-app-bar] (close, switch, Save)
+ *                                          and [data-md-datepicker-full-headline] (title, headline)
+ *         [data-md-datepicker-calendar]    the scroller, full screen
+ *           [data-md-datepicker-nav]       month and year: one menu button and arrows (modal),
+ *                                          or a month and a year stepper (docked, data-md-docked)
+ *           [data-md-datepicker-grid]      the weekdays and six weeks of [data-md-datepicker-day]
+ *                                          cells: data-md-today, data-md-selected, data-md-start,
+ *                                          data-md-end, data-md-between, data-md-outside,
+ *                                          data-md-blank, aria-disabled — full screen, every month
+ *                                          of the window under a [data-md-datepicker-month-label] row
+ *           [data-md-datepicker-years]     the modal year grid
+ *           [data-md-datepicker-menu]      a docked month or year list of [data-md-datepicker-option]s
+ *         [data-md-datepicker-entry]       the text field(s) of the modal input
+ *         [data-md-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.
+ * Cancel, OK and the icon buttons in the app bar and the nav are <x-button>, which draws its own
+ * state layer and focus ring from the foundation classes. The day, the year, the menu button and
+ * the list option keep their own hand-rolled state layer and focus ring, as `data-md-field-button`
+ * does (field.css): each interactive box is bigger than the round indicator drawn inside it (a
+ * day's cell is 48px, its indicator 40px; a menu button and an option are full rows), which the
+ * foundation's classes, fixed to the element they are on, cannot draw — and `:focus-visible` only
+ * ever matches the element actually focused, never a smaller child inside it.
+ *
+ * Every state layer here 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 {
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './field.css';
+@import './icon.css';
+@import './button.css';
+
+@layer material.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] {
+    [data-md-datepicker-support] {
         --datepicker-pad: 1rem;
 
         color: var(--md-sys-color-on-surface-variant);
@@ -49,25 +63,25 @@
         letter-spacing: var(--md-sys-typescale-body-sm-tracking);
     }
 
-    [data-datepicker-support] > * {
+    [data-md-datepicker-support] > * {
         padding: 0.25rem var(--datepicker-pad) 0;
     }
 
-    [data-datepicker-support][data-size="sm"] {
+    [data-md-datepicker-support][data-md-size='sm'] {
         --datepicker-pad: 0.75rem;
     }
 
-    [data-datepicker-support][data-size="xs"] {
+    [data-md-datepicker-support][data-md-size='xs'] {
         --datepicker-pad: 0.625rem;
     }
 
-    [data-datepicker-error] {
+    [data-md-datepicker-error] {
         color: var(--md-sys-color-error);
     }
 
     /* ---- The dialog ---------------------------------------------------------------------------- */
 
-    [data-datepicker-picker] {
+    [data-md-datepicker-picker] {
         inset: auto;
         width: 22.5rem;
         max-width: calc(100vw - 1rem);
@@ -80,7 +94,7 @@
         color: var(--md-sys-color-on-surface);
     }
 
-    [data-datepicker-picker]:popover-open {
+    [data-md-datepicker-picker]:popover-open {
         top: anchor(bottom);
         left: anchor(left);
         margin-block: 0.25rem;
@@ -92,12 +106,12 @@
     }
 
     @starting-style {
-        [data-datepicker-picker]:popover-open {
+        [data-md-datepicker-picker]:popover-open {
             opacity: 0;
         }
     }
 
-    [data-datepicker-picker]:modal {
+    [data-md-datepicker-picker]:modal {
         inset: 0;
         margin: auto;
         opacity: 1;
@@ -108,17 +122,17 @@
     }
 
     @starting-style {
-        [data-datepicker-picker]:modal {
+        [data-md-datepicker-picker]:modal {
             opacity: 0;
             scale: 0.95;
         }
     }
 
-    [data-datepicker-picker]:modal::backdrop {
+    [data-md-datepicker-picker]:modal::backdrop {
         background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
     }
 
-    [data-datepicker-surface] {
+    [data-md-datepicker-surface] {
         display: flex;
         flex-direction: column;
         max-height: inherit;
@@ -130,7 +144,7 @@
         outline: none;
     }
 
-    [data-datepicker-picker][data-presentation="modal"] [data-datepicker-surface] {
+    [data-md-datepicker-picker][data-md-presentation='modal'] [data-md-datepicker-surface] {
         border-radius: var(--md-sys-shape-corner-xl);
     }
 
@@ -142,7 +156,7 @@
      * different order: an app bar, the supporting text and the range as the headline, a divider, the
      * day-of-week labels, and a vertically scrolling list of months under them, each with its label.
      * Only the months scroll; everything above them stays where it is. */
-    [data-datepicker-picker][data-presentation="full"] {
+    [data-md-datepicker-picker][data-md-presentation='full'] {
         inset: 0;
         width: 100vw;
         max-width: none;
@@ -151,7 +165,7 @@
         margin: 0;
     }
 
-    [data-datepicker-picker][data-presentation="full"] [data-datepicker-surface] {
+    [data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-surface] {
         height: 100%;
         max-height: none;
         padding-block: var(--material-safe-top, env(safe-area-inset-top)) var(--material-safe-bottom, env(safe-area-inset-bottom));
@@ -160,13 +174,13 @@
         box-shadow: none;
     }
 
-    [data-datepicker-full] {
+    [data-md-datepicker-full] {
         flex: none;
         border-bottom: 1px solid var(--md-sys-color-outline-variant);
         color: var(--md-sys-color-on-surface-variant);
     }
 
-    [data-datepicker-app-bar] {
+    [data-md-datepicker-app-bar] {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -175,13 +189,13 @@
         padding-inline: 0.25rem 0.75rem;
     }
 
-    [data-datepicker-app-bar-actions] {
+    [data-md-datepicker-app-bar-actions] {
         display: flex;
         align-items: center;
         gap: 0.25rem;
     }
 
-    [data-datepicker-full-headline] {
+    [data-md-datepicker-full-headline] {
         display: flex;
         flex-direction: column;
         gap: 0.25rem;
@@ -189,25 +203,25 @@
     }
 
     /* The calendar is the only part that scrolls, with the weekday header held at its top. */
-    [data-datepicker-picker][data-presentation="full"] [data-datepicker-calendar] {
+    [data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-calendar] {
         flex: 1 1 auto;
         min-height: 0;
         overflow-y: auto;
         overscroll-behavior: contain;
     }
 
-    [data-datepicker-picker][data-presentation="full"] [data-datepicker-grid] thead th {
+    [data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-grid] thead th {
         position: sticky;
         top: 0;
         z-index: 1;
         background-color: var(--md-sys-color-surface-container-high);
     }
 
-    [data-datepicker-picker][data-presentation="full"] [data-datepicker-day] {
+    [data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-day] {
         scroll-margin-block: 3rem;
     }
 
-    [data-datepicker-month-label] {
+    [data-md-datepicker-month-label] {
         padding: 1.25rem 0 0.5rem;
         color: var(--md-sys-color-on-surface-variant);
         font: var(--md-sys-typescale-title-sm);
@@ -217,7 +231,7 @@
 
     /* ---- The modal header ---------------------------------------------------------------------- */
 
-    [data-datepicker-header] {
+    [data-md-datepicker-header] {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -227,17 +241,17 @@
         color: var(--md-sys-color-on-surface-variant);
     }
 
-    [data-datepicker-header][data-range] {
+    [data-md-datepicker-header][data-md-range] {
         min-height: 8rem;
     }
 
-    [data-datepicker-title] {
+    [data-md-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] {
+    [data-md-datepicker-headline-row] {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -245,7 +259,7 @@
         padding: 0 0.75rem 0.75rem 1.5rem;
     }
 
-    [data-datepicker-headline] {
+    [data-md-datepicker-headline] {
         min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -254,14 +268,14 @@
         letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
     }
 
-    [data-datepicker-header][data-range] [data-datepicker-headline] {
+    [data-md-datepicker-header][data-md-range] [data-md-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] {
+    [data-md-datepicker-nav] {
         display: flex;
         flex: none;
         align-items: center;
@@ -271,23 +285,23 @@
         color: var(--md-sys-color-on-surface-variant);
     }
 
-    [data-datepicker-nav][data-docked] {
+    [data-md-datepicker-nav][data-md-docked] {
         height: 4rem;
         padding-inline: 0.25rem;
     }
 
-    [data-datepicker-stepper],
-    [data-datepicker-arrows] {
+    [data-md-datepicker-stepper],
+    [data-md-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] {
+    [data-md-datepicker-arrows][data-md-concealed] {
         visibility: hidden;
     }
 
-    [data-datepicker-menu-button] {
+    [data-md-datepicker-menu-button] {
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -304,26 +318,26 @@
         isolation: isolate;
     }
 
-    [data-datepicker-nav][data-docked] [data-datepicker-menu-button] {
+    [data-md-datepicker-nav][data-md-docked] [data-md-datepicker-menu-button] {
         padding-inline: 0.5rem 0.25rem;
         gap: 0.25rem;
     }
 
-    [data-datepicker-menu-arrow] {
+    [data-md-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] {
+    [data-md-datepicker-menu-button][aria-expanded='true'] [data-md-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: "";
+    [data-md-datepicker-menu-button]::before,
+    [data-md-datepicker-day] > span::before,
+    [data-md-datepicker-year]::before,
+    [data-md-datepicker-option]::before {
+        content: '';
         position: absolute;
         inset: 0;
         z-index: -1;
@@ -335,47 +349,47 @@
     }
 
     @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 {
+        [data-md-datepicker-menu-button]:hover::before,
+        [data-md-datepicker-day]:not([aria-disabled='true'], [data-md-blank]):hover > span::before,
+        [data-md-datepicker-year]:hover::before,
+        [data-md-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 {
+    [data-md-datepicker-menu-button]:focus-visible::before,
+    [data-md-datepicker-menu-button]:active::before,
+    [data-md-datepicker-day]:focus-visible > span::before,
+    [data-md-datepicker-day]:not([aria-disabled='true'], [data-md-blank]):active > span::before,
+    [data-md-datepicker-year]:focus-visible::before,
+    [data-md-datepicker-year]:active::before,
+    [data-md-datepicker-option]:focus-visible::before,
+    [data-md-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 {
+    [data-md-datepicker-menu-button]:focus-visible,
+    [data-md-datepicker-day]:focus-visible > span,
+    [data-md-datepicker-year]:focus-visible {
         outline: 3px solid var(--md-sys-color-secondary);
         outline-offset: 2px;
     }
 
-    [data-datepicker-option]:focus-visible {
+    [data-md-datepicker-option]:focus-visible {
         outline: 3px solid var(--md-sys-color-secondary);
         outline-offset: -3px;
     }
 
     /* ---- The days ----------------------------------------------------------------------------- */
 
-    [data-datepicker-grid] {
+    [data-md-datepicker-grid] {
         width: calc(100% - 1.5rem);
         margin-inline: 0.75rem;
         border-collapse: collapse;
         table-layout: fixed;
     }
 
-    [data-datepicker-grid] th {
+    [data-md-datepicker-grid] th {
         height: 3rem;
         padding: 0;
         color: var(--md-sys-color-on-surface);
@@ -384,7 +398,7 @@
         text-align: center;
     }
 
-    [data-datepicker-day] {
+    [data-md-datepicker-day] {
         --datepicker-layer: var(--md-sys-color-on-surface-variant);
 
         position: relative;
@@ -400,7 +414,7 @@
         -webkit-tap-highlight-color: transparent;
     }
 
-    [data-datepicker-day] > span {
+    [data-md-datepicker-day] > span {
         position: relative;
         display: grid;
         place-items: center;
@@ -411,30 +425,30 @@
         transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
     }
 
-    [data-datepicker-day][data-blank] {
+    [data-md-datepicker-day][data-md-blank] {
         cursor: default;
     }
 
     /* A docked picker shows the neighbouring months' days, quieter. */
-    [data-datepicker-day][data-outside] {
+    [data-md-datepicker-day][data-md-outside] {
         color: var(--md-sys-color-on-surface-variant);
     }
 
-    [data-datepicker-day][data-today] {
+    [data-md-datepicker-day][data-md-today] {
         --datepicker-layer: var(--md-sys-color-primary);
 
         color: var(--md-sys-color-primary);
     }
 
-    [data-datepicker-day][data-today] > span {
+    [data-md-datepicker-day][data-md-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: "";
+    [data-md-datepicker-day][data-md-between]::before,
+    [data-md-datepicker-day][data-md-start]::before,
+    [data-md-datepicker-day][data-md-end]::before {
+        content: '';
         position: absolute;
         inset-block: 0.25rem;
         inset-inline: 0;
@@ -442,43 +456,43 @@
         background-color: var(--md-sys-color-secondary-container);
     }
 
-    [data-datepicker-day][data-start]::before {
+    [data-md-datepicker-day][data-md-start]::before {
         inset-inline-start: 50%;
     }
 
-    [data-datepicker-day][data-end]::before {
+    [data-md-datepicker-day][data-md-end]::before {
         inset-inline-end: 50%;
     }
 
-    [data-datepicker-day][data-between] {
+    [data-md-datepicker-day][data-md-between] {
         --datepicker-layer: var(--md-sys-color-on-secondary-container);
 
         color: var(--md-sys-color-on-secondary-container);
     }
 
-    [data-datepicker-day][data-selected] {
+    [data-md-datepicker-day][data-md-selected] {
         --datepicker-layer: var(--md-sys-color-on-primary);
 
         color: var(--md-sys-color-on-primary);
     }
 
-    [data-datepicker-day][data-selected] > span {
+    [data-md-datepicker-day][data-md-selected] > span {
         background-color: var(--md-sys-color-primary);
         box-shadow: none;
     }
 
-    [data-datepicker-day][aria-disabled="true"] {
+    [data-md-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 {
+    [data-md-datepicker-day][aria-disabled='true'][data-md-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] {
+    [data-md-datepicker-years] {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         align-content: start;
@@ -491,7 +505,7 @@
         border-bottom: 1px solid var(--md-sys-color-outline-variant);
     }
 
-    [data-datepicker-year] {
+    [data-md-datepicker-year] {
         --datepicker-layer: var(--md-sys-color-on-surface-variant);
 
         position: relative;
@@ -507,14 +521,14 @@
         scroll-margin-block: 0.5rem;
     }
 
-    [data-datepicker-year][data-current] {
+    [data-md-datepicker-year][data-md-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"] {
+    [data-md-datepicker-year][aria-selected='true'] {
         --datepicker-layer: var(--md-sys-color-on-primary);
 
         background-color: var(--md-sys-color-primary);
@@ -524,7 +538,7 @@
 
     /* ---- The docked month and year lists ------------------------------------------------------ */
 
-    [data-datepicker-menu] {
+    [data-md-datepicker-menu] {
         height: 21.5rem;
         padding-block: 0.5rem;
         overflow-y: auto;
@@ -532,7 +546,7 @@
         border-top: 1px solid var(--md-sys-color-outline-variant);
     }
 
-    [data-datepicker-option] {
+    [data-md-datepicker-option] {
         --datepicker-layer: var(--md-sys-color-on-surface);
 
         position: relative;
@@ -551,39 +565,54 @@
         isolation: isolate;
     }
 
-    [data-datepicker-option][aria-selected="true"] {
+    [data-md-datepicker-option][aria-selected='true'] {
         background-color: var(--md-sys-color-surface-container-highest);
     }
 
-    [data-datepicker-option][aria-disabled="true"] {
+    [data-md-datepicker-option][aria-disabled='true'] {
         color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
         cursor: default;
     }
 
-    [data-datepicker-check] {
+    [data-md-datepicker-check] {
         color: var(--md-sys-color-on-surface);
     }
 
-    [data-datepicker-option]:not([aria-selected="true"]) [data-datepicker-check] {
+    [data-md-datepicker-option]:not([aria-selected='true']) [data-md-datepicker-check] {
         visibility: hidden;
     }
 
     /* ---- The modal input ------------------------------------------------------------------------ */
 
-    [data-datepicker-entry] {
+    [data-md-datepicker-entry] {
         padding: 0.625rem 1.5rem 1rem;
     }
 
-    [data-datepicker-entry-fields][data-range] {
+    [data-md-datepicker-entry-fields][data-md-range] {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 0.5rem;
     }
 
+    /* ---- The month announcement, spoken but not drawn -------------------------------------------- */
+
+    /* Same clip as the text classes' `md-visually-hidden`, kept as a hook because a package view
+       writes no class but the interaction classes (plan step 36). */
+    [data-md-datepicker-month-live] {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border-width: 0;
+    }
 
     /* ---- Cancel and OK ---------------------------------------------------------------------------- */
 
-    [data-datepicker-actions] {
+    [data-md-datepicker-actions] {
         display: flex;
         flex: none;
         flex-wrap: wrap;
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
index 298f5408..a8755fa0 100644
--- a/resources/css/tailwind.css
+++ b/resources/css/tailwind.css
@@ -18,7 +18,6 @@
 @import './tokens/utilities.css';
 
 /* Inputs, selection and data — leaving in step 36 */
-@import './components/datepicker.css';
 @import './components/timepicker.css';
 
 /* Containment — leaving in step 36 */
diff --git a/resources/js/datepicker.js b/resources/js/datepicker.js
index 1ed26d78..59b03efa 100644
--- a/resources/js/datepicker.js
+++ b/resources/js/datepicker.js
@@ -586,7 +586,7 @@ document.addEventListener('alpine:init', () => {
         },
 
         focusDay() {
-            this.settled(() => this.$refs.dialog.querySelector('[data-datepicker-day][tabindex="0"]')?.focus())
+            this.settled(() => this.$refs.dialog.querySelector('[data-md-datepicker-day][tabindex="0"]')?.focus())
         },
 
         /** Focuses a day (inside min and max) and shows its month. */
@@ -660,9 +660,9 @@ document.addEventListener('alpine:init', () => {
          * picker has one of each, the modal picker a single button that opens the years.
          */
         menuButton(view) {
-            const buttons = [...this.$refs.dialog.querySelectorAll('[data-datepicker-menu-button]')].filter((button) => button.getClientRects().length > 0)
+            const buttons = [...this.$refs.dialog.querySelectorAll('[data-md-datepicker-menu-button]')].filter((button) => button.getClientRects().length > 0)
 
-            return buttons.find((button) => button.dataset.datepickerMenuButton === view) ?? buttons[0] ?? null
+            return buttons.find((button) => button.dataset.mdDatepickerMenuButton === view) ?? buttons[0] ?? null
         },
 
         gridKey(event) {
@@ -745,7 +745,7 @@ document.addEventListener('alpine:init', () => {
             }
 
             this.settled(() => {
-                const list = [...this.$refs.dialog.querySelectorAll('[data-datepicker-list]')].find((each) => each.getClientRects().length > 0)
+                const list = [...this.$refs.dialog.querySelectorAll('[data-md-datepicker-list]')].find((each) => each.getClientRects().length > 0)
                 const option = list?.querySelector('[aria-selected="true"]') ?? list?.querySelector('[role="option"]')
 
                 option?.scrollIntoView({ block: 'center' })
diff --git a/resources/views/components/datepicker.blade.php b/resources/views/components/datepicker.blade.php
index 20520b58..b7dfb116 100644
--- a/resources/views/components/datepicker.blade.php
+++ b/resources/views/components/datepicker.blade.php
@@ -155,7 +155,7 @@
     @if ($model === null) x-modelable="value" @endif
     x-on:focusout="leave($event)"
     x-on:pointerdown.outside="open && presentation === 'docked' && cancel(false)"
-    data-datepicker
+    data-md-datepicker
 >
     <div style="anchor-name: {{ $anchor }}">
         <x-livewire-material::field
@@ -229,7 +229,7 @@
                     x-on:click="open ? cancel() : show()"
                     @if ($mode !== 'docked') tabindex="-1" @endif
                     @disabled($attributes->get('disabled') || $attributes->get('readonly'))
-                    data-datepicker-toggle
+                    data-md-datepicker-toggle
                 >
                     <x-livewire-material::icon name="calendar_today" :size="$fieldIconSize" />
                 </button>
@@ -237,11 +237,11 @@
         </x-livewire-material::field>
     </div>
 
-    <div id="{{ $id }}-support" data-datepicker-support data-size="{{ in_array($size, ['sm', 'xs'], true) ? $size : 'md' }}">
-        <p x-cloak x-show="fieldError !== ''" x-text="fieldError" role="alert" data-datepicker-error></p>
+    <div id="{{ $id }}-support" data-md-datepicker-support data-md-size="{{ in_array($size, ['sm', 'xs'], true) ? $size : 'md' }}">
+        <p x-cloak x-show="fieldError !== ''" x-text="fieldError" role="alert" data-md-datepicker-error></p>
 
         @if ($invalid)
-            <div x-show="fieldError === ''" role="alert" data-datepicker-error>
+            <div x-show="fieldError === ''" role="alert" data-md-datepicker-error>
                 @foreach ($messages as $message)
                     <p>{{ $message }}</p>
                 @endforeach
@@ -267,114 +267,114 @@
         popover="manual"
         aria-label="{{ $title }}"
         style="position-anchor: {{ $anchor }}"
-        x-bind:data-presentation="presentation"
+        x-bind:data-md-presentation="presentation"
         x-on:cancel.prevent="cancel()"
         x-on:click.self="presentation === 'modal' && cancel()"
         x-on:keydown.escape.prevent.stop="cancel()"
-        data-datepicker-picker
+        data-md-datepicker-picker
     >
-        <div tabindex="-1" data-datepicker-surface>
+        <div tabindex="-1" data-md-datepicker-surface>
             {{-- M3's full-screen range picker (compact): an app bar with a close button and Save,
                  then the supporting text and the range as the headline, over a divider. --}}
-            <div data-datepicker-full x-cloak x-show="presentation === 'full'">
-                <div data-datepicker-app-bar>
-                    <x-livewire-material::button icon="close" :tooltip="__('Close')" x-on:click="cancel()" data-datepicker-close />
+            <div data-md-datepicker-full x-cloak x-show="presentation === 'full'">
+                <div data-md-datepicker-app-bar>
+                    <x-livewire-material::button icon="close" :tooltip="__('Close')" x-on:click="cancel()" data-md-datepicker-close />
 
-                    <span data-datepicker-app-bar-actions>
+                    <span data-md-datepicker-app-bar-actions>
                         <span x-show="! typing">
-                            <x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
+                            <x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
                         </span>
                         <span x-show="typing">
-                            <x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
+                            <x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
                         </span>
 
-                        <x-livewire-material::button :label="__('Save')" x-on:click="confirm()" data-datepicker-save />
+                        <x-livewire-material::button :label="__('Save')" x-on:click="confirm()" data-md-datepicker-save />
                     </span>
                 </div>
 
-                <div data-datepicker-full-headline>
-                    <p data-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
-                    <p data-datepicker-headline aria-live="polite" x-text="headline"></p>
+                <div data-md-datepicker-full-headline>
+                    <p data-md-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
+                    <p data-md-datepicker-headline aria-live="polite" x-text="headline"></p>
                 </div>
             </div>
 
-            <div data-datepicker-header x-show="presentation === 'modal'" @if ($range) data-range @endif>
-                <p data-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
+            <div data-md-datepicker-header x-show="presentation === 'modal'" @if ($range) data-md-range @endif>
+                <p data-md-datepicker-title x-text="typing ? @js($inputTitle) : @js($title)">{{ $title }}</p>
 
-                <div data-datepicker-headline-row>
-                    <p data-datepicker-headline aria-live="polite" x-text="headline"></p>
+                <div data-md-datepicker-headline-row>
+                    <p data-md-datepicker-headline aria-live="polite" x-text="headline"></p>
 
                     <span x-show="! typing">
-                        <x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
+                        <x-livewire-material::button icon="edit" :tooltip="__('Switch to text input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
                     </span>
                     <span x-show="typing">
-                        <x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-datepicker-switch />
+                        <x-livewire-material::button icon="date_range" :tooltip="__('Switch to calendar input mode')" x-on:click="toggleTyping()" data-md-datepicker-switch />
                     </span>
                 </div>
             </div>
 
-            <div x-show="! typing" x-on:scroll="extendMonths($event)" data-datepicker-calendar>
-                <span id="{{ $id }}-month" class="sr-only" aria-live="polite" x-text="monthYear"></span>
+            <div x-show="! typing" x-on:scroll="extendMonths($event)" data-md-datepicker-calendar>
+                <span id="{{ $id }}-month" aria-live="polite" x-text="monthYear" data-md-datepicker-month-live></span>
 
-                <div data-datepicker-nav x-show="presentation === 'modal'">
+                <div data-md-datepicker-nav x-show="presentation === 'modal'">
                     <button
                         type="button"
-                        data-datepicker-menu-button="years"
+                        data-md-datepicker-menu-button="years"
                         x-on:click="toggleView('years')"
                         x-bind:aria-expanded="(view === 'years').toString()"
                         x-bind:aria-label="monthYear + ', ' + @js(__('Switch to selecting a year'))"
                     >
                         <span x-text="monthYear"></span>
-                        <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
+                        <x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
                     </button>
 
-                    <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
-                        <x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" data-datepicker-previous />
-                        <x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" data-datepicker-next />
+                    <span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
+                        <x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" data-md-datepicker-previous />
+                        <x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" data-md-datepicker-next />
                     </span>
                 </div>
 
-                <div data-datepicker-nav data-docked x-show="presentation === 'docked'">
-                    <span data-datepicker-stepper>
-                        <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
+                <div data-md-datepicker-nav data-md-docked x-show="presentation === 'docked'">
+                    <span data-md-datepicker-stepper>
+                        <span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
                             <x-livewire-material::button icon="chevron_left" :tooltip="__('Previous month')" x-on:click="step(-1)" x-bind:disabled="view !== 'days' || ! canStep(-1)" />
                         </span>
                         <button
                             type="button"
-                            data-datepicker-menu-button="months"
+                            data-md-datepicker-menu-button="months"
                             x-on:click="toggleView('months')"
                             x-bind:aria-expanded="(view === 'months').toString()"
                             x-bind:aria-label="monthLabel + ', ' + @js(__('Switch to selecting a month'))"
                         >
                             <span x-text="monthLabel"></span>
-                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
+                            <x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
                         </button>
-                        <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
+                        <span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
                             <x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" />
                         </span>
                     </span>
 
-                    <span data-datepicker-stepper>
-                        <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
+                    <span data-md-datepicker-stepper>
+                        <span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
                             <x-livewire-material::button icon="chevron_left" :tooltip="__('Previous year')" x-on:click="step(-12)" x-bind:disabled="view !== 'days' || ! canStep(-12)" />
                         </span>
                         <button
                             type="button"
-                            data-datepicker-menu-button="years"
+                            data-md-datepicker-menu-button="years"
                             x-on:click="toggleView('years')"
                             x-bind:aria-expanded="(view === 'years').toString()"
                             x-bind:aria-label="yearLabel + ', ' + @js(__('Switch to selecting a year'))"
                         >
                             <span x-text="yearLabel"></span>
-                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
+                            <x-livewire-material::icon name="arrow_drop_down" size="18" data-md-datepicker-menu-arrow />
                         </button>
-                        <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
+                        <span data-md-datepicker-arrows x-bind:data-md-concealed="view !== 'days' ? '' : null">
                             <x-livewire-material::button icon="chevron_right" :tooltip="__('Next year')" x-on:click="step(12)" x-bind:disabled="view !== 'days' || ! canStep(12)" />
                         </span>
                     </span>
                 </div>
 
-                <table role="grid" aria-labelledby="{{ $id }}-month" x-show="view === 'days'" x-on:keydown="gridKey($event)" data-datepicker-grid>
+                <table role="grid" aria-labelledby="{{ $id }}-month" x-show="view === 'days'" x-on:keydown="gridKey($event)" data-md-datepicker-grid>
                     <thead>
                         <tr>
                             <template x-for="weekday in weekdays" :key="weekday.long">
@@ -387,7 +387,7 @@
                             <tr>
                                 {{-- Full screen: a month's name heads its weeks, M3's month label. --}}
                                 <template x-if="row.label">
-                                    <th colspan="7" scope="colgroup" x-text="row.label" data-datepicker-month-label></th>
+                                    <th colspan="7" scope="colgroup" x-text="row.label" data-md-datepicker-month-label></th>
                                 </template>
 
                                 <template x-for="(cell, column) in (row.cells ?? [])" :key="column">
@@ -398,16 +398,16 @@
                                         x-bind:aria-selected="! cell.blank && (cell.selected || cell.between) ? 'true' : null"
                                         x-bind:aria-disabled="! cell.blank && cell.disabled ? 'true' : null"
                                         x-bind:aria-current="! cell.blank && cell.today ? 'date' : null"
-                                        x-bind:data-value="cell.blank ? null : cell.value"
-                                        x-bind:data-blank="cell.blank ? '' : null"
-                                        x-bind:data-outside="cell.outside ? '' : null"
-                                        x-bind:data-today="cell.today ? '' : null"
-                                        x-bind:data-selected="cell.selected ? '' : null"
-                                        x-bind:data-start="cell.start ? '' : null"
-                                        x-bind:data-end="cell.end ? '' : null"
-                                        x-bind:data-between="cell.between ? '' : null"
+                                        x-bind:data-md-value="cell.blank ? null : cell.value"
+                                        x-bind:data-md-blank="cell.blank ? '' : null"
+                                        x-bind:data-md-outside="cell.outside ? '' : null"
+                                        x-bind:data-md-today="cell.today ? '' : null"
+                                        x-bind:data-md-selected="cell.selected ? '' : null"
+                                        x-bind:data-md-start="cell.start ? '' : null"
+                                        x-bind:data-md-end="cell.end ? '' : null"
+                                        x-bind:data-md-between="cell.between ? '' : null"
                                         x-on:click="choose(cell)"
-                                        data-datepicker-day
+                                        data-md-datepicker-day
                                     ><span x-text="cell.blank ? '' : cell.label"></span></td>
                                 </template>
                             </tr>
@@ -415,22 +415,22 @@
                     </tbody>
                 </table>
 
-                <div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'modal'" x-on:keydown="listKey($event, 3)" data-datepicker-list data-datepicker-years>
+                <div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'modal'" x-on:keydown="listKey($event, 3)" data-md-datepicker-list data-md-datepicker-years>
                     <template x-for="year in years" :key="year.value">
                         <button
                             type="button"
                             role="option"
                             x-bind:aria-selected="year.selected.toString()"
                             x-bind:tabindex="year.selected ? 0 : -1"
-                            x-bind:data-current="year.current ? '' : null"
+                            x-bind:data-md-current="year.current ? '' : null"
                             x-on:click="showMonthOf(year.value, +shown.slice(5, 7))"
                             x-text="year.label"
-                            data-datepicker-year
+                            data-md-datepicker-year
                         ></button>
                     </template>
                 </div>
 
-                <div role="listbox" aria-label="{{ __('Months') }}" x-show="view === 'months' && presentation === 'docked'" x-on:keydown="listKey($event)" data-datepicker-list data-datepicker-menu>
+                <div role="listbox" aria-label="{{ __('Months') }}" x-show="view === 'months' && presentation === 'docked'" x-on:keydown="listKey($event)" data-md-datepicker-list data-md-datepicker-menu>
                     <template x-for="month in months" :key="month.value">
                         <button
                             type="button"
@@ -439,15 +439,15 @@
                             x-bind:aria-disabled="month.disabled ? 'true' : null"
                             x-bind:tabindex="month.selected ? 0 : -1"
                             x-on:click="month.disabled || showMonthOf(+shown.slice(0, 4), month.value)"
-                            data-datepicker-option
+                            data-md-datepicker-option
                         >
-                            <x-livewire-material::icon name="check" data-datepicker-check />
+                            <x-livewire-material::icon name="check" data-md-datepicker-check />
                             <span x-text="month.label"></span>
                         </button>
                     </template>
                 </div>
 
-                <div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'docked'" x-on:keydown="listKey($event)" data-datepicker-list data-datepicker-menu>
+                <div role="listbox" aria-label="{{ __('Years') }}" x-show="view === 'years' && presentation === 'docked'" x-on:keydown="listKey($event)" data-md-datepicker-list data-md-datepicker-menu>
                     <template x-for="year in years" :key="year.value">
                         <button
                             type="button"
@@ -455,17 +455,17 @@
                             x-bind:aria-selected="year.selected.toString()"
                             x-bind:tabindex="year.selected ? 0 : -1"
                             x-on:click="showMonthOf(year.value, +shown.slice(5, 7))"
-                            data-datepicker-option
+                            data-md-datepicker-option
                         >
-                            <x-livewire-material::icon name="check" data-datepicker-check />
+                            <x-livewire-material::icon name="check" data-md-datepicker-check />
                             <span x-text="year.label"></span>
                         </button>
                     </template>
                 </div>
             </div>
 
-            <div x-show="typing" data-datepicker-entry>
-                <div @if ($range) data-range @endif data-datepicker-entry-fields>
+            <div x-show="typing" data-md-datepicker-entry>
+                <div @if ($range) data-md-range @endif data-md-datepicker-entry-fields>
                     <x-livewire-material::field id="{{ $id }}-entry" :label="$range ? __('Start date') : __('Date')" :$variant x-bind:data-md-invalid="entryError !== '' ? '' : null">
                         <input
                             id="{{ $id }}-entry"
@@ -502,15 +502,15 @@
                     @endif
                 </div>
 
-                <div id="{{ $id }}-entry-support" data-datepicker-support>
-                    <p x-show="entryError !== ''" x-text="entryError" role="alert" data-datepicker-error></p>
+                <div id="{{ $id }}-entry-support" data-md-datepicker-support>
+                    <p x-show="entryError !== ''" x-text="entryError" role="alert" data-md-datepicker-error></p>
                 </div>
             </div>
 
             {{-- The full-screen picker confirms from its app bar, so it draws no action row. --}}
-            <div x-show="presentation !== 'full' && (view === 'days' || typing || presentation === 'modal')" data-datepicker-actions>
-                <x-livewire-material::button :label="__('Cancel')" x-on:click="cancel()" data-datepicker-cancel />
-                <x-livewire-material::button :label="__('OK')" x-on:click="confirm()" data-datepicker-confirm />
+            <div x-show="presentation !== 'full' && (view === 'days' || typing || presentation === 'modal')" data-md-datepicker-actions>
+                <x-livewire-material::button :label="__('Cancel')" x-on:click="cancel()" data-md-datepicker-cancel />
+                <x-livewire-material::button :label="__('OK')" x-on:click="confirm()" data-md-datepicker-confirm />
             </div>
         </div>
     </dialog>
diff --git a/tests/Browser/DatepickerTest.php b/tests/Browser/DatepickerTest.php
index 79ad1712..034f07a6 100644
--- a/tests/Browser/DatepickerTest.php
+++ b/tests/Browser/DatepickerTest.php
@@ -168,19 +168,19 @@ function scopedDateProbe()
 /** A picker's day cell, by its ISO date. */
 function day(string $picker, string $date): string
 {
-    return "#{$picker}-picker [data-value=\"{$date}\"]";
+    return "#{$picker}-picker [data-md-value=\"{$date}\"]";
 }
 
 function focusedDay(string $date): string
 {
-    return "document.activeElement.dataset.value === '{$date}'";
+    return "document.activeElement.dataset.mdValue === '{$date}'";
 }
 
 it('opens the docked picker under its field and walks the grid from the keyboard', function () {
     $picker = "document.querySelector('#expires-field-picker')";
 
     $page = dateProbe()
-        ->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
         ->assertScript("{$picker}.matches(':popover-open') && {$picker}.dataset.presentation === 'docked'")
         ->assertAttribute('#expires-field', 'aria-expanded', 'true')
         ->assertScript("(() => { const field = document.querySelector('#expires-field').closest('[data-md-field-box]').getBoundingClientRect(); const box = {$picker}.getBoundingClientRect(); return Math.abs(box.top - field.bottom - 4) < 2 && Math.abs(box.left - field.left) < 2; })()")
@@ -205,7 +205,7 @@ it('opens the docked picker under its field and walks the grid from the keyboard
 
 it('keeps focus and choice inside min and max', function () {
     $page = dateProbe()
-        ->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
         ->assertScript(focusedDay('2026-09-13'));
 
     // Playwright will not press an aria-disabled cell, so the press is dispatched.
@@ -245,18 +245,18 @@ it('opens the modal picker, jumps through the year grid and confirms with OK', f
     $page = dateProbe()
         ->click('#birthday-field')
         ->assertScript("{$dialog}.matches(':modal')")
-        ->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 17, 2000')
-        ->click('#birthday-field-picker [data-datepicker-nav]:not([data-docked]) [data-datepicker-menu-button]')
-        ->assertScript("getComputedStyle(document.querySelector('#birthday-field-picker [data-datepicker-years]')).display !== 'none'")
+        ->assertSeeIn('#birthday-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'May 17, 2000')
+        ->click('#birthday-field-picker [data-md-datepicker-nav]:not([data-md-docked]) [data-md-datepicker-menu-button]')
+        ->assertScript("getComputedStyle(document.querySelector('#birthday-field-picker [data-md-datepicker-years]')).display !== 'none'")
         ->assertScript("document.activeElement.textContent.trim() === '2000'");
 
-    $page->click('#birthday-field-picker [data-datepicker-year]:has-text("1990")')
-        ->assertSeeIn('#birthday-field-picker [data-datepicker-nav]', 'May 1990')
+    $page->click('#birthday-field-picker [data-md-datepicker-year]:has-text("1990")')
+        ->assertSeeIn('#birthday-field-picker [data-md-datepicker-nav]', 'May 1990')
         ->click(day('birthday-field', '1990-05-03'))
-        ->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 3, 1990')
+        ->assertSeeIn('#birthday-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'May 3, 1990')
         ->assertSeeIn('#birthday', '2000-05-17');
 
-    $page->click('#birthday-field-picker [data-datepicker-confirm]')
+    $page->click('#birthday-field-picker [data-md-datepicker-confirm]')
         ->assertSeeIn('#birthday', '1990-05-03')
         ->assertScript("! {$dialog}.open");
 });
@@ -274,7 +274,7 @@ it('closes on Escape without keeping the draft and hands focus back to the field
 
     $page->keys(':focus', 'ArrowRight')
         ->keys(':focus', 'Space')
-        ->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 18, 2000');
+        ->assertSeeIn('#birthday-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'May 18, 2000');
 
     $page->keys(':focus', 'Escape')
         ->assertScript("! {$dialog}.open")
@@ -282,7 +282,7 @@ it('closes on Escape without keeping the draft and hands focus back to the field
         ->assertSeeIn('#birthday', '2000-05-17');
 
     // The docked picker too.
-    $page->script("document.querySelector('[aria-controls=\"expires-field-picker\"][data-datepicker-toggle]').focus()");
+    $page->script("document.querySelector('[aria-controls=\"expires-field-picker\"][data-md-datepicker-toggle]').focus()");
 
     $page->keys(':focus', 'Enter')
         ->assertScript("document.querySelector('#expires-field-picker').matches(':popover-open')")
@@ -300,10 +300,10 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
         ->click('#delivery-field')
         ->assertScript("{$dialog}.matches(':modal')")
         ->assertScript("document.activeElement.id === 'delivery-field-entry'")
-        ->assertSeeIn('#delivery-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Entered date');
+        ->assertSeeIn('#delivery-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'Entered date');
 
     $page->type('#delivery-field-entry', '2026-03-07')
-        ->click('#delivery-field-picker [data-datepicker-confirm]')
+        ->click('#delivery-field-picker [data-md-datepicker-confirm]')
         ->assertSeeIn('#delivery-field-entry-support', 'Date does not match expected pattern: MM/DD/YYYY')
         ->assertAttribute('#delivery-field-entry', 'aria-invalid', 'true')
         ->assertScript("{$dialog}.open");
@@ -314,7 +314,7 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
         ->assertScript("{$dialog}.open");
 
     $page->type('#delivery-field-entry', '3/7/2026')
-        ->assertSeeIn('#delivery-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Mar 7, 2026')
+        ->assertSeeIn('#delivery-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'Mar 7, 2026')
         ->keys('#delivery-field-entry', 'Enter')
         ->assertSeeIn('#delivery', '2026-03-07')
         ->assertScript("! {$dialog}.open")
@@ -323,7 +323,7 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
 
 it('picks a range: a start, an end, and the days between', function () {
     $page = dateProbe()
-        ->click('[aria-controls="trip-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
         ->assertAttribute(day('trip-field', '2026-09-14'), 'aria-selected', 'true');
 
     $page->click(day('trip-field', '2026-09-20'))
@@ -331,11 +331,11 @@ it('picks a range: a start, an end, and the days between', function () {
         ->assertScript("! document.querySelector('".day('trip-field', '2026-09-14')."').hasAttribute('data-between')");
 
     $page->click(day('trip-field', '2026-09-24'))
-        ->assertScript("[...document.querySelectorAll('#trip-field-picker [data-between]')].map((cell) => cell.dataset.value).join() === '2026-09-21,2026-09-22,2026-09-23'")
+        ->assertScript("[...document.querySelectorAll('#trip-field-picker [data-md-between]')].map((cell) => cell.dataset.mdValue).join() === '2026-09-21,2026-09-22,2026-09-23'")
         ->assertScript("document.querySelector('".day('trip-field', '2026-09-20')."').hasAttribute('data-start') && document.querySelector('".day('trip-field', '2026-09-24')."').hasAttribute('data-end')")
         ->assertSeeIn('#trip', '2026-09-15');
 
-    $page->click('#trip-field-picker [data-datepicker-confirm]')
+    $page->click('#trip-field-picker [data-md-datepicker-confirm]')
         ->assertSeeIn('#trip', '{"start":"2026-09-20","end":"2026-09-24"}')
         ->assertValue('#trip-field', '09/20/2026 – 09/24/2026');
 });
@@ -345,7 +345,7 @@ it('follows the locale: German weeks start on Monday, American ones on Sunday',
 
     $page = dateProbe('de')
         ->assertValue('#expires-field', '13.09.2026')
-        ->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
         ->assertScript("{$firstWeekday} === 'Montag'")
         ->assertScript("document.querySelector('#expires-field-month').textContent === 'September 2026'")
         ->assertScript(focusedDay('2026-09-13'));
@@ -358,13 +358,13 @@ it('follows the locale: German weeks start on Monday, American ones on Sunday',
         ->assertAttribute('#expires-field', 'placeholder', 'DD.MM.YYYY');
 
     dateProbe('en_US')
-        ->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
         ->assertScript("{$firstWeekday} === 'Sunday'");
 });
 
 it('stays open, where it was, through a Livewire render', function () {
     $page = dateProbe()
-        ->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
         ->assertScript(focusedDay('2026-09-13'));
 
     $page->keys(':focus', 'ArrowRight')->assertScript(focusedDay('2026-09-14'));
@@ -388,22 +388,22 @@ it('stays open, where it was, through a Livewire render', function () {
 it('opens a docked picker as a modal one on a compact window', function () {
     dateProbe()
         ->resize(400, 800)
-        ->click('[aria-controls="expires-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
         ->assertScript("document.querySelector('#expires-field-picker').matches(':modal')")
-        ->assertScript("getComputedStyle(document.querySelector('#expires-field-picker [data-datepicker-header]')).display !== 'none'");
+        ->assertScript("getComputedStyle(document.querySelector('#expires-field-picker [data-md-datepicker-header]')).display !== 'none'");
 });
 
 it('empties a date, or both ends of a range, with its clear button', function () {
     $page = dateProbe()
         ->assertScript("getComputedStyle(document.querySelector('#expires-field').closest('[data-md-field]').querySelector('[data-md-field-clear]')).display !== 'none'");
 
-    $page->click('[data-datepicker]:has(#expires-field) [data-md-field-clear]')
+    $page->click('[data-md-datepicker]:has(#expires-field) [data-md-field-clear]')
         ->assertScript("document.querySelector('#expires').textContent === ''")
         ->assertValue('#expires-field', '')
         ->assertScript("document.activeElement.id === 'expires-field'")
-        ->assertScript("getComputedStyle(document.querySelector('[data-datepicker]:has(#expires-field) [data-md-field-clear]')).display === 'none'");
+        ->assertScript("getComputedStyle(document.querySelector('[data-md-datepicker]:has(#expires-field) [data-md-field-clear]')).display === 'none'");
 
-    $page->click('[data-datepicker]:has(#trip-field) [data-md-field-clear]')
+    $page->click('[data-md-datepicker]:has(#trip-field) [data-md-field-clear]')
         ->assertSeeIn('#trip', '{"start":null,"end":null}')
         ->assertValue('#trip-field', '');
 });
@@ -411,9 +411,9 @@ it('empties a date, or both ends of a range, with its clear button', function ()
 it('starts the week on the day week-start names, whatever the locale says', function () {
     $page = dateFormatProbe('de')
         ->assertValue('#sunday-field', '13.09.2026')
-        ->click('[aria-controls="sunday-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="sunday-field-picker"][data-md-datepicker-toggle]')
         ->assertScript("document.querySelector('#sunday-field-picker thead th').getAttribute('abbr') === 'Sonntag'")
-        ->assertScript("document.querySelector('#sunday-field-picker tbody td').dataset.value === '2026-08-30'")
+        ->assertScript("document.querySelector('#sunday-field-picker tbody td').dataset.mdValue === '2026-08-30'")
         ->assertScript(focusedDay('2026-09-13'));
 
     $page->keys(':focus', 'End')->assertScript(focusedDay('2026-09-19'));
@@ -436,7 +436,7 @@ it('shows and reads a year-first format and still binds Y-m-d', function () {
         ->assertSee('Date does not match expected pattern: YYYY-MM-DD')
         ->assertSeeIn('#iso', '2026-10-01');
 
-    $page->click('[aria-controls="iso-field-picker"][data-datepicker-toggle]')
+    $page->click('[aria-controls="iso-field-picker"][data-md-datepicker-toggle]')
         ->assertScript(focusedDay('2026-10-01'));
 
     $page->keys(':focus', 'ArrowRight')->assertScript(focusedDay('2026-10-02'));
@@ -463,7 +463,7 @@ it('reads the dialog\'s text field in the given format, not the locale\'s', func
         ->assertScript("{$dialog}.open");
 
     $page->type('#dotted-field-entry', '1.10.2026')
-        ->assertSeeIn('#dotted-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Oct 1, 2026')
+        ->assertSeeIn('#dotted-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'Oct 1, 2026')
         ->keys('#dotted-field-entry', 'Enter')
         ->assertSeeIn('#dotted', '2026-10-01')
         ->assertScript("! {$dialog}.open")
@@ -487,7 +487,7 @@ it('lays out and shows a range in the given first day and format', function () {
 
     $page->click(day('span-field', '2026-09-20'))
         ->click(day('span-field', '2026-09-24'))
-        ->click('#span-field-picker [data-datepicker-confirm]')
+        ->click('#span-field-picker [data-md-datepicker-confirm]')
         ->assertSeeIn('#span', '{"start":"2026-09-20","end":"2026-09-24"}')
         ->assertValue('#span-field', '20/09/2026 – 24/09/2026');
 });
@@ -496,9 +496,86 @@ it('keeps each picker\'s own settings inside a page\'s outer x-data scope', func
     // Settings assigned in init() without being declared would land on the outermost scope,
     // where the last picker's null min and Monday start would overwrite the first's.
     $page = scopedDateProbe()
-        ->click('[aria-controls="early-field-picker"][data-datepicker-toggle]')
+        ->click('[aria-controls="early-field-picker"][data-md-datepicker-toggle]')
         ->assertScript(focusedDay('2026-09-13'));
 
     $page->assertAttribute(day('early-field', '2026-09-09'), 'aria-disabled', 'true')
         ->assertScript('! (\'min\' in Alpine.$data(document.querySelector(\'[x-data="{ step: 1 }"]\')))');
 });
+
+it('opens the range picker full screen below 600px and grows its month list both ways by keyboard paging', function () {
+    $picker = "document.querySelector('#trip-field-picker')";
+    $scope = "Alpine.\$data(document.querySelector('[data-md-datepicker]:has(#trip-field)'))";
+
+    $page = dateProbe()
+        ->resize(390, 800)
+        ->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
+        ->assertScript("{$picker}.dataset.mdPresentation === 'full'")
+        ->assertScript("{$picker}.matches(':modal')")
+        ->assertScript("document.querySelector('#trip-field-picker [data-md-datepicker-app-bar]').offsetHeight > 0")
+        // M3's 14-element anatomy: a close (×) icon button and Save in the app bar, not Cancel/OK.
+        ->assertScript("document.querySelector('#trip-field-picker [data-md-datepicker-close]')")
+        ->assertScript("document.querySelector('#trip-field-picker [data-md-datepicker-save]')")
+        ->assertScript("getComputedStyle(document.querySelector('#trip-field-picker [data-md-datepicker-actions]')).display === 'none'")
+        // The window opens six months either side of the trip's start month.
+        ->assertScript("{$scope}.monthsFrom === '2026-03-01' && {$scope}.monthsTo === '2027-03-01'")
+        ->assertScript(focusedDay('2026-09-13'));
+
+    // Paging seven months forward crosses the window's forward edge, growing it to cover the month walked to.
+    foreach (range(1, 7) as $ignored) {
+        $page->keys(':focus', 'PageDown');
+    }
+
+    $page->assertScript("{$scope}.monthsTo > '2027-03-01'")
+        ->assertScript(focusedDay('2027-04-13'))
+        ->assertScript("[...document.querySelectorAll('#trip-field-picker [data-md-datepicker-month-label]')].some((label) => label.textContent.trim() === 'April 2027')");
+
+    // Paging fourteen months back does the same the other way, past the original start.
+    foreach (range(1, 14) as $ignored) {
+        $page->keys(':focus', 'PageUp');
+    }
+
+    $page->assertScript("{$scope}.monthsFrom < '2026-03-01'")
+        ->assertScript(focusedDay('2026-02-13'))
+        ->assertScript("[...document.querySelectorAll('#trip-field-picker [data-md-datepicker-month-label]')].some((label) => label.textContent.trim() === 'February 2026')");
+
+    // Picking a range and pressing Save commits it and closes the dialog.
+    $page->script("{$scope}.moveTo('2026-09-13', false)")
+        ->click(day('trip-field', '2026-09-20'))
+        ->click(day('trip-field', '2026-09-24'))
+        ->click('#trip-field-picker [data-md-datepicker-save]')
+        ->assertSeeIn('#trip', '{"start":"2026-09-20","end":"2026-09-24"}')
+        ->assertScript("! {$picker}.open");
+});
+
+it('closes the full-screen range picker from its app bar close button without keeping the draft', function () {
+    $picker = "document.querySelector('#trip-field-picker')";
+
+    dateProbe()
+        ->resize(390, 800)
+        ->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
+        ->click(day('trip-field', '2026-09-20'))
+        ->click('#trip-field-picker [data-md-datepicker-close]')
+        ->assertScript("! {$picker}.open")
+        ->assertSeeIn('#trip', '{"start":"2026-09-13","end":"2026-09-15"}');
+});
+
+it('reaches the month and year dropdowns with Shift+M and Shift+Y', function () {
+    $toggle = '[aria-controls="expires-field-picker"][data-md-datepicker-toggle]';
+
+    $page = dateProbe()
+        ->click($toggle)
+        ->assertScript(focusedDay('2026-09-13'));
+
+    $page->keys(':focus', 'Shift+M')
+        ->assertScript("document.activeElement.dataset.mdDatepickerMenuButton === 'months'");
+
+    $page->keys(':focus', 'Escape')
+        ->assertScript("! document.querySelector('#expires-field-picker').matches(':popover-open')");
+
+    $page->click($toggle)
+        ->assertScript(focusedDay('2026-09-13'));
+
+    $page->keys(':focus', 'Shift+Y')
+        ->assertScript("document.activeElement.dataset.mdDatepickerMenuButton === 'years'");
+});
diff --git a/tests/Feature/Components/DatepickerTest.php b/tests/Feature/Components/DatepickerTest.php
index 34d663a3..226e14f7 100644
--- a/tests/Feature/Components/DatepickerTest.php
+++ b/tests/Feature/Components/DatepickerTest.php
@@ -20,7 +20,7 @@ it('draws a docked date field whose combobox controls a popover picker', functio
     $html = (string) $this->blade('<x-datepicker id="expires" label="Expires on" hint="Type a date or pick one" />');
 
     expect($html)
-        ->toContain('data-datepicker')
+        ->toContain('data-md-datepicker')
         ->toContain('<label for="expires" data-md-field-label>Expires on</label>')
         ->toContain('role="combobox"')
         ->toContain('aria-haspopup="dialog"')
@@ -34,7 +34,7 @@ it('draws a docked date field whose combobox controls a popover picker', functio
         ->toContain('wire:ignore')
         ->toContain('aria-label="Select date"')
         ->toContain('role="grid"')
-        ->toContain('data-datepicker-toggle')
+        ->toContain('data-md-datepicker-toggle')
         ->toContain('x-modelable="value"')
         ->toContain('x-on:input="typeInField()"')
         ->not->toMatch('/<input[^>]*\sreadonly[\s>]/')
@@ -58,16 +58,16 @@ it('gives a range picker M3\'s full-screen presentation, with an app bar and Sav
     $html = (string) $this->blade('<x-datepicker id="trip" label="Trip" range mode="modal" />');
 
     expect($html)
-        ->toContain('data-datepicker-full')
+        ->toContain('data-md-datepicker-full')
         ->toContain('x-show="presentation === \'full\'"')
-        ->toContain('data-datepicker-app-bar')
-        ->toContain('data-datepicker-close')
-        ->toContain('data-datepicker-save')
+        ->toContain('data-md-datepicker-app-bar')
+        ->toContain('data-md-datepicker-close')
+        ->toContain('data-md-datepicker-save')
         ->toContain('Save')
         ->toContain('aria-label="Select dates"')
         // The months come from one list of rows, each headed by its label.
         ->toContain('x-for="row in rows"')
-        ->toContain('data-datepicker-month-label')
+        ->toContain('data-md-datepicker-month-label')
         // The action row is the modal's; the full-screen picker confirms from its app bar.
         ->toContain('x-show="presentation !== \'full\' && (view === \'days\' || typing || presentation === \'modal\')"')
         ->toContain('x-on:scroll="extendMonths($event)"');
@@ -83,9 +83,9 @@ it('leaves the docked and single-date pickers as they were', function () {
     $html = (string) $this->blade('<x-datepicker id="expires" label="Expires on" />');
 
     expect($html)
-        ->toContain('data-datepicker-nav data-docked')
+        ->toContain('data-md-datepicker-nav data-md-docked')
         ->toContain('x-show="presentation === \'docked\'"')
-        ->toContain('data-datepicker-menu-button="months"')
+        ->toContain('data-md-datepicker-menu-button="months"')
         ->toContain('x-show="presentation === \'modal\'"');
 });
 
@@ -93,8 +93,8 @@ it('names each dropdown so Shift+M and Shift+Y can reach it', function () {
     $html = (string) $this->blade('<x-datepicker label="Birthday" />');
 
     expect($html)
-        ->toContain('data-datepicker-menu-button="months"')
-        ->toContain('data-datepicker-menu-button="years"');
+        ->toContain('data-md-datepicker-menu-button="months"')
+        ->toContain('data-md-datepicker-menu-button="years"');
 });
 
 it('falls back to the docked picker for an unknown mode', function () {
@@ -224,7 +224,7 @@ it('replaces the hint with the errors for the property and its start and end', f
         ->toContain('The end must follow the start.')
         ->not->toContain('Pick a day')
         ->toContain('aria-invalid="true"')
-        ->toContain('data-datepicker-error')
+        ->toContain('data-md-datepicker-error')
         ->and(substr_count($html, 'data-md-invalid=""'))->toBe(2);
 });
 
diff --git a/tests/Feature/Components/InputStylesheetsTest.php b/tests/Feature/Components/InputStylesheetsTest.php
index e69b1046..48614741 100644
--- a/tests/Feature/Components/InputStylesheetsTest.php
+++ b/tests/Feature/Components/InputStylesheetsTest.php
@@ -33,6 +33,7 @@ dataset('input components', [
     'search',
     'table',
     'sort-header',
+    'datepicker',
 ]);
 
 /**
@@ -163,10 +164,20 @@ function assertTokensAndPxBreakpoints(ComponentStylesheet $css, string $label):
     $source = str_replace('background-color 604800s, color 604800s', '', $source);
 
     expect($source)->not->toMatch('/#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch)\(/i')
-        ->not->toMatch('/\bbox-shadow:(?!\s*(?:none|var\(--md-))/')
         ->not->toMatch('/\bfont:(?!\s*var\(--md-sys-typescale-)/')
         ->not->toMatch('/\btransition[a-z-]*:[^;]*(?:\d+m?s\b|\bease\b|ease-in|ease-out|cubic-bezier)/');
 
+    // A flat elevation (`var(--md-sys-elevation-N)`, `none`) or a ring built from a colour token
+    // (`inset 0 0 0 1px var(--md-sys-color-…)`, a day's or a year's "current" ring) — never a
+    // literal length paired with a colour the first check would not otherwise catch on its own.
+    preg_match_all('/\bbox-shadow:\s*([^;]+);/', $source, $shadows, PREG_SET_ORDER);
+
+    foreach ($shadows as [, $value]) {
+        $value = trim($value);
+
+        expect($value === 'none' || str_contains($value, 'var(--md-'))->toBeTrue("{$label}: box-shadow: {$value} is not none or built from a token");
+    }
+
     assertBreakpointsInPx($css, $label);
 }