@materializecss/materialize 2.1.0 → 2.2.0

package/README.md

@@ -29,7 +29,7 @@
   </a>
 </p>
 
-## Quickstart
+## Getting started
 Read the [getting started guide](https://materializeweb.com/getting-started.html) for more information on how to use materialize.
 
 - [Download the latest release](https://github.com/materializecss/materialize/releases/latest) of materialize directly from GitHub. ([Beta](https://github.com/materializecss/materialize/releases/))
@@ -37,28 +37,21 @@ Read the [getting started guide](https://materializeweb.com/getting-started.html
 - Include the files via [jsDelivr](https://www.jsdelivr.com/package/npm/@materializecss/materialize).
 - Install with [npm](https://www.npmjs.com): `npm install @materializecss/materialize` (Beta: `npm install @materializecss/materialize@next`)
 
+## Testing
+To run tests locally you first have to build the files and then run the tests. This can be done with the command `npm test`;
+To get more info and debug information you can do the following:
+run `npx jasmine-browser-runner` then go to the url via browser `http://localhost:8888`. The tests will then run and show detailed feedback.
+
 ## Development
 The documentation can be found at <https://materializeweb.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org) installed on your computer.
-
 This is the core project with all the components. To see how they are used we recommend using an example project or go to the documentation.
-Otherwise, if you want to develop the components itself, the dev process of this core-repo works like this:
-```sh
-npm install
-npm run dev
-```
 
 ### Running documentation locally
 See [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) to see Materialize in Action.
 
-### Documentation for previous releases
+### Releases
 Previous releases are available [here](https://github.com/materializecss/materialize/releases).
 
-## Release
-If you want to release `materialize.css` or `materialize.js` from the latest commit, you can build the files with the following command after `npm install`. See `package.json` to check the current version like `1.0.0`.
-```sh
-npm run release -- --oldver=<current_version> --newver=<new_version>
-```
-
 ## Supported Browsers:
 Materialize is compatible with:
 

package/package.json

@@ -3,12 +3,17 @@
   "description": "The responsive front-end library based on Material Design from Google.",
   "author": "The Materialize Team",
   "homepage": "https://materializeweb.com",
-  "version": "2.1.0",
-  "main": "dist/js/materialize.js",
+  "version": "2.2.0",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
-  "typings": "dist/src/index.d.ts",
+  "typings": "dist/js/materialize.d.ts",
   "license": "MIT",
+  "main": "dist/js/materialize.js",
+  "module": "./dist/js/materialize.mjs",
+  "exports": {
+    "import": "./dist/js/materialize.mjs",
+    "require": "./dist/js/materialize.cjs.js"
+  },
   "repository": {
     "type": "git",
     "url": "git://github.com/materializecss/materialize.git"
@@ -27,10 +32,12 @@
     }
   ],
   "scripts": {
-    "dev": "grunt monitor",
-    "test": "grunt test",
-    "release": "grunt release",
-    "watch": "webpack --watch"
+    "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",
+    "preversion": "npm run lint && npm test",
+    "version": "npm run build && node ci/compress.js && git add -A dist src/index.ts"
   },
   "lint-staged": {
     "js/*.js": [
@@ -46,27 +53,22 @@
   ],
   "engine": "node >= 6",
   "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.5.2",
-    "autoprefixer": "^9.8.6",
-    "grunt": "^1.0.1",
-    "grunt-banner": "^0.6.0",
-    "grunt-concurrent": "^3.0.0",
-    "grunt-contrib-compress": "^2.0.0",
-    "grunt-contrib-connect": "^4.0.0",
-    "grunt-contrib-jasmine": "^4.0.0",
-    "grunt-contrib-watch": "^1.0.0",
-    "grunt-postcss": "^0.9.0",
-    "grunt-remove-logging": "^0.2.0",
-    "grunt-rename-util": "^1.0.0",
-    "grunt-sass": "^3.1.0",
-    "grunt-text-replace": "^0.4.0",
-    "grunt-webpack": "^6.0.0",
+    "archiver": "^7.0.1",
+    "eslint": "^9.10.0",
     "jasmine": "^5.1.0",
-    "sass": "^1.35.2",
-    "ts-loader": "^9.4.2",
+    "jasmine-browser-runner": "^2.5.0",
+    "jasmine-core": "^5.2.0",
+    "rollup": "^4.20.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-scss": "^4.0.0",
+    "sass": "^1.77.8",
+    "tslib": "^2.6.3",
     "typescript": "^5.4.3",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "typescript-eslint": "^8.6.0"
   },
   "files": [
     "dist",

package/sass/components/_badges.scss

@@ -53,6 +53,11 @@ nav ul a span.badge {
 
 .collapsible span.badge {
   margin-left: auto;
+
+  &.leading {
+    margin-right: 7px;
+    order: -1;
+  }
 }
 
 .collapsible .active span.badge:not(.new) {

package/sass/components/_buttons.scss

@@ -12,7 +12,7 @@
   border-radius: var(--btn-border-radius);
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
-  font-size: ver(--btn-font-size);
+  font-size: var(--btn-font-size);
   font-weight: 500;
   text-decoration: none;
   display: inline-flex;
@@ -29,19 +29,24 @@
 .btn.icon-left, .btn.icon-right {
   position: relative;
 }
+
 .btn.icon-left {
   padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
 }
+
 .btn.icon-right {
-  padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon)); 
+  padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
 }
+
 .btn.icon-left i, .btn.icon-right i {
   position: absolute;
   font-size: var(--btn-font-size-icon);
 }
+
 .btn.icon-left i {
   left: var(--btn-padding-icon);
 }
+
 .btn.icon-right i {
   right: var(--btn-padding-icon);
 }
@@ -80,12 +85,10 @@
 
 .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]
-{
+.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;
@@ -158,8 +161,7 @@
   &.elevated,
   &.tonal,
   &.outlined,
-  &.text
-    {
+  &.text {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
@@ -190,10 +192,12 @@
     @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%);
   }
+
   &:focus {
     background-color: $button-floating-background-focus;
     @extend .z-depth-1-half;
   }
+
   &:before {
     border-radius: 0;
   }
@@ -202,10 +206,11 @@
     &.halfway-fab {
       bottom: -56px * 0.5;
     }
+
     width: 56px;
     height: 56px;
     padding: 0;
-    // font-size: 
+    // font-size:
     // i {
     //   // line-height: 56px;
     // }
@@ -213,10 +218,12 @@
 
   &.btn-small {
     --btn-small-height: calc(0.75 * var(--btn-height));
+
     &.halfway-fab {
       bottom: calc(var(--btn-small-height) * -0.5);
     }
-    width: var(--btn-small-height)e;
+
+    width: var(--btn-small-height);
     height: var(--btn-small-height);
     // i {
     //   line-height: $button-floating-small-size;
@@ -228,10 +235,12 @@
       right: auto;
       left: 24px;
     }
+
     position: absolute;
     right: 24px;
     bottom: -$button-floating-size * 0.5;
   }
+
   // FIXES
   // width: unset;
   // padding: 16px !important;
@@ -262,17 +271,19 @@
     text-align: center;
   }
 }
+
 // button fix
 button.btn-floating {
   border: none;
 }
+
 // Fixed Action Button
 .fixed-action-btn {
   &.active {
     ul {
       visibility: visible;
       padding-left: 0;
-      list-style-type: none;    
+      list-style-type: none;
     }
   }
 
@@ -280,6 +291,7 @@ button.btn-floating {
   &.direction-left,
   &.direction-right {
     padding: 0 0 0 15px;
+
     ul {
       text-align: right;
       right: 64px;
@@ -289,55 +301,67 @@ button.btn-floating {
       left: auto;
       /*width 100% only goes to width of button container */
       width: 500px;
+
       li {
         display: inline-block;
         margin: 7.5px 15px 0 0;
       }
     }
   }
+
   &.direction-right {
     padding: 0 15px 0 0;
+
     ul {
       text-align: left;
       direction: rtl;
       left: 64px;
       right: auto;
+
       li {
         margin: 7.5px 0 0 15px;
       }
     }
   }
+
   &.direction-bottom {
     padding: 0 0 15px 0;
+
     ul {
       top: 64px;
       bottom: auto;
       display: flex;
       flex-direction: column-reverse;
+
       li {
         margin: 15px 0 0 0;
       }
     }
   }
+
   &.toolbar {
     &.active {
-      &>a i {
+      & > a i {
         opacity: 0;
       }
     }
+
     padding: 0;
     height: 56px;
+
     ul {
       display: flex;
       top: 0;
       bottom: 0;
       z-index: 1;
+
       li {
         flex: 1;
         display: inline-block;
         margin: 0;
         height: 100%;
         transition: none;
+
         a {
           display: block;
           overflow: hidden;
@@ -349,6 +373,7 @@ button.btn-floating {
           color: $button-floating-color;
           line-height: 56px;
           z-index: 1;
+
           i {
             line-height: inherit;
           }
@@ -356,12 +381,14 @@ button.btn-floating {
       }
     }
   }
+
   position: fixed;
   right: 23px;
   bottom: 23px;
   padding-top: 15px;
   margin-bottom: 0;
   z-index: 997;
+
   ul {
     left: 0;
     right: 0;
@@ -370,13 +397,16 @@ button.btn-floating {
     bottom: 64px;
     margin: 0;
     visibility: hidden;
+
     li {
       margin-bottom: 15px;
     }
+
     a.btn-floating {
       opacity: 0;
     }
   }
+
   .fab-backdrop {
     position: absolute;
     top: 0;
@@ -398,6 +428,7 @@ button.btn-floating {
   height: calc(1.5 * var(--btn-height));
   font-size: 18px;
   padding: 0 28px;
+
   i {
     font-size: 1.6rem;
   }
@@ -408,6 +439,7 @@ button.btn-floating {
   @extend .btn;
   height: calc(0.75 * var(--btn-height));
   font-size: 13px;
+
   i {
     font-size: 1.2rem;
   }
@@ -420,4 +452,4 @@ button.btn-floating {
 
 .btn.rounded {
   border-radius: 99999px;
-}
+}

package/sass/components/_cards.scss

@@ -19,9 +19,6 @@
   .card-title {
     font-size: 24px;
     font-weight: 300;
-    &.activator {
-      cursor: pointer;
-    }
   }
 
   // Card Sizes
@@ -32,13 +29,16 @@
       max-height: 60%;
       overflow: hidden;
     }
+
     .card-image + .card-content {
       max-height: 40%;
     }
+
     .card-content {
       max-height: 100%;
       overflow: hidden;
     }
+
     .card-action {
       position: absolute;
       bottom: 0;
@@ -77,6 +77,7 @@
 
     .card-image {
       max-width: 50%;
+
       img {
         border-radius: 2px 0 0 2px;
         max-width: 100%;
@@ -108,9 +109,6 @@
     }
   }
 
-
-
-
   .card-image {
     position: relative;
 
@@ -134,6 +132,15 @@
       max-width: 100%;
       padding: 24px;
     }
+
+    .activator {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top:0;
+      bottom: 0;
+      cursor: pointer;
+    }
   }
 
   .card-content {
@@ -143,6 +150,7 @@
     p {
       margin: 0;
     }
+
     .card-title {
       display: block;
       line-height: 32px;
@@ -151,6 +159,10 @@
       i {
         line-height: 32px;
       }
+
+      &.activator {
+        cursor: pointer;
+      }
     }
   }
 

package/sass/components/_chips.scss

@@ -75,7 +75,6 @@
   flex-wrap: wrap;
 
   border: none;
-  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
   box-shadow: none;
   margin: 0 0 8px 0;
 
@@ -90,8 +89,12 @@
     box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
   }
 
-  &:hover {
-    cursor: text;
+  &.input-field {
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+
+    &:hover {
+      cursor: text;
+    }
   }
 
   input:not([type]):not(.browser-default).input {
@@ -109,6 +112,9 @@
     margin: 0;
     padding: 0;
     width: 120px;
+    width: fit-content;
+    min-width: 100px;
+    max-width: 200px;
 
 
     &:focus {

package/sass/components/_collapsible.scss

@@ -31,20 +31,26 @@
 }
 
 .collapsible-header::after {
-  content: '▾';
-  text-align: right;
-  margin-right: 0.25rem;
-  width: 100%;
+  content: '\e5cf';
+  margin-left: .5rem;
+  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  font-size: 25px;
+  line-height: .9;
+  -webkit-font-smoothing: antialiased;
 }
+
 .active .collapsible-header::after {
-  content: "▴";
+  content: '\e5ce';
 }
 
-
 .keyboard-focused .collapsible-header:focus {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
+.collapsible-header-content {
+  flex-grow: 1;
+}
+
 .collapsible-body {
   max-height: 0;
   border-bottom: 1px solid var(--md-sys-color-outline-variant);

package/sass/components/_datepicker.scss

@@ -38,6 +38,11 @@
     }
   }
 
+  .select-dropdown {
+    padding: 0;
+    vertical-align: middle;
+  }
+
   .select-year input {
     width: 50px;
   }
@@ -59,6 +64,7 @@
 }
 
 .month-prev, .month-next {
+  height: 49px;
   margin-top: 4px;
   cursor: pointer;
   background-color: transparent;

package/sass/components/_dropdown.scss

@@ -1,3 +1,9 @@
+[popover] {
+  outline: none;
+  padding: 0;
+  border: none;
+}
+
 .dropdown-content {
   padding-left: 0;
   list-style-type: none;
@@ -13,16 +19,13 @@
   top: 0;
   z-index: 9999; // TODO: Check if this doesn't break other things
   transform-origin: 0 0;
-
+  user-select: none;
+  
   li {
-    &:hover, &.active {
-      background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
-    }
     &.divider {
       min-height: 0;
       height: 1px;
     }
-
     & > a, & > span {
       font-size: 16px;
       color: var(--md-sys-color-primary);
@@ -30,13 +33,11 @@
       line-height: 22px;
       padding: (($dropdown-item-height - 22) * 0.5) 16px;
     }
-
     & > span > label {
       top: 1px;
       left: 0;
       height: 18px;
     }
-
     // Icon alignment override
     & > a > i {
       height: inherit;
@@ -45,7 +46,6 @@
       margin: 0 24px 0 0;
       width: 24px;
     }
-
     clear: both;
     color: var(--md-sys-color-on-background);
     cursor: pointer;
@@ -54,6 +54,9 @@
     width: 100%;
     text-align: left;
   }
+  li:not(.disabled):hover, li.active {
+    background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
+  }
 }
 
 body.keyboard-focused {

package/sass/components/_grid.scss

@@ -40,21 +40,15 @@
   }
 }
 
-.row {
+body {
   --gap-size: 1.5rem; // default
+}
 
+.row {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: var(--gap-size);
 
-  //--- Gap
-  .g-0 { gap: 0; }
-  .g-1 { gap: calc(0.25 * var(--gap-size)); }
-  .g-2 { gap: calc(0.5 * var(--gap-size));  }
-  .g-3 { gap: calc(1 * var(--gap-size));  }
-  .g-4 { gap: calc(1.5 * var(--gap-size)); }
-  .g-5 { gap: calc(3 * var(--gap-size)); }
-
   //--- S
   .s1  { grid-column: auto / span 1; }
   .s2  { grid-column: auto / span 2; }
@@ -166,3 +160,11 @@
   }
 
 }
+
+//--- Gap
+.g-0 { gap: 0; }
+.g-1 { gap: calc(0.25 * var(--gap-size)); }
+.g-2 { gap: calc(0.5 * var(--gap-size));  }
+.g-3 { gap: calc(1 * var(--gap-size));  }
+.g-4 { gap: calc(1.5 * var(--gap-size)); }
+.g-5 { gap: calc(3 * var(--gap-size)); }