fast-foundation

Classes

ClassDescription
AccordionAn Accordion Custom HTML Element Implements ARIA Accordion.
AccordionItemAn individual item in an Accordion.
AnchorAn Anchor Custom HTML Element. Based largely on the <a> element.
ARIAGlobalStatesAndPropertiesSome states and properties are applicable to all host language elements regardless of whether a role is applied. The following global states and properties are supported by all roles and by all base markup elements. https://www.w3.org/TR/wai-aria-1.1/#global_statesThis is intended to be used as a mixin. Be sure you extend FASTElement.
BadgeA Badge Custom HTML Element.
BaseProgressAn Progress HTML Element. Implements the ARIA progressbar.
ButtonAn Button Custom HTML Element. Based largely on the <button> element.
CardAn Card Custom HTML Element.
CheckboxA Switch Custom HTML Element. Implements the ARIA checkbox.
CSSCustomPropertyBehaviorA Behavior that will register to a CSSCustomPropertyTarget when bound.
DelegatesARIAButtonIncludes ARIA states and properties relating to the ARIA button role
DelegatesARIALinkIncludes ARIA states and properties relating to the ARIA link role
DelegatesARIATextboxIncludes ARIA states and properties relating to the ARIA link role
DesignSystemProviderA element to provide Design System values to consumers via CSS custom properties and to resolve recipe values.
DialogA Switch Custom HTML Element. Implements the ARIA dialog.
DirectionalStyleSheetBehaviorBehavior to conditionally apply LTR and RTL stylesheets. To determine which to apply, the behavior will use the nearest DesignSystemProvider's 'direction' design system value.
DividerA Divider Custom HTML Element. Implements the ARIA separator or ARIA presentation.
FlipperA Flipper Custom HTML Element. Flippers are a form of button that implies directional content navigation, such as in a carousel.
MatchMediaBehaviorAn abstract behavior to react to media queries. Implementations should implement the constructListener method to perform some action based on media query changes.
MatchMediaStyleSheetBehaviorA behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that styles are applied while the a query matches the environment and that styles are not applied if the query does not match the environment.
MenuA Menu Custom HTML Element. Implements the ARIA menu.
MenuItemA Switch Custom HTML Element. Implements ARIA menuitem, ARIA menuitemcheckbox, or ARIA menuitemradio.
RadioAn Switch Custom HTML Element. Implements the ARIA switch.
RadioGroupAn Radio Group Custom HTML Element. Implements the ARIA radiogroup.
SliderAn Switch Custom HTML Element. Implements the ARIA slider.
SliderLabelA label element intended to be used with the Slider component.
StartEndA mixin class implementing start and end elements. These are generally used to decorate text elements with icons or other visual indicators.
SwitchA Switch Custom HTML Element. Implements the ARIA switch.
TabA Tab Component to be used with Tabs
TabPanelA TabPanel Component to be used with Tabs
TabsAn Tabs Custom HTML Element. Implements the ARIA tablist.
TextAreaAn Text Area Custom HTML Element. Based largely on the <textarea> element.
TextFieldAn Text Field Custom HTML Element. Based largely on the <input type="text" /> element.
TreeItemA Tree item Custom HTML Element.
TreeViewA Tree view Custom HTML Element. Implements the ARIA TreeView.

Enumerations

EnumerationDescription
AccordionExpandModeExpand mode for Accordion
DividerRoleDivider roles
FlipperDirectionThe direction options for flipper.
MenuItemRoleMenu items roles.
SliderModeThe selection modes of a Slider
TabsOrientationThe orientation of the Tabs component
TextAreaResizeResize mode for a TextArea
TextFieldTypeText field sub-types

Functions

FunctionDescription
applyMixins(derivedCtor, baseCtors)Apply mixins to a constructor. Sourced from TypeScript Documentation.
composedParent(element)Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries. When the parent of a node is a shadow-root, it will return the host element of the shadow root. Otherwise it will return the parent node or null if no parent node exists.
cssCustomPropertyBehaviorFactory(name, value, host)Create a CSS Custom Property behavior.
defineDesignSystemProvider(nameOrDef)Defines a design-system-provider custom element, registering the tag-name so that the element can be property resolved by DesignSystemConsumers.
designSystemProperty(config)Decorator to declare a property as a design-system property. Intended to be used with the DesignSystemProvider
display(displayValue)Applies a CSS display property. Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
isDesignSystemConsumer(element)Determines if the element is DesignSystemConsumer
isTreeItemElement(el)check if the item is a tree item
matchMediaStylesheetBehaviorFactory(query)Construct a behavior factory that will conditionally apply a stylesheet based on a MediaQueryList

Interfaces

InterfaceDescription
CSSCustomPropertyDefinitionA structure representing a CSS custom property.
CSSCustomPropertyTargetA structure that can register and unregister CSSCustomPropertyDefinitions.
DecoratorDesignSystemPropertyConfigurationConfiguration object for defining a DesignSystemProvider property
DesignSystemConsumerDefines a structure that consumes from a DesignSystemProvider
SliderConfigurationThe configuration structure of Slider.

Variables

VariableDescription
AccordionItemTemplateThe template for the AccordionItem component.
AccordionTemplateThe template for the Accordion component.
AnchorTemplateThe template for the Anchor component.
BadgeTemplateThe template for the Badge component.
ButtonTemplateThe template for the Button component.
CardTemplateThe template for the Card component.
CheckboxTemplateThe template for the Checkbox component.
designSystemConsumerBehaviorBehavior to connect a DesignSystemConsumer to the nearest DesignSystemProvider
DesignSystemProviderTemplateThe template for the DesignSystemProvider component.
DialogTemplateThe template for the Dialog component.
disabledCursorThe CSS value for disabled cursors.
DividerTemplateThe template for the Divider component.
endTemplateThe template for the end element. For use with StartEnd
FlipperTemplateThe template for the Flipper component.
focusVisibleThe string representing the focus selector to be used. Value will be "focus-visible" when https://drafts.csswg.org/selectors-4/\#the-focus-visible-pseudo is supported and "focus" when it is not.
forcedColorsStylesheetBehaviorThis can be used to construct a behavior to apply a forced-colors only stylesheet.
getDirectiona method to determine the current localization direction of the view
hiddenA CSS fragment to set display: none; when the host is hidden using the [hidden] attribute.
MenuItemTemplateThe template for the MenuItem component.
MenuTemplateThe template for the Menu component.
ProgressRingTemplateThe template for the BaseProgress component.
ProgressTemplateThe template for the BaseProgress component.
RadioGroupTemplateThe template for the RadioGroup component.
RadioTemplateThe template for the Radio component.
SliderLabelTemplateThe template for the SliderLabel component.
SliderTemplateThe template for the Slider component.
startTemplateThe template for the start element. For use with StartEnd
SwitchTemplateThe template for the Switch component.
TabPanelTemplateThe template for the TabPanel component.
TabsTemplateThe template for the Tabs component.
TabTemplateThe template for the Tab component.
TextAreaTemplateThe template for the TextArea component.
TextFieldTemplateThe template for the TextField component.
TreeItemTemplateThe template for the TreeItem component.
TreeViewTemplateThe template for the TreeView component.

Type Aliases

Type AliasDescription
CSSDisplayPropertyValueDefine all possible CSS display values.
MediaQueryListListenerAn event listener fired by a MediaQueryList.
RadioControlA structure representing a Radio element