@uptime.link/catalog

the statuspage of uptime.link

readme.md for @uptime.link/catalog
changelog.md for @uptime.link/catalog

readme.md for @uptime.link/catalog

@uptime.link/statuspage

🚀 A powerful collection of web components for building stunning status pages — because your users deserve to know what's happening, and you deserve to look good while telling them.

Built with Lit and TypeScript, these components are designed to be composable, customizable, and production-ready out of the box.

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

✨ Features

🎨 Themeable — Automatic light/dark mode support with CSS custom properties
📱 Responsive — Looks great on everything from mobile to ultrawide
🔌 Composable — Use components individually or build complete status pages
🎯 Type-Safe — Full TypeScript support with exported interfaces
⚡ Performant — Lit-based components with minimal overhead
🎭 Pre-built Pages — Demo, all-green, outage, and maintenance page templates included

📦 Installation

npm install @uptime.link/statuspage

Or with pnpm:

pnpm add @uptime.link/statuspage

🚀 Quick Start

Import the components and start building:

import '@uptime.link/statuspage';

Then use them in your HTML:

<upl-statuspage-header></upl-statuspage-header>
<upl-statuspage-statusbar></upl-statuspage-statusbar>
<upl-statuspage-incidents></upl-statuspage-incidents>
<upl-statuspage-footer></upl-statuspage-footer>

🧩 Components

`<upl-statuspage-header>`

Property	Type	Default	Description
`pageTitle`	`string`	`'Status'`	Title displayed in the header
`logoUrl`	`string`	`''`	URL to your logo image
`showReportButton`	`boolean`	`false`	Show "Report Incident" button
`showSubscribeButton`	`boolean`	`false`	Show "Subscribe" button

Events:

reportNewIncident — Fired when report button is clicked
statusSubscribe — Fired when subscribe button is clicked

`<upl-statuspage-pagetitle>`

A hero section with title and subtitle.

Property	Type	Default	Description
`pageTitle`	`string`	`'System Status'`	Main heading
`pageSubtitle`	`string`	`''`	Optional description text
`centered`	`boolean`	`false`	Center-align the content

`<upl-statuspage-statusbar>`

The overall status indicator — the heart of any status page.

Property	Type	Default	Description
`overallStatus`	`IOverallStatus`	—	Current system status object
`loading`	`boolean`	`false`	Show loading skeleton

The status object supports: operational, degraded, partial_outage, major_outage, maintenance

`<upl-statuspage-statsgrid>`

Key metrics at a glance — uptime, response time, incidents.

Property	Type	Default	Description
`currentStatus`	`string`	`'operational'`	Current status indicator
`uptime`	`number`	`100`	Uptime percentage
`avgResponseTime`	`number`	`0`	Average response time (ms)
`totalIncidents`	`number`	`0`	Incident count
`affectedServices`	`number`	`0`	Currently affected services
`totalServices`	`number`	`0`	Total monitored services
`timePeriod`	`string`	`'30 days'`	Time range label
`loading`	`boolean`	`false`	Show loading skeleton

`<upl-statuspage-assetsselector>`

Interactive service selector with filtering and search.

Property	Type	Default	Description
`services`	`IServiceStatus[]`	`[]`	Array of service objects
`filterText`	`string`	`''`	Search filter text
`filterCategory`	`string`	`'all'`	Category filter
`showOnlySelected`	`boolean`	`false`	Show only selected services
`loading`	`boolean`	`false`	Show loading state
`expanded`	`boolean`	`false`	Expand the selector panel

Events:

selectionChanged — Fired with { selectedServices: string[] } when selection changes

`<upl-statuspage-statusdetails>`

Hourly status timeline visualization.

Property	Type	Default	Description
`dataPoints`	`IStatusHistoryPoint[]`	`[]`	Hourly status data
`historyData`	`IStatusHistoryPoint[]`	`[]`	Alternative data property
`serviceId`	`string`	`''`	Service identifier
`serviceName`	`string`	`'Service'`	Display name
`hoursToShow`	`number`	`48`	Number of hours to display
`loading`	`boolean`	`false`	Show loading skeleton

Events:

barClick — Fired with { timestamp, status, responseTime, serviceId } on bar click

`<upl-statuspage-statusmonth>`

Calendar-style monthly uptime visualization.

Property	Type	Default	Description
`monthlyData`	`IMonthlyUptime[]`	`[]`	Monthly uptime data
`serviceId`	`string`	`'all'`	Service identifier
`serviceName`	`string`	`'All Services'`	Display name
`loading`	`boolean`	`false`	Show loading skeleton

Events:

dayClick — Fired with day details when a day cell is clicked

`<upl-statuspage-incidents>`

Incident feed with expandable details and status updates.

