Flag

Country takes a field of BitCountries, with nothing to look up. The flag is a 16px image of the Extras package; Height takes any CSS length and sets the width with it.

Iso2, Iso3, Code (dialing) and Name take the country as the page's data has it; the first that resolves wins. All are case insensitive, a dialing code is read like a phone number, and Name also answers to everyday names and other spellings. A shared dialing code resolves to the country owning it, so prefer an ISO code where that matters.

Rounded, Circular, Bordered and Shadow shape the frame, cut to the flag rather than to the square image around it. Bordered keeps a mostly white flag visible on a white surface and takes no extra room. Grayscale marks a country that is not in play.

Emoji draws the Unicode emoji flag: text, so no request and crisp at any size, and it also covers the subdivisions "GB-ENG", "GB-SCT" and "GB-WLS". Its look is the platform's - Windows draws the two letters of the code instead. Unshaped, the frame grows to fit the glyph; shaped, it crops it.

A flag is decorative until named - it usually sits beside the country's name already. Alt names it; AutoAlt uses the country's name. Title and AutoTitle set the tooltip, which is not an accessible name. A named emoji is announced as a picture rather than as two letters, and an unnamed one is hidden from screen readers.

ImageSet draws from the Flat or Shiny set of Bit.BlazorUI.Assets (16-64px); the browser fetches only the size the flag and the screen density need, read off a px or rem Height/Width. ImageSize pins one size. A CascadingValue of a BitFlagImageSet sets it for every flag inside. A missing image falls back to the packaged flag.

It needs the Bit.BlazorUI.Assets package. Add its nuget package to the project next to Bit.BlazorUI.Extras; there is nothing to link or register, since the images are static web assets served from _content/Bit.BlazorUI.Assets/flags/. Extras does not reference Assets - the two meet only at that URL - so a missing package is no build error: every flag asking for an image set makes one failed request, then draws the packaged 16px image. That is why ImageSet is opt-in rather than the default.

Why the images are split across two packages. Extras carries one 16px flat image per country - 239 images, about 45KB - which is all a flag at the theme's icon sizes needs on a screen of ordinary density, and is always there for an image set to fall back to. The sets are two artworks at five sizes each - ten images per country, 2,390 images, about 1.1MB - which only a flag drawn large or on a dense screen needs. Kept in Extras, they would land in the published output of every app using any Extras component, most of which never draw a flag past 16px, and an app that precaches its published files for offline use (a PWA's service worker) would download all of them on install. Bit.BlazorUI.Assets is the package of optional static files that only the apps asking for them should carry, its fonts among them, so the sets live there, and only the apps that install it pay for them. Even then a page downloads no more than it draws: the browser is offered every size of a flag and fetches the one its size and the screen's density call for.

Src points one flag at an image of the page's own; SrcPattern points every flag at a set - a CDN or a vector package - writing in {iso2}/{iso3} (lower case) or {ISO2}/{ISO3} (upper case). A BitCountry of the page's own covers what the table lacks, such as the European Union. A failed image falls back to the packaged flag, then to FallbackTemplate, which also stands in for an unknown country.

The frame is square. AspectRatio reshapes it, keeping the height - 4:3 and 3:2 are what vector sets ship. Fit places the image: it covers and crops by default, Contain shows all of it. A packaged or ImageSet flag fills any ratio with the flag itself.

Images load lazily; Loading=Eager fetches at once. OnLoad and OnError are the image's own events (never fired for an emoji). ImageAttributes land on the img, e.g. a referrerpolicy for a CDN. Press the button to render the flags and count the events.

OnClick makes the flag a button: focusable, activated by Enter and Space, named by its Alt or else its country, with a pointer target grown to WCAG's 24px without growing the flag. aria-pressed passes through, so screen readers hear the selection too. Disabled dims it and refuses clicks and keys, but keeps its tooltip - hover the last one.

Every country of BitCountries.All, loaded lazily as it scrolls into view, with its name and code beside it.

BitParams with a BitFlagParams sets defaults for every flag under it - the size, the shape, the image source, the naming; a flag's own value wins (the last one turns rounding off). The country, Alt, Title, Src and the callbacks are not cascaded.

Size picks one of the theme's icon sizes (Medium, 16px, is the default); Width and Height win over it. Past these sizes, an ImageSet, the emoji or a vector Src stays sharp where the 16px packaged image blurs.

Style and Class reach the frame; Styles and Classes reach each part: Root, Image, Emoji and Fallback. The --bit-Flag-* variables restyle one flag through its Style, or every flag inside an element that sets them.

Dir flips the row the flag sits in, never the flag: a mirrored flag is a different flag.