@materializecss/materialize 2.2.0 → 2.2.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "The responsive front-end library based on Material Design from Google.",
   "author": "The Materialize Team",
   "homepage": "https://materializeweb.com",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
   "typings": "dist/js/materialize.d.ts",
@@ -35,9 +35,9 @@
     "lint": "eslint .",
     "test": "npm run build && jasmine-browser-runner runSpecs",
     "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
-    "release": "npm run lint && npm run build && node ci/compress.js",
+    "release": "npm run lint && npm run build -- --environment BUILD:release && node ci/compress.mjs",
     "preversion": "npm run lint && npm test",
-    "version": "npm run build && node ci/compress.js && git add -A dist src/index.ts"
+    "version": "npm run build -- --environment BUILD:release && node ci/compress.mjs && git add ."
   },
   "lint-staged": {
     "js/*.js": [
@@ -57,10 +57,12 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.5.2",
     "archiver": "^7.0.1",
+    "autoprefixer": "^9.8.6",
     "eslint": "^9.10.0",
     "jasmine": "^5.1.0",
     "jasmine-browser-runner": "^2.5.0",
     "jasmine-core": "^5.2.0",
+    "postcss": "^8.4.49",
     "rollup": "^4.20.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
@@ -71,7 +73,8 @@
     "typescript-eslint": "^8.6.0"
   },
   "files": [
-    "dist",
+    "dist/css",
+    "dist/js",
     "sass/**/*.scss",
     "LICENSE"
   ]

package/sass/components/_badges.scss

@@ -37,7 +37,7 @@ span.badge {
 
 // Special cases
 
-nav ul a span.badge {
+.navbar ul a span.badge {
   display: inline-block;
   float: none;
   margin-left: 4px;

package/sass/components/_breadcrumb.scss

@@ -0,0 +1,27 @@
+.breadcrumb-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+
+  i,
+  i.material-icons, i.material-symbols-outlined,
+  i.material-symbols-rounded, i.material-symbols-sharp,
+  &:before {
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+  }
+
+  &:before {
+    content: '\E5CC';
+    font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  }
+
+  &:first-child:before {
+    visibility: hidden;
+  }
+}

package/sass/components/_buttons.scss

@@ -1,4 +1,7 @@
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+@use './mixins.module.scss' as *;
+@use './variables' as *;
+
+:root {
   --btn-height: 40px;
   --btn-font-size-icon: 16px;
   --btn-padding: 24px;
@@ -6,23 +9,16 @@
   --btn-gap-icon: 8px;
   --btn-border-radius: 4px;
   --btn-font-size: 14px;
+}
 
-  height: var(--btn-height);
-  border: none;
-  border-radius: var(--btn-border-radius);
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  font-size: var(--btn-font-size);
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
-  white-space: nowrap;
-  outline: 0;
-  user-select: none;
-  transition: background-color .2s ease-out;
+.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+  @include btn(
+    var(--btn-height),
+    var(--btn-border-radius),
+    var(--btn-padding),
+    var(--btn-padding),
+    var(--btn-font-size)
+  );
 }
 
 // Icon
@@ -54,31 +50,23 @@
 //------------------ Enabled
 
 .btn.filled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
+  @include btn-filled;
 }
 
 .btn.tonal {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
+  @include btn-tonal;
 }
 
 .btn.elevated {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-  @extend .z-depth-1;
+  @include btn-elevated;
 }
 
 .btn.outlined {
-  background-color: transparent;
-  color: var(--md-sys-color-primary);
-  border: 1px solid var(--md-sys-color-outline);
+  @include btn-outlined;
 }
 
 .btn.text, .btn-flat {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-primary);
-  background-color: transparent;
+  @include btn-flat;
 }
 
 //------------------ Disabled
@@ -86,108 +74,37 @@
 .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
 .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
 .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
-  @extend .z-depth-0;
-  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
-  pointer-events: none;
-  box-shadow: none;
-  cursor: default;
+  @include btn-disabled();
 }
 
 //------------------ Hover
 
