Merge branch 'npmx-dev:main' into feat/changelog-1

Author: WilcoSp

.github/workflows/autofix.yml

@@ -32,8 +32,8 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 🎨 Check for non-RTL CSS classes
-        run: pnpm rtl:check
+      - name: 🎨 Check for non-RTL/non-a11y CSS classes
+        run: pnpm lint:css
 
       - name: 🌐 Compare translations
         run: pnpm i18n:check

.github/workflows/ci.yml

@@ -84,7 +84,7 @@ jobs:
         run: pnpm install
 
       - name: 🧪 Unit tests
-        run: pnpm test:unit run --coverage --reporter=junit --outputFile=test-report.junit.xml
+        run: pnpm test:unit run --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml
 
       - name: ⬆︎ Upload test results to Codecov
         if: ${{ !cancelled() }}
@@ -115,7 +115,7 @@ jobs:
         run: pnpm playwright install chromium-headless-shell
 
       - name: 🧪 Component tests
-        run: pnpm test:nuxt run --coverage --reporter=junit --outputFile=test-report.junit.xml
+        run: pnpm test:nuxt run --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml
 
       - name: ⬆︎ Upload coverage reports to Codecov
         uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5

.gitignore

@@ -40,5 +40,7 @@ test-results/
 # generated files
 shared/types/lexicons
 
+**/__screenshots__/**
+
 # output
 .vercel

.nuxtrc

@@ -1 +1 @@
-setups.@nuxt/test-utils="3.23.0"
+setups.@nuxt/test-utils="4.0.0"

app/assets/main.css

@@ -27,6 +27,14 @@
   --accent: var(--accent-color, oklch(1 0 0));
   --accent-muted: var(--accent-color, oklch(0.922 0 0));
 
+  /* accent colors */
+  --swatch-coral: oklch(0.704 0.177 14.75);
+  --swatch-amber: oklch(0.828 0.165 84.429);
+  --swatch-emerald: oklch(0.792 0.153 166.95);
+  --swatch-sky: oklch(0.787 0.128 230.318);
+  --swatch-violet: oklch(0.78 0.148 286.067);
+  --swatch-magenta: oklch(0.78 0.15 330);
+
   /* syntax highlighting colors */
   --syntax-fn: oklch(0.727 0.137 299.149);
   --syntax-str: oklch(0.829 0.088 252.458);
@@ -89,6 +97,14 @@
   --accent: var(--accent-color, oklch(0.145 0 0));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
+  /* accent colors */
+  --swatch-coral: oklch(0.7 0.19 14.75);
+  --swatch-amber: oklch(0.8 0.25 84.429);
+  --swatch-emerald: oklch(0.7 0.17 166.95);
+  --swatch-sky: oklch(0.7 0.15 230.318);
+  --swatch-violet: oklch(0.7 0.17 286.067);
+  --swatch-magenta: oklch(0.75 0.18 330);
+
   --syntax-fn: oklch(0.502 0.188 294.988);
   --syntax-str: oklch(0.425 0.152 252);
   --syntax-kw: oklch(0.588 0.193 20.469);
@@ -155,12 +171,32 @@
   }
 }
 
+/*
+ * Forced Colors Mode (WHCM) Override for Icons
+ *
+ * By default, `forced-color-adjust: preserve-parent-color` (from UnoConfig) works fine
+ * for most icons as they inherit the correct text color.
+ *
+ * However, if icons disappear in specific contexts (e.g., inside buttons with
+ * complex backgrounds or transparent states), uncomment the following block
+ * to enforce visibility using `CanvasText`.
+ */
+/* 
+@media (forced-colors: active) {
+  [class^='i-'],
+  [class*=' i-'] {
+    forced-color-adjust: none !important;
+    color: CanvasText !important;
+  }
+}
+*/
+
 html {
+  @apply scroll-pt-20;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   /* Offset for fixed header - otherwise anchor headers are cutted */
-  scroll-padding-top: 5rem;
   scrollbar-gutter: stable;
 }
 
@@ -200,11 +236,6 @@ dd {
   margin: 0;
 }
 
-/* Reset button styles */
-button {
-  cursor: pointer;
-}
-
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);

app/components/AppFooter.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
+
+const modalRef = useTemplateRef('modalRef')
+const showModal = () => modalRef.value?.showModal?.()
 </script>
 
 <template>
@@ -33,6 +36,73 @@ const isHome = computed(() => route.name === 'index')
           <LinkBase to="https://chat.npmx.dev">
             {{ $t('footer.chat') }}
           </LinkBase>
