material 1.0.4 → 3.0.0-next.1

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

@@ -0,0 +1,35 @@
+/**
+ * Badge variants
+ * - SMALL: Simple dot badge (6dp diameter)
+ * - LARGE: Numbered badge (16dp height)
+ */
+export declare const BADGE_VARIANTS: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
+/**
+ * Badge colors
+ * ERROR is the default
+ */
+export declare const BADGE_COLORS: {
+    readonly ERROR: "error";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly TERTIARY: "tertiary";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly INFO: "info";
+};
+/**
+ * Badge positions relative to its container
+ */
+export declare const BADGE_POSITIONS: {
+    readonly TOP_RIGHT: "top-right";
+    readonly TOP_LEFT: "top-left";
+    readonly BOTTOM_RIGHT: "bottom-right";
+    readonly BOTTOM_LEFT: "bottom-left";
+};
+/**
+ * Maximum character count for badge labels
+ */
+export declare const BADGE_MAX_CHARACTERS = 4;

package/dist/components/badge/constants.js

@@ -0,0 +1,20 @@
+export const BADGE_VARIANTS = {
+    SMALL: 'small',
+    LARGE: 'large'
+};
+export const BADGE_COLORS = {
+    ERROR: 'error',
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    TERTIARY: 'tertiary',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    INFO: 'info'
+};
+export const BADGE_POSITIONS = {
+    TOP_RIGHT: 'top-right',
+    TOP_LEFT: 'top-left',
+    BOTTOM_RIGHT: 'bottom-right',
+    BOTTOM_LEFT: 'bottom-left'
+};
+export const BADGE_MAX_CHARACTERS = 4;

package/dist/components/badge/features.d.ts

@@ -0,0 +1,38 @@
+import { BadgeConfig, BadgeFeatureHost, BadgeVisibility } from "./types.js";
+/**
+ * Higher-order function that adds visibility control features to a component
+ * @returns {Function} Component enhancer with visibility features
+ */
+export declare const withVisibility: () => <C extends BadgeFeatureHost>(component: C) => C & {
+    visibility: BadgeVisibility;
+};
+/**
+ * Higher-order function that adds variant features to a badge component
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Function} Component enhancer with variant features
+ */
+export declare const withVariant: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;
+/**
+ * Higher-order function that adds color features to a badge component
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Function} Component enhancer with color features
+ */
+export declare const withColor: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;
+/**
+ * Higher-order function that adds positioning features to a badge component
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Function} Component enhancer with positioning features
+ */
+export declare const withPosition: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;
+/**
+ * Higher-order function that adds max value features to a badge component
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Function} Component enhancer with max value features
+ */
+export declare const withMax: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;
+/**
+ * Higher-order function that attaches badge to a target element
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Function} Component enhancer with attachment features
+ */
+export declare const withAttachment: (config: BadgeConfig) => <C extends BadgeFeatureHost>(component: C) => C;

package/dist/components/badge/features.js

