/**
* AURAL UI - Main Entry Point
*
* Import this file to get the complete design system.
* For custom builds, import only what you need from individual files.
*
* Build: postcss src/aural-ui.css -o dist/aural-ui.css
*/
*
* BROWSER SUPPORT & FALLBACKS
* ============================
* This design system includes fallbacks for modern CSS features to ensure
* compatibility with older browsers:
*
* 1. color-mix() - Chrome 111+, Safari 16.2+, Firefox 113+
* Fallback: Static rgba() values for alpha transparency
* Usage: All --primary-alpha-* and hover/active color variants
*
* 2. backdrop-filter - Chrome 76+, Safari 9+, Firefox 103+
* Fallback: More opaque backgrounds wrapped in @supports
* Usage: Cards, modals, toasts, and glass-morphism effects
*
* 3. aspect-ratio - Chrome 88+, Safari 15+, Firefox 89+
* Fallback: padding-bottom technique with pseudo-elements
* Usage: Carousels, image containers, and responsive media
*
* Target Support: Modern browsers + graceful degradation for older versions
*/
/* ========================================
ALL IMPORTS MUST BE FIRST
======================================== */
/* Core Tokens (Primitives) */
/**
* AURAL UI - Core Color Tokens
*
* These are primitive color values that should NEVER change.
* Semantic tokens (in tokens/semantic/) map to these values.
*
* Scale: 50 (lightest) → 950 (darkest)
*/
:root {
/* ========================================
Neutral Scale (Grays)
======================================== */
--neutral-50: #fafafa;
--neutral-100: #f5f5f5;
--neutral-200: #e5e5e5;
--neutral-300: #d4d4d4;
--neutral-400: #a3a3a3;
--neutral-500: #737373;
--neutral-600: #525252;
--neutral-700: #404040;
--neutral-800: #262626;
--neutral-900: #171717;
--neutral-950: #0a0a0a;
/* ========================================
Primary Scale (Teal/Green)
======================================== */
--primary-50: #edfdf7;
--primary-100: #d3fae8;
--primary-200: #aaf4d5;
--primary-300: #71e9bb;
--primary-400: #5ebd8f; /* Main brand color - vibrant green */
--primary-500: #4da77a;
--primary-600: #3d8a64;
--primary-700: #326d51;
--primary-800: #2a5842;
--primary-900: #244837;
--primary-950: #11281f;
/* ========================================
Secondary Scale (Cyan/Blue)
======================================== */
--secondary-50: #ecfeff;
--secondary-100: #cffafe;
--secondary-200: #a5f3fc;
--secondary-300: #67e8f9;
--secondary-400: #22d3ee;
--secondary-500: #06b6d4; /* Secondary brand */
--secondary-600: #0891b2;
--secondary-700: #0e7490;
--secondary-800: #155e75;
--secondary-900: #164e63;
--secondary-950: #083344;
/* ========================================
Success Scale (Green)
======================================== */
--success-50: #f0fdf4;
--success-100: #dcfce7;
--success-200: #bbf7d0;
--success-300: #86efac;
--success-400: #4ade80;
--success-500: #22c55e; /* Success indicator */
--success-600: #16a34a;
--success-700: #15803d;
--success-800: #166534;
--success-900: #14532d;
--success-950: #052e16;
/* ========================================
Warning Scale (Yellow/Orange)
======================================== */
--warning-50: #fffbeb;
--warning-100: #fef3c7;
--warning-200: #fde68a;
--warning-300: #fcd34d;
--warning-400: #fbbf24;
--warning-500: #f59e0b; /* Warning indicator */
--warning-600: #d97706;
--warning-700: #b45309;
--warning-800: #92400e;
--warning-900: #78350f;
--warning-950: #451a03;
/* ========================================
Error/Danger Scale (Red)
======================================== */
--error-50: #fef2f2;
--error-100: #fee2e2;
--error-200: #fecaca;
--error-300: #fca5a5;
--error-400: #f87171;
--error-500: #ef4444; /* Error indicator */
--error-600: #dc2626;
--error-700: #b91c1c;
--error-800: #991b1b;
--error-900: #7f1d1d;
--error-950: #450a0a;
/* ========================================
Info Scale (Blue)
======================================== */
--info-50: #eff6ff;
--info-100: #dbeafe;
--info-200: #bfdbfe;
--info-300: #93c5fd;
--info-400: #60a5fa;
--info-500: #3b82f6; /* Info indicator */
--info-600: #2563eb;
--info-700: #1d4ed8;
--info-800: #1e40af;
--info-900: #1e3a8a;
--info-950: #172554;
/* ========================================
Extended Colors (for item types, badges, etc.)
======================================== */
/* Purple */
--purple-50: #faf5ff;
--purple-100: #f3e8ff;
--purple-200: #e9d5ff;
--purple-300: #d8b4fe;
--purple-400: #c084fc;
--purple-500: #a855f7;
--purple-600: #9333ea;
--purple-700: #7e22ce;
--purple-800: #6b21a8;
--purple-900: #581c87;
--purple-950: #3b0764;
/* Pink */
--pink-50: #fdf2f8;
--pink-100: #fce7f3;
--pink-200: #fbcfe8;
--pink-300: #f9a8d4;
--pink-400: #f472b6;
--pink-500: #ec4899;
--pink-600: #db2777;
--pink-700: #be185d;
--pink-800: #9d174d;
--pink-900: #831843;
--pink-950: #500724;
/* Amber */
--amber-50: #fffbeb;
--amber-100: #fef3c7;
--amber-200: #fde68a;
--amber-300: #fcd34d;
--amber-400: #fbbf24;
--amber-500: #f59e0b;
--amber-600: #d97706;
--amber-700: #b45309;
--amber-800: #92400e;
--amber-900: #78350f;
--amber-950: #451a03;
/* ========================================
Primary Color Opacity Variants
(For hover states, backgrounds, etc.)
These reference --color-primary for dynamic updates
======================================== */
Browser Support:
- rgba() fallbacks: All browsers
- color-mix(): Chrome 111+, Safari 16.2+, Firefox 113+
/* Fallback for browsers without color-mix() support (pre-2023) */
--primary-alpha-5: rgba(94, 189, 143, 0.05);
--primary-alpha-8: rgba(94, 189, 143, 0.08);
--primary-alpha-10: rgba(94, 189, 143, 0.10);
--primary-alpha-12: rgba(94, 189, 143, 0.12);
--primary-alpha-15: rgba(94, 189, 143, 0.15);
--primary-alpha-20: rgba(94, 189, 143, 0.20);
--primary-alpha-30: rgba(94, 189, 143, 0.30);
--primary-alpha-40: rgba(94, 189, 143, 0.40);
--primary-alpha-50: rgba(94, 189, 143, 0.50);
/* Modern color-mix() for dynamic theme support */
--primary-alpha-5: color-mix(in srgb, var(--color-primary, var(--primary-500)) 5%, transparent);
--primary-alpha-8: color-mix(in srgb, var(--color-primary, var(--primary-500)) 8%, transparent);
--primary-alpha-10: color-mix(in srgb, var(--color-primary, var(--primary-500)) 10%, transparent);
--primary-alpha-12: color-mix(in srgb, var(--color-primary, var(--primary-500)) 12%, transparent);
--primary-alpha-15: color-mix(in srgb, var(--color-primary, var(--primary-500)) 15%, transparent);
--primary-alpha-20: color-mix(in srgb, var(--color-primary, var(--primary-500)) 20%, transparent);
--primary-alpha-30: color-mix(in srgb, var(--color-primary, var(--primary-500)) 30%, transparent);
--primary-alpha-40: color-mix(in srgb, var(--color-primary, var(--primary-500)) 40%, transparent);
--primary-alpha-50: color-mix(in srgb, var(--color-primary, var(--primary-500)) 50%, transparent);
}
/**
* AURAL UI - Core Spacing Tokens
*
* Base unit: 0.25rem (4px)
* Scale follows 4px increments for consistency
*/
:root {
/* ========================================
Spacing Scale
======================================== */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-14: 3.5rem; /* 56px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-28: 7rem; /* 112px */
--space-32: 8rem; /* 128px */
--space-36: 9rem; /* 144px */
--space-40: 10rem; /* 160px */
--space-44: 11rem; /* 176px */
--space-48: 12rem; /* 192px */
--space-52: 13rem; /* 208px */
--space-56: 14rem; /* 224px */
--space-60: 15rem; /* 240px */
--space-64: 16rem; /* 256px */
--space-72: 18rem; /* 288px */
--space-80: 20rem; /* 320px */
--space-96: 24rem; /* 384px */
}
/**
* AURAL UI - Core Typography Tokens
*
* Font families, sizes, weights, and line heights
*/
:root {
/* ========================================
Font Families
======================================== */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
/* ========================================
Font Sizes
======================================== */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
--text-8xl: 6rem; /* 96px */
--text-9xl: 8rem; /* 128px */
/* ========================================
Font Weights
======================================== */
--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900;
/* ========================================
Line Heights
======================================== */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* ========================================
Letter Spacing
======================================== */
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
}
/**
* AURAL UI - Core Shadow Tokens
*
* Elevation levels for components
*/
:root {
/* ========================================
Shadows
======================================== */
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--shadow-none: 0 0 #0000;
/* ========================================
Colored Shadows (for accents)
======================================== */
--shadow-primary: 0 4px 16px rgba(16, 185, 129, 0.2);
--shadow-primary-lg: 0 8px 32px rgba(16, 185, 129, 0.3);
--shadow-secondary: 0 4px 16px rgba(6, 182, 212, 0.2);
--shadow-success: 0 4px 16px rgba(34, 197, 94, 0.2);
--shadow-warning: 0 4px 16px rgba(245, 158, 11, 0.2);
--shadow-error: 0 4px 16px rgba(239, 68, 68, 0.2);
/* ========================================
Directional Shadows
======================================== */
--shadow-top: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-bottom: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-left: -4px 0 6px -1px rgba(0, 0, 0, 0.1), -2px 0 4px -2px rgba(0, 0, 0, 0.1);
--shadow-right: 4px 0 6px -1px rgba(0, 0, 0, 0.1), 2px 0 4px -2px rgba(0, 0, 0, 0.1);
/* ========================================
Base Glow Effects
======================================== */
--glow-sm: 0 0 4px rgba(255, 255, 255, 0.5);
--glow-md: 0 0 8px rgba(255, 255, 255, 0.6);
--glow-lg: 0 0 16px rgba(255, 255, 255, 0.7);
--glow-xl: 0 0 24px rgba(255, 255, 255, 0.8);
--glow-2xl: 0 0 32px rgba(255, 255, 255, 0.9);
/* ========================================
Colored Glow Effects - Primary
======================================== */
--glow-primary-sm: 0 0 4px rgba(16, 185, 129, 0.5);
--glow-primary-md: 0 0 8px rgba(16, 185, 129, 0.6);
--glow-primary-lg: 0 0 16px rgba(16, 185, 129, 0.7);
--glow-primary-xl: 0 0 24px rgba(16, 185, 129, 0.8);
/* ========================================
Colored Glow Effects - Secondary
======================================== */
--glow-secondary-sm: 0 0 4px rgba(6, 182, 212, 0.5);
--glow-secondary-md: 0 0 8px rgba(6, 182, 212, 0.6);
--glow-secondary-lg: 0 0 16px rgba(6, 182, 212, 0.7);
--glow-secondary-xl: 0 0 24px rgba(6, 182, 212, 0.8);
/* ========================================
Colored Glow Effects - Success
======================================== */
--glow-success-sm: 0 0 4px rgba(34, 197, 94, 0.5);
--glow-success-md: 0 0 8px rgba(34, 197, 94, 0.6);
--glow-success-lg: 0 0 16px rgba(34, 197, 94, 0.7);
--glow-success-xl: 0 0 24px rgba(34, 197, 94, 0.8);
/* ========================================
Colored Glow Effects - Error
======================================== */
--glow-error-sm: 0 0 4px rgba(239, 68, 68, 0.5);
--glow-error-md: 0 0 8px rgba(239, 68, 68, 0.6);
--glow-error-lg: 0 0 16px rgba(239, 68, 68, 0.7);
--glow-error-xl: 0 0 24px rgba(239, 68, 68, 0.8);
/* ========================================
Colored Glow Effects - Warning
======================================== */
--glow-warning-sm: 0 0 4px rgba(245, 158, 11, 0.5);
--glow-warning-md: 0 0 8px rgba(245, 158, 11, 0.6);
--glow-warning-lg: 0 0 16px rgba(245, 158, 11, 0.7);
--glow-warning-xl: 0 0 24px rgba(245, 158, 11, 0.8);
/* ========================================
Colored Glow Effects - Info
======================================== */
--glow-info-sm: 0 0 4px rgba(59, 130, 246, 0.5);
--glow-info-md: 0 0 8px rgba(59, 130, 246, 0.6);
--glow-info-lg: 0 0 16px rgba(59, 130, 246, 0.7);
--glow-info-xl: 0 0 24px rgba(59, 130, 246, 0.8);
/* ========================================
Inner Glow Effects
======================================== */
--glow-inner-sm: inset 0 0 8px rgba(255, 255, 255, 0.3);
--glow-inner-md: inset 0 0 16px rgba(255, 255, 255, 0.4);
--glow-inner-lg: inset 0 0 24px rgba(255, 255, 255, 0.5);
/* ========================================
Neon Glow Effects (Multi-layer Cyberpunk)
======================================== */
--glow-neon-primary:
0 0 5px rgba(16, 185, 129, 0.8),
0 0 10px rgba(16, 185, 129, 0.6),
0 0 20px rgba(16, 185, 129, 0.4),
0 0 40px rgba(16, 185, 129, 0.2);
--glow-neon-secondary:
0 0 5px rgba(6, 182, 212, 0.8),
0 0 10px rgba(6, 182, 212, 0.6),
0 0 20px rgba(6, 182, 212, 0.4),
0 0 40px rgba(6, 182, 212, 0.2);
--glow-neon-error:
0 0 5px rgba(239, 68, 68, 0.8),
0 0 10px rgba(239, 68, 68, 0.6),
0 0 20px rgba(239, 68, 68, 0.4),
0 0 40px rgba(239, 68, 68, 0.2);
/* ========================================
Depth Glow Effects (Multi-layer 3D)
======================================== */
--glow-depth-sm:
0 0 4px rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
--glow-depth-md:
0 0 8px rgba(255, 255, 255, 0.5),
0 4px 16px rgba(0, 0, 0, 0.3);
--glow-depth-lg:
0 0 16px rgba(255, 255, 255, 0.6),
0 8px 24px rgba(0, 0, 0, 0.4);
}
/**
* AURAL UI - Core Border Radius Tokens
*
* Rounding scale for components
*/
:root {
/* ========================================
Border Radius
======================================== */
--radius-none: 0;
--radius-sm: 0.25rem; /* 4px */
--radius: 0.5rem; /* 8px */
--radius-md: 0.75rem; /* 12px */
--radius-lg: 1rem; /* 16px */
--radius-xl: 1.25rem; /* 20px */
--radius-2xl: 1.5rem; /* 24px */
--radius-3xl: 2rem; /* 32px */
--radius-full: 9999px;
}
/**
* AURAL UI - Core Animation Tokens
*
* Durations, easing functions, and transitions
*/
:root {
/* ========================================
Durations
======================================== */
--duration-instant: 0ms;
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-slower: 750ms;
--duration-slowest: 1000ms;
/* ========================================
Easing Functions
======================================== */
--ease-linear: linear;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* ========================================
Common Transitions
======================================== */
--transition-fast: var(--duration-fast) var(--ease-in-out);
--transition-normal: var(--duration-normal) var(--ease-in-out);
--transition-slow: var(--duration-slow) var(--ease-in-out);
--transition-all-fast: all var(--duration-fast) var(--ease-in-out);
--transition-all-normal: all var(--duration-normal) var(--ease-in-out);
--transition-colors: color var(--duration-fast) var(--ease-in-out),
background-color var(--duration-fast) var(--ease-in-out),
border-color var(--duration-fast) var(--ease-in-out);
--transition-transform: transform var(--duration-fast) var(--ease-in-out);
--transition-opacity: opacity var(--duration-normal) var(--ease-in-out);
}
/* Semantic Tokens (System Behavior) */
/**
* AURAL UI - Semantic Color Tokens
*
* These map to core tokens and define the system's color behavior.
* Themes override these tokens to change the entire color scheme.
*
* IMPORTANT: Never use core tokens directly in components.
* Always use these semantic tokens.
*/
:root {
/* ========================================
Brand Colors (Interactive Elements)
======================================== */
--color-primary: var(--primary-400);
/* Fallback for hover/active states */
--color-primary-hover: #4da77a; /* Approximation: 85% primary + 15% black */
--color-primary-active: #3d8a64; /* Approximation: 70% primary + 30% black */
/* Modern color-mix() for precise hover/active states */
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
--color-primary-active: color-mix(in srgb, var(--color-primary) 70%, black);
--color-primary-muted: var(--primary-100);
--color-secondary: var(--secondary-500);
--color-secondary-hover: var(--secondary-600);
--color-secondary-active: var(--secondary-700);
--color-secondary-muted: var(--secondary-100);
/* ========================================
State Colors (Feedback)
======================================== */
--color-success: var(--success-500);
--color-success-hover: var(--success-600);
--color-success-muted: var(--success-100);
--color-warning: var(--warning-500);
--color-warning-hover: var(--warning-600);
--color-warning-muted: var(--warning-100);
--color-error: var(--error-500);
--color-error-hover: var(--error-600);
--color-error-muted: var(--error-100);
--color-info: var(--info-500);
--color-info-hover: var(--info-600);
--color-info-muted: var(--info-100);
/* ========================================
Background Colors
======================================== */
--color-bg-primary: var(--neutral-950);
--color-bg-secondary: var(--neutral-900);
--color-bg-tertiary: var(--neutral-800);
--color-bg-elevated: var(--neutral-800);
--color-bg-overlay: rgba(0, 0, 0, 0.85);
--color-bg-hover: var(--primary-alpha-10);
--color-bg-active: var(--primary-alpha-15);
--color-bg-inverse: var(--neutral-50);
/* Glass/frosted backgrounds */
--color-bg-glass: rgba(10, 10, 18, 0.7);
--color-bg-glass-light: rgba(255, 255, 255, 0.05);
/* ========================================
Text Colors
======================================== */
--color-text-primary: var(--neutral-50);
--color-text-secondary: var(--neutral-400);
--color-text-tertiary: var(--neutral-500);
--color-text-muted: var(--neutral-600);
--color-text-disabled: var(--neutral-700);
--color-text-inverse: var(--neutral-900);
/* On colored backgrounds */
--color-text-on-primary: white;
--color-text-on-success: white;
--color-text-on-warning: var(--neutral-950);
--color-text-on-error: white;
--color-text-on-info: white;
/* ========================================
Border Colors
======================================== */
--color-border-subtle: rgba(255, 255, 255, 0.08);
--color-border-medium: rgba(255, 255, 255, 0.12);
--color-border-strong: rgba(255, 255, 255, 0.16);
--color-border-inverse: var(--neutral-700);
/* State borders */
--color-border-focus: var(--color-primary);
--color-border-success: var(--color-success);
--color-border-warning: var(--color-warning);
--color-border-error: var(--color-error);
/* ========================================
Component-Specific Colors
======================================== */
/* Buttons */
--color-button-primary-bg: var(--color-primary);
--color-button-primary-hover: var(--color-primary-hover);
--color-button-primary-text: white;
--color-button-secondary-bg: rgba(255, 255, 255, 0.05);
--color-button-secondary-hover: var(--primary-alpha-12);
--color-button-secondary-text: var(--color-text-primary);
--color-button-secondary-border: var(--color-border-subtle);
--color-button-danger-bg: var(--color-error);
--color-button-danger-hover: var(--color-error-hover);
--color-button-danger-text: white;
--color-button-ghost-bg: transparent;
--color-button-ghost-hover: var(--primary-alpha-8);
--color-button-ghost-text: var(--color-text-secondary);
/* Inputs */
--color-input-bg: rgba(255, 255, 255, 0.03);
--color-input-border: var(--color-border-subtle);
--color-input-border-hover: var(--primary-alpha-30);
--color-input-border-focus: var(--color-primary);
--color-input-text: var(--color-text-primary);
--color-input-placeholder: var(--color-text-muted);
--color-input-disabled-bg: rgba(255, 255, 255, 0.01);
/* Cards */
--color-card-bg: var(--color-bg-secondary);
--color-card-border: var(--color-border-subtle);
--color-card-hover-border: var(--primary-alpha-30);
/* Badges */
--color-badge-primary-bg: rgba(16, 185, 129, 0.15);
--color-badge-primary-text: var(--primary-400);
--color-badge-success-bg: rgba(34, 197, 94, 0.15);
--color-badge-success-text: var(--success-400);
--color-badge-warning-bg: rgba(245, 158, 11, 0.15);
--color-badge-warning-text: var(--warning-400);
--color-badge-error-bg: rgba(239, 68, 68, 0.15);
--color-badge-error-text: var(--error-400);
--color-badge-info-bg: rgba(59, 130, 246, 0.15);
--color-badge-info-text: var(--info-400);
/* Toast */
--color-toast-bg: var(--color-bg-elevated);
--color-toast-border: var(--color-border-medium);
--color-toast-success-border: var(--color-success);
--color-toast-warning-border: var(--color-warning);
--color-toast-error-border: var(--color-error);
--color-toast-info-border: var(--color-info);
/* Modal */
--color-modal-bg: var(--color-bg-primary);
--color-modal-overlay: var(--color-bg-overlay);
--color-modal-border: var(--color-border-subtle);
/* Skeleton */
--color-skeleton-from: rgba(255, 255, 255, 0.03);
--color-skeleton-via: rgba(255, 255, 255, 0.06);
--color-skeleton-to: rgba(255, 255, 255, 0.03);
/* Checkbox */
--color-checkbox-bg: rgba(255, 255, 255, 0.03);
--color-checkbox-border: var(--color-border-subtle);
--color-checkbox-border-hover: var(--primary-alpha-40);
--color-checkbox-checked-bg: var(--color-primary);
--color-checkbox-checked-border: var(--color-primary);
--color-checkbox-checkmark: white;
--color-checkbox-indeterminate-bg: var(--color-primary);
/* Radio */
--color-radio-bg: rgba(255, 255, 255, 0.03);
--color-radio-border: var(--color-border-subtle);
--color-radio-border-hover: var(--primary-alpha-40);
--color-radio-checked-bg: var(--color-primary);
--color-radio-checked-border: var(--color-primary);
--color-radio-dot: white;
/* Toggle */
--color-toggle-track-off: var(--color-bg-tertiary);
--color-toggle-track-on: var(--color-primary);
--color-toggle-track-hover: var(--primary-alpha-20);
--color-toggle-thumb: white;
--color-toggle-thumb-shadow: rgba(0, 0, 0, 0.2);
/* Select */
--color-select-bg: rgba(255, 255, 255, 0.03);
--color-select-border: var(--color-border-subtle);
--color-select-border-hover: var(--primary-alpha-30);
--color-select-border-focus: var(--color-primary);
--color-select-text: var(--color-text-primary);
--color-select-dropdown-bg: var(--color-bg-elevated);
--color-select-dropdown-border: var(--color-border-medium);
--color-select-option-hover: var(--color-bg-hover);
--color-select-option-selected: var(--color-bg-active);
--color-select-option-selected-text: var(--color-primary);
/* Divider */
--color-divider: var(--color-border-subtle);
--color-divider-text: var(--color-text-muted);
/* Avatar */
--color-avatar-bg: var(--color-bg-tertiary);
--color-avatar-text: var(--color-text-primary);
--color-avatar-border: var(--color-border-subtle);
--color-avatar-status-online: var(--success-500);
--color-avatar-status-offline: var(--neutral-500);
--color-avatar-status-busy: var(--error-500);
--color-avatar-status-away: var(--warning-500);
/* Progress */
--color-progress-bg: var(--color-bg-tertiary);
--color-progress-fill: var(--color-primary);
--color-progress-fill-success: var(--color-success);
--color-progress-fill-warning: var(--color-warning);
--color-progress-fill-error: var(--color-error);
--color-progress-fill-info: var(--color-info);
--color-progress-text: var(--color-text-secondary);
/* Breadcrumb */
--color-breadcrumb-link: var(--color-text-secondary);
--color-breadcrumb-link-hover: var(--color-text-primary);
--color-breadcrumb-current: var(--color-text-primary);
--color-breadcrumb-separator: var(--color-text-muted);
/* Pagination */
--color-pagination-bg: transparent;
--color-pagination-border: var(--color-border-subtle);
--color-pagination-hover-bg: var(--primary-alpha-10);
--color-pagination-hover-border: var(--primary-alpha-30);
--color-pagination-active-bg: var(--color-primary);
--color-pagination-active-text: white;
--color-pagination-active-border: var(--color-primary);
--color-pagination-disabled-text: var(--color-text-disabled);
/* Tabs */
--color-tabs-border: var(--color-border-subtle);
--color-tabs-text: var(--color-text-secondary);
--color-tabs-text-hover: var(--color-text-primary);
--color-tabs-active-text: var(--color-text-primary);
--color-tabs-active-border: var(--color-primary);
--color-tabs-active-bg: transparent;
--color-tabs-hover-bg: var(--primary-alpha-8);
--color-tabs-pill-bg: var(--color-bg-tertiary);
--color-tabs-pill-active-bg: var(--color-primary);
/* Tooltip */
--color-tooltip-bg: var(--color-bg-elevated);
--color-tooltip-text: var(--color-text-primary);
--color-tooltip-border: var(--color-border-medium);
/* Dropdown */
--color-dropdown-bg: var(--color-bg-elevated);
--color-dropdown-border: var(--color-border-medium);
--color-dropdown-item-text: var(--color-text-primary);
--color-dropdown-item-hover: var(--primary-alpha-10);
--color-dropdown-item-active: var(--primary-alpha-15);
--color-dropdown-divider: var(--color-border-subtle);
--color-dropdown-header-text: var(--color-text-muted);
/* Accordion */
--color-accordion-bg: transparent;
--color-accordion-border: var(--color-border-subtle);
--color-accordion-header-bg: transparent;
--color-accordion-header-hover: var(--primary-alpha-8);
--color-accordion-header-text: var(--color-text-primary);
--color-accordion-panel-bg: transparent;
--color-accordion-panel-text: var(--color-text-secondary);
--color-accordion-icon: var(--color-text-muted);
/* Popover */
--color-popover-bg: var(--color-bg-elevated);
--color-popover-border: var(--color-border-medium);
--color-popover-header-bg: var(--color-bg-secondary);
--color-popover-header-text: var(--color-text-primary);
--color-popover-body-text: var(--color-text-secondary);
--color-popover-arrow: var(--color-popover-bg);
/* Table */
--color-table-bg: transparent;
--color-table-border: var(--color-border-subtle);
--color-table-header-bg: var(--color-bg-secondary);
--color-table-header-text: var(--color-text-primary);
--color-table-row-text: var(--color-text-primary);
--color-table-row-hover: var(--primary-alpha-8);
--color-table-row-striped: rgba(255, 255, 255, 0.02);
--color-table-row-selected: var(--primary-alpha-10);
--color-table-row-selected-border: var(--color-primary);
--color-table-sort-icon: var(--color-text-muted);
/* Slider */
--color-slider-track-bg: var(--color-bg-tertiary);
--color-slider-track-hover: var(--primary-alpha-15);
--color-slider-thumb-bg: var(--color-primary);
--color-slider-thumb-border: var(--color-bg-primary);
--color-slider-label: var(--color-text-secondary);
--color-slider-value: var(--color-primary);
/* Chips */
--color-chip-bg: var(--color-bg-secondary);
--color-chip-text: var(--color-text-primary);
--color-chip-remove: var(--color-text-secondary);
--color-chip-remove-hover: var(--color-primary);
--color-chip-input-bg: var(--color-bg-primary);
--color-chip-input-border: var(--color-border-subtle);
--color-chip-input-border-focus: var(--color-primary);
/* Code Block */
--color-code-bg: var(--color-bg-tertiary);
--color-code-border: var(--color-border-subtle);
--color-code-header-bg: var(--color-bg-secondary);
--color-code-text: var(--color-text-primary);
--color-code-language: var(--color-text-secondary);
--color-code-line-numbers: var(--color-text-muted);
--color-code-scrollbar-track: var(--color-bg-secondary);
--color-code-scrollbar-thumb: var(--color-border-subtle);
--color-code-inline-bg: var(--color-bg-tertiary);
--color-code-inline-text: var(--color-primary);
/* Dialog */
--color-dialog-bg: var(--color-bg-primary);
--color-dialog-border: var(--color-border-subtle);
--color-dialog-backdrop: rgba(0, 0, 0, 0.5);
--color-dialog-title: var(--color-text-primary);
--color-dialog-message: var(--color-text-secondary);
--color-dialog-close: var(--color-text-muted);
--color-dialog-close-hover: var(--color-primary);
--color-dialog-footer-border: var(--color-border-subtle);
/* File Upload */
--color-upload-dropzone-bg: var(--color-bg-primary);
--color-upload-dropzone-border: var(--color-border-subtle);
--color-upload-dropzone-hover: var(--primary-alpha-8);
--color-upload-dropzone-active: var(--primary-alpha-15);
--color-upload-file-bg: var(--color-bg-secondary);
--color-upload-file-border: var(--color-border-subtle);
--color-upload-filename: var(--color-text-primary);
--color-upload-filesize: var(--color-text-muted);
--color-upload-progress-bg: var(--color-bg-tertiary);
--color-upload-progress-fill: var(--color-primary);
--color-upload-remove: var(--color-text-muted);
--color-upload-remove-hover: var(--color-error);
/* Command Palette */
--color-palette-bg: var(--color-bg-primary);
--color-palette-border: var(--color-border-subtle);
--color-palette-backdrop: rgba(0, 0, 0, 0.5);
--color-palette-search-border: var(--color-border-subtle);
--color-palette-group-label: var(--color-text-muted);
--color-palette-item-text: var(--color-text-primary);
--color-palette-item-hover: var(--primary-alpha-10);
--color-palette-item-selected: var(--color-primary);
--color-palette-item-description: var(--color-text-muted);
--color-palette-key-bg: var(--color-bg-tertiary);
--color-palette-key-border: var(--color-border-subtle);
--color-palette-key-text: var(--color-text-secondary);
--color-palette-footer-bg: var(--color-bg-secondary);
--color-palette-footer-border: var(--color-border-subtle);
--color-palette-footer-text: var(--color-text-muted);
}
/* Components */
/**
* AURAL UI - Button Component
*
* Unified button system with variants, sizes, and states
*
* Usage:
*
*
*
*/
.btn {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
/* Spacing */
padding: var(--space-3) var(--space-6);
/* Typography */
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--font-medium);
line-height: var(--leading-none);
text-decoration: none;
white-space: nowrap;
/* Appearance */
border: none;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-primary);
cursor: pointer;
/* Transitions */
transition: var(--transition-all-fast);
/* Accessibility */
min-height: 44px; /* iOS/Android minimum touch target */
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
touch-action: manipulation; /* Prevent double-tap zoom on mobile */
}
.btn svg {
width: 1em;
height: 1em;
flex-shrink: 0;
}
/* ========================================
SIZES
======================================== */
.btn-sm {
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
min-height: 44px; /* Mobile-friendly touch target */
}
@media (min-width: 768px) {
.btn-sm {
min-height: 36px; /* Smaller on desktop */
}
}
.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: var(--text-lg);
min-height: 52px;
}
/* ========================================
VARIANTS
======================================== */
/* Primary */
.btn-primary {
background: var(--color-button-primary-bg);
color: var(--color-button-primary-text);
box-shadow: var(--shadow-primary);
}
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover:not(:disabled) {
background: var(--color-button-primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-primary-lg);
}
}
.btn-primary:active:not(:disabled) {
background: var(--color-button-primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-primary-lg);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
}
/* Secondary */
.btn-secondary {
background: var(--color-button-secondary-bg);
color: var(--color-button-secondary-text);
border: 1px solid var(--color-button-secondary-border);
}
@media (hover: hover) and (pointer: fine) {
.btn-secondary:hover:not(:disabled) {
background: var(--color-button-secondary-hover);
border-color: var(--color-border-medium);
transform: translateY(-2px);
}
}
.btn-secondary:active:not(:disabled) {
background: var(--color-button-secondary-hover);
border-color: var(--color-border-medium);
transform: translateY(-2px);
}
.btn-secondary:active:not(:disabled) {
transform: translateY(0);
}
/* Danger */
.btn-danger {
background: var(--color-button-danger-bg);
color: var(--color-button-danger-text);
box-shadow: var(--shadow-error);
}
@media (hover: hover) and (pointer: fine) {
.btn-danger:hover:not(:disabled) {
background: var(--color-button-danger-hover);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
}
.btn-danger:active:not(:disabled) {
background: var(--color-button-danger-hover);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
.btn-danger:active:not(:disabled) {
transform: translateY(0);
}
/* Ghost */
.btn-ghost {
background: var(--color-button-ghost-bg);
color: var(--color-button-ghost-text);
}
@media (hover: hover) and (pointer: fine) {
.btn-ghost:hover:not(:disabled) {
background: var(--color-button-ghost-hover);
color: var(--color-text-primary);
}
}
.btn-ghost:active:not(:disabled) {
background: var(--color-button-ghost-hover);
color: var(--color-text-primary);
}
/* Link (text-only button) */
.btn-link {
background: transparent;
color: var(--color-primary);
padding: 0;
min-height: auto;
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.btn-link:hover:not(:disabled) {
color: var(--color-primary-hover);
}
}
.btn-link:active:not(:disabled) {
color: var(--color-primary-hover);
}
/* ========================================
STATES
======================================== */
/* Disabled */
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Loading */
.btn-loading {
position: relative;
color: transparent;
pointer-events: none;
}
.btn-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Focus (keyboard navigation) */
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ========================================
BUTTON GROUPS
======================================== */
.btn-group {
display: inline-flex;
gap: var(--space-2);
}
.btn-group-attached {
display: inline-flex;
}
.btn-group-attached > .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group-attached > .btn:first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
margin-left: 0;
}
.btn-group-attached > .btn:last-child {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
/**
* AURAL UI - Input Component
*
* Text inputs with validation states and form helpers
*
* Usage:
*
*
*
*/
/* ========================================
INPUT FIELD
======================================== */
.input {
/* Layout */
width: 100%;
display: block;
/* Spacing */
padding: var(--space-3) var(--space-4);
/* Typography */
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-input-text);
/* Appearance */
background: var(--color-input-bg);
border: 1px solid var(--color-input-border);
border-radius: var(--radius-md);
/* Transitions */
transition: var(--transition-all-fast);
/* Accessibility */
min-height: 44px;
outline: none;
}
.input::-moz-placeholder {
color: var(--color-input-placeholder);
}
.input::placeholder {
color: var(--color-input-placeholder);
}
/* Hover state */
@media (hover: hover) and (pointer: fine) {
.input:hover:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-bg-hover);
}
}
.input:active:not(:disabled) {
border-color: var(--color-primary);
background: var(--color-bg-hover);
}
/* Focus state */
.input:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-color: var(--color-primary);
}
/* Disabled state */
.input:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--color-bg-tertiary);
}
/* Read-only state */
.input:-moz-read-only {
background: var(--color-input-disabled-bg);
cursor: default;
}
.input:read-only {
background: var(--color-input-disabled-bg);
cursor: default;
}
/* ========================================
NUMBER INPUT WITH CUSTOM SPINNERS
======================================== */
/* Hide default browser spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
/* Number input with custom spinners wrapper */
.input-number {
position: relative;
display: inline-flex;
width: 100%;
}
.input-number .input {
padding-right: var(--space-10);
}
/* Spinner buttons container */
.input-number__controls {
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
background: var(--color-bg-tertiary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
overflow: hidden;
border-left: 1px solid var(--color-border-medium);
}
/* Individual spinner button */
.input-number__button {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
flex: 1;
background: transparent;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
transition: var(--transition-all-fast);
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: relative;
}
.input-number__button:hover:not(:disabled) {
background: var(--color-bg-hover);
color: var(--color-primary);
}
.input-number__button:active:not(:disabled) {
background: var(--color-primary);
color: white;
}
.input-number__button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.input-number__button svg {
width: 14px;
height: 14px;
stroke-width: 2.5;
}
/* Divider between buttons */
.input-number__button + .input-number__button {
border-top: 1px solid var(--color-border-medium);
}
/* Size variants */
.input-number--sm .input {
padding-right: var(--space-8);
}
.input-number--sm .input-number__button {
width: 24px;
}
.input-number--sm .input-number__button svg {
width: 12px;
height: 12px;
}
.input-number--lg .input {
padding-right: calc(var(--space-10) + 4px);
}
.input-number--lg .input-number__button {
width: 32px;
}
.input-number--lg .input-number__button svg {
width: 16px;
height: 16px;
}
/* Touch device optimizations */
@media (pointer: coarse) {
.input-number__button {
width: 44px;
min-height: 24px;
}
.input-number .input {
padding-right: var(--space-12);
min-height: 48px;
}
}
/* ========================================
VALIDATION STATES
======================================== */
/* Error state */
.input.error {
border-color: var(--color-border-error);
}
.input.error:focus {
outline: 2px solid var(--color-border-error);
outline-offset: 2px;
border-color: var(--color-border-error);
}
/* Success state */
.input.success {
border-color: var(--color-border-success);
}
.input.success:focus {
outline: 2px solid var(--color-border-success);
outline-offset: 2px;
border-color: var(--color-border-success);
}
/* Warning state */
.input.warning {
border-color: var(--color-border-warning);
}
.input.warning:focus {
outline: 2px solid var(--color-border-warning);
outline-offset: 2px;
border-color: var(--color-border-warning);
}
/* ========================================
FORM GROUP (Label + Input + Helper)
======================================== */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.label {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
}
.form-helper {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 0.25rem;
}
.form-error {
font-size: var(--text-xs);
color: var(--color-error);
margin-top: 0.25rem;
}
.form-success {
font-size: var(--text-xs);
color: var(--color-success);
margin-top: 0.25rem;
}
/* ========================================
TEXTAREA
======================================== */
textarea.input,
.textarea {
min-height: 100px;
resize: vertical;
}
/* ========================================
INPUT SIZES
======================================== */
.input-sm {
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
min-height: 36px;
}
.input-lg {
padding: var(--space-4) var(--space-6);
font-size: var(--text-lg);
min-height: 52px;
}
/* ========================================
INPUT GROUP (With Icons)
======================================== */
.input-group {
position: relative;
display: flex;
align-items: center;
}
.input-group .input {
flex: 1;
}
/* Input with prefix icon */
.input-group-prefix .input {
padding-left: var(--space-10);
}
/* Input with suffix icon */
.input-group-suffix .input {
padding-right: var(--space-10);
}
/* Icon positioning */
.input-group-icon {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-tertiary);
pointer-events: none;
z-index: 1;
}
.input-group-icon svg,
.input-group-icon i {
width: 18px;
height: 18px;
}
.input-group-icon-left {
left: var(--space-3);
}
.input-group-icon-right {
right: var(--space-3);
}
/**
* AURAL UI - Search Bar
*
* Search input with autocomplete suggestions, keyboard navigation,
* and recent searches support.
*/
/* ========================================
Search Bar Container
======================================== */
.aural-search-bar {
position: relative;
display: flex;
width: 100%;
max-width: 600px;
}
/* ========================================
Search Input
======================================== */
.aural-search-bar__wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-md);
transition: var(--transition-all-fast);
}
.aural-search-bar__wrapper:hover {
border-color: var(--color-primary);
background: var(--color-bg-hover);
}
.aural-search-bar__wrapper:focus-within {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-color: var(--color-primary);
}
.aural-search-bar__icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-3);
color: var(--color-text-secondary);
flex-shrink: 0;
}
.aural-search-bar__icon svg {
width: 20px;
height: 20px;
}
.aural-search-bar__input {
flex: 1;
min-width: 0; /* Prevent flex overflow */
padding: var(--space-3) var(--space-4);
padding-left: 0;
background: transparent;
color: var(--color-text-primary);
border: none;
font-size: var(--text-base);
font-family: inherit;
outline: none;
}
.aural-search-bar__input::-moz-placeholder {
color: var(--color-text-secondary);
}
.aural-search-bar__input::placeholder {
color: var(--color-text-secondary);
}
.aural-search-bar__clear {
display: none;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: var(--space-2);
margin-right: var(--space-2);
background: transparent;
color: var(--color-text-secondary);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-search-bar__clear:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.aural-search-bar__clear:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aural-search-bar__clear svg {
width: 18px;
height: 18px;
}
.aural-search-bar__wrapper:has(.aural-search-bar__input:not(:-moz-placeholder)) .aural-search-bar__clear {
display: flex;
}
.aural-search-bar__wrapper:has(.aural-search-bar__input:not(:placeholder-shown)) .aural-search-bar__clear {
display: flex;
}
/* ========================================
Keyboard Shortcut Hint
======================================== */
.aural-search-bar__shortcut {
display: flex;
align-items: center;
gap: 4px;
padding: 0 var(--space-3);
font-size: var(--text-xs);
color: var(--color-text-tertiary);
font-family: var(--font-mono);
border-left: 1px solid var(--color-border-subtle);
flex-shrink: 0;
}
.aural-search-bar__wrapper:focus-within .aural-search-bar__shortcut,
.aural-search-bar__wrapper:has(.aural-search-bar__input:not(:placeholder-shown)) .aural-search-bar__shortcut {
display: none;
}
.aural-search-bar__key {
padding: 2px 6px;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
font-size: 0.7rem;
line-height: 1;
}
/* ========================================
Suggestions Dropdown
======================================== */
.aural-search-bar__suggestions {
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
right: 0;
z-index: 1000;
max-height: 400px;
overflow-y: auto;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.aural-search-bar__suggestions--open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.aural-search-bar__suggestions::-webkit-scrollbar {
width: 8px;
}
.aural-search-bar__suggestions::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
}
.aural-search-bar__suggestions::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-sm);
}
.aural-search-bar__suggestions::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
/* ========================================
Suggestion Groups
======================================== */
.aural-search-bar__group {
padding: var(--space-2) 0;
}
.aural-search-bar__group:not(:last-child) {
border-bottom: 1px solid var(--color-border-subtle);
}
.aural-search-bar__group-title {
padding: var(--space-2) var(--space-4);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ========================================
Suggestion Items
======================================== */
.aural-search-bar__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
min-height: 44px;
background: transparent;
color: var(--color-text-primary);
border: none;
text-align: left;
cursor: pointer;
transition: var(--transition-all-fast);
width: 100%;
}
.aural-search-bar__item:hover {
background: var(--color-bg-hover);
color: var(--color-primary);
}
.aural-search-bar__item--active {
background: var(--color-bg-hover);
color: var(--color-primary);
}
.aural-search-bar__item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.aural-search-bar__item-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-text-secondary);
}
.aural-search-bar__item:hover .aural-search-bar__item-icon,
.aural-search-bar__item--active .aural-search-bar__item-icon {
color: var(--color-primary);
}
.aural-search-bar__item-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.aural-search-bar__item-title {
font-size: var(--text-sm);
font-weight: var(--font-medium);
line-height: var(--leading-tight);
}
.aural-search-bar__item-description {
font-size: var(--text-xs);
color: var(--color-text-secondary);
line-height: var(--leading-tight);
}
.aural-search-bar__item-meta {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-tertiary);
}
.aural-search-bar__item-shortcut {
padding: 2px 6px;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.7rem;
}
/* ========================================
Empty State
======================================== */
.aural-search-bar__empty {
padding: var(--space-6) var(--space-4);
text-align: center;
color: var(--color-text-secondary);
}
.aural-search-bar__empty-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-3);
color: var(--color-text-tertiary);
opacity: 0.5;
}
.aural-search-bar__empty-text {
font-size: var(--text-sm);
}
/* ========================================
Loading State
======================================== */
.aural-search-bar__loading {
padding: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
color: var(--color-text-secondary);
font-size: var(--text-sm);
}
/* ========================================
Size Variants
======================================== */
.aural-search-bar--sm .aural-search-bar__input {
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
}
.aural-search-bar--sm .aural-search-bar__icon svg,
.aural-search-bar--sm .aural-search-bar__clear svg {
width: 16px;
height: 16px;
}
.aural-search-bar--sm .aural-search-bar__item {
padding: var(--space-2) var(--space-3);
}
.aural-search-bar--lg .aural-search-bar__input {
padding: var(--space-4) var(--space-5);
font-size: var(--text-lg);
}
.aural-search-bar--lg .aural-search-bar__icon svg {
width: 24px;
height: 24px;
}
.aural-search-bar--lg .aural-search-bar__item {
padding: var(--space-4) var(--space-5);
}
/* ========================================
Pill Variant
======================================== */
.aural-search-bar--pill .aural-search-bar__wrapper {
border-radius: 999px;
}
.aural-search-bar--pill .aural-search-bar__suggestions {
border-radius: var(--radius-xl);
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-search-bar__suggestions {
transition: none;
}
.aural-search-bar__item {
transition: none;
}
}
/* ========================================
Responsive
======================================== */
@media (max-width: 640px) {
.aural-search-bar {
max-width: 100%;
}
.aural-search-bar__shortcut {
display: none;
}
.aural-search-bar__suggestions {
max-height: 300px;
}
.aural-search-bar__item-description {
display: none;
}
}
/**
* AURAL UI - Card Component
*
* Container component with consistent padding and styling
*
* Usage:
*
*
Card Title
*
Card content
*
*
*
No items yet
*
Get started by creating your first item
*
*
*
*
*
* Usage (Custom):
*
*
*
*
*
*
*
* Content 1
* Content 2
*/
.tabs {
/* Layout */
display: flex;
position: relative;
/* Appearance */
border-bottom: 1px solid var(--color-tabs-border);
/* Accessibility */
outline: none;
}
/* ========================================
TAB ITEMS (Default: Underline Style)
======================================== */
.tab {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
position: relative;
/* Spacing */
padding: var(--space-3) var(--space-4);
margin-bottom: -1px;
/* Typography */
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--color-tabs-text);
line-height: var(--leading-normal);
white-space: nowrap;
text-decoration: none;
/* Appearance */
background: transparent;
border: none;
border-bottom: 2px solid transparent;
/* Transitions */
transition: var(--transition-all-fast);
/* Accessibility */
min-height: 44px;
outline: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tab > svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
.tab:hover:not(.tab-active):not(:disabled) {
color: var(--color-tabs-text-hover);
background: var(--color-tabs-hover-bg);
}
}
.tab:active:not(.tab-active):not(:disabled) {
color: var(--color-tabs-text-hover);
background: var(--color-tabs-hover-bg);
}
.tab:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.tab:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Active tab */
.tab-active,
.tab[aria-selected="true"] {
color: var(--color-tabs-active-text);
border-bottom-color: var(--color-tabs-active-border);
background: var(--color-tabs-active-bg);
}
/* ========================================
SIZES
======================================== */
.tabs-sm .tab {
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
min-height: 36px;
}
.tabs-sm .tab > svg {
width: 16px;
height: 16px;
}
.tabs-lg .tab {
padding: var(--space-4) var(--space-6);
font-size: var(--text-lg);
min-height: 52px;
}
.tabs-lg .tab > svg {
width: 20px;
height: 20px;
}
/* ========================================
PILL VARIANT
======================================== */
.tabs-pills {
border-bottom: none;
gap: var(--space-2);
}
.tabs-pills .tab {
border: none;
border-radius: var(--radius-md);
margin-bottom: 0;
background: var(--color-tabs-pill-bg);
}
.tabs-pills .tab:hover:not(.tab-active):not(:disabled) {
background: var(--color-tabs-hover-bg);
}
.tabs-pills .tab-active,
.tabs-pills .tab[aria-selected="true"] {
background: var(--color-tabs-pill-active-bg);
color: white;
}
/* ========================================
BOXED VARIANT
======================================== */
.tabs-boxed {
border: 1px solid var(--color-tabs-border);
border-radius: var(--radius-md);
padding: var(--space-1);
background: rgba(255, 255, 255, 0.03);
}
.tabs-boxed .tab {
border: none;
border-radius: var(--radius-sm);
margin-bottom: 0;
}
.tabs-boxed .tab:hover:not(.tab-active):not(:disabled) {
background: var(--color-tabs-hover-bg);
}
.tabs-boxed .tab-active,
.tabs-boxed .tab[aria-selected="true"] {
background: var(--color-primary);
color: white;
box-shadow: var(--shadow-sm);
}
/* ========================================
VERTICAL VARIANT
======================================== */
.tabs-vertical {
flex-direction: column;
border-bottom: none;
border-right: 1px solid var(--color-tabs-border);
}
.tabs-vertical .tab {
justify-content: flex-start;
width: 100%;
border-bottom: none;
border-right: 2px solid transparent;
margin-bottom: 0;
margin-right: -1px;
}
.tabs-vertical .tab-active,
.tabs-vertical .tab[aria-selected="true"] {
border-right-color: var(--color-tabs-active-border);
border-bottom-color: transparent;
}
/* Vertical pills */
.tabs-vertical.tabs-pills {
border-right: none;
}
.tabs-vertical.tabs-pills .tab {
border: none;
margin-right: 0;
}
/* Vertical boxed */
.tabs-vertical.tabs-boxed {
border: 1px solid var(--color-tabs-border);
}
/* ========================================
CENTERED VARIANT
======================================== */
.tabs-center {
justify-content: center;
}
/* ========================================
FULL WIDTH VARIANT
======================================== */
.tabs-full .tab {
flex: 1;
}
/* ========================================
WITH BADGE/COUNT
======================================== */
.tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--space-1);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
border-radius: var(--radius-full);
margin-left: var(--space-1);
}
.tab-active .tab-badge,
.tab[aria-selected="true"] .tab-badge {
background: rgba(255, 255, 255, 0.2);
color: currentColor;
}
.tabs-pills .tab-active .tab-badge,
.tabs-boxed .tab-active .tab-badge {
background: rgba(255, 255, 255, 0.25);
color: white;
}
/* ========================================
TAB PANELS
======================================== */
.tab-panel {
/* Spacing */
padding: var(--space-6);
/* Animation */
animation: tab-panel-fade-in 0.2s ease;
/* Accessibility */
outline: none;
}
.tab-panel:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.tab-panel[hidden] {
display: none;
}
@keyframes tab-panel-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
TAB PANELS CONTAINER
======================================== */
.tab-panels > .tab-panel {
border: 1px solid var(--color-tabs-border);
border-top: none;
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.tab-panels > .tab-panel:first-child {
border-top-left-radius: 0;
}
/* For pills and boxed variants */
.tabs-pills + .tab-panels > .tab-panel,
.tabs-boxed + .tab-panels > .tab-panel {
border: 1px solid var(--color-tabs-border);
border-radius: var(--radius-md);
margin-top: var(--space-4);
}
/* ========================================
SCROLLABLE TABS
======================================== */
.tabs-scrollable {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: var(--color-border-medium) transparent;
}
.tabs-scrollable::-webkit-scrollbar {
height: 4px;
}
.tabs-scrollable::-webkit-scrollbar-track {
background: transparent;
}
.tabs-scrollable::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-full);
}
/* ========================================
TAB CLOSE BUTTON
======================================== */
.tab-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: var(--space-2);
border: none;
background: transparent;
color: var(--color-text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition-all-fast);
}
.tab-close > svg {
width: 14px;
height: 14px;
}
.tab-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-primary);
}
.tab-close:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
/* ========================================
ACCESSIBILITY
======================================== */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.tab {
transition: none;
}
.tab-panel {
animation: none;
}
}
/**
* AURAL UI - Breadcrumb Component
*
* Navigation hierarchy showing user's location
*
* Usage:
*
*/
.breadcrumb {
/* Layout */
display: flex;
/* Accessibility */
outline: none;
}
.breadcrumb > ol,
.breadcrumb > ul {
/* Layout */
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
/* Reset list styles */
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb li {
/* Layout */
display: flex;
align-items: center;
gap: var(--space-2);
/* Typography */
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.breadcrumb a {
/* Appearance */
color: var(--color-breadcrumb-link);
text-decoration: none;
transition: var(--transition-all-fast);
/* Interaction */
outline: none;
}
.breadcrumb a:hover {
color: var(--color-breadcrumb-link-hover);
text-decoration: underline;
}
.breadcrumb a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.breadcrumb li[aria-current="page"] {
color: var(--color-breadcrumb-current);
font-weight: var(--font-medium);
}
/* Separator */
.breadcrumb li:not(:last-child)::after {
content: '/';
color: var(--color-breadcrumb-separator);
margin-left: var(--space-2);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* ========================================
SEPARATOR VARIANTS
======================================== */
/* Chevron separator */
.breadcrumb-chevron li:not(:last-child)::after {
content: '';
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(255,255,255,0.3)'%3E%3Cpath fill-rule='evenodd' d='M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
/* Dash separator */
.breadcrumb-dash li:not(:last-child)::after {
content: '—';
}
/* Dot separator */
.breadcrumb-dot li:not(:last-child)::after {
content: '•';
}
/* Arrow separator */
.breadcrumb-arrow li:not(:last-child)::after {
content: '→';
}
/* ========================================
SIZES
======================================== */
.breadcrumb-sm li {
font-size: var(--text-xs);
}
.breadcrumb-sm li:not(:last-child)::after {
font-size: var(--text-xs);
}
.breadcrumb-lg li {
font-size: var(--text-base);
}
.breadcrumb-lg li:not(:last-child)::after {
font-size: var(--text-base);
}
.breadcrumb-lg > ol,
.breadcrumb-lg > ul {
gap: var(--space-3);
}
.breadcrumb-lg li {
gap: var(--space-3);
}
.breadcrumb-lg li:not(:last-child)::after {
margin-left: var(--space-3);
}
/* ========================================
COLLAPSED VARIANT
======================================== */
.breadcrumb-collapsed > ol > li:not(:first-child):not(:last-child):not(.breadcrumb-expanded), .breadcrumb-collapsed > ul > li:not(:first-child):not(:last-child):not(.breadcrumb-expanded) {
display: none;
}
.breadcrumb-collapsed > ol > li:nth-last-child(2)::before, .breadcrumb-collapsed > ul > li:nth-last-child(2)::before {
content: '...';
color: var(--color-breadcrumb-separator);
margin-right: var(--space-2);
cursor: pointer;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
transition: var(--transition-all-fast);
}
.breadcrumb-collapsed > ol > li:nth-last-child(2)::before:hover, .breadcrumb-collapsed > ul > li:nth-last-child(2)::before:hover {
background: var(--color-bg-hover);
}
.breadcrumb-collapsed.breadcrumb-expanded > ol > li, .breadcrumb-collapsed.breadcrumb-expanded > ul > li {
display: flex !important;
}
.breadcrumb-collapsed.breadcrumb-expanded > ol > li:nth-last-child(2)::before, .breadcrumb-collapsed.breadcrumb-expanded > ul > li:nth-last-child(2)::before {
display: none;
}
/* ========================================
WITH ICONS
======================================== */
.breadcrumb-with-icons li {
gap: var(--space-2);
}
.breadcrumb-with-icons .breadcrumb-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: currentColor;
}
/* ========================================
BACKGROUND VARIANT
======================================== */
.breadcrumb-bg {
padding: var(--space-3) var(--space-4);
background: rgba(255, 255, 255, 0.03);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-subtle);
}
/* ========================================
ACCESSIBILITY
======================================== */
/* Screen reader only text */
.breadcrumb-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.breadcrumb a {
transition: none;
}
}
/**
* AURAL UI - Pagination Component
*
* Page navigation for multi-page content
*
* Usage:
*
*/
.pagination {
/* Layout */
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
/* Typography */
font-family: var(--font-sans);
font-size: var(--text-sm);
/* Accessibility */
outline: none;
}
/* ========================================
PAGINATION ITEMS
======================================== */
.pagination-item,
.pagination-prev,
.pagination-next {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
/* Spacing */
padding: var(--space-2) var(--space-3);
min-width: 40px;
/* Typography */
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-primary);
text-decoration: none;
line-height: var(--leading-none);
/* Appearance */
background: var(--color-pagination-bg);
border: 1px solid var(--color-pagination-border);
border-radius: var(--radius-md);
/* Transitions */
transition: var(--transition-all-fast);
/* Accessibility */
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
}
.pagination-item:hover:not(.pagination-active):not([disabled]):not(.pagination-disabled), .pagination-prev:hover:not(.pagination-active):not([disabled]):not(.pagination-disabled), .pagination-next:hover:not(.pagination-active):not([disabled]):not(.pagination-disabled) {
background: var(--color-pagination-hover-bg);
border-color: var(--color-pagination-hover-border);
}
.pagination-item:focus-visible, .pagination-prev:focus-visible, .pagination-next:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.pagination-item > svg, .pagination-prev > svg, .pagination-next > svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Active page */
.pagination-active {
background: var(--color-pagination-active-bg);
border-color: var(--color-pagination-active-border);
color: var(--color-pagination-active-text);
pointer-events: none;
}
/* Disabled state */
.pagination-disabled,
.pagination-item[disabled],
.pagination-prev[disabled],
.pagination-next[disabled] {
color: var(--color-pagination-disabled-text);
cursor: not-allowed;
pointer-events: none;
opacity: 0.5;
}
/* Ellipsis */
.pagination-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-2) var(--space-1);
min-width: 40px;
color: var(--color-text-muted);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: none;
}
/* ========================================
SIZES
======================================== */
.pagination-sm {
font-size: var(--text-xs);
}
.pagination-sm .pagination-item,
.pagination-sm .pagination-prev,
.pagination-sm .pagination-next {
padding: var(--space-1) var(--space-2);
min-width: 32px;
font-size: var(--text-xs);
}
.pagination-sm .pagination-ellipsis {
min-width: 32px;
}
.pagination-sm svg {
width: 14px !important;
height: 14px !important;
}
.pagination-lg {
font-size: var(--text-base);
}
.pagination-lg .pagination-item,
.pagination-lg .pagination-prev,
.pagination-lg .pagination-next {
padding: var(--space-3) var(--space-4);
min-width: 48px;
font-size: var(--text-base);
}
.pagination-lg .pagination-ellipsis {
min-width: 48px;
}
.pagination-lg svg {
width: 20px !important;
height: 20px !important;
}
/* ========================================
VARIANTS
======================================== */
/* Simple variant (no borders) */
.pagination-simple .pagination-item,
.pagination-simple .pagination-prev,
.pagination-simple .pagination-next {
border: none;
}
.pagination-simple .pagination-active {
background: var(--color-pagination-active-bg);
}
/* Rounded variant */
.pagination-rounded .pagination-item,
.pagination-rounded .pagination-prev,
.pagination-rounded .pagination-next {
border-radius: var(--radius-full);
}
/* Compact variant (attached buttons) */
.pagination-compact {
gap: 0;
}
.pagination-compact .pagination-item,
.pagination-compact .pagination-prev,
.pagination-compact .pagination-next {
border-radius: 0;
margin-left: -1px;
}
.pagination-compact .pagination-prev,
.pagination-compact > a:first-child,
.pagination-compact > button:first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
margin-left: 0;
}
.pagination-compact .pagination-next,
.pagination-compact > a:last-child,
.pagination-compact > button:last-child {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.pagination-compact .pagination-active {
z-index: 1;
}
/* ========================================
LAYOUT VARIANTS
======================================== */
/* Left aligned */
.pagination-left {
justify-content: flex-start;
}
/* Right aligned */
.pagination-right {
justify-content: flex-end;
}
/* Space between */
.pagination-between {
justify-content: space-between;
}
.pagination-between .pagination-list {
display: flex;
gap: var(--space-2);
}
/* ========================================
WITH INFO TEXT
======================================== */
.pagination-with-info {
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: center;
}
.pagination-with-info > .pagination-info {
color: var(--color-text-secondary);
font-size: var(--text-sm);
}
/* ========================================
RESPONSIVE
======================================== */
/* Hide page numbers on small screens */
@media (max-width: 640px) {
.pagination-responsive .pagination-item:not(.pagination-active) {
display: none;
}
.pagination-responsive .pagination-ellipsis {
display: none;
}
}
/* ========================================
JUMP TO PAGE
======================================== */
.pagination-with-jumper {
display: flex;
align-items: center;
gap: var(--space-4);
}
.pagination-with-jumper .pagination-jumper {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.pagination-with-jumper .pagination-jumper input {
width: 60px;
padding: var(--space-2);
font-size: var(--text-sm);
text-align: center;
background: var(--color-input-bg);
border: 1px solid var(--color-input-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
outline: none;
}
.pagination-with-jumper .pagination-jumper input:focus {
border-color: var(--color-primary);
}
.pagination-with-jumper .pagination-jumper input:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ========================================
ACCESSIBILITY
======================================== */
/* Screen reader only text */
.pagination-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.pagination-item,
.pagination-prev,
.pagination-next {
transition: none;
}
}
/**
* AURAL UI - Stepper
*
* Step indicator for multi-step processes like forms, checkouts,
* and onboarding flows. Supports horizontal and vertical layouts.
*/
/* ========================================
Stepper Container
======================================== */
.aural-stepper {
display: flex;
width: 100%;
}
.aural-stepper--horizontal {
flex-direction: row;
align-items: flex-start;
}
.aural-stepper--vertical {
flex-direction: column;
align-items: stretch;
}
/* ========================================
Step Item
======================================== */
.aural-step {
display: flex;
flex: 1;
position: relative;
}
.aural-stepper--horizontal .aural-step {
flex-direction: column;
align-items: center;
text-align: center;
}
.aural-stepper--vertical .aural-step {
flex-direction: row;
align-items: flex-start;
padding-bottom: var(--space-6);
}
.aural-stepper--vertical .aural-step:last-child {
padding-bottom: 0;
}
/* ========================================
Step Indicator (Circle)
======================================== */
.aural-step__indicator {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
width: 44px;
height: 44px;
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
border: 2px solid var(--color-border-medium);
border-radius: 50%;
font-size: var(--text-base);
font-weight: var(--font-semibold);
transition: var(--transition-all-fast);
z-index: 2;
flex-shrink: 0;
}
/* Step States */
.aural-step--active .aural-step__indicator {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px var(--primary-alpha-20);
}
.aural-step--completed .aural-step__indicator {
background: var(--color-success);
color: white;
border-color: var(--color-success);
}
.aural-step--error .aural-step__indicator {
background: var(--color-error);
color: white;
border-color: var(--color-error);
}
.aural-step--disabled .aural-step__indicator {
background: var(--color-bg-tertiary);
color: var(--color-text-disabled);
border-color: var(--color-border-subtle);
opacity: 0.5;
}
/* Clickable Steps */
.aural-step--clickable .aural-step__indicator {
cursor: pointer;
}
.aural-step--clickable .aural-step__indicator:hover:not(.aural-step--disabled .aural-step__indicator) {
border-color: var(--color-primary);
transform: scale(1.05);
}
.aural-step--clickable .aural-step__indicator:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ========================================
Step Connector Line
======================================== */
.aural-step__connector {
position: absolute;
background: var(--color-border-medium);
transition: var(--transition-all-fast);
z-index: 1;
}
/* Horizontal Connector */
.aural-stepper--horizontal .aural-step__connector {
top: 22px;
left: 50%;
right: -50%;
height: 2px;
width: 100%;
}
.aural-stepper--horizontal .aural-step:last-child .aural-step__connector {
display: none;
}
/* Vertical Connector */
.aural-stepper--vertical .aural-step__connector {
top: 44px;
left: 22px;
bottom: 0;
width: 2px;
height: calc(100% - 44px);
}
.aural-stepper--vertical .aural-step:last-child .aural-step__connector {
display: none;
}
/* Connector States */
.aural-step--completed .aural-step__connector {
background: var(--color-success);
}
.aural-step--active .aural-step__connector {
background: linear-gradient(
to right,
var(--color-primary) 0%,
var(--color-border-medium) 100%
);
}
.aural-stepper--vertical .aural-step--active .aural-step__connector {
background: linear-gradient(
to bottom,
var(--color-primary) 0%,
var(--color-border-medium) 100%
);
}
/* ========================================
Step Content
======================================== */
.aural-step__content {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aural-stepper--horizontal .aural-step__content {
margin-top: var(--space-3);
align-items: center;
}
.aural-stepper--vertical .aural-step__content {
margin-left: var(--space-4);
flex: 1;
}
.aural-step__title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text-secondary);
transition: var(--transition-all-fast);
}
.aural-step--active .aural-step__title {
color: var(--color-primary);
font-weight: var(--font-bold);
}
.aural-step--completed .aural-step__title {
color: var(--color-text-primary);
}
.aural-step--disabled .aural-step__title {
color: var(--color-text-disabled);
opacity: 0.5;
}
.aural-step__description {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
line-height: var(--leading-relaxed);
}
.aural-step--active .aural-step__description {
color: var(--color-text-secondary);
}
/* ========================================
Step Icon Support
======================================== */
.aural-step__indicator-icon {
width: 20px;
height: 20px;
}
/* Hide number when icon is present */
.aural-step__indicator:has(.aural-step__indicator-icon) .aural-step__number {
display: none;
}
/* ========================================
Size Variants
======================================== */
.aural-stepper--sm .aural-step__indicator {
min-width: 36px;
min-height: 36px;
width: 36px;
height: 36px;
font-size: var(--text-sm);
}
.aural-stepper--sm.aural-stepper--horizontal .aural-step__connector {
top: 18px;
}
.aural-stepper--sm.aural-stepper--vertical .aural-step__connector {
left: 18px;
top: 36px;
height: calc(100% - 36px);
}
.aural-stepper--sm .aural-step__title {
font-size: var(--text-xs);
}
.aural-stepper--sm .aural-step__description {
font-size: 0.7rem;
}
.aural-stepper--lg .aural-step__indicator {
min-width: 56px;
min-height: 56px;
width: 56px;
height: 56px;
font-size: var(--text-lg);
}
.aural-stepper--lg.aural-stepper--horizontal .aural-step__connector {
top: 28px;
}
.aural-stepper--lg.aural-stepper--vertical .aural-step__connector {
left: 28px;
top: 56px;
height: calc(100% - 56px);
}
.aural-stepper--lg .aural-step__title {
font-size: var(--text-base);
}
.aural-stepper--lg .aural-step__description {
font-size: var(--text-sm);
}
/* ========================================
Numbered Variant
======================================== */
.aural-stepper--numbered .aural-step__indicator::before {
content: attr(data-step);
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-step__indicator,
.aural-step__connector,
.aural-step__title {
transition: none;
}
}
/* ========================================
Responsive
======================================== */
@media (max-width: 640px) {
/* Stack horizontally on mobile if too many steps */
.aural-stepper--horizontal.aural-stepper--responsive {
flex-direction: column;
}
.aural-stepper--horizontal.aural-stepper--responsive .aural-step {
flex-direction: row;
align-items: flex-start;
text-align: left;
padding-bottom: var(--space-6);
}
.aural-stepper--horizontal.aural-stepper--responsive .aural-step__content {
margin-top: 0;
margin-left: var(--space-4);
align-items: flex-start;
}
.aural-stepper--horizontal.aural-stepper--responsive .aural-step__connector {
top: 44px;
left: 22px;
right: auto;
bottom: 0;
width: 2px;
height: calc(100% - 44px);
}
.aural-stepper--horizontal.aural-stepper--responsive .aural-step:last-child {
padding-bottom: 0;
}
}
/**
* AURAL UI - Drawer
*
* Sliding side panel for navigation, filters, or additional content.
* Supports left, right, top, and bottom positions.
*/
/* ========================================
Drawer Backdrop
======================================== */
.aural-drawer-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.aural-drawer-backdrop--open {
opacity: 1;
visibility: visible;
}
/* ========================================
Drawer Container
======================================== */
.aural-drawer {
position: fixed;
z-index: 9999;
background: var(--color-bg-primary);
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
overflow: hidden;
}
/* Prevent body scroll when drawer is open */
body.aural-drawer-open {
overflow: hidden;
}
/* ========================================
Drawer Positions
======================================== */
/* Left Drawer */
.aural-drawer--left {
top: 0;
left: 0;
bottom: 0;
width: 320px;
max-width: 90vw;
transform: translateX(-100%);
border-right: 1px solid var(--color-border-medium);
}
.aural-drawer--left.aural-drawer--open {
transform: translateX(0);
}
/* Right Drawer */
.aural-drawer--right {
top: 0;
right: 0;
bottom: 0;
width: 320px;
max-width: 90vw;
transform: translateX(100%);
border-left: 1px solid var(--color-border-medium);
}
.aural-drawer--right.aural-drawer--open {
transform: translateX(0);
}
/* Top Drawer */
.aural-drawer--top {
top: 0;
left: 0;
right: 0;
height: 400px;
max-height: 90vh;
transform: translateY(-100%);
border-bottom: 1px solid var(--color-border-medium);
}
.aural-drawer--top.aural-drawer--open {
transform: translateY(0);
}
/* Bottom Drawer */
.aural-drawer--bottom {
bottom: 0;
left: 0;
right: 0;
height: 400px;
max-height: 90vh;
transform: translateY(100%);
border-top: 1px solid var(--color-border-medium);
}
.aural-drawer--bottom.aural-drawer--open {
transform: translateY(0);
}
/* ========================================
Drawer Header
======================================== */
.aural-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border-subtle);
flex-shrink: 0;
}
.aural-drawer__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
margin: 0;
}
.aural-drawer__close {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: var(--space-2);
background: transparent;
color: var(--color-text-secondary);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-drawer__close:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.aural-drawer__close:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aural-drawer__close-icon {
width: 24px;
height: 24px;
}
/* ========================================
Drawer Body
======================================== */
.aural-drawer__body {
flex: 1;
padding: var(--space-5);
overflow-y: auto;
overflow-x: hidden;
}
.aural-drawer__body::-webkit-scrollbar {
width: 8px;
}
.aural-drawer__body::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
}
.aural-drawer__body::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-sm);
}
.aural-drawer__body::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
/* ========================================
Drawer Footer
======================================== */
.aural-drawer__footer {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-border-subtle);
flex-shrink: 0;
}
.aural-drawer__footer--right {
justify-content: flex-end;
}
.aural-drawer__footer--center {
justify-content: center;
}
.aural-drawer__footer--between {
justify-content: space-between;
}
/* ========================================
Drawer Size Variants
======================================== */
/* Small */
.aural-drawer--sm.aural-drawer--left,
.aural-drawer--sm.aural-drawer--right {
width: 240px;
}
.aural-drawer--sm.aural-drawer--top,
.aural-drawer--sm.aural-drawer--bottom {
height: 280px;
}
/* Medium (default is already 320px/400px) */
/* Large */
.aural-drawer--lg.aural-drawer--left,
.aural-drawer--lg.aural-drawer--right {
width: 480px;
}
.aural-drawer--lg.aural-drawer--top,
.aural-drawer--lg.aural-drawer--bottom {
height: 560px;
}
/* Extra Large */
.aural-drawer--xl.aural-drawer--left,
.aural-drawer--xl.aural-drawer--right {
width: 640px;
}
.aural-drawer--xl.aural-drawer--top,
.aural-drawer--xl.aural-drawer--bottom {
height: 720px;
}
/* Full Width/Height */
.aural-drawer--full.aural-drawer--left,
.aural-drawer--full.aural-drawer--right {
width: 100vw;
max-width: 100vw;
}
.aural-drawer--full.aural-drawer--top,
.aural-drawer--full.aural-drawer--bottom {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
}
/* ========================================
Drawer Navigation List
======================================== */
.aural-drawer__nav {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.aural-drawer__nav-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
min-height: 44px;
background: transparent;
color: var(--color-text-primary);
border: none;
border-radius: var(--radius-md);
text-align: left;
text-decoration: none;
font-size: var(--text-base);
font-weight: var(--font-medium);
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-drawer__nav-item:hover {
background: var(--color-bg-hover);
color: var(--color-primary);
}
.aural-drawer__nav-item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.aural-drawer__nav-item--active {
background: var(--primary-alpha-10);
color: var(--color-primary);
font-weight: var(--font-semibold);
}
.aural-drawer__nav-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--color-text-secondary);
}
.aural-drawer__nav-item:hover .aural-drawer__nav-icon,
.aural-drawer__nav-item--active .aural-drawer__nav-icon {
color: var(--color-primary);
}
.aural-drawer__nav-label {
flex: 1;
}
.aural-drawer__nav-badge {
flex-shrink: 0;
padding: 2px 8px;
background: var(--color-primary);
color: white;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
}
/* ========================================
Drawer Section
======================================== */
.aural-drawer__section {
margin-bottom: var(--space-6);
}
.aural-drawer__section:last-child {
margin-bottom: 0;
}
.aural-drawer__section-title {
padding: 0 var(--space-4) var(--space-2);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ========================================
Overlay Variants
======================================== */
/* No backdrop blur */
.aural-drawer-backdrop--no-blur {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Darker backdrop */
.aural-drawer-backdrop--dark {
background: rgba(0, 0, 0, 0.75);
}
/* Lighter backdrop */
.aural-drawer-backdrop--light {
background: rgba(0, 0, 0, 0.3);
}
/* No backdrop at all (persistent drawer) */
.aural-drawer--persistent {
position: relative;
box-shadow: none;
}
.aural-drawer--persistent.aural-drawer--left,
.aural-drawer--persistent.aural-drawer--right {
position: static;
transform: none;
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-drawer,
.aural-drawer-backdrop {
transition: none;
}
}
/* ========================================
Responsive
======================================== */
@media (max-width: 640px) {
.aural-drawer--left,
.aural-drawer--right {
width: 100vw;
max-width: 100vw;
}
.aural-drawer--top,
.aural-drawer--bottom {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
}
/* Make large drawers full screen on mobile */
.aural-drawer--lg.aural-drawer--left,
.aural-drawer--lg.aural-drawer--right,
.aural-drawer--xl.aural-drawer--left,
.aural-drawer--xl.aural-drawer--right {
width: 100vw;
}
.aural-drawer--lg.aural-drawer--top,
.aural-drawer--lg.aural-drawer--bottom,
.aural-drawer--xl.aural-drawer--top,
.aural-drawer--xl.aural-drawer--bottom {
height: 100vh;
height: 100dvh;
}
}
/**
* AURAL UI - Context Menu
*
* Right-click menu with keyboard navigation and nested submenus.
* Supports icons, shortcuts, separators, and disabled items.
*/
/* ========================================
Context Menu Container
======================================== */
.aural-context-menu {
position: fixed;
z-index: 9999;
min-width: 200px;
max-width: 320px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
padding: var(--space-2) 0;
opacity: 0;
visibility: hidden;
transform: scale(0.95);
transform-origin: top left;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.aural-context-menu--open {
opacity: 1;
visibility: visible;
transform: scale(1);
}
/* ========================================
Menu Items
======================================== */
.aural-context-menu__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
min-height: 36px;
background: transparent;
color: var(--color-text-primary);
border: none;
text-align: left;
font-size: var(--text-sm);
font-weight: var(--font-medium);
cursor: pointer;
transition: var(--transition-all-fast);
width: 100%;
position: relative;
}
.aural-context-menu__item:hover:not(.aural-context-menu__item--disabled) {
background: var(--color-bg-hover);
color: var(--color-primary);
}
.aural-context-menu__item:focus-visible {
outline: none;
background: var(--color-bg-hover);
color: var(--color-primary);
}
/* Item Icon */
.aural-context-menu__item-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--color-text-secondary);
}
.aural-context-menu__item:hover .aural-context-menu__item-icon,
.aural-context-menu__item:focus-visible .aural-context-menu__item-icon {
color: var(--color-primary);
}
/* Item Label */
.aural-context-menu__item-label {
flex: 1;
}
/* Item Shortcut */
.aural-context-menu__item-shortcut {
flex-shrink: 0;
font-size: var(--text-xs);
color: var(--color-text-tertiary);
font-family: var(--font-mono);
}
/* Submenu Arrow */
.aural-context-menu__item-arrow {
flex-shrink: 0;
width: 12px;
height: 12px;
color: var(--color-text-tertiary);
margin-left: auto;
}
/* ========================================
Item States
======================================== */
.aural-context-menu__item--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.aural-context-menu__item--danger {
color: var(--color-error);
}
.aural-context-menu__item--danger:hover {
background: var(--color-error-bg);
color: var(--color-error);
}
.aural-context-menu__item--active {
background: var(--primary-alpha-10);
color: var(--color-primary);
}
/* ========================================
Checkable Items
======================================== */
.aural-context-menu__item--checkable {
padding-left: var(--space-8);
position: relative;
}
.aural-context-menu__item-check {
position: absolute;
left: var(--space-4);
width: 16px;
height: 16px;
color: var(--color-primary);
opacity: 0;
transition: var(--transition-all-fast);
}
.aural-context-menu__item--checked .aural-context-menu__item-check {
opacity: 1;
}
/* ========================================
Separator
======================================== */
.aural-context-menu__separator {
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-2) var(--space-4);
}
/* ========================================
Group Header
======================================== */
.aural-context-menu__header {
padding: var(--space-2) var(--space-4);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ========================================
Submenu
======================================== */
.aural-context-menu__submenu {
position: absolute;
left: 100%;
top: -var(--space-2);
margin-left: 4px;
z-index: 10000;
}
.aural-context-menu__item:hover > .aural-context-menu__submenu,
.aural-context-menu__item:focus-visible > .aural-context-menu__submenu {
opacity: 1;
visibility: visible;
transform: scale(1);
}
/* Submenu positioning when near edge */
.aural-context-menu__submenu--left {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 4px;
}
/* ========================================
Compact Variant
======================================== */
.aural-context-menu--compact .aural-context-menu__item {
padding: var(--space-1) var(--space-3);
min-height: 28px;
font-size: var(--text-xs);
}
.aural-context-menu--compact .aural-context-menu__item-icon {
width: 14px;
height: 14px;
}
/* ========================================
With Icons Only
======================================== */
.aural-context-menu--icons-only {
min-width: auto;
}
.aural-context-menu--icons-only .aural-context-menu__item {
justify-content: center;
padding: var(--space-2);
}
.aural-context-menu--icons-only .aural-context-menu__item-label,
.aural-context-menu--icons-only .aural-context-menu__item-shortcut {
display: none;
}
/* ========================================
Dark Variant
======================================== */
.aural-context-menu--dark {
background: rgba(0, 0, 0, 0.9);
border-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.aural-context-menu--dark .aural-context-menu__item {
color: rgba(255, 255, 255, 0.9);
}
.aural-context-menu--dark .aural-context-menu__item:hover {
background: rgba(255, 255, 255, 0.1);
}
.aural-context-menu--dark .aural-context-menu__separator {
background: rgba(255, 255, 255, 0.1);
}
/* ========================================
Trigger Context (for element-specific menus)
======================================== */
.aural-context-menu-trigger {
position: relative;
}
/* ========================================
Loading State
======================================== */
.aural-context-menu__item--loading {
pointer-events: none;
}
.aural-context-menu__item--loading::after {
content: '';
position: absolute;
right: var(--space-4);
width: 12px;
height: 12px;
border: 2px solid var(--color-border-subtle);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: aural-context-menu-spin 0.8s linear infinite;
}
@keyframes aural-context-menu-spin {
to {
transform: rotate(360deg);
}
}
/* ========================================
Nested Menu Indicator
======================================== */
.aural-context-menu__item--has-submenu {
position: relative;
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-context-menu {
transition: none;
}
.aural-context-menu__item {
transition: none;
}
.aural-context-menu__item--loading::after {
animation: none;
border-top-color: var(--color-border-subtle);
}
}
/* Screen reader only text */
.aural-context-menu__sr-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
Mobile Adaptations
======================================== */
@media (max-width: 640px) {
.aural-context-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
max-width: 100%;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
transform-origin: bottom center;
max-height: 80vh;
overflow-y: auto;
}
.aural-context-menu--open {
transform: translateY(0);
}
.aural-context-menu:not(.aural-context-menu--open) {
transform: translateY(100%);
}
/* Mobile submenu behavior - stack instead of fly out */
.aural-context-menu__submenu {
position: static;
margin: 0;
padding-left: var(--space-4);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.aural-context-menu__item:hover > .aural-context-menu__submenu,
.aural-context-menu__item:focus-visible > .aural-context-menu__submenu {
max-height: 500px;
}
.aural-context-menu__item-arrow {
transform: rotate(90deg);
}
.aural-context-menu__item:hover .aural-context-menu__item-arrow,
.aural-context-menu__item:focus-visible .aural-context-menu__item-arrow {
transform: rotate(90deg) rotate(180deg);
}
}
/* ========================================
Touch Optimizations
======================================== */
@media (pointer: coarse) {
.aural-context-menu__item {
min-height: 44px;
padding: var(--space-3) var(--space-4);
}
}
/**
* AURAL UI - Bottom Navigation
*
* Mobile-first bottom navigation bar with icons and labels.
* Perfect for mobile apps and responsive web applications.
*/
/* ========================================
Bottom Nav Container
======================================== */
.aural-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-around;
background: var(--color-bg-primary);
border-top: 1px solid var(--color-border-medium);
padding: var(--space-2) var(--space-1);
box-shadow: var(--shadow-xl);
}
/* Ensure content doesn't get hidden behind bottom nav */
body.has-bottom-nav {
padding-bottom: 72px;
}
/* ========================================
Nav Item
======================================== */
.aural-bottom-nav__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: var(--space-2) var(--space-3);
min-width: 64px;
min-height: 56px;
background: transparent;
color: var(--color-text-secondary);
border: none;
border-radius: var(--radius-md);
text-decoration: none;
cursor: pointer;
transition: var(--transition-all-fast);
position: relative;
flex: 1;
max-width: 120px;
}
.aural-bottom-nav__item:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.aural-bottom-nav__item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
background: var(--color-bg-hover);
}
/* ========================================
Active State
======================================== */
.aural-bottom-nav__item--active {
color: var(--color-primary);
font-weight: var(--font-semibold);
}
.aural-bottom-nav__item--active .aural-bottom-nav__icon {
color: var(--color-primary);
transform: scale(1.1);
}
/* ========================================
Nav Item Icon
======================================== */
.aural-bottom-nav__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
transition: var(--transition-all-fast);
}
.aural-bottom-nav__icon svg {
width: 24px;
height: 24px;
}
/* ========================================
Nav Item Label
======================================== */
.aural-bottom-nav__label {
font-size: var(--text-xs);
line-height: 1;
text-align: center;
}
/* ========================================
Badge/Notification
======================================== */
.aural-bottom-nav__badge {
position: absolute;
top: 4px;
right: calc(50% - 20px);
min-width: 18px;
height: 18px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-error);
color: white;
border: 2px solid var(--color-bg-primary);
border-radius: var(--radius-full);
font-size: 0.65rem;
font-weight: var(--font-bold);
line-height: 1;
}
.aural-bottom-nav__badge--pulse {
animation: aural-bottom-nav-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes aural-bottom-nav-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* Badge dot variant (no number) */
.aural-bottom-nav__badge--dot {
min-width: 8px;
width: 8px;
height: 8px;
padding: 0;
top: 6px;
right: calc(50% - 16px);
}
/* ========================================
Floating Action Button (FAB) Variant
======================================== */
.aural-bottom-nav--with-fab {
padding-bottom: var(--space-3);
}
.aural-bottom-nav__fab {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
min-width: 56px;
min-height: 56px;
padding: var(--space-3);
background: var(--color-primary);
color: white;
border: none;
border-radius: var(--radius-full);
box-shadow: var(--shadow-xl);
cursor: pointer;
transition: var(--transition-all-fast);
z-index: 10;
}
.aural-bottom-nav__fab:hover {
background: var(--color-primary-hover);
transform: translateX(-50%) scale(1.1);
}
.aural-bottom-nav__fab:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
.aural-bottom-nav__fab:active {
transform: translateX(-50%) scale(0.95);
}
.aural-bottom-nav__fab svg {
width: 24px;
height: 24px;
}
/* Adjust items spacing for FAB */
.aural-bottom-nav--with-fab .aural-bottom-nav__item:nth-child(2) {
margin-right: 48px;
}
.aural-bottom-nav--with-fab .aural-bottom-nav__item:nth-child(3) {
margin-left: 48px;
}
/* ========================================
Compact Variant (Icon Only)
======================================== */
.aural-bottom-nav--compact .aural-bottom-nav__item {
min-height: 48px;
gap: 0;
}
.aural-bottom-nav--compact .aural-bottom-nav__label {
display: none;
}
.aural-bottom-nav--compact .aural-bottom-nav__icon {
width: 28px;
height: 28px;
}
.aural-bottom-nav--compact .aural-bottom-nav__icon svg {
width: 28px;
height: 28px;
}
/* ========================================
Labeled On Active Variant
======================================== */
.aural-bottom-nav--labeled-active .aural-bottom-nav__label {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.2s ease, opacity 0.2s ease;
}
.aural-bottom-nav--labeled-active .aural-bottom-nav__item--active .aural-bottom-nav__label {
max-height: 20px;
opacity: 1;
}
/* ========================================
Color Variants
======================================== */
.aural-bottom-nav--primary {
background: var(--color-primary);
border-top-color: var(--color-primary);
}
.aural-bottom-nav--primary .aural-bottom-nav__item {
color: rgba(255, 255, 255, 0.7);
}
.aural-bottom-nav--primary .aural-bottom-nav__item:hover,
.aural-bottom-nav--primary .aural-bottom-nav__item--active {
color: white;
background: rgba(255, 255, 255, 0.1);
}
.aural-bottom-nav--dark {
background: rgba(0, 0, 0, 0.9);
border-top-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.aural-bottom-nav--dark .aural-bottom-nav__item {
color: rgba(255, 255, 255, 0.7);
}
.aural-bottom-nav--dark .aural-bottom-nav__item:hover,
.aural-bottom-nav--dark .aural-bottom-nav__item--active {
color: white;
background: rgba(255, 255, 255, 0.1);
}
/* ========================================
Blur Background Variant
======================================== */
.aural-bottom-nav--blur {
background: rgba(var(--color-bg-primary-rgb), 0.8);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
/* ========================================
Divider Between Items
======================================== */
.aural-bottom-nav--divided .aural-bottom-nav__item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 24px;
background: var(--color-border-subtle);
}
/* ========================================
Safe Area Support (iOS notch)
======================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.aural-bottom-nav {
padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
}
.aural-bottom-nav--with-fab {
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}
.aural-bottom-nav__fab {
bottom: calc(24px + env(safe-area-inset-bottom));
}
body.has-bottom-nav {
padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
}
/* ========================================
Slide In/Out Animations
======================================== */
.aural-bottom-nav--slide-out {
transform: translateY(100%);
transition: transform 0.3s ease;
}
.aural-bottom-nav--slide-in {
transform: translateY(0);
transition: transform 0.3s ease;
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-bottom-nav,
.aural-bottom-nav__item,
.aural-bottom-nav__icon,
.aural-bottom-nav__fab {
transition: none;
}
.aural-bottom-nav__badge--pulse {
animation: none;
}
}
/* Screen reader only */
.aural-bottom-nav__sr-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
Desktop (Hide on Large Screens)
======================================== */
@media (min-width: 1024px) {
.aural-bottom-nav--mobile-only {
display: none;
}
body.has-bottom-nav.has-bottom-nav--mobile-only {
padding-bottom: 0;
}
}
/* ========================================
Tablet Adjustments
======================================== */
@media (max-width: 768px) and (min-width: 641px) {
.aural-bottom-nav__item {
max-width: 100px;
}
}
/* ========================================
Small Mobile
======================================== */
@media (max-width: 360px) {
.aural-bottom-nav__item {
padding: var(--space-2) var(--space-1);
min-width: 56px;
}
.aural-bottom-nav__label {
font-size: 0.65rem;
}
}
/* Data Display */
/**
* AURAL UI - Table Component
*
* Structured data display with various styles
*
* Usage:
*
*
*
*
* | Name |
* Email |
* Role |
*
*
*
*
* | John Doe |
* john@example.com |
* Admin |
*
*
*
*
*
*
* JD
*
*
*
*
*
*
* OR
*
*/
.divider {
/* Layout */
display: block;
border: none;
margin: var(--space-6) 0;
/* Appearance */
height: 1px;
background: var(--color-divider);
/* Accessibility */
overflow: visible;
}
/* ========================================
VARIANTS
======================================== */
/* Vertical */
.divider-vertical {
display: inline-block;
width: 1px;
height: auto;
min-height: 1em;
margin: 0 var(--space-4);
vertical-align: middle;
align-self: stretch;
}
/* With Text */
.divider-with-text {
display: flex;
align-items: center;
gap: var(--space-4);
background: transparent;
height: auto;
}
.divider-with-text::before,
.divider-with-text::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-divider);
}
.divider-with-text > * {
flex-shrink: 0;
color: var(--color-divider-text);
font-size: var(--text-sm);
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ========================================
SPACING VARIANTS
======================================== */
.divider-sm {
margin: var(--space-4) 0;
}
.divider-lg {
margin: var(--space-8) 0;
}
.divider-xl {
margin: var(--space-12) 0;
}
/* Vertical spacing */
.divider-vertical.divider-sm {
margin: 0 var(--space-2);
}
.divider-vertical.divider-lg {
margin: 0 var(--space-6);
}
.divider-vertical.divider-xl {
margin: 0 var(--space-8);
}
/* ========================================
STYLE VARIANTS
======================================== */
.divider-dashed {
background: none;
border-top: 1px dashed var(--color-divider);
}
.divider-vertical.divider-dashed {
border-top: none;
border-left: 1px dashed var(--color-divider);
}
.divider-dotted {
background: none;
border-top: 1px dotted var(--color-divider);
}
.divider-vertical.divider-dotted {
border-top: none;
border-left: 1px dotted var(--color-divider);
}
/**
* AURAL UI - Timeline
*
* Vertical and horizontal timeline for displaying chronological events,
* history, activity logs, and process steps.
*/
/* ========================================
Timeline Container
======================================== */
.aural-timeline {
display: flex;
position: relative;
}
.aural-timeline--vertical {
flex-direction: column;
}
.aural-timeline--horizontal {
flex-direction: row;
align-items: flex-start;
overflow-x: auto;
padding-bottom: var(--space-4);
}
.aural-timeline--horizontal::-webkit-scrollbar {
height: 8px;
}
.aural-timeline--horizontal::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
border-radius: var(--radius-sm);
}
.aural-timeline--horizontal::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-sm);
}
/* ========================================
Timeline Item
======================================== */
.aural-timeline__item {
position: relative;
display: flex;
}
.aural-timeline--vertical .aural-timeline__item {
padding-bottom: var(--space-6);
}
.aural-timeline--vertical .aural-timeline__item:last-child {
padding-bottom: 0;
}
.aural-timeline--horizontal .aural-timeline__item {
flex-direction: column;
min-width: 280px;
padding-right: var(--space-6);
}
.aural-timeline--horizontal .aural-timeline__item:last-child {
padding-right: 0;
}
/* ========================================
Timeline Connector (Line)
======================================== */
.aural-timeline__connector {
position: absolute;
background: var(--color-border-medium);
z-index: 1;
}
/* Vertical Connector */
.aural-timeline--vertical .aural-timeline__connector {
left: 16px;
top: 40px;
bottom: 0;
width: 2px;
}
.aural-timeline--vertical .aural-timeline__item:last-child .aural-timeline__connector {
display: none;
}
/* Horizontal Connector */
.aural-timeline--horizontal .aural-timeline__connector {
top: 16px;
left: 40px;
right: 0;
height: 2px;
}
.aural-timeline--horizontal .aural-timeline__item:last-child .aural-timeline__connector {
display: none;
}
/* Active/Completed Connectors */
.aural-timeline__item--completed .aural-timeline__connector {
background: var(--color-success);
}
.aural-timeline__item--active .aural-timeline__connector {
background: linear-gradient(
to bottom,
var(--color-primary) 0%,
var(--color-border-medium) 100%
);
}
.aural-timeline--horizontal .aural-timeline__item--active .aural-timeline__connector {
background: linear-gradient(
to right,
var(--color-primary) 0%,
var(--color-border-medium) 100%
);
}
/* ========================================
Timeline Marker (Dot/Icon)
======================================== */
.aural-timeline__marker {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
width: 32px;
height: 32px;
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
border: 2px solid var(--color-border-medium);
border-radius: 50%;
flex-shrink: 0;
z-index: 2;
transition: var(--transition-all-fast);
}
.aural-timeline__marker-icon {
width: 16px;
height: 16px;
}
/* Marker States */
.aural-timeline__item--completed .aural-timeline__marker {
background: var(--color-success);
color: white;
border-color: var(--color-success);
}
.aural-timeline__item--active .aural-timeline__marker {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px var(--primary-alpha-20);
}
.aural-timeline__item--pending .aural-timeline__marker {
background: var(--color-bg-tertiary);
border-color: var(--color-border-subtle);
}
.aural-timeline__item--error .aural-timeline__marker {
background: var(--color-error);
color: white;
border-color: var(--color-error);
}
.aural-timeline__item--warning .aural-timeline__marker {
background: var(--color-warning);
color: white;
border-color: var(--color-warning);
}
/* ========================================
Timeline Content
======================================== */
.aural-timeline__content {
flex: 1;
display: flex;
flex-direction: column;
}
.aural-timeline--vertical .aural-timeline__content {
margin-left: var(--space-4);
padding-top: 4px;
}
.aural-timeline--horizontal .aural-timeline__content {
margin-top: var(--space-4);
}
.aural-timeline__time {
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text-tertiary);
margin-bottom: var(--space-2);
}
.aural-timeline__title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
margin-bottom: var(--space-1);
line-height: var(--leading-tight);
}
.aural-timeline__description {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-2);
}
.aural-timeline__meta {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-2);
}
.aural-timeline__tag {
padding: 2px 8px;
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
/* ========================================
Timeline Card Variant
======================================== */
.aural-timeline--card .aural-timeline__content {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--shadow-sm);
transition: var(--transition-all-fast);
}
.aural-timeline--card .aural-timeline__content:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.aural-timeline--card.aural-timeline--vertical .aural-timeline__content {
margin-left: var(--space-6);
}
/* ========================================
Timeline with Avatars
======================================== */
.aural-timeline__marker--avatar {
padding: 0;
overflow: hidden;
}
.aural-timeline__marker--avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* ========================================
Alternating Layout (Vertical Only)
======================================== */
.aural-timeline--alternating.aural-timeline--vertical {
position: relative;
padding-left: 50%;
}
.aural-timeline--alternating .aural-timeline__item:nth-child(odd) {
flex-direction: row-reverse;
padding-right: 50%;
padding-left: 0;
}
.aural-timeline--alternating .aural-timeline__item:nth-child(even) {
padding-left: var(--space-6);
}
.aural-timeline--alternating .aural-timeline__connector {
left: 50%;
transform: translateX(-50%);
}
.aural-timeline--alternating .aural-timeline__marker {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.aural-timeline--alternating .aural-timeline__item:nth-child(odd) .aural-timeline__content {
margin-right: var(--space-6);
margin-left: 0;
text-align: right;
}
/* ========================================
Centered Layout (Horizontal)
======================================== */
.aural-timeline--centered.aural-timeline--horizontal {
justify-content: center;
}
/* ========================================
Size Variants
======================================== */
/* Small */
.aural-timeline--sm .aural-timeline__marker {
min-width: 24px;
min-height: 24px;
width: 24px;
height: 24px;
}
.aural-timeline--sm .aural-timeline__marker-icon {
width: 12px;
height: 12px;
}
.aural-timeline--sm .aural-timeline__title {
font-size: var(--text-sm);
}
.aural-timeline--sm .aural-timeline__description {
font-size: var(--text-xs);
}
/* Large */
.aural-timeline--lg .aural-timeline__marker {
min-width: 48px;
min-height: 48px;
width: 48px;
height: 48px;
}
.aural-timeline--lg .aural-timeline__marker-icon {
width: 24px;
height: 24px;
}
.aural-timeline--lg .aural-timeline__title {
font-size: var(--text-lg);
}
.aural-timeline--lg .aural-timeline__description {
font-size: var(--text-base);
}
/* ========================================
Dense Variant
======================================== */
.aural-timeline--dense.aural-timeline--vertical .aural-timeline__item {
padding-bottom: var(--space-4);
}
.aural-timeline--dense .aural-timeline__content {
margin-left: var(--space-3);
}
.aural-timeline--dense .aural-timeline__time {
margin-bottom: var(--space-1);
}
.aural-timeline--dense .aural-timeline__description {
margin-bottom: 0;
}
/* ========================================
Interactive Variant
======================================== */
.aural-timeline--interactive .aural-timeline__item {
cursor: pointer;
}
.aural-timeline--interactive .aural-timeline__content {
transition: var(--transition-all-fast);
}
.aural-timeline--interactive .aural-timeline__item:hover .aural-timeline__content {
background: var(--color-bg-hover);
}
.aural-timeline--interactive .aural-timeline__item:hover .aural-timeline__marker {
transform: scale(1.1);
}
.aural-timeline--interactive .aural-timeline__item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius-md);
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-timeline__marker,
.aural-timeline__content {
transition: none;
}
.aural-timeline--interactive .aural-timeline__item:hover .aural-timeline__marker {
transform: none;
}
}
/* ========================================
Responsive
======================================== */
@media (max-width: 768px) {
/* Convert horizontal to vertical on mobile */
.aural-timeline--horizontal.aural-timeline--responsive {
flex-direction: column;
overflow-x: visible;
}
.aural-timeline--horizontal.aural-timeline--responsive .aural-timeline__item {
flex-direction: row;
min-width: auto;
padding-right: 0;
padding-bottom: var(--space-6);
}
.aural-timeline--horizontal.aural-timeline--responsive .aural-timeline__content {
margin-top: 0;
margin-left: var(--space-4);
}
.aural-timeline--horizontal.aural-timeline--responsive .aural-timeline__connector {
top: 40px;
left: 16px;
right: auto;
bottom: 0;
width: 2px;
height: auto;
}
/* Disable alternating on mobile */
.aural-timeline--alternating {
padding-left: 0;
}
.aural-timeline--alternating .aural-timeline__item:nth-child(odd) {
flex-direction: row;
padding-right: 0;
padding-left: 0;
}
.aural-timeline--alternating .aural-timeline__marker {
position: static;
transform: none;
}
.aural-timeline--alternating .aural-timeline__connector {
left: 16px;
transform: none;
}
.aural-timeline--alternating .aural-timeline__item:nth-child(odd) .aural-timeline__content {
margin-right: 0;
margin-left: var(--space-4);
text-align: left;
}
}
/**
* AURAL UI - Stats Card
*
* Metric display cards with trends, comparisons, and visual indicators.
* Perfect for dashboards and analytics displays.
*/
/* ========================================
Stats Card Container
======================================== */
.aural-stats-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-lg);
transition: var(--transition-all-fast);
}
.aural-stats-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
/* ========================================
Stats Card Header
======================================== */
.aural-stats-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.aural-stats-card__label {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
line-height: var(--leading-tight);
}
.aural-stats-card__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
border-radius: var(--radius-md);
}
.aural-stats-card__icon svg {
width: 20px;
height: 20px;
}
/* Icon color variants */
.aural-stats-card--primary .aural-stats-card__icon {
background: var(--primary-alpha-10);
color: var(--color-primary);
}
.aural-stats-card--success .aural-stats-card__icon {
background: var(--color-success-bg);
color: var(--color-success);
}
.aural-stats-card--warning .aural-stats-card__icon {
background: var(--color-warning-bg);
color: var(--color-warning);
}
.aural-stats-card--error .aural-stats-card__icon {
background: var(--color-error-bg);
color: var(--color-error);
}
.aural-stats-card--info .aural-stats-card__icon {
background: var(--color-info-bg);
color: var(--color-info);
}
/* ========================================
Stats Value
======================================== */
.aural-stats-card__value {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--color-text-primary);
line-height: 1.2;
}
.aural-stats-card__value--large {
font-size: var(--text-4xl);
}
.aural-stats-card__value--small {
font-size: var(--text-2xl);
}
/* ========================================
Trend Indicator
======================================== */
.aural-stats-card__trend {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
line-height: 1;
}
.aural-stats-card__trend-icon {
width: 12px;
height: 12px;
}
/* Trend variants */
.aural-stats-card__trend--up {
background: var(--color-success-bg);
color: var(--color-success);
}
.aural-stats-card__trend--down {
background: var(--color-error-bg);
color: var(--color-error);
}
.aural-stats-card__trend--neutral {
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
}
/* ========================================
Stats Footer
======================================== */
.aural-stats-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-subtle);
}
.aural-stats-card__description {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
line-height: var(--leading-relaxed);
}
.aural-stats-card__link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-primary);
text-decoration: none;
transition: var(--transition-all-fast);
}
.aural-stats-card__link:hover {
color: var(--color-primary-hover);
gap: 6px;
}
.aural-stats-card__link svg {
width: 12px;
height: 12px;
}
/* ========================================
Progress Bar Variant
======================================== */
.aural-stats-card__progress {
width: 100%;
height: 6px;
background: var(--color-bg-tertiary);
border-radius: var(--radius-full);
overflow: hidden;
margin-top: var(--space-2);
}
.aural-stats-card__progress-bar {
height: 100%;
background: var(--color-primary);
border-radius: var(--radius-full);
transition: width 0.5s ease;
}
.aural-stats-card--success .aural-stats-card__progress-bar {
background: var(--color-success);
}
.aural-stats-card--warning .aural-stats-card__progress-bar {
background: var(--color-warning);
}
.aural-stats-card--error .aural-stats-card__progress-bar {
background: var(--color-error);
}
/* ========================================
Comparison Variant
======================================== */
.aural-stats-card__comparison {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
}
.aural-stats-card__comparison-label {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
}
.aural-stats-card__comparison-value {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text-secondary);
}
/* ========================================
Sparkline Variant
======================================== */
.aural-stats-card__sparkline {
width: 100%;
height: 40px;
margin-top: var(--space-2);
}
.aural-stats-card__sparkline svg {
width: 100%;
height: 100%;
}
.aural-stats-card__sparkline-path {
fill: none;
stroke: var(--color-primary);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.aural-stats-card__sparkline-area {
fill: var(--primary-alpha-10);
}
.aural-stats-card--success .aural-stats-card__sparkline-path {
stroke: var(--color-success);
}
.aural-stats-card--success .aural-stats-card__sparkline-area {
fill: var(--color-success-bg);
}
.aural-stats-card--error .aural-stats-card__sparkline-path {
stroke: var(--color-error);
}
.aural-stats-card--error .aural-stats-card__sparkline-area {
fill: var(--color-error-bg);
}
/* ========================================
Size Variants
======================================== */
.aural-stats-card--sm {
padding: var(--space-3) var(--space-4);
gap: var(--space-2);
}
.aural-stats-card--sm .aural-stats-card__value {
font-size: var(--text-2xl);
}
.aural-stats-card--sm .aural-stats-card__icon {
width: 32px;
height: 32px;
}
.aural-stats-card--sm .aural-stats-card__icon svg {
width: 16px;
height: 16px;
}
.aural-stats-card--lg {
padding: var(--space-6) var(--space-8);
gap: var(--space-4);
}
.aural-stats-card--lg .aural-stats-card__value {
font-size: var(--text-5xl);
}
.aural-stats-card--lg .aural-stats-card__icon {
width: 56px;
height: 56px;
}
.aural-stats-card--lg .aural-stats-card__icon svg {
width: 28px;
height: 28px;
}
/* ========================================
Horizontal Layout
======================================== */
.aural-stats-card--horizontal {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.aural-stats-card--horizontal .aural-stats-card__header {
flex-direction: column;
align-items: flex-start;
}
.aural-stats-card--horizontal .aural-stats-card__footer {
border-top: none;
padding-top: 0;
border-left: 1px solid var(--color-border-subtle);
padding-left: var(--space-4);
flex-direction: column;
align-items: flex-end;
}
/* ========================================
Clickable Variant
======================================== */
.aural-stats-card--clickable {
cursor: pointer;
}
.aural-stats-card--clickable:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.aural-stats-card--clickable:active {
transform: translateY(0);
}
/* ========================================
Loading State
======================================== */
.aural-stats-card--loading {
pointer-events: none;
opacity: 0.6;
}
.aural-stats-card--loading .aural-stats-card__value,
.aural-stats-card--loading .aural-stats-card__label {
background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-hover) 50%, var(--color-bg-tertiary) 75%);
background-size: 200% 100%;
animation: aural-stats-card-loading 1.5s ease-in-out infinite;
color: transparent;
border-radius: var(--radius-sm);
}
@keyframes aural-stats-card-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ========================================
Accessibility
======================================== */
.aural-stats-card--clickable:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.aural-stats-card,
.aural-stats-card__progress-bar,
.aural-stats-card--clickable {
transition: none;
}
.aural-stats-card--loading .aural-stats-card__value,
.aural-stats-card--loading .aural-stats-card__label {
animation: none;
}
}
/* ========================================
Responsive
======================================== */
@media (max-width: 640px) {
.aural-stats-card--horizontal {
flex-direction: column;
align-items: stretch;
}
.aural-stats-card--horizontal .aural-stats-card__footer {
border-left: none;
border-top: 1px solid var(--color-border-subtle);
padding-left: 0;
padding-top: var(--space-3);
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
/**
* AURAL UI - Carousel
*
* Image/content slider with navigation dots, arrows, and auto-play.
* Supports touch gestures and keyboard navigation.
*/
/* ========================================
Carousel Container
======================================== */
.aural-carousel {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--radius-lg);
}
/* ========================================
Carousel Track
======================================== */
.aural-carousel__track {
display: flex;
transition: transform 0.5s ease;
}
.aural-carousel__track--no-transition {
transition: none;
}
/* ========================================
Carousel Slide
======================================== */
.aural-carousel__slide {
min-width: 100%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-secondary);
}
.aural-carousel__slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.aural-carousel__slide-content {
padding: var(--space-6);
text-align: center;
}
/* ========================================
Navigation Arrows
======================================== */
.aural-carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: var(--space-3);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition-all-fast);
opacity: 0;
}
.aural-carousel:hover .aural-carousel__arrow {
opacity: 1;
}
.aural-carousel__arrow:hover {
background: rgba(0, 0, 0, 0.7);
transform: translateY(-50%) scale(1.1);
}
.aural-carousel__arrow:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
opacity: 1;
}
.aural-carousel__arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.aural-carousel__arrow:disabled:hover {
transform: translateY(-50%);
}
.aural-carousel__arrow--prev {
left: var(--space-4);
}
.aural-carousel__arrow--next {
right: var(--space-4);
}
.aural-carousel__arrow svg {
width: 20px;
height: 20px;
}
/* ========================================
Pagination Dots
======================================== */
.aural-carousel__pagination {
position: absolute;
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: var(--radius-full);
}
.aural-carousel__dot {
width: 8px;
height: 8px;
padding: 0;
background: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-carousel__dot:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.2);
}
.aural-carousel__dot--active {
background: white;
width: 24px;
border-radius: var(--radius-full);
}
.aural-carousel__dot:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
/* ========================================
Slide Counter
======================================== */
.aural-carousel__counter {
position: absolute;
top: var(--space-4);
right: var(--space-4);
z-index: 10;
padding: var(--space-2) var(--space-3);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
/* ========================================
Thumbnails Variant
======================================== */
.aural-carousel__thumbnails {
display: flex;
gap: var(--space-2);
margin-top: var(--space-4);
overflow-x: auto;
padding-bottom: var(--space-2);
}
.aural-carousel__thumbnails::-webkit-scrollbar {
height: 4px;
}
.aural-carousel__thumbnails::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
border-radius: var(--radius-sm);
}
.aural-carousel__thumbnails::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-sm);
}
.aural-carousel__thumbnail {
min-width: 80px;
height: 60px;
padding: 0;
background: transparent;
border: 2px solid transparent;
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-carousel__thumbnail:hover {
border-color: var(--color-primary);
}
.aural-carousel__thumbnail--active {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--primary-alpha-20);
}
.aural-carousel__thumbnail img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* ========================================
Caption
======================================== */
.aural-carousel__caption {
position: absolute;
bottom: var(--space-4);
left: var(--space-4);
right: var(--space-4);
z-index: 10;
padding: var(--space-4);
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border-radius: var(--radius-md);
}
.aural-carousel__caption-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-1);
line-height: var(--leading-tight);
}
.aural-carousel__caption-description {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
opacity: 0.9;
}
/* ========================================
Fade Variant
======================================== */
.aural-carousel--fade .aural-carousel__track {
position: relative;
}
.aural-carousel--fade .aural-carousel__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.aural-carousel--fade .aural-carousel__slide--active {
position: relative;
opacity: 1;
}
/* ========================================
Auto Height
======================================== */
.aural-carousel--auto-height {
height: auto;
}
.aural-carousel--auto-height .aural-carousel__track {
height: auto;
}
.aural-carousel--auto-height .aural-carousel__slide {
height: auto;
}
/* ========================================
Size Variants
======================================== */
.aural-carousel--sm {
max-height: 300px;
}
.aural-carousel--sm .aural-carousel__slide {
max-height: 300px;
}
.aural-carousel--md {
max-height: 500px;
}
.aural-carousel--md .aural-carousel__slide {
max-height: 500px;
}
.aural-carousel--lg {
max-height: 700px;
}
.aural-carousel--lg .aural-carousel__slide {
max-height: 700px;
}
.aural-carousel--full {
height: 100vh;
height: 100dvh;
}
.aural-carousel--full .aural-carousel__slide {
height: 100vh;
height: 100dvh;
}
/* ========================================
Aspect Ratios
======================================== */
.aural-carousel--16x9 {
aspect-ratio: 16 / 9;
}
.aural-carousel--4x3 {
aspect-ratio: 4 / 3;
}
.aural-carousel--1x1 {
aspect-ratio: 1 / 1;
}
.aural-carousel--21x9 {
aspect-ratio: 21 / 9;
}
/* ========================================
Multiple Slides Per View
======================================== */
.aural-carousel--2-per-view .aural-carousel__slide {
min-width: 50%;
}
.aural-carousel--3-per-view .aural-carousel__slide {
min-width: 33.333%;
}
.aural-carousel--4-per-view .aural-carousel__slide {
min-width: 25%;
}
/* ========================================
Centered Slides
======================================== */
.aural-carousel--centered .aural-carousel__slide {
padding: 0 var(--space-6);
}
/* ========================================
Loop Effect
======================================== */
.aural-carousel--loop .aural-carousel__track {
transition: transform 0.5s ease;
}
/* ========================================
Autoplay Indicator
======================================== */
.aural-carousel__autoplay-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255, 255, 255, 0.3);
z-index: 11;
}
.aural-carousel__autoplay-bar {
height: 100%;
background: var(--color-primary);
width: 0;
transition: width linear;
}
/* ========================================
Pause/Play Button
======================================== */
.aural-carousel__play-button {
position: absolute;
top: var(--space-4);
left: var(--space-4);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: var(--space-2);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-carousel__play-button:hover {
background: rgba(0, 0, 0, 0.7);
}
.aural-carousel__play-button svg {
width: 16px;
height: 16px;
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-carousel__track,
.aural-carousel__slide,
.aural-carousel__arrow,
.aural-carousel__dot {
transition: none;
}
}
/* Screen reader announcements */
.aural-carousel__sr-status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 768px) {
.aural-carousel--3-per-view .aural-carousel__slide,
.aural-carousel--4-per-view .aural-carousel__slide {
min-width: 50%;
}
.aural-carousel__arrow {
opacity: 1;
}
.aural-carousel__caption {
padding: var(--space-3);
}
.aural-carousel__caption-title {
font-size: var(--text-base);
}
.aural-carousel__caption-description {
font-size: var(--text-xs);
}
}
@media (max-width: 640px) {
.aural-carousel--2-per-view .aural-carousel__slide,
.aural-carousel--3-per-view .aural-carousel__slide,
.aural-carousel--4-per-view .aural-carousel__slide {
min-width: 100%;
}
.aural-carousel__arrow {
min-width: 36px;
min-height: 36px;
padding: var(--space-2);
}
.aural-carousel__arrow svg {
width: 16px;
height: 16px;
}
.aural-carousel__arrow--prev {
left: var(--space-2);
}
.aural-carousel__arrow--next {
right: var(--space-2);
}
}
/**
* AURAL UI - Tree View
*
* Hierarchical tree structure for files, folders, and nested navigation.
* Supports expand/collapse, icons, checkboxes, and keyboard navigation.
*/
/* ========================================
Tree Container
======================================== */
.aural-tree {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-medium);
border-radius: var(--radius-lg);
overflow: hidden;
}
.aural-tree ul {
list-style: none;
padding: 0;
margin: 0;
}
/* ========================================
Tree Item
======================================== */
.aural-tree__item {
position: relative;
}
.aural-tree__content {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
min-height: 40px;
background: transparent;
color: var(--color-text-primary);
border: none;
text-align: left;
font-size: var(--text-sm);
font-weight: var(--font-medium);
cursor: pointer;
transition: var(--transition-all-fast);
width: 100%;
border-bottom: 1px solid transparent;
}
.aural-tree__content:hover {
background: var(--color-bg-hover);
color: var(--color-primary);
}
.aural-tree__content:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
background: var(--color-bg-hover);
}
/* ========================================
Tree Item States
======================================== */
.aural-tree__item--selected > .aural-tree__content {
background: var(--primary-alpha-10);
color: var(--color-primary);
font-weight: var(--font-semibold);
}
.aural-tree__item--disabled > .aural-tree__content {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ========================================
Expand/Collapse Toggle
======================================== */
.aural-tree__toggle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--color-text-secondary);
transition: var(--transition-all-fast);
}
.aural-tree__toggle svg {
width: 16px;
height: 16px;
}
.aural-tree__item--expanded > .aural-tree__content .aural-tree__toggle {
transform: rotate(90deg);
}
.aural-tree__item--leaf .aural-tree__toggle {
opacity: 0;
pointer-events: none;
}
/* ========================================
Tree Item Icon
======================================== */
.aural-tree__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: var(--color-text-secondary);
}
.aural-tree__icon svg {
width: 16px;
height: 16px;
}
.aural-tree__item--expanded > .aural-tree__content .aural-tree__icon {
color: var(--color-primary);
}
/* Color variants for icons */
.aural-tree__icon--primary {
color: var(--color-primary);
}
.aural-tree__icon--success {
color: var(--color-success);
}
.aural-tree__icon--warning {
color: var(--color-warning);
}
.aural-tree__icon--error {
color: var(--color-error);
}
.aural-tree__icon--info {
color: var(--color-info);
}
/* ========================================
Tree Item Label
======================================== */
.aural-tree__label {
flex: 1;
line-height: var(--leading-tight);
}
/* ========================================
Tree Item Badge/Count
======================================== */
.aural-tree__badge {
flex-shrink: 0;
padding: 2px 6px;
background: var(--color-bg-tertiary);
color: var(--color-text-tertiary);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
line-height: 1;
}
.aural-tree__item--selected .aural-tree__badge {
background: var(--primary-alpha-20);
color: var(--color-primary);
}
/* ========================================
Tree Item Actions
======================================== */
.aural-tree__actions {
display: none;
align-items: center;
gap: var(--space-1);
margin-left: auto;
}
.aural-tree__content:hover .aural-tree__actions,
.aural-tree__content:focus-visible .aural-tree__actions {
display: flex;
}
.aural-tree__action {
display: flex;
align-items: center;
justify-content: center;
min-width: 28px;
min-height: 28px;
padding: var(--space-1);
background: transparent;
color: var(--color-text-secondary);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-tree__action:hover {
background: var(--color-bg-tertiary);
color: var(--color-primary);
}
.aural-tree__action svg {
width: 14px;
height: 14px;
}
/* ========================================
Nested Tree (Children)
======================================== */
.aural-tree__children {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: var(--space-6);
background: var(--color-bg-secondary);
}
.aural-tree__item--expanded > .aural-tree__children {
max-height: 2000px;
}
.aural-tree__children .aural-tree__content {
border-bottom: 1px solid var(--color-border-subtle);
}
.aural-tree__children .aural-tree__item:last-child .aural-tree__content {
border-bottom: none;
}
/* ========================================
Checkbox Variant
======================================== */
.aural-tree--with-checkboxes .aural-tree__content {
padding-left: var(--space-2);
}
.aural-tree__checkbox {
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: var(--color-bg-secondary);
border: 2px solid var(--color-border-medium);
border-radius: var(--radius-sm);
transition: var(--transition-all-fast);
}
.aural-tree__checkbox svg {
width: 12px;
height: 12px;
opacity: 0;
color: white;
transition: var(--transition-all-fast);
}
.aural-tree__item--checked .aural-tree__checkbox {
background: var(--color-primary);
border-color: var(--color-primary);
}
.aural-tree__item--checked .aural-tree__checkbox svg {
opacity: 1;
}
.aural-tree__item--indeterminate .aural-tree__checkbox {
background: var(--primary-alpha-20);
border-color: var(--color-primary);
}
.aural-tree__item--indeterminate .aural-tree__checkbox::after {
content: '';
position: absolute;
width: 8px;
height: 2px;
background: var(--color-primary);
border-radius: 1px;
}
/* ========================================
Connection Lines
======================================== */
.aural-tree--with-lines .aural-tree__item {
position: relative;
}
.aural-tree--with-lines .aural-tree__item::before {
content: '';
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 1px;
background: var(--color-border-subtle);
}
.aural-tree--with-lines .aural-tree__item::after {
content: '';
position: absolute;
left: 10px;
top: 20px;
width: 16px;
height: 1px;
background: var(--color-border-subtle);
}
.aural-tree--with-lines .aural-tree__item:last-child::before {
bottom: auto;
height: 20px;
}
.aural-tree--with-lines > .aural-tree__item::before,
.aural-tree--with-lines > .aural-tree__item::after {
display: none;
}
/* ========================================
Compact Variant
======================================== */
.aural-tree--compact .aural-tree__content {
padding: var(--space-1) var(--space-2);
min-height: 32px;
font-size: var(--text-xs);
}
.aural-tree--compact .aural-tree__icon,
.aural-tree--compact .aural-tree__toggle {
width: 16px;
height: 16px;
}
.aural-tree--compact .aural-tree__icon svg,
.aural-tree--compact .aural-tree__toggle svg {
width: 12px;
height: 12px;
}
.aural-tree--compact .aural-tree__children {
padding-left: var(--space-4);
}
/* ========================================
Large Variant
======================================== */
.aural-tree--large .aural-tree__content {
padding: var(--space-3) var(--space-4);
min-height: 48px;
font-size: var(--text-base);
}
.aural-tree--large .aural-tree__icon,
.aural-tree--large .aural-tree__toggle {
width: 24px;
height: 24px;
}
.aural-tree--large .aural-tree__icon svg,
.aural-tree--large .aural-tree__toggle svg {
width: 20px;
height: 20px;
}
.aural-tree--large .aural-tree__children {
padding-left: var(--space-8);
}
/* ========================================
Loading State
======================================== */
.aural-tree__item--loading > .aural-tree__content {
pointer-events: none;
}
.aural-tree__item--loading .aural-tree__toggle {
animation: aural-tree-spin 1s linear infinite;
}
@keyframes aural-tree-spin {
to {
transform: rotate(360deg);
}
}
/* ========================================
Draggable Variant
======================================== */
.aural-tree--draggable .aural-tree__content {
cursor: grab;
}
.aural-tree__item--dragging > .aural-tree__content {
opacity: 0.5;
cursor: grabbing;
}
.aural-tree__item--drop-target > .aural-tree__content {
background: var(--primary-alpha-10);
border: 2px dashed var(--color-primary);
}
/* ========================================
Search Highlight
======================================== */
.aural-tree__label mark {
background: var(--color-warning-bg);
color: var(--color-warning);
padding: 0 2px;
border-radius: var(--radius-sm);
}
/* ========================================
Empty State
======================================== */
.aural-tree__empty {
padding: var(--space-8) var(--space-4);
text-align: center;
color: var(--color-text-tertiary);
font-size: var(--text-sm);
}
.aural-tree__empty-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-3);
color: var(--color-text-muted);
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-tree__content,
.aural-tree__toggle,
.aural-tree__children,
.aural-tree__checkbox {
transition: none;
}
.aural-tree__item--loading .aural-tree__toggle {
animation: none;
}
}
/* Screen reader only */
.aural-tree__sr-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
Hover Effects
======================================== */
.aural-tree--highlight-hover .aural-tree__content:hover {
box-shadow: inset 4px 0 0 var(--color-primary);
}
/* ========================================
Responsive
======================================== */
@media (max-width: 640px) {
.aural-tree__content {
padding: var(--space-2);
min-height: 44px;
}
.aural-tree__actions {
display: flex;
}
.aural-tree__children {
padding-left: var(--space-4);
}
}
/**
* AURAL UI - Image Gallery
*
* Responsive grid gallery with lightbox modal for full-size viewing.
* Supports captions, thumbnails, navigation, and keyboard controls.
*/
/* ========================================
Gallery Grid
======================================== */
.aural-gallery {
display: grid;
gap: var(--space-4);
width: 100%;
}
/* Grid columns */
.aural-gallery--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.aural-gallery--cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.aural-gallery--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.aural-gallery--cols-5 {
grid-template-columns: repeat(5, 1fr);
}
.aural-gallery--cols-6 {
grid-template-columns: repeat(6, 1fr);
}
/* Auto-responsive */
.aural-gallery--auto {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* ========================================
Gallery Item
======================================== */
.aural-gallery__item {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--color-bg-secondary);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-gallery__item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.aural-gallery__item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ========================================
Gallery Image
======================================== */
.aural-gallery__image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.3s ease;
}
.aural-gallery__item:hover .aural-gallery__image {
transform: scale(1.05);
}
/* ========================================
Image Overlay
======================================== */
.aural-gallery__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.7));
opacity: 0;
transition: var(--transition-all-fast);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-4);
color: white;
}
.aural-gallery__item:hover .aural-gallery__overlay,
.aural-gallery__item:focus-visible .aural-gallery__overlay {
opacity: 1;
}
.aural-gallery__title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
margin-bottom: var(--space-1);
line-height: var(--leading-tight);
}
.aural-gallery__description {
font-size: var(--text-xs);
opacity: 0.9;
line-height: var(--leading-relaxed);
}
/* ========================================
Image Badge/Icon
======================================== */
.aural-gallery__badge {
position: absolute;
top: var(--space-2);
right: var(--space-2);
padding: 4px 8px;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
z-index: 2;
}
.aural-gallery__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border-radius: var(--radius-full);
opacity: 0;
transition: var(--transition-all-fast);
z-index: 2;
}
.aural-gallery__item:hover .aural-gallery__icon {
opacity: 1;
}
.aural-gallery__icon svg {
width: 24px;
height: 24px;
}
/* ========================================
Lightbox Modal
======================================== */
.aural-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.95);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.aural-lightbox--open {
opacity: 1;
visibility: visible;
}
/* ========================================
Lightbox Content
======================================== */
.aural-lightbox__content {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
}
.aural-lightbox__image-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: calc(90vh - 100px);
}
.aural-lightbox__image {
max-width: 100%;
max-height: calc(90vh - 100px);
-o-object-fit: contain;
object-fit: contain;
border-radius: var(--radius-md);
box-shadow: var(--shadow-2xl);
}
/* ========================================
Lightbox Navigation
======================================== */
.aural-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 48px;
padding: var(--space-3);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition-all-fast);
z-index: 10;
}
.aural-lightbox__nav:hover {
background: rgba(0, 0, 0, 0.7);
transform: translateY(-50%) scale(1.1);
}
.aural-lightbox__nav:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
.aural-lightbox__nav:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.aural-lightbox__nav:disabled:hover {
transform: translateY(-50%);
}
.aural-lightbox__nav--prev {
left: var(--space-4);
}
.aural-lightbox__nav--next {
right: var(--space-4);
}
.aural-lightbox__nav svg {
width: 24px;
height: 24px;
}
/* ========================================
Lightbox Close Button
======================================== */
.aural-lightbox__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: var(--space-2);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition-all-fast);
z-index: 10;
}
.aural-lightbox__close:hover {
background: rgba(0, 0, 0, 0.7);
transform: scale(1.1);
}
.aural-lightbox__close:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
.aural-lightbox__close svg {
width: 20px;
height: 20px;
}
/* ========================================
Lightbox Caption
======================================== */
.aural-lightbox__caption {
margin-top: var(--space-4);
text-align: center;
color: white;
max-width: 600px;
}
.aural-lightbox__caption-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-1);
line-height: var(--leading-tight);
}
.aural-lightbox__caption-description {
font-size: var(--text-sm);
opacity: 0.9;
line-height: var(--leading-relaxed);
}
/* ========================================
Lightbox Counter
======================================== */
.aural-lightbox__counter {
position: absolute;
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%);
padding: var(--space-2) var(--space-3);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--font-medium);
z-index: 10;
}
/* ========================================
Lightbox Zoom Controls
======================================== */
.aural-lightbox__zoom {
position: absolute;
top: var(--space-4);
left: var(--space-4);
display: flex;
gap: var(--space-2);
z-index: 10;
}
.aural-lightbox__zoom-button {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: var(--space-2);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: white;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-all-fast);
}
.aural-lightbox__zoom-button:hover {
background: rgba(0, 0, 0, 0.7);
}
.aural-lightbox__zoom-button svg {
width: 18px;
height: 18px;
}
/* Zoomed state */
.aural-lightbox__image--zoomed {
cursor: grab;
max-width: none;
max-height: none;
width: auto;
height: auto;
}
.aural-lightbox__image--dragging {
cursor: grabbing;
}
/* ========================================
Thumbnails Strip
======================================== */
.aural-lightbox__thumbnails {
position: absolute;
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--space-2);
padding: var(--space-2);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: var(--radius-md);
max-width: 90vw;
overflow-x: auto;
z-index: 10;
}
.aural-lightbox__thumbnails::-webkit-scrollbar {
height: 4px;
}
.aural-lightbox__thumbnails::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
}
.aural-lightbox__thumbnails::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
.aural-lightbox__thumbnail {
width: 60px;
height: 60px;
padding: 0;
background: transparent;
border: 2px solid transparent;
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
transition: var(--transition-all-fast);
flex-shrink: 0;
}
.aural-lightbox__thumbnail:hover {
border-color: rgba(255, 255, 255, 0.5);
}
.aural-lightbox__thumbnail--active {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}
.aural-lightbox__thumbnail img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* ========================================
Loading State
======================================== */
.aural-gallery__item--loading {
pointer-events: none;
}
.aural-gallery__item--loading::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.1) 50%, transparent 75%);
background-size: 200% 100%;
animation: aural-gallery-shimmer 1.5s ease-in-out infinite;
}
@keyframes aural-gallery-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ========================================
Masonry Layout
======================================== */
.aural-gallery--masonry {
display: block;
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: var(--space-4);
column-gap: var(--space-4);
}
.aural-gallery--masonry .aural-gallery__item {
aspect-ratio: auto;
margin-bottom: var(--space-4);
-moz-column-break-inside: avoid;
break-inside: avoid;
}
/* ========================================
Compact Gap
======================================== */
.aural-gallery--compact {
gap: var(--space-2);
}
.aural-gallery--compact.aural-gallery--masonry {
-moz-column-gap: var(--space-2);
column-gap: var(--space-2);
}
.aural-gallery--compact.aural-gallery--masonry .aural-gallery__item {
margin-bottom: var(--space-2);
}
/* ========================================
No Borders Variant
======================================== */
.aural-gallery--borderless .aural-gallery__item {
border-radius: 0;
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
.aural-gallery__item,
.aural-gallery__image,
.aural-gallery__overlay,
.aural-lightbox,
.aural-lightbox__nav,
.aural-lightbox__close {
transition: none;
}
.aural-gallery__item--loading::after {
animation: none;
}
}
/* Screen reader only */
.aural-gallery__sr-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 1024px) {
.aural-gallery--cols-6 {
grid-template-columns: repeat(4, 1fr);
}
.aural-gallery--masonry {
-moz-column-count: 2;
column-count: 2;
}
}
@media (max-width: 768px) {
.aural-gallery--cols-4,
.aural-gallery--cols-5,
.aural-gallery--cols-6 {
grid-template-columns: repeat(3, 1fr);
}
.aural-lightbox__nav {
min-width: 40px;
min-height: 40px;
padding: var(--space-2);
}
.aural-lightbox__nav svg {
width: 20px;
height: 20px;
}
.aural-lightbox__thumbnails {
display: none;
}
}
@media (max-width: 640px) {
.aural-gallery--cols-2,
.aural-gallery--cols-3,
.aural-gallery--cols-4,
.aural-gallery--cols-5,
.aural-gallery--cols-6 {
grid-template-columns: repeat(2, 1fr);
}
.aural-gallery--masonry {
-moz-column-count: 1;
column-count: 1;
}
.aural-lightbox__content {
max-width: 100vw;
max-height: 100vh;
max-height: 100dvh;
}
.aural-lightbox__image {
max-height: calc(100vh - 100px);
max-height: calc(100dvh - 100px);
border-radius: 0;
}
.aural-lightbox__nav--prev {
left: var(--space-2);
}
.aural-lightbox__nav--next {
right: var(--space-2);
}
.aural-lightbox__close {
top: var(--space-2);
right: var(--space-2);
}
}
/* Interactive */
/**
* AURAL UI - Tooltip Component
*
* Contextual information on hover/focus
*
* Usage:
*
*
* Or with custom trigger:
*
*/
.tooltip {
/* Layout */
position: absolute;
z-index: 9999;
max-width: 320px;
/* Spacing */
padding: var(--space-2) var(--space-3);
/* Typography */
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--color-tooltip-text);
line-height: var(--leading-normal);
text-align: left;
/* Appearance */
background: var(--color-tooltip-bg);
border: 1px solid var(--color-tooltip-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
word-wrap: break-word;
/* Animation */
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
/* Backdrop blur */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Show state */
.tooltip.tooltip-show {
opacity: 1;
pointer-events: auto;
}
/* ========================================
POSITIONS
======================================== */
/* Top */
.tooltip-top {
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
margin-bottom: 8px;
}
.tooltip-top.tooltip-show {
transform: translateX(-50%) translateY(0);
}
/* Bottom */
.tooltip-bottom {
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
margin-top: 8px;
}
.tooltip-bottom.tooltip-show {
transform: translateX(-50%) translateY(0);
}
/* Left */
.tooltip-left {
right: 100%;
top: 50%;
transform: translateY(-50%) translateX(-8px);
margin-right: 8px;
}
.tooltip-left.tooltip-show {
transform: translateY(-50%) translateX(0);
}
/* Right */
.tooltip-right {
left: 100%;
top: 50%;
transform: translateY(-50%) translateX(8px);
margin-left: 8px;
}
.tooltip-right.tooltip-show {
transform: translateY(-50%) translateX(0);
}
/* ========================================
ARROW (optional)
======================================== */
.tooltip-with-arrow::before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
}
/* Top arrow */
.tooltip-top.tooltip-with-arrow::before {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: var(--color-tooltip-border);
}
.tooltip-top.tooltip-with-arrow::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: var(--color-tooltip-bg);
margin-top: -1px;
}
/* Bottom arrow */
.tooltip-bottom.tooltip-with-arrow::before {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom-color: var(--color-tooltip-border);
}
.tooltip-bottom.tooltip-with-arrow::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: var(--color-tooltip-bg);
margin-bottom: -1px;
}
/* Left arrow */
.tooltip-left.tooltip-with-arrow::before {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-left-color: var(--color-tooltip-border);
}
.tooltip-left.tooltip-with-arrow::after {
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: var(--color-tooltip-bg);
margin-left: -1px;
}
/* Right arrow */
.tooltip-right.tooltip-with-arrow::before {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-right-color: var(--color-tooltip-border);
}
.tooltip-right.tooltip-with-arrow::after {
content: '';
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: var(--color-tooltip-bg);
margin-right: -1px;
}
/* ========================================
SIZES
======================================== */
.tooltip-sm {
max-width: 200px;
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
}
.tooltip-lg {
max-width: 400px;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
}
/* ========================================
WRAPPER FOR POSITIONING
======================================== */
.tooltip-wrapper {
position: relative;
display: inline-flex;
}
/* ========================================
DATA ATTRIBUTE TOOLTIPS
======================================== */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
z-index: 9999;
max-width: 320px;
padding: var(--space-2) var(--space-3);
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--color-tooltip-text);
line-height: var(--leading-normal);
background: var(--color-tooltip-bg);
border: 1px solid var(--color-tooltip-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
white-space: normal;
word-wrap: break-word;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
opacity: 1;
}
/* Position variants for data-tooltip */
[data-tooltip][data-tooltip-position="top"]::after,
[data-tooltip]:not([data-tooltip-position])::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
margin-bottom: 8px;
}
[data-tooltip][data-tooltip-position="top"]:hover::after,
[data-tooltip]:not([data-tooltip-position]):hover::after {
transform: translateX(-50%) translateY(0);
}
[data-tooltip][data-tooltip-position="bottom"]::after {
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
margin-top: 8px;
}
[data-tooltip][data-tooltip-position="bottom"]:hover::after {
transform: translateX(-50%) translateY(0);
}
[data-tooltip][data-tooltip-position="left"]::after {
right: 100%;
top: 50%;
transform: translateY(-50%) translateX(-8px);
margin-right: 8px;
}
[data-tooltip][data-tooltip-position="left"]:hover::after {
transform: translateY(-50%) translateX(0);
}
[data-tooltip][data-tooltip-position="right"]::after {
left: 100%;
top: 50%;
transform: translateY(-50%) translateX(8px);
margin-left: 8px;
}
[data-tooltip][data-tooltip-position="right"]:hover::after {
transform: translateY(-50%) translateX(0);
}
/* ========================================
COLOR VARIANTS
======================================== */
.tooltip-dark {
background: rgba(0, 0, 0, 0.9);
border-color: rgba(255, 255, 255, 0.1);
}
.tooltip-light {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(0, 0, 0, 0.1);
color: var(--color-text-inverse);
}
.tooltip-primary {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.tooltip-success {
background: var(--color-success);
border-color: var(--color-success);
color: white;
}
.tooltip-warning {
background: var(--color-warning);
border-color: var(--color-warning);
color: var(--color-text-inverse);
}
.tooltip-error {
background: var(--color-error);
border-color: var(--color-error);
color: white;
}
/* ========================================
ACCESSIBILITY
======================================== */
/* Ensure tooltips are keyboard accessible */
.tooltip:focus-within {
opacity: 1;
pointer-events: auto;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.tooltip,
[data-tooltip]::after {
transition: none;
}
.tooltip-show,
[data-tooltip]:hover::after {
transform: none !important;
}
}
/**
* AURAL UI - Dropdown Component
*
* Action menus and dropdown panels
*
* Usage:
*
*
*
*
*/
.dropdown {
/* Layout */
position: relative;
display: inline-flex;
}
/* ========================================
TRIGGER BUTTON
======================================== */
.dropdown-trigger {
/* Layout */
display: inline-flex;
align-items: center;
gap: var(--space-2);
/* Interaction */
cursor: pointer;
outline: none;
}
.dropdown-trigger[aria-expanded="true"] {
/* Optional: style for open state */
}
.dropdown-trigger:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ========================================
DROPDOWN MENU
======================================== */
.dropdown-menu {
/* Layout */
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 200px;
margin-top: var(--space-1);
overflow: auto;
max-height: 400px;
display: block;
/* Appearance */
background: var(--color-dropdown-bg);
border: 1px solid var(--color-dropdown-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
/* Animation */
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
/* Backdrop blur */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* Typography */
font-family: var(--font-sans);
/* Accessibility */
outline: none;
}
/* Override browser default hidden behavior */
.dropdown-menu[hidden] {
display: block;
}
/* Custom scrollbar */
.dropdown-menu {
scrollbar-width: thin;
scrollbar-color: var(--color-border-medium) transparent;
}
.dropdown-menu::-webkit-scrollbar {
width: 8px;
}
.dropdown-menu::-webkit-scrollbar-track {
background: transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background: var(--color-border-medium);
border-radius: var(--radius-full);
}
/* Open state */
.dropdown.dropdown-open .dropdown-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ========================================
DROPDOWN ITEMS
======================================== */
.dropdown-item {
/* Layout */
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
/* Spacing */
padding: var(--space-3) var(--space-4);
/* Typography */
font-size: var(--text-sm);
color: var(--color-dropdown-item-text);
line-height: var(--leading-normal);
text-decoration: none;
white-space: nowrap;
/* Appearance */
background: transparent;
border: none;
text-align: left;
/* Transitions */
transition: var(--transition-all-fast);
/* Interaction */
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.dropdown-item > svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--color-text-muted);
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--color-dropdown-item-hover);
}
.dropdown-item:active {
background: var(--color-dropdown-item-active);
}
.dropdown-item:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.dropdown-item[disabled],
.dropdown-item.dropdown-item-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Active/selected item */
.dropdown-item-active,
.dropdown-item[aria-current="true"] {
background: var(--color-dropdown-item-active);
color: var(--color-primary);
font-weight: var(--font-medium);
}
/* Destructive action */
.dropdown-item-danger {
color: var(--color-error);
}
.dropdown-item-danger:hover,
.dropdown-item-danger:focus {
background: rgba(239, 68, 68, 0.1);
}
/* ========================================
DROPDOWN HEADER
======================================== */
.dropdown-header {
/* Spacing */
padding: var(--space-2) var(--space-4);
/* Typography */
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--color-dropdown-header-text);
text-transform: uppercase;
letter-spacing: 0.05em;
/* Interaction */
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
pointer-events: none;
}
/* ========================================
DROPDOWN DIVIDER
======================================== */
.dropdown-divider {
/* Appearance */
height: 1px;
background: var(--color-dropdown-divider);
margin: var(--space-1) 0;
/* Accessibility */
overflow: hidden;
}
/* ========================================
DROPDOWN FOOTER
======================================== */
.dropdown-footer {
/* Spacing */
padding: var(--space-3) var(--space-4);
/* Appearance */
border-top: 1px solid var(--color-dropdown-divider);
/* Typography */
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
/* ========================================
POSITIONS
======================================== */
/* Right aligned */
.dropdown-right .dropdown-menu,
.dropdown-menu.dropdown-menu-right {
right: 0;
left: auto;
}
/* Center aligned */
.dropdown-center .dropdown-menu {
left: 50%;
transform: translateX(-50%) translateY(-8px);
}
.dropdown-center .dropdown-menu:not([hidden]) {
transform: translateX(-50%) translateY(0);
}
/* Dropup (above) */
.dropdown-up .dropdown-menu {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: var(--space-1);
transform: translateY(8px);
}
.dropdown-up .dropdown-menu:not([hidden]) {
transform: translateY(0);
}
/* Dropstart (left) */
.dropdown-start .dropdown-menu {
top: 0;
left: auto;
right: 100%;
margin-top: 0;
margin-right: var(--space-1);
transform: translateX(8px);
}
.dropdown-start .dropdown-menu:not([hidden]) {
transform: translateX(0);
}
/* Dropend (right) */
.dropdown-end .dropdown-menu {
top: 0;
left: 100%;
margin-top: 0;
margin-left: var(--space-1);
transform: translateX(-8px);
}
.dropdown-end .dropdown-menu:not([hidden]) {
transform: translateX(0);
}
/* ========================================
SIZES
======================================== */
.dropdown-sm .dropdown-menu {
min-width: 150px;
}
.dropdown-sm .dropdown-item {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
}
.dropdown-lg .dropdown-menu {
min-width: 280px;
}
.dropdown-lg .dropdown-item {
padding: var(--space-4) var(--space-5);
font-size: var(--text-base);
}
/* Full width */
.dropdown-full .dropdown-menu {
width: 100%;
min-width: 100%;
}
/* ========================================
ITEM WITH DESCRIPTION
======================================== */
.dropdown-item-with-description {
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
}
.dropdown-item-with-description .dropdown-item-title {
font-weight: var(--font-medium);
color: var(--color-text-primary);
}
.dropdown-item-with-description .dropdown-item-description {
font-size: var(--text-xs);
color: var(--color-text-secondary);
white-space: normal;
}
/* ========================================
ITEM WITH SHORTCUT
======================================== */
.dropdown-item-with-shortcut {
justify-content: space-between;
}
.dropdown-item-with-shortcut .dropdown-item-shortcut {
margin-left: var(--space-4);
font-size: var(--text-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
}
/* ========================================
NESTED DROPDOWNS
======================================== */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-item::after {
content: '';
width: 16px;
height: 16px;
margin-left: auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(255,255,255,0.5)'%3E%3Cpath fill-rule='evenodd' d='M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
/* ========================================
ACCESSIBILITY
======================================== */
/* Focus trap for keyboard navigation */
.dropdown-menu:focus {
outline: none;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.dropdown-menu,
.dropdown-item {
transition: none;
}
.dropdown.dropdown-open .dropdown-menu,
.dropdown-menu:not([hidden]),
.dropdown-center .dropdown-menu:not([hidden]),
.dropdown-up .dropdown-menu:not([hidden]),
.dropdown-start .dropdown-menu:not([hidden]),
.dropdown-end .dropdown-menu:not([hidden]) {
transform: none !important;
}
}
/**
* AURAL UI - Accordion Component
*
* Collapsible sections for organizing content
*
* Usage:
*
*
*
*
*
* Content for section 1
*
*
*
*
*
*
*
*
* Popover content goes here
*
*
*
*
*