Core
@lit-material/coreCore
Shared Lit reactive controllers used across lit-material components:
RippleController (press state from the pointer, drawn on a state layer element) and
FocusRingController (tells keyboard focus from pointer focus, for an accessible focus
ring). Those two are internal building blocks for other @lit-material/* packages, not yet
meant as a public API for general use.
themeContext and localeContext are different: they are meant to be used
directly by apps built with lit-material.
Theme context
A shared @lit/context key
for passing MD3 theme state (dark or light mode, an optional Material You seed color) down a
component tree: the lit-material equivalent of a React theme context.
@lit-material/core only defines the key and the ThemeState shape; provide
and consume it with @lit/context's own API directly (npm install @lit/context
alongside this package):
import { themeContext, type ThemeState } from "@lit-material/core";
import { ContextProvider, ContextConsumer } from "@lit/context";
import { LitElement, html } from "lit";
class AppShell extends LitElement {
private readonly themeProvider = new ContextProvider(this, {
context: themeContext,
initialValue: { colorScheme: "auto" } satisfies ThemeState,
});
override render() {
return html`<slot></slot>`;
}
}
class ThemedWidget extends LitElement {
private readonly theme = new ContextConsumer(this, { context: themeContext, subscribe: true });
override render() {
return html`<p>Color scheme: ${this.theme.value?.colorScheme}</p>`;
}
}
The @provide/@consume decorators from @lit/context work the
same way, if you prefer decorators over explicit controllers.
Locale context
The same pattern as themeContext, applied to i18n: a shared context key for threading
the active locale (and an optional override for the text direction) down a component tree, so
components that format a date or lay out by dir can read it without prop drilling.
import { localeContext, type LocaleState } from "@lit-material/core";
import { ContextProvider } from "@lit/context";
class AppShell extends LitElement {
private readonly locale = new ContextProvider(this, {
context: localeContext,
initialValue: { locale: "en" } satisfies LocaleState,
});
}
@lit-material/core only defines the key and the LocaleState shape
({ locale: string; direction?: "ltr" | "rtl" }). None of the lit-material
components have fixed strings to translate, so the translation runtime is your app's own concern.
Combine localeContext with
@lit/localize for the
translated strings themselves. See the Building apps guide for a
worked example wiring both together.