@@ -0,0 +1,96 @@
+import { formatBadgeLabel, isBadgeOverflow, isEmptyBadgeLabel } from "./config.js";
+const VARIANT_SMALL = 'small';
+const VARIANT_LARGE = 'large';
+const COLOR_ERROR = 'error';
+const POSITION_TOP_RIGHT = 'top-right';
+export const withVisibility = () => (component) => {
+    const visible = component.config.visible !== false;
+    const nothingToShow = component.config.variant !== "small" && isEmptyBadgeLabel(formatBadgeLabel(component.config.label ?? "", component.config.max));
+    if (!visible || nothingToShow) {
+        component.element.classList.add(`${component.getClass('badge')}--invisible`);
+    }
+    return {
+        ...component,
+        visibility: {
+            show() {
+                component.element.classList.remove(`${component.getClass('badge')}--invisible`);
+            },
+            hide() {
+                component.element.classList.add(`${component.getClass('badge')}--invisible`);
+            },
+            toggle(visible) {
+                if (visible === undefined) {
+                    component.element.classList.toggle(`${component.getClass('badge')}--invisible`);
+                }
+                else if (visible) {
+                    this.show();
+                }
+                else {
+                    this.hide();
+                }
+            },
+            isVisible() {
+                return !component.element.classList.contains(`${component.getClass('badge')}--invisible`);
+            }
+        }
+    };
+};
+export const withVariant = (config) => (component) => {
+    const variant = config.variant || VARIANT_LARGE;
+    component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+    if (variant === VARIANT_SMALL) {
+        component.element.textContent = '';
+        component.element.setAttribute('aria-hidden', 'true');
+    }
+    else {
+        component.element.setAttribute('role', 'status');
+        if (config.label !== undefined && config.label !== '') {
+            const formattedLabel = formatBadgeLabel(config.label, config.max);
+            component.element.textContent = formattedLabel;
+        }
+    }
+    return component;
+};
+export const withColor = (config) => (component) => {
+    const color = config.color || COLOR_ERROR;
+    component.element.classList.add(`${component.getClass('badge')}--${color}`);
+    return component;
+};
+export const withPosition = (config) => (component) => {
+    const position = config.position || POSITION_TOP_RIGHT;
+    component.element.classList.add(`${component.getClass('badge')}--${position}`);
+    if (config.target && config.target.parentNode) {
+        component.element.classList.add(`${component.getClass('badge')}--positioned`);
+    }
+    return component;
+};
+export const withMax = (config) => (component) => {
+    if (config.max === undefined || config.variant === VARIANT_SMALL) {
+        return component;
+    }
+    component.config.max = config.max;
+    if (config.label !== undefined) {
+        const formattedLabel = formatBadgeLabel(config.label, config.max);
+        component.element.textContent = formattedLabel;
+        if (isBadgeOverflow(config.label, config.max)) {
+            component.element.classList.add(`${component.getClass('badge')}--overflow`);
+        }
+    }
+    return component;
+};
+export const withAttachment = (config) => (component) => {
+    if (!config.target) {
+        return component;
+    }
+    const wrapper = document.createElement('div');
+    wrapper.classList.add(component.getClass('badge__wrapper'));
+    wrapper.style.position = 'relative';
+    const parent = config.target.parentNode;
+    if (parent) {
+        parent.replaceChild(wrapper, config.target);
+        wrapper.appendChild(config.target);
+        wrapper.appendChild(component.element);
+        component.wrapper = wrapper;
+    }
+    return component;
+};

package/dist/components/badge/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Badge component module
+ * @module components/badge
+ * @description A small element that communicates status, shows a count,
+ * or highlights an element requiring attention.
+ */
+export { default, default as createBadge } from "./badge.js";
+export type { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition, } from "./types.js";

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { default, default as createBadge } from "./badge.js";

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

