fix(layout): empty v2 auth card, mobile header overflow, focusable collapsed submenus

LteAuthLayout declared the default <ng-content /> (and the [logo] slot) once per
@if branch. Angular distributes projected nodes into a single slot at creation,
so every variant="v2" page rendered an empty .card-body — /login, /login-v2 and
/register-v2 shipped a blank card. Each slot is now declared exactly once: the
default slot in the .card-body both variants share, [logo] in an <ng-template>
that each variant stamps with ngTemplateOutlet. Rendered markup is unchanged.

A collapsed .nav-treeview kept height: 0 with visibility: visible and no inert,
so 19 invisible sidebar links stayed in the tab order. The animation wrapper now
carries inert while closed, with a visibility: hidden delayed until the collapse
transition ends, so the slide animation is untouched; the toggle gained
aria-controls.

The topbar's full toggle row measured 413px inside a 390px viewport (Bootstrap's
1rem navbar link padding), scrolling every page sideways. LteTopbar halves
--bs-navbar-nav-link-padding-x below sm, declared on <nav class="app-header"> so
projected [topbar-start]/[topbar-end] items inherit it. Now 390/390 and 320/320.

The demo build sets baseHref/deployUrl to "/" so index.html emits absolute asset
URLs: the relative <link rel="modulepreload"> resolved against the location, not
<base>, so /dashboard/v2 fetched /dashboard/chunk-*.js, got Pages' index.html
fallback and logged a text/html module MIME error on ~16 routes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: puikinsh

CHANGELOG.md

@@ -78,3 +78,43 @@ All notable changes to `@adminlte/angular` are documented here. The format is ba
   therefore stay on 6.1.21 until the plugin set ships stable 7.x builds.
 - **Held back — TypeScript 7.** `@angular/compiler-cli@22.1.2` and `@angular/build@22.1.4`
   both declare `typescript: >=6.0 <6.1`, so the workspace stays on `~6.0.0`.
+
+### Fixed
+
+- **`LteAuthLayout` rendered an empty card for `variant="v2"` (breaking).** The template
+  declared the default `<ng-content />` twice — once per `@if` branch — and Angular
+  distributes projected nodes into a single slot when the component is created, so the
+  copy in the losing branch never received anything. Every `variant="v2"` page therefore
+  shipped `<div class="card-body login-card-body"></div>` with no children: the demo's
+  `/login`, `/login-v2` and `/register-v2` showed a blank card, and the `[logo]` slot had
+  the same defect. Both slots are now declared exactly once — the default slot in the
+  `.card-body` both variants share, and `[logo]` in an `<ng-template>` that each variant
+  stamps with `ngTemplateOutlet` — so `default` and `v2` project identically. The rendered
+  markup is unchanged for consumers (`.login-box > .card.card-outline.card-primary >
+  .card-header + .card-body` for v2, brand above a plain `.card` otherwise). Anyone
+  extending the component: a projection slot may only be declared once per template.
+- **Sidebar: collapsed submenus stayed keyboard-focusable (a11y).** A closed
+  `.nav-treeview` collapses to `height: 0` inside the grid animation wrapper, but stayed
+  `visibility: visible` with no `inert`, so its links kept their place in the tab order —
+  19 invisible links on the demo's default route, reachable with Tab and focusable via
+  script. The wrapper now carries `inert` while closed (removing the subtree from both the
+  tab order and the accessibility tree), backed by a `visibility: hidden` that is delayed
+  until the collapse transition ends, so the slide-open/slide-shut animation is unchanged.
+  The group toggle also gained `aria-controls` pointing at the submenu's new `id`.
+- **Header overflowed the viewport on phones.** With the standard toggle row (search,
+  messages, notifications, tasks, fullscreen, colour mode, user menu), Bootstrap's 1rem
+  navbar link padding made the header 413 px wide inside a 390 px viewport, so every page
+  scrolled sideways (`scrollWidth` 413 vs `clientWidth` 390). `LteTopbar` now halves
+  `--bs-navbar-nav-link-padding-x` below the `sm` breakpoint; the property is declared on
+  `<nav class="app-header">`, so it also applies to items projected through
+  `[topbar-start]` / `[topbar-end]`. Measured 390/390 at 390 px and 320/320 at 320 px;
+  layout at `sm` and above is untouched.
+- **Demo: a MIME-type console error on every two-segment route.** The demo build now sets
+  `baseHref` / `deployUrl` to `/`, so `index.html` emits absolute asset URLs (`/main-*.js`,
+  `/chunk-*.js`, `/styles-*.css`). The relative `<link rel="modulepreload"
+  href="chunk-*.js">` was resolved against the current location rather
+  than `<base href="/">` by the browser's speculative preloader, so on a two-segment route
+  such as `/dashboard/v2` it fetched `/dashboard/chunk-*.js`; Cloudflare Pages' SPA
+  fallback answered with `index.html` and Chrome logged *"Failed to load module script:
+  Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of
+  text/html"* on ~16 routes. Absolute URLs resolve identically from any depth.

