@materializecss/materialize 2.1.1 → 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,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.1.1",
+  "version": "2.2.0",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
   "typings": "dist/js/materialize.d.ts",
@@ -32,10 +32,11 @@
     }
   ],
   "scripts": {
-    "test": "npx jasmine-browser-runner runSpecs",
+    "lint": "eslint .",
+    "test": "npm run build && jasmine-browser-runner runSpecs",
     "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
-    "release": " npm run build && node ci/compress.js",
-    "preversion": "npm test",
+    "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": {
@@ -56,6 +57,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.5.2",
     "archiver": "^7.0.1",
+    "eslint": "^9.10.0",
     "jasmine": "^5.1.0",
     "jasmine-browser-runner": "^2.5.0",
     "jasmine-core": "^5.2.0",
@@ -63,10 +65,10 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-scss": "^4.0.0",
-    "rollup-plugin-zip": "^1.0.3",
     "sass": "^1.77.8",
     "tslib": "^2.6.3",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "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/_modal.scss

@@ -1,101 +1,68 @@
+// use with dialog html element
 .modal {
-  --modal-footer-height: 56px;
   --modal-footer-divider-height: 1px;
   --modal-border-radius: 28px;
   --modal-padding: 24px;
-
-  &:focus {
-    outline: none;
-  }
+  --modal-padding-bottom: 16px;
 
   @extend .z-depth-5;
-
-  display: none;
-  position: fixed;
-  left: 0;
-  right: 0;
-  background-color: var(--md-sys-color-surface);
+  border: none;
+  outline: none;
   padding: 0;
   max-height: 70%;
   width: 55%;
-  margin: auto;
-  overflow-y: auto;
-
   border-radius: var(--modal-border-radius);
   will-change: top, opacity;
 
+  // Dialog open
+  &[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // Background
+  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+
   @media #{$medium-and-down} {
     width: 80%;
   }
 
-  h1,h2,h3,h4 {
-    margin-top: 0;
+  // custom backdrop blur
+  &::backdrop {
+    backdrop-filter: blur(1px);
   }
 
-  .modal-content {
+  .modal-header {
     padding: var(--modal-padding);
-    overflow-y: hidden;
+    padding-bottom: var(--modal-padding-bottom);
+    flex-shrink: 0;
   }
-
-  .modal-close {
-    cursor: pointer;
+  .modal-content {
+    padding: 0 var(--modal-padding);
+    overflow-y: auto;
   }
-
   .modal-footer {
     border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
-    background-color: var(--md-sys-color-surface);
-    padding: 4px 6px;
-    height: var(--modal-footer-height);
-    width: 100%;
+    padding: var(--modal-padding);
     text-align: right;
-
-    .btn, .btn-flat {
-      margin: 6px 0;
-    }
+    flex-shrink: 0;
   }
-}
 
-.modal-overlay {
-  position: fixed;
-  z-index: 999;
-  top: -25%;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 125%;
-  width: 100%;
-  background: #000;
-  display: none;
-  will-change: opacity;
-}
-
-// Modal with fixed action footer
-.modal.modal-fixed-footer {
-  padding: 0;
-  height: 70%;
-
-  .modal-content {
-    position: absolute;
-    height: calc(100% - var(--modal-footer-height));
-    max-height: 100%;
-    width: 100%;
-    overflow-y: auto;
+  .modal-close {
+    cursor: pointer;
   }
 
-  .modal-footer {
-    border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);
-    position: absolute;
-    bottom: var(--modal-footer-divider-height);
+  // todo: remove maybe
+  h1,h2,h3,h4,h5,h6 {
+    margin: 0;
   }
 }
 
 // Modal Bottom Sheet Style
 .modal.bottom-sheet {
-  top: auto;
-  bottom: -100%;
-  margin: 0;
-  width: 100%;
+  margin-bottom: 0;
   max-height: 45%;
-  border-radius: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   will-change: bottom, opacity;
 }