mithril-materialized 3.8.0 → 3.10.0

package/dist/badge.d.ts

@@ -0,0 +1,129 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { MaterialColor, ColorIntensity } from './types';
+/** Badge positioning anchor origin */
+export interface BadgeAnchorOrigin {
+    /** Vertical positioning: 'top' | 'bottom' */
+    vertical: 'top' | 'bottom';
+    /** Horizontal positioning: 'left' | 'right' */
+    horizontal: 'left' | 'right';
+}
+/** Badge display variant */
+export type BadgeVariant = 'standard' | 'dot';
+/** Badge overlap mode affecting positioning offset */
+export type BadgeOverlap = 'rectangular' | 'circular';
+/**
+ * Badge component attributes
+ *
+ * Displays a badge anchored to a child element, commonly used for notifications,
+ * counts, or status indicators.
+ *
+ * @example
+ * ```typescript
+ * // Standard notification badge
+ * m(Badge, { badgeContent: 4 },
+ *   m('button.btn', 'Notifications')
+ * )
+ *
+ * // Dot variant with custom color
+ * m(Badge, {
+ *   variant: 'dot',
+ *   color: 'green',
+ *   anchorOrigin: { vertical: 'bottom', horizontal: 'right' }
+ * },
+ *   m(Icon, { iconName: 'notifications' })
+ * )
+ *
+ * // Badge with max value capping
+ * m(Badge, { badgeContent: 150, max: 99 },
+ *   m('span', 'Inbox')
+ * )
+ * ```
+ */
+export interface BadgeAttrs extends Attributes {
+    /**
+     * Content to display in badge (number or string)
+     * For 'dot' variant, this is ignored
+     */
+    badgeContent?: string | number;
+    /**
+     * Maximum value to display - if badgeContent exceeds this, shows "max+"
+     * @default undefined (no capping)
+     */
+    max?: number;
+    /**
+     * Badge positioning relative to child element
+     * @default { vertical: 'top', horizontal: 'right' }
+     */
+    anchorOrigin?: BadgeAnchorOrigin;
+    /**
+     * Overlap mode affecting positioning offset
+     * - 'rectangular': Badge positioned at corner edge
+     * - 'circular': Badge overlaps slightly for circular child elements
+     * @default 'rectangular'
+     */
+    overlap?: BadgeOverlap;
+    /**
+     * Badge display variant
+     * - 'standard': Shows badgeContent
+     * - 'dot': Displays minimal dot indicator
+     * @default 'standard'
+     */
+    variant?: BadgeVariant;
+    /**
+     * Badge background color from MaterialColor palette
+     * @default 'red'
+     */
+    color?: MaterialColor;
+    /**
+     * Color intensity modifier
+     * @example 'lighten-2', 'darken-3'
+     */
+    colorIntensity?: ColorIntensity;
+    /**
+     * Force hide badge regardless of badgeContent
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * Show badge even when badgeContent is 0
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * ARIA label for accessibility
+     * Automatically generated from badgeContent if not provided
+     */
+    'aria-label'?: string;
+    /**
+     * Additional CSS class for badge element (not wrapper)
+     */
+    badgeClassName?: string;
+    /**
+     * Additional CSS class for wrapper element
+     */
+    className?: string;
+}
+/**
+ * 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' })
+ * )
+ * ```
+ */
+export declare const Badge: FactoryComponent<BadgeAttrs>;

package/dist/circular-progress.d.ts

@@ -0,0 +1,43 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { MaterialColor, ColorIntensity } from './types';
+/** Progress mode - determinate shows specific progress, indeterminate shows loading animation */
+export type ProgressMode = 'determinate' | 'indeterminate';
+/** Progress size options */
+export type ProgressSize = 'small' | 'medium' | 'large';
+/** CircularProgress component attributes */
+export interface CircularProgressAttrs 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 inside the circle */
+    label?: string | number;
+    /** Auto-show percentage inside circle 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 CircularProgress component */
+export declare const CircularProgress: FactoryComponent<CircularProgressAttrs>;

package/dist/components.css

@@ -4529,3 +4529,230 @@ nav .theme-toggle:focus {
     display: none;
   }
 }
