mithril-materialized 3.9.0 → 3.11.0

package/dist/index.esm.js

@@ -505,6 +505,106 @@ const Autocomplete = () => {
     };
 };
 
+/**
+ * Badge component
+ *
+ * Displays a badge anchored to a child element. Commonly used for notifications,
+ * counts, or status indicators. Supports flexible positioning, colors, and variants.
+ *
+ * @example
+ * ```typescript
+ * // Basic notification badge
+ * m(Badge, { badgeContent: 5 },
+ *   m('button.btn', 'Messages')
+ * )
+ *
+ * // Dot badge on avatar
+ * m(Badge, {
+ *   variant: 'dot',
+ *   color: 'green',
+ *   overlap: 'circular'
+ * },
+ *   m('img.circle', { src: 'avatar.jpg' })
+ * )
+ * ```
+ */
+const Badge = () => {
+    return {
+        view: ({ attrs, children }) => {
+            const { badgeContent, max, anchorOrigin = { vertical: 'top', horizontal: 'right' }, overlap = 'rectangular', variant = 'standard', color = 'red', colorIntensity, invisible = false, showZero = false, 'aria-label': ariaLabel, badgeClassName = '', className = '' } = attrs, params = __rest(attrs, ["badgeContent", "max", "anchorOrigin", "overlap", "variant", "color", "colorIntensity", "invisible", "showZero", 'aria-label', "badgeClassName", "className"]);
+            // === VALIDATION: Single child element ===
+            const childArray = Array.isArray(children) ? children : children ? [children] : [];
+            if (childArray.length === 0) {
+                console.warn('Badge component requires a child element');
+                return null;
+            }
+            if (childArray.length > 1) {
+                console.warn('Badge component should only wrap a single child element. Using first child only.');
+            }
+            const child = childArray[0];
+            // === VISIBILITY LOGIC ===
+            // Hide badge if:
+            // 1. invisible prop is true, OR
+            // 2. For standard variant: badgeContent is undefined/null OR (badgeContent is 0 AND !showZero)
+            const shouldHideBadge = invisible ||
+                (variant === 'standard' &&
+                    (badgeContent === undefined ||
+                        badgeContent === null ||
+                        (badgeContent === 0 && !showZero)));
+            // === BADGE CONTENT FORMATTING ===
+            // Apply max capping: if badgeContent > max, show "max+"
+            const getDisplayContent = () => {
+                if (variant === 'dot')
+                    return '';
+                if (typeof badgeContent === 'number' && max !== undefined && badgeContent > max) {
+                    return `${max}+`;
+                }
+                return String(badgeContent !== null && badgeContent !== void 0 ? badgeContent : '');
+            };
+            const displayContent = getDisplayContent();
+            // === CSS CLASS ASSEMBLY ===
+            // Wrapper classes
+            const wrapperClasses = ['badge-wrapper', className].filter(Boolean).join(' ').trim() || undefined;
+            // Badge element classes - using m-badge prefix to avoid Materialize conflicts
+            const positionClass = `m-badge--${anchorOrigin.vertical}-${anchorOrigin.horizontal}`;
+            const badgeClasses = [
+                'm-badge',
+                `m-badge--${variant}`,
+                positionClass,
+                `m-badge--${overlap}`,
+                `m-badge--${color}`,
+                colorIntensity ? `m-badge--${colorIntensity}` : '',
+                shouldHideBadge ? 'm-badge--invisible' : '',
+                badgeClassName,
+            ]
+                .filter(Boolean)
+                .join(' ')
+                .trim();
+            // === ARIA ATTRIBUTES ===
+            const badgeAriaLabel = ariaLabel ||
+                (variant === 'dot'
+                    ? 'notification indicator'
+                    : displayContent
+                        ? `${displayContent} notifications`
+                        : 'notification badge');
+            // === RENDER ===
+            return m('.badge-wrapper', Object.assign(Object.assign({}, params), { className: wrapperClasses }), [
+                // Child element
+                child,
+                // Badge element - only render if not hidden
+                !shouldHideBadge
+                    ? m('span', {
+                        className: badgeClasses,
+                        'aria-label': badgeAriaLabel,
+                        role: 'status',
+                        'aria-live': 'polite',
+                    }, variant === 'standard' ? displayContent : null)
+                    : null,
+            ]);
+        },
+    };
+};
+
 /**
  * A simple material icon, defined by its icon name.
  *
@@ -8189,33 +8289,75 @@ class Toast {
     _createToast() {
         const toast = document.createElement('div');
         toast.classList.add('toast');
-        // Add custom classes
-        if (this.options.classes) {
-            toast.classList.add(...this.options.classes.split(' '));
-        }
-        // Set content
+        // Add custom classes (prefer className over deprecated classes)
+        const customClasses = this.options.className || this.options.classes;
+        if (customClasses) {
+            toast.classList.add(...customClasses.split(' ').filter((c) => c));
+        }
+        // Create content wrapper
+        const contentWrapper = document.createElement('div');
+        contentWrapper.style.cssText = 'display: flex; align-items: center; gap: 12px;';
+        // Set message content
+        const messageEl = document.createElement('div');
+        messageEl.style.flex = '1';
         const message = this.options.html;
         if (typeof message === 'object' && message && 'nodeType' in message) {
-            toast.appendChild(message);
+            messageEl.appendChild(message);
         }
         else {
-            toast.innerHTML = message;
+            messageEl.innerHTML = message;
+        }
+        contentWrapper.appendChild(messageEl);
+        // Add action button if provided
+        if (this.options.action) {
+            const action = this.options.action;
+            const actionBtn = document.createElement('button');
+            actionBtn.className = 'btn-flat toast-action';
+            actionBtn.style.cssText = 'margin: 0; padding: 0 8px; min-width: auto; height: 36px;';
+            if (action.variant === 'icon' && action.icon) {
+                // Icon button variant
+                actionBtn.innerHTML = `<i class="material-icons">${action.icon}</i>`;
+                actionBtn.setAttribute('aria-label', action.label || action.icon);
+            }
+            else {
+                // Flat button variant (default)
+                if (action.icon) {
+                    actionBtn.innerHTML = `<i class="material-icons left">${action.icon}</i>${action.label || ''}`;
+                }
+                else {
+                    actionBtn.textContent = action.label || '';
+                }
+            }
+            actionBtn.onclick = (e) => {
+                e.stopPropagation();
+                action.onclick();
+                this.dismiss();
+            };
+            contentWrapper.appendChild(actionBtn);
         }
+        toast.appendChild(contentWrapper);
         // Store reference
         toast.M_Toast = this;
+        // Measure natural width BEFORE appending to avoid interference from other toasts
+        // Temporarily append to body in an isolated position
+        toast.style.cssText = 'position: absolute; visibility: hidden; left: -9999px; display: flex;';
+        document.body.appendChild(toast);
+        // Force layout and measure
+        const naturalWidth = toast.offsetWidth;
+        // Remove from body
+        document.body.removeChild(toast);
+        // Lock the width to prevent changes based on other toasts
+        toast.style.cssText = `width: ${naturalWidth}px;`;
         // Append to container
         Toast._container.appendChild(toast);
         return toast;
     }
     _animateIn() {
-        // Simple CSS animation since we don't have anime.js
-        this.el.style.cssText = `
-      transform: translateY(35px);
-      opacity: 0;
-      transition: transform ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1),
-                  opacity ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1);
-    `;
-        // Trigger animation
+        // Width is already locked from _createToast
+        // Set initial animation state (transitions are defined in CSS)
+        this.el.style.transform = 'translateY(35px)';
+        this.el.style.opacity = '0';
+        // Trigger animation after a brief delay to ensure styles are applied
         setTimeout(() => {
             this.el.style.transform = 'translateY(0)';
             this.el.style.opacity = '1';
@@ -8239,17 +8381,34 @@ class Toast {
         }
         const activationDistance = this.el.offsetWidth * this.options.activationPercent;
         if (this.state.wasSwiped) {
+            // Override transition temporarily for swipe
             this.el.style.transition = 'transform .05s, opacity .05s';
             this.el.style.transform = `translateX(${activationDistance}px)`;
             this.el.style.opacity = '0';
+            // Reset transition after swipe animation
+            setTimeout(() => {
+                this.el.style.transition = `opacity ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                      max-height ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                      margin-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                      padding-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                      padding-bottom ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1)`;
+            }, 50);
         }
-        // Animate out
-        this.el.style.cssText += `
-      transition: opacity ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
-                  margin-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1);
-      opacity: 0;
-      margin-top: -40px;
-    `;
+        else {
+            // Set collapse transition timing
+            this.el.style.transition = `opacity ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                    max-height ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                    margin-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                    padding-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                    padding-bottom ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1)`;
+        }
+        // Animate out - collapse height smoothly
+        this.el.style.opacity = '0';
+        this.el.style.maxHeight = '0';
+        this.el.style.marginTop = '0';
+        this.el.style.paddingTop = '0';
+        this.el.style.paddingBottom = '0';
+        this.el.style.overflow = 'hidden';
         setTimeout(() => {
             // Call completion callback
             if (this.options.completeCallback) {
@@ -8278,8 +8437,10 @@ Toast.defaults = {
     inDuration: 300,
     outDuration: 375,
     classes: '',
+    className: '',
     completeCallback: undefined,
     activationPercent: 0.8,
+    action: undefined,
 };
 Toast._onDragStart = (e) => {
     const target = e.target;
@@ -11028,4 +11189,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnalogClock, AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CircularProgress, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, LinearProgress, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, TimeRangePicker, Timeline, Toast, ToastComponent, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };
+export { AnalogClock, AnchorItem, Autocomplete, Badge, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CircularProgress, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, LinearProgress, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, TimeRangePicker, Timeline, Toast, ToastComponent, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };

package/dist/index.js

@@ -507,6 +507,106 @@ const Autocomplete = () => {
     };
 };
 
+/**
+ * Badge component
+ *
+ * Displays a badge anchored to a child element. Commonly used for notifications,
+ * counts, or status indicators. Supports flexible positioning, colors, and variants.
+ *
+ * @example
+ * ```typescript
+ * // Basic notification badge
+ * m(Badge, { badgeContent: 5 },
+ *   m('button.btn', 'Messages')
+ * )
+ *
+ * // Dot badge on avatar
+ * m(Badge, {
+ *   variant: 'dot',
+ *   color: 'green',
+ *   overlap: 'circular'
+ * },
+ *   m('img.circle', { src: 'avatar.jpg' })
+ * )
+ * ```
+ */
+const Badge = () => {
+    return {
+        view: ({ attrs, children }) => {
+            const { badgeContent, max, anchorOrigin = { vertical: 'top', horizontal: 'right' }, overlap = 'rectangular', variant = 'standard', color = 'red', colorIntensity, invisible = false, showZero = false, 'aria-label': ariaLabel, badgeClassName = '', className = '' } = attrs, params = __rest(attrs, ["badgeContent", "max", "anchorOrigin", "overlap", "variant", "color", "colorIntensity", "invisible", "showZero", 'aria-label', "badgeClassName", "className"]);
+            // === VALIDATION: Single child element ===
+            const childArray = Array.isArray(children) ? children : children ? [children] : [];
+            if (childArray.length === 0) {
+                console.warn('Badge component requires a child element');
+                return null;
+            }
+            if (childArray.length > 1) {
+                console.warn('Badge component should only wrap a single child element. Using first child only.');
+            }
+            const child = childArray[0];
+            // === VISIBILITY LOGIC ===
+            // Hide badge if:
+            // 1. invisible prop is true, OR
+            // 2. For standard variant: badgeContent is undefined/null OR (badgeContent is 0 AND !showZero)
+            const shouldHideBadge = invisible ||
+                (variant === 'standard' &&
+                    (badgeContent === undefined ||
+                        badgeContent === null ||
+                        (badgeContent === 0 && !showZero)));
+            // === BADGE CONTENT FORMATTING ===
+            // Apply max capping: if badgeContent > max, show "max+"
+            const getDisplayContent = () => {
+                if (variant === 'dot')
+                    return '';
+                if (typeof badgeContent === 'number' && max !== undefined && badgeContent > max) {
+                    return `${max}+`;
+                }
+                return String(badgeContent !== null && badgeContent !== void 0 ? badgeContent : '');
+            };
+            const displayContent = getDisplayContent();
+            // === CSS CLASS ASSEMBLY ===
+            // Wrapper classes
+            const wrapperClasses = ['badge-wrapper', className].filter(Boolean).join(' ').trim() || undefined;
+            // Badge element classes - using m-badge prefix to avoid Materialize conflicts
+            const positionClass = `m-badge--${anchorOrigin.vertical}-${anchorOrigin.horizontal}`;
+            const badgeClasses = [
+                'm-badge',
+                `m-badge--${variant}`,
+                positionClass,
+                `m-badge--${overlap}`,
+                `m-badge--${color}`,
+                colorIntensity ? `m-badge--${colorIntensity}` : '',
+                shouldHideBadge ? 'm-badge--invisible' : '',
+                badgeClassName,
+            ]
+                .filter(Boolean)
+                .join(' ')
+                .trim();
+            // === ARIA ATTRIBUTES ===
+            const badgeAriaLabel = ariaLabel ||
+                (variant === 'dot'
+                    ? 'notification indicator'
+                    : displayContent
+                        ? `${displayContent} notifications`
+                        : 'notification badge');
+            // === RENDER ===
+            return m('.badge-wrapper', Object.assign(Object.assign({}, params), { className: wrapperClasses }), [
+                // Child element
+                child,
+                // Badge element - only render if not hidden
+                !shouldHideBadge
+                    ? m('span', {
+                        className: badgeClasses,
+                        'aria-label': badgeAriaLabel,
+                        role: 'status',
+                        'aria-live': 'polite',
+                    }, variant === 'standard' ? displayContent : null)
+                    : null,
+            ]);
+        },
+    };
+};
+
 /**
  * A simple material icon, defined by its icon name.
  *
@@ -8191,33 +8291,75 @@ class Toast {
     _createToast() {
         const toast = document.createElement('div');
         toast.classList.add('toast');
-        // Add custom classes
-        if (this.options.classes) {
-            toast.classList.add(...this.options.classes.split(' '));
-        }
-        // Set content
+        // Add custom classes (prefer className over deprecated classes)
+        const customClasses = this.options.className || this.options.classes;
+        if (customClasses) {
+            toast.classList.add(...customClasses.split(' ').filter((c) => c));
+        }
+        // Create content wrapper
+        const contentWrapper = document.createElement('div');
+        contentWrapper.style.cssText = 'display: flex; align-items: center; gap: 12px;';
+        // Set message content
+        const messageEl = document.createElement('div');
+        messageEl.style.flex = '1';
         const message = this.options.html;
         if (typeof message === 'object' && message && 'nodeType' in message) {
-            toast.appendChild(message);
+            messageEl.appendChild(message);
         }
         else {
-            toast.innerHTML = message;
+            messageEl.innerHTML = message;
+        }
+        contentWrapper.appendChild(messageEl);
+        // Add action button if provided
+        if (this.options.action) {
+            const action = this.options.action;
+            const actionBtn = document.createElement('button');
+            actionBtn.className = 'btn-flat toast-action';
+            actionBtn.style.cssText = 'margin: 0; padding: 0 8px; min-width: auto; height: 36px;';
+            if (action.variant === 'icon' && action.icon) {
+                // Icon button variant
+                actionBtn.innerHTML = `<i class="material-icons">${action.icon}</i>`;
+                actionBtn.setAttribute('aria-label', action.label || action.icon);
+            }
+            else {
+                // Flat button variant (default)
+                if (action.icon) {
+                    actionBtn.innerHTML = `<i class="material-icons left">${action.icon}</i>${action.label || ''}`;
+                }
+                else {
+                    actionBtn.textContent = action.label || '';
+                }
+            }
+            actionBtn.onclick = (e) => {
+                e.stopPropagation();
+                action.onclick();
+                this.dismiss();
+            };
+            contentWrapper.appendChild(actionBtn);
         }
+        toast.appendChild(contentWrapper);
         // Store reference
         toast.M_Toast = this;
+        // Measure natural width BEFORE appending to avoid interference from other toasts
+        // Temporarily append to body in an isolated position
+        toast.style.cssText = 'position: absolute; visibility: hidden; left: -9999px; display: flex;';
+        document.body.appendChild(toast);
+        // Force layout and measure
+        const naturalWidth = toast.offsetWidth;
+        // Remove from body
+        document.body.removeChild(toast);
+        // Lock the width to prevent changes based on other toasts
+        toast.style.cssText = `width: ${naturalWidth}px;`;
         // Append to container
         Toast._container.appendChild(toast);
         return toast;
     }
     _animateIn() {
-        // Simple CSS animation since we don't have anime.js
-        this.el.style.cssText = `
-      transform: translateY(35px);
-      opacity: 0;
-      transition: transform ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1),
-                  opacity ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1);
-    `;
-        // Trigger animation
+        // Width is already locked from _createToast
+        // Set initial animation state (transitions are defined in CSS)
+        this.el.style.transform = 'translateY(35px)';
+        this.el.style.opacity = '0';
+        // Trigger animation after a brief delay to ensure styles are applied
         setTimeout(() => {
             this.el.style.transform = 'translateY(0)';
             this.el.style.opacity = '1';
@@ -8241,17 +8383,34 @@ class Toast {
         }
         const activationDistance = this.el.offsetWidth * this.options.activationPercent;
         if (this.state.wasSwiped) {
+            // Override transition temporarily for swipe
             this.el.style.transition = 'transform .05s, opacity .05s';
             this.el.style.transform = `translateX(${activationDistance}px)`;
             this.el.style.opacity = '0';
+            // Reset transition after swipe animation
+            setTimeout(() => {
+                this.el.style.transition = `opacity ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                      max-height ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                      margin-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                      padding-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                      padding-bottom ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1)`;
+            }, 50);
         }
-        // Animate out
-        this.el.style.cssText += `
-      transition: opacity ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
-                  margin-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1);
-      opacity: 0;
-      margin-top: -40px;
-    `;
+        else {
+            // Set collapse transition timing
+            this.el.style.transition = `opacity ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                    max-height ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                    margin-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                    padding-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                                    padding-bottom ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1)`;
+        }
+        // Animate out - collapse height smoothly
+        this.el.style.opacity = '0';
+        this.el.style.maxHeight = '0';
+        this.el.style.marginTop = '0';
+        this.el.style.paddingTop = '0';
+        this.el.style.paddingBottom = '0';
+        this.el.style.overflow = 'hidden';
         setTimeout(() => {
             // Call completion callback
             if (this.options.completeCallback) {
@@ -8280,8 +8439,10 @@ Toast.defaults = {
     inDuration: 300,
     outDuration: 375,
     classes: '',
+    className: '',
     completeCallback: undefined,
     activationPercent: 0.8,
+    action: undefined,
 };
 Toast._onDragStart = (e) => {
     const target = e.target;
@@ -11033,6 +11194,7 @@ const isValidationError = (result) => !isValidationSuccess(result);
 exports.AnalogClock = AnalogClock;
 exports.AnchorItem = AnchorItem;
 exports.Autocomplete = Autocomplete;
+exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbManager = BreadcrumbManager;
 exports.Button = Button;