spaday-fluent 0.2.0

Typed Fluent UI web components and browser assets for spaday.

Overview

from spaday import SetField, element, serve
from spaday_fluent import FluentBadge, FluentButton

page = element("div").child(
    FluentButton(appearance="primary").text("Approve").on("click", SetField("state", "approved")),
    FluentBadge(color="brand").bind("textContent", "state"),
)
serve(page, packages=["fluent"], store={"state": "pending"})

Every element of @fluentui/web-components has a typed class generated from its Custom Elements Manifest, so props, events and slots are checked when you author the tree; enum props such as appearance carry their choices. Installing the package does not inject assets; select it with packages=["fluent"] or pass the exported package descriptor.

Generic controls

Eleven of the 13 generic controls in spaday.ui render as Fluent elements when a page selects this package. Fluent Web Components 3.1.3 has no number or date control, so NumberInput and DateInput use spaday's marked native fallback. The mapping is exported as DESIGN; the shared conformance page checks every control, value updates, visible radio labels, validation state, and dialog behavior in a browser.

Theming

Fluent's design tokens are CSS custom properties. The stylesheet carries Fluent's light and dark themes and maps spaday's --spa-* shell palette onto them, so restyling Fluent restyles the shell and every other spaday component package with it. TOKENS lists the Fluent tokens wired to the palette, each settable through css():

App().css(colorBrandBackground="#0C4253")

The dark theme follows spaday's page mode: a wa-dark class on the root (for example App(...).bind_root_class("wa-dark", "dark")) or on any island switches it, and wa-light flips a nested island back. A theme applied with Fluent's own setTheme() takes precedence.

Sharing Fluent with your own library

Fluent registers global custom element names, so a second copy on the page throws from customElements.define. The package serves Fluent's modules under their own bare specifiers — @fluentui/web-components, @fluentui/web-components/button.js and the rest of its exports — along with @microsoft/fast-element, which a library extending Fluent's classes has to share, and @fluentui/tokens, through the page's import map. A library built on Fluent that leaves those imports out of its bundle (external: ["@fluentui/web-components", "@microsoft/fast-element"] with esbuild) gets this copy, and nothing registers twice.

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_fluent.example
python -m spaday_fluent.gallery

Open http://127.0.0.1:8024 for the standard sprint-command-center app or http://127.0.0.1:8025 for the component gallery. The standard app includes a task board streamed from Python, endpoint-backed task creation and completion, live activity and presence, bound forms, tabs, overlays, and shared dark-theme state. The gallery includes every generated Fluent 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.