Quick Start Logout

Element Components

Element components provide utility UI elements for loading states, progress indicators, and visual enhancements.

The SDK is still in it's early stages. A lot of breaking changes will potentially be introduced as development progresses

Spinner

Loading spinner component with customizable size and color variants.

Web Component Usage
<!-- Basic spinner -->
<alviere-spinner></alviere-spinner>

<!-- Customized spinner -->
<alviere-spinner size="lg" variant="circular" color="#227e9e"></alviere-spinner>

<!-- Dots variant spinner -->
<alviere-spinner size="md" variant="dots" message="Loading data..."></alviere-spinner>

<!-- Small spinner with custom color -->
<alviere-spinner size="sm" primaryColor="#b3311f" ariaLabel="Processing"></alviere-spinner>
Svelte Component Usage
<script>
  import { Spinner } from '@alviere/ui-svelte';
</script>

<!-- Basic usage -->
<Spinner />

<!-- Customized -->
<Spinner size="lg" variant="circular" color="#227e9e" />

<!-- Dots variant with message -->
<Spinner size="md" variant="dots" message="Loading data..." />

<!-- Conditional rendering -->
{#if isLoading}
  <Spinner size="md" variant="circular" primaryColor="#436b1d" ariaLabel="Loading content" />
{/if}
Props
Prop Type Default Description
size 'sm' | 'md' | 'lg' 'md' Size of the spinner
variant 'circular' | 'dots' 'circular' Visual variant of the spinner
color string '' Custom color for the spinner (overrides theme)
primaryColor string '' Primary color for the spinner (alternative to color)
message string '' Optional message text displayed below the spinner
ariaLabel string 'Loading...' ARIA label for accessibility
Size Variants
Size CSS Class Description
sm .alviere-spinner--sm Small spinner (16px)
md .alviere-spinner--md Medium spinner (24px)
lg .alviere-spinner--lg Large spinner (32px)
Color Variants
Color CSS Class Description
primary .alviere-spinner--primary Primary brand color
secondary .alviere-spinner--secondary Secondary brand color
success .alviere-spinner--success Success state color
error .alviere-spinner--error Error state color
Features
  • Smooth Animation: CSS-based smooth rotation animation
  • Accessibility: Proper ARIA attributes for screen readers
  • Responsive: Scales appropriately on different screen sizes
  • Customizable: Easy to customize with CSS custom properties
Styling
CSS Custom Properties
.alviere-spinner {
  --spinner-color: var(--primary-color, #007bff);
  --spinner-size: 24px;
  --spinner-border-width: 2px;
  --spinner-animation-duration: 1s;
}
Custom Styling
/* Custom spinner colors */
.alviere-spinner--custom {
  --spinner-color: #ff6b6b;
  --spinner-border-width: 3px;
}

/* Custom animation */
.alviere-spinner--fast {
  --spinner-animation-duration: 0.5s;
}

Timeline

Timeline component for displaying progress, history, or sequential information.

Web Component Usage
<!-- Basic timeline -->
<alviere-timeline
  steps='[{"label":"Step 1","status":"completed"},{"label":"Step 2","status":"active"}]'>
</alviere-timeline>

<!-- Customized timeline -->
<alviere-timeline
  steps='[{"label":"Account Created","status":"completed","description":"Your account has been successfully created"},{"label":"Verification","status":"active","description":"Please verify your email address"}]'
  size="md"
  orientation="vertical"
  show-labels="true"
  show-descriptions="true"
  show-connectors="true">
</alviere-timeline>
Svelte Component Usage
<script>
  import { Timeline } from '@alviere/ui-svelte';
  
  const steps = [
    {
      label: 'Account Created',
      status: 'completed',
      description: 'Your account has been successfully created'
    },
    {
      label: 'Verification',
      status: 'active',
      description: 'Please verify your email address'
    },
    {
      label: 'Setup Complete',
      status: 'pending',
      description: 'Complete your profile setup'
    }
  ];
</script>

<Timeline 
  {steps}
  size="md"
  orientation="vertical"
  showLabels={true}
  showDescriptions={true}
  showConnectors={true}
  on:stepclick={(event) => console.log('Step clicked:', event.detail)}
/>
Props
Prop Type Default Description
steps TimelineStep[] [] Array of timeline steps
size 'sm' | 'md' | 'lg' 'md' Size of timeline step indicators
orientation 'horizontal' | 'vertical' 'horizontal' Timeline orientation
showLabels boolean true Show step labels
showDescriptions boolean false Show step descriptions
showConnectors boolean true Show connecting lines between steps
clickable boolean false Make steps clickable
TimelineStep Interface
interface TimelineStep {
  label: string;
  status: 'completed' | 'active' | 'pending' | 'error';
  description?: string;
  icon?: string;
  timestamp?: string;
  metadata?: Record<string, any>;
}
Step Status Types
Status CSS Class Description
completed .alviere-timeline__step--completed Step has been completed successfully
active .alviere-timeline__step--active Step is currently active/in progress
pending .alviere-timeline__step--pending Step is waiting to be started
error .alviere-timeline__step--error Step encountered an error
Events
Event Payload Description
stepclick { stepIndex: number, step: TimelineStep } Fired when a step is clicked (if clickable)
Features
Orientation Options
  • Horizontal: Steps displayed in a row (default)
  • Vertical: Steps displayed in a column
Visual Elements
  • Step Indicators: Clear visual representation of each step
  • Connectors: Lines connecting steps to show progression
  • Status Icons: Visual indicators for step status
  • Labels & Descriptions: Clear text for each step
Responsive Behavior
  • Mobile Optimization: Automatically adjusts for small screens
  • Touch Support: Optimized for touch interactions
  • Flexible Layout: Adapts to available space
Example Configurations
Simple Progress Timeline
{
  "steps": [
    {
      "label": "Started",
      "status": "completed"
    },
    {
      "label": "In Progress",
      "status": "active"
    },
    {
      "label": "Complete",
      "status": "pending"
    }
  ]
}
Detailed Process Timeline
{
  "steps": [
    {
      "label": "Account Created",
      "status": "completed",
      "description": "Your account has been successfully created",
      "timestamp": "2024-01-15 10:30 AM"
    },
    {
      "label": "Email Verification",
      "status": "active",
      "description": "Please check your email and click the verification link",
      "icon": "📧"
    },
    {
      "label": "Profile Setup",
      "status": "pending",
      "description": "Complete your profile information"
    },
    {
      "label": "Ready to Use",
      "status": "pending",
      "description": "Your account will be fully activated"
    }
  ]
}
Error State Timeline
{
  "steps": [
    {
      "label": "Step 1",
      "status": "completed",
      "description": "Completed successfully"
    },
    {
      "label": "Step 2",
      "status": "error",
      "description": "Failed to complete - please retry"
    },
    {
      "label": "Step 3",
      "status": "pending",
      "description": "Waiting for Step 2 to complete"
    }
  ]
}
Styling & Customization
CSS Custom Properties
.alviere-timeline {
  --timeline-primary-color: var(--primary-color, #007bff);
  --timeline-success-color: var(--success-color, #28a745);
  --timeline-error-color: var(--error-color, #dc3545);
  --timeline-warning-color: var(--warning-color, #ffc107);
  --timeline-pending-color: var(--gray-400, #ced4da);
  
  --timeline-step-size: 2rem;
  --timeline-connector-width: 2px;
  --timeline-step-spacing: 1.5rem;
  --timeline-border-radius: 50%;
}
Component-Specific Styling
/* Custom timeline appearance */
.alviere-timeline--custom {
  --timeline-primary-color: #6f42c1;
  --timeline-step-size: 3rem;
  --timeline-connector-width: 3px;
}

/* Horizontal timeline adjustments */
.alviere-timeline--horizontal {
  --timeline-step-spacing: 2rem;
}

/* Vertical timeline adjustments */
.alviere-timeline--vertical {
  --timeline-step-spacing: 1rem;
}
Step Status Styling
/* Completed step styling */
.alviere-timeline__step--completed {
  background-color: var(--timeline-success-color);
  border-color: var(--timeline-success-color);
}

/* Active step styling */
.alviere-timeline__step--active {
  background-color: var(--timeline-primary-color);
  border-color: var(--timeline-primary-color);
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

/* Error step styling */
.alviere-timeline__step--error {
  background-color: var(--timeline-error-color);
  border-color: var(--timeline-error-color);
}

/* Pending step styling */
.alviere-timeline__step--pending {
  background-color: var(--timeline-pending-color);
  border-color: var(--timeline-pending-color);
}
Advanced Usage
Dynamic Timeline Updates
const timeline = document.querySelector('alviere-timeline');

// Update timeline dynamically
function updateTimeline(stepIndex, newStatus) {
  const currentSteps = JSON.parse(timeline.getAttribute('data-steps'));
  currentSteps[stepIndex].status = newStatus;
  
  timeline.setAttribute('data-steps', JSON.stringify(currentSteps));
}

// Example: Mark step as completed
updateTimeline(1, 'completed');
Interactive Timeline
// Make timeline interactive
timeline.setAttribute('data-clickable', 'true');

timeline.addEventListener('stepclick', (event) => {
  const { stepIndex, step } = event.detail;
  
  // Handle step click
  if (step.status === 'pending') {
    // Navigate to step or show details
    showStepDetails(step);
  }
});
Custom Step Icons
const customSteps = [
  {
    label: 'Account Setup',
    status: 'completed',
    icon: '👤',
    description: 'Basic account information'
  },
  {
    label: 'Verification',
    status: 'active',
    icon: '✅',
    description: 'Identity verification process'
  },
  {
    label: 'Activation',
    status: 'pending',
    icon: '🚀',
    description: 'Account activation'
  }
];

timeline.setAttribute('data-steps', JSON.stringify(customSteps));
Best Practices
Timeline Design
  • Clear Labels: Use descriptive, concise labels for each step
  • Logical Order: Arrange steps in a logical, sequential order
  • Consistent Status: Use consistent status values across the timeline
  • Visual Hierarchy: Ensure the current step is clearly highlighted
Accessibility
  • Screen Reader Support: Provide meaningful descriptions for each step
  • Keyboard Navigation: Ensure timeline is navigable via keyboard
  • Color Contrast: Maintain sufficient contrast for status indicators
  • Focus Management: Clear focus indicators for interactive elements
Performance
  • Efficient Updates: Update only changed steps when possible
  • Smooth Animations: Use CSS transitions for smooth status changes
  • Responsive Design: Ensure timeline works well on all screen sizes
  • Memory Management: Clean up event listeners when component is destroyed