kmaterialize 2.3.3-1.0.1 → 2.3.3-1.0.11

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;
@@ -243,6 +256,22 @@ button.btn-floating {
     }
   }
 
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Anchors the FAB (and its expanded menu) to the top of the viewport
+  // instead of the bottom, for layouts where the bottom edge is already
+  // occupied (e.g. a footer or bottom nav).
+  &.top {
+    top: 23px;
+    bottom: unset;
+    padding-bottom: 15px;
+    padding-top: 0;
+
+    > ul {
+      top: 64px;
+      bottom: unset;
+    }
+  }
+
   &.toolbar {
     padding: 0;
     height: 56px;

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;
@@ -166,6 +168,12 @@
 
       i {
         line-height: 32px;
+
+        // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+        // Sits on the title's baseline with a small gap before the text,
+        // instead of floating flush against it mid-line.
+        vertical-align: text-bottom;
+        margin-right: 6px;
       }
 
       &.activator {
@@ -178,7 +186,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,11 +4,24 @@
 .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);
   margin: $element-top-margin 0 $element-bottom-margin 0;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Matches the 12px corner radius used across cards, dropdowns and
+  // collections instead of square corners.
+  border-radius: 12px;
   @extend .z-depth-1;
+
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Only clip to the rounded corners while every item is closed - an open
+  // last item's body needs to be able to grow past the list's own bottom
+  // edge instead of being cut off by it.
+  &:not(:has(li:last-child.active)) {
+    overflow: hidden;
+  }
 }
 
 .collapsible-header {
@@ -61,6 +74,43 @@
   overflow: hidden;
 }
 
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+// Round the corners of the first/last item's own header/body so they
+// follow the list's rounded outline instead of showing a square edge
+// inside it. Longhand corners (not the `border-radius` shorthand) so that
+// a single-item accordion - where the same <li> is both first and last -
+// gets all 4 corners rounded instead of the last-child rule's shorthand
+// wiping out the top corners the first-child rule just set.
+.collapsible > li:first-child .collapsible-header {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.collapsible > li:last-child {
+  &:not(.active) .collapsible-header {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    transition-delay: 250ms;
+    transition-property: border-radius;
+  }
+
+  &.active .collapsible-body {
+    border-radius: 0 0 12px 12px;
+  }
+}
+
+// CSS resolves border-radius per-corner, not per-rule: once the
+// :not(.active) rule above stops matching, nothing here fixes the bottom
+// corners back to square, so a more specific rule elsewhere (e.g. the
+// sidenav's `li > a { border-radius: 100px; }` pill styling, which also
+// matches .collapsible-header since it's an <a> inside a sidenav <li>)
+// is free to fill that gap and leave the header rounded on all 4 corners
+// while expanded. Force it explicitly instead of leaving it implicit.
+.collapsible > li.active .collapsible-header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 // Popout Collapsible
 
 .collapsible.popout {

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,9 +3,13 @@
 .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;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Matches the 12px corner radius used across cards, dropdowns and
+  // collapsibles instead of the near-square 2px default.
+  border-radius: 12px;
   overflow: hidden;
   position: relative;
 
@@ -30,6 +34,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;
       }
@@ -86,7 +93,11 @@
 
   &.with-header {
     .collection-header {
-      background-color: transparent;
+      // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+      // A tinted header reads as its own row instead of blending into the
+      // list; it also isn't text, so it shouldn't be selectable.
+      background-color: var(--md-sys-color-surface-variant);
+      user-select: none;
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
       padding: 10px 20px;
     }

package/components/switch/_switches.scss

@@ -23,6 +23,11 @@
   opacity: 0;
   width: 0;
   height: 0;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Without this, an inherited padding can push the (invisible, 0x0)
+  // checkbox out of alignment with the lever it's meant to sit under.
+  box-sizing: border-box;
+  padding: 0 !important;
 
   // CHECKED
   // Track

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.1 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.11 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */