Merge branch 'main' into i18n/rtl-fixes

Author: skaldebane

CONTRIBUTING.md

@@ -340,12 +340,12 @@ To add a new locale:
 5. If the language is `right-to-left`, add `dir: 'rtl'` (see `ar-EG` in config for example)
 6. If the language requires special pluralization rules, add a `pluralRule` callback (see `ar-EG` or `ru-RU` in config for examples)
 
-Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
+Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization#custom-pluralization) and [Plural Rules](https://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Determining-Plural-Categories) for more info.
 
 ### Update translation
 
 We track the current progress of translations with [Lunaria](https://lunaria.dev/) on this site: https://i18n.npmx.dev/
-If you see any outdated translations in your language, feel free to update the keys to match then English version.
+If you see any outdated translations in your language, feel free to update the keys to match the English version.
 
 In order to make sure you have everything up-to-date, you can run:
 
@@ -408,13 +408,51 @@ See how `es`, `es-ES`, and `es-419` are configured in [config/i18n.ts](./config/
    <p>{{ $t('greeting', { name: userName }) }}</p>
    ```
 
+4. Don't concatenate string messages in the Vue templates, some languages can have different word order. Use placeholders instead.
+
+   **Bad:**
+
+   ```vue
+   <p>{{ $t('hello') }} {{ userName }}</p>
+   ```
+
+   **Good:**
+
+   ```vue
+   <p>{{ $t('greeting', { name: userName }) }}</p>
+   ```
+
+   **Complex content:**
+
+   If you need to include HTML or components inside the translation, use [`i18n-t`](https://vue-i18n.intlify.dev/guide/advanced/component.html) component. This is especially useful when the order of elements might change between languages.
+
+   ```json
+   {
+     "agreement": "I accept the {terms} and {privacy}.",
+     "terms_link": "Terms of Service",
+     "privacy_policy": "Privacy Policy"
+   }
+   ```
+
+   ```vue
+   <i18n-t keypath="agreement" tag="p">
+     <template #terms>
+       <NuxtLink to="/terms">{{ $t('terms_link') }}</NuxtLink>
+     </template>
+     <template #privacy>
+       <strong>{{ $t('privacy_policy') }}</strong>
+     </template>
+   </i18n-t>
+   ```
+
 ### Translation key conventions
 
 - Use dot notation for hierarchy: `section.subsection.key`
 - Keep keys descriptive but concise
 - Group related keys together
 - Use `common.*` for shared strings (loading, retry, close, etc.)
 - Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*`
+- Do not use dashes (`-`) in translation keys; always use underscore (`_`): e.g., `privacy_policy` instead of `privacy-policy`
 
 ### Using i18n-ally (recommended)
 

app/app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Directions } from '@nuxtjs/i18n'
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, onKeyDown, onKeyUp } from '@vueuse/core'
 import { isEditableElement } from '~/utils/input'
 
 const route = useRoute()
@@ -47,16 +47,12 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
-// Global keyboard shortcut:
-// "/" focuses search or navigates to search page
-// "?" highlights all keyboard shortcut elements
-function handleGlobalKeydown(e: KeyboardEvent) {
-  if (isEditableElement(e.target)) return
-
-  if (isKeyWithoutModifiers(e, '/')) {
+onKeyDown(
+  '/',
+  e => {
+    if (isEditableElement(e.target)) return
     e.preventDefault()
 
-    // Try to find and focus search input on current page
     const searchInput = document.querySelector<HTMLInputElement>(
       'input[type="search"], input[name="q"]',
     )
@@ -67,18 +63,29 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     }
 
     router.push('/search')
-  }
+  },
+  { dedupe: true },
+)
 
-  // For "?" we check the key property directly since it's usually combined with shift
-  if (e.key === '?') {
+onKeyDown(
+  '?',
+  e => {
+    if (isEditableElement(e.target)) return
     e.preventDefault()
     showKbdHints.value = true
-  }
-}
+  },
+  { dedupe: true },
+)
 
-function handleGlobalKeyup() {
-  showKbdHints.value = false
-}
+onKeyUp(
+  '?',
+  e => {
+    if (isEditableElement(e.target)) return
+    e.preventDefault()
+    showKbdHints.value = false
+  },
+  { dedupe: true },
+)
 
 // Light dismiss fallback for browsers that don't support closedby="any" (Safari + old Chrome/Firefox)
 // https://codepen.io/paramagicdev/pen/gbYompq
@@ -99,9 +106,6 @@ function handleModalLightDismiss(e: MouseEvent) {
 }
 
 if (import.meta.client) {
-  useEventListener(document, 'keydown', handleGlobalKeydown)
-  useEventListener(document, 'keyup', handleGlobalKeyup)
-
   // Feature check for native light dismiss support via closedby="any"
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
   const supportsClosedBy =

app/assets/main.css

@@ -155,6 +155,7 @@ html {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
+  scrollbar-gutter: stable;
 }
 
 /*
@@ -229,6 +230,10 @@ select:focus-visible {
 }
 
 /* Scrollbar styling */
+* {
+  scrollbar-color: var(--border) var(--bg);
+}
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -244,14 +249,13 @@ select:focus-visible {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #404040;
+  background: var(--border-hover);
 }
 
 /* Scrollbar styling for Firefox */
 @supports not selector(::-webkit-scrollbar) {
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--border) var(--bg);
   }
 }
 

