@expressivecss/expressive 0.13.1 → 0.15.0

package/dist/css/expressive.css

@@ -884,9 +884,6 @@
   }
   @media (width < 840px) {
     table.responsive-table {
-      width: 100%;
-      border-collapse: collapse;
-      border-spacing: 0;
       display: block;
       position: relative;
     }
@@ -898,12 +895,12 @@
       margin: 0;
       vertical-align: top;
     }
-    table.responsive-table th {
-      text-align: left;
-    }
     table.responsive-table thead {
       display: block;
       float: left;
+      /* sort out borders */
+      border: 0;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
     }
     table.responsive-table thead tr {
       display: block;
@@ -930,19 +927,11 @@
     table.responsive-table td {
       display: block;
       min-height: 1.25em;
-      text-align: left;
     }
     table.responsive-table tr {
       border-bottom: none;
       padding: 0 10px;
     }
-    table.responsive-table {
-      /* sort out borders */
-    }
-    table.responsive-table thead {
-      border: 0;
-      border-right: 1px solid var(--md-sys-color-outline-variant);
-    }
   }
   html {
     font-family: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
@@ -1570,7 +1559,7 @@
     --md-comp-filled-button-icon-label-space: 8px;
     --md-comp-filled-button-outline-width: 1px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button) {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button) {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
@@ -1595,7 +1584,7 @@
     -webkit-tap-highlight-color: transparent;
     transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     flex: 0 0 auto;
     font-size: var(--md-comp-filled-button-icon-size);
     width: var(--md-comp-filled-button-icon-size);
@@ -1603,93 +1592,93 @@
     line-height: var(--md-comp-filled-button-icon-size);
     overflow: hidden;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).circle {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).circle {
     width: var(--md-comp-filled-button-container-height);
     padding: 0;
     border-radius: 50%;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text),
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).filled {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text),
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).filled {
     color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
     background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text):hover,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).filled:hover {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text):hover,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).filled:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-primary));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text):active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text):focus,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).filled:active,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).filled:focus {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text):active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text):focus,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).filled:active,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).filled:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-sys-color-primary));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text):focus-visible,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).filled:focus-visible {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):not(.tonal, .outlined, .elevated, .text):focus-visible,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).filled:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).tonal {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).tonal {
     color: var(--md-sys-color-on-secondary-container);
     background-color: var(--md-sys-color-secondary-container);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).tonal:hover {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).tonal:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-secondary-container));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).tonal:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).tonal:focus {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).tonal:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).tonal:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-sys-color-secondary-container));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).tonal:focus-visible {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).tonal:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).outlined {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).outlined {
     background-color: transparent;
     color: var(--md-sys-color-primary);
     border: var(--md-comp-filled-button-outline-width, 1px) solid var(--md-sys-color-outline);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).outlined:hover {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).outlined:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).outlined:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).outlined:focus {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).outlined:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).outlined:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).outlined:focus-visible {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).outlined:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).elevated {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).elevated {
     color: var(--md-sys-color-primary);
     background-color: var(--md-sys-color-surface-container-low);
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).elevated:hover {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).elevated:hover {
     box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
     background-color: color-mix(in oklab, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-surface-container-low));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).elevated:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).elevated:focus {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).elevated:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).elevated:focus {
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
     background-color: color-mix(in oklab, var(--md-sys-color-primary) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-sys-color-surface-container-low));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).elevated:focus-visible {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).elevated:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).text {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).text {
     box-shadow: none !important;
     color: var(--md-sys-color-primary);
     background-color: transparent;
     border-color: transparent;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).text:hover {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).text:hover {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).text:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).text:focus {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).text:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).text:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-primary) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).text:focus-visible {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).text:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).xsmall {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).xsmall {
     --md-comp-filled-button-container-height: 32px;
     --md-comp-filled-button-icon-size: 20px;
     --md-comp-filled-button-leading-space: 12px;
@@ -1702,7 +1691,7 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).small {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).small {
     --md-comp-filled-button-container-height: 40px;
     --md-comp-filled-button-icon-size: 20px;
     --md-comp-filled-button-leading-space: 16px;
@@ -1715,7 +1704,7 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).medium {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).medium {
     --md-comp-filled-button-container-height: 56px;
     --md-comp-filled-button-icon-size: 24px;
     --md-comp-filled-button-leading-space: 24px;
@@ -1728,7 +1717,7 @@
     line-height: var(--md-sys-typescale-title-medium-line-height);
     letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large {
     --md-comp-filled-button-container-height: 96px;
     --md-comp-filled-button-icon-size: 32px;
     --md-comp-filled-button-leading-space: 48px;
@@ -1741,7 +1730,7 @@
     line-height: var(--md-sys-typescale-headline-small-line-height);
     letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).xlarge {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).xlarge {
     --md-comp-filled-button-container-height: 136px;
     --md-comp-filled-button-icon-size: 40px;
     --md-comp-filled-button-leading-space: 64px;
@@ -1754,7 +1743,7 @@
     line-height: var(--md-sys-typescale-headline-large-line-height);
     letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra {
     --md-comp-filled-button-container-height: 56px;
     --md-comp-filled-button-icon-size: 24px;
     --md-comp-filled-button-leading-space: 24px;
@@ -1762,10 +1751,10 @@
     --md-comp-filled-button-icon-label-space: 8px;
     --md-comp-filled-button-outline-width: 1px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).rounded {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).rounded {
     border-radius: 9999px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend {
     --md-comp-extended-fab-container-color: var(--md-sys-color-primary-container);
     --md-comp-extended-fab-label-text-color: var(
       --md-sys-color-on-primary-container
@@ -1778,24 +1767,24 @@
     background-color: var(--md-comp-extended-fab-container-color);
     box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend:hover {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend:hover {
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
     background-color: color-mix(in oklab, var(--md-comp-extended-fab-label-text-color) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-comp-extended-fab-container-color));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend:focus {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend:focus {
     background-color: color-mix(in oklab, var(--md-comp-extended-fab-label-text-color) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-comp-extended-fab-container-color));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend:focus-visible {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     font-size: var(--md-comp-extended-fab-icon-size);
     width: var(--md-comp-extended-fab-icon-size);
     height: var(--md-comp-extended-fab-icon-size);
     line-height: var(--md-comp-extended-fab-icon-size);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.small {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend.small {
     --md-comp-extended-fab-container-height: 56px;
     --md-comp-extended-fab-container-shape: 16px;
     --md-comp-extended-fab-icon-size: 24px;
@@ -1808,7 +1797,7 @@
     line-height: var(--md-sys-typescale-title-medium-line-height);
     letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.medium {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend.medium {
     --md-comp-extended-fab-container-height: 80px;
     --md-comp-extended-fab-container-shape: 20px;
     --md-comp-extended-fab-icon-size: 28px;
@@ -1821,7 +1810,7 @@
     line-height: var(--md-sys-typescale-title-large-line-height);
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.large {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend.large {
     --md-comp-extended-fab-container-height: 96px;
     --md-comp-extended-fab-container-shape: 28px;
     --md-comp-extended-fab-icon-size: 36px;
@@ -1834,7 +1823,7 @@
     line-height: var(--md-sys-typescale-headline-small-line-height);
     letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.primary-container {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend.primary-container {
     --md-comp-extended-fab-container-color: var(
       --md-sys-color-primary-container
     );
@@ -1842,7 +1831,7 @@
       --md-sys-color-on-primary-container
     );
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.secondary-container {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend.secondary-container {
     --md-comp-extended-fab-container-color: var(
       --md-sys-color-secondary-container
     );
@@ -1850,7 +1839,7 @@
       --md-sys-color-on-secondary-container
     );
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(.small, .medium, .large).extend.tertiary-container {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(.small, .medium, .large).extend.tertiary-container {
     --md-comp-extended-fab-container-color: var(
       --md-sys-color-tertiary-container
     );
@@ -1858,8 +1847,8 @@
       --md-sys-color-on-tertiary-container
     );
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle {
     --md-comp-fab-container-height: 56px;
     --md-comp-fab-container-width: 56px;
     --md-comp-fab-container-shape: 16px;
@@ -1881,65 +1870,64 @@
     vertical-align: middle;
     box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle:focus-visible,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle:focus-visible {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:focus-visible,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons),
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons),
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     font-size: var(--md-comp-fab-icon-size);
     width: var(--md-comp-fab-icon-size);
     height: var(--md-comp-fab-icon-size);
     line-height: var(--md-comp-fab-icon-size);
     color: inherit;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle:hover,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle:hover {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:hover,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:hover {
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-primary-container));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle:focus,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle:active,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle:focus {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:active, :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle:focus,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:active,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle:focus {
     background-color: color-mix(in oklab, var(--md-sys-color-on-primary-container) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-sys-color-primary-container));
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle.medium,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle.medium {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle.medium,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle.medium {
     --md-comp-fab-container-height: 80px;
     --md-comp-fab-container-width: 80px;
     --md-comp-fab-container-shape: 20px;
     --md-comp-fab-icon-size: 26px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle.halfway-fab,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle.halfway-fab {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle.halfway-fab,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle.halfway-fab {
     position: absolute;
     inset-inline-end: 24px;
     bottom: -28px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle.halfway-fab.left,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).large.circle.halfway-fab.left {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle.halfway-fab.left,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).large.circle.halfway-fab.left {
     inset-inline-end: auto;
     inset-inline-start: 24px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).extra.circle.large {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).extra.circle.large {
     --md-comp-fab-container-height: 96px;
     --md-comp-fab-container-width: 96px;
     --md-comp-fab-container-shape: 28px;
     --md-comp-fab-icon-size: 36px;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):disabled,
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button)[disabled],
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button).disabled {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):disabled,
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button)[disabled],
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button).disabled {
     box-shadow: none !important;
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
     border-color: transparent;
     pointer-events: none;
-    box-shadow: none;
     cursor: default;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(:not(.circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *)) {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(:not(.circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *)) {
     height: auto;
     min-height: var(--md-comp-filled-button-container-height);
     max-width: 100%;
@@ -1948,7 +1936,7 @@
     overflow-wrap: break-word;
     text-align: center;
   }
-  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(:not(.circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *)) > * {
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-button), a.button, label.button):where(:not(.circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *)) > * {
     min-width: 0;
   }
   .button-group {
@@ -1957,12 +1945,7 @@
     --md-comp-button-group-item-shape-square: 12px;
     --md-comp-button-group-pressed-item-shape: 8px;
     --md-comp-button-group-pressed-item-width-multiplier: .15;
-    --md-comp-button-group-motion: linear(
-      0, .056 5%, .1796 10%, .3252 15%, .4675 20%, .5936 25%,
-      .6988 30%, .7828 35%, .8475 40%, .8959 45%, .931 50%,
-      .9559 55%, .973 60%, .9845 65%, .9919 70%, .9965 75%,
-      .9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015
-    );
+    --md-comp-button-group-motion: linear(0, 0.056 5%, 0.1796 10%, 0.3252 15%, 0.4675 20%, 0.5936 25%, 0.6988 30%, 0.7828 35%, 0.8475 40%, 0.8959 45%, 0.931 50%, 0.9559 55%, 0.973 60%, 0.9845 65%, 0.9919 70%, 0.9965 75%, 0.9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015);
     display: flex;
     align-items: center;
     gap: var(--md-comp-button-group-between-space);
@@ -2281,7 +2264,6 @@
     box-shadow: none !important;
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     pointer-events: none;
-    box-shadow: none;
     cursor: default;
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
     border-color: transparent;
@@ -2291,7 +2273,6 @@
     box-shadow: none !important;
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     pointer-events: none;
-    box-shadow: none;
     cursor: default;
     background-color: transparent;
     border-color: var(--md-sys-color-outline-variant);
@@ -2336,14 +2317,12 @@
   .button-group.connected.square {
     --md-comp-button-group-container-shape: var(--md-comp-button-group-inner-corner-corner-size);
   }
-  .button-group.connected > :is(button, a.button) {
-    min-width: 48px;
-  }
   .button-group.connected > :is(button, a.button) {
     --_corner: var(--md-comp-button-group-inner-corner-corner-size);
     --_outer-corner: var(--md-comp-button-group-container-shape);
     --_round: calc(var(--md-comp-filled-button-container-height, 40px) / 2);
     flex: 1 1 0;
+    min-width: 48px;
     border-radius: var(--_corner);
   }
   .button-group.connected > :is(button, a.button).icon-button {
@@ -2969,33 +2948,18 @@
     line-height: 0;
     color: transparent;
   }
-  :is(i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) {
+  :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     position: relative;
     overflow: visible;
   }
-  :is(i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) > .badge {
+  :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) > .badge {
     position: absolute;
     z-index: 1;
     inset-block-start: calc((100% - var(--md-comp-badge-icon-size)) / 2);
     inset-inline-end: calc((100% - var(--md-comp-badge-icon-size)) / 2);
     transform: translate(50%, -50%);
   }
-  :is(i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) > .badge:dir(rtl) {
+  :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) > .badge:dir(rtl) {
     transform: translate(-50%, -50%);
   }
   .list .badge,
@@ -4278,9 +4242,7 @@
     object-fit: cover;
     border-radius: var(--md-comp-card-media-shape);
   }
-  article > figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart)) {
-    position: relative;
-  }
+  article > figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart)),
   article > .primary-action > figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart)) {
     position: relative;
   }
@@ -5381,21 +5343,11 @@
   menu[id] > li:not(.divider, .optgroup, .gap, .label):last-child {
     border-radius: var(--md-comp-menu-item-container-shape) var(--md-comp-menu-item-container-shape) var(--md-comp-menu-item-edge-shape) var(--md-comp-menu-item-edge-shape);
   }
-  menu[id] > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover,
+  menu[id] > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover,
   menu[id] > li.active:not(.selected, [aria-selected=true], [aria-checked=true]) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
   }
-  menu[id] > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):active {
+  menu[id] > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):active {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
   menu[id] > li:is(.selected, [aria-selected=true], [aria-checked=true]):not(.divider) {
@@ -5416,9 +5368,7 @@
   menu[id] > li:is(.selected, [aria-selected=true], [aria-checked=true]):hover {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
   }
-  menu[id] > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus,
-  :focus-visible,
-  :active) {
+  menu[id] > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus, :focus-visible, :active) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 10%, var(--md-comp-menu-item-selected-container-color));
   }
   menu[id] > li:focus-visible {
@@ -5495,34 +5445,19 @@
   menu[id].grouped > li.gap {
     margin: 0;
   }
-  menu[id].grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover,
+  menu[id].grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover,
   menu[id].grouped > li.active,
   menu[id].grouped > li.selected,
   menu[id].grouped > li[aria-selected=true],
   menu[id].grouped > li[aria-checked=true] {
     background-color: var(--md-comp-menu-container-color);
   }
-  menu[id].grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)),
+  menu[id].grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)),
   menu[id].grouped > li.active:not(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     border-radius: var(--md-comp-menu-item-container-shape);
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
   }
-  menu[id].grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):active > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  menu[id].grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):active > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
   menu[id].grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
@@ -5532,9 +5467,7 @@
   menu[id].grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
   }
-  menu[id].grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus,
-  :focus-visible,
-  :active) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  menu[id].grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus, :focus-visible, :active) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 10%, var(--md-comp-menu-item-selected-container-color));
   }
   menu[id] li:has(> menu) {
@@ -5745,21 +5678,11 @@
   menu[id] li > menu > li:not(.divider, .optgroup, .gap, .label):last-child {
     border-radius: var(--md-comp-menu-item-container-shape) var(--md-comp-menu-item-container-shape) var(--md-comp-menu-item-edge-shape) var(--md-comp-menu-item-edge-shape);
   }
-  menu[id] li > menu > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover,
+  menu[id] li > menu > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover,
   menu[id] li > menu > li.active:not(.selected, [aria-selected=true], [aria-checked=true]) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
   }
