@microbit/ui 0.1.0-alpha.9 → 0.1.0

package/LICENSE.md

@@ -51,3 +51,11 @@ Chakra UI is used under the MIT License:
 > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 > SOFTWARE.
+
+This package's `lang/ui.<locale>.json` catalogs include translations of a few
+user-interface strings copied from
+[React Spectrum](https://github.com/adobe/react-spectrum) — from react-aria at
+tag `react-aria-components@1.19.0`, and from the Spectrum 2 InlineAlert
+component's catalogs (see the README's "Strings" section for which). React
+Spectrum is copyright Adobe and its contributors, and is used under the Apache
+License, Version 2.0: <https://www.apache.org/licenses/LICENSE-2.0>.

package/README.md

@@ -13,14 +13,15 @@ PostCSS plugin for the CSS).
 
 ## App-side installation
 
-This package's own Storybook (`.storybook/` + `panda.config.ts`) is a
-worked example of the setup below, minus the app/brand presets. Everything
-an app must do:
+The repo's Storybook harness (`apps/storybook`) is a worked example of the
+setup below, minus the app/brand presets. Everything an app must do:
 
 1. **Panda preset stack** (`panda.config.ts`): `@pandacss/preset-base`, then
    the **base preset** (`@microbit/ui/base-preset` — the complete micro:bit
-   design system), then optionally the app's own preset, then optionally a
-   **private brand preset** (Foundation colours, licensed fonts).
+   design system), then optionally `@microbit/ui/dense-preset` (the × 0.88
+   spacing / × 0.9 font-size density the information-dense apps use), then
+   optionally the app's own preset, then optionally a **private brand
+   preset** (Foundation colours, licensed fonts).
 
    Later presets override earlier ones token-by-token — the base recipes and
    semantic tokens reference the brand tokens, which is how a brand swap
@@ -40,7 +41,7 @@ an app must do:
 3. **Resolve `styled-system/*` onto the generated output** for all
    importers, this package's source included — a `styled-system` alias in
    both `tsconfig.json` `paths` and the bundler config (see the
-   `viteFinal` in `.storybook/main.ts`).
+   `viteFinal` in `apps/storybook`'s `.storybook/main.ts`).
 4. **Generate and load the CSS** with Panda's PostCSS plugin. Keep Vite's
    default transformer — do **not** set `css.transformer: "lightningcss"`,
    which disables PostCSS. Add a `postcss.config.cjs`:
