Flag

Country is the fastest way of naming the country - there is nothing to look up - and every country the packaged images cover is a field of BitCountries, so it can be written straight into the markup. The flag is drawn as a 16 pixel image out of the Extras package, at the medium icon size of the theme.

The country can also be named by any of the four ways one is written down, and the first of them that resolves wins: Iso2 and Iso3 are the ISO 3166-1 codes, Code is the dialing code a telephone number begins with, and Name is the full English name. All four are matched case insensitively, and a dialing code is read the way a number is written - "+31", "0031" and "31" all reach the Netherlands.

A page is handed a country name in whichever spelling its own data uses, and none of those spellings is a different country. So Name also answers to the alternative names and the abbreviations a country is as widely known by - "Czechia", "Türkiye", "Holland", "USA", "Burma", "DRC" - and to the accents, the punctuation and the spacing another source writes it with, so "Curaçao" and "Guinea-Bissau" reach the countries this table writes as "Curacao" and "Guinea Bissau". Iso2 answers to "UK" as well, which ISO 3166-1 reserves for the United Kingdom even though its own code is "GB".

Dialing codes are not unique: Canada and the United States both carry "1", so a flag named by one alone is the first country of the table carrying it. Where the difference matters, name the country by its ISO code.

The frame around the flag carries its shape: Rounded softens its corners and Circular clips it to a circle, cropping the flag rather than squashing it. Bordered draws a hairline around it - which is the only thing that keeps a mostly white flag, Japan's or Switzerland's, off a white surface - and Shadow lifts it off the page with the card shadow of the theme. The border is drawn inside the frame, so the border itself takes no room.

The packaged image draws each flag in its own proportions inside a square, so a shaped frame is cut to the flag rather than to that square: the corners, the border and the shadow are the flag's own, and a rounded, bordered or shadowed flag is as wide as the flag is at the height it was given.

Emoji draws the flag as its Unicode emoji instead of as an image. The emoji is text, so it costs no request at all and stays crisp at any size, where the packaged image is only as sharp as its 16 pixels. What it looks like is the platform's to decide, though: the emoji fonts of Apple, Google and the Noto family draw the flags, while Windows draws the two letters of the country code side by side instead - which is why the image is what is drawn unless this asks otherwise.

So on Windows every sample below is two letters rather than a flag, a subdivision is a plain black flag, and the shaped frame of the last one crops those letters the way it would crop the flag. That is the platform's emoji font rather than the component: the same markup draws the flags wherever the font has them.

It is built out of the country code rather than looked up, so it also answers for a code the packaged images do not cover, and for the three subdivisions Unicode recommends for interchange: "GB-ENG", "GB-SCT" and "GB-WLS".

A glyph is as wide as the font draws it rather than as wide as a picture, so the frame grows to fit it - unless something has asked the frame for a shape of its own, where it keeps its size and crops the glyph exactly the way it crops a picture.

A flag is decorative to assistive technologies until something names it: it nearly always sits beside the name of the very country it stands for, and an image that repeats the text beside it is noise to a screen reader. Alt names it where it carries meaning of its own, and AutoAlt is that written for you out of the country's own name. Title is the tooltip, with AutoTitle filling it in the same way - but a tooltip is a pointer affordance rather than an accessible name, so a flag that has to be named to everyone wants both.

Where the name lands depends on what is drawn. An image carries it in its own alt, and an empty alt is what marks the decorative one. The emoji flag and whatever a FallbackTemplate puts in its place are text rather than pictures, and text is read out wherever it is - so a named one has the frame take the img role and the name instead, and an unnamed one is taken out of the accessibility tree altogether rather than being announced as two stray letters or a question mark.

A country the table does not carry draws nothing at all rather than a broken image, and FallbackTemplate is what stands in its place - a letter pair, an icon, whatever the page would rather show. It also stands in for an image that failed to load, which is what Src makes possible: it points the flag at a set of images of the page's own, a vector set that stays sharp at any size or one covering a country the packaged images do not.

A Src that fails is stood in for by the packaged flag of the same country first, so a set of a page's own that turns out not to cover a country is answered with the flag that ships rather than with nothing; the template is what is left once there is no flag at all.

Grayscale drains the color out of the flag while leaving it recognisable, which is how a flag says that the country is not the one in play - an unavailable locale, a region not shipped to. IsEnabled dims it with the disabled opacity of the theme instead, refuses the click and leaves the tab order - while still answering the pointer, so the tooltip saying why the country cannot be picked is still there to be read. The two are independent and read well together.

