@codecavepro/brand 3.2.7 → 3.4.0

package/README.md

@@ -45,7 +45,7 @@ redesign turns into a find-and-replace across your codebase.
 
 ### Already have your own base styles? Import the values only
 
-`@codecavepro/brand/css` is the design system **whole**: the tokens, ten `@font-face`
+`@codecavepro/brand/css` is the design system **whole**: the tokens, eleven `@font-face`
 rules, base rules for `html`, `body`, `h1`–`h6` and `a`, two layout primitives and
 around sixty component classes. That is what you want for a page that should look like
 CODECAVE. It is _not_ what you want in an app that already has a base layer — dropping
@@ -60,8 +60,8 @@ else:
 
 Same 103 properties on `:root`, same values, zero rules. Nothing it declares can change
 how a single existing element renders — a `var()` only takes effect where you write
-one. Fonts come with it only as a _name_: `--font-sans` says Satoshi, and declaring the
-faces stays your call (see below).
+one. Fonts come with it only as a _name_: `--font-sans` says Satoshi, then Manrope for
+the Cyrillic Satoshi lacks, and declaring the faces stays your call (see below).
 
 Use it to end a duplicated palette without signing up for a redesign in the same commit.
 
@@ -78,8 +78,8 @@ file at that URL are provably the same bytes.
 
 ## Fonts: this package ships none
 
-`@codecavepro/brand/css` declares ten `@font-face` rules for **Satoshi**, but **no font
-binaries are included** — that is a licensing question, not an oversight. Until you
+`@codecavepro/brand/css` declares eleven `@font-face` rules, ten for **Satoshi** and one
+for **Manrope**, but **no font binaries are included** — that is a licensing question, not an oversight. Until you
 supply the files, the faces 404 and the browser falls back down the stack
 (`-apple-system`, `Segoe UI`, Roboto, …). Tokens, colours and the type _scale_ are all
 correct regardless; only the typeface is missing.
@@ -87,14 +87,15 @@ correct regardless; only the typeface is missing.
 The two stylesheets expect the files in **different places**, because one is meant to be
 dropped into a project on its own:
 
