mithril-materialized 3.8.0 → 3.9.0

package/dist/index.umd.js

@@ -10835,6 +10835,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
@@ -10866,6 +11042,7 @@
     exports.Carousel = Carousel;
     exports.CharacterCounter = CharacterCounter;
     exports.Chips = Chips;
+    exports.CircularProgress = CircularProgress;
     exports.CodeBlock = CodeBlock;
     exports.Collapsible = Collapsible;
     exports.CollapsibleItem = CollapsibleItem;
@@ -10888,6 +11065,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.9.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/sass/components/_circular-progress.scss

@@ -0,0 +1,220 @@
+@use 'sass:color';
+@use "variables";
+@use "color-variables";
+
+/* CircularProgress Component
+   ========================================================================== */
+
+// CircularProgress component variables
+$circular-progress-size-small: 36px !default;
+$circular-progress-size-medium: 50px !default;
+$circular-progress-size-large: 64px !default;
+$circular-progress-stroke-width: 3px !default;
+$circular-progress-default-color: var(--mm-primary-color, variables.$primary-color) !default;
+$circular-progress-track-opacity: 0.2 !default;
+
+// Label font sizes
+$circular-progress-label-small: 10px !default;
+$circular-progress-label-medium: 12px !default;
+$circular-progress-label-large: 14px !default;
+
+.circular-progress {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: $circular-progress-default-color;
+
+  // Size variants
+  &--small {
+    width: $circular-progress-size-small;
+    height: $circular-progress-size-small;
+
+    .circular-progress__label {
+      font-size: $circular-progress-label-small;
+    }
+  }
+
+  &--medium {
+    width: $circular-progress-size-medium;
+    height: $circular-progress-size-medium;
+
+    .circular-progress__label {
+      font-size: $circular-progress-label-medium;
+    }
+  }
+
+  &--large {
+    width: $circular-progress-size-large;
+    height: $circular-progress-size-large;
+
+    .circular-progress__label {
+      font-size: $circular-progress-label-large;
+    }
+  }
+}
+
+.circular-progress__svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+.circular-progress__circle {
+  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &--track {
+    opacity: $circular-progress-track-opacity;
+  }
+
+  &--indicator {
+    opacity: 1;
+  }
+}
+
+.circular-progress__label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: 500;
+  text-align: center;
+  line-height: 1;
+  color: currentColor;
+  user-select: none;
+}
+
+// Indeterminate mode animation
+.circular-progress--indeterminate {
+  .circular-progress__svg {
+    animation: circular-rotate 2s linear infinite;
+  }
+
+  .circular-progress__circle--indicator {
+    stroke-dasharray: 80, 200;
+    stroke-dashoffset: 0;
+    animation: circular-dash 1.5s ease-in-out infinite;
+  }
+}
+
+// Determinate mode
+.circular-progress--determinate {
+  .circular-progress__circle--indicator {
+    transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+// Color variants using Materialize colors
+.circular-progress--red { color: color-variables.color("red", "base"); }
+.circular-progress--pink { color: color-variables.color("pink", "base"); }
+.circular-progress--purple { color: color-variables.color("purple", "base"); }
+.circular-progress--deep-purple { color: color-variables.color("deep-purple", "base"); }
+.circular-progress--indigo { color: color-variables.color("indigo", "base"); }
+.circular-progress--blue { color: color-variables.color("blue", "base"); }
+.circular-progress--light-blue { color: color-variables.color("light-blue", "base"); }
+.circular-progress--cyan { color: color-variables.color("cyan", "base"); }
+.circular-progress--teal { color: color-variables.color("teal", "base"); }
+.circular-progress--green { color: color-variables.color("green", "base"); }
+.circular-progress--light-green { color: color-variables.color("light-green", "base"); }
+.circular-progress--lime { color: color-variables.color("lime", "base"); }
+.circular-progress--yellow { color: color-variables.color("yellow", "base"); }
+.circular-progress--amber { color: color-variables.color("amber", "base"); }
+.circular-progress--orange { color: color-variables.color("orange", "base"); }
+.circular-progress--deep-orange { color: color-variables.color("deep-orange", "base"); }
+.circular-progress--brown { color: color-variables.color("brown", "base"); }
+.circular-progress--grey { color: color-variables.color("grey", "base"); }
+.circular-progress--blue-grey { color: color-variables.color("blue-grey", "base"); }
+
+// Color intensity modifiers
+.circular-progress--lighten-5 { filter: brightness(1.4); }
+.circular-progress--lighten-4 { filter: brightness(1.3); }
+.circular-progress--lighten-3 { filter: brightness(1.2); }
+.circular-progress--lighten-2 { filter: brightness(1.1); }
+.circular-progress--lighten-1 { filter: brightness(1.05); }
+.circular-progress--darken-1 { filter: brightness(0.95); }
+.circular-progress--darken-2 { filter: brightness(0.9); }
+.circular-progress--darken-3 { filter: brightness(0.8); }
+.circular-progress--darken-4 { filter: brightness(0.7); }
+
+// Animations
+@keyframes circular-rotate {
+  0% {
+    transform: rotate(-90deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+@keyframes circular-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -15;
+  }
+  100% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -125;
+  }
+}
+
+// Dark theme support
+[data-theme="dark"] {
+  .circular-progress {
+    .circular-progress__circle--track {
+      opacity: 0.15;
+    }
+  }
+}
+
+// RTL support
+[dir="rtl"] {
+  .circular-progress__svg {
+    transform: rotate(90deg);
+  }
+
+  .circular-progress--indeterminate .circular-progress__svg {
+    animation: circular-rotate-rtl 2s linear infinite;
+  }
+
+  @keyframes circular-rotate-rtl {
+    0% {
+      transform: rotate(90deg);
+    }
+    100% {
+      transform: rotate(-270deg);
+    }
+  }
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  .circular-progress__circle,
+  .circular-progress__svg {
+    transition: none !important;
+    animation: none !important;
+  }
+
+  .circular-progress--indeterminate {
+    .circular-progress__svg {
+      animation: none;
+    }
+
+    .circular-progress__circle--indicator {
+      animation: none;
+      stroke-dasharray: 100, 200;
+      stroke-dashoffset: -50;
+    }
+  }
+}
+
+// High contrast mode support
+@media (prefers-contrast: high) {
+  .circular-progress__circle--track {
+    opacity: 0.4;
+  }
+}

package/sass/components/_linear-progress.scss

@@ -0,0 +1,183 @@
+@use 'sass:color';
+@use "variables";
+@use "color-variables";
+
+/* LinearProgress Component
+   ========================================================================== */
+
+// LinearProgress component variables
+$linear-progress-height-small: 4px !default;
+$linear-progress-height-medium: 8px !default;
+$linear-progress-height-large: 12px !default;
+$linear-progress-default-color: var(--mm-primary-color, variables.$primary-color) !default;
+$linear-progress-track-bg: rgba(0, 0, 0, 0.1) !default;
+$linear-progress-track-bg-dark: rgba(255, 255, 255, 0.15) !default;
+$linear-progress-border-radius: 2px !default;
+$linear-progress-gap: 12px !default;
+
+// Label font size
+$linear-progress-label-font-size: 0.875rem !default;
+
+.linear-progress {
+  display: flex;
+  align-items: center;
+  gap: $linear-progress-gap;
+  width: 100%;
+  color: $linear-progress-default-color;
+}
+
+.linear-progress__track {
+  position: relative;
+  flex: 1;
+  background-color: $linear-progress-track-bg;
+  border-radius: $linear-progress-border-radius;
+  overflow: hidden;
+
+  // Size variants
+  &--small {
+    height: $linear-progress-height-small;
+  }
+
+  &--medium {
+    height: $linear-progress-height-medium;
+  }
+
+  &--large {
+    height: $linear-progress-height-large;
+  }
+}
+
+.linear-progress__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: currentColor;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: $linear-progress-border-radius;
+
+  // Indeterminate mode animation
+  &--indeterminate {
+    width: 30%;
+    animation: linear-indeterminate 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+}
+
+.linear-progress__label {
+  flex-shrink: 0;
+  font-size: $linear-progress-label-font-size;
+  font-weight: 500;
+  white-space: nowrap;
+  color: currentColor;
+  user-select: none;
+  min-width: 40px;
+  text-align: right;
+}
+
+// Color variants using Materialize colors
+.linear-progress--red { color: color-variables.color("red", "base"); }
+.linear-progress--pink { color: color-variables.color("pink", "base"); }
+.linear-progress--purple { color: color-variables.color("purple", "base"); }
+.linear-progress--deep-purple { color: color-variables.color("deep-purple", "base"); }
+.linear-progress--indigo { color: color-variables.color("indigo", "base"); }
+.linear-progress--blue { color: color-variables.color("blue", "base"); }
+.linear-progress--light-blue { color: color-variables.color("light-blue", "base"); }
+.linear-progress--cyan { color: color-variables.color("cyan", "base"); }
+.linear-progress--teal { color: color-variables.color("teal", "base"); }
+.linear-progress--green { color: color-variables.color("green", "base"); }
+.linear-progress--light-green { color: color-variables.color("light-green", "base"); }
+.linear-progress--lime { color: color-variables.color("lime", "base"); }
+.linear-progress--yellow { color: color-variables.color("yellow", "base"); }
+.linear-progress--amber { color: color-variables.color("amber", "base"); }
+.linear-progress--orange { color: color-variables.color("orange", "base"); }
+.linear-progress--deep-orange { color: color-variables.color("deep-orange", "base"); }
+.linear-progress--brown { color: color-variables.color("brown", "base"); }
+.linear-progress--grey { color: color-variables.color("grey", "base"); }
+.linear-progress--blue-grey { color: color-variables.color("blue-grey", "base"); }
+
+// Color intensity modifiers
+.linear-progress--lighten-5 { filter: brightness(1.4); }
+.linear-progress--lighten-4 { filter: brightness(1.3); }
+.linear-progress--lighten-3 { filter: brightness(1.2); }
+.linear-progress--lighten-2 { filter: brightness(1.1); }
+.linear-progress--lighten-1 { filter: brightness(1.05); }
+.linear-progress--darken-1 { filter: brightness(0.95); }
+.linear-progress--darken-2 { filter: brightness(0.9); }
+.linear-progress--darken-3 { filter: brightness(0.8); }
+.linear-progress--darken-4 { filter: brightness(0.7); }
+
+// Indeterminate animation
+@keyframes linear-indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+// Dark theme support
+[data-theme="dark"] {
+  .linear-progress__track {
+    background-color: $linear-progress-track-bg-dark;
+  }
+}
+
+// RTL support
+[dir="rtl"] {
+  .linear-progress__label {
+    text-align: left;
+  }
+
+  .linear-progress__bar--indeterminate {
+    animation: linear-indeterminate-rtl 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  @keyframes linear-indeterminate-rtl {
+    0% {
+      right: -35%;
+      left: 100%;
+    }
+    60% {
+      right: 100%;
+      left: -90%;
+    }
+    100% {
+      right: 100%;
+      left: -90%;
+    }
+  }
+}
+
+// Reduced motion support
+@media (prefers-reduced-motion: reduce) {
+  .linear-progress__bar {
+    transition: none !important;
+    animation: none !important;
+  }
+
+  .linear-progress__bar--indeterminate {
+    animation: none;
+    width: 100%;
+    left: 0;
+    opacity: 0.5;
+  }
+}
+
+// High contrast mode support
+@media (prefers-contrast: high) {
+  .linear-progress__track {
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid currentColor;
+  }
+
+  [data-theme="dark"] .linear-progress__track {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+}

package/sass/materialize.scss

@@ -54,3 +54,5 @@
 @use "components/image-list";
 @use 'components/rating';
 @use 'components/toggle-group';
+@use 'components/circular-progress';
+@use 'components/linear-progress';