LMVZ Component Library

Web components for the LMVZ Design System.

About

This package uses Stencil to create web components for browser-native usage and to generate integration artifacts consumed by sibling framework packages.

Please also read the Integration chapter of the Design Guide.

Installation

npm i @lmvz-ds/components

[!TIP] If you are building an Angular application, prefer the @lmvz-ds/angular wrapper package.

[!TIP] Our @lmvz-ds/aria-validation sibling is only used for YOUR development mode, and thus, optional.

Usage

Import individual components when you only need a subset:

import '@lmvz-ds/components/lmvz-button';
import '@lmvz-ds/components/lmvz-icon';

Register all components globally via the loader when that is a better fit for your app shell:

import { defineCustomElements } from '@lmvz-ds/components/loader';

defineCustomElements(window);

If your app has no own build/bundling process, directly import from the CDN (unpkg.com) using <script type="module" href="[cdnurl]">.

The package also exposes a /hydrate entry for server-side rendering workflows.

Icons

The <lmvz-icon> component requires an icon provider to be registered before use. See @lmvz-ds/icons for setup instructions and available provider modes.

Example

Import and register the component module before using its custom element:

import { defineCustomElement as defineButtonElement } '@lmvz-ds/components/lmvz-button';

defineButtonElement();

function App() {
  return (
    <>
      <div>
        <lmvz-button variant="primary"></lmvz-button>
      </div>
    </>
  );
}

export default App;

LMVZ component styles do not style native HTML elements outside the components. Import a theme, and any additional global style bundles you need, from @lmvz-ds/styles separately.

Advanced Usage

Reactive Controllers

LMVZ components use a lightweight reactive controller pattern for composing accessibility and interaction features. For detailed documentation on:

• Using reactive controllers in custom components
• How built-in controllers (element activation, directional focus, ARIA validation, radio grouping) work
• Building your own controllers

See Reactive Controllers.

window.LmvzApi

Some components provide imperative APIs (like SnackbarController) that are registered on the global window.LmvzApi namespace. This enables usage in non-module contexts (plain <script> tags, CMS snippets, etc.) without a bundler.

For bundled applications (Angular, React, Webpack, Vite, etc.), prefer named imports:

import { SnackbarController } from '@lmvz-ds/components';

For detailed reference, usage examples, and load-order guidance, see window.LmvzApi Documentation.

Contributing

Contributor onboarding for local development, builds, testing, and authoring guidelines is in DEVELOPMENT.md.