- Sidebar: Mobile Sidebar schließt automatisch bei Navigation (closeOnNavigate prop, default: true)
- AdminLayout: Hintergrundfarbe im Dark Mode gefixt (bg-gray-50 dark:bg-gray-950)
- Tailwind v4: @custom-variant dark korrigiert (&:where(.dark, .dark *))
- tailwind.config.js (v3-Relikt) entfernt
- style.css: body dark:bg-gray-950 ergänzt (fehlte seit dark-variant Fix)
- Toast: blue-_ Farben auf blue-light-_ korrigiert (nicht in @theme definiert)
- InputField, TextareaField, SelectField, MultiSelect: bg-transparent → bg-white (Light Mode Fix)
- @source Direktiven in src/style.css: Alle Komponenten- und Composable-Klassen landen vollständig im dist/style.css
- postcss.config.js beibehalten (für Library-Build nötig)
- BarChart: dark:text-gray-700 → dark:text-gray-500 (Labels im Dark Mode lesbar)
- Sidebar: dark:text-gray-100 ergänzt (Text im Dark Mode war schwarz auf dunkel)
- StatsList: Dark-Mode Label-Farbe geprüft (dark:text-gray-400 bereits korrekt, kein Fix nötig)
- useTheme: defaultTheme='dark' hat Vorrang über gespeicherten 'light'-Wert in localStorage
- useTheme: Priorität korrigiert — localStorage (User-Entscheidung) hat immer Vorrang vor defaultTheme
- Sidebar: useRoute() abgesichert — kein Crash mehr wenn kein Vue Router registriert
- style.css: @import 'tailwindcss' source(none) — keine eigene Utility-Kompilierung mehr
- Utilities kommen ausschließlich vom konsumierenden Projekt via @source
- Saubere Tailwind v4 Library-Architektur: kein Duplicate-Utility-Konflikt mehr
src/style.css:@import "tailwindcss" source(none)ersetzt durch@import "tailwindcss"mit@sourceauf eigene Komponenten@utility-Blöcke (menu-item*,no-scrollbar,custom-scrollbar) nach@layer utilitiesmit expliziten CSS-Selektoren umgebautdist/style.cssenthält jetzt alle Utility-Klassen vollständig — Konsumenten brauchen keinen@source-Scan mehr auf Lib-Pfade
src/style.css:body-Style:dark:bg-gray-950entfernt — verhinderte globales.dark *-Selektor-Problem das alle Kindelemente überschrieb- Body-Hintergrundfarbe jetzt als direkte CSS-Custom-Property (
background-color: var(--color-gray-50))
- Dark Mode: Root-Ursachen-Fix für inkonsistentes dark: Verhalten
- AdminLayout: ThemeProvider + SidebarProvider jetzt intern eingebettet (kein manuelles Wrapping mehr nötig)
- AdminLayout: useSidebar()-Aufruf in AdminLayoutContent ausgelagert (inject scope bug behoben)
- useTheme: autoInitTheme() als Escape-Hatch für main.ts exportiert
- useTheme: Fallback-Kontext statt throw wenn kein Provider — verhindert crashes + DEV-Warnung
- Header: SVG fill="" → fill="currentColor" Fix (X-Icon war im Dark Mode unsichtbar)
- Button: primary/danger dark:disabled Varianten ergänzt
- Icon-Komponenten:
width/heightAttribute entfernt — Größe jetzt via CSS-Klassen (w-5 h-5als Default). Wer explizitw-4 h-4oderw-6 h-6brauchte, muss das als Eltern-Klasse setzen. classNameProp auf allen Komponenten umbenannt zuclass- Vue Peer-Dependency auf
^3.5.0erhöht (useId() Nutzung) .menu-item-*CSS-Klassen entfernt — Ersatz:<SidebarItem>,<SidebarGroup>,<SidebarSubmenu>
SidebarItem— Navigationselement mit Icon, Label, Auto-Active-Detection via Router, Badge, Collapsed-ModeSidebarGroup— Gruppe mit optionalem Heading (versteckt wenn Sidebar kollabiert)SidebarSubmenu— Aufklappbares Untermenü, integriert mit useSidebar openSubmenu State
AdminLayout: ThemeProvider + SidebarProvider jetzt intern eingebettet (Zero-Config Dark Mode)AdminLayoutContent: Interner Wrapper löst inject-Scope-Bug bei useSidebaruseTheme:autoInitTheme()als Escape-Hatch für main.ts exportiertuseTheme+useSidebar: DEV-Warnung statt crash wenn kein Providercn(): Alle 34 Komponenten nutzen jetzt cn() für class merging (Overrides möglich)useId(): SSR-sichere ID-Generierung in allen Form-Komponenten- Icons:
CalendarIcon+StarredIconals Typo-Aliase für CalenderIcon/StaredIcon ergänzt - Accessibility: role="alert"/"status" auf Alert, role="dialog" + Focus Trap auf Modal, aria-expanded auf DropdownMenu + Header, aria-describedby auf InputField, aria-label auf Sidebar
- Tailwind v4:
@import "tailwindcss" source(none),@utilitystatt@layer utilities, autoprefixer entfernt - Header: SVG fill="" Bug behoben (X-Icon war im Dark Mode unsichtbar)
- Button: dark:disabled Varianten für primary + danger ergänzt
- DropdownMenu: Emit-Syntax auf Tuple-Stil normalisiert
src/style-tokens.css(neu): Theme-Tokens, @custom-variant dark, @layer base, @layer utilities — ohne Tailwind-Importsrc/style.css: Enthält nur noch @import "tailwindcss" + @import "./style-tokens.css" + @source- Konsumenten importieren jetzt
style-tokens.cssstattstyle.css— kein doppeltes Tailwind-Processing mehr
AdminLayout.vue: ThemeProvider + SidebarProvider entfernt (gehören in die App, nicht in die Lib)AdminLayoutContent.vue: Wieder direkt in AdminLayout integriert
AdminLayout.vue: ThemeProvider + SidebarProvider korrekt integriert mit Props (defaultTheme, storageKey, syncWithSystem)- Konsumenten müssen nur noch
<AdminLayout default-theme="dark">verwenden
- Fix: mobileBreakpoint Default von 768 auf 1024 vereinheitlicht
- Fix: Header handleToggle nutzt toggleSidebar() statt window.innerWidth-Check
- Fix: Backdrop erschien fälschlicherweise nach API-Responses (isMobileOpen-Bug)
- Fix: StatCard Gradient-Overlay-Div entfernt — direkt als bg-gradient auf Card angewendet
- Fix: kein absolute/relative/overflow-hidden mehr nötig in StatCard
- Fix: Gradient-Overlay-Div aus KeyValueList, BarChart, SemiCircleGauge entfernt
- Fix: Gradient direkt als bg-gradient-to-br auf Card angewendet (kein absolute/relative mehr)
- Fix: BarChart Balkenfarben per CSS color-mix() statt dynamischer Tailwind-Klassen
- Fix: BarChart Label-Farben per inline style statt dynamischer Tailwind-Klassen
- Fix: BarChart Balkenfarben per Hex-Wert statt CSS-Variablen (--color-* nicht verfügbar in Tailwind v4 für Standard-Farben)
- Neu: ColorClasses.hex Property in colorMap für alle 18 Farben