@materializecss/materialize 2.1.0 → 2.1.1

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.1.1",
   "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,11 @@
     }
   ],
   "scripts": {
-    "dev": "grunt monitor",
-    "test": "grunt test",
-    "release": "grunt release",
-    "watch": "webpack --watch"
+    "test": "npx 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",
+    "version": "npm run build && node ci/compress.js && git add -A dist src/index.ts"
   },
   "lint-staged": {
     "js/*.js": [
@@ -46,27 +52,21 @@
   ],
   "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",
     "jasmine": "^5.1.0",
-    "sass": "^1.35.2",
-    "ts-loader": "^9.4.2",
-    "typescript": "^5.4.3",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "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",
+    "rollup-plugin-zip": "^1.0.3",
+    "sass": "^1.77.8",
+    "tslib": "^2.6.3",
+    "typescript": "^5.4.3"
   },
   "files": [
     "dist",

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)); }

package/sass/components/_tapTarget.scss

@@ -36,8 +36,8 @@
   position: absolute;
   font-size: 1rem;
   border-radius: 50%;
-  background-color: var(--md-sys-color-surface);//var(--md-sys-color-secondary);
-  color: var(--md-sys-color-on-secondary);
+  background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-primary);
   box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
   width: 100%;
   height: 100%;

package/sass/components/forms/_select.scss

@@ -1,6 +1,3 @@
-/* Select Field
-   ========================================================================== */
-
 select.browser-default {
   opacity: 1;
   color: var(--md-sys-color-on-background);
@@ -16,11 +13,6 @@ select {
   height: 3rem;
 }
 
-// .select-label {
-//   position: absolute;
-// }
-
-
 .select-wrapper {
   /*
   &.valid .helper-text[data-success],
@@ -57,8 +49,6 @@ select {
   }
   */
 
-
-
   position: relative;
 
   /*
@@ -95,14 +85,6 @@ select {
     fill: var(--md-sys-color-on-background);
   }
 
-  /*
-  & + label {
-    position: absolute;
-    top: -26px;
-    font-size: .8rem;
-  }
-  */
-
   // Hide select with overflow hidden instead of using display none
   // (this prevents form validation errors with hidden form elements)
   .hide-select {
@@ -115,7 +97,6 @@ select {
   }
 }
 
-// Disabled styles
 select:disabled {
   color: var(--md-sys-color-on-surface);
 }
@@ -196,20 +177,19 @@ body.keyboard-focused {
 // Optgroup styles
 .select-dropdown li.optgroup {
   border-top: 1px solid rgba(0, 0, 0, 0.04);
-
   &.selected > span {
     color: var(--md-sys-color-on-background);
   }
-
   & > span {
     color: var(--md-sys-color-on-surface-variant);
   }
-
   & ~ li.optgroup-option {
     padding-left: 1rem;
   }
 }
 
+/*
 .select-dropdown .selected {
   color: red;
 }
+*/