app/components/ColumnPicker.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnConfig, ColumnId } from '#shared/types/preferences'
+import { onKeyDown } from '@vueuse/core'
 
 const props = defineProps<{
   columns: ColumnConfig[]
@@ -26,13 +27,16 @@ onClickOutside(
   },
 )
 
-// Close on Escape key
-useEventListener('keydown', event => {
-  if (event.key === 'Escape' && isOpen.value) {
+onKeyDown(
+  'Escape',
+  e => {
+    if (!isOpen.value) return
     isOpen.value = false
     buttonRef.value?.focus()
-  }
-})
+  },
+  { dedupe: true },
+)
+
 // Columns that can be toggled (name is always visible)
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 

app/components/DependencyPathPopup.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
+
 defineProps<{
   /** Dependency path from root to vulnerable package (readonly from VulnerabilityTreeResult) */
   path: readonly string[]
@@ -17,13 +20,16 @@ onClickOutside(popupEl, () => {
   if (isOpen.value) closePopup()
 })
 
-// Close popup on ESC or scroll
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') closePopup()
-}
+onKeyDown(
+  'Escape',
+  e => {
+    e.preventDefault()
+    closePopup()
+  },
+  { dedupe: true, target: popupEl },
+)
 
-useEventListener(document, 'keydown', handleKeydown)
-useEventListener('scroll', closePopup, true)
+useEventListener('scroll', closePopup, { passive: true })
 
 function togglePopup(event: MouseEvent) {
   if (isOpen.value) {
@@ -77,34 +83,36 @@ function parsePackageString(pkg: string): { name: string; version: string } {
       class="fixed z-[100] bg-bg-elevated border border-border rounded-lg shadow-xl p-3 min-w-64 max-w-sm"
       :style="getPopupStyle()"
     >
-      <ul class="list-none m-0 p-0 space-y-0.5">
-        <li
-          v-for="(pathItem, idx) in path"
-          :key="idx"
-          class="font-mono text-xs"
-          :style="{ paddingLeft: `${idx * 12}px` }"
-        >
-          <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
-          <NuxtLink
-            :to="{
-              name: 'package',
-              params: {
-                package: [
-                  ...parsePackageString(pathItem).name.split('/'),
-                  'v',
-                  parsePackageString(pathItem).version,
-                ],
-              },
-            }"
-            class="hover:underline"
-            :class="idx === path.length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
-            @click="closePopup"
+      <UseFocusTrap :options="{ immediate: true }">
+        <ul class="list-none m-0 p-0 space-y-0.5">
+          <li
+            v-for="(pathItem, idx) in path"
+            :key="idx"
+            class="font-mono text-xs"
+            :style="{ paddingLeft: `${idx * 12}px` }"
           >
-            {{ pathItem }}
-          </NuxtLink>
-          <span v-if="idx === path.length - 1" class="ms-1 text-amber-500">⚠</span>
-        </li>
-      </ul>
+            <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
+            <NuxtLink
+              :to="{
+                name: 'package',
+                params: {
+                  package: [
+                    ...parsePackageString(pathItem).name.split('/'),
+                    'v',
+                    parsePackageString(pathItem).version,
+                  ],
+                },
+              }"
+              class="hover:underline"
+              :class="idx === path.length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
+              @click="closePopup"
+            >
+              {{ pathItem }}
+            </NuxtLink>
+            <span v-if="idx === path.length - 1" class="ms-1 text-amber-500">⚠</span>
+          </li>
+        </ul>
+      </UseFocusTrap>
     </div>
   </div>
 </template>

app/components/Readme.vue

@@ -61,6 +61,7 @@ function handleClick(event: MouseEvent) {
 <template>
   <article
     class="readme prose prose-invert max-w-[70ch] lg:max-w-none px-1"
+    dir="auto"
     v-html="html"
     dir="auto"
     :style="{
@@ -86,6 +87,8 @@ function handleClick(event: MouseEvent) {
   /* Contain all children */
   overflow: hidden;
   min-width: 0;
+  /* Contain all children z-index values inside this container */
+  isolation: isolate;
 }
 
 /* README headings - styled by visual level (data-level), not semantic level */
@@ -403,6 +406,8 @@ function handleClick(event: MouseEvent) {
   display: revert-layer;
   border-radius: 8px;
   margin: 1rem 0;
+  position: relative;
+  z-index: 1;
 }
 
 .readme :deep(video) {

app/components/ReadmeTocDropdown.vue

@@ -69,7 +69,7 @@ function handleScroll(event: Event) {
   }
   close()
 }
-useEventListener('scroll', handleScroll, true)
+useEventListener('scroll', handleScroll, { passive: true })
 
 // Generate unique ID for accessibility
 const inputId = useId()

app/components/Settings/AccentColorPicker.vue

@@ -16,7 +16,9 @@ onPrehydrate(el => {
 </script>
 
 <template>
-  <fieldset class="flex items-center gap-4">
+  <fieldset
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+  >
     <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
     <label
       v-for="color in accentColors"
@@ -35,7 +37,7 @@ onPrehydrate(el => {
       />
     </label>
     <label
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-accent-fallback"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
     >
       <input
         type="radio"

app/components/Settings/BgThemePicker.vue

@@ -14,7 +14,9 @@ onPrehydrate(el => {
 </script>
 
 <template>
-  <fieldset class="flex items-center gap-4">
+  <fieldset
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+  >
     <legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
     <label
       v-for="theme in backgroundThemes"