TEMS UI Components

Lit-based web component design system for the TEMS (Trusted European Media data Space) ecosystem. Provides a complete set of accessible, responsive UI components with built-in internationalization support.

Table of Contents

1. Key Features
2. Components
3. Installation
4. Quick Start
5. Development
6. Documentation
7. License

Key Features

Design System

• Complete Component Library: Forms, layout, navigation, and display components
• Consistent Styling: SCSS-based theming with CSS variables for customization
• Icon Support: Integration with Iconify for 20+ icon sets (Fluent, Tabler, Heroicons, etc.)
• Typography: Multiple font families (Inter, Montserrat, Open Sans) via @fontsource

Internationalization

• Built-in i18n: Powered by @lit/localize for runtime locale switching
• XLIFF Format: Standard localization workflow with extract/build tools
• Reactive Updates: Components automatically update when locale changes

Components

Form Components

| Component | Description | Attributes | | ----------- | ------------- | ------------ | | tems-input | Text input field with validation | placeholder, required, type | | tems-textarea | Multi-line text input | rows, placeholder | | tems-checkbox | Checkbox control | checked, label | | tems-toggle | Toggle switch control | checked, label | | tems-datepicker | Date selection picker | value, min, max | | tems-dropdown | Dropdown menu | items, selected | | tems-slider | Range slider control | min, max, step, value | | tems-label | Form label with accessibility | for, required |

Layout Components

| Component | Description | Usage | | ----------- | ------------- | ------- | | tems-header | Application header | Top navigation bar | | tems-sidebar | Collapsible sidebar | Side navigation menu | | tems-viewport | Main content area | Application container | | tems-division | Section divider | Visual separator |

Navigation Components

| Component | Description | | ----------- | ------------- | | tems-breadcrumb | Breadcrumb navigation | | tems-breadcrumb-item | Individual breadcrumb link | | tems-tab-item | Tab navigation item | | tems-sidebar-item | Sidebar navigation item | | tems-sidebar-section | Sidebar section grouping |

Display Components

| Component | Description | | ----------- | ------------- | | tems-badge | Status or count badge | | tems-tag | Categorization tag | | tems-avatar | User avatar with initials/image | | tems-profile-card | User profile display card | | tems-button | Action button with variants |

Search & Filter Components

| Component | Description | | ----------- | ------------- | | tems-search-bar | Search input with active filters | | tems-filter-sidebar | Collapsible filter panel | | tems-filter-item | Individual filter control | | tems-vertical-accordion | Collapsible accordion sections | | tems-active-tags | Display active filter tags |

Installation

npm install @startinblox/solid-tems-ui

Quick Start

Import Components

<script type="module">
  import '@startinblox/solid-tems-ui';
</script>

Using Form Components

<form>
  <tems-label for="name" required>Name</tems-label>
  <tems-input id="name" placeholder="Enter your name" required></tems-input>

  <tems-label for="email">Email</tems-label>
  <tems-input id="email" type="email" placeholder="Enter your email"></tems-input>

  <tems-checkbox label="I agree to the terms"></tems-checkbox>

  <tems-button type="submit">Submit</tems-button>
</form>

Using Layout Components

<tems-header></tems-header>

<div style="display: flex;">
  <tems-sidebar>
    <tems-sidebar-section>
      <tems-sidebar-item>Dashboard</tems-sidebar-item>
      <tems-sidebar-item>Settings</tems-sidebar-item>
    </tems-sidebar-section>
  </tems-sidebar>

  <tems-viewport>
    <tems-breadcrumb>
      <tems-breadcrumb-item href="/">Home</tems-breadcrumb-item>
      <tems-breadcrumb-item href="/catalog">Catalog</tems-breadcrumb-item>
    </tems-breadcrumb>

    <!-- Main content -->
  </tems-viewport>
</div>

Using Dropdown

<tems-dropdown label="Select option">
  <tems-dropdown-item value="option1">Option 1</tems-dropdown-item>
  <tems-dropdown-item value="option2">Option 2</tems-dropdown-item>
  <tems-dropdown-item value="option3">Option 3</tems-dropdown-item>
</tems-dropdown>

Using Search Bar with Filters

<tems-search-bar></tems-search-bar>

<tems-filter-sidebar>
  <tems-vertical-accordion>
    <tems-filter-item label="Category">
      <tems-checkbox label="Category 1"></tems-checkbox>
      <tems-checkbox label="Category 2"></tems-checkbox>
    </tems-filter-item>

    <tems-filter-item label="Date Range">
      <tems-datepicker></tems-datepicker>
    </tems-filter-item>
  </tems-vertical-accordion>
</tems-filter-sidebar>

Development

Watch Mode (Hot Reload)

npm run watch

Run Tests (Cypress)

npm run cy:run          # Headless
npm run cy:open         # Interactive UI

Storybook

npm run storybook       # Start dev server (port 6006)
npm run build-storybook # Build static Storybook

Build for Production

npm run build           # Includes lit-localize build

Linting & Formatting

npx biome check .                    # Check for issues
npx biome check . --write            # Auto-fix and format

Localization

Extract translatable strings:

npm run locale:extract

Build localization:

npm run locale:build

Change locale at runtime:

window.setLocale("fr");  // Switch to French
window.getLocale();      // Get current locale

Documentation

For Developers

• AGENTS.md: Development guidelines and coding standards
• Stories/: Storybook stories for each component

Component Conventions

Naming:

• Web component elements: kebab-case (e.g., tems-button)
• Class names: PascalCase (e.g., TemsButton)
• Properties: kebab-case in HTML, camelCase in JS

Lit Decorators:

• @customElement("element-name") - Define web component
• @property({ attribute: "data-src", reflect: true }) - Public attributes
• @state() - Private reactive state
• @localized() - For i18n components

Styling: Import SCSS inline: import ComponentStyle from "@styles/component.scss?inline";

Import Paths

Use configured aliases:

import { TemsButton } from '@components/buttons/tems-button';
import { TemsInput } from '@components/forms/tems-input';

License

MIT

TEMS Project - Co-funded by the European Union