The Design System is built on Web Components. Most component functionality lives in the core Web Components layer. Angular and React wrappers sit on top of that layer to make the components easier to use in those frameworks.

We use Svelte to author the components that are compiled to custom elements. You can use the Design System through the core Web Components or through Angular and React wrappers.

Web Components are a set of standard web technologies that allow you to create reusable custom elements. Each component includes its own structure, styling, and behaviour. This keeps it independent from the rest of your code.

In the Design System, Web Components are the core library. They are framework-agnostic, so teams can use them in different front-end environments.

• Reuse: Build once and use across pages, applications, and frameworks
• Browser support: Work in modern browsers without additional libraries
• Maintenance: Modular and self-contained structure simplifies updates
• Encapsulation: Structure, style, and behaviour remain isolated from other page elements
• Reliability: Code is not spread across HTML and JS files, thereby avoiding inconsistencies
• Flexibility: Use inline, import, or compile components as needed
• Composability: Combine components or integrate them with other components

Svelte is the framework used to generate the Design System Web Components. Svelte combines JavaScript (logic), HTML (structure), and CSS (style) within a single file. It compiles these into efficient, reusable components.

We use Svelte to:

• Build reusable Web Components
• Keep component logic, structure, and styling together
• Support integration with multiple front-end frameworks

Angular is a TypeScript-based framework for building web applications. The Design System supports Angular through Angular wrappers around the core Web Components.

Angular wrappers are created around the Web Components. These wrappers:

• Manage component properties and events
• Support form binding (Reactive and Template-driven)
• Allow integration within Angular applications

The Angular application interacts with the wrapper, which renders the underlying Web Component.

React is an open-source JavaScript library used to build user interfaces from reusable components.

React wrappers are created around the Web Components. These wrappers:

• Manage properties and events
• Enable integration within React applications

The React application interacts with the wrapper, which renders the underlying Web Component.