Display country for selected time zone (region mode)

[jcfranco]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Stems from a follow-up conversation on https://github.com/Esri/calcite-design-system/issues/9018#issuecomment-2260350211.

Displaying the country inline in the selection will provide more context to users.

cc @AdelheidF @richiecarmichael @emmilaakso212 @ashetland @bsvensson

Acceptance Criteria

In region mode, when a time zone is selected, the country should be displayed in the selected item.

Relevant Info

An embedded style was also brought up, but might need further discussion with the team.

In the meantime, developers can achieve this by using read-only mode and overriding the semantic token CSS props (see example).

Which Component

calcite-input-time-zone

Example Use Case

No response

Priority impact

impact - p1 - need for current milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in 2.12.0-next.12 with the following HTML:

<calcite-input-time-zone mode="region"></calcite-input-time-zone>