mithril-materialized 3.9.0 → 3.11.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

@@ -4812,6 +4812,7 @@ small {
   align-items: center;
   justify-content: space-between;
   cursor: default;
+  transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1), margin-top 300ms cubic-bezier(0.215, 0.61, 0.355, 1), max-height 300ms cubic-bezier(0.215, 0.61, 0.355, 1), padding-top 300ms cubic-bezier(0.215, 0.61, 0.355, 1), padding-bottom 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 .toast .toast-action {
   color: #eeff41;
@@ -12518,4 +12519,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';