OnClick turns the whole frame into a button: it takes the button role, joins the tab order, draws the focus ring of the theme and answers Enter and Space as well as the pointer - the Space is even kept from scrolling the page under it. A flag is drawn at the icon sizes of the theme, well under the 24 pixels WCAG 2.2 asks of a target, so a clickable one grows the area that answers the pointer to that size without growing the flag.

A button needs a name to be announced by, so give a clickable flag an Alt saying what the click does; without one it falls back to the name of the country it shows, since "Italy, button" is worth more than "button" on its own, and a button with neither is left without the role rather than becoming a control with nothing to read out. A disabled flag leaves the tab order and stops answering.

Every country the packaged images cover, out of BitCountries.All. The images load lazily by default, so a list this long only fetches the rows that are actually scrolled to; hover any of them for its name and ISO code.

The packaged images are square and so is the frame they are drawn in, which is the shape a flag has beside anything else in a list. A set of the page's own pointed at with Src is usually drawn in the proportions of the flags themselves - 4:3 and 3:2 are what the vector sets of the world ship - and AspectRatio is what gives the frame that shape: the height is the one that stays and the width follows from the ratio, or the other way round where a Width is what was given.

Fit decides what the picture does inside a frame that is not its own shape. It covers the frame and is cropped by default, which is what keeps a circular or rounded flag full of flag rather than of empty space; Contain fits the whole flag inside the frame instead and leaves the rest of it empty.

Loading says when the browser fetches the image. It holds off until the flag is about to be scrolled to, which is what a list of two hundred of them wants; Eager starts the fetch at once, which is only worth setting for a flag whose image has to be on the wire before the layout settles.

OnLoad and OnError are the browser's own events on the picture, so neither fires for the emoji flag, which is text and cannot fail. A Src that fails raises OnError once for the page's own image and once more if the packaged flag standing in for it fails as well. ImageAttributes puts attributes on the picture rather than on the frame, which is where a crossorigin or a referrerpolicy for a CDN belongs.

The flags below are only rendered when the button is pressed, so their images are fetched and their events fire in front of you - rather than long before this section was scrolled to. Every press renders them anew and starts the counts over.

The packaged image is 16 pixels, which is all a flag at the icon sizes of the theme needs and which blurs past them. ImageSet draws the flag out of one of the two image sets of the Bit.BlazorUI.Assets package instead - Flat, the same artwork as the packaged image, and Shiny - each carrying every flag at 16, 24, 32, 48 and 64 pixels. Every size is offered to the browser, which fetches only the one the size of the flag and the density of the screen call for, so a large flag on a phone stays as sharp as a small one on a desktop.

The size is read off Width, Height and AspectRatio where they are written in px or rem, and off Size otherwise. A frame cut to the flag - rounded, circular, bordered or shadowed - is drawn from the one image whose flag covers it twice over. The images ship in that package, so it has to be installed; a country the sets do not cover, and an image that fails to load, fall back to the packaged flag.

ImageSize pins the flag to one of those sizes instead - Size16 to Size64 - where the page knows better than the size of the flag which image it wants: one it preloads, a known byte count for a long list, or a flag sized by a style of its own. The image is still scaled to the frame, so a small one drawn large is blurred. It only applies to an ImageSet, since the packaged image is 16 pixels and nothing else.

The image set is also cascaded: a CascadingValue of a BitFlagImageSet sets it for every flag inside, and one set on the flag itself wins over it - the last flag of the row below.

Size steps the flag through the icon sizes of the theme, and Medium is the 16 pixels the packaged images are drawn at - the size a flag with nothing set is. Width and Height take any CSS length instead and win over it; the images are square, so a height alone sets the width as well. The packaged image is raster, so a large one is those same 16 pixels scaled up: past these sizes, an ImageSet, the emoji flag or a Src of a vector set of the page's own is what stays sharp.

Style and Class reach the root element - the frame the flag is drawn in - and Styles and Classes reach each part of the component by name: the Root, the Image, the Emoji the emoji flag is written in and the Fallback that stands in for a flag that is not there.

Dir renders the flag in a right-to-left direction, which is also cascaded, so a flag inside an RTL container inherits it. The flag itself is a picture and is never mirrored - only the row it sits in flips - which is what a flag has to do: a mirrored flag is a different flag.