@materializecss/materialize 2.0.3-beta → 2.0.4

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2019 Materialize
+Copyright (c) 2014-2024 Materialize
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
-  <a href="https://materializecss.github.io/materialize/">
-    <img src="https://materializecss.github.io/materialize/images/materialize.svg" width="200">
+  <a href="https://materializeweb.com" target="_blank">
+    <img src="https://materializeweb.com/images/materialize.svg" width="200">
   </a>
 </p>
 
@@ -9,7 +9,7 @@
 <p align="center">
   Materialize, a CSS Framework based on Material Design.
   <br>
-  <a href="https://materializecss.github.io/materialize/"><strong>-- Browse the docs --</strong></a>
+  <a target="_blank" href="https://materializeweb.com"><strong>[ Browse the docs ]</strong></a>
   <br>
   <br>
   <a href="https://github.com/materializecss/materialize/actions/">
@@ -30,33 +30,31 @@
 </p>
 
 ## Quickstart
-Read the [getting started guide](https://materializecss.github.io/materialize/getting-started.html) for more information on how to use materialize.
+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/))
 - Clone the repo: `git clone https://github.com/materializecss/materialize.git`
 - 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`)
 
-## Documentation
-The documentation can be found at <https://materializecss.github.io/materialize>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org/en/) installed on your computer.
+## 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.
 
-### Running documentation locally
-Run these commands to set up the documentation:
-
-```bash
-git clone https://github.com/materializecss/materialize
-cd materialize
+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
 ```
 
-Then run `npm run dev` to compile the documentation. When it finishes, open a new browser window and navigate to `localhost:8000/docs`. We use [BrowserSync](https://www.browsersync.io/) to display the documentation.
+### Running documentation locally
+See [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) to see Materialize in Action.
 
 ### Documentation for previous releases
-Previous releases and their documentation are available for [download](https://github.com/materializecss/materialize/releases).
-
-## Build
-If you want to build `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`.
+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>
 ```
