Skip to content
BlazorUI

Extras

TimeZonePicker

Bit.BlazorUI.ExtrasTimeZoneSelectorTimeZoneSelectTzPicker

BitTimeZonePicker picks a time zone out of a searchable list that shows the offset from UTC, the place and the country of each one - for the time zone of a profile, a meeting or a report, and for the TimeZone of the date and time pickers. Value is a TimeZoneInfo or the IANA id of the time zone, whichever it is bound to; the list is the same on every runtime, Windows ids and renamed IANA ids are recognized, the visitor's own time zone can be preselected from the browser, and the whole field is keyboard and screen-reader operable.

Notes

To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

The offsets are read off the time zone data of the runtime. A Blazor WebAssembly app that strips that data out (<InvariantTimezone>true</InvariantTimezone>) knows UTC alone, so the list offers nothing else there.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

The field opens a list of every time zone of BitTimeZones.All - UTC and every location time zone of the IANA database - ordered west to east by its offset from UTC, each with its place and country. TValue says what the value is: the IANA id as a string, or a TimeZoneInfo. A bound value says it on its own. Placeholder fills the field while no time zone is selected.

Label & description

Label (or LabelTemplate) names the field and its list; a click on it moves the focus to the field. Required adds the asterisk and aria-required. Description (or DescriptionTemplate) writes a hint under the field, tied to it through aria-describedby.

Dates and times are shown in this time zone.

Binding

Value is two-way bindable to a string - the canonical IANA id, the one every runtime reads back, and the natural thing to store - or to a TimeZoneInfo, ready for the TimeZone of BitCalendar, BitDatePicker, BitDateRangePicker and BitTimePicker.

Id:

Id:
Display name:
Time there:

DefaultValue & DetectTimeZone

An unbound picker starts on DefaultValue, and OnChange reports what is picked after it. A value is recognized however it is written: a Windows id (Iran Standard Time) or an IANA id since renamed (Asia/Calcutta) lands on its canonical time zone. DetectTimeZone preselects the visitor's own time zone when the picker has no value - read from the browser, so on Blazor Server it is the visitor's rather than the server's.

Changed to:


Detected:

Custom time zones

TimeZones replaces the built-in list (BitTimeZones.All) - filter it to narrow the choice down. Whatever order it is given in, the list is shown by offset.

Preferred time zones

PreferredTimeZones pins time zones to the top of the list, set apart from the rest by a rule. They are written as ids, of any kind the picker recognizes.

Search box

The search matches places and countries (accents folded, word starts, so sao pa finds Sao Paulo and paris fr finds Paris), ids (Asia/Calcutta, UTC), the regions of the Windows names (pacific, central europe) and offsets (+3:30, utc-5, gmt+0530; +5 finds every zone of the hour). The result count is announced to screen readers. Typing on the closed field opens it with the search already started. SearchBoxPlaceholder, SearchBoxAriaLabel and NoResultsMessage set its texts. NoSearchBox removes it; the field then answers to type-ahead, open or closed.

Offsets & countries

The offsets are the ones in force now, daylight saving time included. ReferenceDate computes them - and orders the list - for another moment, such as the date of an event. NoOffset leaves the offsets out of the field and the list, and NoCountry the country names.

Templates

ValueTemplate renders the content of the field from the selected BitTimeZone, ItemTemplate each row, and NoResultsTemplate the empty result.

Validation

Inside an EditForm the data annotations validate the bound time zone and the field gets aria-invalid; NoValidate opts out. Outside a form, Invalid marks the field and ErrorMessage (or ErrorMessageTemplate) also writes the reason under it, referenced by aria-describedby and announced when it appears.

We have no office there yet.
Pick the time zone of one of our offices.
We have no office there yet.​


Disabled & ReadOnly

Disabled dims the field and takes it out of the tab order. ReadOnly keeps it focusable and its time zone readable while refusing to open the list; the field drops its caret.

Variants

NoBorder removes the frame, and Underlined keeps only a bottom rule that thickens on focus. Background and Border take the fill and the frame from the neutral color kinds, for a field on a surface other than the primary one.


Callout

DropDirection (TopAndBottom by default, or All) and MaxHeight place and size the list. The arrow keys wrap at its ends unless NoWrapNavigation is set; Home, End, Page Up and Page Down move through it too, and Escape or Alt+Up close it. Responsive turns it into a full-height side panel on small screens, with the Label and a close button (ResponsiveCloseIconName, ResponsiveCloseButtonAriaLabel) - narrow the window to see it.

Events

