mtrl 0.6.2 → 0.7.0

package/src/styles/components/_icon-button.scss

@@ -534,7 +534,7 @@ $widths: (
 // =============================================================================
 // Dark theme adjustments
 // =============================================================================
-body[data-theme-mode="dark"] {
+html[data-theme-mode="dark"] {
     .#{$component} {
         &:disabled,
         &.#{$component}--disabled {

package/src/styles/components/_menu.scss

@@ -225,6 +225,31 @@ $component: "#{$prefix}-menu";
         }
     }
 
+    // Dense variant — compact items for toolbars and dense UIs
+    &--dense {
+        padding: 4px 0;
+
+        .#{$component}-item {
+            @include m.typography("body-medium");
+            min-height: 32px;
+            padding: 4px 12px;
+            padding-right: 32px;
+
+            &--submenu {
+                padding-right: 36px;
+            }
+
+            &-icon svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .#{$component}-divider {
+            margin: 4px 0;
+        }
+    }
+
     // RTL Support
     @include m.rtl {
         transform-origin: top right;

package/src/styles/components/_segmented-button.scss

@@ -465,7 +465,7 @@ $component: "#{base.$prefix}-segmented-button";
 // DARK THEME ADJUSTMENTS
 // =============================================================================
 
-body[data-theme-mode="dark"] {
+html[data-theme-mode="dark"] {
     .#{$component} {
         border-color: t.color("outline");
 

package/src/styles/main.scss

@@ -50,6 +50,7 @@
 @use "./components/datepicker" as datepicker;
 @use "./components/dialog" as dialog;
 @use "./components/divider" as divider;
+@use "./components/drawer" as drawer;
 
 @use "./components/progress" as progress;
 

package/dist/constants.d.ts

@@ -1,30 +0,0 @@
-import { BADGE_VARIANTS, BADGE_COLORS, BADGE_POSITIONS, BADGE_MAX_CHARACTERS } from "./components/badge/constants";
-import { FAB_POSITIONS as BOTTOM_APP_BAR_FAB_POSITIONS, BOTTOM_APP_BAR_CLASSES, DEFAULT_TRANSITION_DURATION } from "./components/bottom-app-bar/constants";
-import { BUTTON_VARIANTS, BUTTON_TYPES, BUTTON_CLASSES, BUTTON_SIZES, BUTTON_SHAPES, DEFAULT_RIPPLE_CONFIG } from "./components/button/constants";
-import { CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS, CARD_ASPECT_RATIOS, CARD_ACTION_ALIGNMENT, CARD_MEDIA_POSITION, CARD_CLASSES } from "./components/card/constants";
-import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION, CHECKBOX_STATES, CHECKBOX_CLASSES } from "./components/checkbox/constants";
-import { CHIP_VARIANTS, CHIP_EVENTS, CHIPS_EVENTS } from "./components/chips/constants";
-import { CHIP_CLASSES, CHIP_STATES } from "./components/chips/chip/constants";
-import { DATEPICKER_VARIANTS, DATEPICKER_VIEWS, DATEPICKER_SELECTION_MODES, DAY_NAMES, MONTH_NAMES, MONTH_NAMES_SHORT, DEFAULT_DATE_FORMAT, DATEPICKER_CLASSES, DATEPICKER_EVENTS } from "./components/datepicker/constants";
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS, DIALOG_CLASSES, DEFAULT_ANIMATION_DURATION, DEFAULT_Z_INDEX, DIALOG_BUTTON_VARIANTS, DEFAULT_CONFIRM_BUTTON_TEXT, DEFAULT_CANCEL_BUTTON_TEXT } from "./components/dialog/constants";
-import { DIVIDER_ORIENTATIONS, DIVIDER_VARIANTS, DEFAULT_DIVIDER_THICKNESS, DEFAULT_INSET_VALUE, DIVIDER_CLASSES } from "./components/divider/constants";
-import { EXTENDED_FAB_VARIANTS, EXTENDED_FAB_WIDTH, EXTENDED_FAB_POSITIONS, EXTENDED_FAB_ICON_POSITIONS, EXTENDED_FAB_CLASSES, EXTENDED_FAB_TYPES, EXTENDED_FAB_ANIMATIONS } from "./components/extended-fab/constants";
-import { FAB_VARIANTS, FAB_SIZES, FAB_POSITIONS, FAB_CLASSES, FAB_TYPES, FAB_ICON_SIZES, FAB_ANIMATIONS } from "./components/fab/constants";
-import { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES } from "./components/list/constants";
-import { MENU_POSITION, MENU_DEFAULTS, MENU_INTERACTION_TYPES, MENU_ITEM_TYPES, MENU_EVENTS, MENU_CLASSES } from "./components/menu/constants";
-import { NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS, NAV_ITEM_STATES, NAV_EVENTS, NAV_DEFAULTS, NAV_CLASSES } from "./components/navigation/constants";
-import { PROGRESS_VARIANTS, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES } from "./components/progress/constants";
-import { RADIO_STATES, RADIO_DIRECTIONS, RADIO_VARIANTS, RADIO_LABEL_POSITIONS, RADIO_SIZES, RADIO_EVENTS, RADIO_DEFAULTS, RADIO_CLASSES } from "./components/radios/constants";
-import { SEARCH_STATES, SEARCH_VIEW_MODES, SEARCH_EVENTS, SEARCH_ICONS, SEARCH_DEFAULTS, SEARCH_CLASSES, SEARCH_MEASUREMENTS, SEARCH_KEYS } from "./components/search/constants";
-import { SEGMENTED_BUTTON_MODES, SEGMENTED_BUTTON_DENSITY, SEGMENTED_BUTTON_EVENTS, SEGMENTED_BUTTON_DEFAULTS, SEGMENTED_BUTTON_ICONS, SEGMENTED_BUTTON_CLASSES } from "./components/segmented-button/constants";
-import { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES } from "./components/select/constants";
-import { SHEET_VARIANTS, SHEET_POSITIONS, SHEET_EVENTS, SHEET_ELEVATION, SHEET_DEFAULTS, SHEET_ANIMATION, SHEET_GESTURE, SHEET_CLASSES } from "./components/sheet/constants";
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS, SLIDER_POSITIONS, SLIDER_DEFAULTS, SLIDER_CLASSES } from "./components/slider/constants";
-import { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS, SNACKBAR_STATES, SNACKBAR_EVENTS, SNACKBAR_DEFAULTS, SNACKBAR_CLASSES } from "./components/snackbar/constants";
-import { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from "./components/switch/constants";
-import { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES } from "./components/tabs/constants";
-import { TEXTFIELD_VARIANTS, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES } from "./components/textfield/constants";
-import { TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_DIAL, TIMEPICKER_VALUES, TIMEPICKER_Z_INDEX, TIMEPICKER_DEFAULTS, TIMEPICKER_CLASSES } from "./components/timepicker/constants";
-import { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES } from "./components/tooltip/constants";
-import { TOP_APP_BAR_TYPES, TOP_APP_BAR_STATES, TOP_APP_BAR_DEFAULTS, TOP_APP_BAR_CLASSES } from "./components/top-app-bar/constants";
-export { BADGE_VARIANTS, BADGE_COLORS, BADGE_POSITIONS, BADGE_MAX_CHARACTERS, BOTTOM_APP_BAR_FAB_POSITIONS, BOTTOM_APP_BAR_CLASSES, DEFAULT_TRANSITION_DURATION, BUTTON_VARIANTS, BUTTON_TYPES, BUTTON_CLASSES, BUTTON_SIZES, BUTTON_SHAPES, DEFAULT_RIPPLE_CONFIG, CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS, CARD_ASPECT_RATIOS, CARD_ACTION_ALIGNMENT, CARD_MEDIA_POSITION, CARD_CLASSES, CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION, CHECKBOX_STATES, CHECKBOX_CLASSES, CHIP_VARIANTS, CHIP_EVENTS, CHIPS_EVENTS, CHIP_CLASSES, CHIP_STATES, DATEPICKER_VARIANTS, DATEPICKER_VIEWS, DATEPICKER_SELECTION_MODES, DAY_NAMES, MONTH_NAMES, MONTH_NAMES_SHORT, DEFAULT_DATE_FORMAT, DATEPICKER_CLASSES, DATEPICKER_EVENTS, DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS, DIALOG_CLASSES, DEFAULT_ANIMATION_DURATION, DEFAULT_Z_INDEX, DIALOG_BUTTON_VARIANTS, DEFAULT_CONFIRM_BUTTON_TEXT, DEFAULT_CANCEL_BUTTON_TEXT, DIVIDER_ORIENTATIONS, DIVIDER_VARIANTS, DEFAULT_DIVIDER_THICKNESS, DEFAULT_INSET_VALUE, DIVIDER_CLASSES, EXTENDED_FAB_VARIANTS, EXTENDED_FAB_WIDTH, EXTENDED_FAB_POSITIONS, EXTENDED_FAB_ICON_POSITIONS, EXTENDED_FAB_CLASSES, EXTENDED_FAB_TYPES, EXTENDED_FAB_ANIMATIONS, FAB_VARIANTS, FAB_SIZES, FAB_POSITIONS, FAB_CLASSES, FAB_TYPES, FAB_ICON_SIZES, FAB_ANIMATIONS, LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, MENU_POSITION, MENU_DEFAULTS, MENU_INTERACTION_TYPES, MENU_ITEM_TYPES, MENU_EVENTS, MENU_CLASSES, NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS, NAV_ITEM_STATES, NAV_EVENTS, NAV_DEFAULTS, NAV_CLASSES, PROGRESS_VARIANTS, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, RADIO_STATES, RADIO_DIRECTIONS, RADIO_VARIANTS, RADIO_LABEL_POSITIONS, RADIO_SIZES, RADIO_EVENTS, RADIO_DEFAULTS, RADIO_CLASSES, SEARCH_STATES, SEARCH_VIEW_MODES, SEARCH_EVENTS, SEARCH_ICONS, SEARCH_DEFAULTS, SEARCH_CLASSES, SEARCH_MEASUREMENTS, SEARCH_KEYS, SEGMENTED_BUTTON_MODES, SEGMENTED_BUTTON_DENSITY, SEGMENTED_BUTTON_EVENTS, SEGMENTED_BUTTON_DEFAULTS, SEGMENTED_BUTTON_ICONS, SEGMENTED_BUTTON_CLASSES, SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES, SHEET_VARIANTS, SHEET_POSITIONS, SHEET_EVENTS, SHEET_ELEVATION, SHEET_DEFAULTS, SHEET_ANIMATION, SHEET_GESTURE, SHEET_CLASSES, SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS, SLIDER_POSITIONS, SLIDER_DEFAULTS, SLIDER_CLASSES, SNACKBAR_VARIANTS, SNACKBAR_POSITIONS, SNACKBAR_STATES, SNACKBAR_EVENTS, SNACKBAR_DEFAULTS, SNACKBAR_CLASSES, SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES, TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, TEXTFIELD_VARIANTS, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES, TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_DIAL, TIMEPICKER_VALUES, TIMEPICKER_Z_INDEX, TIMEPICKER_DEFAULTS, TIMEPICKER_CLASSES, TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES, TOP_APP_BAR_TYPES, TOP_APP_BAR_STATES, TOP_APP_BAR_DEFAULTS, TOP_APP_BAR_CLASSES, };