angular.json

@@ -45,6 +45,8 @@
             "outputPath": "dist/demo",
             "index": "projects/demo/src/index.html",
             "browser": "projects/demo/src/main.ts",
+            "baseHref": "/",
+            "deployUrl": "/",
             "polyfills": ["zone.js"],
             "tsConfig": "projects/demo/tsconfig.app.json",
             "assets": [

projects/adminlte-angular/src/lib/layout/auth-layout.component.ts

@@ -8,54 +8,59 @@ import {
   effect,
   input,
 } from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { RouterLink } from '@angular/router';
 
 /**
  * Centered card layout for login / register pages. Applies the page-level body
  * classes (`login-page` / `register-page` + `bg-body-secondary`) while mounted
  * and removes them on destroy. Project the form into the default slot, and
  * optionally a custom brand into `[logo]`.
+ *
+ * IMPORTANT — this template must declare each projection slot exactly ONCE.
+ * Angular distributes the projected nodes into a single slot when the component
+ * is created; a second `<ng-content />` with the same selector (e.g. one per
+ * `@if` branch) never receives anything, so whichever branch holds the losing
+ * copy renders an empty card. That is what happened to every `variant="v2"`
+ * page before this was fixed. The brand block therefore lives in a
+ * `<ng-template>` that both variants stamp with `ngTemplateOutlet`, and the
+ * default slot lives in the `.card-body`, which both variants share.
  */
 @Component({
   selector: 'lte-auth-layout',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterLink],
+  imports: [RouterLink, NgTemplateOutlet],
   template: `
+    <ng-template #brand>
+      <a [routerLink]="logoHref()" [class]="brandLinkClass()">
+        @if (logo()) {
+          <img [src]="logo()" alt="Logo" height="48" />
+        } @else if (variant() === 'v2') {
+          <h1 class="mb-0"><b>Admin</b>LTE</h1>
+        } @else {
+          <b>Admin</b>LTE
+        }
+        <ng-content select="[logo]" />
+      </a>
+    </ng-template>
+
     <div [class]="authType() + '-box'">
-      @if (variant() === 'v2') {
-        <div class="card card-outline card-primary">
-          <div class="card-header">
-            <a [routerLink]="logoHref()" class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
-              @if (logo()) {
-                <img [src]="logo()" alt="Logo" height="48" />
-              } @else {
-                <h1 class="mb-0"><b>Admin</b>LTE</h1>
-              }
-              <ng-content select="[logo]" />
-            </a>
-          </div>
-          <div [class]="'card-body ' + authType() + '-card-body'">
-            <ng-content />
-          </div>
-        </div>
-      } @else {
+      @if (variant() !== 'v2') {
         <div [class]="authType() + '-logo'">
-          <a [routerLink]="logoHref()">
-            @if (logo()) {
-              <img [src]="logo()" alt="Logo" height="48" />
-            } @else {
-              <b>Admin</b>LTE
-            }
-            <ng-content select="[logo]" />
-          </a>
+          <ng-container [ngTemplateOutlet]="brand" />
         </div>
-        <div class="card">
-          <div [class]="'card-body ' + authType() + '-card-body'">
-            <ng-content />
+      }
+
+      <div [class]="cardClass()">
+        @if (variant() === 'v2') {
+          <div class="card-header">
+            <ng-container [ngTemplateOutlet]="brand" />
           </div>
+        }
+        <div [class]="cardBodyClass()">
+          <ng-content />
         </div>
-      }
+      </div>
     </div>
   `,
 })