OnChange reports the picked time zone, OnOpen / OnClose follow the list, OnSearch reports the search term, and OnFocus / OnBlur follow the field.

Selected time zone:
Search text:
Callout: closed
Field: blurred

Programmatic control

IsOpen is two-way bindable, and a reference offers OpenAsync, CloseAsync, SelectTimeZoneAsync (by any id, or by a TimeZoneInfo, raising the same events picking it in the list does), SelectedTimeZone and FocusAsync.



IsOpen: False
SelectedTimeZone:

Form submission

For a plain HTML form, Name posts the canonical IANA id of the selected time zone through a hidden field - whether the picker is bound to the id or to a TimeZoneInfo.

Posted as timeZone:

Localization

Every text the picker shows or announces can be translated. The names of the places and the countries come from TimeZones - new BitTimeZone instances carrying the ids of the built-in ones; the search box and the empty result take SearchBoxPlaceholder, SearchBoxAriaLabel and NoResultsMessage; and SearchResultsAnnouncement phrases the result count a screen reader hears.

Cascading parameters

BitParams hands a BitTimeZonePickerParams to every time zone picker under it - the time zones an app offers, whether the visitor's own is detected, its look and its translated texts, set once, whatever each picker is bound to. A picker keeps any parameter it sets itself. What belongs to one field only (Value, DefaultValue, IsOpen, Name, Invalid, ErrorMessage and the events) is not cascaded.


Color

Color paints the frame and the focus ring in one of the general colors - a semantic one or a neutral family. A Border kind, when set, takes the frame back and leaves Color the ring.

External Icons

ResponsiveCloseIcon takes the icon of the close button of the responsive panel from any CSS-class based library (FontAwesome, Bootstrap Icons) as raw classes or through the BitIconInfo helpers, and wins over ResponsiveCloseIconName. Reference the library's stylesheet in your app, and narrow the window to see it.

Size

Size scales the height, padding, text and list rows together.

Style & Class

The public --bit-TimeZonePicker-* custom properties (see the CSS variables table) re-skin the field without a selector: on :root for the whole app, on an ancestor for the pickers inside it, or in one picker's Style. The time zone list is moved to the end of the body while it is open, yet it keeps inheriting from the field and every ancestor of it, so a variable set in any of those places re-skins the list as well. They restyle the default, not a choice: an explicit Color, Background, Border or Size wins over the variables for what it sets. Style and Class reach the root, Styles and Classes every part by name.

CSS variables on one picker (open its list too):

CSS variables on an ancestor (open its list too):

Style, Class, Styles and Classes:

RTL

Dir="BitDir.Rtl" mirrors the field, the callout and the responsive panel.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitTimeZonePicker CSS variables