Property	Type	Default	Description
`currentIncidents`	`IIncidentDetails[]`	`[]`	Active incidents
`pastIncidents`	`IIncidentDetails[]`	`[]`	Resolved incidents
`maxPastIncidents`	`number`	`10`	Max past incidents to show
`loading`	`boolean`	`false`	Show loading skeleton
`enableSubscription`	`boolean`	`false`	Allow incident subscriptions
`subscribedIncidentIds`	`string[]`	`[]`	Pre-subscribed incident IDs

Events:

subscribeToIncident — Fired with incident ID on subscription toggle

`<upl-statuspage-footer>`

Property	Type	Default	Description
`companyName`	`string`	`''`	Company name
`legalUrl`	`string`	`''`	Terms/legal page URL
`supportEmail`	`string`	`''`	Support email address
`statusPageUrl`	`string`	`''`	Status page URL
`lastUpdated`	`number`	—	Last update timestamp
`currentYear`	`number`	`2024`	Copyright year
`socialLinks`	`ISocialLink[]`	`[]`	Social media links
`rssFeedUrl`	`string`	`''`	RSS feed URL
`apiStatusUrl`	`string`	`''`	Status API URL
`enableSubscribe`	`boolean`	`false`	Show subscribe button
`subscriberCount`	`number`	`0`	Display subscriber count
`additionalLinks`	`IFooterLink[]`	`[]`	Extra footer links

Events:

subscribeClick — Fired when subscribe button is clicked

📐 Interfaces

All TypeScript interfaces are exported for type safety:

import type {
  IServiceStatus,
  IStatusHistoryPoint,
  IIncidentDetails,
  IIncidentUpdate,
  IMonthlyUptime,
  IUptimeDay,
  IOverallStatus,
  IStatusPageConfig,
  ISubscription
} from '@uptime.link/statuspage';

Key Interfaces

interface IServiceStatus {
  id: string;
  name: string;
  displayName: string;
  description?: string;
  currentStatus: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'maintenance';
  lastChecked: number;
  uptime30d: number;
  uptime90d: number;
  responseTime: number;
  category?: string;
  selected?: boolean;
}

interface IIncidentDetails {
  id: string;
  title: string;
  status: 'investigating' | 'identified' | 'monitoring' | 'resolved' | 'postmortem';
  severity: 'critical' | 'major' | 'minor' | 'maintenance';
  affectedServices: string[];
  startTime: number;
  endTime?: number;
  updates: IIncidentUpdate[];
  impact: string;
  rootCause?: string;
  resolution?: string;
}

interface IOverallStatus {
  status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'maintenance';
  message: string;
  lastUpdated: number;
  affectedServices: number;
  totalServices: number;
}

🎬 Complete Example

Build a full status page in minutes:

import '@uptime.link/statuspage';
import type { IServiceStatus, IOverallStatus, IIncidentDetails } from '@uptime.link/statuspage';

// Get your components
const header = document.querySelector('upl-statuspage-header');
const statusBar = document.querySelector('upl-statuspage-statusbar');
const statsGrid = document.querySelector('upl-statuspage-statsgrid');
const incidents = document.querySelector('upl-statuspage-incidents');
const footer = document.querySelector('upl-statuspage-footer');

// Configure the header
header.pageTitle = 'Acme Cloud';
header.logoUrl = '/logo.svg';
header.showSubscribeButton = true;

// Set overall status
statusBar.overallStatus = {
  status: 'operational',
  message: 'All systems operational',
  lastUpdated: Date.now(),
  affectedServices: 0,
  totalServices: 12
};

// Configure stats
statsGrid.uptime = 99.98;
statsGrid.avgResponseTime = 45;
statsGrid.totalServices = 12;

// Add incidents
incidents.currentIncidents = []; // No current incidents
incidents.pastIncidents = [
  {
    id: 'inc-001',
    title: 'Scheduled Maintenance Complete',
    status: 'resolved',
    severity: 'maintenance',
    impact: 'Database maintenance window',
    affectedServices: ['Database'],
    startTime: Date.now() - 86400000,
    endTime: Date.now() - 82800000,
    updates: [
      {
        id: 'upd-1',
        timestamp: Date.now() - 82800000,
        status: 'resolved',
        message: 'Maintenance completed successfully'
      }
    ]
  }
];

// Configure footer
footer.companyName = 'Acme Cloud';
footer.supportEmail = 'support@acme.cloud';
footer.enableSubscribe = true;

📄 Pre-built Page Templates

The package includes ready-to-use page templates:

import {
  statuspageDemo,      // Full demo with sample data
  statuspageAllgreen,  // All systems operational
  statuspageOutage,    // Major outage scenario
  statuspageMaintenance // Scheduled maintenance
} from '@uptime.link/statuspage/pages';

