@expressivecss/expressive 0.3.0 → 0.4.0

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
 export interface SidenavOptions extends BaseOptions {
     /**
      * Side of screen on which Sidenav appears.
@@ -15,21 +15,6 @@ export interface SidenavOptions extends BaseOptions {
      * @default '10px'
      */
     dragTargetWidth: string;
-    /**
-     * Length in ms of enter transition.
-     * @default 250
-     */
-    inDuration: number;
-    /**
-     * Length in ms of exit transition.
-     * @default 200
-     */
-    outDuration: number;
-    /**
-     * Prevent page from scrolling while sidenav is open.
-     * @default true
-     */
-    preventScrolling: boolean;
     /**
      * Function called when sidenav starts entering.
      */
@@ -47,27 +32,30 @@ export interface SidenavOptions extends BaseOptions {
      */
     onCloseEnd: (elem: HTMLElement) => void;
 }
+/**
+ * Navigation drawer. Overlay is a modal <dialog>; fixed is a breakpoint.
+ * JS opens/closes, handles the trigger, and writes --md-comp-nav-drawer-shift
+ * while dragging. CSS owns the slide, the scrim, and the large-screen dock.
+ */
 export declare class Sidenav extends Component<SidenavOptions> implements Openable {
     id: string;
-    /** Describes open/close state of Sidenav. */
+    /** Describes open/close state of the overlay drawer. */
     isOpen: boolean;
-    /** Describes if sidenav is fixed. */
+    /** Describes if sidenav has sidenav-fixed. */
     isFixed: boolean;
     /** Describes if Sidenav is being dragged. */
     isDragged: boolean;
-    lastWindowWidth: number;
-    lastWindowHeight: number;
     static _sidenavs: Sidenav[];
-    private _overlay;
-    dragTarget: Element;
+    dragTarget: HTMLElement | null;
+    private _dialog;
+    private _createdDialog;
+    private _closing;
+    private _mql;
     private _startingXpos;
     private _xPos;
-    private _time;
     private _width;
     private _initialScrollTop;
     private _verticallyScrolling;
-    private deltaX;
-    private velocityX;
     private percentOpen;
     constructor(el: HTMLElement, options: Partial<SidenavOptions>);
     static get defaults(): SidenavOptions;
@@ -82,44 +70,41 @@ export declare class Sidenav extends Component<SidenavOptions> implements Openab
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<SidenavOptions>): Sidenav[];
+    static init(els: InitElements<InitElement>, options?: Partial<SidenavOptions>): Sidenav[];
     static getInstance(el: HTMLElement): Sidenav;
     destroy(): void;
-    private _createOverlay;
+    /**
+     * Opens the overlay drawer. No-op while the sidenav is docked
+     * (sidenav-fixed at the large breakpoint).
+     */
+    open: () => void;
+    /**
+     * Closes the overlay drawer. No-op while the sidenav is docked.
+     */
+    close: () => void;
+    private _beginClose;
+    private _finishClose;
+    private _onDialogClose;
+    private _onBreakpointChange;
+    private _setupDialog;
+    private _unwrapDialog;
+    private _createDragTarget;
+    private _removeDragTarget;
+    private _setupClasses;
     private _setupEventHandlers;
     private _removeEventHandlers;
-    private _handleTriggerClick;
+    private static _handleTriggerClick;
+    private _handleCloseTriggerClick;
+    private _isDraggable;
+    private _isCurrentlyFixed;
     private _startDrag;
     private _dragMoveUpdate;
+    private _rawDelta;
+    private _applyShift;
+    private _clearShift;
     private _handleDragTargetDrag;
     private _handleDragTargetRelease;
     private _handleCloseDrag;
-    private _calculateDelta;
     private _handleCloseRelease;
-    private _handleCloseTriggerClick;
-    private _handleWindowResize;
-    private _setupClasses;
-    private _removeClasses;
-    private _setupFixed;
-    private _isDraggable;
-    private _isCurrentlyFixed;
-    private _createDragTarget;
-    private _preventBodyScrolling;
-    private _enableBodyScrolling;
-    /**
-     * Opens Sidenav.
-     */
-    open: () => void;
-    /**
-     * Closes Sidenav.
-     */
-    close: () => void;
-    private _animateIn;
-    private _animateOut;
-    private _animateSidenavIn;
-    private _animateSidenavOut;
-    private _animateOverlayIn;
-    private _animateOverlayOut;
-    private _setAriaHidden;
-    private _setTabIndex;
+    private _syncTriggers;
 }

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface SliderOptions extends BaseOptions {
     /**
      * Set to false to hide slide indicators.
@@ -65,7 +65,7 @@ export declare class Slider extends Component<SliderOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<SliderOptions>): Slider[];
+    static init(els: InitElements<InitElement>, options?: Partial<SliderOptions>): Slider[];
     static getInstance(el: HTMLElement): Slider;
     destroy(): void;
     private _setupEventHandlers;

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

@@ -1,5 +1,5 @@
 import { Carousel } from './carousel';
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface TabsOptions extends BaseOptions {
     /**
      * Transition duration in milliseconds.
@@ -46,7 +46,7 @@ export declare class Tabs extends Component<TabsOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<TabsOptions>): Tabs[];
+    static init(els: InitElements<InitElement>, options?: Partial<TabsOptions>): Tabs[];
     static getInstance(el: HTMLElement): Tabs;
     destroy(): void;
     /**

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
 export interface TapTargetOptions extends BaseOptions {
     /**
      * Callback function called when Tap Target is opened.
@@ -31,7 +31,7 @@ export declare class TapTarget extends Component<TapTargetOptions> implements Op
     constructor(el: HTMLElement, options: Partial<TapTargetOptions>);
     static get defaults(): TapTargetOptions;
     static init(el: HTMLElement, options?: Partial<TapTargetOptions>): TapTarget;
-    static init(els: InitElements<MElement>, options?: Partial<TapTargetOptions>): TapTarget[];
+    static init(els: InitElements<InitElement>, options?: Partial<TapTargetOptions>): TapTarget[];
     static getInstance(el: HTMLElement): TapTarget;
     destroy(): void;
     /**

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, I18nOptions } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement, I18nOptions } from '../core/component';
 export type Views = 'hours' | 'minutes';
 export interface TimepickerOptions extends BaseOptions {
     /**
@@ -158,7 +158,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<TimepickerOptions>): Timepicker[];
+    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<TimepickerOptions>): Timepicker[];
     static _addLeadingZero(num: number): string;
     static _createSVGEl(name: string): SVGElement;
     static _Pos(e: TouchEvent | MouseEvent): Point;
@@ -209,7 +209,5 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     confirm: () => void;
     cancel: () => void;
     clear: () => void;
-    open(): this;
-    close(): this;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 export interface TooltipOptions extends BaseOptions {
     /**
@@ -84,7 +84,7 @@ export declare class Tooltip extends Component<TooltipOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<TooltipOptions>): Tooltip[];
+    static init(els: InitElements<InitElement>, options?: Partial<TooltipOptions>): Tooltip[];
     static getInstance(el: HTMLElement): Tooltip;
     destroy(): void;
     _appendTooltipEl(): void;

package/dist/types/core/component.d.ts

@@ -3,8 +3,8 @@
  */
 export interface BaseOptions {
 }
-export type MElement = HTMLElement | Element;
-export type InitElements<T extends MElement> = NodeListOf<T> | HTMLCollectionOf<T>;
+export type InitElement = HTMLElement | Element;
+export type InitElements<T extends InitElement> = NodeListOf<T> | HTMLCollectionOf<T>;
 type ComponentConstructor<T extends Component<O>, O extends BaseOptions> = {
     new (el: HTMLElement, options: Partial<O>): T;
 };
@@ -48,14 +48,14 @@ export declare class Component<O extends BaseOptions> {
      * @param options Component options.
      * @param classDef Class definition.
      */
-    protected static init<I extends MElement, O extends BaseOptions, C extends Component<O>>(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
+    protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
     /**
      * Initializes component instances.
      * @param els HTML elements.
      * @param options Component options.
      * @param classDef Class definition.
      */
-    protected static init<I extends MElement, O extends BaseOptions, C extends Component<O>>(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
+    protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
     /**
      * @returns default options for component instance.
      */

package/dist/types/index.d.ts

@@ -4,4 +4,4 @@ export { Forms } from './behaviors/forms';
 export { Waves } from './behaviors/waves';
 export { AutoInit } from './components/registry';
 export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.3.0";
+export declare const version = "0.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",
@@ -69,7 +69,7 @@
     "build:js:iife-min": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.min.js --minify --sourcemap",
     "build:types": "tsc -p tsconfig.build.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "run-s build:js test:run",
+    "test": "run-s build:js build:css test:run",
     "test:run": "node --test",
     "test:watch": "node --test --watch",
     "watch": "run-p watch:css watch:js",

package/src/sass/README.md

@@ -79,9 +79,6 @@ exclusive comparator, so the old `600.99px` / `992.99px` values used to stop
 `max-width` and `min-width` both matching on the boundary pixel are gone, and
 each boundary is written once.
 
-The interpolated-string form (`@media #{$medium-and-up}`) still compiles and now
-produces the same range queries, but it is deprecated and unused in here.
-
 ## Theming
 
 `tokens/_reference.scss` **generates** five of the six M3 tonal ramps from
@@ -196,6 +193,5 @@ consumer's own `display` — silently, and in the common case. Classes whose who
 job is to be unconditional (`.hide`, `.m-3`, the palette classes) keep it.
 
 The `!important` in `components/` is a different thing again: `.pushpin`
-and the preloader set JS-driven geometry that must not be overridable.
-Those stay. Tap target placement is custom properties now, so it no
-longer needs the flag.
+sets JS-driven geometry that must not be overridable. That stays.
+Tap target and the preloader no longer need the flag.

package/src/sass/abstracts/_breakpoints.scss

@@ -51,19 +51,3 @@ $breakpoints: (
     @content;
   }
 }
-
-// Deprecated: the interpolated-string breakpoints.
-//
-// Kept so a downstream `@media #{$medium-and-up}` keeps compiling - the
-// framework itself no longer uses them. Values are now range syntax, so the
-// queries they produce match the mixins above exactly. Prefer the mixins.
-$small-screen-up: breakpoint("small") !default;
-$medium-screen-up: breakpoint("large") !default;
-$large-screen-up: breakpoint("xlarge") !default;
-
-$medium-and-up: "(width >= #{breakpoint('small')})" !default;
-$large-and-up: "(width >= #{breakpoint('large')})" !default;
-$extra-large-and-up: "(width >= #{breakpoint('xlarge')})" !default;
-$small-and-down: "(width < #{breakpoint('small')})" !default;
-$medium-and-down: "(width < #{breakpoint('large')})" !default;
-$medium-only: "(#{breakpoint('small')} <= width < #{breakpoint('large')})" !default;

package/src/sass/abstracts/_variables.scss

@@ -1,6 +1,3 @@
-// TypeScale
-$md_sys_typescale_body-large_size: 16px;
-
 @use "sass:math";
 
 // Colors
@@ -11,14 +8,6 @@ $md_sys_typescale_body-large_size: 16px;
 // value from it: this link color. Everything now comes from --md-sys-color-*.
 $link-color: var(--md-sys-color-primary) !default;
 
-// Floating buttons
-$button-floating-background: var(--md-sys-color-secondary) !default;
-$button-floating-background-hover: var(--md-ref-palette-secondary70) !default;
-$button-floating-background-focus: var(--md-ref-palette-secondary80) !default;
-$button-floating-color: var(--md-sys-color-on-secondary) !default;
-$button-floating-size: 40px !default;
-$button-floating-radius: 16px !default;
-
 // Dropdown
 $dropdown-item-height: 50px !default;
 
@@ -27,7 +16,6 @@ $dropdown-item-height: 50px !default;
 // the 600.99px / 992.99px / 1200.99px values are gone.
 
 // Grid
-$num-cols: 12 !default;
 $gutter-width: 1.5rem !default;
 $element-top-margin: math.div($gutter-width, 3) !default;
 $element-bottom-margin: math.div($gutter-width * 2, 3) !default;
@@ -40,15 +28,6 @@ $text-color: var(--md-sys-color-on-background) !default;
 // derived from it, so the two cannot drift.
 $root-font-size: 14px !default;
 
-// Legacy rem heading ladder. Headings now consume --md-sys-typescale-*
-// (see base/_typography.scss). Kept so existing Sass overrides still compile.
-$h1-fontsize: 4.2rem !default;
-$h2-fontsize: 3.56rem !default;
-$h3-fontsize: 2.92rem !default;
-$h4-fontsize: 2.28rem !default;
-$h5-fontsize: 1.64rem !default;
-$h6-fontsize: 1.15rem !default;
-
 // Flow text: font-size interpolates between these two across the viewport
 // range below. This used to be a @while loop emitting 21 media queries.
 $flow-text-min: 1.2rem !default;

package/src/sass/base/_grid.scss

@@ -23,25 +23,6 @@
   padding: 1rem 0;
 }
 
-// Mixins to eliminate code repetition
-@mixin reset-offset {
-  margin-left: auto;
-  left: auto;
-  right: auto;
-}
-
-@mixin grid-classes($size, $i, $perc) {
-  &.offset-#{$size}#{$i} {
-    margin-left: $perc;
-  }
-  &.pull-#{$size}#{$i} {
-    right: $perc;
-  }
-  &.push-#{$size}#{$i} {
-    left: $perc;
-  }
-}
-
 body {
   --gap-size: 1.5rem; // default
 }