Name Default value Description
--bit-TimeZonePicker-background --bit-clr-bg-pri Fill of the field. The Background parameter wins over it.
--bit-TimeZonePicker-color --bit-clr-fg-pri Name of the selected time zone in the field.
--bit-TimeZonePicker-placeholder-color --bit-clr-fg-sec Placeholder of the field and of the search box.
--bit-TimeZonePicker-border-color --bit-clr-brd-pri Frame at rest. The Border and Color parameters win over it.
--bit-TimeZonePicker-hover-border-color --bit-clr-brd-pri-hover Frame under a pointer, on devices that can hover. The Border and Color parameters win over it.
--bit-TimeZonePicker-border-width --bit-shp-brd-width Thickness of the frame.
--bit-TimeZonePicker-radius --bit-shp-radius-control Corner radius of the frame.
--bit-TimeZonePicker-min-height --bit-siz-ctrl-md Smallest height of the frame. The Size parameter wins over it.
--bit-TimeZonePicker-font-size --bit-tpg-fs-sm Text size of the field and of the time zone list. The Size parameter wins over it.
--bit-TimeZonePicker-padding 0 --bit-siz-ctrl-pad-x-md Padding of the field. The Size parameter wins over it.
--bit-TimeZonePicker-focus-color --bit-clr-pri-focus Focused frame and focus ring, and the keyboard cues of the active row and the close button of the list. The Color parameter wins over it. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too.
--bit-TimeZonePicker-invalid-color --bit-clr-err / --bit-clr-err-focus Frame, focus ring and error message of a rejected value.
--bit-TimeZonePicker-disabled-color --bit-clr-fg-dis Text and glyphs when disabled.
--bit-TimeZonePicker-disabled-background --bit-clr-bg-dis Fill when disabled.
--bit-TimeZonePicker-disabled-border-color --bit-clr-brd-dis Frame when disabled.
--bit-TimeZonePicker-caret-color --bit-clr-fg-sec The caret of the field.
--bit-TimeZonePicker-offset-color --bit-clr-fg-sec The offsets from UTC of the field and of the list.
--bit-TimeZonePicker-label-color --bit-clr-fg-pri Label text.
--bit-TimeZonePicker-label-font-size --bit-TimeZonePicker-font-size Label text size. The Size parameter wins over it.
--bit-TimeZonePicker-label-font-weight --bit-tpg-field-label-font-weight Label weight.
--bit-TimeZonePicker-required-color --bit-clr-req The asterisk of a Required field.
--bit-TimeZonePicker-description-color --bit-clr-fg-sec Description text.
--bit-TimeZonePicker-footer-font-size --bit-tpg-fs-2xs Text size of the description and of the error message.
--bit-TimeZonePicker-callout-background --bit-clr-bg-pri The surface of the time zone list.
--bit-TimeZonePicker-callout-border-color --bit-clr-brd-pri Border of the time zone list, and the rules under its search box and under the preferred time zones.
--bit-TimeZonePicker-callout-radius --bit-shp-radius-popup Corner radius of the time zone list.
--bit-TimeZonePicker-callout-shadow --bit-shd-popup (--bit-shd-sheet for the responsive panel) Elevation of the time zone list.
--bit-TimeZonePicker-callout-max-height --bit-siz-popup-max-height Tallest the scrolling list grows. The MaxHeight parameter wins over it.
--bit-TimeZonePicker-responsive-width spacing(34) Width of the side panel a Responsive picker opens on a small screen.
--bit-TimeZonePicker-overlay-background transparent The layer behind an open list; give it a color for a modal-style scrim.
--bit-TimeZonePicker-item-height --bit-siz-item-md Smallest height of a row of the list. The Size parameter wins over it.
--bit-TimeZonePicker-item-color --bit-clr-fg-pri Place name of a row, and the text of the search box.
--bit-TimeZonePicker-item-hover-background --bit-clr-bg-pri-hover Row under the pointer, and the row the arrow keys are on.
--bit-TimeZonePicker-item-selected-background --bit-clr-bg-sec The selected row.
--bit-TimeZonePicker-item-selected-color --bit-TimeZonePicker-item-color Text of the selected row.
--bit-TimeZonePicker-item-country-color --bit-clr-fg-sec Country name of a row.

API

Every parameter, public member, sub-class and enum this component exposes.

BitTimeZonePicker parameters

