@expressivecss/expressive 0.7.0-rc.0 → 0.8.0

package/src/sass/components/_menu.scss

@@ -4,18 +4,24 @@
 //
 // Anatomy is the HTML. A <menu id> is the surface; each <li> is an item.
 // A leading <i> is the leading icon; a trailing <i> or <kbd> is trailing
-// content. An <hr> is a divider. A .gap <li> splits groups. A .label
+// content. An <li class="divider" role="separator"> is a divider; a bare
+// <hr> is the older form and still styled, though <menu> only permits <li>.
+// A .gap <li> splits groups. A .label
 // <li> is a 32dp group heading. A nested <menu> is a flyout. The trigger
 // is .menu-trigger[data-target] — that is the JS contract.
 //
-// Tokens follow https://m3.material.io/components/menus/specs
-//   container    surface-container, 16dp corners, elevation 2, 112–280
-//   padding      4dp
-//   item         48dp, extra-small (4dp) corners, label-large / on-surface
+// Tokens are md.comp.menus - the expressive family, not baseline
+// md.comp.menu, which is a different component with its own values.
+// https://m3.material.io/components/menus/specs
+//   container    surface-container-low, 16dp corners, level 2, 112–280
+//   group        2dp padding, 2dp gap, 8dp corners
+//   item         44dp, 16dp insets, 4dp corners, label-large / on-surface
+//   end items    12dp outer corner, 4dp inner
+//   state layer  hover 8%, focus / pressed 10%
 //   selected     medium (12dp) corners, tertiary-container / on-tertiary
 //   icon         20dp, on-surface-variant
 //   divider      1dp outline-variant, inset (not full-bleed)
-//   gap          6dp, more expressive than a divider
+//   gap          2dp, more expressive than a divider
 //   label        32dp, on-surface-variant
 //   vibrant      tertiary-container surface; selected is tertiary
 //   submenu      scale + fade; focused flyout rounds up, parent rounds down
@@ -29,24 +35,43 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
 }
 
 @mixin menu-surface {
-  --md-comp-menu-container-color: var(--md-sys-color-surface-container);
+  --md-comp-menu-container-color: var(--md-sys-color-surface-container-low);
   --md-comp-menu-container-shape: 16px;
-  --md-comp-menu-item-container-height: 48px;
+  --md-comp-menu-group-shape: 8px;
+  --md-comp-menu-container-inactive-shape: var(--md-comp-menu-group-shape);
+  --md-comp-menu-group-padding: 2px;
+  --md-comp-menu-gap: 2px;
+  --md-comp-menu-item-container-height: 44px;
   --md-comp-menu-item-container-shape: 4px;
+  --md-comp-menu-item-edge-shape: 12px;
   --md-comp-menu-item-selected-container-shape: 12px;
+  --md-comp-menu-item-leading-space: 16px;
+  --md-comp-menu-item-trailing-space: 16px;
+  --md-comp-menu-item-between-space: 12px;
   --md-comp-menu-item-label-text-color: var(--md-sys-color-on-surface);
-  --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
-  --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
-  --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary-container);
-  --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary-container);
-  --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary-container);
+  --md-comp-menu-item-leading-icon-color: var(
+    --md-sys-color-on-surface-variant
+  );
+  --md-comp-menu-item-trailing-icon-color: var(
+    --md-sys-color-on-surface-variant
+  );
+  --md-comp-menu-item-selected-container-color: var(
+    --md-sys-color-tertiary-container
+  );
+  --md-comp-menu-item-selected-label-text-color: var(
+    --md-sys-color-on-tertiary-container
+  );
+  --md-comp-menu-item-selected-leading-icon-color: var(
+    --md-sys-color-on-tertiary-container
+  );
   --md-comp-menu-item-icon-size: 20px;
   --md-comp-menu-supporting-text-color: var(--md-sys-color-on-surface-variant);
 
   box-sizing: border-box;
   min-width: 112px;
+  max-width: 280px;
   margin: 0;
-  padding: 4px;
+  padding: var(--md-comp-menu-group-padding);
   list-style: none;
   background-color: var(--md-comp-menu-container-color);
   border-radius: var(--md-comp-menu-container-shape);
@@ -54,15 +79,37 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
   @include z-depth("2");
   transition: border-radius 200ms ease;
 
