mithril-materialized 3.9.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/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;
+  }
+}

package/dist/index.css

@@ -12518,4 +12518,231 @@ body.dark {
   [data-theme=dark] .linear-progress__track {
     background-color: rgba(255, 255, 255, 0.3);
   }
+}
+/* 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;
+  }
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import './index.scss';
 export * from './autocomplete';
+export * from './badge';
 export * from './button';
 export * from './carousel';
 export * from './chip';

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.
  *
@@ -11028,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, 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 };
+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 };