kmaterialize 2.3.3-1.0.16 → 2.3.3-1.0.18

package/components/appbar/appbar.css

@@ -161,6 +161,17 @@
   order: 1;
   flex: 1 1 0;
   min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
+  display: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul > li > a {
+  white-space: nowrap;
 }
 
 .navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
@@ -196,24 +207,41 @@
 /* Structured MD3 app-bar content. These hooks keep branded demos and app
    shells from falling back to bare, loosely spaced anchor elements. */
 .navbar.appbar-bordered {
-  overflow: hidden;
+  overflow: visible;
   background: var(--md-sys-color-surface-variant);
   border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 16px;
+  border-radius: 0;
   box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
 }
 
+/* Layout variants. `navbar-rounded` adds the inset treatment; use
+   `navbar-full` for a flush, full-width rectangle. */
+.navbar.appbar-bordered.navbar-rounded {
+  margin: 8px 0;
+  padding: 4px;
+  border-radius: 16px;
+}
+
+.navbar.appbar-bordered.navbar-full {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
 /* Extended app bars may contain tabs and a halfway FAB. Keep the rounded
    surface on its children, but let the FAB extend below the bar. */
 .navbar.appbar-bordered.nav-extended {
   overflow: visible;
 }
 
-.navbar.appbar-bordered.nav-extended .nav-wrapper {
+.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-wrapper {
   border-radius: 15px 15px 0 0;
 }
 
-.navbar.appbar-bordered.nav-extended .nav-content {
+.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-content {
   color: var(--md-sys-color-on-surface);
   background: var(--md-sys-color-surface-variant);
   border-radius: 0 0 15px 15px;
@@ -223,6 +251,49 @@
   gap: 12px;
   padding-inline: 12px;
   background: var(--md-sys-color-surface-variant);
+  align-items: center;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper > .brand-logo,
+.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content),
+.navbar.appbar-bordered .nav-actions > li {
+  align-self: center;
+}
+
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > .brand-logo,
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content),
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content) > li {
+  height: 40px;
+}
+
+.navbar.appbar-bordered .nav-actions > li {
+  display: flex;
+  align-items: center;
+}
+
+.navbar.appbar-bordered .nav-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content) {
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+.navbar.appbar-bordered.navbar-wrap .nav-wrapper {
+  flex-wrap: wrap;
+  height: auto;
+  row-gap: 8px;
+  overflow: visible;
+}
+
+.navbar.appbar-bordered.navbar-wrap .nav-wrapper > ul:not(.dropdown-content) {
+  flex-wrap: wrap;
+  white-space: normal;
 }
 
 .navbar .brand-logo .brand-logo-image {
@@ -319,15 +390,25 @@
   margin: 0;
   color: var(--md-sys-color-on-primary);
   white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 }
 
 .navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
+  flex: 0 0 20px;
   width: 20px;
   height: 20px;
   margin-left: 8px;
   line-height: 20px;
 }
 
+.navbar.appbar-bordered .dropdown-trigger {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
 .navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
   display: grid;
   place-items: center;

package/components/dropdown/dropdown.ts

@@ -248,7 +248,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
       // isTouchMoving to check if scrolling on mobile.
       this.close();
-    } else if (!target.closest('.dropdown-content')) {
+    } else if (!target.closest('.dropdown-content') && !target.closest('.dropdown-trigger')) {
       // Do this one frame later so that if the element clicked also triggers _handleClick
       // For example, if a label for a select was clicked, that we don't close/open the dropdown
       setTimeout(() => {

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

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

package/dist/css/materialize.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.16 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.18 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -15368,6 +15368,17 @@ body.keyboard-focused .dropdown-content li:focus {
       -ms-flex: 1 1 0px;
           flex: 1 1 0;
   min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
+  display: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul > li > a {
+  white-space: nowrap;
 }
 
 .navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
@@ -15410,25 +15421,42 @@ body.keyboard-focused .dropdown-content li:focus {
 /* Structured MD3 app-bar content. These hooks keep branded demos and app
    shells from falling back to bare, loosely spaced anchor elements. */
 .navbar.appbar-bordered {
-  overflow: hidden;
+  overflow: visible;
   background: var(--md-sys-color-surface-variant);
   border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 16px;
+  border-radius: 0;
   -webkit-box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
           box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
 }
 
+/* Layout variants. `navbar-rounded` adds the inset treatment; use
+   `navbar-full` for a flush, full-width rectangle. */
+.navbar.appbar-bordered.navbar-rounded {
+  margin: 8px 0;
+  padding: 4px;
+  border-radius: 16px;
+}
+
+.navbar.appbar-bordered.navbar-full {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
 /* Extended app bars may contain tabs and a halfway FAB. Keep the rounded
    surface on its children, but let the FAB extend below the bar. */
 .navbar.appbar-bordered.nav-extended {
   overflow: visible;
 }
 
-.navbar.appbar-bordered.nav-extended .nav-wrapper {
+.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-wrapper {
   border-radius: 15px 15px 0 0;
 }
 
-.navbar.appbar-bordered.nav-extended .nav-content {
+.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-content {
   color: var(--md-sys-color-on-surface);
   background: var(--md-sys-color-surface-variant);
   border-radius: 0 0 15px 15px;
@@ -15438,6 +15466,66 @@ body.keyboard-focused .dropdown-content li:focus {
   gap: 12px;
   padding-inline: 12px;
   background: var(--md-sys-color-surface-variant);
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper > .brand-logo,
+.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content),
+.navbar.appbar-bordered .nav-actions > li {
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > .brand-logo,
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content),
+.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content) > li {
+  height: 40px;
+}
+
+.navbar.appbar-bordered .nav-actions > li {
+  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;
+}
+
+.navbar.appbar-bordered .nav-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content) {
+  min-width: 0;
+  -webkit-flex-shrink: 1;
+      -ms-flex-negative: 1;
+          flex-shrink: 1;
+}
+
+.navbar.appbar-bordered.navbar-wrap .nav-wrapper {
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  height: auto;
+  row-gap: 8px;
+  overflow: visible;
+}
+
+.navbar.appbar-bordered.navbar-wrap .nav-wrapper > ul:not(.dropdown-content) {
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  white-space: normal;
 }
 
 .navbar .brand-logo .brand-logo-image {
@@ -15550,15 +15638,40 @@ body.keyboard-focused .dropdown-content li:focus {
   margin: 0;
   color: var(--md-sys-color-on-primary);
   white-space: nowrap;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  gap: 8px;
 }
 
 .navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 20px;
+      -ms-flex: 0 0 20px;
+          flex: 0 0 20px;
   width: 20px;
   height: 20px;
   margin-left: 8px;
   line-height: 20px;
 }
 
+.navbar.appbar-bordered .dropdown-trigger {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  white-space: nowrap;
+}
+
 .navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
   display: grid;
   place-items: center;