-  &.vibrant {
+  // The [vibrant] arms are not a second mapping - they are the statement that
+  // a menu on a vibrant surface IS a vibrant menu. Without them the foundation
+  // paints the container tertiary-container while the selected item keeps the
+  // same tertiary-container from menu-surface above, and the selected state
+  // disappears into its own menu. M3's menus-vibrant answers that by moving
+  // selection to solid tertiary, which is exactly what this block already did.
+  // FormSelect's option fill reads the same token, so it follows.
+  &.vibrant,
+  &[vibrant],
+  [vibrant] &,
+  :host([vibrant]) & {
     --md-comp-menu-container-color: var(--md-sys-color-tertiary-container);
-    --md-comp-menu-item-label-text-color: var(--md-sys-color-on-tertiary-container);
-    --md-comp-menu-item-leading-icon-color: var(--md-sys-color-on-tertiary-container);
-    --md-comp-menu-item-trailing-icon-color: var(--md-sys-color-on-tertiary-container);
-    --md-comp-menu-supporting-text-color: var(--md-sys-color-on-tertiary-container);
+    --md-comp-menu-item-label-text-color: var(
+      --md-sys-color-on-tertiary-container
+    );
+    --md-comp-menu-item-leading-icon-color: var(
+      --md-sys-color-on-tertiary-container
+    );
+    --md-comp-menu-item-trailing-icon-color: var(
+      --md-sys-color-on-tertiary-container
+    );
+    --md-comp-menu-supporting-text-color: var(
+      --md-sys-color-on-tertiary-container
+    );
     --md-comp-menu-item-selected-container-color: var(--md-sys-color-tertiary);
-    --md-comp-menu-item-selected-label-text-color: var(--md-sys-color-on-tertiary);
-    --md-comp-menu-item-selected-leading-icon-color: var(--md-sys-color-on-tertiary);
+    --md-comp-menu-item-selected-label-text-color: var(
+      --md-sys-color-on-tertiary
+    );
+    --md-comp-menu-item-selected-leading-icon-color: var(
+      --md-sys-color-on-tertiary
+    );
   }
 
   > li {
@@ -74,21 +121,31 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     text-align: left;
     border-radius: var(--md-comp-menu-item-container-shape);
 
+    // The bare-span arm is the non-interactive item. It has to exclude icons,
+    // which are spans as well and are a legal direct child of the <li> (see
+    // the `> #{$icon}` arm below) - otherwise one gets stretched to a
+    // full-width 48dp row.
     > a,
     > button,
-    > span {
+    > #{$icon-label} {
       display: flex;
       align-items: center;
-      gap: 12px;
+      // A <button> takes the common button's centered flex layout; menu
+      // commands must line up with link items at the leading inset instead.
+      justify-content: flex-start;
+      gap: var(--md-comp-menu-item-between-space);
       box-sizing: border-box;
       width: 100%;
       min-height: var(--md-comp-menu-item-container-height);
       margin: 0;
-      padding: 0 8px;
+      padding-block: 8px;
+      padding-inline: var(--md-comp-menu-item-leading-space)
+        var(--md-comp-menu-item-trailing-space);
       border: 0;
       background: none;
       color: var(--md-comp-menu-item-label-text-color);
       text-decoration: none;
+      text-align: start;
       cursor: pointer;
 
       &:hover,
@@ -96,12 +153,24 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
         background: none;
       }
       @include typescale("label-large");
-      font-family: $font-stack;
     }
 
-    > a > i,
-    > button > i,
-    > i {
+    > :is(a, button) > .menu-item-text {
+      display: flex;
+      min-width: 0;
+      flex: 1 1 auto;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    > :is(a, button) .supporting-text {
+      color: var(--md-comp-menu-supporting-text-color);
+      @include typescale("body-small");
+    }
+
+    > a > #{$icon},
+    > button > #{$icon},
+    > #{$icon} {
       flex: 0 0 var(--md-comp-menu-item-icon-size);
       font-size: var(--md-comp-menu-item-icon-size);
       width: var(--md-comp-menu-item-icon-size);
@@ -110,7 +179,16 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       color: var(--md-comp-menu-item-leading-icon-color);
     }
 
-    > :is(a, button) > i:last-child:not(:only-child) {
+    // A lone icon is ambiguous to CSS. In `<a>Label<span icon/></a>` and
+    // `<a><span icon/>Label</a>` the span is :first-child, :last-child AND
+    // :only-child in both cases - the label is a text node, and selectors
+    // cannot see text. So :not(:only-child) only ever caught rows carrying two
+    // icons, and every text-plus-trailing-icon row silently kept its icon
+    // butted against the label instead of flush right.
+    //
+    // Leading stays the default; a trailing icon names its side, the same way
+    // a field icon must (see rule 3 in CLAUDE.md).
+    > :is(a, button) > #{$icon}:is(.suffix, :last-child:not(:only-child)) {
       margin-inline-start: auto;
       color: var(--md-comp-menu-item-trailing-icon-color);
     }
@@ -124,15 +202,39 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
       font-family: inherit;
       @include typescale("label-large");
     }
+
+    > :is(a, button) > .badge {
+      margin-inline-start: auto;
+    }
   }
 