@@ -62,16 +63,17 @@ an app must do:
    @import "@microbit/ui/reset.css" layer(reset);
    ```
 
-   The `reset.css` import is **required**: it carries the Chakra-parity
+   The `reset.css` import is **required**: it carries the
    `* { border-color; word-wrap }` defaults, which must sit in the bottom
    layer (the legacy-Safari cascade-layer flattening specificity-boosts
    higher layers above CSS it can't see — runtime-injected styles, other
-   files; playbook gotcha #28). Without it, elements that set a border
+   files). Without it, elements that set a border
    width but no colour render `currentColor` borders.
    The `vendor` layer is for third-party stylesheets: import any vendor CSS
    with `@import "..." layer(vendor)` so it beats the preflight reset but
-   loses to app styling. See `.storybook/{layers.css,preview.tsx,main.ts}` +
-   `postcss.config.cjs` for the worked example.
+   loses to app styling. See `apps/storybook`'s
+   `.storybook/{layers.css,preview.tsx,main.ts}` + `postcss.config.cjs` for
+   the worked example.
 
 5. **react-intl**: an `IntlProvider` above any shared-ui usage. English
    works with no setup (components carry inline `defaultMessage`); for
@@ -82,10 +84,50 @@ node_modules/@microbit/ui/lang/ui.fr.json --ast --out-file ...` (multiple
    input files merge; ids are `ui.`-namespaced so they can't collide). This
    keeps the strings in the app's lazily loaded locale chunks rather than
    an eagerly bundled catalog-of-all-locales.
-6. **`ToastProvider`** once near the root, inside the `IntlProvider`.
-7. Optionally **`SharedUIProvider`** with an overlay-close registrar so the
-   app can dismiss open menus from outside the tree (e.g. the Android
-   hardware back button). Apps without one can omit the provider.
+
+   The `locale` you pass must be the language the app actually renders in,
+   which is not always the user's language setting: apps that list languages
+   only an embedded product (e.g. MakeCode) is translated into fall back to
+   their English catalog for those, and should then pass `en`, keeping the
+   chosen language in their own settings for the embed. Everything downstream
+   reads this locale as a statement about the rendered page — `<html lang>`
+   and `<html dir>` via `SharedUIProvider`, react-aria's text direction and
+   built-in strings, `Intl` number/date formatting and plural rules. A catalog
+   that loads but has per-message gaps (an incomplete translation) is still
+   that language; only a wholesale fallback to the English catalog should
+   claim `en`.
+
+6. **`SharedUIProvider`** inside the `IntlProvider`, wrapping the app. It
+   passes the locale on to react-aria, which translates its own built-in
+   strings (see [Strings](#strings)); without it those follow the browser
+   rather than the app's language setting. It also keeps `<html lang>` and
+   `<html dir>` in step with the locale, so assistive tech announces the page
+   in the app's language and an RTL language lays out the right way round —
+   pass `setDocumentLang={false}` where the app doesn't own the document it's
+   mounted in (an embedded widget). Also takes an optional overlay-close
+   registrar, so the app can dismiss open menus from outside the tree (e.g.
+   the Android hardware back button).
+
+   An app that passes `setDocumentLang={false}` **must set `dir` itself**,
+   on whatever element it mounts into, if it offers an RTL language. The two
+   halves of mirroring read the direction from different places: react-aria
+   takes it from the provider locale in JS and mirrors regardless of the DOM,
+   while logical properties and Panda's `_rtl` rules match on `dir`. With one
+   side mirrored and the other not, components that combine both come apart —
+   `Slider`'s thumb moves to the mirrored end while its filled track stays.
+
+7. **`ToastProvider`** once near the root, inside the two providers above.
+
+## Upgrading in an app
+
+After bumping the `@microbit/ui` version:
+
+1. `npm install` — the apps' postinstall runs `panda codegen`, but incremental
+   codegen does not detect external preset changes, so regenerate clean:
+   `rm -rf styled-system && npm run panda`.
+2. `npm run i18n:compile` — recompiles the app's per-locale catalogs so new
+   and retranslated `ui.*` strings ship (otherwise they fall back to English,
+   or stay missing).
 
 ## Legacy browser support (Safari < 15) — temporary
 
@@ -145,6 +187,18 @@ To drop it all: raise `BUILD_TARGETS`/`browserslist` past the affected
 browsers, then remove the two PostCSS plugins (and this package's
 `postcss-legacy-safari` export).
 
+RTL is fine at this floor, with one thing to know. Panda's `_rtl` condition
+emits `:where([dir=rtl], :dir(rtl))`, and `:dir()` is Safari 16.4. At the
+pinned targets lightningcss rewrites that arm into a `:lang()` list, leaving
+the `[dir=rtl]` arm — which is the one `SharedUIProvider` sets — intact. So
+the legacy build matches on `dir` as intended, and additionally on
+`lang="ar"` and friends, which modern builds don't. Everything else the
+mirroring uses (logical longhands, `text-align: start`, custom properties in
+`calc()`) passes through untouched; only logical _shorthands_ need the shim,
+as before. `:where()` contributes no specificity, so the RTL rules win on
+source order — de-layering preserves it, since it pads later layers rather
+than reordering within one.
+
 ## The CSS-variable contract
 
 Panda emits every token as a CSS custom property with its default naming —
@@ -162,16 +216,59 @@ keep them stable:
 - Brand/app presets may change token _values_, never token _names_.
 
 Semantic tokens (`languageText`, `statusBarBg`, `danger.*`, `toast*Bg`,
-`controlCheckedBg`, `focusBorder`, …) are the extension points brand presets
-override; they resolve through var indirection, so overrides apply wherever
-the token is consumed.
+`button.*`, `controlCheckedBg`, `focusBorder`, …) are the extension points
+brand presets override; they resolve through var indirection, so overrides
+apply wherever the token is consumed.
+
+`focusRing` and `focusBorder` need more care: their values are condition
+objects and a merge replaces a value wholesale, so the flat form drops the
+on-dark flip below. Keep the shape:
+
+```ts
+focusBorder: { value: { base: "{colors.brand.700}", _onDark: "{colors.white}" } };
+```
+
+## Dark surfaces
+
+Focus indicators are surface-aware through one tag. The default focus ring
+is ink; on a dark surface it must be white, so tag the surface element by
+spreading the exported constant:
+
+```tsx
+import { darkSurface } from "@microbit/ui";
+
+<header {...darkSurface}>…</header>; // a black toolbar, a coloured sidebar bar
+```
+
+Custom properties inherit, so tagging the bar covers the bar itself and
+every control inside it — including ones added later. If the tagged element
+is focusable, tag one level in instead: its own ring is drawn _outside_ it,
+on whatever is behind it. (The Toast does this — the card is dark and
+focusable, so the tag sits on its close button.) Portalled overlays (a
+modal opened from a dark toolbar) escape the tag with the DOM, which is
+correct. Under the hood it is `data-surface="dark"`, which the preset's
+`onDark` condition scopes the `focusRing`/`focusBorder` token flips to.
+
+Two rules:
+
+- **Dark surfaces must tag** — the ink ring is near-invisible on them, and
+  there is no automatic detection.
+- **Tag surfaces, not themes**: "dark" describes the surface's own
+  luminance, so tag surfaces that are dark by design (a black toolbar, a
+  coloured sidebar bar) rather than anything relative to the app's overall
+  look. This is what will let the tag survive a dark mode if we ship one:
+  designed-dark surfaces stay dark and keep their tags; everything else
+  stays untagged, and a dark mode would flip the untagged defaults via
+  token conditions, never via markup.
+
+Rule of thumb for coloured bars: tag when the surface lacks 3:1 contrast
+against ink — roughly, darker than the grey ramp's 500.
 
 ## Runtime token lookups
 
 For values that feed _computation_ rather than stylesheets (canvas painting,
-colour math, inline `style` for data-driven values — see gotcha #9 in the
-repo's [migration playbook](../../docs/migration-playbook.md)), import the
-runtime lookup:
+colour math, inline `style` for data-driven values that Panda's static
+extraction can't see), import the runtime lookup:
 
 ```ts
 import { token } from "@microbit/ui"; // re-exports styled-system/tokens
@@ -205,6 +302,60 @@ Crowdin ZIP>` (config-driven over packages in
 `bin/update-translations.cjs`), after which you run `npm run i18n:tidy`
 from the root.
 
+`bin/i18n-packages.cjs` lists every locale a consuming app ships, so a string
+translated for one app is in place for the next. `i18n:tidy` backfills anything
+missing from English, so an untranslated string renders English rather than
+blank.
+
+Until this package's Crowdin project is wired up, the non-English catalogs are
+pre-Crowdin seeds — some strings AI-drafted, all of them for Crowdin to review
+— credited as follows. Translations of the same strings elsewhere in the
+micro:bit translation programme: ml-trainer, python-editor-v3 and classroom,
+and MakeCode's editor strings, which are not in the pxt repo but can be fetched
+per locale from
+`https://makecode.microbit.org/api/translations?lang=<locale>&filename=strings.json&approved=true`.
+The `ui.toast-status-*` words come from Spectrum 2's InlineAlert catalogs
+(`@react-spectrum/s2/intl/*.json`, keys `inlinealert.informative` / `notice` /
+`negative` / `positive`), under the same licence and notice as the react-aria
+seed below.
+
+### react-aria's own strings
+
+Separately from all of the above, react-aria has built-in strings of its own
+and translates them from catalogs it bundles, nothing to do with react-intl.
+`SharedUIProvider` hands it the app's locale so the two agree. It bundles 34
+locales; of ours, ca, cy, ga-IE, lo and vi (and the `lol` pseudo-locale) are not
+among them and fall back to English, and there is no supported way to teach it
+more (the rest resolve, including where our id is less specific than
+react-aria's — `fr` finds its fr-FR).
+
+Where react-aria lets a prop replace one of those strings, the component
+passes our own react-intl message instead, so the string rides `lang/` and
+Crowdin like everything else and the missing locales can catch up:
+
+- `ui.numberfield-increase` / `ui.numberfield-decrease` — NumberField's
+  stepper button labels
+- `ui.toast-region` — the toast region's landmark label (counts the visible
+  toasts, as react-aria's does)
+- `ui.combobox-trigger` / `ui.combobox-listbox` — the button that opens a
+  ComboBox and its popup list
+- `ui.select-placeholder` — Select's placeholder when the caller passes none
+- `ui.select-row-action` — the name of a `slot="selection"` checkbox in a
+  GridList row, read together with the row's content. (A future Table's
+  select-all header checkbox shares the slot name and will need its own
+  message.)
+
+Their non-English translations were pre-seeded from react-aria's own catalogs
+([adobe/react-spectrum](https://github.com/adobe/react-spectrum) at tag
+`react-aria-components@1.19.0`, Apache 2.0 — see the notice in
+[LICENSE.md](LICENSE.md)) for the locales both sides cover; the five above had
+no such source. That provenance is recorded here rather than in `lang/` because
+Crowdin roundtrips rewrite those files.
+
+What react-aria does not expose as a prop — live announcements ("2 items
+selected"), its hidden dismiss buttons — still comes from its bundled catalogs
+and falls back to English in the locales above.
+
 ## Chakra UI heritage and license
 
 This package's design language began as a faithful port of

package/lang/ui.ar.json

@@ -0,0 +1,62 @@
+{
+  "ui.breadcrumb": {
+    "defaultMessage": "مسار التنقل",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
+  "ui.close-action": {
+    "defaultMessage": "إغلاق",
+    "description": "Close button text or label"
+  },
+  "ui.combobox-listbox": {
+    "defaultMessage": "مقترحات",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "عرض المقترحات",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "جاري التحميل",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "يفتح في علامة تبويب جديدة",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "خفض {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "زيادة {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "حدد عنصرًا",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "تحديد",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, zero {لا إشعارات} one {إشعار واحد} two {إشعاران} few {# إشعارات} many {# إشعارًا} other {# إشعار}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
+  "ui.toast-status-error": {
+    "defaultMessage": "خطأ",
+    "description": "Announced by screen readers before an error notification"
+  },
+  "ui.toast-status-info": {
+    "defaultMessage": "معلومات",
+    "description": "Announced by screen readers before an informational notification"
+  },
+  "ui.toast-status-success": {
+    "defaultMessage": "تم بنجاح",
+    "description": "Announced by screen readers before a success notification"
+  },
+  "ui.toast-status-warning": {
+    "defaultMessage": "تحذير",
+    "description": "Announced by screen readers before a warning notification"
+  }
+}

package/lang/ui.ca.json

@@ -1,22 +1,62 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Rastres de navegació",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Tanca ",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Suggeriments",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Mostra els suggeriments",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "S'està carregant",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "Decrementa {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "Incrementa {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Selecciona un element",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Selecciona",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# notificació} other {# notificacions}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
     "defaultMessage": "Error",
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "Informació",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Success",
+    "defaultMessage": "Completat amb èxit",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {
-    "defaultMessage": "Warning",
+    "defaultMessage": "Advertència",
     "description": "Announced by screen readers before a warning notification"
   }
 }

package/lang/ui.cy.json

@@ -0,0 +1,62 @@
+{
+  "ui.breadcrumb": {
+    "defaultMessage": "Briwsionyn Bara",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
+  "ui.close-action": {
+    "defaultMessage": "Cau",
+    "description": "Close button text or label"
+  },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Suggestions",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Show suggestions",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Wrthi'n Llwytho",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "Decrease {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "Increase {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Select an item",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Dewis",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# notification} other {# notifications}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
+  "ui.toast-status-error": {
+    "defaultMessage": "Gwall",
+    "description": "Announced by screen readers before an error notification"
+  },
+  "ui.toast-status-info": {
+    "defaultMessage": "Information",
+    "description": "Announced by screen readers before an informational notification"
+  },
+  "ui.toast-status-success": {
+    "defaultMessage": "Llwyddiant",
+    "description": "Announced by screen readers before a success notification"
+  },
+  "ui.toast-status-warning": {
+    "defaultMessage": "Rhybudd",
+    "description": "Announced by screen readers before a warning notification"
+  }
+}

package/lang/ui.de.json

@@ -1,22 +1,62 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Navigationspfad",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Schließen",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Empfehlungen",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Empfehlungen anzeigen",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Laden",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "{fieldLabel} verringern",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "{fieldLabel} erhöhen",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Element wählen",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Auswählen",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# Benachrichtigung} other {# Benachrichtigungen}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
-    "defaultMessage": "Error",
+    "defaultMessage": "Fehler",
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "Informationen",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Success",
+    "defaultMessage": "Erfolg",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {
-    "defaultMessage": "Warning",
+    "defaultMessage": "Warnung",
     "description": "Announced by screen readers before a warning notification"
   }
 }

package/lang/ui.en-us.json

@@ -1,8 +1,48 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Breadcrumb",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Close",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Suggestions",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Show suggestions",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Loading",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "Decrease {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "Increase {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Select an item",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Select",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# notification} other {# notifications}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
     "defaultMessage": "Error",
     "description": "Announced by screen readers before an error notification"

package/lang/ui.en.json

@@ -1,8 +1,48 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Breadcrumb",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Close",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Suggestions",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Show suggestions",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Loading",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "Decrease {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "Increase {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Select an item",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Select",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# notification} other {# notifications}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
     "defaultMessage": "Error",
     "description": "Announced by screen readers before an error notification"