mithril-materialized 3.9.0 → 3.11.0

package/dist/index.umd.js

@@ -509,6 +509,106 @@
         };
     };
 
+    /**
+     * 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.
      *
@@ -8193,33 +8293,75 @@
         _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';
@@ -8243,17 +8385,34 @@
             }
             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) {
@@ -8282,8 +8441,10 @@
         inDuration: 300,
         outDuration: 375,
         classes: '',
+        className: '',
         completeCallback: undefined,
         activationPercent: 0.8,
+        action: undefined,
     };
     Toast._onDragStart = (e) => {
         const target = e.target;
@@ -11035,6 +11196,7 @@
     exports.AnalogClock = AnalogClock;
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
+    exports.Badge = Badge;
     exports.Breadcrumb = Breadcrumb;
     exports.BreadcrumbManager = BreadcrumbManager;
     exports.Button = Button;

package/dist/toast.d.ts

@@ -1,4 +1,14 @@
 import { FactoryComponent } from 'mithril';
+export interface ToastAction {
+    /** Icon name for the action button */
+    icon?: string;
+    /** Text label for the action button (if no icon provided) */
+    label?: string;
+    /** Callback function called when action is clicked */
+    onclick: () => void;
+    /** Whether to use flat button style (default) or icon button style */
+    variant?: 'flat' | 'icon';
+}
 export interface ToastOptions {
     /** HTML content for the toast */
     html?: string;
@@ -8,12 +18,19 @@ export interface ToastOptions {
     inDuration?: number;
     /** Animation out duration in milliseconds */
     outDuration?: number;
-    /** Additional CSS classes */
+    /**
+     * Additional CSS classes
+     * @deprecated Use className instead. This property will be removed in a future version.
+     */
     classes?: string;
+    /** Additional CSS classes (preferred over deprecated 'classes' property) */
+    className?: string;
     /** Callback function called when toast is dismissed */
     completeCallback?: () => void;
     /** Activation percentage for swipe dismissal */
     activationPercent?: number;
+    /** Optional action button (for simple confirmations or undo actions) */
+    action?: ToastAction;
 }
 export declare class Toast {
     el: HTMLElement;

package/dist/utilities.css

@@ -3155,6 +3155,7 @@ td, th {
   align-items: center;
   justify-content: space-between;
   cursor: default;
+  transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), margin-top 300ms cubic-bezier(0.215, 0.61, 0.355, 1), max-height 300ms cubic-bezier(0.215, 0.61, 0.355, 1), padding-top 300ms cubic-bezier(0.215, 0.61, 0.355, 1), padding-bottom 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 .toast .toast-action {
   color: #eeff41;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.9.0",
+  "version": "3.11.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/sass/components/_badge-component.scss

@@ -0,0 +1,203 @@
+@use 'sass:color';
+@use "variables";
+@use "color-variables";
+
+/* Badge Component
+   ========================================================================== */
+
+// Badge component variables
+$badge-size-standard: 20px !default;
+$badge-size-dot: 8px !default;
+$badge-font-size: 12px !default;
+$badge-font-weight: 500 !default;
+$badge-default-color: color-variables.color("red", "base") !default;
+$badge-text-color: #fff !default;
+$badge-border-radius: 10px !default;
+$badge-dot-border-radius: 50% !default;
+
+// Wrapper - relative positioning container
+.badge-wrapper {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+// Badge element - using .m-badge to avoid conflicts with Materialize's span.badge
+.m-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-family: Roboto, sans-serif;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  border-radius: $badge-border-radius;
+  background-color: $badge-default-color;
+  color: $badge-text-color;
+  z-index: 1;
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  // Standard variant (shows content)
+  &.m-badge--standard {
+    min-width: $badge-size-standard;
+    height: $badge-size-standard;
+    padding: 0 6px;
+    font-size: $badge-font-size;
+  }
+
+  // Dot variant (minimal indicator)
+  &.m-badge--dot {
+    width: $badge-size-dot;
+    height: $badge-size-dot;
+    min-width: $badge-size-dot;
+    padding: 0;
+    border-radius: $badge-dot-border-radius;
+  }
+
+  // Invisible state
+  &.m-badge--invisible {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  // === POSITIONING: Top-Right (default) ===
+  &.m-badge--top-right {
+    top: 0;
+    right: 0;
+    transform: scale(1) translate(50%, -50%);
+    transform-origin: 100% 0%;
+
+    &.m-badge--rectangular {
+      transform: scale(1) translate(50%, -50%);
+    }
+
+    &.m-badge--circular {
+      transform: scale(1) translate(30%, -30%);
+    }
+
+    &.m-badge--invisible {
+      transform: scale(0) translate(50%, -50%);
+    }
+  }
+
+  // === POSITIONING: Top-Left ===
+  &.m-badge--top-left {
+    top: 0;
+    left: 0;
+    transform: scale(1) translate(-50%, -50%);
+    transform-origin: 0% 0%;
+
+    &.m-badge--rectangular {
+      transform: scale(1) translate(-50%, -50%);
+    }
+
+    &.m-badge--circular {
+      transform: scale(1) translate(-30%, -30%);
+    }
+
+    &.m-badge--invisible {
+      transform: scale(0) translate(-50%, -50%);
+    }
+  }
+
+  // === POSITIONING: Bottom-Right ===
+  &.m-badge--bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: scale(1) translate(50%, 50%);
+    transform-origin: 100% 100%;
+
+    &.m-badge--rectangular {
+      transform: scale(1) translate(50%, 50%);
+    }
+
+    &.m-badge--circular {
+      transform: scale(1) translate(30%, 30%);
+    }
+
+    &.m-badge--invisible {
+      transform: scale(0) translate(50%, 50%);
+    }
+  }
+
+  // === POSITIONING: Bottom-Left ===
+  &.m-badge--bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: scale(1) translate(-50%, 50%);
+    transform-origin: 0% 100%;
+
+    &.m-badge--rectangular {
+      transform: scale(1) translate(-50%, 50%);
+    }
+
+    &.m-badge--circular {
+      transform: scale(1) translate(-30%, 30%);
+    }
+
+    &.m-badge--invisible {
+      transform: scale(0) translate(-50%, 50%);
+    }
+  }
+}
+
+// === COLOR VARIANTS ===
+// Generate color classes for all MaterialColor options
+.m-badge--red { background-color: color-variables.color("red", "base"); }
+.m-badge--pink { background-color: color-variables.color("pink", "base"); }
+.m-badge--purple { background-color: color-variables.color("purple", "base"); }
+.m-badge--deep-purple { background-color: color-variables.color("deep-purple", "base"); }
+.m-badge--indigo { background-color: color-variables.color("indigo", "base"); }
+.m-badge--blue { background-color: color-variables.color("blue", "base"); }
+.m-badge--light-blue { background-color: color-variables.color("light-blue", "base"); }
+.m-badge--cyan { background-color: color-variables.color("cyan", "base"); }
+.m-badge--teal { background-color: color-variables.color("teal", "base"); }
+.m-badge--green { background-color: color-variables.color("green", "base"); }
+.m-badge--light-green { background-color: color-variables.color("light-green", "base"); }
+.m-badge--lime { background-color: color-variables.color("lime", "base"); }
+.m-badge--yellow {
+  background-color: color-variables.color("yellow", "base");
+  color: #000; // Dark text for light background
+}
+.m-badge--amber { background-color: color-variables.color("amber", "base"); }
+.m-badge--orange { background-color: color-variables.color("orange", "base"); }
+.m-badge--deep-orange { background-color: color-variables.color("deep-orange", "base"); }
+.m-badge--brown { background-color: color-variables.color("brown", "base"); }
+.m-badge--grey { background-color: color-variables.color("grey", "base"); }
+.m-badge--blue-grey { background-color: color-variables.color("blue-grey", "base"); }
+
+// === COLOR INTENSITY MODIFIERS ===
+// Use CSS filters for intensity adjustments (matching CircularProgress pattern)
+.m-badge--lighten-5 { filter: brightness(1.4); }
+.m-badge--lighten-4 { filter: brightness(1.3); }
+.m-badge--lighten-3 { filter: brightness(1.2); }
+.m-badge--lighten-2 { filter: brightness(1.1); }
+.m-badge--lighten-1 { filter: brightness(1.05); }
+.m-badge--darken-1 { filter: brightness(0.95); }
+.m-badge--darken-2 { filter: brightness(0.9); }
+.m-badge--darken-3 { filter: brightness(0.8); }
+.m-badge--darken-4 { filter: brightness(0.7); }
+
+// === ACCESSIBILITY ===
+// Ensure badge is not announced multiple times by screen readers
+.m-badge[role="status"] {
+  // Screen reader will announce changes due to aria-live="polite"
+}
+
+// === REDUCED MOTION ===
+@media (prefers-reduced-motion: reduce) {
+  .m-badge {
+    transition: none;
+  }
+}
+
+// === HIGH CONTRAST MODE ===
+@media (prefers-contrast: high) {
+  .m-badge {
+    border: 2px solid currentColor;
+  }
+}

package/sass/components/_toast.scss

@@ -43,6 +43,14 @@
   justify-content: space-between;
   cursor: default;
 
+  // Smooth transitions for position changes when toasts are added/removed
+  transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
+              opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
+              margin-top 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
+              max-height 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
+              padding-top 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
+              padding-bottom 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+
   .toast-action {
     color: variables.$toast-action-color;
     font-weight: 500;

package/sass/materialize.scss

@@ -56,3 +56,5 @@
 @use 'components/toggle-group';
 @use 'components/circular-progress';
 @use 'components/linear-progress';
+@use 'components/badge-component';
+