noora/docs/web-components.md
Install the public package from the npm package registry:
npm install @tuist/noora
Import the design tokens and the component registration bundle once in the browser entry point:
import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";
Use attributes for primitive values and declarative child elements for structured content:
<noora-dropdown label="Options">
<noora-dropdown-item value="edit" icon="edit">Edit</noora-dropdown-item>
<noora-dropdown-item value="delete" icon="trash">Delete</noora-dropdown-item>
</noora-dropdown>
Collection properties remain available when items are created programmatically. Declarative children take precedence when both forms are present.
Respond to standard browser events and Noora custom events with addEventListener. Custom events bubble, cross shadow-root boundaries, and expose structured values through event.detail:
const select = document.querySelector("noora-select");
select.addEventListener("change", () => {
console.log(select.value);
});
select.addEventListener("noora-select", (event) => {
console.log(event.detail.value);
});
The registration bundle defines every published Noora custom element. The package also includes custom-elements.json for tools that support the Custom Elements Manifest format and TypeScript declarations for the public element properties.
Component contracts are consumed during the build. Applications do not fetch the contract files at runtime.