Setup

Recommended Installation and Implementation

Install

$ npm i @aurodesignsystem/auro-formkit

Implementation

Custom Component Registration for Version Management There are two key parts to every Auro component: the class and the custom element definition. The class defines the component's behavior, while the custom element registers it under a specific name so it can be used in HTML. You can do this by importing only the component class and using the `register(name)` method with a unique name:

// Import the class only
import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';

// Register with a custom name if desired
AuroCounter.register('custom-counter');
AuroCounterGroup.register('custom-counter-group');

This will create a new custom element <custom-counter> and <custom-counter-group> that behaves exactly like <auro-counter> and <auro-counter-group>, allowing both to coexist on the same page without interfering with each other.

<custom-counter-group>
  <div slot="bib.fullscreen.headline">Passengers</div>
  <div slot="label">Passengers</div>
  <custom-counter>
    Adults
    <span slot="description">18 years or older</span>
  </custom-counter>
  <custom-counter>
    Children
    <span slot="description">2-17 years</span>
  </custom-counter>
</custom-counter-group>

Auto Installation and Implementation

Warning: Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.

Install

$ npm i @aurodesignsystem/auro-formkit

Implementation

Import the component and its dependencies, then register the custom elements:

import '@aurodesignsystem/auro-formkit/auro-counter';

Then use the elements in your HTML:

<auro-counter-group>
  <auro-counter>Adults</auro-counter>
  <auro-counter>Children</auro-counter>
</auro-counter-group>

CDN Installation

Warning: CDN registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.

The counter components can be loaded via CDN without a build step:

<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-counter/+esm" type="module"></script>

Then use the elements in your HTML:

<auro-counter-group>
  <auro-counter>Adults</auro-counter>
  <auro-counter>Children</auro-counter>
</auro-counter-group>

Frameworks

React

React 19 includes native support for custom elements, so <auro-counter> works directly in JSX without any wrapper library. Import the Component Import and register the components at the top level of your application (e.g. in your root `main.tsx` or `App.tsx`):

import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';

AuroCounter.register('[custom]-counter');
AuroCounterGroup.register('[custom]-counter-group');

TypeScript Declarations The component ships with TypeScript type definitions for the `AuroCounter` class. However, React's JSX does not automatically map custom element tag names to their types. To get type checking for `` in JSX, add the following declaration to a `.d.ts` file in your project:

import type { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      '[custom]-counter': React.HTMLAttributes<AuroCounter> & Partial<AuroCounter>;
      '[custom]-counter-group': React.HTMLAttributes<AuroCounterGroup> & Partial<AuroCounterGroup>;
    }
  }
}

Event Handling Auro components emit native `CustomEvent`s. Use a `ref` to attach event listeners in a `useEffect`:

import { useRef, useEffect } from 'react';

function MyCounterGroup() {
  const groupRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const el = groupRef.current;
    if (!el) return;

    const handleInput = () => {
      console.log('Counter value:', (el as any).value);
    };

    el.addEventListener('countChanged', handleInput);
    return () => el.removeEventListener('countChanged', handleInput);
  }, []);

  return (
    <custom-counter-group>
      <span slot="label">Passengers</span>
      <custom-counter ref={groupRef}>Adults</custom-counter>
      <custom-counter>Children</custom-counter>
    </custom-counter-group>
  );
}

Module Resolution Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

Svelte

Svelte has native support for custom elements, so <auro-counter> works directly in Svelte templates without any wrapper or configuration. Import the Component Import and register the components in the `