Merge branch 'main' of https://github.com/alex-key/npmx.dev into fix/search-results-limit

Author: alex-key

app/assets/main.css

@@ -275,13 +275,16 @@ dd {
 }
 
 /* Shiki theme colors */
-html.light .shiki,
-html.light .shiki span {
+html.light .shiki {
   color: var(--shiki-light) !important;
   background-color: var(--shiki-light-bg) !important;
-  font-style: var(--shiki-light-font-style) !important;
-  font-weight: var(--shiki-light-font-weight) !important;
-  text-decoration: var(--shiki-light-text-decoration) !important;
+
+  & span {
+    color: var(--shiki-light) !important;
+    font-style: var(--shiki-light-font-style) !important;
+    font-weight: var(--shiki-light-font-weight) !important;
+    text-decoration: var(--shiki-light-text-decoration) !important;
+  }
 }
 
 /* Inline code in package descriptions */

app/components/Compare/FacetBarChart.vue

@@ -220,13 +220,18 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
             const name = datapoint?.name?.replace(/\n/g, '<br>')
             return `
             <div class="font-mono p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
-              <div class="flex items-center gap-2">
+              <div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
                 <div class="w-3 h-3">
                   <svg viewBox="0 0 2 2" class="w-full h-full">
                     <rect x="0" y="0" width="2" height="2" rx="0.3" fill="${datapoint?.color}" />
                   </svg>
                 </div>
-                <span>${name}: ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}</span>
+                <span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
+                  ${name}
+                </span>
+                <span class="text-base text-[var(--fg)] font-mono tabular-nums text-end">
+                  ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}
+                </span>
               </div>
             </div>
             `

app/components/Header/SearchBox.vue

@@ -44,11 +44,12 @@ defineExpose({ focus })
 
       <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
         <div class="search-box relative flex items-center">
-          <span
-            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+          <kbd
+            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1 rounded"
+            aria-hidden="true"
           >
             /
-          </span>
+          </kbd>
 
           <InputBase
             id="header-search"
@@ -62,6 +63,7 @@ defineExpose({ focus })
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
             size="small"
+            ariaKeyshortcuts="/"
           />
           <button
             v-if="hasSearchQuery"

app/components/Input/Base.vue

@@ -14,6 +14,8 @@ const props = withDefaults(
      * @default true
      */
     noCorrect?: boolean
+    /** Keyboard shortcut hint */
+    ariaKeyshortcuts?: string
   }>(),
   {
     size: 'medium',
@@ -28,6 +30,8 @@ const emit = defineEmits<{
 
 const el = useTemplateRef('el')
 
+const keyboardShortcutsEnabled = useKeyboardShortcuts()
+
 defineExpose({
   focus: () => el.value?.focus(),
   blur: () => el.value?.blur(),
@@ -51,5 +55,6 @@ defineExpose({
       /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
       disabled ? true : undefined
     "
+    :aria-keyshortcuts="keyboardShortcutsEnabled ? ariaKeyshortcuts : undefined"
   />
 </template>