pantoken / web-components
web-components
Alpha
@pantoken/web-components — framework-agnostic custom elements for Instructure UI.
register (auto-invoked in the browser) defines the full <instui-*> element set into any custom-element registry. Each element renders the matching @pantoken/components CSS into its shadow root; tokens are inherited custom properties that pierce the shadow boundary — load @pantoken/css to supply them.
For localized UI strings (calendar nav labels, date-input placeholder, drilldown Back text) pass locale, strings, or dir options to register. Use @pantoken/i18n for the full Canvas-parity bundle set of 44 locales (3 RTL) and the register-wrapping registerLocalized helper.
The module is Node-safe: element classes are defined inside register, a no-op when there is no DOM, so importing during SSR or a build never touches HTMLElement.
Interfaces
- CommandEventish
- ElementRegistry
- RegisterContext
- ElementDefinition
- RegisterContextOptions
- WebComponentStrings
Variables
- alert
- avatar
- badge
- button
- calendar
- contextView
- dateInput
- dateTimeInput
- drawerLayout
- drilldown
- iconButton
- icon
- img
- inPlaceEdit
- DEFINITIONS
- metric
- modal
- pages
- pill
- popover
- progressCircle
- progress
- rating
- sideNavBar
- spinner
- tag
- toggleButton
- tooltip
- tray
- treeBrowser
- truncate
- ELEMENTS
- NESTED_DEPS
- ICON_ELEMENTS
- DEFAULT_PREFIX
- ENGLISH_STRINGS