spaday-lion

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.

Run the local example

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

Open http://127.0.0.1:8025 for the account opening page: a lion-form of input, email, IBAN, amount, datepicker, rich select, combobox, radio and checkbox groups, range, stepper, switch and text area whose serializedValue is posted to Python as one request and confirmed in a dialog, two-way bindings driving a live preview, a review queue streamed from Python with approvals, tabs, an accordion, a collapsible and a tooltip. Lion is white-label, so the page styles the elements from spaday's palette, and its dark switch flips them with the shell.

Theming

Lion is white-label: its elements ship functional styles only, with no theme and no design tokens, so TOKENS is empty and there is nothing to map onto spaday's --spa-* palette. Style them 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.

[!NOTE] This library was generated using copier from the Base Python Project Template repository.