mithril-materialized 3.8.0 → 3.10.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.
      *
@@ -10835,6 +10935,182 @@
         };
     };
 
+    /** Size dimensions in pixels */
+    const SIZE_MAP = {
+        small: 36,
+        medium: 50,
+        large: 64,
+    };
+    /** Stroke width in pixels */
+    const STROKE_WIDTH = 3;
+    /** Create a CircularProgress component */
+    const CircularProgress = () => {
+        const state = {
+            id: uniqueId(),
+        };
+        /**
+         * Calculate SVG stroke properties for determinate progress
+         */
+        const calculateStrokeProperties = (size, value, max) => {
+            const radius = (size - STROKE_WIDTH) / 2;
+            const circumference = 2 * Math.PI * radius;
+            const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+            const strokeDashoffset = circumference - (percentage / 100) * circumference;
+            return {
+                radius,
+                circumference,
+                strokeDashoffset,
+                percentage,
+            };
+        };
+        /**
+         * Get size class name
+         */
+        const getSizeClass = (size = 'medium') => {
+            return `circular-progress--${size}`;
+        };
+        /**
+         * Get color class name
+         */
+        const getColorClass = (color, intensity) => {
+            if (!color)
+                return '';
+            return intensity ? `circular-progress--${color} circular-progress--${intensity}` : `circular-progress--${color}`;
+        };
+        return {
+            view: ({ attrs }) => {
+                const { mode = 'indeterminate', value = 0, max = 100, size = 'medium', color = 'teal', colorIntensity, label, showPercentage = false, className = '', style = {}, id = state.id, 'aria-label': ariaLabel, 'aria-valuemin': ariaValueMin = 0, 'aria-valuemax': ariaValueMax = max, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText } = attrs, params = __rest(attrs, ["mode", "value", "max", "size", "color", "colorIntensity", "label", "showPercentage", "className", "style", "id", 'aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-valuetext']);
+                const isDeterminate = mode === 'determinate';
+                const sizePixels = SIZE_MAP[size];
+                const { radius, circumference, strokeDashoffset, percentage } = isDeterminate
+                    ? calculateStrokeProperties(sizePixels, value, max)
+                    : { radius: 0, circumference: 0, strokeDashoffset: 0, percentage: 0 };
+                // Determine label content
+                const labelContent = label !== undefined ? label : showPercentage && isDeterminate ? `${Math.round(percentage)}%` : '';
+                // Build class names
+                const classNames = [
+                    'circular-progress',
+                    getSizeClass(size),
+                    getColorClass(color, colorIntensity),
+                    `circular-progress--${mode}`,
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                // ARIA attributes
+                const ariaAttrs = isDeterminate
+                    ? {
+                        'aria-valuenow': ariaValueNow !== undefined ? ariaValueNow : value,
+                        'aria-valuemin': ariaValueMin,
+                        'aria-valuemax': ariaValueMax,
+                        'aria-valuetext': ariaValueText || `${Math.round(percentage)}%`,
+                    }
+                    : {
+                        'aria-valuetext': ariaValueText || label || 'Loading',
+                    };
+                return m('.circular-progress', Object.assign(Object.assign(Object.assign({}, params), { className: classNames, style: Object.assign({ width: `${sizePixels}px`, height: `${sizePixels}px` }, style), id, role: 'progressbar', 'aria-label': ariaLabel || (isDeterminate ? `Progress: ${Math.round(percentage)}%` : 'Loading') }), ariaAttrs), [
+                    // SVG circle
+                    m('svg.circular-progress__svg', {
+                        viewBox: `0 0 ${sizePixels} ${sizePixels}`,
+                        xmlns: 'http://www.w3.org/2000/svg',
+                    }, [
+                        // Background track circle
+                        m('circle.circular-progress__circle.circular-progress__circle--track', {
+                            cx: sizePixels / 2,
+                            cy: sizePixels / 2,
+                            r: radius || (sizePixels - STROKE_WIDTH) / 2,
+                            fill: 'none',
+                            stroke: 'currentColor',
+                            'stroke-width': STROKE_WIDTH,
+                        }),
+                        // Progress indicator circle
+                        m('circle.circular-progress__circle.circular-progress__circle--indicator', {
+                            cx: sizePixels / 2,
+                            cy: sizePixels / 2,
+                            r: radius || (sizePixels - STROKE_WIDTH) / 2,
+                            fill: 'none',
+                            stroke: 'currentColor',
+                            'stroke-width': STROKE_WIDTH,
+                            'stroke-dasharray': isDeterminate ? circumference : undefined,
+                            'stroke-dashoffset': isDeterminate ? strokeDashoffset : undefined,
+                            'stroke-linecap': 'round',
+                        }),
+                    ]),
+                    // Label inside circle
+                    labelContent &&
+                        m('.circular-progress__label', {
+                            'aria-hidden': 'true',
+                        }, labelContent),
+                ]);
+            },
+        };
+    };
+
+    /** Create a LinearProgress component */
+    const LinearProgress = () => {
+        const state = {
+            id: uniqueId(),
+        };
+        /**
+         * Get size class name
+         */
+        const getSizeClass = (size = 'medium') => {
+            return `linear-progress__track--${size}`;
+        };
+        /**
+         * Get color class name
+         */
+        const getColorClass = (color, intensity) => {
+            if (!color)
+                return '';
+            return intensity ? `linear-progress--${color} linear-progress--${intensity}` : `linear-progress--${color}`;
+        };
+        return {
+            view: ({ attrs }) => {
+                const { mode = 'indeterminate', value = 0, max = 100, size = 'medium', color = 'teal', colorIntensity, label, showPercentage = false, className = '', style = {}, id = state.id, 'aria-label': ariaLabel, 'aria-valuemin': ariaValueMin = 0, 'aria-valuemax': ariaValueMax = max, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText } = attrs, params = __rest(attrs, ["mode", "value", "max", "size", "color", "colorIntensity", "label", "showPercentage", "className", "style", "id", 'aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-valuetext']);
+                const isDeterminate = mode === 'determinate';
+                const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+                // Determine label content
+                const labelContent = label !== undefined ? label : showPercentage && isDeterminate ? `${Math.round(percentage)}%` : '';
+                // Build class names
+                const classNames = [
+                    'linear-progress',
+                    getColorClass(color, colorIntensity),
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                // ARIA attributes
+                const ariaAttrs = isDeterminate
+                    ? {
+                        'aria-valuenow': ariaValueNow !== undefined ? ariaValueNow : value,
+                        'aria-valuemin': ariaValueMin,
+                        'aria-valuemax': ariaValueMax,
+                        'aria-valuetext': ariaValueText || `${Math.round(percentage)}%`,
+                    }
+                    : {
+                        'aria-valuetext': ariaValueText || label || 'Loading',
+                    };
+                return m('.linear-progress', Object.assign(Object.assign({}, params), { className: classNames, style,
+                    id }), [
+                    // Progress track container
+                    m('.linear-progress__track', Object.assign({ className: `linear-progress__track ${getSizeClass(size)}`, role: 'progressbar', 'aria-label': ariaLabel || (isDeterminate ? `Progress: ${Math.round(percentage)}%` : 'Loading') }, ariaAttrs), [
+                        // Progress bar
+                        m('.linear-progress__bar', {
+                            className: `linear-progress__bar ${isDeterminate ? '' : 'linear-progress__bar--indeterminate'}`,
+                            style: isDeterminate ? { width: `${percentage}%` } : undefined,
+                        }),
+                    ]),
+                    // Label at the end (right side)
+                    labelContent &&
+                        m('.linear-progress__label', {
+                            'aria-hidden': 'true',
+                        }, labelContent),
+                ]);
+            },
+        };
+    };
+
     /**
      * @fileoverview Core TypeScript utility types for mithril-materialized library
      * These types improve type safety and developer experience across all components
@@ -10859,6 +11135,7 @@
     exports.AnalogClock = AnalogClock;
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
+    exports.Badge = Badge;
     exports.Breadcrumb = Breadcrumb;
     exports.BreadcrumbManager = BreadcrumbManager;
     exports.Button = Button;
@@ -10866,6 +11143,7 @@
     exports.Carousel = Carousel;
     exports.CharacterCounter = CharacterCounter;
     exports.Chips = Chips;
+    exports.CircularProgress = CircularProgress;
     exports.CodeBlock = CodeBlock;
     exports.Collapsible = Collapsible;
     exports.CollapsibleItem = CollapsibleItem;
@@ -10888,6 +11166,7 @@
     exports.InputCheckbox = InputCheckbox;
     exports.Label = Label;
     exports.LargeButton = LargeButton;
+    exports.LinearProgress = LinearProgress;
     exports.ListItem = ListItem;
     exports.Mandatory = Mandatory;
     exports.Masonry = Masonry;

package/dist/linear-progress.d.ts

@@ -0,0 +1,40 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { MaterialColor, ColorIntensity } from './types';
+import { ProgressMode, ProgressSize } from './circular-progress';
+/** LinearProgress component attributes */
+export interface LinearProgressAttrs extends Attributes {
+    /** Progress mode (default: 'indeterminate') */
+    mode?: ProgressMode;
+    /** Current progress value (0-100) for determinate mode */
+    value?: number;
+    /** Maximum progress value (default: 100) */
+    max?: number;
+    /** Size variant (default: 'medium') */
+    size?: ProgressSize;
+    /** Materialize color (default: 'teal') */
+    color?: MaterialColor;
+    /** Color intensity modifier */
+    colorIntensity?: ColorIntensity;
+    /** Label to display at the end (right side) */
+    label?: string | number;
+    /** Auto-show percentage at the end for determinate mode (default: false) */
+    showPercentage?: boolean;
+    /** Additional CSS class names */
+    className?: string;
+    /** Additional CSS styles */
+    style?: any;
+    /** HTML ID for the component */
+    id?: string;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** ARIA valuemin (default: 0) */
+    'aria-valuemin'?: number;
+    /** ARIA valuemax (default: 100) */
+    'aria-valuemax'?: number;
+    /** ARIA valuenow (current value) */
+    'aria-valuenow'?: number;
+    /** ARIA valuetext (custom text description) */
+    'aria-valuetext'?: string;
+}
+/** Create a LinearProgress component */
+export declare const LinearProgress: FactoryComponent<LinearProgressAttrs>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.8.0",
+  "version": "3.10.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;
+  }
+}