+
+          <button
+            type="button"
+            class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            @click.prevent="showModal"
+            aria-haspopup="dialog"
+          >
+            {{ $t('footer.keyboard_shortcuts') }}
+          </button>
+
+          <Modal
+            ref="modalRef"
+            :modalTitle="$t('footer.keyboard_shortcuts')"
+            class="w-auto max-w-lg"
+          >
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.global') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">/</kbd>
+                <span>{{ $t('shortcuts.focus_search') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">?</kbd>
+                <span>{{ $t('shortcuts.show_kbd_hints') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">,</kbd>
+                <span>{{ $t('shortcuts.settings') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">c</kbd>
+                <span>{{ $t('shortcuts.compare') }}</span>
+              </li>
+            </ul>
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.search') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
+                <span>{{ $t('shortcuts.navigate_results') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">Enter</kbd>
+                <span>{{ $t('shortcuts.go_to_result') }}</span>
+              </li>
+            </ul>
+            <p class="mb-2 font-mono text-fg-subtle">
+              {{ $t('shortcuts.section.package') }}
+            </p>
+            <ul class="mb-6 flex flex-col gap-2">
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">.</kbd>
+                <span>{{ $t('shortcuts.open_code_view') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">d</kbd>
+                <span>{{ $t('shortcuts.open_docs') }}</span>
+              </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">c</kbd>
+                <span>{{ $t('shortcuts.compare_from_package') }}</span>
+              </li>
+            </ul>
+          </Modal>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
@@ -42,3 +112,9 @@ const isHome = computed(() => route.name === 'index')
     </div>
   </footer>
 </template>
+
+<style scoped>
+.kbd {
+  @apply items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2;
+}
+</style>

app/components/AppHeader.vue

@@ -122,8 +122,12 @@ onKeyStroke(
 
       <!-- Center: Search bar + nav items -->
       <div
-        class="flex-1 flex items-center justify-center md:gap-6"
-        :class="{ 'hidden sm:flex': !isSearchExpanded }"
+        class="flex-1 flex items-center md:gap-6"
+        :class="{
+          'hidden sm:flex': !isSearchExpanded,
+          'justify-end': isOnHomePage,
+          'justify-center': !isOnHomePage,
+        }"
       >
         <!-- Search bar (hidden on mobile unless expanded) -->
         <HeaderSearchBox

app/components/CollapsibleSection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { shallowRef, computed } from 'vue'
+import { LinkBase } from '#components'
 
 interface Props {
   title: string
@@ -18,7 +19,6 @@ const appSettings = useSettings()
 
 const buttonId = `${props.id}-collapsible-button`
 const contentId = `${props.id}-collapsible-content`
-const headingId = `${props.id}-heading`
 
 const isOpen = shallowRef(true)
 
@@ -75,11 +75,10 @@ useHead({
 </script>
 
 <template>
-  <section class="scroll-mt-20" :data-anchor-id="id">
+  <section :id="id" :data-anchor-id="id" class="scroll-mt-20 xl:scroll-mt-0">
     <div class="flex items-center justify-between mb-3 px-1">
       <component
         :is="headingLevel"
-        :id="headingId"
         class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
       >
         <button
@@ -104,17 +103,9 @@ useHead({
           />
         </button>
 
-        <a
-          :href="`#${id}`"
-          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-        >
-          <span v-if="icon" :class="icon" aria-hidden="true" />
+        <LinkBase :to="`#${id}`" class="">
           {{ title }}
-          <span
-            class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-            aria-hidden="true"
-          />
-        </a>
+        </LinkBase>
       </component>
 
       <!-- Actions slot for buttons or other elements -->

app/components/ColumnPicker.vue

@@ -102,11 +102,7 @@ function handleReset() {
               v-for="column in toggleableColumns"
               :key="column.id"
               class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
-              :class="
-                column.disabled
-                  ? 'opacity-50 cursor-not-allowed'
-                  : 'hover:bg-bg-muted cursor-pointer'
-              "
+              :class="column.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-muted'"
             >
               <input
                 type="checkbox"

app/components/Compare/FacetSelector.vue

@@ -29,12 +29,12 @@ function isCategoryNoneSelected(category: string): boolean {
     <div v-for="category in categoryOrder" :key="category">
       <!-- Category header with all/none buttons -->
       <div class="flex items-center gap-2 mb-2">
-        <span class="text-[10px] text-fg-subtle uppercase tracking-wider">
+        <span class="text-3xs text-fg-subtle uppercase tracking-wider">
           {{ getCategoryLabel(category) }}
         </span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryAllSelected(category)
               ? 'text-fg-muted'
@@ -48,10 +48,10 @@ function isCategoryNoneSelected(category: string): boolean {
         >
           {{ $t('compare.facets.all') }}
         </button>
-        <span class="text-[10px] text-fg-muted/40">/</span>
+        <span class="text-2xs text-fg-muted/40">/</span>
         <button
           type="button"
-          class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
+          class="text-3xs transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
           :class="
             isCategoryNoneSelected(category)
               ? 'text-fg-muted'
@@ -94,7 +94,7 @@ function isCategoryNoneSelected(category: string): boolean {
             aria-hidden="true"
           />
           {{ facet.label }}
-          <span v-if="facet.comingSoon" class="text-[9px]"
+          <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
         </button>