@@ -0,0 +1,294 @@
+import { ElementComponent } from "../../core/compose/component.js";
+/**
+ * Badge variant types - determines the badge size and appearance
+ * @category Components
+ * @remarks
+ * - small: A 6dp circular dot badge without text (for notification indicators)
+ * - large: A 16dp height badge that can contain text (for counts or short labels)
+ */
+export type BadgeVariant = 'small' | 'large';
+/**
+ * Badge color types - determines the badge's background color
+ * @category Components
+ * @remarks
+ * Based on Material Design 3 color system:
+ * - error: Red color for error states (default)
+ * - primary: Primary theme color
+ * - secondary: Secondary theme color
+ * - tertiary: Tertiary theme color
+ * - success: Green color for success states
+ * - warning: Orange/yellow color for warning states
+ * - info: Blue color for information states
+ */
+export type BadgeColor = 'error' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'info';
+/**
+ * Badge position types - determines where the badge appears relative to its target
+ * @category Components
+ * @remarks
+ * - top-right: Position in the top-right corner (default)
+ * - top-left: Position in the top-left corner
+ * - bottom-right: Position in the bottom-right corner
+ * - bottom-left: Position in the bottom-left corner
+ */
+export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * Configuration interface for the Badge component
+ * @category Components
+ * @description
+ * Defines the appearance and behavior of a badge component.
+ * All properties are optional with sensible defaults.
+ */
+export interface BadgeConfig {
+    /**
+     * Badge variant (small dot or large numbered)
+     * Small badge (6dp) or Large badge (16dp height)
+     * @default 'large'
+     * @example 'small' | 'large'
+     */
+    variant?: BadgeVariant | string;
+    /**
+     * Badge color (follows Material Design 3 color system)
+     * @default 'error'
+     * @example 'error' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'info'
+     */
+    color?: BadgeColor | string;
+    /**
+     * Badge position relative to its container element
+     * @default 'top-right'
+     * @example 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+     */
+    position?: BadgePosition | string;
+    /**
+     * Text label inside the badge (for large badges)
+     * Up to 4 characters, numbers exceeding max will show "{max}+"
+     * @example "3" | "99+" | "New"
+     */
+    label?: string | number;
+    /**
+     * Maximum value to display (shows "{max}+" if label exceeds max)
+     * Usually 999+ for large numbers
+     * @example 99 | 999
+     */
+    max?: number;
+    /**
+     * Whether the badge should be initially visible
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Target element to which badge will be attached
+     * When provided, the badge will be positioned relative to this element
+     */
+    target?: HTMLElement;
+    /**
+     * Additional CSS classes to apply to the badge element
+     * @example "custom-badge highlighted-badge"
+     */
+    class?: string;
+    /**
+     * CSS class prefix for all badge classes
+     * @default "mtrl"
+     */
+    prefix?: string;
+    /**
+     * Component name used in CSS class generation
+     * @default "badge"
+     * @internal
+     */
+    componentName?: string;
+}
+/**
+ * The visibility control withVisibility installs on a badge.
+ *
+ * Named because three places need the same shape: the feature that builds it,
+ * getApiConfig that forwards it, and withAPI that wraps it.
+ *
+ * @category Components
+ * @internal
+ */
+export interface BadgeVisibility {
+    /** Shows the badge */
+    show: () => void;
+    /** Hides the badge */
+    hide: () => void;
+    /** Toggles badge visibility, or forces it when given a flag */
+    toggle: (visible?: boolean) => void;
+    /** Whether the badge is currently visible */
+    isVisible: () => boolean;
+}
+/**
+ * What a badge feature enhancer needs from the component it is handed.
+ *
+ * The badge pipe is createBase, withEvents, withElement, then these features --
+ * so the element half is installed before any of them runs, which is why
+ * `element` and `getClass` are required rather than optional.
+ *
+ * `config` is the badge's own config: createBase keeps the type it was created
+ * with, so a feature reading `config.variant` gets BadgeVariant and not
+ * `unknown`. `wrapper` is written by withAttachment, not read by it.
+ *
+ * @category Components
+ * @internal
+ */
+export interface BadgeFeatureHost extends ElementComponent {
+    config: BadgeConfig & Record<string, unknown>;
+    wrapper?: HTMLElement;
+}
+/**
+ * Badge component interface
+ * Provides methods for controlling a Material Design 3 badge
+ *
+ * @category Components
+ */
+export interface BadgeComponent {
+    /**
+     * The badge's root DOM element
+     */
+    element: HTMLElement;
+    /**
+     * Badge wrapper element (if badge is attached to target)
+     * This is the parent element that contains both the target and the badge
+     */
+    wrapper?: HTMLElement;
+    /**
+     * Sets the badge's text label
+     * @param label - Text or number to display in the badge
+     * @returns Badge component for method chaining
+     * @example
+     * badge.setLabel(5); // Shows "5"
+     * badge.setLabel("New"); // Shows "New"
+     * badge.setLabel(1250); // With max=999, shows "999+"
+     */
+    setLabel: (label: string | number) => BadgeComponent;
+    /**
+     * Gets the badge's current text label
+     * @returns Current text content of the badge
+     */
+    getLabel: () => string;
+    /**
+     * Sets the badge's content (alias for setLabel)
+     * @param content - Text or number to display in the badge
+     * @returns Badge component for method chaining
+     */
+    setContent: (content: string | number) => BadgeComponent;
+    /**
+     * Gets the badge's current content (alias for getLabel)
+     * @returns Current text content of the badge
+     */
+    getContent: () => string;
+    /**
+     * Shows the badge (makes it visible)
+     * @returns Badge component for method chaining
+     */
+    show: () => BadgeComponent;
+    /**
+     * Hides the badge (makes it invisible)
+     * @returns Badge component for method chaining
+     */
+    hide: () => BadgeComponent;
+    /**
+     * Toggles badge visibility
+     * @param visible - Optional explicit visibility state
+     * @returns Badge component for method chaining
+     * @example
+     * badge.toggle(); // Toggles current state
+     * badge.toggle(true); // Forces visible
+     */
+    toggle: (visible?: boolean) => BadgeComponent;
+    /**
+     * Checks if the badge is currently visible
+     * @returns True if badge is visible, false otherwise
+     */
+    isVisible: () => boolean;
+    /**
+     * Sets maximum value (after which badge shows max+)
+     * @param max - Maximum number to display before showing "+"
+     * @returns Badge component for method chaining
+     * @example
+     * badge.setMax(99); // Shows "99+" for values > 99
+     */
+    setMax: (max: number) => BadgeComponent;
+    /**
+     * Sets badge color
+     * @param color - Badge color from Material Design 3 palette
+     * @returns Badge component for method chaining
+     * @example
+     * badge.setColor('primary');
+     * badge.setColor(BADGE_COLORS.SUCCESS);
+     */
+    setColor: (color: BadgeColor | string) => BadgeComponent;
+    /**
+     * Sets badge variant (size style)
+     * @param variant - Badge variant ('small' or 'large')
+     * @returns Badge component for method chaining
+     * @example
+     * badge.setVariant('small'); // Dot indicator
+     * badge.setVariant(BADGE_VARIANTS.LARGE); // Numbered indicator
+     */
+    setVariant: (variant: BadgeVariant | string) => BadgeComponent;
+    /**
+     * Sets badge position relative to target
+     * @param position - Badge position
+     * @returns Badge component for method chaining
+     * @example
+     * badge.setPosition('bottom-left');
+     */
+    setPosition: (position: BadgePosition | string) => BadgeComponent;
+    /**
+     * Attaches badge to a target element
+     * @param target - Element to attach badge to
+     * @returns Badge component for method chaining
+     * @example
+     * badge.attachTo(document.querySelector('#notification-bell'));
+     */
+    attachTo: (target: HTMLElement) => BadgeComponent;
+    /**
+     * Makes badge standalone (removes from wrapper)
+     * @returns Badge component for method chaining
+     */
+    detach: () => BadgeComponent;
+    /**
+     * Destroys the badge component and cleans up resources
+     * Removes the badge from the DOM and clears event listeners
+     */
+    destroy: () => void;
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     * @internal
+     */
+    getClass: (name: string) => string;
+    /**
+     * Adds CSS classes to the badge element
+     * @param classes - One or more class names to add
+     * @returns Badge component for method chaining
+     * @example
+     * badge.addClass('highlighted', 'animated');
+     */
+    addClass: (...classes: string[]) => BadgeComponent;
+    /**
+     * Removes CSS classes from the badge element
+     * @param classes - One or more class names to remove
+     * @returns Badge component for method chaining
+     * @example
+     * badge.removeClass('highlighted', 'animated');
+     */
+    removeClass: (...classes: string[]) => BadgeComponent;
+    /**
+     * Adds an event listener to the badge
+     * @param event - Event name ('click', 'mouseover', etc.)
+     * @param handler - Event handler function
+     * @returns Badge component for method chaining
+     * @example
+     * badge.on('click', () => console.log('Badge clicked'));
+     */
+    on: (event: string, handler: Function) => BadgeComponent;
+    /**
+     * Removes an event listener from the badge
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns Badge component for method chaining
+     */
+    off: (event: string, handler: Function) => BadgeComponent;
+}