-  menu[id] li > menu > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):active {
+  menu[id] li > menu > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):active {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
   menu[id] li > menu > li:is(.selected, [aria-selected=true], [aria-checked=true]):not(.divider) {
@@ -5780,9 +5703,7 @@
   menu[id] li > menu > li:is(.selected, [aria-selected=true], [aria-checked=true]):hover {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
   }
-  menu[id] li > menu > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus,
-  :focus-visible,
-  :active) {
+  menu[id] li > menu > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus, :focus-visible, :active) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 10%, var(--md-comp-menu-item-selected-container-color));
   }
   menu[id] li > menu > li:focus-visible {
@@ -5859,34 +5780,19 @@
   menu[id] li > menu.grouped > li.gap {
     margin: 0;
   }
-  menu[id] li > menu.grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover,
+  menu[id] li > menu.grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover,
   menu[id] li > menu.grouped > li.active,
   menu[id] li > menu.grouped > li.selected,
   menu[id] li > menu.grouped > li[aria-selected=true],
   menu[id] li > menu.grouped > li[aria-checked=true] {
     background-color: var(--md-comp-menu-container-color);
   }
-  menu[id] li > menu.grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)),
+  menu[id] li > menu.grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)),
   menu[id] li > menu.grouped > li.active:not(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     border-radius: var(--md-comp-menu-item-container-shape);
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
   }
