Markets locale pickers

Shopify Markets country/language selectors. Both consume storeContext, so they need a <storesynk-store> ancestor (SSK-101). They have two modes, detected from the author’s markup (the same contract as change-option):

• select (default) - the picker adopts an author-provided child <select> or auto-creates one, and fills its <option>s from the shop’s localization data. Zero markup required; a named native <select> is already accessible.
• template (pill) - if the first child is a locale-value, that element is the per-entry template: the picker clones it per country/language into its parent container, fills the show-locale-name / show-locale-currency leaves, and applies the APG radiogroup contract (see the a11y section). Detection order: a <select> beats a locale-value beats auto-create.

Either way the picker dispatches the pick up to the store, which owns the actual switch (the pickers only reflect state). The localization query is loaded lazily the first time a picker mounts - a store with no pickers never pays for it. On a single-market shop (≤1 option) a picker hides itself (hidden + [ss-empty]), so it is safe to leave in.

change-country

• Purpose: country/market picker. Populates its <select> from localization.availableCountries; selecting one dispatches sf:country-change, and the store re-prices the cart + reformats money for that market. Extends LitElement (light DOM).
• Attributes:
  • label : string = "" - accessible name for the generated <select> when the author gives it none (via aria-label/<label>). Defaults to "Country".
  • show-currency : boolean (presence) - in select mode, append each country’s currency to its option text, e.g. "Germany (EUR €)"; in template mode, place a show-locale-currency leaf.
• Required ancestor / context: storesynk-store (consumes storeContext).
• Children: select mode - optionally one <select> (else it creates one; the engine owns its <option>s). Template mode - a first-child locale-value pill template (see below).
• Events: emits sf:country-change (bubbles, composed; detail = { country }).
• State it sets: [ss-empty] (+ hidden) when there is ≤1 country (single-market shop); [ss-loading] (+ aria-busy="true" + a disabled <select>, or aria-disabled pills in template mode) while a switch is in flight. Also injects a visually-hidden role="status" live region that announces the settled market to AT.

change-language

• Purpose: language picker for the active country. Populates its <select> from that country’s availableLanguages (option text is each language’s endonym), so its list repopulates automatically when the country switches. Selecting one dispatches sf:language-change. Extends LitElement (light DOM).
• Attributes:
  • label : string = "" - accessible name for the generated <select> (select mode) / pill radiogroup (template mode) when the author gives none. Defaults to "Language". (No show-currency - that is country-only; a show-locale-currency leaf inside a language picker is simply left empty.)
• Required ancestor / context: storesynk-store (consumes storeContext).
• Children: select mode - optionally one <select> (else it creates one). Template mode - a first-child locale-value pill template (its show-locale-name shows the endonym).
• Events: emits sf:language-change (bubbles, composed; detail = { language }).
• State it sets: [ss-empty] (+ hidden) when the active country has ≤1 language; [ss-loading] (+ aria-busy="true" + a disabled <select>, or aria-disabled pills) during a switch; plus the same visually-hidden role="status" announcement.

locale-value

• Purpose: styleable pill container for one country/language in a Markets picker’s template mode. The first one is the clone template; the picker removes it, clones it per entry into its parent container, and marks the active one. A logic-free styleable element - no logic.
• Attributes:
  • value : string - ENGINE-SET (the country/language ISO code). Do not author.
• Required ancestor / context: change-country or change-language (SSK-108).
• Children: optionally show-locale-name and/or (country picker) show-locale-currency.
• Events / state: none of its own; receives value, [ss-active], role="radio", aria-checked, roving tabindex, and (mid-switch) aria-disabled from the picker.

show-locale-name

• Purpose: invisible (display:contents) text holder inside a locale-value; the engine writes the country name (country picker) or language endonym (language picker) into it. A logic-free invisible element. Set deterministically every update.
• Attributes: none.
• Required ancestor / context: locale-value within a picker (SSK-108).
• Events / state: none.

show-locale-currency

• Purpose: invisible (display:contents) text holder inside a locale-value; the engine writes the country’s currency (e.g. "EUR €"). A logic-free invisible element. Country picker only - in a change-language it is written empty.
• Attributes: none.
• Required ancestor / context: locale-value within change-country (SSK-108).
• Events / state: none.

---

---

Imported from the Storesynk skill v0.1.0 (references/component-reference.md). To change this page, change it there.