mithril-materialized 3.8.0 → 3.10.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.
  *
@@ -10831,6 +10931,182 @@ const ToggleGroup = () => {
     };
 };
 
+/** 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
@@ -10852,4 +11128,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, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, 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.
  *
@@ -10833,6 +10933,182 @@ const ToggleGroup = () => {
     };
 };
 
+/** 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
@@ -10857,6 +11133,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;
@@ -10864,6 +11141,7 @@ exports.ButtonFactory = ButtonFactory;
 exports.Carousel = Carousel;
 exports.CharacterCounter = CharacterCounter;
 exports.Chips = Chips;
+exports.CircularProgress = CircularProgress;
 exports.CodeBlock = CodeBlock;
 exports.Collapsible = Collapsible;
 exports.CollapsibleItem = CollapsibleItem;
@@ -10886,6 +11164,7 @@ exports.ImageList = ImageList;
 exports.InputCheckbox = InputCheckbox;
 exports.Label = Label;
 exports.LargeButton = LargeButton;
+exports.LinearProgress = LinearProgress;
 exports.ListItem = ListItem;
 exports.Mandatory = Mandatory;
 exports.Masonry = Masonry;