package/dist/components/badge/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/bottom-app-bar/bottom-app-bar.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @module components/bottom-app-bar
+ * @description Bottom app bar implementation
+ */
+import { BottomAppBarComponent, BottomAppBarConfig } from "./types.js";
+/**
+ * Creates a bottom app bar component
+ *
+ * @param {BottomAppBarConfig} config - Configuration options
+ * @returns {BottomAppBarComponent} Bottom app bar component instance
+ */
+export declare const createBottomAppBar: (config?: BottomAppBarConfig) => BottomAppBarComponent;

package/dist/components/bottom-app-bar/bottom-app-bar.js

@@ -0,0 +1,103 @@
+import { processClassNames } from "../../core/config/component.js";
+import { createBase, withElement, withEvents, withLifecycle, } from "../../core/compose/index.js";
+import { createConfig } from "./config.js";
+export const createBottomAppBar = (config = {}) => {
+    const componentConfig = createConfig(config);
+    const component = createBase(componentConfig);
+    const actionsContainer = document.createElement("div");
+    actionsContainer.className = `${component.getClass("bottom-app-bar")}__actions`;
+    const fabContainer = document.createElement("div");
+    fabContainer.className = `${component.getClass("bottom-app-bar")}__fab-container`;
+    const enhancedComponent = withElement({
+        tag: componentConfig.tag,
+        componentName: "bottom-app-bar",
+        className: [
+            componentConfig.hasFab
+                ? `${component.getClass("bottom-app-bar")}--with-fab`
+                : "",
+            componentConfig.fabPosition === "center"
+                ? `${component.getClass("bottom-app-bar")}--fab-center`
+                : "",
+            processClassNames(componentConfig.className || ""),
+        ].filter((name) => Boolean(name)),
+        attributes: {
+            role: "toolbar",
+            "aria-label": "Bottom app bar",
+        },
+        interactive: true,
+    })(component);
+    const withEventsComponent = withEvents()(enhancedComponent);
+    const withLifecycleComponent = withLifecycle()(withEventsComponent);
+    withLifecycleComponent.element.appendChild(actionsContainer);
+    withLifecycleComponent.element.appendChild(fabContainer);
+    let isVisible = true;
+    let prevScrollY = window.scrollY;
+    if (componentConfig.autoHide) {
+        const handleScroll = () => {
+            const currentScrollY = window.scrollY;
+            if (currentScrollY > prevScrollY + 10) {
+                if (isVisible) {
+                    bottomBar.hide();
+                }
+            }
+            else if (currentScrollY < prevScrollY - 10) {
+                if (!isVisible) {
+                    bottomBar.show();
+                }
+            }
+            prevScrollY = currentScrollY;
+        };
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        const originalDestroy = withLifecycleComponent.lifecycle.destroy;
+        withLifecycleComponent.lifecycle.destroy = () => {
+            window.removeEventListener("scroll", handleScroll);
+            originalDestroy();
+        };
+    }
+    const bottomBar = {
+        ...withLifecycleComponent,
+        addClass(...classes) {
+            withLifecycleComponent.addClass(...classes);
+            return this;
+        },
+        destroy() {
+            withLifecycleComponent.lifecycle.destroy();
+        },
+        addAction(button) {
+            actionsContainer.appendChild(button);
+            return this;
+        },
+        addFab(fab) {
+            fabContainer.replaceChildren();
+            fabContainer.appendChild(fab);
+            this.element.classList.add(`${component.getClass("bottom-app-bar")}--with-fab`);
+            return this;
+        },
+        show() {
+            this.element.classList.remove(`${component.getClass("bottom-app-bar")}--hidden`);
+            const changed = !isVisible;
+            isVisible = true;
+            if (changed)
+                componentConfig.onVisibilityChange?.(true);
+            return this;
+        },
+        hide() {
+            this.element.classList.add(`${component.getClass("bottom-app-bar")}--hidden`);
+            const changed = isVisible;
+            isVisible = false;
+            if (changed)
+                componentConfig.onVisibilityChange?.(false);
+            return this;
+        },
+        isVisible() {
+            return isVisible;
+        },
+        getActionsContainer() {
+            return actionsContainer;
+        },
+    };
+    if (componentConfig.autoHide && componentConfig.transitionDuration) {
+        bottomBar.element.style.transition = `transform ${componentConfig.transitionDuration}ms ease-in-out`;
+    }
+    return bottomBar;
+};