Name Type Default value Description
Background BitColorKind? null The color kind of the fill of the time zone picker. An explicit value wins over --bit-TimeZonePicker-background; left unset, the fill is the primary kind unless it says otherwise.
Border BitColorKind? null The color kind of the frame of the time zone picker, winning over the main color of Color (which keeps the focus ring). An explicit value wins over --bit-TimeZonePicker-border-color and --bit-TimeZonePicker-hover-border-color; left unset, the frame is the primary border unless an explicit Color or those variables say otherwise.
Classes BitTimeZonePickerClassStyles? null Custom CSS classes for different parts of the BitTimeZonePicker.
Color BitColor? null The general color of the time zone picker: the frame takes its main color and the focus ring its focus color. An explicit value wins over --bit-TimeZonePicker-focus-color and the --bit-TimeZonePicker-* border colors (an explicit Border still wins the frame); left unset, the field is primary unless those variables say otherwise.
Description string? null The description shown under the time zone picker, tied to the field through aria-describedby.
DescriptionTemplate RenderFragment? null The custom template for the description of the time zone picker.
DetectTimeZone bool false Preselects the time zone of the user's device when the picker has no value: the one the browser runs in, which on Blazor Server is the visitor's own rather than the server's TimeZoneInfo.Local. It is written into a bound value the way a pick in the list would be; a value the page has already set is left as it is, and so is a disabled or read-only field.
DropDirection BitDropDirection BitDropDirection.TopAndBottom Determines the allowed drop directions of the time zone list callout.
ErrorMessage string? null The error message shown under the time zone picker, which also puts the field in its invalid state. It is referenced through aria-describedby and announced when it appears.
ErrorMessageTemplate RenderFragment? null The custom template for the error message of the time zone picker, putting the field in the same invalid state.
Invalid bool false Renders the time zone picker in an invalid state without going through the validation of an EditContext.
IsOpen bool false Determines the opening state of the time zone list callout. (two-way bound)
ItemTemplate RenderFragment<BitTimeZone>? null The custom template for each time zone of the list. The offset the list shows for it is GetUtcOffset at the ReferenceDate, written by BitTimeZones.FormatUtcOffset.
Label string? null The label of the time zone picker shown above the field, which is also the accessible name of the field and of the time zone list.
LabelTemplate RenderFragment? null The custom template for the label of the time zone picker.
MaxHeight int? null The maximum height of the time zone list callout in pixels.
NoBorder bool false Removes the border of the time zone picker.
NoCountry bool false Hides the names of the countries the time zones are in, which the list otherwise shows beside each place.
NoOffset bool false Hides the offsets from UTC of the time zones in the field and in the list.
NoResultsMessage string? null The message to show, and to announce, when the search result of the time zone list is empty.
NoResultsTemplate RenderFragment? null The custom template to show when the search result of the time zone list is empty.
NoSearchBox bool false Hides the search box of the time zone list. The field then answers to type-ahead instead, open or closed.
NoWrapNavigation bool false Stops the keyboard navigation of the time zone list from wrapping around at its two ends.
OnBlur EventCallback<FocusEventArgs> The callback that is invoked when the field loses focus.
OnClose EventCallback The callback that is invoked when the time zone list callout closes.
OnFocus EventCallback<FocusEventArgs> The callback that is invoked when the field receives focus.
OnOpen EventCallback The callback that is invoked when the time zone list callout opens.
OnSearch EventCallback<string?> The callback that is invoked when the search text of the time zone list changes.
Placeholder string? null The text shown in the field while no time zone is selected.
PreferredTimeZones ICollection<string>? null The time zones to pin to the top of the list, set apart from the rest of it by a rule, each written as any id BitTimeZones.Find resolves: an IANA id, an older IANA id or a Windows id.
ReferenceDate DateTimeOffset? null The moment the offsets of the time zones are computed for - and the list ordered by - which is now unless it is given, so a picker for an event in the future shows the offsets that will hold then.
Responsive bool false Shows the time zone list as a full height panel on small screens instead of an inline callout.
ResponsiveCloseButtonAriaLabel string? null The aria-label of the close button of the responsive panel of the time zone list.
ResponsiveCloseIcon BitIconInfo? null The icon of the close button of the responsive panel. Takes precedence over ResponsiveCloseIconName when both are set, and renders icons from external libraries like FontAwesome or Bootstrap Icons.
ResponsiveCloseIconName string? null The icon name of the close button of the responsive panel from the Fluent UI icon set.
SearchBoxAriaLabel string? null The aria-label of the search box of the time zone list. Falls back to the search box placeholder, then to a default English value.
SearchBoxPlaceholder string? null The placeholder text of the search box of the time zone list.
SearchResultsAnnouncement Func<int, string?>? null What a screen reader announces for the number of time zones a search term leaves in the list, in place of the default "1 time zone found" / "{count} time zones found". Returning null or an empty string keeps a count from being announced.
Size BitSize? null The size of the time zone picker. An explicit value wins over the --bit-TimeZonePicker-* size variables (minimum height, font sizes, padding, row height); left unset, the field is medium unless those variables say otherwise.
Styles BitTimeZonePickerClassStyles? null Custom CSS styles for different parts of the BitTimeZonePicker.
TimeZones ICollection<BitTimeZone> BitTimeZones.All The list of the time zones the picker offers. A list of translated BitTimeZone instances is how the names are localized, and a filtered one how the choice is narrowed down. Whatever its order, the picker shows them by their offsets from UTC.
Title string? null The tooltip (title attribute) of the time zone picker.
Underlined bool false Renders the time zone picker with only a bottom border instead of a full one.
ValueTemplate RenderFragment<BitTimeZone?>? null The custom template for the content of the field, receiving the selected time zone (null while none is).

BitTimeZonePicker public members

Name Type Default value Description
SelectedTimeZone BitTimeZone? The time zone of the list the current value stands for, or null while there is none.
OpenAsync Task Opens the time zone list. It does nothing while the field is disabled or read-only.
CloseAsync Task Closes the time zone list.
SelectTimeZoneAsync Task Selects the time zone an id (an IANA id, an older IANA id or a Windows id) or a TimeZoneInfo stands for, exactly as picking it in the list would, so the same events fire. One the list does not offer is not selected.

BitInputBase parameters

