mithril-materialized 3.7.0 → 3.9.0

package/dist/index.esm.js

@@ -10711,6 +10711,302 @@ const Rating = () => {
     };
 };
 
+/**
+ * ToggleButton component.
+ *
+ * A button that can be toggled on/off. Typically used within a ToggleGroup
+ * to create grouped button controls where one or more buttons can be selected.
+ *
+ * @example
+ * ```typescript
+ * m(ToggleButton, {
+ *   value: 'bold',
+ *   iconName: 'format_bold',
+ *   checked: true,
+ *   tooltip: 'Bold',
+ *   onchange: () => console.log('Toggled')
+ * })
+ * ```
+ */
+const ToggleButton = () => {
+    return {
+        view: ({ attrs }) => {
+            const { checked, iconName, icon, label, onchange, className, tooltip } = attrs, rest = __rest(attrs, ["checked", "iconName", "icon", "label", "onchange", "className", "tooltip"]);
+            const classes = [className, checked ? 'checked' : ''].filter(Boolean).join(' ');
+            return m('button.btn-flat.waves-effect.toggle-button', Object.assign(Object.assign({}, rest), { className: classes, title: tooltip, onclick: () => {
+                    if (onchange) {
+                        onchange();
+                    }
+                }, onmousedown: WavesEffect.onMouseDown, onmouseup: WavesEffect.onMouseUp, onmouseleave: WavesEffect.onMouseLeave, ontouchstart: WavesEffect.onTouchStart, ontouchend: WavesEffect.onTouchEnd }), [icon, iconName && m(Icon, { iconName, className: attrs.iconClass }), label]);
+        },
+    };
+};
+
+/**
+ * ToggleGroup component.
+ *
+ * A group of toggle buttons that can operate in single-select or multi-select mode.
+ * The component supports both controlled and uncontrolled modes.
+ *
+ * **Controlled mode**: Manage the state externally using the `value` prop.
+ * **Uncontrolled mode**: Let the component manage its own state using `defaultValue`.
+ *
+ * @example
+ * ```typescript
+ * // Single-select, controlled mode
+ * let selected = 'left';
+ * m(ToggleGroup, {
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'left', iconName: 'format_align_left', tooltip: 'Align Left' },
+ *     { value: 'center', iconName: 'format_align_center', tooltip: 'Align Center' },
+ *     { value: 'right', iconName: 'format_align_right', tooltip: 'Align Right' }
+ *   ]
+ * });
+ *
+ * // Multi-select, controlled mode
+ * let selected = ['bold', 'italic'];
+ * m(ToggleGroup, {
+ *   multiple: true,
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'bold', iconName: 'format_bold', tooltip: 'Bold' },
+ *     { value: 'italic', iconName: 'format_italic', tooltip: 'Italic' },
+ *     { value: 'underline', iconName: 'format_underlined', tooltip: 'Underline' }
+ *   ]
+ * });
+ *
+ * // Uncontrolled mode
+ * m(ToggleGroup, {
+ *   defaultValue: 'left',
+ *   onchange: (v) => console.log('Changed to:', v),
+ *   items: [...]
+ * });
+ * ```
+ */
+const ToggleGroup = () => {
+    let internalValue;
+    const handleSelect = (attrs, item, currentValue) => {
+        if (attrs.disabled || item.disabled) {
+            return;
+        }
+        const { value, multiple, onchange } = attrs;
+        const isControlled = value !== undefined;
+        if (multiple) {
+            const currentValues = (Array.isArray(currentValue) ? currentValue : currentValue !== undefined ? [currentValue] : []);
+            const newValues = currentValues.includes(item.value)
+                ? currentValues.filter((v) => v !== item.value)
+                : [...currentValues, item.value];
+            if (!isControlled) {
+                internalValue = newValues;
+            }
+            if (onchange) {
+                onchange(newValues);
+            }
+        }
+        else {
+            const newValue = item.value;
+            if (!isControlled) {
+                internalValue = newValue;
+            }
+            if (onchange) {
+                onchange(newValue);
+            }
+        }
+    };
+    return {
+        oninit: ({ attrs }) => {
+            internalValue = attrs.defaultValue;
+        },
+        view: ({ attrs }) => {
+            const { value, items, multiple } = attrs;
+            const isControlled = value !== undefined;
+            const currentValue = isControlled ? value : internalValue;
+            return m('.toggle-group', items.map((item) => m(ToggleButton, Object.assign(Object.assign({}, item), { checked: multiple && Array.isArray(currentValue)
+                    ? currentValue.includes(item.value)
+                    : currentValue === item.value, onchange: () => handleSelect(attrs, item, currentValue) }))));
+        },
+    };
+};
+
+/** 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
@@ -10732,4 +11028,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, 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, 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

@@ -10713,6 +10713,302 @@ const Rating = () => {
     };
 };
 
+/**
+ * ToggleButton component.
+ *
+ * A button that can be toggled on/off. Typically used within a ToggleGroup
+ * to create grouped button controls where one or more buttons can be selected.
+ *
+ * @example
+ * ```typescript
+ * m(ToggleButton, {
+ *   value: 'bold',
+ *   iconName: 'format_bold',
+ *   checked: true,
+ *   tooltip: 'Bold',
+ *   onchange: () => console.log('Toggled')
+ * })
+ * ```
+ */
+const ToggleButton = () => {
+    return {
+        view: ({ attrs }) => {
+            const { checked, iconName, icon, label, onchange, className, tooltip } = attrs, rest = __rest(attrs, ["checked", "iconName", "icon", "label", "onchange", "className", "tooltip"]);
+            const classes = [className, checked ? 'checked' : ''].filter(Boolean).join(' ');
+            return m('button.btn-flat.waves-effect.toggle-button', Object.assign(Object.assign({}, rest), { className: classes, title: tooltip, onclick: () => {
+                    if (onchange) {
+                        onchange();
+                    }
+                }, onmousedown: WavesEffect.onMouseDown, onmouseup: WavesEffect.onMouseUp, onmouseleave: WavesEffect.onMouseLeave, ontouchstart: WavesEffect.onTouchStart, ontouchend: WavesEffect.onTouchEnd }), [icon, iconName && m(Icon, { iconName, className: attrs.iconClass }), label]);
+        },
+    };
+};
+
+/**
+ * ToggleGroup component.
+ *
+ * A group of toggle buttons that can operate in single-select or multi-select mode.
+ * The component supports both controlled and uncontrolled modes.
+ *
+ * **Controlled mode**: Manage the state externally using the `value` prop.
+ * **Uncontrolled mode**: Let the component manage its own state using `defaultValue`.
+ *
+ * @example
+ * ```typescript
+ * // Single-select, controlled mode
+ * let selected = 'left';
+ * m(ToggleGroup, {
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'left', iconName: 'format_align_left', tooltip: 'Align Left' },
+ *     { value: 'center', iconName: 'format_align_center', tooltip: 'Align Center' },
+ *     { value: 'right', iconName: 'format_align_right', tooltip: 'Align Right' }
+ *   ]
+ * });
+ *
+ * // Multi-select, controlled mode
+ * let selected = ['bold', 'italic'];
+ * m(ToggleGroup, {
+ *   multiple: true,
+ *   value: selected,
+ *   onchange: (v) => selected = v,
+ *   items: [
+ *     { value: 'bold', iconName: 'format_bold', tooltip: 'Bold' },
+ *     { value: 'italic', iconName: 'format_italic', tooltip: 'Italic' },
+ *     { value: 'underline', iconName: 'format_underlined', tooltip: 'Underline' }
+ *   ]
+ * });
+ *
+ * // Uncontrolled mode
+ * m(ToggleGroup, {
+ *   defaultValue: 'left',
+ *   onchange: (v) => console.log('Changed to:', v),
+ *   items: [...]
+ * });
+ * ```
+ */
+const ToggleGroup = () => {
+    let internalValue;
+    const handleSelect = (attrs, item, currentValue) => {
+        if (attrs.disabled || item.disabled) {
+            return;
+        }
+        const { value, multiple, onchange } = attrs;
+        const isControlled = value !== undefined;
+        if (multiple) {
+            const currentValues = (Array.isArray(currentValue) ? currentValue : currentValue !== undefined ? [currentValue] : []);
+            const newValues = currentValues.includes(item.value)
+                ? currentValues.filter((v) => v !== item.value)
+                : [...currentValues, item.value];
+            if (!isControlled) {
+                internalValue = newValues;
+            }
+            if (onchange) {
+                onchange(newValues);
+            }
+        }
+        else {
+            const newValue = item.value;
+            if (!isControlled) {
+                internalValue = newValue;
+            }
+            if (onchange) {
+                onchange(newValue);
+            }
+        }
+    };
+    return {
+        oninit: ({ attrs }) => {
+            internalValue = attrs.defaultValue;
+        },
+        view: ({ attrs }) => {
+            const { value, items, multiple } = attrs;
+            const isControlled = value !== undefined;
+            const currentValue = isControlled ? value : internalValue;
+            return m('.toggle-group', items.map((item) => m(ToggleButton, Object.assign(Object.assign({}, item), { checked: multiple && Array.isArray(currentValue)
+                    ? currentValue.includes(item.value)
+                    : currentValue === item.value, onchange: () => handleSelect(attrs, item, currentValue) }))));
+        },
+    };
+};
+
+/** 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
@@ -10744,6 +11040,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;
@@ -10766,6 +11063,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;
@@ -10808,6 +11106,7 @@ exports.TimeRangePicker = TimeRangePicker;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.ToastComponent = ToastComponent;
+exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
 exports.TooltipComponent = TooltipComponent;
 exports.TreeView = TreeView;