@expressivecss/expressive 0.15.0 → 0.17.0

package/src/sass/components/_map.scss

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../abstracts" as *;
 
 // Map. A MapLibre map in a .map frame. The page loads maplibre-gl.css; these
@@ -34,7 +33,7 @@
 
 .map {
   --md-comp-map-height: 400px;
-  --md-comp-map-shape: 16px;
+  --md-comp-map-shape: var(--md-sys-shape-corner-large);
   --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);
@@ -80,6 +79,26 @@
     border-radius: 50%;
     background-color: var(--md-comp-map-marker-color);
     @include z-depth(1);
+
+    // The dot is 16dp, under the 24dp minimum target. A 48dp round hit area
+    // around it takes the tap, and the map pans everywhere else.
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -16px;
+      border-radius: 50%;
+    }
+  }
+
+  // A draggable marker a tap picked up, waiting for the tap that drops it.
+  &[aria-pressed="true"] {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 4px;
+    scale: 1.25;
+
+    @media (forced-colors: active) {
+      outline-color: Highlight;
+    }
   }
 
   &.location {
@@ -94,7 +113,7 @@
   position: absolute;
   inset-block-start: calc(100% + 4px);
   padding: 2px 8px;
-  border-radius: 8px;
+  border-radius: var(--md-sys-shape-corner-small);
   background-color: var(--md-sys-color-surface-container-highest);
   color: var(--md-sys-color-on-surface);
   @include typescale("label-medium");
@@ -116,14 +135,16 @@
   .maplibregl-popup-content {
     max-inline-size: var(--md-comp-map-popup-max-width);
     padding: 12px 16px !important;
-    border-radius: 12px !important;
+    border-radius: var(--md-sys-shape-corner-medium) !important;
     background: var(--md-sys-color-surface-container-low) !important;
     color: var(--md-sys-color-on-surface);
     @include typescale("body-medium");
-    box-shadow: map.get($elevations, "2") !important;
+    @include z-depth(2, true);
 
+    // !important to beat the padding shorthand above, which MapLibre's own
+    // stylesheet forces it to carry.
     &:has(> .maplibregl-popup-close-button) {
-      padding-inline-end: 44px;
+      padding-inline-end: calc(12px + #{rem(32px)}) !important;
     }
 
     :is(h1, h2, h3, h4, h5, h6) {
@@ -142,12 +163,13 @@
   }
 
   .maplibregl-popup-close-button {
-    inset: 4px 4px auto auto !important;
-    inline-size: 32px;
-    block-size: 32px;
+    inset-block: 4px auto !important;
+    inset-inline: auto 4px !important;
+    inline-size: rem(32px);
+    block-size: rem(32px);
     border-radius: 50% !important;
     color: var(--md-sys-color-on-surface-variant);
-    font-size: 20px;
+    font-size: rem(20px);
     line-height: 1;
 
     &:hover {
@@ -170,9 +192,13 @@
   &.bottom-left { inset: auto auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset); }
   &.bottom-right { inset: auto var(--md-comp-map-control-offset) var(--md-comp-map-control-offset) auto; }
 
+  // .icon-button's display beats the UA [hidden] rule, and MapView hides
+  // the fullscreen button where fullscreen is unavailable.
+  [hidden] { display: none; }
+
   > .icon-button,
   > .map-control-group {
-    border-radius: 9999px;
+    border-radius: var(--md-sys-shape-corner-full);
     background-color: var(--md-sys-color-surface-container-low);
     @include z-depth(2);
   }

package/src/sass/components/_marquee.scss

@@ -63,13 +63,14 @@
   justify-content: space-around;
   gap: var(--md-comp-marquee-gap);
   min-width: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @include list-reset;
   animation: marquee-x var(--md-comp-marquee-duration) linear infinite;
 
+  // Its own box-sizing, not the reset's inherit, so each frame of the
+  // scroll restyles the two groups and not every item in them.
   > * {
     flex: none;
+    box-sizing: border-box;
   }
 
   .vertical > & {

package/src/sass/components/_mega-menu.scss

@@ -0,0 +1,128 @@
+@use "../abstracts" as *;
+
+// Mega menu. Site navigation whose top items open wide panels of grouped
+// links. A nav.mega-menu holds links and disclosure buttons; each button
+// names a .mega-menu-panel with popovertarget. The panel is a native
+// [popover], so the browser owns opening, light dismiss, Escape, the focus
+// order after the button and the button's expanded state. There is no
+// JavaScript and no menu role: these are links, read and tabbed in order.
+//
+// The panel sits below its button and spans the window, inset by
+// --md-comp-mega-menu-margin; its sections flow into as many columns as fit.
+//
+// Tokens:
+//   --md-comp-mega-menu-container-color   surface-container
+//   --md-comp-mega-menu-shape             16px
+//   --md-comp-mega-menu-margin            16px (panel inset from the window)
+//   --md-comp-mega-menu-column-width      200px (minimum)
+
+.mega-menu {
+  --md-comp-mega-menu-container-color: var(--md-sys-color-surface-container);
+  --md-comp-mega-menu-shape: var(--md-sys-shape-corner-large);
+  --md-comp-mega-menu-margin: 16px;
+  --md-comp-mega-menu-column-width: 200px;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+
+  // Top items: links and disclosure buttons share one look.
+  > :is(a, button) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-block-size: 40px;
+    margin: 0;
+    padding: 0 12px;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-large-increased);
+    background: none;
+    color: var(--md-sys-color-on-surface);
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    @include typescale("label-large");
+    @include focus-visible;
+    @include text-action('[aria-current="page"]');
+  }
+
+  // A trailing chevron turns while the button's panel is open.
+  > button::after {
+    content: "";
+    inline-size: 18px;
+    block-size: 18px;
+    background-color: currentColor;
+    mask: $caret-down center / 18px no-repeat;
+    transition: transform var(--md-sys-motion-duration-short3) ease-out;
+    @include forced-colors-fill;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  > button:has(+ .mega-menu-panel:popover-open)::after {
+    transform: rotate(180deg);
+  }
+}
+
+.mega-menu-panel {
+  box-sizing: border-box;
+  inline-size: auto;
+  max-block-size: calc(100dvh - 96px);
+  inset: auto;
+  margin: 8px var(--md-comp-mega-menu-margin, 16px);
+  padding: 24px;
+  overflow: auto;
+  border: 0;
+  border-radius: var(--md-comp-mega-menu-shape, var(--md-sys-shape-corner-large));
+  background-color: var(--md-comp-mega-menu-container-color, var(--md-sys-color-surface-container));
+  color: var(--md-sys-color-on-surface);
+  @include z-depth("2");
+
+  position-area: block-end span-all;
+  justify-self: stretch;
+
+  &:popover-open {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--md-comp-mega-menu-column-width, 200px), 1fr));
+    gap: 24px;
+  }
+
+  > section {
+    min-inline-size: 0;
+
+    > :is(h2, h3, h4) {
+      margin: 0 0 8px;
+      color: var(--md-sys-color-on-surface-variant);
+      @include typescale("title-small");
+    }
+
+    > ul {
+      @include list-reset;
+    }
+
+    a {
+      display: block;
+      padding: 8px 12px;
+      margin-inline: -12px;
+      border-radius: var(--md-sys-shape-corner-small);
+      color: var(--md-sys-color-on-surface);
+      text-decoration: none;
+      @include typescale("body-large");
+      @include focus-visible;
+      @include text-action;
+
+      > small {
+        display: block;
+        color: var(--md-sys-color-on-surface-variant);
+        @include typescale("body-small");
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+  }
+}