package/dist/components/bottom-app-bar/config.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @module components/bottom-app-bar
+ * @description Configuration for bottom app bar component
+ */
+import { BottomAppBarConfig } from "./types.js";
+/**
+ * Default configuration for bottom app bar
+ */
+export declare const defaultConfig: Partial<BottomAppBarConfig>;
+/**
+ * Creates the configuration for a bottom app bar component
+ *
+ * @param {BottomAppBarConfig} config - User provided configuration
+ * @returns {BottomAppBarConfig} Complete configuration with defaults applied
+ */
+export declare const createConfig: (config?: BottomAppBarConfig) => BottomAppBarConfig;

package/dist/components/bottom-app-bar/config.js

@@ -0,0 +1,10 @@
+import { createComponentConfig } from "../../core/config/component.js";
+import { FAB_POSITIONS, DEFAULT_TRANSITION_DURATION } from "./constants.js";
+export const defaultConfig = {
+    tag: "div",
+    hasFab: false,
+    fabPosition: FAB_POSITIONS.END,
+    autoHide: false,
+    transitionDuration: DEFAULT_TRANSITION_DURATION,
+};
+export const createConfig = (config = {}) => createComponentConfig(defaultConfig, config, "bottom-app-bar");

package/dist/components/bottom-app-bar/constants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * FAB position constants for Bottom App Bar
+ */
+export declare const FAB_POSITIONS: {
+    readonly CENTER: "center";
+    readonly END: "end";
+};
+/**
+ * Default transition duration for show/hide animations
+ */
+export declare const DEFAULT_TRANSITION_DURATION = 300;
+/**
+ * CSS class names used in the bottom app bar component
+ */
+export declare const BOTTOM_APP_BAR_CLASSES: {
+    readonly ROOT: "bottom-app-bar";
+    readonly ACTIONS: "bottom-app-bar__actions";
+    readonly FAB_CONTAINER: "bottom-app-bar__fab-container";
+    readonly HIDDEN: "bottom-app-bar--hidden";
+    readonly FAB_CENTER: "bottom-app-bar--fab-center";
+    readonly FAB_END: "bottom-app-bar--fab-end";
+};

package/dist/components/bottom-app-bar/constants.js

@@ -0,0 +1,13 @@
+export const FAB_POSITIONS = {
+    CENTER: 'center',
+    END: 'end'
+};
+export const DEFAULT_TRANSITION_DURATION = 300;
+export const BOTTOM_APP_BAR_CLASSES = {
+    ROOT: 'bottom-app-bar',
+    ACTIONS: 'bottom-app-bar__actions',
+    FAB_CONTAINER: 'bottom-app-bar__fab-container',
+    HIDDEN: 'bottom-app-bar--hidden',
+    FAB_CENTER: 'bottom-app-bar--fab-center',
+    FAB_END: 'bottom-app-bar--fab-end'
+};