@@ -100,4 +98,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 [![Backers](https://opencollective.com/materialize/backers.svg?width=890)](https://opencollective.com/materialize#backers)
 
 ## Copyright and license
-Code Copyright 2023 Materialize. Code released under the MIT license.
+Code Copyright 2024 Materialize. Code released under the MIT license.

package/dist/css/materialize.css

@@ -1,6 +1,6 @@
 /*!
- * Materialize v2.0.3-beta (https://materializecss.github.io/materialize)
- * Copyright 2014-2023 Materialize
+ * Materialize v2.0.4 (https://materializeweb.com)
+ * Copyright 2014-2024 Materialize
  * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
  */
 @charset "UTF-8";
@@ -3457,7 +3457,7 @@ video.responsive-video {
     width: 100%;
   }
   .pagination li.prev,
-.pagination li.next {
+  .pagination li.next {
     width: 10%;
   }
   .pagination li.pages {
@@ -3716,7 +3716,7 @@ td, th {
     content: " ";
   }
   table.responsive-table th,
-table.responsive-table td {
+  table.responsive-table td {
     margin: 0;
     vertical-align: top;
   }
@@ -5564,23 +5564,33 @@ small {
   }
 }
 .material-tooltip {
-  padding: 10px 8px;
-  font-size: 1rem;
-  z-index: 2000;
-  border-radius: 2px;
-  color: var(--tooltip-font-color);
-  min-height: 36px;
-  line-height: 120%;
+  padding: 0 8px;
+  border-radius: 4px;
+  background-color: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  min-height: 24px;
   opacity: 0;
-  position: absolute;
   text-align: center;
+  position: absolute;
   max-width: calc(100% - 4px);
   overflow: hidden;
   left: 0;
   top: 0;
   pointer-events: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   visibility: hidden;
-  background-color: var(--tooltip-background-color);
+  z-index: 2000;
 }
 
 .backdrop {
@@ -5589,7 +5599,7 @@ small {
   height: 7px;
   width: 14px;
   border-radius: 0 0 50% 50%;
-  background-color: var(--tooltip-background-color);
+  background-color: var(--md-sys-color-inverse-surface);
   z-index: -1;
   -webkit-transform-origin: 50% 0;
           transform-origin: 50% 0;
@@ -6157,16 +6167,28 @@ body.keyboard-focused .dropdown-content li:focus {
   margin-right: 1rem;
 }
 
+.collapsible-header::after {
+  content: "▾";
+  text-align: right;
+  margin-right: 0.25rem;
+  width: 100%;
+}
+
+.active .collapsible-header::after {
+  content: "▴";
+}
+
 .keyboard-focused .collapsible-header:focus {
   background-color: var(--focus-color);
 }
 
 .collapsible-body {
-  display: none;
+  max-height: 0;
   border-bottom: 1px solid var(--separator-color);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  padding: 2rem;
+  padding: 0 2rem;
+  overflow: hidden;
   background-color: var(--surface-color);
 }
 
@@ -6353,7 +6375,7 @@ body.keyboard-focused .dropdown-content li:focus {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: #292929;
+  background-color: var(--md-sys-color-background);
   z-index: 1000;
   will-change: opacity;
 }
@@ -6361,7 +6383,7 @@ body.keyboard-focused .dropdown-content li:focus {
 .materialbox-caption {
   position: fixed;
   display: none;
-  color: #fff;
+  color: var(--font-color-main);
   line-height: 50px;
   bottom: 0;
   left: 0;
@@ -6396,6 +6418,9 @@ label {
 ::-moz-placeholder {
   color: var(--font-color-medium);
 }
+:-ms-input-placeholder {
+  color: var(--font-color-medium);
+}
 ::-ms-input-placeholder {
   color: var(--font-color-medium);
 }
@@ -6464,6 +6489,14 @@ textarea.materialize-textarea {
 .input-field input:focus:not([readonly]) + label, .input-field textarea:focus:not([readonly]) + label {
   color: var(--primary-color);
 }
+.input-field input:not(:-moz-placeholder-shown) + label, .input-field textarea:not(:-moz-placeholder-shown) + label {
+  transform: scale(0.75);
+  top: 8px;
+}
+.input-field input:not(:-ms-input-placeholder) + label, .input-field textarea:not(:-ms-input-placeholder) + label {
+  transform: scale(0.75);
+  top: 8px;
+}
 .input-field input:focus:not([readonly]) + label, .input-field input:not([placeholder=" "]) + label, .input-field input:not(:placeholder-shown) + label, .input-field textarea:focus:not([readonly]) + label, .input-field textarea:not([placeholder=" "]) + label, .input-field textarea:not(:placeholder-shown) + label {
   -webkit-transform: scale(0.75);
           transform: scale(0.75);
@@ -6480,6 +6513,10 @@ textarea.materialize-textarea {
   -moz-user-select: none;
        user-select: none;
 }
+.input-field input:-ms-input-placeholder {
+  -ms-user-select: none;
+      user-select: none;
+}
 .input-field input::-ms-input-placeholder {
   -ms-user-select: none;
       user-select: none;
@@ -6569,6 +6606,20 @@ textarea.materialize-textarea {
 .input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined textarea:focus:not([readonly]) + label {
   color: var(--primary-color);
 }
+.input-field.outlined input:not(:-moz-placeholder-shown) + label, .input-field.outlined textarea:not(:-moz-placeholder-shown) + label {
+  top: -8px;
+  left: 16px;
+  margin-left: -4px;
+  padding: 0 4px;
+  background-color: var(--background-color);
+}
+.input-field.outlined input:not(:-ms-input-placeholder) + label, .input-field.outlined textarea:not(:-ms-input-placeholder) + label {
+  top: -8px;
+  left: 16px;
+  margin-left: -4px;
+  padding: 0 4px;
+  background-color: var(--background-color);
+}
 .input-field.outlined input:focus:not([readonly]) + label, .input-field.outlined input:not([placeholder=" "]) + label, .input-field.outlined input:not(:placeholder-shown) + label, .input-field.outlined textarea:focus:not([readonly]) + label, .input-field.outlined textarea:not([placeholder=" "]) + label, .input-field.outlined textarea:not(:placeholder-shown) + label {
   top: -8px;
   left: 16px;
@@ -7429,10 +7480,8 @@ input[type=range]::-moz-range-thumb {
   width: 14px;
   border-radius: 50%;
   background: var(--primary-color);
-  -webkit-transition: -webkit-box-shadow 0.3s;
-  transition: -webkit-box-shadow 0.3s;
+  -moz-transition: box-shadow 0.3s;
   transition: box-shadow 0.3s;
-  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
   margin-top: -5px;
 }
 
@@ -7470,10 +7519,8 @@ input[type=range]::-ms-thumb {
   width: 14px;
   border-radius: 50%;
   background: var(--primary-color);
-  -webkit-transition: -webkit-box-shadow 0.3s;
-  transition: -webkit-box-shadow 0.3s;
+  -ms-transition: box-shadow 0.3s;
   transition: box-shadow 0.3s;
-  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
 }
 
 .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
@@ -8871,8 +8918,8 @@ input[type=range]::-ms-thumb {
             flex: 0 1 270px;
   }
   .datepicker-controls,
-.datepicker-table,
-.datepicker-footer {
+  .datepicker-table,
+  .datepicker-footer {
     width: 320px;
   }
   .datepicker-day-button {