@paradox-design/core

The base class and shared mechanisms of Paradox Design System components.

You will rarely install this package on its own — it arrives as a dependency of @paradox-design/components. Reach for it directly only when you build your own component that follows the system's conventions.

Installation

npm install @paradox-design/core

lit is a peer dependency: npm 7+ and pnpm install it automatically, and the application ends up with a single copy of Lit. If your project already uses Lit, it must be version 3.

Contents

PdxElement

A base class extending LitElement. It adds three things:

• a reset inside the shadow root — global application styles do not cross the shadow boundary, so every component has to take care of box-sizing and default margins itself;
• emit() — a shortcut for dispatching events with composed: true enforced;
• direction — the resolved text direction (ltr / rtl).

import { PdxElement } from '@paradox-design/core';

export class MyComponent extends PdxElement {
  private confirm(): void {
    this.emit('change', { detail: { value: 42 } });
  }
}

Why composed: true is enforced An event without this flag stops at the Shadow DOM boundary. The component looks fine, yet the listener in the application never gets notified. Angular, React and a plain addEventListener on the host all stay equally silent — the symptom is "the click does nothing", without a single error in the console.

Event names get the pdx- prefix, so emit('change') dispatches pdx-change. This prevents collisions with the native change event that bubbles up from form fields inside the component.

defineElement(name, constructor)

Registers a custom element and skips repeated calls instead of throwing.

import { defineElement } from '@paradox-design/core';

defineElement('pdx-my-component', MyComponent);

Why not customElements.define() directly Registering the same name twice throws NotSupportedError, which aborts the whole module. It happens in practice: two versions of the package in the dependency tree, hot module replacement during development, a micro-frontend loaded twice. defineElement does nothing in that case and lets the application keep running.

resetStyles

A reset stylesheet meant for static styles. PdxElement includes it automatically.

License

MIT © Paradox Software