-  > li:not(.disabled, .divider, .optgroup, .gap, .label) {
+  > li:not(.divider, .optgroup, .gap, .label) {
     min-height: var(--md-comp-menu-item-container-height);
   }
 
+  > li:not(.divider, .optgroup, .gap, .label):first-child {
+    border-radius: var(--md-comp-menu-item-edge-shape)
+      var(--md-comp-menu-item-edge-shape)
+      var(--md-comp-menu-item-container-shape)
+      var(--md-comp-menu-item-container-shape);
+  }
+
+  > 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);
+  }
+
   // Hover / press sit on extra-small corners and do not span the container.
-  > li:not(.disabled, .divider, .optgroup, .gap, .label):hover,
-  > li.active:not(.selected, [aria-selected="true"]) {
+  > li:not(
+      .disabled,
+      [aria-disabled="true"],
+      .divider,
+      .optgroup,
+      .gap,
+      .label
+    ):hover,
+  > 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%,
@@ -140,7 +242,14 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     );
   }
 
-  > li:not(.disabled, .divider, .optgroup, .gap, .label):active {
+  > 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%,
@@ -148,24 +257,31 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     );
   }
 
-  > li.selected,
-  > li[aria-selected="true"] {
+  // :not(.divider) only buys specificity: menu-item.selected.shape is 12dp
+  // unconditionally, so it has to outrank the first/last-child edge rule that
+  // would otherwise leave a selected end item with 4dp inner corners.
+  > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):not(
+      .divider
+    ) {
     border-radius: var(--md-comp-menu-item-selected-container-shape);
     background-color: var(--md-comp-menu-item-selected-container-color);
     color: var(--md-comp-menu-item-selected-label-text-color);
 
-    > :is(a, button, span) {
+    > :is(a, button, #{$icon-label}) {
       color: var(--md-comp-menu-item-selected-label-text-color);
     }
 
-    > :is(a, button, span) > i,
-    > i {
+    > :is(a, button, #{$icon-label}) > #{$icon},
+    > #{$icon} {
       color: var(--md-comp-menu-item-selected-leading-icon-color);
     }
+
+    > :is(a, button, #{$icon-label}) :is(.supporting-text, kbd, .shortcut) {
+      color: var(--md-comp-menu-item-selected-label-text-color);
+    }
   }
 
-  > li.selected:hover,
-  > li[aria-selected="true"]:hover {
+  > 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%,
@@ -173,12 +289,24 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     );
   }
 
+  > 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)
+    );
+  }
+
   > li:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: -3px;
   }
 
-  > li.disabled {
+  > li:is(.disabled, [aria-disabled="true"]) {
     pointer-events: none;
     opacity: 0.38;
   }
@@ -201,9 +329,9 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
 
   // Gap: more expressive than a divider. One or two per menu; not in a scroller.
   > li.gap {
-    height: 6px;
-    min-height: 6px;
-    margin: 0 -4px;
+    height: var(--md-comp-menu-gap);
+    min-height: var(--md-comp-menu-gap);
+    margin: 0 calc(-1 * var(--md-comp-menu-group-padding));
     padding: 0;
     pointer-events: none;
     cursor: default;
@@ -221,14 +349,126 @@ $_menu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg
     cursor: default;
     color: var(--md-comp-menu-supporting-text-color);
     @include typescale("label-large");
-    font-family: $font-stack;
+  }
+
+  // Grouped layout: each run of items between .gap separators becomes its
+  // own coplanar surface. Standard remains the default continuous surface.
+  &.grouped {
+    padding: 0;
+    background-color: transparent;
+    box-shadow: none;
+    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.14))
+      drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
+
+    > li:not(.divider, .optgroup, .gap, .label) {
+      padding-inline: var(--md-comp-menu-group-padding);
+      background-color: var(--md-comp-menu-container-color);
+      border-radius: 0;
+    }
+
+    > li:not(.divider, .optgroup, .gap, .label):first-child,
+    > li.gap + li:not(.divider, .optgroup, .gap, .label) {
+      padding-block-start: var(--md-comp-menu-group-padding);
+      border-start-start-radius: var(--md-comp-menu-group-shape);
+      border-start-end-radius: var(--md-comp-menu-group-shape);
+    }
+
+    > li:not(.divider, .optgroup, .gap, .label):has(+ li.gap),
+    > li:not(.divider, .optgroup, .gap, .label):last-child {
+      padding-block-end: var(--md-comp-menu-group-padding);
+      border-end-start-radius: var(--md-comp-menu-group-shape);
+      border-end-end-radius: var(--md-comp-menu-group-shape);
+    }
+
+    > li.gap {
+      margin: 0;
+    }
+
+    // State layers belong to the inset item while the group surface remains.
+    > li:not(
+        .disabled,
+        [aria-disabled="true"],
+        .divider,
+        .optgroup,
+        .gap,
+        .label
+      ):hover,
+    > li.active,
+    > li.selected,
+    > li[aria-selected="true"],
+    > li[aria-checked="true"] {
+      background-color: var(--md-comp-menu-container-color);
+    }
+
+    > li:not(
+        .disabled,
+        [aria-disabled="true"],
+        .divider,
+        .optgroup,
+        .gap,
+        .label
+      ):hover
+      > :is(a, button, #{$icon-label}),
+    > li.active:not(.selected, [aria-selected="true"], [aria-checked="true"])
+      > :is(a, button, #{$icon-label}) {
+      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
+      );
+    }
+
+    > li:not(
+        .disabled,
+        [aria-disabled="true"],
+        .divider,
+        .optgroup,
+        .gap,
+        .label
+      ):active
+      > :is(a, button, #{$icon-label}) {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-menu-item-label-text-color) 10%,
+        transparent
+      );
+    }
+
+    > li:is(.selected, [aria-selected="true"], [aria-checked="true"])
+      > :is(a, button, #{$icon-label}) {
+      border-radius: var(--md-comp-menu-item-selected-container-shape);
+      background-color: var(--md-comp-menu-item-selected-container-color);
+    }
+
+    > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):hover
+      > :is(a, button, #{$icon-label}) {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-menu-item-selected-label-text-color) 8%,
+        var(--md-comp-menu-item-selected-container-color)
+      );
+    }
+
+    > li:is(.selected, [aria-selected="true"], [aria-checked="true"]):is(
+        :focus,
+        :focus-visible,
+        :active
+      )
+      > :is(a, button, #{$icon-label}) {
+      background-color: color-mix(
+        in oklab,
+        var(--md-comp-menu-item-selected-label-text-color) 10%,
+        var(--md-comp-menu-item-selected-container-color)
+      );
+    }
   }
 
   li:has(> menu) {
     position: relative;
   }
 