-  menu[id] li > menu.grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):active > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  menu[id] li > menu.grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):active > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
   menu[id] li > menu.grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
@@ -5896,9 +5802,7 @@
   menu[id] li > menu.grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
   }
-  menu[id] li > menu.grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus,
-  :focus-visible,
-  :active) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  menu[id] li > menu.grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus, :focus-visible, :active) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 10%, var(--md-comp-menu-item-selected-container-color));
   }
   menu[id] li > menu li:has(> menu) {
@@ -5954,10 +5858,6 @@
   menu[id] > li:focus-visible {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
-  menu[id] > li:focus-visible:not(.selected, [aria-selected=true], [aria-checked=true]) {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: -3px;
-  }
   menu[id].grouped > li:focus-visible {
     background-color: var(--md-comp-menu-container-color);
   }
@@ -6912,7 +6812,6 @@
     outline: 0;
     margin: 0;
     padding: 0;
-    width: 120px;
     width: fit-content;
     min-width: 100px;
     max-width: 200px;
@@ -6927,12 +6826,10 @@
   }
   .prefix ~ .chips {
     margin-left: 3rem;
-    width: 92%;
     width: calc(100% - 3rem);
   }
   .suffix ~ .chips {
     margin-right: 3rem;
-    width: 92%;
     width: calc(100% - 3rem);
   }
   .chips:empty ~ label {
@@ -6957,10 +6854,7 @@
   }
   #lightbox-overlay {
     position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     background-color: var(--md-sys-color-background);
     z-index: 1000;
     will-change: opacity;
@@ -7027,54 +6921,54 @@
     padding: 0;
     list-style: none;
   }