-| Import                          | `@font-face` URLs             | Put the `.woff2`/`.woff` files at              |
-| ------------------------------- | ----------------------------- | ---------------------------------------------- |
-| `@codecavepro/brand/css`        | `./fonts/Satoshi-*.woff2`     | a `fonts/` directory **beside** the stylesheet |
-| `@codecavepro/brand/fonts.css`  | `./Satoshi-*.woff2`           | **beside** the stylesheet itself               |
-| `@codecavepro/brand/tokens.css` | _none — it declares no faces_ | wherever your own `@font-face` rules point     |
+| Import                          | `@font-face` URLs                                          | Put the `.woff2`/`.woff` files at              |
+| ------------------------------- | ---------------------------------------------------------- | ---------------------------------------------- |
+| `@codecavepro/brand/css`        | `./fonts/Satoshi-*.woff2`, `./fonts/Manrope-Cyrillic.woff2` | a `fonts/` directory **beside** the stylesheet |
+| `@codecavepro/brand/fonts.css`  | `./Satoshi-*.woff2`, `./Manrope-Cyrillic.woff2`             | **beside** the stylesheet itself               |
+| `@codecavepro/brand/tokens.css` | _none — it declares no faces_                              | wherever your own `@font-face` rules point     |
 
 Get the cuts from [Fontshare](https://www.fontshare.com/fonts/satoshi) — 300, 400, 500,
-700 and 900, each upright and italic, which is the ten faces these stylesheets declare.
+700 and 900, each upright and italic, which is the ten Satoshi faces these stylesheets
+declare.
 Bind each with a real `font-weight` descriptor rather than letting the browser
 synthesize; the design system documents why in
 [DESIGN.md §10.3](https://github.com/CodeCavePro/brand/blob/development/DESIGN.md#103-synthesized-vs-real-font-weights).
@@ -105,6 +106,14 @@ collide into two slots and whichever is declared last silently wins — your `90
 renders Bold, or your `700` renders Black, with nothing to indicate which. Take the
 binaries from that download and the declarations from here.
 
+**Satoshi has no Cyrillic, so Manrope sets it.** `--font-sans` names Manrope second, and
+its one face covers only the Cyrillic block, so Satoshi keeps every Latin letter, digit
+and punctuation mark, and a page with no Cyrillic never downloads the file. It is Google
+Fonts' Cyrillic subset of the variable font, weights 300 to 800, in
+[`src/styles/fonts/`](https://github.com/CodeCavePro/brand/tree/development/src/styles/fonts)
+as `Manrope-Cyrillic.woff2`. Manrope is under the SIL Open Font License, so ship
+`Manrope-OFL.txt` from the same folder beside it.
+
 ## The typed module
 
 For consumers that cannot read a stylesheet — design tooling, canvas/WebGL renderers,

package/dist/colors_and_type.css

@@ -19,11 +19,12 @@
 /* ---------------------------------------------------------------------------
  * Font faces
  *
- * The ten faces are bound to explicit numeric weights in both styles. The
- * vendor's own stylesheet.css declares Bold and Black as the same
+ * The ten Satoshi faces are bound to explicit numeric weights in both styles.
+ * The vendor's own stylesheet.css declares Bold and Black as the same
  * `font-weight: bold`, and their italics likewise, so four cuts collide into
  * two slots there and the last one declared silently wins. That is the defect
  * these declarations exist to avoid; do not replace them with the vendor file.
+ * An eleventh face, Manrope, follows them and sets the Cyrillic Satoshi lacks.
  * ------------------------------------------------------------------------ */
 
 @font-face {
@@ -116,6 +117,40 @@
   font-display: swap;
 }
 
+/* ---------------------------------------------------------------------------
+ * Cyrillic: Manrope
+ *
+ * Satoshi has no Cyrillic, in these files or in Fontshare's current release,
+ * whose own page lists 135 languages, all written in Latin letters. Russian
+ * text used to fall through to the system fonts. Manrope sets it now:
+ * --font-sans names it second, so Satoshi keeps every Latin letter, digit and
+ * punctuation mark, and Manrope draws only the Cyrillic that Satoshi lacks.
+ *
+ * It is a family of its own, not more faces under the name Satoshi, because
+ * of emphasis. Font matching narrows a family to its italic faces for <em>
+ * before it reads unicode-range, so a Cyrillic face inside Satoshi would
+ * either never match emphasised text or match it upright. A separate family
+ * with one upright face is slanted by the browser instead.
+ *
+ * One variable file covers weights 300 to 800, and a 900 request gets 800.
+ * It is Google Fonts' Cyrillic subset under the SIL Open Font License
+ * (fonts/Manrope-OFL.txt), and the unicode-range is the subset's own, so a
+ * page without Cyrillic never downloads it.
+ *
+ * size-adjust: both faces draw capitals 72 units tall at 100px, but Manrope's
+ * small letters stand 54 to Satoshi's 49 and it sets about 8% wider. At 95%
+ * the two are within about 5% on each of those measures.
+ * ------------------------------------------------------------------------ */
+@font-face {
+  font-family: Manrope;
+  src: url("./fonts/Manrope-Cyrillic.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-display: swap;
+  size-adjust: 95%;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
 :root {
   /* =========================================================================
    * RAW RAMPS — verbatim from global.css :root after the 2026 palette
@@ -210,11 +245,12 @@
 
   /* =========================================================================
    * TYPOGRAPHY
-   * One family. Named heading sizes come from the production @theme block;
-   * the remaining steps are measured from the live site.
+   * One family, and Manrope for the Cyrillic it lacks (see "Cyrillic" above).
+   * Named heading sizes come from the production @theme block; the remaining
+   * steps are measured from the live site.
    * ====================================================================== */
-  --font-sans: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
+  --font-sans: Satoshi, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI",
+               Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                "Liberation Mono", "Courier New", monospace;
 

package/dist/fonts.css

@@ -8,13 +8,19 @@
  * The vendor's own stylesheet.css cannot be used: it declares Bold and Black
  * BOTH as `font-weight: bold`, and their italics likewise, so four cuts
  * collide into two slots and whichever is declared last silently wins. The
- * ten faces below bind 300/400/500/700/900 in each style explicitly, which is
- * the whole point of shipping real cuts rather than letting a browser
- * synthesize them.
+ * ten Satoshi faces below bind 300/400/500/700/900 in each style explicitly,
+ * which is the whole point of shipping real cuts rather than letting a
+ * browser synthesize them.
+ *
+ * CYRILLIC
+ * Satoshi has none. The eleventh face, Manrope, sets it: --font-sans names it
+ * second, and its unicode-range limits it to the Cyrillic block. Why it is a
+ * family of its own and why it is 95% size is in colors_and_type.css.
  *
  * The binaries are not in the npm package -- see the note in
  * packages/brand/scripts/build.mjs -- so a consumer supplies the files and
- * these ten declarations tell it what to supply.
+ * these eleven declarations tell it what to supply. Manrope-OFL.txt is the
+ * licence that travels with Manrope-Cyrillic.woff2.
  */
 
 @font-face {
@@ -106,3 +112,13 @@
   font-style: italic;
   font-display: swap;
 }
+
+@font-face {
+  font-family: Manrope;
+  src: url("./Manrope-Cyrillic.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-display: swap;
+  size-adjust: 95%;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}

package/dist/src/common/ArticlePreview.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formattedDate } from "../helpers/date-formatter.ts";
+import { formatMessage, useBrandMessages } from "../lib/i18n/messages.ts";
 
 /* The fields this component actually reads, instead of the generated Strapi
  * `Article`. TypeScript is structural, so a real Article still satisfies this
@@ -28,6 +29,7 @@ const props = defineProps<{
 }>()
 
 const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
+const messages = useBrandMessages()
 </script>
 
 <template>
@@ -54,7 +56,7 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
         {{ article.excerpt }}
       </p>
       <p class="text-xs sm:text-sm text-body-secondary mt-6 sm:mt-7">
-        Reading time: {{ article.readingtime }} m.
+        {{ formatMessage(messages.articlePreview.readingTime, { minutes: String(article.readingtime ?? '') }) }}
       </p>
     </div>
   </a>

package/dist/src/common/BrandNav.vue

@@ -32,6 +32,8 @@
  * the stylesheet. Standing on tokens instead means this bar renders the same in
  * both, and a consumer needs no global class layer to install it.
  */
+import { useBrandMessages } from '../lib/i18n/messages.ts';
+
 export interface NavItem {
   /** Link text, and the value `current` is matched against. */
   name: string;
@@ -71,10 +73,12 @@ withDefaults(defineProps<{
   logoHref: "/",
   logoAlt: "CODECAVE",
 });
+
+const messages = useBrandMessages();
 </script>
 
 <template>
-  <nav class="brand-nav" aria-label="Main">
+  <nav class="brand-nav" :aria-label="messages.brandNav.label">
     <div class="brand-nav-inner">
       <ul>
         <li v-for="item in left" :key="item.name" :class="{ dropdown: item.slot, badged: item.badge }">

package/dist/src/common/GlowButton.vue

@@ -99,9 +99,9 @@ onMounted(() => {
       @mousemove="handleMouseMove"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
-      class="cursor-pointer flex items-center justify-center relative z-[1] overflow-hidden w-full h-12 px-6 py-1 rounded-full bg-glow-25"
+      class="cursor-pointer flex items-center justify-center relative z-[1] overflow-hidden w-full min-h-12 px-6 py-1 rounded-full bg-glow-25"
     >
-      <p class="relative z-[2] text-primary-800 font-bold select-none">
+      <p class="relative z-[2] text-center text-primary-800 font-bold select-none">
         {{ title }}
       </p>
 

package/dist/src/common/InputText.vue

@@ -18,27 +18,35 @@ defineEmits(['update:modelValue'])
 
 <template>
   <div class="w-full relative">
-    <label :for="id" class="absolute flex items-center gap-0.5 pl-3 pt-3 font-bold text-heading text-sm">
-      <span>{{ label }}</span>
-      <AsteriskIcon v-if="isRequired" />
-    </label>
+    <!-- The box is this wrapper rather than the input, and the label sits in
+         the flow above the input rather than floating over its top padding, as
+         TextField's does: a label that wraps, as a translated one in half a
+         form's width does, now pushes the input down instead of covering what
+         was typed. -mb-1 keeps a one-line field 66px high with its text where
+         it was. -->
+    <div :class="`input-box flex flex-col bg-surface-secondary rounded-lg border border-surface-tertiary
+      hover:bg-surface-tertiary transition-colors ${isError ? 'input-error' : ''}`">
+      <label :for="id" class="flex items-center gap-0.5 px-3 pt-3 -mb-1 font-bold text-heading text-sm">
+        <span>{{ label }}</span>
+        <AsteriskIcon v-if="isRequired" />
+      </label>
 
-    <input
-      :id="id"
-      :type="type"
-      :autocomplete="autocomplete"
-      :placeholder="placeholder"
-      :required="isRequired"
-      :value="modelValue"
-      :aria-invalid="isError ? 'true' : undefined"
-      :aria-describedby="isError ? `${id}-error` : undefined"
-      :class="`
-        w-full p-3 pt-7 bg-surface-secondary rounded-lg placeholder:text-xs placeholder:text-body-secondary
-        focus:outline-none transition-colors border border-surface-tertiary
-        hover:bg-surface-tertiary
-        ${isError ? 'text-error input-error focus:text-error' : 'text-hovered focus:text-hovered'}
-       `" />
-    <span v-if="isError" class="text-error text-xs">
+      <input
+        :id="id"
+        :type="type"
+        :autocomplete="autocomplete"
+        :placeholder="placeholder"
+        :required="isRequired"
+        :value="modelValue"
+        :aria-invalid="isError ? 'true' : undefined"
+        :aria-describedby="isError ? `${id}-error` : undefined"
+        :class="`
+          w-full px-3 pb-3 bg-transparent rounded-b-lg placeholder:text-xs placeholder:text-body-secondary
+          focus:outline-none
+          ${isError ? 'text-error focus:text-error' : 'text-hovered focus:text-hovered'}
+         `" />
+    </div>
+    <span v-if="isError" :id="`${id}-error`" class="text-error text-xs">
       {{ errorMessage }}
     </span>
   </div>
@@ -54,13 +62,19 @@ input:-webkit-autofill:active {
   -webkit-background-clip: text !important;
 }
 
-input:focus {
+/* The autofill colour above paints the input alone, so the label's strip of the
+ * box takes the same colour. */
+.input-box:has(input:-webkit-autofill) {
+  background-color: var(--color-surface-tertiary);
+}
+
+.input-box:focus-within {
   box-shadow: 0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
     0 0 4px 0 hsl(from var(--color-brand-500) h s l / 0.6);
 }
 
-input.input-error:focus,
-.input-error {
+.input-error,
+.input-error:focus-within {
   box-shadow: 0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
     0 0 4px 0 hsl(from var(--color-error-100) h s l / 0.6);
 }

package/dist/src/common/Review.vue

@@ -3,6 +3,7 @@ import LinkedinIcon from "../assets/icons/linkedin-icon.vue";
 import VerifiedIcon from "../assets/icons/verified-icon.vue";
 import LazyImage from "./images/LazyImage.vue"
 import { isCorrectLinkedInFormat } from "../helpers/form-validator.ts";
+import { formatMessage, useBrandMessages } from "../lib/i18n/messages.ts";
 
 /* See ArticlePreview.vue: the fields read here, not the generated Strapi
  * `Testimonial`, which a caller may still pass unchanged. */
@@ -23,6 +24,7 @@ const props = defineProps<{
 }>()
 
 const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
+const messages = useBrandMessages()
 </script>
 
 <template>
@@ -39,6 +41,7 @@ const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
               target="_blank"
               rel='noopener noreferrer'
               class="text-default-transparent hover:text-action transition-colors"
+              :aria-label="formatMessage(messages.review.linkedin, { name: item.name })"
               :href="item.linkedinurl">
             <component
                 :is="LinkedinIcon"

package/dist/src/common/SubNavbar.vue

@@ -2,6 +2,7 @@
 import { computed, ref, onMounted, nextTick } from 'vue';
 import Shevron from '../assets/icons/shevron.vue';
 import { type MenuItem } from '../lib/menus/menuTypes.ts';
+import { useBrandMessages } from '../lib/i18n/messages.ts';
 
 interface Props {
   section?: string;
@@ -10,6 +11,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const messages = useBrandMessages();
 
 const openItem = ref<string | null>(null);
 
@@ -102,7 +104,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <nav v-if="items.length" class="ds-subnav" aria-label="Section">
+  <nav v-if="items.length" class="ds-subnav" :aria-label="messages.subNavbar.label">
     <div class="ds-subnav-inner" :class="{ 'is-submenu-open': openItem }">
       <ul>
         <li v-for="item in items" :key="item.name" :ref="el => setItemRef(item.name, el)">

package/dist/src/common/forms/ContactUsForm.vue

@@ -15,6 +15,7 @@ import type {
   ICrmFormClient,
 } from "../../lib/crm/types";
 import { isCorrectEmailFormat, isCorrectLinkedInFormat } from "../../helpers/form-validator.ts";
+import { formatMessage, useBrandMessages } from "../../lib/i18n/messages.ts";
 
 /* This component knows nothing about HubSpot, or about any other CRM. It is
  * handed the labels to render and something that can accept a submission; who
@@ -24,6 +25,8 @@ const props = defineProps<{
   client: ICrmFormClient
 }>()
 
+const messages = useBrandMessages()
+
 const emit = defineEmits<{
   (e: 'submit', values: ContactFormValues): void
   (e: 'submitted', result: CrmSubmitResult): void
@@ -86,15 +89,15 @@ const validateForm = () => {
   let linkedInPage = formData.value.linkedinCompanyPage;
 
   if (email.value !== '' && !isCorrectEmailFormat(email.value)) {
-    email.error = 'Please enter valid email'
+    email.error = messages.contactForm.invalidEmail
     isValid = false
   }
   if (linkedInPage.value !== '' && !isCorrectLinkedInFormat(linkedInPage.value)) {
-    linkedInPage.error = 'Please enter valid LinkedIn page link'
+    linkedInPage.error = messages.contactForm.invalidLinkedIn
     isValid = false
   }
   if (description.maxLength !== undefined && description.value.length > description.maxLength) {
-    description.error = `You faced characters limits. Max length is ${description.maxLength}`
+    description.error = formatMessage(messages.contactForm.tooLong, { max: description.maxLength })
     isValid = false
   }
 
@@ -110,7 +113,7 @@ const validateRequiredFields = () => {
     const isEmpty = field.value === '' || field.value === false
 
     if (field.required && isEmpty) {
-      field.error = 'This field is required'
+      field.error = messages.contactForm.required
       isValid = false
     } else {
       field.error = ''
@@ -177,8 +180,8 @@ const alertKind = ref<'success' | 'error' | null>(null)
 const isAlertVisible = computed(() => alertKind.value !== null)
 
 const ALERT_TEXT = {
-  success: 'Sent! We will contact you within next 1-3 business days.',
-  error: 'We could not send your request. Please try again, or email us at hello@codecave.pro.',
+  success: messages.contactForm.sent,
+  error: messages.contactForm.notSent,
 } as const
 
 const showAlert = (kind: 'success' | 'error') => {
@@ -205,7 +208,7 @@ const validateField = (field) => {
   }
 
   if (field.required && !field.value) {
-    field.error = 'This field is required'
+    field.error = messages.contactForm.required
     return
   }
 
@@ -233,8 +236,14 @@ fields.forEach((key) => {
   )
 })
 
-const companyNamePattern = /[^\p{L}\p{N} &]/u;
-const namePattern = /[^\p{L} ]/u;
+/* What each field refuses as it is typed. A letter includes its combining
+ * marks (\p{M}), and a name keeps its hyphen, apostrophe and period, so
+ * "Anne-Marie O'Neil Jr." survives. A company name also keeps the punctuation
+ * legal names are written with: the quotes of ООО «Ромашка», and commas,
+ * parentheses, slashes and plus signs. Both used to allow letters and spaces
+ * alone. */
+const companyNamePattern = /[^\p{L}\p{M}\p{N} &.,'’"«»„“”()+\/!-]/u;
+const namePattern = /[^\p{L}\p{M} .'’-]/u;
 
 const createSanitizer = (pattern) => {
   return (value) => value.replace(pattern, '');
@@ -279,7 +288,7 @@ const preventInvalidInput = (event, pattern) => {
         <Checkbox id="promotions" v-model="formData.communicationConsent.value" :label="formData.communicationConsent.label" :isRequired="formData.communicationConsent.required" :isError="!!formData.communicationConsent.error" />
       </div>
     </div>
-    <GlowButton @click="submitContactsForm" title="Leave consultation request" class="self-center lg:self-start" />
+    <GlowButton @click="submitContactsForm" :title="messages.contactForm.submit" class="self-center lg:self-start" />
   </form>
   <div v-show="isAlertVisible" class="border border-action group absolute bottom-19.25 md:fixed z-350 left-1/2 -translate-x-1/2 md:top-40 form-alert flex gap-2 md:gap-8 items-center justify-between w-full h-fit max-w-139 bg-surface-secondary p-4 md:px-6 md:py-2.5 rounded-3xl">
     <div v-if="alertKind === 'success'" class="w-8 h-8">
@@ -288,7 +297,7 @@ const preventInvalidInput = (event, pattern) => {
     <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm ">
       {{ alertKind ? ALERT_TEXT[alertKind] : '' }}
     </p>
-    <button @click="alertKind = null" class="group-hover:text-action text-heading transition-colors cursor-pointer">
+    <button @click="alertKind = null" :aria-label="messages.contactForm.closeAlert" class="group-hover:text-action text-heading transition-colors cursor-pointer">
       <component :is="CloseIcon" />
     </button>
   </div>

package/dist/src/common/technology-card.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Button from "./Button.vue";
 import { computed } from 'vue'
+import { useBrandMessages } from '../lib/i18n/messages.ts'
 
 const props = defineProps<{
   active: boolean
@@ -10,6 +11,8 @@ const props = defineProps<{
   index?: number
 }>()
 
+const messages = useBrandMessages()
+
 const rotate = [
   '-rotate-4 left-2 top-10',
   '-rotate-1 left-1/4 top-20',
@@ -46,10 +49,10 @@ const cardClass = computed(() => [
 <template>
   <div :class="cardClass">
     <div class="card flex flex-col items-center justify-around">
-      <h3 class="max-w-[8rem] text-center text-xl font-bold text-heading text-balance">
+      <h3 class="w-min min-w-[8rem] max-w-full text-center text-xl font-bold text-heading text-balance">
         {{ name }}
       </h3>
-      <Button as="link" :href="href ?? ''" title="Explore service" variant="tertiary" :class="`${active ? 'block' : 'hidden xl:block xl:opacity-0'}`" />
+      <Button as="link" :href="href ?? ''" :title="messages.technologyCard.explore" variant="tertiary" :class="`${active ? 'block' : 'hidden xl:block xl:opacity-0'}`" />
     </div>
   </div>
 </template>

package/dist/src/footer/link-group.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Button from "../common/Button.vue";
+import { useId } from "vue";
 
 /* Declared here rather than imported from ./links.ts, which is this site's
  * footer content. TypeScript is structural, so every existing caller still
@@ -15,11 +16,17 @@ defineProps<{
   groupName: string
   items: LinkItem[]
 }>()
+
+/* The heading's id, generated rather than built from groupName: a group name
+ * is display text, and "Отзывы о нас" has spaces, which an id cannot hold, so
+ * aria-labelledby named nothing. Astro gives each rendered Vue app its own
+ * idPrefix, so two groups on one page never collide. */
+const labelId = useId()
 </script>
 
 <template>
-  <nav :aria-labelledby="`${groupName}-label`" class="space-y-4">
-    <p :id="`${groupName}-label`" class="text-body-secondary uppercase font-bold text-xs" >
+  <nav :aria-labelledby="labelId" class="space-y-4">
+    <p :id="labelId" class="text-body-secondary uppercase font-bold text-xs" >
       {{ groupName }}
     </p>
     <ul class="space-y-3 xl:space-y-2 text-sm">

package/dist/src/header/mobile-menu.vue

@@ -4,6 +4,7 @@ import Shevron from "../assets/icons/shevron.vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 import BackIcon from "../assets/icons/back-icon.vue";
 import ServicesList from "./services-list.vue";
+import { useBrandMessages } from "../lib/i18n/messages.ts";
 
 /* Everything this drawer used to read out of menu.ts, paths.ts and the site's
  * logo asset now arrives as props, so it reaches no route table and no asset
@@ -26,6 +27,8 @@ const props = defineProps<{
   homeHref?: string
 }>()
 
+const messages = useBrandMessages()
+
 const servicesItem = computed(() => props.items.find((i) => i.submenu?.length))
 
 const isMenuOpen = ref(false)
@@ -81,7 +84,7 @@ const handleCloseMenu = () => {
           <a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
             <img :src="logo" alt="CODECAVE" />
           </a>
-          <button @click="isMenuOpen = !isMenuOpen" :class="`burger-menu ${isMenuOpen ? 'text-action' : 'text-heading'} transition-colors`">
+          <button @click="isMenuOpen = !isMenuOpen" :aria-label="messages.mobileMenu.toggle" :aria-expanded="isMenuOpen" :class="`burger-menu ${isMenuOpen ? 'text-action' : 'text-heading'} transition-colors`">
             <span></span>
           </button>
         </div>
@@ -94,7 +97,7 @@ const handleCloseMenu = () => {
               <slot name="services" />
             </div>
 
-            <button class="pt-4 shrink-0" @click="isServicesOpen = false">
+            <button class="pt-4 shrink-0" :aria-label="messages.mobileMenu.back" @click="isServicesOpen = false">
               <component :is="BackIcon" class="w-11 h-11 text-action" />
             </button>
           </div>

package/dist/src/lib/i18n/messages.ts

@@ -0,0 +1,129 @@
+/* The text brand components render that no caller passes in: validation
+ * errors, button titles, landmark names and the names of icon-only controls.
+ *
+ * English is built in, so a consumer that provides nothing renders what these
+ * components always rendered. A site in another language hands its translation
+ * to provideBrandMessages() once, from its Vue app entrypoint, instead of
+ * threading one prop per string through every call site.
+ *
+ * WHY THE APP ENTRYPOINT AND NOT A PARENT COMPONENT. Astro renders every island,
+ * and every component it renders without a client directive, as a separate Vue
+ * app, so a provide() in one component reaches nothing in the next. The app
+ * entrypoint is the one place each of those apps passes through, on the server
+ * and in the browser alike:
+ *
+ *   // astro.config.mjs
+ *   vue({ appEntrypoint: '/src/pages/_app' })
+ *
+ *   // src/pages/_app.ts
+ *   export default (app: App) => provideBrandMessages(app, russian)
+ *
+ * A {name} in a string is filled by formatMessage(). A translation keeps every
+ * placeholder and puts it wherever its grammar needs. */
+import { inject, type App, type InjectionKey } from 'vue'
+
+export interface BrandMessages {
+  contactForm: {
+    /** A required field left empty. */
+    required: string
+    invalidEmail: string
+    invalidLinkedIn: string
+    /** {max}: the field's character limit. */
+    tooLong: string
+    /** The submit button. */
+    submit: string
+    /** The alert after a submission the CRM accepted. */
+    sent: string
+    /** The alert after a submission that failed. */
+    notSent: string
+    /** Accessible name of the button that dismisses either alert. */
+    closeAlert: string
+  }
+  articlePreview: {
+    /** {minutes}: the article's reading time. */
+    readingTime: string
+  }
+  technologyCard: {
+    /** The link to the service a card names. */
+    explore: string
+  }
+  brandNav: {
+    /** Accessible name of the top bar's navigation landmark. */
+    label: string
+  }
+  subNavbar: {
+    /** Accessible name of the section bar's navigation landmark. */
+    label: string
+  }
+  mobileMenu: {
+    /** Accessible name of the burger button that opens and closes the drawer. */
+    toggle: string
+    /** Accessible name of the button that leaves the services list. */
+    back: string
+  }
+  review: {
+    /** {name}: the reviewer. Accessible name of the link to their LinkedIn. */
+    linkedin: string
+  }
+}
+
+/** Any subset of the strings, by group. What is left out stays English. */
+export type BrandMessagesOverride = {
+  [Group in keyof BrandMessages]?: Partial<BrandMessages[Group]>
+}
+
+export const ENGLISH_BRAND_MESSAGES: BrandMessages = {
+  contactForm: {
+    required: 'This field is required',
+    invalidEmail: 'Please enter valid email',
+    invalidLinkedIn: 'Please enter valid LinkedIn page link',
+    tooLong: 'You faced characters limits. Max length is {max}',
+    submit: 'Leave consultation request',
+    sent: 'Sent! We will contact you within next 1-3 business days.',
+    notSent: 'We could not send your request. Please try again, or email us at hello@codecave.pro.',
+    closeAlert: 'Close',
+  },
+  articlePreview: {
+    readingTime: 'Reading time: {minutes} m.',
+  },
+  technologyCard: {
+    explore: 'Explore service',
+  },
+  brandNav: {
+    label: 'Main',
+  },
+  subNavbar: {
+    label: 'Section',
+  },
+  mobileMenu: {
+    toggle: 'Menu',
+    back: 'Back',
+  },
+  review: {
+    linkedin: '{name} on LinkedIn',
+  },
+}
+
+/* Symbol.for rather than Symbol(): the key has to be the same value in the
+ * module the site's entrypoint imports and the one each component imports, and
+ * a consumer that aliases this package at a local build can load it twice. */
+const KEY = Symbol.for('codecave.brand.messages') as InjectionKey<BrandMessages>
+
+/** Makes every brand component in `app` render `messages`, English where they leave a string out. */
+export const provideBrandMessages = (app: App, messages: BrandMessagesOverride): void => {
+  const merged = Object.fromEntries(
+    Object.entries(ENGLISH_BRAND_MESSAGES).map(([group, strings]) => [
+      group,
+      { ...strings, ...messages[group as keyof BrandMessages] },
+    ]),
+  ) as unknown as BrandMessages
+  app.provide(KEY, merged)
+}
+
+/** The strings a component renders. Call it in setup. */
+export const useBrandMessages = (): BrandMessages => inject(KEY, ENGLISH_BRAND_MESSAGES)
+
+/** Fills the {name} placeholders of a message. A placeholder with no value is left as written. */
+export const formatMessage = (template: string, values: Record<string, string | number>): string =>
+  template.replace(/\{(\w+)\}/g, (placeholder, name: string) =>
+    Object.hasOwn(values, name) ? String(values[name]) : placeholder)

package/dist/theme.css

@@ -25,7 +25,7 @@
     /* sizes */
     --max-width-desktop: 1280px;
     --breakpoint-sm: 457px;
-    --font-sans: Satoshi, sans-serif;
+    --font-sans: Satoshi, Manrope, sans-serif;
     --text-heading-lg: 3.5rem;
     --text-heading-lg--line-height: 130%;
     --text-heading-md: 2.75rem;

package/dist/tokens/typography.d.ts

@@ -6,10 +6,11 @@
  * come from the production `@theme` block; the remaining steps were measured
  * from the rendered site.
  *
- * One family, no display face, no serif, no second sans.
+ * One family, no display face, no serif. Manrope follows Satoshi in the stack
+ * only for the Cyrillic Satoshi lacks; see its @font-face in colors_and_type.css.
  */
 export declare const fontFamily: {
-    readonly sans: "Satoshi, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
+    readonly sans: "Satoshi, Manrope, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
     readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
 };
 /**

package/dist/tokens/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUX,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUX,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/tokens/typography.js

@@ -6,10 +6,11 @@
  * come from the production `@theme` block; the remaining steps were measured
  * from the rendered site.
  *
- * One family, no display face, no serif, no second sans.
+ * One family, no display face, no serif. Manrope follows Satoshi in the stack
+ * only for the Cyrillic Satoshi lacks; see its @font-face in colors_and_type.css.
  */
 export const fontFamily = {
-    sans: 'Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
+    sans: 'Satoshi, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
 };
 /**

package/dist/tokens.css

@@ -106,11 +106,12 @@
 
   /* =========================================================================
    * TYPOGRAPHY
-   * One family. Named heading sizes come from the production @theme block;
-   * the remaining steps are measured from the live site.
+   * One family, and Manrope for the Cyrillic it lacks (see "Cyrillic" above).
+   * Named heading sizes come from the production @theme block; the remaining
+   * steps are measured from the live site.
    * ====================================================================== */
-  --font-sans: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
+  --font-sans: Satoshi, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI",
+               Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                "Liberation Mono", "Courier New", monospace;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "3.2.7",
+  "version": "3.4.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",