package/src/sass/components/_badges.scss

@@ -68,7 +68,7 @@ header:has(> nav) nav a span.badge {
 }
 
 .sidenav span.badge {
-  margin-top: calc(calc(var(--sidenav-line-height) * 0.5) - calc(22px * 0.5));
+  margin-top: calc(calc(var(--md-comp-nav-drawer-line-height) * 0.5) - calc(22px * 0.5));
 }
 
 table span.badge {

package/src/sass/components/_buttons.scss

@@ -2,10 +2,10 @@
 
 // Common buttons and FABs.
 //
-// Anatomy is the HTML. A <button> (or <a class="button"> / .btn) is a filled
-// common button. Put an <i> first or last for a leading/trailing icon — no
-// icon-left / icon-right required. Icon-only is a 40dp icon button. Helpers
-// switch the M3 variant (tonal, outlined, elevated, text) or the size.
+// Anatomy is the HTML. A <button> (or <a class="button">) is a filled
+// common button. Put an <i> first or last for a leading/trailing icon.
+// Icon-only is a 40dp icon button. Helpers switch the M3 variant
+// (tonal, outlined, elevated, text) or the size.
 //
 // Tokens follow https://m3.material.io/components/buttons/specs
 //   height 40 / 32 small / 56 large, label-large, 20dp stadium
@@ -28,7 +28,7 @@
 // Widget chrome that happens to be a <button> — not a common button.
 $_not-btn: ".datepicker-day-button, .month-prev, .month-next, .indicator-item-btn";
 
-$_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-small";
+$_btn: "button:not(#{$_not-btn}), a.button";
 
 :where(#{$_btn}) {
   @include btn;
@@ -69,7 +69,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
 }
 
 // Default variant is filled. :where() keeps specificity at zero so .tonal etc. win.
-:where(#{$_btn}):not(.tonal, .outlined, .border, .elevated, .text, .transparent, .btn-flat) {
+:where(#{$_btn}):not(.tonal, .outlined, .elevated, .text) {
   @include btn-filled;
 }
 
@@ -77,8 +77,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   @include btn-tonal;
 }
 
-:where(#{$_btn}).outlined,
-:where(#{$_btn}).border {
+:where(#{$_btn}).outlined {
   @include btn-outlined;
 }
 
@@ -86,20 +85,12 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   @include btn-elevated;
 }
 
-:where(#{$_btn}).text,
-:where(#{$_btn}).transparent,
-.btn-flat {
+:where(#{$_btn}).text {
   @include btn-flat;
 }
 
-// icon-right is a compat alias: new markup puts the icon last in the DOM.
-:where(#{$_btn}).icon-right {
-  flex-direction: row-reverse;
-}
-
 // Sizes. small = 32dp, large/extra = 56dp (M3 extra-large / FAB height).
-:where(#{$_btn}).small,
-.btn-small {
+:where(#{$_btn}).small {
   --md-comp-filled-button-container-height: 32px;
   --md-comp-filled-button-container-shape: 16px;
   --md-comp-filled-button-leading-space: 16px;
@@ -111,8 +102,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
 }
 
 :where(#{$_btn}).large,
-:where(#{$_btn}).extra,
-.btn-large {
+:where(#{$_btn}).extra {
   --md-comp-filled-button-container-height: 56px;
   --md-comp-filled-button-container-shape: 28px;
   --md-comp-filled-button-leading-space: 24px;
@@ -126,11 +116,6 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   border-radius: 9999px;
 }
 
-.btn-block {
-  display: flex;
-  width: 100%;
-}
-
 // Extended FAB: 56dp, large corners, primary-container, icon + label.
 :where(#{$_btn}).extend {
   height: 56px;
@@ -168,13 +153,10 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   }
 }
 
-// FAB. .btn-floating is the JS contract (FloatingActionButton looks it up).
-// Icon-only .extra / .large is the same 56dp regular FAB. Bare .btn-floating
-// is the 40dp small FAB.
-.btn-floating,
+// FAB. Icon-only .extra / .large is the 56dp regular FAB. Add .small for
+// the 40dp small FAB. The speed-dial host is .fixed-action-btn.
 :where(#{$_btn}).extra.circle,
-:where(#{$_btn}).large.circle,
-:where(#{$_btn}).btn-large.circle {
+:where(#{$_btn}).large.circle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -191,7 +173,6 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   vertical-align: middle;
   @include z-depth("3");
   @include focus-visible;
-  transition: background-color .2s ease-out, box-shadow .2s ease-out;
 
   > i {
     font-size: 24px;
@@ -219,8 +200,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     );
   }
 
-  &.small,
-  &.btn-small {
+  &.small {
     width: 40px;
     height: 40px;
     border-radius: 12px;
@@ -242,23 +222,9 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
   }
 }
 
-// Small FAB alias: .btn-floating alone is 40dp (historical size + M3 small).
-.btn-floating:not(.large, .btn-large, .extra, .small, .btn-small) {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-
-  &.halfway-fab {
-    bottom: -20px;
-  }
-}
-
 :where(#{$_btn}):disabled,
 :where(#{$_btn})[disabled],
-:where(#{$_btn}).disabled,
-.btn-floating:disabled,
-.btn-floating[disabled],
-.btn-floating.disabled {
+:where(#{$_btn}).disabled {
   @include btn-disabled;
 }
 
@@ -334,12 +300,14 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     li:nth-last-child(7) { --i: 6; }
     li:nth-last-child(8) { --i: 7; }
 
-    :is(a, button) {
+    > li > :is(a, button) {
       opacity: 0;
       transform: var(--md-comp-fab-hidden-transform);
       transition:
         opacity var(--md-comp-fab-duration) var(--md-comp-fab-easing),
-        transform var(--md-comp-fab-duration) var(--md-comp-fab-easing);
+        transform var(--md-comp-fab-duration) var(--md-comp-fab-easing),
+        background-color .2s ease-out,
+        box-shadow .2s ease-out;
       // Close: farthest first, so they funnel into the disc.
       transition-delay: calc(
         var(--md-comp-fab-stagger) * (var(--n) - 1 - var(--i, 0))
@@ -351,7 +319,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     visibility: visible;
     transition-delay: 0s;
 
-    :is(a, button) {
+    > li > :is(a, button) {
       opacity: 1;
       transform: none;
       transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
@@ -429,7 +397,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     padding: 0;
     height: 56px;
 
-    :is(ul, menu) :is(a, button) {
+    :is(ul, menu) > li > :is(a, button) {
       opacity: 1;
       transform: none;
       transition: opacity var(--md-comp-fab-duration);
@@ -490,7 +458,7 @@ $_btn: "button:not(#{$_not-btn}), a.button, .btn, .btn-flat, .btn-large, .btn-sm
     visibility: visible;
     transition-delay: 0s;
 
-    :is(a, button) {
+    > li > :is(a, button) {
       opacity: 1;
       transform: none;
       transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));