-  footer:not(:has(> nav:only-child)).filled,
-  footer:not(:has(> nav:only-child)).surface {
+  footer:not(:has(> .navigation-bar:only-child)).filled,
+  footer:not(:has(> .navigation-bar:only-child)).surface {
     background-color: var(--md-sys-color-surface-container);
     border-top: 1px solid var(--md-sys-color-outline-variant);
   }
-  footer:not(:has(> nav:only-child)) > .container,
-  footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+  footer:not(:has(> .navigation-bar:only-child)) > .container,
+  footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
     display: grid;
     gap: var(--md-comp-footer-gap);
     grid-template-columns: 1fr;
   }
   @media (width >= 600px) {
-    footer:not(:has(> nav:only-child)) > .container,
-    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    footer:not(:has(> .navigation-bar:only-child)) > .container,
+    footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   @media (width >= 840px) {
-    footer:not(:has(> nav:only-child)) > .container,
-    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    footer:not(:has(> .navigation-bar:only-child)) > .container,
+    footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
       grid-template-columns: repeat(4, 1fr);
     }
   }
   @media (width >= 1200px) {
-    footer:not(:has(> nav:only-child)) > .container,
-    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    footer:not(:has(> .navigation-bar:only-child)) > .container,
+    footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
       grid-template-columns: repeat(5, 1fr);
     }
   }
   @media (width >= 1600px) {
-    footer:not(:has(> nav:only-child)) > .container,
-    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    footer:not(:has(> .navigation-bar:only-child)) > .container,
+    footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
       grid-template-columns: repeat(6, 1fr);
     }
   }
