Font Picker
import "@taprootio/espalier/font-picker";
<esp-font-picker>
Font picker component backed by the Google Fonts catalog by default.
The font catalog is loaded at runtime from a build-generated
font-definitions.json file served alongside the individual font CSS
files. Run npm run build-fonts to generate both assets.
Set font-source="web-safe" for email editors or other places where
the picker should offer only CSS font stacks that do not need font
downloads.
Required setup:
- Serve the
css/fonts/directory under a public path. - Point
<esp-root font-css-root="/your/path/">at that path.
Attributes
<esp-font-picker> has the following attributes:
category
category has a default value of null.
Category of fonts to display in the picker.
If not set, all font categories are displayed.
font-source
font-source has a default value of "google".
Source of fonts to display. google preserves the default Google
Fonts catalog behavior. web-safe shows email-safe/system CSS
font stacks and does not load Google font assets.
value
value has a default value of "".
The selected font family or CSS font stack.
In the default Google Fonts mode this is the font family name, such
as "Aclonica". In font-source="web-safe" mode this is the full CSS
font stack, such as "Arial, Helvetica, sans-serif", so pre-selection
via the value attribute must use the stack value.
placeholder
placeholder has a default value of "Choose a font...".
The placeholder text for the picker input.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-font-picker> has the following methods:
focus
Focus the picker input.
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-font-picker> emits the following events:
esp-value-changed
esp-value-changed is of type CustomEvent<FontPickerValueChangedDetail>.
Fired when the user selects a font
CSS Properties
<esp-font-picker> has the following CSS properties:
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).