@expressivecss/expressive 0.13.1 → 0.14.1

package/dist/css/expressive.css

@@ -1570,7 +1570,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 +1595,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 +1603,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 +1702,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 +1715,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 +1728,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 +1741,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 +1754,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 +1762,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 +1778,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 +1808,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 +1821,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 +1834,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 +1842,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 +1850,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 +1858,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,56 +1881,56 @@
     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);
@@ -1939,7 +1939,7 @@
     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 +1948,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 {
@@ -7863,9 +7863,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;
@@ -8989,6 +8990,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 +9005,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);
@@ -11465,6 +11467,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 srgb, 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 srgb, 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;
@@ -15689,6 +15836,21 @@
       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;
+  }
 }
 @layer utilities {
   .primary {