-  li:has(> menu) > :is(a, button, span)::after {
+  li:has(> menu) > :is(a, button, #{$icon-label})::after {
     content: "";
     flex: 0 0 var(--md-comp-menu-item-icon-size);
     width: var(--md-comp-menu-item-icon-size);
@@ -259,7 +499,9 @@ menu[id] {
 
   // Unfocused parent rounds down while a flyout is the focus.
   &:has(> li:is(:hover, :focus-within, .open) > menu) {
-    --md-comp-menu-container-shape: 8px;
+    --md-comp-menu-container-shape: var(
+      --md-comp-menu-container-inactive-shape
+    );
   }
 }
 
@@ -293,7 +535,7 @@ menu[id] li > menu {
     opacity: 1;
     pointer-events: auto;
     transform: none;
-    --md-comp-menu-container-shape: 20px;
+    --md-comp-menu-container-shape: 16px;
   }
 }
 
@@ -302,7 +544,7 @@ menu[id] li.open > menu {
   opacity: 1;
   pointer-events: auto;
   transform: none;
-  --md-comp-menu-container-shape: 20px;
+  --md-comp-menu-container-shape: 16px;
 }
 
 menu[id] li.submenu-start > menu {
@@ -315,22 +557,46 @@ menu[id] li.submenu-start:is(:hover, :focus-within, .open) > menu {
   transform: none;
 }
 
-body.keyboard-focused {
-  menu[id] > li:focus {
-    background-color: color-mix(
-      in oklab,
-      var(--md-comp-menu-item-label-text-color) 10%,
-      transparent
-    );
-  }
+// Keyboard focus only. This used to be nested under `body.keyboard-focused`, a
+// class the bundle stamped from four capture-phase document listeners; the
+// browser answers the same question. A programmatic focus - which is how a menu
+// item gets focus here - inherits :focus-visible from the element that had it,
+// so opening the menu by keyboard still lights the item and opening it by
+// pointer still does not.
+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:not(.selected, [aria-selected="true"]) {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: -3px;
-  }
+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);
+}
+
+menu[id].grouped
+  > li:focus-visible:not(.selected, [aria-selected="true"], [aria-checked="true"])
+  > :is(a, button, span:not(.material-symbols, .badge, .supporting-text)) {
+  border-radius: var(--md-comp-menu-item-container-shape);
+  background-color: color-mix(
+    in oklab,
+    var(--md-comp-menu-item-label-text-color) 10%,
+    transparent
+  );
 }
 
 @media (prefers-reduced-motion: reduce) {
+  menu[id] {
+    transition: none !important;
+  }
+
   menu[id] li > menu {
     transition: none;
   }
@@ -338,4 +604,12 @@ body.keyboard-focused {
 
 .menu-trigger {
   cursor: pointer;
+
+  // The trigger stays in its pressed state for as long as its menu is open.
+  &[aria-expanded="true"] {
+    background-image: linear-gradient(
+      color-mix(in oklab, currentcolor 10%, transparent),
+      color-mix(in oklab, currentcolor 10%, transparent)
+    );
+  }
 }