kmaterialize 2.3.3-1.0.31 → 2.3.3-1.0.32

package/components/appbar/appbar.css

@@ -20,6 +20,8 @@
 }
 
 .navbar {
+  border: 0;
+  border-radius: 0;
   color: var(--md-sys-color-on-primary);
   background-color: var(--md-sys-color-secondary-container);
   width: 100%;
@@ -150,14 +152,14 @@
 /* Collision-safe centered app bar: the left link region and the generated
    right spacer share the available width, keeping the logo truly centered
    without taking it out of the flex layout. */
-.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered::after {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered::after {
   content: '';
   order: 3;
   flex: 1 1 0;
   min-width: 0;
 }
 
-.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul {
   order: 1;
   flex: 1 1 0;
   min-width: 0;
@@ -166,15 +168,15 @@
   scrollbar-width: none;
 }
 
-.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
   display: none;
 }
 
-.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul > li > a {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > ul > li > a {
   white-space: nowrap;
 }
 
-.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
   position: static;
   order: 2;
   flex: 0 0 auto;
@@ -206,23 +208,29 @@
 
 /* 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 {
+.navbar:is(.appbar, .appbar-bordered) {
   overflow: visible;
   background: var(--md-sys-color-surface-variant);
-  border: 1px solid var(--md-sys-color-outline-variant);
+  border: 0;
   border-radius: 0;
-  box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
+  box-shadow: none;
+}
+
+/* Retain the original class as an explicit outline option. */
+.navbar.appbar-bordered {
+  border: 1px solid var(--md-sys-color-outline-variant);
 }
 
 /* Layout variants. `navbar-rounded` adds the inset treatment; use
    `navbar-full` for a flush, full-width rectangle. */
-.navbar.appbar-bordered.navbar-rounded {
+.navbar:is(.appbar, .appbar-bordered).navbar-rounded {
   margin: 8px 0;
   padding: 4px;
   border-radius: 16px;
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
 }
 
-.navbar.appbar-bordered.navbar-full {
+.navbar:is(.appbar, .appbar-bordered).navbar-full {
   width: 100%;
   margin: 0;
   padding: 0;
@@ -233,21 +241,21 @@
 
 /* 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 {
+.navbar:is(.appbar, .appbar-bordered).nav-extended {
   overflow: visible;
 }
 
-.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-wrapper {
+.navbar:is(.appbar, .appbar-bordered).nav-extended.navbar-rounded .nav-wrapper {
   border-radius: 15px 15px 0 0;
 }
 
-.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-content {
+.navbar:is(.appbar, .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;
 }
 
-.navbar.appbar-bordered .nav-wrapper {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper {
   gap: 12px;
   padding-inline: 12px;
   background: var(--md-sys-color-surface-variant);
@@ -258,40 +266,40 @@
   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 {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > .brand-logo,
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul:not(.dropdown-content),
+.navbar:is(.appbar, .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 {
+.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > .brand-logo,
+.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content),
+.navbar:is(.appbar, .appbar-bordered):not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content) > li {
   height: 40px;
 }
 
-.navbar.appbar-bordered .nav-actions > li {
+.navbar:is(.appbar, .appbar-bordered) .nav-actions > li {
   display: flex;
   align-items: center;
 }
 
-.navbar.appbar-bordered .nav-wrapper::-webkit-scrollbar {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper::-webkit-scrollbar {
   display: none;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content) {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul:not(.dropdown-content) {
   min-width: 0;
   flex-shrink: 1;
 }
 
-.navbar.appbar-bordered.navbar-wrap .nav-wrapper {
+.navbar:is(.appbar, .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) {
+.navbar:is(.appbar, .appbar-bordered).navbar-wrap .nav-wrapper > ul:not(.dropdown-content) {
   flex-wrap: wrap;
   white-space: normal;
 }
@@ -325,7 +333,7 @@
   gap: 8px;
 }
 
-.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating) {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating) {
   box-sizing: border-box;
   height: 40px;
   padding-inline: 12px;
@@ -333,11 +341,11 @@
   border-radius: 20px;
 }
 
-.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating):hover {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li > a:not(.btn):not(.btn-floating):hover {
   background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
 
-.navbar.appbar-bordered ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li.active > a:not(.btn):not(.btn-floating) {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.nav-actions):not(.tabs) > li.active > a:not(.btn):not(.btn-floating) {
   color: var(--md-sys-color-on-primary-container);
   background: var(--md-sys-color-primary-container);
 }
@@ -345,9 +353,9 @@
 /* Text links use the same centred row as the app bar. The global navbar icon
    rule intentionally sizes standalone icons to the full bar; undo that for
    icons embedded beside link text. */
-.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.left),
-.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.right),
-.navbar.appbar-bordered .dropdown-trigger:has(> .material-icons) {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.left),
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a:not(.btn):not(.btn-floating):has(> .material-icons.right),
+.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger:has(> .material-icons) {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -356,25 +364,25 @@
   line-height: 1;
 }
 
-.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons:is(.left, .right) {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons:is(.left, .right) {
   width: 24px;
   height: 24px;
   margin: 0;
   line-height: 24px;
 }
 
-.navbar.appbar-bordered ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons.right {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content):not(.tabs) > li > a > .material-icons.right {
   order: 1;
 }
 
 /* Tabs retain their component geometry and click target instead of inheriting
    navigation-pill spacing. */
-.navbar.appbar-bordered .tabs {
+.navbar:is(.appbar, .appbar-bordered) .tabs {
   gap: 0;
   background: transparent;
 }
 
-.navbar.appbar-bordered .tabs .tab > a {
+.navbar:is(.appbar, .appbar-bordered) .tabs .tab > a {
   height: 48px;
   min-height: 48px;
   padding-inline: 24px;
@@ -384,7 +392,7 @@
 
 /* Buttons must remain legible and vertically centred in the constrained app
    bar row, including legacy examples using btn-large. */
-.navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > :is(.btn, .btn-large) {
   box-sizing: border-box;
   max-height: 48px;
   margin: 0;
@@ -396,7 +404,7 @@
   gap: 8px;
 }
 
-.navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
@@ -404,19 +412,19 @@
   line-height: 20px;
 }
 
-.navbar.appbar-bordered .dropdown-trigger {
+.navbar:is(.appbar, .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) {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
   display: grid;
   place-items: center;
   width: 40px;
   padding: 0;
 }
 
-.navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) > .material-icons {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) > .material-icons {
   width: 24px;
   height: 24px;
   line-height: 24px;

package/components/appbar/navbar-auto-hide.scss

@@ -0,0 +1,30 @@
+// Sticky positioning preserves the navbar's space without a fixed-height spacer.
+.navbar.navbar-hide-on-scroll {
+  position: sticky;
+  top: var(--navbar-hide-offset, 0px);
+  z-index: 997;
+  translate: 0 0;
+  transition: translate 180ms ease;
+
+  &.is-navbar-hidden {
+    translate: 0 calc(-100% - var(--navbar-hide-offset, 0px) - 2px);
+    pointer-events: none;
+  }
+
+  // Keep offscreen links reachable by Tab, and reveal them immediately on focus.
+  &:focus-within { translate: 0 0; pointer-events: auto; transition: none; }
+}
+
+// Preserve sticky positioning when horizontal overflow styles are also enabled.
+.navbar.navbar-hide-on-scroll.navbar-scroll { position: sticky; }
+
+// Retain the existing fixed-navbar wrapper behavior.
+.navbar-fixed > .navbar.navbar-hide-on-scroll { position: fixed; }
+
+@media (prefers-reduced-motion: reduce) {
+  .navbar.navbar-hide-on-scroll { transition: none; }
+}
+
+@media print {
+  .navbar.navbar-hide-on-scroll, .navbar-fixed > .navbar.navbar-hide-on-scroll { position: static; translate: none; }
+}

package/components/appbar/navbar-auto-hide.ts

@@ -0,0 +1,88 @@
+import { BaseOptions, Component, InitElements, MElement } from '../../src/component';
+
+export interface NavbarAutoHideOptions extends BaseOptions {
+  /** Null watches the page. Supply an element for an independently scrolling panel. */
+  scrollTarget: HTMLElement | null;
+  /** Accumulated pixels in one direction before changing visibility. */
+  tolerance: number;
+  /** Keep the navbar visible within this many pixels of the top. */
+  offset: number;
+}
+
+/** A sticky navbar that hides going down and returns going up. */
+export class NavbarAutoHide extends Component<NavbarAutoHideOptions> {
+  private _target: HTMLElement | Window;
+  private _events = new AbortController();
+  private _frame = 0;
+  private _last = 0;
+  private _distance = 0;
+  private _direction = 0;
+  private _originalClasses: string[];
+
+  constructor(el: HTMLElement, options: Partial<NavbarAutoHideOptions> = {}) {
+    const settings = { ...NavbarAutoHide.defaults, ...options };
+    if (!Number.isFinite(settings.tolerance) || settings.tolerance < 0) throw new Error('Navbar scroll tolerance must be a non-negative number.');
+    if (!Number.isFinite(settings.offset) || settings.offset < 0) throw new Error('Navbar scroll offset must be a non-negative number.');
+    if (settings.scrollTarget !== null && !(settings.scrollTarget instanceof HTMLElement)) throw new Error('Navbar scrollTarget must be an HTMLElement or null.');
+    super(el, options, NavbarAutoHide);
+    this.options = settings;
+    this._target = settings.scrollTarget || window;
+    this._originalClasses = ['navbar-hide-on-scroll', 'is-navbar-hidden'].filter(name => el.classList.contains(name));
+    el.classList.add('navbar-hide-on-scroll');
+    el.classList.remove('is-navbar-hidden');
+    el['M_NavbarAutoHide'] = this;
+    this._last = this._position();
+    const signal = this._events.signal;
+    this._target.addEventListener('scroll', this._schedule, { passive: true, signal });
+    window.addEventListener('resize', this._reset, { signal });
+    window.addEventListener('pageshow', this._reset, { signal });
+    el.addEventListener('focusin', this._reset, { signal });
+    el.addEventListener('focusout', this._reset, { signal });
+  }
+
+  static get defaults(): NavbarAutoHideOptions { return { scrollTarget: null, tolerance: 4, offset: 0 }; }
+  static init(el: HTMLElement, options?: Partial<NavbarAutoHideOptions>): NavbarAutoHide;
+  static init(els: InitElements<MElement>, options?: Partial<NavbarAutoHideOptions>): NavbarAutoHide[];
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<NavbarAutoHideOptions> = {}): NavbarAutoHide | NavbarAutoHide[] {
+    return super.init(els, options, NavbarAutoHide);
+  }
+  static getInstance(el: HTMLElement): NavbarAutoHide { return el['M_NavbarAutoHide']; }
+
+  private _position(): number {
+    const target = this.options.scrollTarget;
+    const max = target ? target.scrollHeight - target.clientHeight : (document.scrollingElement?.scrollHeight || 0) - window.innerHeight;
+    return Math.max(0, Math.min(Math.max(0, max), target ? target.scrollTop : window.scrollY));
+  }
+
+  private _reset = (): void => {
+    cancelAnimationFrame(this._frame); this._frame = 0;
+    this._last = this._position(); this._distance = 0; this._direction = 0;
+    this.el.classList.remove('is-navbar-hidden');
+  };
+
+  private _schedule = (): void => {
+    if (!this._frame) this._frame = requestAnimationFrame(this._update);
+  };
+
+  private _update = (): void => {
+    this._frame = 0;
+    const position = this._position(), delta = position - this._last;
+    this._last = position;
+    if (position <= this.options.offset || this.el.contains(document.activeElement)) { this._reset(); return; }
+    if (!delta) return;
+    const direction = Math.sign(delta);
+    if (direction !== this._direction) this._distance = 0;
+    this._direction = direction;
+    this._distance += Math.abs(delta);
+    if (this._distance >= this.options.tolerance) {
+      this.el.classList.toggle('is-navbar-hidden', direction > 0);
+      this._distance = 0;
+    }
+  };
+
+  destroy(): void {
+    this._events.abort(); cancelAnimationFrame(this._frame);
+    for (const name of ['navbar-hide-on-scroll', 'is-navbar-hidden']) this.el.classList.toggle(name, this._originalClasses.includes(name));
+    delete this.el['M_NavbarAutoHide'];
+  }
+}

package/components/appbar/navbar-content.scss

@@ -14,7 +14,7 @@
 }
 
 /* Inset surfaces retain their height at desktop and mobile sizes. */
-.navbar.appbar-bordered.navbar-rounded:not(.nav-extended):not(.navbar-wrap) {
+.navbar:is(.appbar, .appbar-bordered).navbar-rounded:not(.nav-extended):not(.navbar-wrap) {
   box-sizing: border-box;
   height: 64px;
   margin: 8px 0;
@@ -23,7 +23,7 @@
   overflow: hidden;
 }
 
-.navbar.appbar-bordered.navbar-rounded:not(.nav-extended):not(.navbar-wrap) > .nav-wrapper {
+.navbar:is(.appbar, .appbar-bordered).navbar-rounded:not(.nav-extended):not(.navbar-wrap) > .nav-wrapper {
   box-sizing: border-box;
   flex: 0 0 56px;
   height: 56px;
@@ -31,7 +31,7 @@
   transform: none;
 }
 
-.navbar.appbar-bordered.navbar-full {
+.navbar:is(.appbar, .appbar-bordered).navbar-full {
   width: 100%;
   margin: 0;
   padding: 0;
@@ -42,7 +42,7 @@
 
 /* Dropdown triggers: keep the label and arrow in one predictable hit
    target instead of inheriting the legacy floated-icon offsets. */
-.navbar.appbar-bordered .dropdown-trigger {
+.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
@@ -55,7 +55,7 @@
   line-height: 1;
 }
 
-.navbar.appbar-bordered .dropdown-trigger > .material-icons {
+.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger > .material-icons {
   display: inline-block !important;
   position: static !important;
   float: none !important;
@@ -66,7 +66,7 @@
   transition: transform 160ms ease;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li:has(> .dropdown-trigger) {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> .dropdown-trigger) {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -75,18 +75,18 @@
   padding: 0;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li:has(> .dropdown-trigger) > .dropdown-trigger {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> .dropdown-trigger) > .dropdown-trigger {
   flex: 0 0 auto;
   align-self: center;
   margin: 0;
 }
 
-.navbar.appbar-bordered .dropdown-trigger[aria-expanded="true"] > .material-icons.right {
+.navbar:is(.appbar, .appbar-bordered) .dropdown-trigger[aria-expanded="true"] > .material-icons.right {
   transform: rotate(180deg);
 }
 
 /* Icon links: center standalone icons inside their 40px hit targets. */
-.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child) {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -97,7 +97,7 @@
   padding: 0;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons:only-child) {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons:only-child) {
   display: inline-grid !important;
   place-items: center;
   box-sizing: border-box;
@@ -108,7 +108,7 @@
   line-height: 1;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child {
   display: block !important;
   position: static !important;
   float: none !important;
@@ -119,8 +119,8 @@
   text-align: center;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.left),
-.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.right) {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.left),
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.right) {
   display: inline-flex !important;
   align-items: center;
   gap: 8px;
@@ -134,8 +134,8 @@
   white-space: nowrap;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left,
-.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left,
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right {
   display: block !important;
   position: static !important;
   float: none !important;
@@ -147,8 +147,8 @@
   text-align: center;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left),
-.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right) {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left),
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right) {
   flex: 0 0 auto;
   width: max-content;
   height: 40px;
@@ -156,7 +156,7 @@
 
 /* Button rows: normalize the item row and prevent text-plus-icon buttons
    from being mistaken for standalone icon buttons. */
-.navbar.appbar-bordered .nav-wrapper > ul > li:has(> :is(.btn, .btn-large)) {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li:has(> :is(.btn, .btn-large)) {
   display: flex;
   align-items: center;
   flex: 0 0 auto;
@@ -165,8 +165,8 @@
   padding: 0;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn,
-.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn,
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn-large {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
@@ -181,20 +181,20 @@
   white-space: nowrap;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn-large {
   min-width: 144px;
   height: 48px;
   min-height: 48px;
   padding-inline: 24px !important;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn:has(> .material-icons),
-.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large:has(> .material-icons) {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn:has(> .material-icons),
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn-large:has(> .material-icons) {
   gap: 8px;
 }
 
-.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn > .material-icons,
-.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large > .material-icons {
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn > .material-icons,
+.navbar:is(.appbar, .appbar-bordered) .nav-wrapper > ul > li > a.btn-large > .material-icons {
   display: block !important;
   position: static !important;
   float: none !important;
@@ -207,32 +207,32 @@
 
 /* Extended navbar tabs: use the navbar's readable foreground instead of the
    low-contrast primary token inherited by transparent tabs. */
-.navbar.appbar-bordered .nav-content,
-.navbar.appbar-bordered .nav-content .tabs {
+.navbar:is(.appbar, .appbar-bordered) .nav-content,
+.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs {
   background: var(--md-sys-color-surface-variant);
 }
 
-.navbar.appbar-bordered .nav-content .tabs > .tab > a {
+.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs > .tab > a {
   color: var(--md-sys-color-on-surface) !important;
   opacity: 0.92;
 }
 
-.navbar.appbar-bordered .nav-content .tabs > .tab > a.active {
+.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs > .tab > a.active {
   color: var(--md-sys-color-on-surface) !important;
   opacity: 1;
   font-weight: 600;
 }
 
-.navbar.appbar-bordered .nav-content .tabs > .tab.disabled > a {
+.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs > .tab.disabled > a {
   color: var(--md-sys-color-on-surface) !important;
   opacity: 0.5;
 }
 
-.navbar.appbar-bordered .nav-content .tabs > .indicator {
+.navbar:is(.appbar, .appbar-bordered) .nav-content .tabs > .indicator {
   background-color: var(--md-sys-color-on-surface) !important;
 }
 
-.navbar.appbar-bordered .sidenav-trigger {
+.navbar:is(.appbar, .appbar-bordered) .sidenav-trigger {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
@@ -246,7 +246,7 @@
   color: var(--md-sys-color-on-surface) !important;
 }
 
-.navbar.appbar-bordered .sidenav-trigger > .material-icons {
+.navbar:is(.appbar, .appbar-bordered) .sidenav-trigger > .material-icons {
   display: block !important;
   position: static !important;
   float: none !important;
@@ -257,7 +257,7 @@
   text-align: center;
 }
 
-.navbar.appbar-bordered.navbar-wrap > .nav-wrapper {
+.navbar:is(.appbar, .appbar-bordered).navbar-wrap > .nav-wrapper {
   flex-wrap: wrap;
   height: auto;
   min-height: 56px;
@@ -266,12 +266,12 @@
   row-gap: 8px;
 }
 
-.navbar.appbar-bordered.navbar-wrap {
+.navbar:is(.appbar, .appbar-bordered).navbar-wrap {
   height: auto;
   min-height: 56px;
 }
 
-.navbar.appbar-bordered.navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) {
+.navbar:is(.appbar, .appbar-bordered).navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) {
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
@@ -283,15 +283,15 @@
   white-space: normal;
 }
 
-.navbar.appbar-bordered.navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) > li {
+.navbar:is(.appbar, .appbar-bordered).navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) > li {
   height: auto !important;
 }
 
-.navbar.appbar-bordered ul:not(.dropdown-content) > li > a {
+.navbar:is(.appbar, .appbar-bordered) ul:not(.dropdown-content) > li > a {
   white-space: nowrap;
 }
 
-.navbar.appbar-bordered:not(.navbar-wrap) .nav-wrapper > ul.ml-auto:not(.nav-actions):not(.dropdown-content) {
+.navbar:is(.appbar, .appbar-bordered):not(.navbar-wrap) .nav-wrapper > ul.ml-auto:not(.nav-actions):not(.dropdown-content) {
   flex: 0 0 auto;
   width: max-content;
   max-width: none;
@@ -299,7 +299,7 @@
 
 /* Separators used as list items need an explicit display/height; otherwise
    navbar item rules can collapse the one-pixel divider. */
-.navbar.appbar-bordered .nav-actions > li.nav-separator {
+.navbar:is(.appbar, .appbar-bordered) .nav-actions > li.nav-separator {
   display: block !important;
   flex: 0 0 1px;
   width: 1px;
@@ -313,5 +313,5 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .navbar.appbar-bordered .dropdown-trigger > .material-icons { transition: none; }
+  .navbar:is(.appbar, .appbar-bordered) .dropdown-trigger > .material-icons { transition: none; }
 }