🎨 Theming

Components automatically adapt to light/dark mode using cssManager.bdTheme(). The design follows a modern, minimal aesthetic with:

Clean typography with -apple-system, BlinkMacSystemFont, 'Segoe UI' font stack
Subtle shadows and borders
Semantic status colors (green, yellow, orange, red, blue)
Smooth transitions and hover states

License and Legal Information

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the license.md file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

changelog.md for @uptime.link/catalog

2025-12-29 - 1.5.1 - fix(statuspage)

no changes (empty commit)

No files were modified in this commit.
Current package version remains 1.5.0 as defined in package.json.

2025-12-28 - 1.5.0 - feat(html)

configure deesWccTools with sections metadata for Elements and Pages

Replaced positional setupWccTools call with a config object containing sections
Adds two sections: 'Elements' (type: elements, icon: widgets) and 'Pages' (type: pages, icon: web) mapping items to imported modules
No behavioral change to subsequent deesDomTools.elementBasic.setup() call

2025-12-28 - 1.4.2 - fix(deps)

add MIT license, update package metadata and bump dependencies; simplify docs

Added license.md containing the MIT license and set package.json license to MIT
Updated package.json author to Task Venture Capital GmbH
Bumped @design.estate/dees-wcctools from ^3.2.0 to ^3.3.0 and @uptime.link/interfaces from ^2.0.21 to ^2.1.0
Updated readme.md to reference license.md instead of LICENSE
Rewrote and condensed readme.hints.md (cleaned up project overview, components list, build output and commands; removed legacy/verbose content)

2025-12-24 - 1.4.1 - fix(statuspage)

no changes detected; no version bump

No files changed in the provided git diff
package.json version is 1.4.0 — no version bump recommended

2025-12-24 - 1.4.0 - feat(statuspage-incidents)

Add status icons/labels and revamp incident header layout; replace left border with internal severity bar and clean up formatting

Introduce TIncidentStatus and mappings for statusIcons and statusLabels for consistent iconography and human-readable labels
Update incident header layout to match admin catalog (adjust padding, alignment, spacing)
Replace border-left severity indicator with an internal .incident-severity element and apply severity-specific styles
Minor code/style cleanups: whitespace fixes in formatDate/formatDuration and normalized event detail object formatting

2025-12-23 - 1.3.1 - fix(statuspage)

update timeline connector and dot positioning in statuspage incidents component

Remove global .timeline::before vertical connector and replace with per-item .update-item:not(:last-child)::after to draw connectors between dots
Use sharedStyles.colors.border.default for the connector background instead of a theme gradient
Adjust connector and dot offsets for desktop and mobile to align with dot size and border, improving visual alignment
Add clarifying comments about dot dimensions and center calculations

2025-12-23 - 1.3.0 - feat(statuspage)

use dynamic status-based accent colors and computed card statuses; update stat card markup and incident/response displays

Replace hardcoded stat-card type selectors with status-based classes (.operational, .degraded, .partial_outage, .major_outage, .maintenance) so accent colors are applied centrally.
Introduce getUptimeCardStatus, getResponseCardStatus, and getIncidentCardStatus helper methods to compute and apply per-card status classes based on uptime, response time, and affected services.
Update stat card markup to use computed status classes instead of dedicated uptime/response/incident class names.
Change incident summary text to show 'All services ok.' when no services are affected, otherwise display 'X of Y services affected'.
Minor layout tweak: adjust timeline connector left offset from 5px to 7px for improved alignment.

2025-12-23 - 1.2.0 - feat(statuspage-ui)

improve styling and animations across status page components

Preload Geist Sans variable font in html/index.html to improve font rendering.
Replace many cssManager.bdTheme usages with sharedStyles color tokens, durations and easings for consistent theming.
Introduce animations, transitions and motion utilities (fadeIn, fadeInUp, card/pill fades, shimmer, pulse) for cards, pills, bars, tooltips and skeletons to enhance perceived performance.
Enhance interactive states: hover/active/focus for buttons, social links, action buttons, and asset/incident cards; add subtle transforms, shadows and icon animations.
Add status-specific visuals: status gradients, status glows, pulsing/animated status indicators and left accent bars for statusbar and stat cards.
Improve incidents and timeline UI: staggered entrance animations, active-incident pulse, update timeline with icons and delays; tooltip and tooltip content improvements; responsive tweaks across header, footer, stats and month views.

2025-12-23 - 1.1.0 - feat(statuspage)

refactor shared styles and modernize components for consistent theming, spacing and APIs