-  footer:not(:has(> nav:only-child)) > .container > .row,
-  footer:not(:has(> nav:only-child)) > .row {
+  footer:not(:has(> .navigation-bar:only-child)) > .container > .row,
+  footer:not(:has(> .navigation-bar:only-child)) > .row {
     grid-column: 1/-1;
   }
-  footer:not(:has(> nav:only-child)) :is(nav, section) {
+  footer:not(:has(> .navigation-bar:only-child)) :is(nav, section) {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 0;
     min-width: 0;
   }
-  footer:not(:has(> nav:only-child)) nav > a:not(.button, .icon-button, .circle, .extra),
-  footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .extra) {
+  footer:not(:has(> .navigation-bar:only-child)) nav > a:not(.button, .icon-button, .circle, .extra),
+  footer:not(:has(> .navigation-bar:only-child)) ul a:not(.button, .icon-button, .circle, .extra) {
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
@@ -7088,12 +6982,12 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  footer:not(:has(> nav:only-child)) nav > a:not(.button, .icon-button, .circle, .extra):hover,
-  footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .extra):hover {
+  footer:not(:has(> .navigation-bar:only-child)) nav > a:not(.button, .icon-button, .circle, .extra):hover,
+  footer:not(:has(> .navigation-bar:only-child)) ul a:not(.button, .icon-button, .circle, .extra):hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
-  footer:not(:has(> nav:only-child)) > small:last-child,
-  footer:not(:has(> nav:only-child)) > .container > small:last-child {
+  footer:not(:has(> .navigation-bar:only-child)) > small:last-child,
+  footer:not(:has(> .navigation-bar:only-child)) > .container > small:last-child {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -7112,8 +7006,8 @@
     line-height: var(--md-sys-typescale-body-small-line-height);
     letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
   }
-  footer:not(:has(> nav:only-child)) > small:last-child a:not(.button, .icon-button),
-  footer:not(:has(> nav:only-child)) > .container > small:last-child a:not(.button, .icon-button) {
+  footer:not(:has(> .navigation-bar:only-child)) > small:last-child a:not(.button, .icon-button),
+  footer:not(:has(> .navigation-bar:only-child)) > .container > small:last-child a:not(.button, .icon-button) {
     color: var(--md-sys-color-primary);
   }
   ::placeholder {
@@ -7863,9 +7757,10 @@
   }
   *:not(.switch) > [type=checkbox] + span:not(.lever, .supporting-text, .character-counter, .file-path) {
     position: relative;
-    display: inline-flex;
-    align-items: center;
+    display: inline-block;
+    box-sizing: border-box;
     min-height: 48px;
+    padding-block: calc((48px - 1lh) / 2);
     padding-left: 30px;
     cursor: pointer;
     user-select: none;
@@ -8189,8 +8084,6 @@
   }
   .field:has(> .hide-select) > input.menu-trigger {
     border-radius: inherit;
-  }
-  .field:has(> .hide-select) > input.menu-trigger {
     padding-inline-end: 52px;
   }
   .field:has(> .hide-select) .caret {
@@ -8878,15 +8771,13 @@
     min-inline-size: 0;
     margin: 0;
     padding: 16px;
-  }
-  fieldset + fieldset {
-    margin-block-start: 24px;
-  }
-  fieldset {
     border: var(--md-comp-fieldset-outline-width) solid var(--md-comp-fieldset-outline-color);
     border-radius: var(--md-comp-fieldset-container-shape);
     background-color: var(--md-comp-fieldset-container-color);
   }
+  fieldset + fieldset {
+    margin-block-start: 24px;
+  }
   fieldset > legend {
     float: none;
     width: auto;
@@ -8989,6 +8880,7 @@
     --md-comp-toc-label-color: var(--md-sys-color-on-surface-variant);
     --md-comp-toc-active-color: var(--md-sys-color-primary);
     --md-comp-toc-indicator: 2px;
+    --md-comp-toc-item-height: 48px;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -9003,7 +8895,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-height: 2rem;
+    min-height: var(--md-comp-toc-item-height);
     padding-inline-start: 16px;
     border-inline-start: var(--md-comp-toc-indicator) solid transparent;
     color: var(--md-comp-toc-label-color);
@@ -9802,7 +9694,6 @@
     display: block;
     font-size: 1.5rem;
     line-height: 25px;
-    color: var(--md-sys-color-on-primary);
   }
   :is(.datepicker-date-display, .date-picker-date-display) .date-text {
     display: block;
@@ -9843,12 +9734,6 @@
   :is(.datepicker-table, .date-picker-table) :is(.datepicker-day, .date-picker-day).is-today {
     color: var(--md-sys-color-primary);
   }
-  :is(.datepicker-table, .date-picker-table) :is(.datepicker-day, .date-picker-day) {
-    /*&.is-selected button {
-      background-color: var(--md-sys-color-primary);
-      color:  var(--md-sys-color-on-primary);
-    }*/
-  }
   :is(.datepicker-day, .date-picker-day).is-daterange-start,
   :is(.datepicker-day, .date-picker-day).is-daterange-end,
   :is(.datepicker-day, .date-picker-day).is-daterange {
@@ -9903,8 +9788,8 @@
     background-color: var(--md-sys-color-surface-variant);
     color: var(--md-sys-color-primary);
   }
-  :is(.datepicker-day-button, .date-picker-day-button).is-outside-current-month button, :is(.datepicker-day-button, .date-picker-day-button).is-disabled button {
-    color: var(--md-sys-color-on-surface);
+  :is(.is-outside-current-month, .is-disabled) :is(.datepicker-day-button, .date-picker-day-button) {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     pointer-events: none;
   }
   /* Footer */
@@ -9948,7 +9833,6 @@
     text-align: left;
     color: var(--md-sys-color-on-surface-variant);
     font-weight: 400;
-    /*position: relative;*/
     user-select: none;
     padding: 1rem 1rem 1.3rem 1rem;
   }
@@ -9993,14 +9877,8 @@
     width: 1.6rem;
     text-align: center;
   }
-  /*input[type=text].text-primary {
-    color: var(--md-sys-color-on-background);
-  }*/
   :is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
     font-size: 1.3rem;
-    /*position: absolute;
-    top: 1rem;
-    right: 1rem;*/
     font-weight: 400;
   }
   :is(.timepicker-span-am-pm, .time-picker-span-am-pm) {
@@ -10045,10 +9923,7 @@
   :is(.timepicker-canvas, .time-picker-canvas),
   :is(.timepicker-dial, .time-picker-dial) {
     position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+    inset: 0;
   }
   :is(.timepicker-minutes, .time-picker-minutes) {
     visibility: hidden;
@@ -10091,10 +9966,7 @@
   :is(.timepicker-canvas-out, .time-picker-canvas-out) {
     opacity: 0.25;
   }
-  :is(.timepicker-canvas-bearing, .time-picker-canvas-bearing) {
-    stroke: none;
-    fill: var(--md-sys-color-primary);
-  }
+  :is(.timepicker-canvas-bearing, .time-picker-canvas-bearing),
   :is(.timepicker-canvas-bg, .time-picker-canvas-bg) {
     stroke: none;
     fill: var(--md-sys-color-primary);
@@ -10121,15 +9993,12 @@
     :is(.timepicker-container, .time-picker-container) {
       width: auto;
       max-width: 620px;
-    }
-    :is(.timepicker-container, .time-picker-container) {
       flex-direction: row;
     }
     :is(.timepicker-digital-display, .time-picker-digital-display) {
       padding: 0.67rem;
     }
     :is(.timepicker-text-container, .time-picker-text-container) {
-      /*top: 31%;*/
       flex-direction: column;
       margin-top: 4.8rem;
       text-align: center;
@@ -10148,19 +10017,11 @@
     :is(.timepicker-container, .time-picker-container) .am-btn,
     :is(.timepicker-container, .time-picker-container) .pm-btn {
       flex-grow: 1;
-      /*width: auto;*/
-      padding-inline: 0;
       border-radius: 0;
       border: 1px solid var(--md-sys-color-outline);
     }
-    :is(.timepicker-container, .time-picker-container) .am-btn {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
     :is(.timepicker-container, .time-picker-container) .pm-btn {
       border-left: 0;
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
     }
     :is(.timepicker-plate, .time-picker-plate) {
       margin-top: 1.6rem;
@@ -10557,7 +10418,6 @@
   .panes.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated,
   .pane-layout.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated,
   .pane-layout.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated {
-    background-color: var(--md-sys-color-surface-container-low);
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
   }
   .panes.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).outlined,
@@ -10681,15 +10541,15 @@
     overscroll-behavior: contain;
     margin: 0;
   }
-  .pane > footer:not(:has(> nav:only-child)),
+  .pane > footer:not(:has(> .navigation-bar:only-child)),
   .pane > :is(footer, .pane-footer, nav:last-child),
-  .list-pane > footer:not(:has(> nav:only-child)),
+  .list-pane > footer:not(:has(> .navigation-bar:only-child)),
   .list-pane > :is(footer, .pane-footer, nav:last-child),
-  .primary-pane > footer:not(:has(> nav:only-child)),
+  .primary-pane > footer:not(:has(> .navigation-bar:only-child)),
   .primary-pane > :is(footer, .pane-footer, nav:last-child),
-  .detail-pane > footer:not(:has(> nav:only-child)),
+  .detail-pane > footer:not(:has(> .navigation-bar:only-child)),
   .detail-pane > :is(footer, .pane-footer, nav:last-child),
-  .supporting-pane > footer:not(:has(> nav:only-child)),
+  .supporting-pane > footer:not(:has(> .navigation-bar:only-child)),
   .supporting-pane > :is(footer, .pane-footer, nav:last-child) {
     display: flex;
     flex-wrap: wrap;
@@ -10702,15 +10562,15 @@
     padding: 8px 16px;
     border-block-start: 1px solid var(--md-comp-pane-divider-color);
   }
-  .pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
-  .list-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .list-pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .list-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
-  .primary-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .primary-pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .primary-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
-  .detail-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .detail-pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .detail-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
-  .supporting-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .supporting-pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .supporting-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button) {
     min-width: 0;
     max-width: 100%;
@@ -11465,6 +11325,151 @@
     border: none;
     border-block-start: 1px solid var(--md-sys-color-outline-variant);
   }
+  .map {
+    --md-comp-map-height: 400px;
+    --md-comp-map-shape: 16px;
+    --md-comp-map-marker-color: var(--md-sys-color-primary);
+    --md-comp-map-marker-ring-color: var(--md-sys-color-surface);
+    --md-comp-map-route-color: var(--md-sys-color-primary);
+    --md-comp-map-arc-color: var(--md-sys-color-tertiary);
+    --md-comp-map-cluster-color: var(--md-sys-color-primary);
+    --md-comp-map-cluster-label-color: var(--md-sys-color-on-primary);
+    --md-comp-map-popup-max-width: 280px;
+    --md-comp-map-control-offset: 12px;
+    position: relative;
+    overflow: hidden;
+    block-size: var(--md-comp-map-height);
+    border-radius: var(--md-comp-map-shape);
+    background-color: var(--md-sys-color-surface-container);
+  }
+  .map:fullscreen {
+    border-radius: 0;
+  }
+  .map > :is(.map-marker, .map-popup), .map:not(.maplibregl-map) > .map-controls {
+    display: none;
+  }
+  .map .map-marker {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+  }
+  .map .map-marker:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  .map .map-marker:not(:has(> :not(.tooltip, .map-marker-label))) {
+    inline-size: 16px;
+    block-size: 16px;
+    border: 2px solid var(--md-comp-map-marker-ring-color);
+    border-radius: 50%;
+    background-color: var(--md-comp-map-marker-color);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  }
+  .map .map-marker.location {
+    --md-comp-map-marker-color: var(--md-sys-color-tertiary);
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-comp-map-marker-color) 24%, transparent);
+    cursor: default;
+  }
+  .map-marker-label {
+    position: absolute;
+    inset-block-start: calc(100% + 4px);
+    padding: 2px 8px;
+    border-radius: 8px;
+    background-color: var(--md-sys-color-surface-container-highest);
+    color: var(--md-sys-color-on-surface);
+    font-family: var(--md-sys-typescale-label-medium-font-family-name);
+    font-size: var(--md-sys-typescale-label-medium-font-size);
+    font-weight: var(--md-sys-typescale-label-medium-font-weight);
+    line-height: var(--md-sys-typescale-label-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+  .map-marker-label.top {
+    inset-block: auto calc(100% + 4px);
+  }
+  .map .maplibregl-popup-content {
+    max-inline-size: var(--md-comp-map-popup-max-width);
+    padding: 12px 16px !important;
+    border-radius: 12px !important;
+    background: var(--md-sys-color-surface-container-low) !important;
+    color: var(--md-sys-color-on-surface);
+    font-family: var(--md-sys-typescale-body-medium-font-family-name);
+    font-size: var(--md-sys-typescale-body-medium-font-size);
+    font-weight: var(--md-sys-typescale-body-medium-font-weight);
+    line-height: var(--md-sys-typescale-body-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
+  }
+  .map .maplibregl-popup-content:has(> .maplibregl-popup-close-button) {
+    padding-inline-end: 44px;
+  }
+  .map .maplibregl-popup-content :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0 0 4px;
+    font-family: var(--md-sys-typescale-title-small-font-family-name);
+    font-size: var(--md-sys-typescale-title-small-font-size);
+    font-weight: var(--md-sys-typescale-title-small-font-weight);
+    line-height: var(--md-sys-typescale-title-small-line-height);
+    letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
+  }
+  .map .maplibregl-popup-content p {
+    margin: 0;
+    font: inherit;
+  }
+  .map .maplibregl-popup-tip {
+    display: none;
+  }
+  .map .maplibregl-popup-close-button {
+    inset: 4px 4px auto auto !important;
+    inline-size: 32px;
+    block-size: 32px;
+    border-radius: 50% !important;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 20px;
+    line-height: 1;
+  }
+  .map .maplibregl-popup-close-button:hover {
+    background-color: color-mix(in oklab, currentColor 8%, transparent) !important;
+  }
+  .map .maplibregl-popup-close-button:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  .map-controls {
+    position: absolute;
+    inset: var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto auto;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .map-controls.top-left {
+    inset: var(--md-comp-map-control-offset) auto auto var(--md-comp-map-control-offset);
+  }
+  .map-controls.bottom-left {
+    inset: auto auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset);
+  }
+  .map-controls.bottom-right {
+    inset: auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto;
+  }
+  .map-controls > .icon-button,
+  .map-controls > .map-control-group {
+    border-radius: 9999px;
+    background-color: var(--md-sys-color-surface-container-low);
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  }
+  .map-controls [data-action=compass] > .material-symbols {
+    rotate: var(--md-comp-map-bearing, 0deg);
+  }
+  .map-control-group {
+    display: flex;
+    flex-direction: column;
+  }
   .accordion {
     --md-comp-accordion-container-color: var(--md-sys-color-surface-container);
     --md-comp-accordion-shape: 20px;
@@ -12181,9 +12186,6 @@
     min-height: 16px;
     margin-block: 4px;
   }
-  .stepper.vertical > li:last-child::after {
-    content: none;
-  }
   .stepper.vertical > li > .stepper-content {
     grid-column: 2;
     grid-row: 3;
@@ -12720,6 +12722,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .line-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -12729,9 +12732,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .line-chart {
-    position: relative;
-  }
   .line-chart:has(> .line-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -12977,6 +12977,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .column-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -12986,9 +12987,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .column-chart {
-    position: relative;
-  }
   .column-chart:has(> .column-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -13231,7 +13229,7 @@
     z-index: -1;
     width: calc(100% / var(--rows, 1));
     border-radius: var(--md-comp-column-chart-shape);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
     translate: -50% 0;
   }
   @media (forced-colors: active) {
@@ -13255,6 +13253,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .bar-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -13264,9 +13263,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .bar-chart {
-    position: relative;
-  }
   .bar-chart:has(> .bar-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -13616,7 +13612,7 @@
     inset-inline: 0;
     height: calc(100% / var(--rows, 1));
     border-radius: var(--md-comp-bar-chart-shape);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
     translate: 0 -50%;
   }
   .bar-chart-tooltip {
@@ -13654,6 +13650,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .pie-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -13663,9 +13660,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .pie-chart {
-    position: relative;
-  }
   .pie-chart:has(> .pie-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -14020,6 +14014,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .heatmap-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -14029,9 +14024,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .heatmap-chart {
-    position: relative;
-  }
   .heatmap-chart:has(> .heatmap-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -14277,13 +14269,13 @@
     outline: 2px solid var(--md-sys-color-on-surface);
     outline-offset: 1px;
   }
+  .heatmap-chart-tooltip {
+    translate: 8px 0;
+  }
   .heatmap-chart-tooltip > span.gap::before {
     background: none;
     box-shadow: inset 0 0 0 1px var(--md-comp-heatmap-chart-grid-color);
   }
-  .heatmap-chart-tooltip {
-    translate: 8px 0;
-  }
   .heatmap-chart-tooltip.end {
     translate: calc(-100% - 8px) 0;
   }
@@ -14320,6 +14312,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .radar-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -14329,9 +14322,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .radar-chart {
-    position: relative;
-  }
   .radar-chart:has(> .radar-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -14654,6 +14644,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .radial-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -14663,9 +14654,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .radial-chart {
-    position: relative;
-  }
   .radial-chart:has(> .radial-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -14976,6 +14964,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .mixed-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -14985,9 +14974,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .mixed-chart {
-    position: relative;
-  }
   .mixed-chart:has(> .mixed-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -15241,7 +15227,7 @@
     inset: 0;
     z-index: -1;
     border-radius: var(--md-comp-mixed-chart-shape);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
   .mixed-chart-cursor > span {
     position: absolute;
@@ -15689,6 +15675,141 @@
       translate: 0 calc(-100% - var(--md-comp-marquee-gap));
     }
   }
+  canvas.confetti {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  canvas.particles {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    color: var(--md-sys-color-on-surface);
+    pointer-events: none;
+  }
+  :is(.keypad, .keyboard) {
+    --md-comp-keypad-key-color: var(--md-sys-color-surface-container-highest);
+    --md-comp-keypad-key-label-color: var(--md-sys-color-on-surface);
+    --md-comp-keypad-function-key-color: var(--md-sys-color-secondary-container);
+    --md-comp-keypad-function-key-label-color: var(--md-sys-color-on-secondary-container);
+    --md-comp-keypad-key-pressed-shape: 12px;
+    --md-comp-keypad-motion: linear(0, 0.056 5%, 0.1796 10%, 0.3252 15%, 0.4675 20%, 0.5936 25%, 0.6988 30%, 0.7828 35%, 0.8475 40%, 0.8959 45%, 0.931 50%, 0.9559 55%, 0.973 60%, 0.9845 65%, 0.9919 70%, 0.9965 75%, 0.9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015);
+    touch-action: manipulation;
+  }
+  :is(.keypad, .keyboard) button {
+    --_color: var(--md-comp-keypad-key-color);
+    --_label: var(--md-comp-keypad-key-label-color);
+    min-width: 0;
+    padding: 0;
+    transition: border-radius 200ms var(--md-comp-keypad-motion), background-color 200ms ease-out;
+  }
+  :is(.keypad, .keyboard) button[data-key] {
+    --_color: var(--md-comp-keypad-function-key-color);
+    --_label: var(--md-comp-keypad-function-key-label-color);
+  }
+  :is(.keypad, .keyboard) button:hover {
+    --_state: calc(var(--md-sys-state-hover-state-layer-opacity) * 100%);
+  }
+  :is(.keypad, .keyboard) button:focus {
+    --_state: calc(var(--md-sys-state-focus-state-layer-opacity) * 100%);
+  }
+  :is(.keypad, .keyboard) button:active {
+    --_state: calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%);
+  }
+  :is(.keypad, .keyboard) button:active:not(:disabled) {
+    border-radius: var(--md-comp-keypad-key-pressed-shape);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :is(.keypad, .keyboard) button {
+      transition-property: background-color;
+    }
+  }
+  :is(.keypad, .keyboard) button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled) {
+    color: var(--_label);
+    background-color: color-mix(in oklab, var(--_label) var(--_state, 0%), var(--_color));
+  }
+  :is(.keypad, .keyboard) [data-key=Shift][aria-pressed=true] {
+    --_color: var(--md-sys-color-primary);
+    --_label: var(--md-sys-color-on-primary);
+  }
+  .keypad {
+    --md-comp-keypad-key-size: 72px;
+    --md-comp-keypad-gap: 12px;
+    display: inline-grid;
+    grid-template-columns: repeat(3, var(--md-comp-keypad-key-size));
+    gap: var(--md-comp-keypad-gap);
+  }
+  .keypad button {
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    height: var(--md-comp-keypad-key-size);
+    border-radius: calc(var(--md-comp-keypad-key-size) / 2);
+    font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+    font-size: var(--md-sys-typescale-headline-medium-font-size);
+    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+    line-height: var(--md-sys-typescale-headline-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
+  }
+  .keypad button.wide {
+    grid-column: span 2;
+  }
+  .keypad button > small {
+    font-family: var(--md-sys-typescale-label-small-font-family-name);
+    font-size: var(--md-sys-typescale-label-small-font-size);
+    font-weight: var(--md-sys-typescale-label-small-font-weight);
+    line-height: var(--md-sys-typescale-label-small-line-height);
+    letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
+    color: inherit;
+    opacity: 0.78;
+  }
+  .keyboard {
+    --md-comp-keyboard-columns: 10;
+    --md-comp-keyboard-gap: 6px;
+    --md-comp-keyboard-key-height: 48px;
+    --md-comp-keyboard-number-key-height: 40px;
+    --md-comp-keyboard-key-shape: 12px;
+    --md-comp-keypad-key-pressed-shape: 6px;
+    --md-comp-keyboard-container-color: var(--md-sys-color-surface-container);
+    --md-comp-keyboard-container-shape: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    border-radius: var(--md-comp-keyboard-container-shape);
+    background-color: var(--md-comp-keyboard-container-color);
+  }
+  .keyboard > :not([hidden]) {
+    --_unit: calc((100% - (var(--md-comp-keyboard-columns) - 1) * var(--md-comp-keyboard-gap)) / var(--md-comp-keyboard-columns));
+    display: flex;
+    justify-content: center;
+    gap: var(--md-comp-keyboard-gap);
+  }
+  .keyboard button {
+    flex: 0 1 var(--_unit);
+    height: var(--md-comp-keyboard-key-height);
+    border-radius: var(--md-comp-keyboard-key-shape);
+    font-family: var(--md-sys-typescale-title-medium-font-family-name);
+    font-size: var(--md-sys-typescale-title-medium-font-size);
+    font-weight: var(--md-sys-typescale-title-medium-font-weight);
+    line-height: var(--md-sys-typescale-title-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+  }
+  .keyboard button[data-key] {
+    flex-basis: calc(1.5 * var(--_unit) + 0.5 * var(--md-comp-keyboard-gap));
+  }
+  .keyboard button[value=" "] {
+    flex-grow: 1;
+  }
+  .keyboard > .numbers button {
+    height: var(--md-comp-keyboard-number-key-height);
+  }
+  .keyboard:has([data-key=Shift][aria-pressed=true]) button[value] {
+    text-transform: uppercase;
+  }
 }
 @layer utilities {
   .primary {