spaday-spectrum 0.4.0

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

Generic controls

Select the spectrum design to render spaday's generic button, text input, text area, checkbox, and switch as Spectrum 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=["spectrum"], design="spectrum", store={"name": ""})

Controls outside this focused Spectrum package use spaday's marked native fallback. The package's shared conformance test covers both the Spectrum controls and those substitutions.

Theming

Spectrum's palette drives the Spaday shell inside sp-theme. Override a Spectrum token on the theme or app root and shell components inherit the same value:

from spaday import App
from spaday_spectrum import SpTheme

SpTheme(App(...)).css(spectrum_accent_content_color_default="#0C4253")

spaday_spectrum.TOKENS lists the Spectrum properties connected to --spa-surface, --spa-border, --spa-accent, and the shell status colors.

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.

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_spectrum.example
python -m spaday_spectrum.gallery

Open http://127.0.0.1:8028 for the standard creative-review app or http://127.0.0.1:8029 for the component gallery. The standard app includes streamed assets, endpoint-backed review decisions and brief submission, an activity feed, bound fields and switches, tabs, dismissible feedback, and shared Spectrum color and scale state. The gallery includes every generated component in this focused package and a highlighted Python snippet for each family.

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