spaday-lion 0.3.0

Typed Lion components and browser assets for spaday.

Overview

from spaday import SetField, element, serve
from spaday_lion import LionButton, LionInput

page = element("form").child(
    LionInput(label="Name", name="name"),
    LionButton().text("Approve").on("click", SetField("state", "approved")),
    element("output").bind("textContent", "state"),
)
serve(page, packages=["lion"], store={"state": "pending"})

Every element @lion/ui registers has a typed class generated from its Custom Elements Manifest, including the attributes its form and localization mixins contribute, so props, events and slots are checked when you author the tree. Installing the package does not inject assets; select it with packages=["lion"] or pass the exported package descriptor.

Generic controls

Select the lion design to render spaday's generic controls as Lion elements:

from spaday import Button, Column, TextInput
from spaday.backends.starlette import serve

page = Column(
    TextInput(label="Name").bind("value", "name", mode="two-way"),
    Button(label="Save", intent="primary"),
)
app = serve(page, packages=["lion"], design="lion", store={"name": ""})

Lion realizes 12 of the 13 generic controls. Alert uses spaday's marked native fallback because Lion does not provide a static alert component.

Browser examples

• Open the standard app (source).
• Open the complete component gallery (source).

Both run Python locally through Pyodide; no install or server is required.

Run examples locally

python -m pip install -e ".[examples]"
python -m spaday_lion.example
python -m spaday_lion.gallery

Open http://127.0.0.1:8025 for the standard account-opening app or http://127.0.0.1:8026 for the component gallery. The standard app includes a complete lion-form, two-way bindings, an endpoint-backed submission flow, a review queue streamed from Python, overlays, navigation, and shared dark-theme state. The gallery includes every generated Lion component and a highlighted Python snippet for each component family.

Both pass the local package descriptor directly, so they do not install or resolve the integration from GitHub.

Theming

Lion is white-label: its elements ship functional styles instead of a palette. Disabled form-control text follows --spa-muted by default. Override Lion's native custom property on an app or one component when it needs a different value:

from spaday import App
from spaday_lion import LionDrawer, LionInput, LionTooltip

App(
    LionInput(label="Account").css(disabled_text_color="#64748b"),
    LionTooltip().css(tooltip_arrow_width="18px", tooltip_arrow_height="11px"),
    LionDrawer().css(min_width="16rem", max_width="32rem", transition_property="width"),
)

spaday_lion.TOKENS lists all ten custom properties consumed by Lion's registered production components: disabled text, tooltip arrow dimensions, and drawer size and transition controls. Style the rest of Lion with ordinary CSS, reading the shell's tokens where they fit:

lion-button { background: var(--spa-accent); border: 1px solid var(--spa-border); }

Sharing Lion with your own library

Lion registers global custom element names, so a second copy on the page throws from customElements.define. The package serves Lion's modules under their own bare specifiers — @lion/ui/button.js, @lion/ui/define/lion-button.js, the translation modules and the rest of its exports — through the page's import map. A library built on Lion that leaves those imports out of its bundle (external: ["@lion/ui"] with esbuild) gets this copy, and nothing registers twice.