StellarUI

StellarUI

Browse the shipped Rocket components, generated API surfaces, and current Datastar-aligned docs examples.

Rocket reference Datastar repo

Overview

Shipped Rocket components generated from the current StellarUI webcomponents build.

The docs sidebar and component pager are generated from the current Rocket manifest, so navigation follows what is actually shipped.

Components

87 shipped

87 documented pages

Rules

These are the active docs and component constraints used across the current shipped surface.

  • Use the generated Rocket manifest as the docs source of truth for shipped components.
  • Keep StellarUI components in light DOM by default and prefer semantic authored markup over component-owned data models.
  • Match current Datastar behavior for request flows, indicators, and backend-confirmed state transitions.

Implementation lessons

Keep the sharp edges from recent Rocket and Datastar work visible in the docs instead of relearning them component by component.

  • For `data-on:*`, the event object is `evt`. Do not guess React-style `$event` shapes when writing Rocket expressions.
  • Use the short action form when you do not need the event, like `data-on:slotchange="@sync()"`.
  • When you do need the event, pass `evt` explicitly, like `data-on:click="@onclick(evt)"`, or read from `evt.target` inline.
  • If a Rocket listener inside component DOM does not give a usable DOM event for delegation, stop forcing it and attach a native listener in `setup()`.
  • For slotted option sets like radio groups, delegate from one stable container instead of wiring one listener per item.
  • If `renderOnPropChange()` is off, prop changes do not refresh fallback slot text for you. Sync fallback `label`/`description`/`error` content yourself from host attributes.
  • Do not assume tone variables will survive across every component boundary. If a visual depends on them, mirror the state onto the rendered node or set the CSS vars directly in `syncState()`.

Shipped components

Every option below comes from the generated Rocket manifest.

Component module baseline

New components should follow the current Rocket pattern instead of the removed HTML template DSL.

import { rocket } from 'datastar'

rocket('stellar-example', {
  mode: 'open',
  props: ({ string }) => ({
    label: string.default('Example'),
  }),
  render: ({ html, props }) => html`
    <button type="button">${props.label}</button>
  `,
})