mtrl 0.8.0-next.18 → 0.8.0-next.20

package/dist/components/menu/constants.d.ts

@@ -1,6 +1,34 @@
 /**
  * Menu position options for alignment relative to opener element
  */
+/**
+ * Menu variants
+ *
+ * The baseline menu is the original M3 design: square-ish corners, a
+ * surface-container container, and items that fill the width. The vertical
+ * menu is the M3 expressive one: a 16dp container holding 44dp items that
+ * sit 2dp apart and change shape as they are hovered, focused, pressed or
+ * selected. New designs should take the vertical variant.
+ * @category Components
+ */
+export declare const MENU_VARIANTS: {
+    /** The original M3 menu (default, for compatibility) */
+    readonly BASELINE: "baseline";
+    /** The M3 expressive vertical menu */
+    readonly VERTICAL: "vertical";
+};
+/**
+ * Colour mappings for the vertical menu
+ *
+ * Standard is surface-based and carries lower emphasis; vibrant is
+ * tertiary-based, is more prominent, and should be used sparingly
+ * (m3.material.io menu guidelines, "Color options").
+ * @category Components
+ */
+export declare const MENU_COLORS: {
+    readonly STANDARD: "standard";
+    readonly VIBRANT: "vibrant";
+};
 export declare const MENU_POSITION: {
     /** Places menu below the opener, aligned to left edge */
     readonly BOTTOM_START: "bottom-start";
@@ -31,6 +59,10 @@ export declare const MENU_POSITION: {
  * Default configuration values for menus
  */
 export declare const MENU_DEFAULTS: {
+    /** Default variant; the baseline menu, so existing menus are untouched */
+    readonly VARIANT: "baseline";
+    /** Default colour mapping for the vertical variant */
+    readonly COLOR: "standard";
     /** Default menu position */
     readonly POSITION: "bottom-start";
     /** Default offset from the opener (in pixels) */

package/dist/components/menu/types.d.ts

@@ -61,6 +61,11 @@ export interface MenuItem {
      * Shown at the end of the menu item
      */
     shortcut?: string;
+    /**
+     * A second line under the label, for a short explanation of the item
+     * (vertical menus only)
+     */
+    supportingText?: string;
     /**
      * Whether the menu item is disabled
      * Disabled items cannot be clicked but remain visible
@@ -108,6 +113,10 @@ export type MenuContent = MenuItem | MenuDivider;
  *
  * @category Components
  */
+/** Menu variants */
+export type MenuVariant = "baseline" | "vertical";
+/** Colour mappings for the vertical menu */
+export type MenuColor = "standard" | "vibrant";
 export interface MenuConfig {
     /**
      * Element to which the menu will be openered
@@ -124,6 +133,18 @@ export interface MenuConfig {
      * Position of the menu relative to the opener
      * @default 'bottom-start'
      */
+    /**
+     * Menu variant. `'vertical'` is the M3 expressive menu: a rounded
+     * container holding items that sit apart and change shape as they are
+     * hovered, focused, pressed or selected. Defaults to `'baseline'`, the
+     * original M3 menu.
+     */
+    variant?: MenuVariant;
+    /**
+     * Colour mapping for the vertical variant. `'vibrant'` is tertiary-based
+     * and more prominent, so it should be used sparingly.
+     */
+    color?: MenuColor;
     position?: MenuPosition;
     /**
      * Whether the menu should close when an item is clicked