@@ -70,6 +75,20 @@ export class AuthLayoutComponent {
 
   private readonly bodyClasses = computed(() => [`${this.authType()}-page`, 'bg-body-secondary']);
 
+  /** `.card` chrome: v2 is the outlined primary card, default is the plain one. */
+  readonly cardClass = computed(() =>
+    this.variant() === 'v2' ? 'card card-outline card-primary' : 'card',
+  );
+
+  readonly cardBodyClass = computed(() => `card-body ${this.authType()}-card-body`);
+
+  /** v2 renders the brand inside `.card-header`, so it needs the muted link styles. */
+  readonly brandLinkClass = computed(() =>
+    this.variant() === 'v2'
+      ? 'link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover'
+      : '',
+  );
+
   constructor(
     @Inject(PLATFORM_ID) platformId: object,
     @Inject(DOCUMENT) private readonly doc: Document,

projects/adminlte-angular/src/lib/layout/sidebar-nav-item.component.ts

@@ -25,7 +25,8 @@ let uid = 0;
  * highlight and the menu link colour (`display: contents` does not help, since
  * it only affects layout, not selector matching). Active-link detection compares
  * the item's route/href to `currentPath`; groups auto-open when a descendant is
- * active.
+ * active. A collapsed group's wrapper carries `inert`, so its links leave both
+ * the tab order and the accessibility tree while the submenu is closed.
  */
 @Component({
   selector: 'lte-sidebar-nav-item',
@@ -54,6 +55,18 @@ let uid = 0;
         display: block;
         overflow: hidden;
         min-height: 0;
+        /* A zero-height submenu is invisible but still rendered, so its links
+           stayed keyboard-reachable. Visibility is delayed until the collapse
+           animation has finished (and applied instantly on open), which keeps
+           the slide intact while taking the links out of the tab order. The
+           inert attribute on the wrapper does the same immediately for the
+           a11y tree; this rule is the belt-and-braces half. */
+        visibility: hidden;
+        transition: visibility 0s linear var(--lte-treeview-speed, 300ms);
+      }
+      .treeview-wrap.open > .nav-treeview {
+        visibility: visible;
+        transition-delay: 0s;
       }
     `,
   ],
@@ -90,7 +103,14 @@ let uid = 0;
         }
       }
       @default {
-        <a href="#" class="nav-link" [class.active]="groupActive()" [attr.aria-expanded]="isOpen()" (click)="toggle($event)">
+        <a
+          href="#"
+          class="nav-link"
+          [class.active]="groupActive()"
+          [attr.aria-expanded]="isOpen()"
+          [attr.aria-controls]="id + '-submenu'"
+          (click)="toggle($event)"
+        >
           @if (group().icon) {
             <i class="nav-icon {{ icon(group().icon) }}"></i>
           }
@@ -103,8 +123,13 @@ let uid = 0;
           </p>
         </a>
 
-        <div class="treeview-wrap" [class.open]="isOpen()" [style.--lte-treeview-speed.ms]="animationSpeed()">
-          <ul class="nav nav-treeview">
+        <div
+          class="treeview-wrap"
+          [class.open]="isOpen()"
+          [style.--lte-treeview-speed.ms]="animationSpeed()"
+          [attr.inert]="isOpen() ? null : ''"
+        >
+          <ul class="nav nav-treeview" [id]="id + '-submenu'">
             @for (child of visibleChildren(); track trackChild($index, child)) {
               <lte-sidebar-nav-item
                 [item]="child"

projects/adminlte-angular/src/lib/layout/topbar.component.ts

@@ -24,7 +24,21 @@ import type { TopbarUser } from '../types/layout';
   imports: [ColorModeToggleComponent, FullscreenToggleComponent],
   // The host is a grid item of .app-wrapper; make it transparent so the inner
   // <nav class="app-header"> becomes the real grid item (grid-area: lte-app-header).
-  styles: ':host { display: contents; }',
+  styles: `
+    :host { display: contents; }
+
+    /* Phones: Bootstrap's navbar links are padded 1rem a side, which makes a
+       full toggle row (search, messages, notifications, tasks, fullscreen,
+       colour mode, user menu) 413px wide inside a 390px viewport — the page
+       then scrolls sideways. Halving the padding below 'sm' keeps every item
+       on screen (296px at 390px wide, still fitting a 320px viewport). The
+       custom property is declared on <nav class="app-header"> so it inherits
+       into items projected through [topbar-start] / [topbar-end] too, which a
+       scoped descendant selector could not reach. */
+    @media (max-width: 575.98px) {
+      .app-header { --bs-navbar-nav-link-padding-x: 0.5rem; }
+    }
+  `,
   template: `
     <nav [class]="navClass()">
       <div class="container-fluid">