mtrl 0.8.0-next.8 → 0.8.0

package/src/styles/components/_menu.scss

@@ -28,8 +28,10 @@ $component: "#{$prefix}-menu";
     display: flex;
     flex-direction: column;
     opacity: 0;
-    transform-origin: top center; // Default transform origin
-    transform: scaleY(0);
+    transform-origin: top center;
+    // A fade with a slight scale, as menus enter in M3; the vertical squash
+    // this replaced is not one of its patterns
+    transform: scale(0.8);
     pointer-events: none;
 
     // Material Design 3 standard animation curve for menus
@@ -40,7 +42,7 @@ $component: "#{$prefix}-menu";
     // Visible state
     &--visible {
         opacity: 1;
-        transform: scaleY(1);
+        transform: scale(1);
         pointer-events: auto;
     }
 
@@ -57,6 +59,24 @@ $component: "#{$prefix}-menu";
         z-index: f.get-z-index("menu") + 1;
     }
 
+    // A run of items between gaps. The element is presentational: it exists so
+    // a gap can split the menu into separate surfaces in the vertical variant.
+    // A standard menu is one surface, so here a group is only spacing.
+    &-group {
+        display: block;
+        list-style: none;
+
+        > ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        + .#{$component}-group {
+            margin-top: 8px;
+        }
+    }
+
     // List container
     &-list {
         margin: 0;
@@ -71,13 +91,15 @@ $component: "#{$prefix}-menu";
 
     // Menu items
     &-item {
-        @include m.typography("body-large");
+        @include m.typography("label-large");
         @include m.flex-row;
 
         position: relative;
         min-height: 48px;
-        padding: 12px 16px;
-        padding-right: 42px;
+        // 12dp each side (m3.material.io menu specs, "Measurements"), with
+        // room at the end for a trailing mark
+        padding: 12px;
+        padding-inline-end: 40px;
         cursor: pointer;
         user-select: none;
         color: t.color("on-surface");
@@ -92,11 +114,18 @@ $component: "#{$prefix}-menu";
             @include m.state-layer(t.color("on-surface"), "hover");
         }
 
+        // The focus layer is for a person navigating by key. Focus moves into
+        // the menu however it was opened, so keying this off `:focus` marked
+        // the first item as soon as the menu appeared under the pointer, which
+        // reads as a highlight nobody asked for.
         &:focus {
-            @include m.state-layer(t.color("on-surface"), "focus");
             outline: none;
         }
 
+        &:focus-visible {
+            @include m.state-layer(t.color("on-surface"), "focus");
+        }
+
         &:active {
             @include m.state-layer(t.color("on-surface"), "pressed");
         }
@@ -130,15 +159,45 @@ $component: "#{$prefix}-menu";
             }
         }
 
-        // Disabled state
+        // Disabled: it can be focused and read, it just cannot be chosen
+        // (m3.material.io menu accessibility, "Interactability")
         &--disabled {
-            pointer-events: none;
+            cursor: default;
             color: t.alpha("on-surface", 0.38);
+
+            &:hover,
+            &:active {
+                &::before {
+                    opacity: 0;
+                }
+            }
         }
 
         // Selected state for select component
+        // Selected: a secondary-container behind it and its own label colour
+        // (MenuTokens.ListItemSelectedContainerColor and
+        // ListItemSelectedLabelTextColor). The check is the second cue the
+        // accessibility guidance asks for on top of colour.
         &--selected {
-            color: t.color("primary");
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+
+            &:hover {
+                @include m.state-layer(t.color("on-secondary-container"), "hover");
+            }
+
+            &:focus-visible {
+                @include m.state-layer(t.color("on-secondary-container"), "focus");
+            }
+
+            &:active {
+                @include m.state-layer(t.color("on-secondary-container"), "pressed");
+            }
+
+            .#{$component}-item-icon,
+            .#{$component}-item-shortcut {
+                color: inherit;
+            }
 
             &::after {
                 content: "";
@@ -165,15 +224,16 @@ $component: "#{$prefix}-menu";
         }
 
         &-icon {
-            margin-right: 12px;
+            margin-inline-end: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
+            color: t.color("on-surface-variant");
 
             svg {
-                width: 20px;
-                height: 20px;
+                width: 24px;
+                height: 24px;
             }
         }
 
@@ -184,6 +244,25 @@ $component: "#{$prefix}-menu";
             text-overflow: ellipsis;
         }
 