-.btn.elevated:hover {
-  @extend .z-depth-2;
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
-}
-
-.btn.filled:hover {
-  @extend .z-depth-1;
-  color: var(--md-sys-color-on-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
-}
-
-.btn.tonal:hover {
-  @extend .z-depth-1;
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
-}
-
-.btn.outlined:hover {
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
-}
-
-.btn.text:hover {
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
-}
-
 //------------------ Focus
 
-.btn:focus.elevated {
-  @extend .z-depth-1;
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
-}
-
-.btn:focus.filled {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-on-primary);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
-}
-
-.btn:focus.tonal {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
-}
-
-.btn:focus.outlined {
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
-  border: 1px solid var(--md-sys-color-primary);
-}
-
-.btn:focus.text {
-  color: var(--md-sys-color-primary);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
-}
-
-// Focus with Keyboard
-.btn:focus-visible {
-  &.filled,
-  &.elevated,
-  &.tonal,
-  &.outlined,
-  &.text {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: 2px;
-  }
-}
-
-//----------
-
-// .btn-floating {
-//   border-radius: 16px;
-//   width: unset;
-//   display: grid;
-//   grid-auto-flow: column;
-//   align-items: center;
-//   padding: 16px !important;
-//   padding-right: 24px !important; /* only with icon */
-//   gap: 8px;
-// }
-// .btn-floating.btn-large {
-//   width: unset;
-// }
-// .btn-large {
-//   font-size: 14px;
-// }
-//-----
 // Floating button
 .btn-floating {
+  // FIXES
+  // width: unset;
+  // padding: 16px !important;
+  // padding-right: 24px !important; /* only with icon */
+  // gap: 8px;
+  width: $button-floating-size;
+  height: $button-floating-size;
+  color: var(--md-sys-color-on-primary-container);
+  background-color: var(--md-sys-color-primary-container);
+  border-radius: $button-floating-radius;
+  padding: 0;
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  @extend .z-depth-1;
+  transition: background-color .3s;
+  cursor: pointer;
+  vertical-align: middle;
+
   &:hover {
     @extend .z-depth-1-half;
     background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
@@ -203,13 +120,12 @@
   }
 
   &.btn-large {
-    &.halfway-fab {
-      bottom: -56px * 0.5;
-    }
-
     width: 56px;
     height: 56px;
     padding: 0;
+    &.halfway-fab {
+      bottom: -56px * 0.5;
+    }
     // font-size:
     // i {
     //   // line-height: 56px;
@@ -218,51 +134,28 @@
 
   &.btn-small {
     --btn-small-height: calc(0.75 * var(--btn-height));
+    width: var(--btn-small-height);
+    height: var(--btn-small-height);
 
     &.halfway-fab {
       bottom: calc(var(--btn-small-height) * -0.5);
     }
-
-    width: var(--btn-small-height);
-    height: var(--btn-small-height);
     // i {
     //   line-height: $button-floating-small-size;
     // }
   }
 
   &.halfway-fab {
+    position: absolute;
+    right: 24px;
+    bottom: -$button-floating-size * 0.5;
+
     &.left {
       right: auto;
       left: 24px;
     }
-
-    position: absolute;
-    right: 24px;
-    bottom: -$button-floating-size * 0.5;
   }
 
-  // FIXES
-  // width: unset;
-  // padding: 16px !important;
-  // padding-right: 24px !important; /* only with icon */
-  // gap: 8px;
-  width: $button-floating-size;
-  height: $button-floating-size;
-  color: var(--md-sys-color-on-primary-container);
-  background-color: var(--md-sys-color-primary-container);
-  border-radius: $button-floating-radius;
-  padding: 0;
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  @extend .z-depth-1;
-  transition: background-color .3s;
-  cursor: pointer;
-  vertical-align: middle;
-
   i {
     color: $button-floating-color;
     font-size: 1.6rem;
@@ -279,6 +172,13 @@ button.btn-floating {
 
 // Fixed Action Button
 .fixed-action-btn {
+  position: fixed;
+  right: 23px;
+  bottom: 23px;
+  padding-top: 15px;
+  margin-bottom: 0;
+  z-index: 997;
+
   &.active {
     ul {
       visibility: visible;
@@ -340,15 +240,15 @@ button.btn-floating {
   }
 
   &.toolbar {
+    padding: 0;
+    height: 56px;
+
     &.active {
       & > a i {
         opacity: 0;
       }
     }
 
-    padding: 0;
-    height: 56px;
-
     ul {
       display: flex;
       top: 0;
@@ -382,13 +282,6 @@ button.btn-floating {
     }
   }
 
-  position: fixed;
-  right: 23px;
-  bottom: 23px;
-  padding-top: 15px;
-  margin-bottom: 0;
-  z-index: 997;
-
   ul {
     left: 0;
     right: 0;

package/sass/components/_cards.scss

@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './mixins.module.scss' as *;
+
 .card-panel {
   transition: box-shadow .25s;
   padding: 24px;
@@ -8,10 +11,11 @@
 }
 
 .card {
-  overflow: hidden;
+  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+
   position: relative;
   //margin: $element-top-margin 0 $element-bottom-margin 0;
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--background-color);
   transition: box-shadow .25s;
   border-radius: 12px;
   @extend .z-depth-1;
@@ -61,6 +65,8 @@
 
   // Horizontal Cards
   &.horizontal {
+    display: flex;
+
     &.small, &.medium, &.large {
       .card-image {
         height: 100%;
@@ -73,8 +79,6 @@
       }
     }
 
-    display: flex;
-
     .card-image {
       max-width: 50%;
 
@@ -141,6 +145,10 @@
       bottom: 0;
       cursor: pointer;
     }
+
+    img.activator {
+      position: relative;
+    }
   }
 
   .card-content {
@@ -167,25 +175,36 @@
   }
 
   .card-action {
+    padding: 0 1.6rem;
+
     &:last-child {
       border-radius: 0 0 2px 2px;
     }
-
-    border-top: 1px solid var(--md-sys-color-outline-variant);
-    position: relative;
-    background-color: inherit;
-
+    // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
     a {
-      padding: 16px 24px;
-      display: inline-block;
-    }
+      @include btn(
+        var(--btn-height),
+        var(--btn-border-radius),
+        var(--btn-padding),
+        var(--btn-padding),
+        var(--btn-font-size)
+      );
+
+      &:first-child {
+        margin-left: -1.6rem;
+      }
 
-    a:not(.btn):not(.btn-large):not(.btn-floating) {
-      color: var(--md-sys-color-primary);
-      transition: color .3s ease;
+      &:last-child {
+        margin-right: -1.6rem;
+      }
+    }
 
-      &:hover {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+    .btn {
+      &.filled,
+      &.tonal,
+      &.elevated,
+      &.outlined {
+        margin: 0 .26rem 1.6rem 0;
       }
     }
   }

package/sass/components/_carousel.scss

@@ -1,20 +1,28 @@
 .carousel {
   --carousel-height: 400px;
 
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: var(--carousel-height);
+  perspective: 500px;
+  transform-style: preserve-3d;
+  transform-origin: 0% 50%;
+
   &.carousel-slider {
     top: 0;
     left: 0;
 
     .carousel-fixed-item {
-      &.with-indicators {
-        bottom: 68px;
-      }
-
       position: absolute;
       left: 0;
       right: 0;
       bottom: 20px;
       z-index: 1;
+
+      &.with-indicators {
+        bottom: 68px;
+      }
     }
 
     .carousel-item {
@@ -37,14 +45,6 @@
     }
   }
 
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  height: var(--carousel-height);
-  perspective: 500px;
-  transform-style: preserve-3d;
-  transform-origin: 0% 50%;
-
   .carousel-item {
     visibility: hidden;
     width: calc(var(--carousel-height) * 0.5);
@@ -61,7 +61,6 @@
   .indicators {
     padding-left: 0;
     list-style-type: none;
-
     position: absolute;
     text-align: center;
     left: 0;
@@ -70,10 +69,6 @@
     margin: 0;
 
     .indicator-item {
-      &.active {
-        background-color: var(--md-ref-palette-primary100);
-      }
-
       display: inline-block;
       position: relative;
       cursor: pointer;
@@ -81,9 +76,12 @@
       width: 8px;
       margin: 24px 4px;
       background-color: rgba(255, 255, 255, 0.45);
-
       transition: background-color .3s;
       border-radius: 50%;
+
+      &.active {
+        background-color: var(--md-ref-palette-primary100);
+      }
     }
   }
 

package/sass/components/_chips.scss

@@ -1,3 +1,5 @@
+@use './colors.module.scss' as *;
+
 .chip {
   --font-size: 14px;
   --font-size-icon: 18px;
@@ -5,22 +7,16 @@
 
   color: var(--md-sys-color-on-surface-variant);
   background-color: rgba(0, 0, 0, 0.09);
-
   display: inline-flex;
   white-space: nowrap;
   gap: 8px;
-
   margin: 0;
   height: 32px;
-
   padding-left: var(--padding);
-  padding-right: var(--padding);
-  
+  padding-right: var(--padding);  
   font-size: var(--font-size);
-  font-weight: 500;  
-  
+  font-weight: 500;    
   border-radius: 8px;
-
   align-items: center;
   user-select: none;
   vertical-align: top;
@@ -73,14 +69,11 @@
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
-
   border: none;
   box-shadow: none;
   margin: 0 0 8px 0;
-
   padding: 4px;
   // min-height: 45px;
-
   outline: none;
   transition: all .3s;
 
@@ -103,11 +96,9 @@
     color: var(--md-sys-color-on-background);
     display: inline-block;
     font-size: 16px;
-
     // height: 32px;
     // line-height: 32px;
     height: 32px;
-
     outline: 0;
     margin: 0;
     padding: 0;
@@ -116,7 +107,6 @@
     min-width: 100px;
     max-width: 200px;
 
-
     &:focus {
       border: 0;
       box-shadow: none;
@@ -136,12 +126,14 @@
   width: 92%;
   width: calc(100% - 3rem);
 }
+
 // Form suffix
 .suffix ~ .chips {
   margin-right: 3rem;
   width: 92%;
   width: calc(100% - 3rem);
 }
+
 .chips:empty ~ label  {
   font-size: 0.8rem;
   transform: translateY(-140%);

package/sass/components/_collapsible.scss

@@ -1,7 +1,10 @@
+@use './variables' as *;
+@use './colors.module.scss' as *;
+@use './global' as *;
+
 .collapsible {
   padding-left: 0;
   list-style-type: none;
-
   border-top: 1px solid var(--md-sys-color-outline-variant);
   border-right: 1px solid var(--md-sys-color-outline-variant);
   border-left: 1px solid var(--md-sys-color-outline-variant);
@@ -10,10 +13,6 @@
 }
 
 .collapsible-header {
-  &:focus {
-    outline: 0
-  }
-
   display: flex;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
@@ -21,6 +20,10 @@
   padding: 1rem;
   border-bottom: 1px solid var(--md-sys-color-outline-variant);
 
+  &:focus {
+    outline: 0
+  }
+
   i {
     width: 2rem;
     font-size: 1.6rem;