kmaterialize 2.3.3-1.0.0 → 2.3.3-1.0.10

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://materialize.kevinzarshenas.com" target="_blank">
-    <img src="https://materializeweb.com/images/materialize.svg" width="200"/>
+    <img src="images/materialize.svg" width="200"/>
   </a>
 </p>
 
@@ -15,7 +15,7 @@
 ## Getting started
 Read the [getting started guide](https://materialize.kevinzarshenas.com/getting-started.html) for more information on how to use kmaterialize.
 
-- Clone the repo: `git clone https://github.com/materializecss/materialize.git`
+- Clone the repo: `git clone https://github.com/kekefreedog/kmaterialize.git`
 - Install with [npm](https://www.npmjs.com): `npm install kmaterialize`
 
 ## Testing
@@ -28,10 +28,10 @@ The documentation can be found at <https://materialize.kevinzarshenas.com>. To r
 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.
 
 ### Running documentation locally
-See [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) to see Materialize in Action.
+kmaterialize doesn't have its own docs site yet. See the upstream [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) for an example of Materialize's components in action.
 
 ### Releases
-Previous releases are available [here](https://github.com/materializecss/materialize/releases). You can also find the changelog under each release.
+Previous releases are available [here](https://github.com/kekefreedog/kmaterialize/releases). You can also find the changelog under each release.
 
 ## Supported Browsers:
 Materialize is compatible with:
@@ -49,7 +49,7 @@ We use Jasmine as our testing framework and we're trying to write a robust test
 For quick testing install live-server node package globally and run `npm run demo`
 
 ## Contributing
-Check out the [CONTRIBUTING document](docs/CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/materializecss/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
+Check out the [CONTRIBUTING document](docs/CONTRIBUTING.md) in the root of the repository to learn how you can contribute.
 
 ## Copyright and license
 Code Copyright 2026 kmaterialize. Code released under the MIT license.

package/components/appbar/appbar.css

@@ -72,7 +72,13 @@
   margin-top: -2px;
   margin-left: 15px;
   margin-right: 15px;
-  display: inline-block;
+  /* Was inline-block, which overrides .btn's own inline-flex;
+     align-items:center and breaks vertical centering of the button's
+     text - visually harmless on .btn-large (tall enough that the
+     misalignment doesn't stand out) but text nearly clips out the
+     bottom on the smaller .btn/.btn-flat/.btn-floating sizes. */
+  display: inline-flex;
+  align-items: center;
 }
 
 .navbar ul:not(.dropdown-content) > li > a.btn > .material-icons,
@@ -130,7 +136,8 @@
 .navbar .brand-logo {
   color: var(--md-sys-color-on-surface);
   font-size: var(--appbar-title-font-size);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: 0;
 }
 
@@ -151,7 +158,13 @@
 .navbar .brand-logo i.material-symbols-outlined,
 .navbar .brand-logo i.material-symbols-rounded,
 .navbar .brand-logo i.material-symbols-sharp {
-  float: left;
+  /* Was float:left, paired with an explicit height/line-height (from
+     the general .navbar i rule) sized to the whole navbar row height,
+     inside a brand-logo that's only ever as tall as its own text.
+     Floating a block that tall out of a small inline-block parent
+     with nothing to clear it let it render outside/clipped by the
+     navbar row - invisible in practice. brand-logo is flex now, so
+     this just needs to be a normal flex item. */
   margin-right: 15px;
 }
 

package/components/button/_buttons.scss

@@ -23,6 +23,19 @@
   );
 }
 
+// .btn/.btn-large/.btn-small carry no color of their own - only the
+// .filled/.tonal/.elevated/.outlined/.text modifiers do - so a bare
+// .btn with none of those had no background or text color at all,
+// same "invisible button" bug as .btn.text and .btn.elevated before
+// they were fixed. Default to filled, same as v1's plain .btn always
+// being a real visible button. Modifier classes still win (two
+// classes beats one on specificity), and .btn-floating/.btn-flat
+// already have their own complete color rules elsewhere so are
+// deliberately excluded here.
+.btn, .btn-large, .btn-small {
+  @include btn-filled;
+}
+
 // Icon
 .btn.icon-left, .btn.icon-right {
   position: relative;

package/components/card/_cards.scss

@@ -2,12 +2,14 @@
 @use '../../sass/mixins.module.scss' as *;
 
 .card-panel {
+  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+
   transition: box-shadow .25s;
   padding: 24px;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   border-radius: 12px;
   @extend .z-depth-1;
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--background-color);
 }
 
 .card {
@@ -83,7 +85,7 @@
       max-width: 50%;
 
       img {
-        border-radius: 2px 0 0 2px;
+        border-radius: 12px 0 0 12px;
         max-width: 100%;
         width: auto;
       }
@@ -119,7 +121,7 @@
     // Image background for content
     img {
       display: block;
-      border-radius: 2px 2px 0 0;
+      border-radius: 12px 12px 0 0;
       position: relative;
       left: 0;
       right: 0;
@@ -153,7 +155,7 @@
 
   .card-content {
     padding: 24px;
-    border-radius: 0 0 2px 2px;
+    border-radius: 0 0 12px 12px;
 
     p {
       margin: 0;
@@ -178,7 +180,7 @@
     padding: 0 1.6rem;
 
     &:last-child {
-      border-radius: 0 0 2px 2px;
+      border-radius: 0 0 12px 12px;
     }
     // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
     a {

package/components/collapsible/_collapsible.scss

@@ -4,6 +4,7 @@
 .collapsible {
   padding-left: 0;
   list-style-type: none;
+  background-color: var(--md-sys-color-surface);
   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);

package/components/dropdown/_dropdown.scss

@@ -15,7 +15,9 @@
   margin: 0;
   display: none;
   min-width: 100px;
+  border-radius: 12px;
   overflow-y: auto;
+  overflow-x: hidden;
   opacity: 0;
   position: absolute;
   left: 0;

package/components/list/_collection.scss

@@ -3,6 +3,7 @@
 .collection {
   padding-left: 0;
   list-style-type: none;
+  background-color: var(--md-sys-color-surface);
   margin: $element-top-margin 0 $element-bottom-margin 0;
   border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: 2px;
@@ -30,6 +31,9 @@
         height: 42px;
         overflow: hidden;
         left: 15px;
+        top: 21px; // vertically center within the 84px min-height row - without
+                   // this, absolute's default "static position" fallback puts
+                   // an <img> and an <i> icon glyph at different heights
         display: inline-block;
         vertical-align: middle;
       }

package/components/textfield/_input-fields.scss

@@ -50,7 +50,7 @@ textarea.materialize-textarea {
 
   // Default
 
-  input, textarea {
+  input:not([type=checkbox]):not([type=radio]), textarea {
     box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
     padding: 0 16px;
     padding-top: 20px;
@@ -180,7 +180,7 @@ textarea.materialize-textarea {
 
   &.outlined {
 
-    input, textarea {
+    input:not([type=checkbox]):not([type=radio]), textarea {
       padding-top: 0;
       background-color: transparent; //(--md-sys-color-background);
       border: 1px solid var(--md-sys-color-on-surface-variant);
@@ -225,7 +225,7 @@ textarea.materialize-textarea {
     // border/label/text below should pick up the error color.
     background-color: transparent;
 
-    input, textarea {
+    input:not([type=checkbox]):not([type=radio]), textarea {
       border-color: var(--md-sys-color-error);
     }
     input:focus:not([readonly]), textarea:focus:not([readonly]) {

package/dist/css/materialize.colors.min.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.0 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.10 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */