mithril-materialized 3.8.0 → 3.10.0

package/dist/index.css

@@ -12043,4 +12043,706 @@ body.dark {
 [data-theme=dark] .toggle-group .toggle-button.checked {
   background-color: var(--mm-primary-color, #80cbc4);
   color: var(--mm-button-text, #000);
+}
+
+/* CircularProgress Component
+   ========================================================================== */
+.circular-progress {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mm-primary-color, #ee6e73);
+}
+.circular-progress--small {
+  width: 36px;
+  height: 36px;
+}
+.circular-progress--small .circular-progress__label {
+  font-size: 10px;
+}
+.circular-progress--medium {
+  width: 50px;
+  height: 50px;
+}
+.circular-progress--medium .circular-progress__label {
+  font-size: 12px;
+}
+.circular-progress--large {
+  width: 64px;
+  height: 64px;
+}
+.circular-progress--large .circular-progress__label {
+  font-size: 14px;
+}
+
+.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);
+}
+.circular-progress__circle--track {
+  opacity: 0.2;
+}
+.circular-progress__circle--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;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.circular-progress--indeterminate .circular-progress__svg {
+  animation: circular-rotate 2s linear infinite;
+}
+.circular-progress--indeterminate .circular-progress__circle--indicator {
+  stroke-dasharray: 80, 200;
+  stroke-dashoffset: 0;
+  animation: circular-dash 1.5s ease-in-out infinite;
+}
+
+.circular-progress--determinate .circular-progress__circle--indicator {
+  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.circular-progress--red {
+  color: #F44336;
+}
+
+.circular-progress--pink {
+  color: #e91e63;
+}
+
+.circular-progress--purple {
+  color: #9c27b0;
+}
+
+.circular-progress--deep-purple {
+  color: #673ab7;
+}
+
+.circular-progress--indigo {
+  color: #3f51b5;
+}
+
+.circular-progress--blue {
+  color: #2196F3;
+}
+
+.circular-progress--light-blue {
+  color: #03a9f4;
+}
+
+.circular-progress--cyan {
+  color: #00bcd4;
+}
+
+.circular-progress--teal {
+  color: #009688;
+}
+
+.circular-progress--green {
+  color: #4CAF50;
+}
+
+.circular-progress--light-green {
+  color: #8bc34a;
+}
+
+.circular-progress--lime {
+  color: #cddc39;
+}
+
+.circular-progress--yellow {
+  color: #ffeb3b;
+}
+
+.circular-progress--amber {
+  color: #ffc107;
+}
+
+.circular-progress--orange {
+  color: #ff9800;
+}
+
+.circular-progress--deep-orange {
+  color: #ff5722;
+}
+
+.circular-progress--brown {
+  color: #795548;
+}
+
+.circular-progress--grey {
+  color: #9e9e9e;
+}
+
+.circular-progress--blue-grey {
+  color: #607d8b;
+}
+
+.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);
+}
+
+@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;
+  }
+}
+[data-theme=dark] .circular-progress .circular-progress__circle--track {
+  opacity: 0.15;
+}
+
+[dir=rtl] .circular-progress__svg {
+  transform: rotate(90deg);
+}
+[dir=rtl] .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);
+  }
+}
+
+@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--indeterminate .circular-progress__circle--indicator {
+    animation: none;
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -50;
+  }
+}
+@media (prefers-contrast: high) {
+  .circular-progress__circle--track {
+    opacity: 0.4;
+  }
+}
+/* LinearProgress Component
+   ========================================================================== */
+.linear-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  color: var(--mm-primary-color, #ee6e73);
+}
+
+.linear-progress__track {
+  position: relative;
+  flex: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.linear-progress__track--small {
+  height: 4px;
+}
+.linear-progress__track--medium {
+  height: 8px;
+}
+.linear-progress__track--large {
+  height: 12px;
+}
+
+.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: 2px;
+}
+.linear-progress__bar--indeterminate {
+  width: 30%;
+  animation: linear-indeterminate 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.linear-progress__label {
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  color: currentColor;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  min-width: 40px;
+  text-align: right;
+}
+
+.linear-progress--red {
+  color: #F44336;
+}
+
+.linear-progress--pink {
+  color: #e91e63;
+}
+
+.linear-progress--purple {
+  color: #9c27b0;
+}
+
+.linear-progress--deep-purple {
+  color: #673ab7;
+}
+
+.linear-progress--indigo {
+  color: #3f51b5;
+}
+
+.linear-progress--blue {
+  color: #2196F3;
+}
+
+.linear-progress--light-blue {
+  color: #03a9f4;
+}
+
+.linear-progress--cyan {
+  color: #00bcd4;
+}
+
+.linear-progress--teal {
+  color: #009688;
+}
+
+.linear-progress--green {
+  color: #4CAF50;
+}
+
+.linear-progress--light-green {
+  color: #8bc34a;
+}
+
+.linear-progress--lime {
+  color: #cddc39;
+}
+
+.linear-progress--yellow {
+  color: #ffeb3b;
+}
+
+.linear-progress--amber {
+  color: #ffc107;
+}
+
+.linear-progress--orange {
+  color: #ff9800;
+}
+
+.linear-progress--deep-orange {
+  color: #ff5722;
+}
+
+.linear-progress--brown {
+  color: #795548;
+}
+
+.linear-progress--grey {
+  color: #9e9e9e;
+}
+
+.linear-progress--blue-grey {
+  color: #607d8b;
+}
+
+.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);
+}
+
+@keyframes linear-indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+[data-theme=dark] .linear-progress__track {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+[dir=rtl] .linear-progress__label {
+  text-align: left;
+}
+[dir=rtl] .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%;
+  }
+}
+
+@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;
+  }
+}
+@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);
+  }
+}
+/* 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';
@@ -49,4 +50,6 @@ export * from './masonry';
 export * from './image-list';
 export * from './rating';
 export * from './toggle-group';
+export * from './circular-progress';
+export * from './linear-progress';
 export * from './types';