+/* Badge Component
+   ========================================================================== */
+.badge-wrapper {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.m-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-family: Roboto, sans-serif;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  border-radius: 10px;
+  background-color: #F44336;
+  color: #fff;
+  z-index: 1;
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.m-badge.m-badge--standard {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 12px;
+}
+.m-badge.m-badge--dot {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
+  border-radius: 50%;
+}
+.m-badge.m-badge--invisible {
+  transform: scale(0);
+  opacity: 0;
+}
+.m-badge.m-badge--top-right {
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+}
+.m-badge.m-badge--top-right.m-badge--rectangular {
+  transform: scale(1) translate(50%, -50%);
+}
+.m-badge.m-badge--top-right.m-badge--circular {
+  transform: scale(1) translate(30%, -30%);
+}
+.m-badge.m-badge--top-right.m-badge--invisible {
+  transform: scale(0) translate(50%, -50%);
+}
+.m-badge.m-badge--top-left {
+  top: 0;
+  left: 0;
+  transform: scale(1) translate(-50%, -50%);
+  transform-origin: 0% 0%;
+}
+.m-badge.m-badge--top-left.m-badge--rectangular {
+  transform: scale(1) translate(-50%, -50%);
+}
+.m-badge.m-badge--top-left.m-badge--circular {
+  transform: scale(1) translate(-30%, -30%);
+}
+.m-badge.m-badge--top-left.m-badge--invisible {
+  transform: scale(0) translate(-50%, -50%);
+}
+.m-badge.m-badge--bottom-right {
+  bottom: 0;
+  right: 0;
+  transform: scale(1) translate(50%, 50%);
+  transform-origin: 100% 100%;
+}
+.m-badge.m-badge--bottom-right.m-badge--rectangular {
+  transform: scale(1) translate(50%, 50%);
+}
+.m-badge.m-badge--bottom-right.m-badge--circular {
+  transform: scale(1) translate(30%, 30%);
+}
+.m-badge.m-badge--bottom-right.m-badge--invisible {
+  transform: scale(0) translate(50%, 50%);
+}
+.m-badge.m-badge--bottom-left {
+  bottom: 0;
+  left: 0;
+  transform: scale(1) translate(-50%, 50%);
+  transform-origin: 0% 100%;
+}
+.m-badge.m-badge--bottom-left.m-badge--rectangular {
+  transform: scale(1) translate(-50%, 50%);
+}
+.m-badge.m-badge--bottom-left.m-badge--circular {
+  transform: scale(1) translate(-30%, 30%);
+}
+.m-badge.m-badge--bottom-left.m-badge--invisible {
+  transform: scale(0) translate(-50%, 50%);
+}
+
+.m-badge--red {
+  background-color: #F44336;
+}
+
+.m-badge--pink {
+  background-color: #e91e63;
+}
+
+.m-badge--purple {
+  background-color: #9c27b0;
+}
+
+.m-badge--deep-purple {
+  background-color: #673ab7;
+}
+
+.m-badge--indigo {
+  background-color: #3f51b5;
+}
+
+.m-badge--blue {
+  background-color: #2196F3;
+}
+
+.m-badge--light-blue {
+  background-color: #03a9f4;
+}
+
+.m-badge--cyan {
+  background-color: #00bcd4;
+}
+
+.m-badge--teal {
+  background-color: #009688;
+}
+
+.m-badge--green {
+  background-color: #4CAF50;
+}
+
+.m-badge--light-green {
+  background-color: #8bc34a;
+}
+
+.m-badge--lime {
+  background-color: #cddc39;
+}
+
+.m-badge--yellow {
+  background-color: #ffeb3b;
+  color: #000;
+}
+
+.m-badge--amber {
+  background-color: #ffc107;
+}
+
+.m-badge--orange {
+  background-color: #ff9800;
+}
+
+.m-badge--deep-orange {
+  background-color: #ff5722;
+}
+
+.m-badge--brown {
+  background-color: #795548;
+}
+
+.m-badge--grey {
+  background-color: #9e9e9e;
+}
+
+.m-badge--blue-grey {
+  background-color: #607d8b;
+}
+
+.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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .m-badge {
+    transition: none;
+  }
+}
+@media (prefers-contrast: high) {
+  .m-badge {
+    border: 2px solid currentColor;
+  }
+}