English

Magyar

English

Magyar

Select theme

Appearance

pantoken / web-components

web-components ​

Alpha

@pantoken/web-components — framework-agnostic custom elements for Instructure UI.

Registers <instui-icon> (glyphs from @pantoken/icons) plus a set of token-styled elements that wrap the @pantoken/components CSS: <instui-button>, <instui-alert>, <instui-badge>, <instui-pill>, <instui-tag>, <instui-avatar>, <instui-spinner>, <instui-progress>, <instui-progress-circle>, <instui-metric>, <instui-rating>, <instui-icon-button>, <instui-toggle-button>, <instui-truncate>, <instui-img>, <instui-side-nav-bar>, <instui-tree-browser>, and <instui-tooltip>, plus the behavioral elements <instui-modal> (a real <dialog> driven by its open attribute), the native popovers <instui-context-view>, <instui-popover>, and <instui-tray>, <instui-in-place-edit> (a click-to-edit field that commits on Enter/blur and reverts on Escape), <instui-drilldown> (a stateful multi-level menu), <instui-pages> (one-panel-at-a-time nav via the View Transitions API), <instui-drawer-layout> (a collapsible, drag-resizable side panel), the interactive <instui-calendar> (a month grid navigated with the Invoker Commands API), and the pickers <instui-date-input> and <instui-date-time-input> (a field plus a calendar-dropdown popover). Each renders the matching .instui-* markup into its shadow root with the component stylesheet inlined, so the look is exactly @pantoken/components with nothing to import but this module. Tokens are inherited custom properties, so they pierce the shadow boundary — load @pantoken/css (or any pantoken token sheet) in the document to color them. The elevation scale (--instui-elevation-*) and focus-outline (--instui-focus-outline-*) custom properties ship in the token sheet too, so shadows and focus rings resolve from the same sheet the colors do — nothing extra to inject. (Elements that render icons, e.g. <instui-alert>, read --instui-icon-* glyph tokens the same way; the lean token sheet omits the full icon set, so pair it with @pantoken/components/component-icons.css, or load the full token sheet.)

The module is Node-safe: element classes are defined inside register, a no-op when there is no DOM, so importing this package during SSR or a build never touches HTMLElement.

Each element lives in its own documented file under elements/, exporting an ElementDefinition; elements/index.ts lists them in registration order as DEFINITIONS. register builds one prefix-aware RegisterContext and hands it to each definition.

Interfaces ​

Variables ​

Functions ​