spaday-spectrum

Spectrum for spaday

Overview

spaday-spectrum provides generated Python bindings and a self-contained registration bundle for a focused first slice of Adobe Spectrum Web Components:

• Theme
• Button, clear button, and close button
• Textfield
• Checkbox and switch
• Tabs, tab panels, and tabs overflow

Interactive example

The textfield updates the greeting immediately, the checkbox switches Spectrum themes, and the button resets state. All three interactions run in the browser through spaday's reactive store.

from spaday import SetField, cond, element, field
from spaday.backends.starlette import serve
from spaday_spectrum import SpButton, SpCheckbox, SpTextfield, SpTheme

page = (
    SpTheme(scale="medium")
    .compute("color", cond(field("dark"), "dark", "light"))
    .style(display="block", max_width="32rem", margin="2rem auto", padding="1.5rem")
    .child(element("h1").text("Spectrum profile"))
    .child(SpTextfield(label="Display name", placeholder="Your name").bind("value", "name", mode="two-way"))
    .child(SpCheckbox().text("Dark theme").bind("checked", "dark", mode="two-way"))
    .child(
        element("p")
        .child("Hello, ")
        .child(element("strong").bind("textContent", "name"))
    )
    .child(SpButton(treatment="fill").text("Reset name").on("click", SetField("name", "Ada")))
)

app = serve(page, packages=["spectrum"], store={"name": "Ada", "dark": False})

Save this as app.py, then run pip install spaday-spectrum starlette uvicorn and uvicorn app:app. Open http://127.0.0.1:8000.

Installing this project registers the spectrum entry point with spaday. The equivalent explicit forms are packages=[spaday_spectrum.package] and packages=["spaday_spectrum:package"].

The package pins six individual Spectrum packages to 1.12.2. It deliberately avoids the full @spectrum-web-components/bundle; more components should be added from concrete application needs.

The typed classes are generated from those packages' Custom Elements Manifests with make catalog. Spectrum publishes one package per component, and a published manifest leaves out what an element inherits from another package — size, disabled, href, and on sp-switch even checked. js/tools/manifests.mjs resolves each element's superclass and mixins through the manifests of the packages that declare them and writes the result to spaday_spectrum/manifests/, which the classes are generated from. base and shared publish no manifest at all, so the few declarations needed from them are transcribed in js/tools/unpublished.json; the tool fails on any class neither covers.

Run the local example

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

Open http://127.0.0.1:8028 for the review board: assets streamed from Python over transports and approved or sent back through Python endpoints, an activity feed, a brief form of text fields, checkboxes and a switch bound to spaday state and checked by the server, a pending button while it files, tabs and panels driven from the store, close and clear buttons, and switches for Spectrum's dark color and large scale. spaday-spectrum doesn't map spaday's shell palette yet, so the example maps it onto Spectrum's tokens itself.

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