Name Type Default value Description
DefaultValue TValue? null The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback.
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Name string? null Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate bool false Disables the validation of the input.
OnChange EventCallback<TValue?> Callback for when the input value changes.
ReadOnly bool false Makes the input read-only.
Required bool false Makes the input required.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name Type Default value Description
InputElement ElementReference The ElementReference of the input element.
FocusAsync() () => ValueTask Gives focus to the input element.
FocusAsync(bool preventScroll) (bool preventScroll) => ValueTask Gives focus to the input element.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitTimeZonePickerClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitTimeZonePicker.
Label string? null Custom CSS classes/styles for the label of the BitTimeZonePicker.
Field string? null Custom CSS classes/styles for the field (the button that opens the time zone list) of the BitTimeZonePicker.
Text string? null Custom CSS classes/styles for the content of the field (the offset and the name of the selected time zone, or the placeholder) of the BitTimeZonePicker.
Offset string? null Custom CSS classes/styles for the offset from UTC of the time zones in the field and in the list of the BitTimeZonePicker.
Caret string? null Custom CSS classes/styles for the caret down element of the field of the BitTimeZonePicker.
ErrorMessageContainer string? null Custom CSS classes/styles for the container of the error message of the BitTimeZonePicker.
ErrorMessage string? null Custom CSS classes/styles for the error message of the BitTimeZonePicker.
DescriptionContainer string? null Custom CSS classes/styles for the container of the description of the BitTimeZonePicker.
Description string? null Custom CSS classes/styles for the description of the BitTimeZonePicker.
Overlay string? null Custom CSS classes/styles for the overlay of the time zone list of the BitTimeZonePicker.
Callout string? null Custom CSS classes/styles for the callout of the time zone list of the BitTimeZonePicker.
SearchBox string? null Custom CSS classes/styles for the search box of the time zone list of the BitTimeZonePicker.
ScrollContainer string? null Custom CSS classes/styles for the scroll container of the time zone list of the BitTimeZonePicker.
List string? null Custom CSS classes/styles for the list (the listbox element) of the BitTimeZonePicker.
Item string? null Custom CSS classes/styles for each item of the time zone list of the BitTimeZonePicker.
ItemName string? null Custom CSS classes/styles for the name of each item of the time zone list of the BitTimeZonePicker.
ItemCountry string? null Custom CSS classes/styles for the country name of each item of the time zone list of the BitTimeZonePicker.
NoResults string? null Custom CSS classes/styles for the no results message of the time zone list of the BitTimeZonePicker.
ResponsiveLabelContainer string? null Custom CSS classes/styles for the label container of the responsive panel of the time zone list of the BitTimeZonePicker.
ResponsiveLabel string? null Custom CSS classes/styles for the label of the responsive panel of the time zone list of the BitTimeZonePicker.
ResponsiveCloseButton string? null Custom CSS classes/styles for the close button of the responsive panel of the time zone list of the BitTimeZonePicker.
ResponsiveCloseIcon string? null Custom CSS classes/styles for the icon of the close button of the responsive panel of the time zone list of the BitTimeZonePicker.

BitTimeZone properties

A time zone of the IANA time zone database. BitTimeZones holds one shared instance per time zone in All, and resolves an IANA id, an older IANA id, a Windows id or a TimeZoneInfo back to it through Find.

Name Type Default value Description
Id string The canonical IANA id of the time zone (America/Los_Angeles).
Name string The name of the place the time zone is named after (Los Angeles), which the picker shows and searches.
CountryCode string? null The ISO 3166-1 alpha-2 code of the country the time zone is in, or null for UTC.
CountryName string? null The name of the country the time zone is in, shown beside the Name and searched as well. Unless it is given, it is the name BitCountries carries for the CountryCode.
WindowsId string? null The Windows id the time zone maps to (Pacific Standard Time), from the CLDR mapping, or null for one Windows has none for.
TimeZoneInfo TimeZoneInfo? The TimeZoneInfo of the time zone on the running runtime, or null where the runtime knows nothing of it. It is looked up by the IANA id, then by the older ids, then by the WindowsId.
GetUtcOffset(DateTimeOffset at) TimeSpan? The offset from UTC the time zone is at, at the given moment, daylight saving time included.

BitColor enum

Name Value Description
Primary 0 Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.

BitColorKind enum

Name Value Description
Primary 0 The primary color kind.
Secondary 1 The secondary color kind.
Tertiary 2 The tertiary color kind.
Transparent 3 The transparent color kind.

BitDropDirection enum

Name Value Description
All 0 The direction determined automatically based on the available spaces in all directions.
TopAndBottom 1 The direction determined automatically based on the available spaces in only top and bottom directions.

BitSize enum

Name Value Description
Small 0 The small size.
Medium 1 The medium size.
Large 2 The large size.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.