component_api:
typescript_interface: - ConfigPanelOptions - export default ((userOpts?: ConfigPanelOptions) => QuartzComponent)
configuration_flags: - showAnimationsToggle: boolean - showTypographyToggle: boolean - showContrastToggle: boolean - showLayoutToggle: boolean - baseDefaults: Record<string, string>
css_delivery:
mechanism: - inject styles via ConfigPanel.css component property
mutation_target: - :root CSS custom properties
target_variables: - --content-width - --base-font-size
compatibility: - seamless integration with /quartz/styles/base.scss - zero specificity conflicts
accessibility:
aria_attributes: - role="dialog" - aria-modal="true" - dynamic aria-expanded status - dynamic aria-hidden status
keyboard_interactions: - focus trapping active during open state - keydown listener bound to Escape key for dismissal
state_initialization:
system_queries: - window.matchMedia("(prefers-reduced-motion: reduce)") - window.matchMedia("(prefers-contrast: more)")
persistence: - localStorage retrieval - override application prioritizing storage over system defaults
lifecycle_hooks:
synchronous_script: - execution: compiled and injected directly into <head> - action: parse localStorage and mutate document.documentElement attributes instantly - outcome: guaranteed zero FOUC
spa_router_events: - listener: hook nav event on document - nav_action: close panel and reset drawer state automatically during SPA navigation - render_listener: hook render event on document - render_action: reattach UI click listeners to config toggles and sync HTML element state from localStorage on every page load - restriction: root element class mutations persist naturally across page navigations
layout_integration:
target_file: - /quartz.layout.ts
mounting_zones: - header - left - right
rendering_behavior: - dynamic mobile breakpoint overlays - desktop content shifting logic - high z-index stacking context declaration