Centralized styles: switch to a single sharedStyles module and extend design tokens (colors, spacing, shadows, borderRadius, easings, durations, accent colors).
Component modernization: replace many destructured style imports with sharedStyles and convert numerous @property fields to 'accessor' for updated component APIs.
Visual/layout updates: adjust typography, spacing scale, responsive rules and polish header/statusbar/footer/stats/incident components (improved gaps, paddings, status pills, loading skeletons, and button styles).
Dependency bumps: updated @design.estate and @git.zone packages as well as @push.rocks dev deps and @types/node.
Build/config changes: tsconfig.json flags removed (experimentalDecorators, useDefineForClassFields) and npmextra.json updated with registry/release config and new package keys.
Docs and demos: expanded README content and added demo/test files (test/test.ts, test-shadcn-spacing.html) to showcase spacing and layout changes.

2024-06-27 - 1.0.74 - fix(core)

Updated font loading strategy in index.html for improved performance

Replaced multiple font loading links with a single assetbroker link.
Removed redundant preconnect and stylesheet links for fonts.

2024-06-26 - 1.0.73 - fix(documentation)

Update project description and keywords in package.json and npmextra.json. Refactored documentation in readme.md.

Updated project description and keywords within package.json and npmextra.json to ensure alignment.
Enhanced readme.md with detailed setup, installation and usage instructions including examples for importing and using components.

2024-06-26 - 1.0.72 - fix(core)

Fixed incorrect import paths and updated configurations for package publication.

Fixed import paths for various dependencies in TypeScript files.
Updated npm package name and scope in package.json.
Deleted .gitlab-ci.yml file.
Adjusted tsconfig.json for ESModule compatibility.
Adjusted npmextra.json for correct repository and license information.
Updated documentation links in readme.md.

2023-01-05 - 1.0.69 to 1.0.71 - core

Multiple updates.

fix(core): update

2022-03-24 - 1.0.67 to 1.0.69 - core

Multiple updates.

fix(core): update

2021-09-27 - 1.0.60 to 1.0.66 - core

Multiple updates.

fix(core): update

2021-09-24 - 1.0.59 to 1.0.60 - core

Fixes and updates.

fix(core): update

2021-09-23 - 1.0.58 to 1.0.59 - core

Fixes and updates.

fix(core): update

2020-11-29 - 1.0.57 to 1.0.58 - core

Fixes and updates.

fix(core): update

2020-09-19 - 1.0.55 to 1.0.57 - core

Fixes and updates.

fix(core): update

@uptime.link/catalog

readme.md for @uptime.link/catalog

@uptime.link/statuspage

Issue Reporting and Security

✨ Features

📦 Installation

🚀 Quick Start

🧩 Components

<upl-statuspage-header>

<upl-statuspage-pagetitle>

<upl-statuspage-statusbar>

<upl-statuspage-statsgrid>

<upl-statuspage-assetsselector>

<upl-statuspage-statusdetails>

<upl-statuspage-statusmonth>

<upl-statuspage-incidents>

<upl-statuspage-footer>

📐 Interfaces

Key Interfaces

🎬 Complete Example

📄 Pre-built Page Templates

🎨 Theming

License and Legal Information

Trademarks

Company Information

changelog.md for @uptime.link/catalog

2025-12-29 - 1.5.1 - fix(statuspage)

2025-12-28 - 1.5.0 - feat(html)

2025-12-28 - 1.4.2 - fix(deps)

2025-12-24 - 1.4.1 - fix(statuspage)

2025-12-24 - 1.4.0 - feat(statuspage-incidents)

2025-12-23 - 1.3.1 - fix(statuspage)

2025-12-23 - 1.3.0 - feat(statuspage)

2025-12-23 - 1.2.0 - feat(statuspage-ui)

2025-12-23 - 1.1.0 - feat(statuspage)

2024-06-27 - 1.0.74 - fix(core)

2024-06-26 - 1.0.73 - fix(documentation)

2024-06-26 - 1.0.72 - fix(core)

2023-01-05 - 1.0.69 to 1.0.71 - core

2022-03-24 - 1.0.67 to 1.0.69 - core

2021-09-27 - 1.0.60 to 1.0.66 - core

2021-09-24 - 1.0.59 to 1.0.60 - core

2021-09-23 - 1.0.58 to 1.0.59 - core

2020-11-29 - 1.0.57 to 1.0.58 - core

2020-09-19 - 1.0.55 to 1.0.57 - core

`<upl-statuspage-header>`

`<upl-statuspage-pagetitle>`

`<upl-statuspage-statusbar>`

`<upl-statuspage-statsgrid>`

`<upl-statuspage-assetsselector>`

`<upl-statuspage-statusdetails>`

`<upl-statuspage-statusmonth>`

`<upl-statuspage-incidents>`

`<upl-statuspage-footer>`