+        // A label with a line under it. The stacking belongs to every
+        // variant, so a supporting line never runs into its label; the
+        // vertical menu adds its own type and colour on top.
+        &-label {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex: 1;
+            min-width: 0;
+        }
+
+        &-supporting {
+            @include m.typography("body-medium");
+            color: t.color("on-surface-variant");
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
         &-shortcut {
             margin-left: 12px;
             color: t.color("on-surface-variant");
@@ -203,11 +282,11 @@ $component: "#{$prefix}-menu";
 
     // Reduced motion preference support
     @include m.reduced-motion {
-        transition: opacity 0.1s linear;
-        transform: none !important;
+        transition: opacity v.motion("duration-short2") linear;
 
+        &,
         &--visible {
-            transform: none !important;
+            transform: none;
         }
     }
 
@@ -251,6 +330,235 @@ $component: "#{$prefix}-menu";
     }
 
     // RTL Support
+    // -------------------------------------------------------------------------
+    // The M3 expressive vertical menu (Compose SegmentedMenuTokens and
+    // StandardMenuTokens / VibrantMenuTokens). A 16dp container holding 44dp
+    // items 2dp apart; an item is a 4dp rectangle at rest and rounds to 12dp
+    // as it is hovered, focused, pressed or selected, which is the expressive
+    // state this variant is for. The first and last items round to 12dp on
+    // their outer corners so the column reads as one block.
+    // -------------------------------------------------------------------------
+    &--vertical {
+        // Standard: surface-based, the lower-emphasis mapping
+        --#{$prefix}-menu-container: #{t.color("surface-container-low")};
+        --#{$prefix}-menu-label: #{t.color("on-surface")};
+        --#{$prefix}-menu-supporting: #{t.color("on-surface-variant")};
+        --#{$prefix}-menu-selected-container: #{t.color("tertiary-container")};
+        --#{$prefix}-menu-selected-label: #{t.color("on-tertiary-container")};
+
+        border-radius: v.shape("large");
+        background-color: var(--#{$prefix}-menu-container);
+        color: var(--#{$prefix}-menu-label);
+        // GroupPadding. The vertical menu has no container spacing token of
+        // its own: it is made of groups, and a menu with no gaps is one group,
+        // so the container's inset is the group's. The 8dp that was here is
+        // the horizontal variant's ContainerTopSpace, which does not apply.
+        padding: 4px;
+
+        // Vibrant: tertiary-based, more prominent, to be used sparingly
+        &.#{$component}--vibrant {
+            --#{$prefix}-menu-container: #{t.color("tertiary-container")};
+            --#{$prefix}-menu-label: #{t.color("on-tertiary-container")};
+            --#{$prefix}-menu-supporting: #{t.color("on-tertiary-container")};
+            --#{$prefix}-menu-selected-container: #{t.color("tertiary")};
+            --#{$prefix}-menu-selected-label: #{t.color("on-tertiary")};
+        }
+
+        .#{$component}-list {
+            display: flex;
+            flex-direction: column;
+            gap: 2px; // SegmentedGap
+        }
+
+        .#{$component}-item {
+            @include m.typography("body-large");
+            min-height: 44px; // SegmentedMenuTokens.Item
+            padding: 8px 16px; // ItemTopSpace / ItemLeadingSpace
+            padding-inline-end: 16px;
+            color: var(--#{$prefix}-menu-label);
+            border-radius: v.shape("extra-small"); // ItemShape
+            transition:
+                border-radius v.motion("spring-fast-spatial-duration")
+                    v.motion("spring-fast-spatial-easing"),
+                background-color v.motion("duration-short2")
+                    v.motion("easing-standard");
+
+            // The shape is the state: 4dp at rest, 12dp once it is touched
+            &:hover,
+            &:focus-visible,
+            &:active {
+                border-radius: v.shape("medium");
+            }
+
+            // The ends of the column round outwards, so the items read as one
+            &:first-child {
+                border-start-start-radius: v.shape("medium");
+                border-start-end-radius: v.shape("medium");
+            }
+
+            &:last-child {
+                border-end-start-radius: v.shape("medium");
+                border-end-end-radius: v.shape("medium");
+            }
+
+            &--selected {
+                background-color: var(--#{$prefix}-menu-selected-container);
+                color: var(--#{$prefix}-menu-selected-label);
+                border-radius: v.shape("medium"); // ItemSelectedShape
+
+                &:hover {
+                    @include m.state-layer(var(--#{$prefix}-menu-selected-label), "hover");
+                }
+
+                &:focus-visible {
+                    @include m.state-layer(var(--#{$prefix}-menu-selected-label), "focus");
+                }
+
+                &:active {
+                    @include m.state-layer(var(--#{$prefix}-menu-selected-label), "pressed");
+                }
+            }
+
+            &--disabled {
+                color: color-mix(in srgb, var(--#{$prefix}-menu-label) 38%, transparent);
+            }
+
+            &-icon {
+                color: var(--#{$prefix}-menu-supporting);
+                margin-inline-end: 12px; // ItemBetweenSpace
+
+                svg {
+                    // ItemLeadingIconSize / ItemTrailingIconSize
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+
+            &-shortcut {
+                @include m.typography("label-small"); // ItemTrailingSupportingTextFont
+                color: var(--#{$prefix}-menu-supporting);
+            }
+
+            // A label with a line under it
+            &-label {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                flex: 1;
+                min-width: 0;
+            }
+
+            &-supporting {
+                @include m.typography("body-medium"); // ItemSupportingTextFont
+                color: var(--#{$prefix}-menu-supporting);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            &--selected {
+                .#{$component}-item-icon,
+                .#{$component}-item-shortcut,
+                .#{$component}-item-supporting {
+                    color: inherit;
+                }
+            }
+        }
+
+        // A grouped menu separates its runs of items two ways, as the spec
+        // shows: a divider line across one surface, or a gap
+        // (m3.material.io menu guidelines, "Gaps & dividers")
+        .#{$component}-divider {
+            margin: 6px 0;
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // The gap separator: the menu stops being one surface and each group
+    // becomes its own, keeping the container's shape and elevation.
+    //
+    // The measurements come from the vertical menu specimen on
+    // m3.material.io/components/menus, which the guidelines show but do not
+    // give numbers for. Read off that image at its 2px-per-dp scale: a 44dp
+    // item, a 16dp group corner, 4dp of padding inside each group and 2dp
+    // between them, so two items either side of a boundary sit 10dp apart.
+    // The group hugs its items more tightly than the whole-menu container
+    // does, which is what keeps a gap from reading as a chasm.
+    // -------------------------------------------------------------------------
+    &--vertical:has(.#{$component}-group) {
+        background-color: transparent;
+        box-shadow: none;
+        padding: 0;
+
+        // Each group casts its own shadow. The container clips so that item
+        // backgrounds stay inside its rounded corners, but there is no
+        // container here to stay inside, and clipping would cut the shadows
+        // off square.
+        overflow: visible;
+
+        .#{$component}-list {
+            overflow: visible;
+            // the separator is the 2dp the variant already puts between items
+            gap: 2px;
+        }
+
+        .#{$component}-group {
+            background-color: var(--#{$prefix}-menu-container);
+            padding: 4px; // GroupPadding
+            @include m.elevation(2);
+
+            // A corner facing a gap is the group's own shape, 8dp
+            // (SegmentedMenuTokens.GroupShape). Only the outside of the menu
+            // keeps the 16dp container shape, so the run of groups reads as
+            // one menu that has been cut, rather than as loose cards.
+            border-radius: v.shape("small");
+
+            &:first-child {
+                border-start-start-radius: v.shape("large"); // ContainerShape
+                border-start-end-radius: v.shape("large");
+            }
+
+            &:last-child {
+                border-end-start-radius: v.shape("large");
+                border-end-end-radius: v.shape("large");
+            }
+
+            // its own margin would add to the list gap
+            + .#{$component}-group {
+                margin-top: 0;
+            }
+
+            // and the items inside keep the 2dp separation of the variant
+            > ul {
+                display: flex;
+                flex-direction: column;
+                gap: 2px;
+            }
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Shape morph on the container: while a submenu is open, the menu that
+    // opened it steps back to an 8dp corner and the active one takes 24dp
+    // (SegmentedMenuTokens.ActiveContainerShape and InactiveContainerShape).
+    // This is the expressive active state the spec describes.
+    // -------------------------------------------------------------------------
+    &--vertical {
+        transition:
+            transform v.motion("duration-medium1") v.motion("easing-emphasized"),
+            opacity v.motion("duration-medium1") v.motion("easing-emphasized"),
+            border-radius v.motion("spring-fast-spatial-duration")
+                v.motion("spring-fast-spatial-easing");
+
+        &.#{$component}--active {
+            border-radius: 24px;
+        }
+
+        &.#{$component}--inactive {
+            border-radius: v.shape("small");
+        }
+    }
+
     @include m.rtl {
         transform-origin: top right;