From 84e35921c709f8f98a6dc330cd4f92093f9b8a15 Mon Sep 17 00:00:00 2001
From: "Mr. Robot" <gomexxxx71@gmail.com>
Date: Sun, 8 Feb 2026 17:12:26 +0600
Subject: [PATCH 1/3] fix: prevent adding non-existent packages on compare page

---
 app/components/Compare/PackageSelector.vue    | 52 ++++++++++++++++---
 .../compare/PackageSelector.spec.ts           | 38 +++++++++++++-
 2 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
index ba95d89a6..78c6197be 100644
--- a/app/components/Compare/PackageSelector.vue
+++ b/app/components/Compare/PackageSelector.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
+import { checkPackageExists } from '~/utils/package-name'
 
 const packages = defineModel<string[]>({ required: true })
 
@@ -13,6 +14,12 @@ const maxPackages = computed(() => props.max ?? 4)
 // Input state
 const inputValue = shallowRef('')
 const isInputFocused = shallowRef(false)
+const isCheckingPackage = shallowRef(false)
+const packageError = shallowRef('')
+
+watch(inputValue, () => {
+  packageError.value = ''
+})
 
 // Use the shared npm search composable
 const { data: searchData, status } = useNpmSearch(inputValue, { size: 15 })
@@ -76,10 +83,36 @@ function removePackage(name: string) {
   packages.value = packages.value.filter(p => p !== name)
 }
 
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter' && inputValue.value.trim()) {
-    e.preventDefault()
-    addPackage(inputValue.value.trim())
+async function handleKeydown(e: KeyboardEvent) {
+  if (e.key !== 'Enter' || !inputValue.value.trim() || isCheckingPackage.value) return
+  e.preventDefault()
+
+  const name = inputValue.value.trim()
+  if (packages.value.length >= maxPackages.value) return
+  if (packages.value.includes(name)) return
+
+  // If it matches a dropdown result, add immediately (already confirmed to exist)
+  const exactMatch = filteredResults.value.find(r => r.name === name)
+  if (exactMatch) {
+    addPackage(exactMatch.name)
+    return
+  }
+
+  // Otherwise, verify it exists on npm
+  isCheckingPackage.value = true
+  packageError.value = ''
+  try {
+    const exists = await checkPackageExists(name)
+    if (name !== inputValue.value.trim()) return // stale guard
+    if (exists) {
+      addPackage(name)
+    } else {
+      packageError.value = `Package "${name}" was not found on npm.`
+    }
+  } catch {
+    packageError.value = 'Could not verify package. Please try again.'
+  } finally {
+    isCheckingPackage.value = false
   }
 }
 
@@ -138,7 +171,8 @@ function handleBlur() {
           class="absolute inset-y-0 start-3 flex items-center text-fg-subtle pointer-events-none group-focus-within:text-accent"
           aria-hidden="true"
         >
-          <span class="i-carbon:search w-4 h-4" />
+          <span v-if="isCheckingPackage" class="i-carbon:renew w-4 h-4 animate-spin" />
+          <span v-else class="i-carbon:search w-4 h-4" />
         </span>
         <input
           id="package-search"
@@ -149,7 +183,8 @@ function handleBlur() {
               ? $t('compare.selector.search_first')
               : $t('compare.selector.search_add')
           "
-          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+          :disabled="isCheckingPackage"
+          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70) disabled:opacity-60 disabled:cursor-wait"
           aria-autocomplete="list"
           @focus="isInputFocused = true"
           @blur="handleBlur"
@@ -205,6 +240,11 @@ function handleBlur() {
           </button>
         </div>
       </Transition>
+
+      <!-- Package not found error -->
+      <p v-if="packageError" class="text-xs text-red-400 mt-1" role="alert">
+        {{ packageError }}
+      </p>
     </div>
 
     <!-- Hint -->
diff --git a/test/nuxt/components/compare/PackageSelector.spec.ts b/test/nuxt/components/compare/PackageSelector.spec.ts
index 42954a9b3..89f8310f3 100644
--- a/test/nuxt/components/compare/PackageSelector.spec.ts
+++ b/test/nuxt/components/compare/PackageSelector.spec.ts
@@ -1,8 +1,17 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
+import { flushPromises } from '@vue/test-utils'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import PackageSelector from '~/components/Compare/PackageSelector.vue'
 
+// Mock checkPackageExists
+vi.mock('~/utils/package-name', () => ({
+  checkPackageExists: vi.fn(),
+}))
+
+import { checkPackageExists } from '~/utils/package-name'
+const mockCheckPackageExists = vi.mocked(checkPackageExists)
+
 // Mock $fetch for useNpmSearch
 const mockFetch = vi.fn()
 vi.stubGlobal('$fetch', mockFetch)
@@ -10,6 +19,7 @@ vi.stubGlobal('$fetch', mockFetch)
 describe('PackageSelector', () => {
   beforeEach(() => {
     mockFetch.mockReset()
+    mockCheckPackageExists.mockReset()
     mockFetch.mockResolvedValue({
       objects: [
         { package: { name: 'lodash', description: 'Lodash modular utilities' } },
@@ -18,6 +28,7 @@ describe('PackageSelector', () => {
       total: 2,
       time: new Date().toISOString(),
     })
+    mockCheckPackageExists.mockResolvedValue(true)
   })
 
   describe('selected packages display', () => {
@@ -132,7 +143,9 @@ describe('PackageSelector', () => {
   })
 
   describe('adding packages', () => {
-    it('adds package on Enter key', async () => {
+    it('adds package on Enter key when package exists', async () => {
+      mockCheckPackageExists.mockResolvedValue(true)
+
       const component = await mountSuspended(PackageSelector, {
         props: {
           modelValue: [],
@@ -142,6 +155,7 @@ describe('PackageSelector', () => {
       const input = component.find('input')
       await input.setValue('my-package')
       await input.trigger('keydown', { key: 'Enter' })
+      await flushPromises()
 
       const emitted = component.emitted('update:modelValue')
       expect(emitted).toBeTruthy()
@@ -149,6 +163,8 @@ describe('PackageSelector', () => {
     })
 
     it('clears input after adding package', async () => {
+      mockCheckPackageExists.mockResolvedValue(true)
+
       const component = await mountSuspended(PackageSelector, {
         props: {
           modelValue: [],
@@ -158,11 +174,31 @@ describe('PackageSelector', () => {
       const input = component.find('input')
       await input.setValue('my-package')
       await input.trigger('keydown', { key: 'Enter' })
+      await flushPromises()
 
       // Input should be cleared
       expect((input.element as HTMLInputElement).value).toBe('')
     })
 
+    it('does not add non-existent packages', async () => {
+      mockCheckPackageExists.mockResolvedValue(false)
+
+      const component = await mountSuspended(PackageSelector, {
+        props: {
+          modelValue: [],
+        },
+      })
+
+      const input = component.find('input')
+      await input.setValue('nonexistent-pkg')
+      await input.trigger('keydown', { key: 'Enter' })
+      await flushPromises()
+
+      const emitted = component.emitted('update:modelValue')
+      expect(emitted).toBeFalsy()
+      expect(component.find('[role="alert"]').exists()).toBe(true)
+    })
+
     it('does not add duplicate packages', async () => {
       const component = await mountSuspended(PackageSelector, {
         props: {

From 2110e8d2a34aeb68734083967b1d936483a71fac Mon Sep 17 00:00:00 2001
From: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
Date: Sun, 8 Feb 2026 12:38:19 +0000
Subject: [PATCH 2/3] test: configure lint-css to check a11y and rtl (#1203)

---
 .github/workflows/autofix.yml                 |  4 +-
 app/components/LicenseDisplay.vue             |  2 +-
 package.json                                  |  5 +-
 scripts/{rtl-checker.ts => unocss-checker.ts} | 20 +++-
 test/unit/uno-preset-a11y.spec.ts             | 94 +++++++++++++++++++
 uno-preset-a11y.ts                            | 77 +++++++++++++++
 uno.config.ts                                 |  3 +-
 7 files changed, 198 insertions(+), 7 deletions(-)
 rename scripts/{rtl-checker.ts => unocss-checker.ts} (73%)
 create mode 100644 test/unit/uno-preset-a11y.spec.ts
 create mode 100644 uno-preset-a11y.ts

diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index 8a5effea2..619aae3af 100644
--- a/.github/workflows/autofix.yml
+++ b/.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
diff --git a/app/components/LicenseDisplay.vue b/app/components/LicenseDisplay.vue
index 512248c87..eda37feec 100644
--- a/app/components/LicenseDisplay.vue
+++ b/app/components/LicenseDisplay.vue
@@ -24,7 +24,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         {{ token.value }}
       </a>
       <span v-else-if="token.type === 'license'">{{ token.value }}</span>
-      <span v-else-if="token.type === 'operator'" class="text-[0.65em]">{{ token.value }}</span>
+      <span v-else-if="token.type === 'operator'" class="text-4xs">{{ token.value }}</span>
     </template>
     <span
       v-if="hasAnyValidLicense"
diff --git a/package.json b/package.json
index e0602c714..c8ec225ed 100644
--- a/package.json
+++ b/package.json
@@ -19,11 +19,11 @@
     "i18n:check:fix": "node scripts/compare-translations.ts --fix",
     "i18n:report": "node scripts/find-invalid-translations.ts",
     "i18n:report:fix": "node scripts/remove-unused-translations.ts",
-    "rtl:check": "node scripts/rtl-checker.ts",
     "knip": "knip",
     "knip:fix": "knip --fix",
     "lint": "oxlint && oxfmt --check",
     "lint:fix": "oxlint --fix && oxfmt",
+    "lint:css": "node scripts/unocss-checker.ts",
     "generate": "nuxt generate",
     "npmx-connector": "pnpm --filter npmx-connector dev",
     "generate-pwa-icons": "pwa-assets-generator",
@@ -151,6 +151,9 @@
     "*.{js,ts,mjs,cjs,vue}": [
       "pnpm oxlint --fix"
     ],
+    "*.vue": [
+      "pnpm lint:css"
+    ],
     "*.{js,ts,mjs,cjs,vue,json,yml,md,html,css}": [
       "pnpm oxfmt"
     ]
diff --git a/scripts/rtl-checker.ts b/scripts/unocss-checker.ts
similarity index 73%
rename from scripts/rtl-checker.ts
rename to scripts/unocss-checker.ts
index af7246983..697621d58 100644
--- a/scripts/rtl-checker.ts
+++ b/scripts/unocss-checker.ts
@@ -4,9 +4,11 @@ import { fileURLToPath } from 'node:url'
 import { resolve } from 'node:path'
 import { createGenerator } from 'unocss'
 import { presetRtl } from '../uno-preset-rtl.ts'
+import { presetA11y } from '../uno-preset-a11y.ts'
 import { COLORS } from './utils.ts'
 import { presetWind4 } from 'unocss'
 
+const argvFiles = process.argv.slice(2)
 const APP_DIRECTORY = fileURLToPath(new URL('../app', import.meta.url))
 
 async function checkFile(path: Dirent): Promise<string | undefined> {
@@ -33,6 +35,17 @@ async function checkFile(path: Dirent): Promise<string | undefined> {
           `${COLORS.red} ❌ [RTL] ${filename}:${idx}${ruleIdx > -1 ? `:${ruleIdx + 1}` : ''} - ${warning}${COLORS.reset}`,
         )
       }),
+      presetA11y((warning, rule) => {
+        let entry = warnings.get(idx)
+        if (!entry) {
+          entry = []
+          warnings.set(idx, entry)
+        }
+        const ruleIdx = line.indexOf(rule)
+        entry.push(
+          `${COLORS.red} ❌ [A11y] ${filename}:${idx}${ruleIdx > -1 ? `:${ruleIdx + 1}` : ''} - ${warning}${COLORS.reset}`,
+        )
+      }),
     ],
   })
   const lines = file.split('\n')
@@ -46,7 +59,10 @@ async function checkFile(path: Dirent): Promise<string | undefined> {
 }
 
 async function check(): Promise<void> {
-  const dir = glob('**/*.vue', { withFileTypes: true, cwd: APP_DIRECTORY })
+  const dir = glob(argvFiles.length > 0 ? argvFiles : '**/*.vue', {
+    withFileTypes: true,
+    cwd: APP_DIRECTORY,
+  })
   let hasErrors = false
   for await (const file of dir) {
     const result = await checkFile(file)
@@ -61,7 +77,7 @@ async function check(): Promise<void> {
     process.exit(1)
   } else {
     // oxlint-disable-next-line no-console -- success logging
-    console.log(`${COLORS.green}✅ CSS RTL check passed!${COLORS.reset}`)
+    console.log(`${COLORS.green}✅ CSS check passed!${COLORS.reset}`)
   }
 }
 
diff --git a/test/unit/uno-preset-a11y.spec.ts b/test/unit/uno-preset-a11y.spec.ts
new file mode 100644
index 000000000..49620d34b
--- /dev/null
+++ b/test/unit/uno-preset-a11y.spec.ts
@@ -0,0 +1,94 @@
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from 'vitest'
+import { presetA11y, resetA11yWarnings } from '../../uno-preset-a11y'
+import { createGenerator, presetWind4 } from 'unocss'
+
+describe('uno-preset-a11y', () => {
+  let warnSpy: MockInstance
+
+  beforeEach(() => {
+    resetA11yWarnings()
+    warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    warnSpy.mockRestore()
+  })
+
+  it('a11y rules generate font-size and warn correctly', async () => {
+    const uno = await createGenerator({
+      presets: [presetWind4(), presetA11y()],
+    })
+
+    const { css } = await uno.generate(
+      'text-[11px] text-[10px] text-[9px] text-[8px] text-[12px] text-[1.5em]',
+    )
+
+    expect(css).toMatchInlineSnapshot(`
+    	"/* layer: theme */
+    	:root, :host { --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
+    	/* layer: base */
+    	 *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box;  margin: 0;  padding: 0;  border: 0 solid;  }  html, :host { line-height: 1.5;  -webkit-text-size-adjust: 100%;  tab-size: 4;  font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );  font-feature-settings: var(--default-font-featureSettings, normal);  font-variation-settings: var(--default-font-variationSettings, normal);  -webkit-tap-highlight-color: transparent;  }  hr { height: 0;  color: inherit;  border-top-width: 1px;  }  abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }  a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }  b, strong { font-weight: bolder; }  code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );  font-feature-settings: var(--default-monoFont-featureSettings, normal);  font-variation-settings: var(--default-monoFont-variationSettings, normal);  font-size: 1em;  }  small { font-size: 80%; }  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; }  table { text-indent: 0;  border-color: inherit;  border-collapse: collapse;  }  :-moz-focusring { outline: auto; }  progress { vertical-align: baseline; }  summary { display: list-item; }  ol, ul, menu { list-style: none; }  img, svg, video, canvas, audio, iframe, embed, object { display: block;  vertical-align: middle;  }  img, video { max-width: 100%; height: auto; }  button, input, select, optgroup, textarea, ::file-selector-button { font: inherit;  font-feature-settings: inherit;  font-variation-settings: inherit;  letter-spacing: inherit;  color: inherit;  border-radius: 0;  background-color: transparent;  opacity: 1;  }  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }  ::file-selector-button { margin-inline-end: 4px; }  ::placeholder { opacity: 1; }  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px)  { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } }  textarea { resize: vertical; }  ::-webkit-search-decoration { -webkit-appearance: none; }  ::-webkit-date-and-time-value { min-height: 1lh;  text-align: inherit;  }  ::-webkit-datetime-edit { display: inline-flex; }  ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }  ::-webkit-calendar-picker-indicator { line-height: 1; }  :-moz-ui-invalid { box-shadow: none; }  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }  [hidden]:where(:not([hidden~='until-found'])) { display: none !important; }
+    	/* layer: default */
+    	.text-\\[10px\\]{font-size:10px;}
+    	.text-\\[11px\\]{font-size:11px;}
+    	.text-\\[12px\\]{font-size:12px;}
+    	.text-\\[8px\\]{font-size:8px;}
+    	.text-\\[9px\\]{font-size:9px;}
+    	.text-\\[1\\.5em\\]{font-size:1.5em;}"
+    `)
+
+    const warnings = warnSpy.mock.calls.flat()
+    expect(warnings).toMatchInlineSnapshot(`
+    	[
+    	  "[a11y] Avoid using 'text-[11px]', use 'text-2xs' instead.",
+    	  "[a11y] Avoid using 'text-[10px]', use 'text-3xs' instead.",
+    	  "[a11y] Avoid using 'text-[9px]', use 'text-4xs' instead.",
+    	  "[a11y] Avoid using 'text-[8px]', use 'text-5xs' instead.",
+    	  "[a11y] Avoid using 'text-[12px]', use text-<size> classes or rem values instead of custom values.",
+    	  "[a11y] Avoid using 'text-[1.5em]', use text-<size> classes or rem values instead of custom values.",
+    	]
+    `)
+  })
+
+  it('when checker is provided, checker is called and no console.warn', async () => {
+    const collected: Array<[string, string]> = []
+    const checker = (warning: string, rule: string) => {
+      collected.push([warning, rule])
+    }
+
+    const uno = await createGenerator({
+      presets: [presetWind4(), presetA11y(checker)],
+    })
+
+    const { css } = await uno.generate('text-[11px] text-[12px] text-[1.5em]')
+
+    expect(css).toMatchInlineSnapshot(`
+    	"/* layer: theme */
+    	:root, :host { --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
+    	/* layer: base */
+    	 *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box;  margin: 0;  padding: 0;  border: 0 solid;  }  html, :host { line-height: 1.5;  -webkit-text-size-adjust: 100%;  tab-size: 4;  font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );  font-feature-settings: var(--default-font-featureSettings, normal);  font-variation-settings: var(--default-font-variationSettings, normal);  -webkit-tap-highlight-color: transparent;  }  hr { height: 0;  color: inherit;  border-top-width: 1px;  }  abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }  a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }  b, strong { font-weight: bolder; }  code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );  font-feature-settings: var(--default-monoFont-featureSettings, normal);  font-variation-settings: var(--default-monoFont-variationSettings, normal);  font-size: 1em;  }  small { font-size: 80%; }  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; }  table { text-indent: 0;  border-color: inherit;  border-collapse: collapse;  }  :-moz-focusring { outline: auto; }  progress { vertical-align: baseline; }  summary { display: list-item; }  ol, ul, menu { list-style: none; }  img, svg, video, canvas, audio, iframe, embed, object { display: block;  vertical-align: middle;  }  img, video { max-width: 100%; height: auto; }  button, input, select, optgroup, textarea, ::file-selector-button { font: inherit;  font-feature-settings: inherit;  font-variation-settings: inherit;  letter-spacing: inherit;  color: inherit;  border-radius: 0;  background-color: transparent;  opacity: 1;  }  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }  ::file-selector-button { margin-inline-end: 4px; }  ::placeholder { opacity: 1; }  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px)  { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } }  textarea { resize: vertical; }  ::-webkit-search-decoration { -webkit-appearance: none; }  ::-webkit-date-and-time-value { min-height: 1lh;  text-align: inherit;  }  ::-webkit-datetime-edit { display: inline-flex; }  ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }  ::-webkit-calendar-picker-indicator { line-height: 1; }  :-moz-ui-invalid { box-shadow: none; }  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }  [hidden]:where(:not([hidden~='until-found'])) { display: none !important; }
+    	/* layer: default */
+    	.text-\\[11px\\]{font-size:11px;}
+    	.text-\\[12px\\]{font-size:12px;}
+    	.text-\\[1\\.5em\\]{font-size:1.5em;}"
+    `)
+
+    expect(warnSpy).not.toHaveBeenCalled()
+    expect(collected).toMatchInlineSnapshot(`
+    	[
+    	  [
+    	    "[a11y] Avoid using 'text-[11px]', use 'text-2xs' instead.",
+    	    "text-[11px]",
+    	  ],
+    	  [
+    	    "[a11y] Avoid using 'text-[12px]', use text-<size> classes or rem values instead of custom values.",
+    	    "text-[12px]",
+    	  ],
+    	  [
+    	    "[a11y] Avoid using 'text-[1.5em]', use text-<size> classes or rem values instead of custom values.",
+    	    "text-[1.5em]",
+    	  ],
+    	]
+    `)
+  })
+})
diff --git a/uno-preset-a11y.ts b/uno-preset-a11y.ts
new file mode 100644
index 000000000..589752bc5
--- /dev/null
+++ b/uno-preset-a11y.ts
@@ -0,0 +1,77 @@
+import type { Preset } from 'unocss'
+
+export type CollectorChecker = (warning: string, rule: string) => void
+
+// Track warnings to avoid duplicates
+const warnedClasses = new Set<string>()
+
+function warnOnce(message: string, key: string) {
+  if (!warnedClasses.has(key)) {
+    warnedClasses.add(key)
+    // oxlint-disable-next-line no-console -- warn logging
+    console.warn(message)
+  }
+}
+
+/** Reset warning state (for testing) */
+export function resetA11yWarnings() {
+  warnedClasses.clear()
+}
+
+const textPxToClass: Record<number, string> = {
+  11: 'text-2xs',
+  10: 'text-3xs',
+  9: 'text-4xs',
+  8: 'text-5xs',
+}
+
+function reportTextSizeWarning(match: string, suggestion: string, checker?: CollectorChecker) {
+  const message = `[a11y] Avoid using '${match}', ${suggestion}.`
+  if (checker) {
+    checker(message, match)
+  } else {
+    warnOnce(message, match)
+  }
+}
+
+export function presetA11y(checker?: CollectorChecker): Preset {
+  return {
+    name: 'a11y-preset',
+    // text-[N] (arbitrary where N is a size in px or em): recommend text-2xs/text-3xs/text-4xs/text-5xs or "use classes"
+    rules: [
+      [
+        /^text-\[(\d+(\.\d+)?)(px)?\]$/,
+        ([match, numStr], context) => {
+          const num = Number(numStr)
+          const fullClass = context.rawSelector || match
+          const suggestedClass = textPxToClass[num]
+          if (suggestedClass) {
+            reportTextSizeWarning(fullClass, `use '${suggestedClass}' instead`, checker)
+          } else {
+            reportTextSizeWarning(
+              fullClass,
+              'use text-<size> classes or rem values instead of custom values',
+              checker,
+            )
+          }
+          return [['font-size', `${num}px`]]
+        },
+        { autocomplete: 'text-[<num>]' },
+      ],
+      [
+        /^text-\[(\d+(\.\d+)?)em\]$/,
+        ([match, numStr], context) => {
+          const num = Number(numStr)
+          const fullClass = context.rawSelector || match
+          reportTextSizeWarning(
+            fullClass,
+            'use text-<size> classes or rem values instead of custom values',
+            checker,
+          )
+          return [['font-size', `${num}em`]]
+        },
+        { autocomplete: 'text-[<num>]em' },
+      ],
+    ],
+  }
+}
diff --git a/uno.config.ts b/uno.config.ts
index a9bbeba56..b75446763 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -7,6 +7,7 @@ import {
 } from 'unocss'
 import type { Theme } from '@unocss/preset-wind4/theme'
 import { presetRtl } from './uno-preset-rtl'
+import { presetA11y } from './uno-preset-a11y'
 
 const customIcons = {
   'agent-skills':
@@ -32,7 +33,7 @@ export default defineConfig({
       },
     }),
     // keep this preset last
-    ...(process.env.CI ? [] : [presetRtl()]),
+    ...(process.env.CI ? [] : [presetRtl(), presetA11y()]),
   ].filter(Boolean),
   transformers: [transformerDirectives(), transformerVariantGroup()],
   theme: {

From 8be460e26ea0096a4dba0e2a5822575ddb8ce6ec Mon Sep 17 00:00:00 2001
From: Matteo Gabriele <m.gabriele.dev@gmail.com>
Date: Sun, 8 Feb 2026 13:39:53 +0100
Subject: [PATCH 3/3] fix(ui): prevent compare with non-existing package
 (#1207)

---
 .../compare/PackageSelector.spec.ts           | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/test/nuxt/components/compare/PackageSelector.spec.ts b/test/nuxt/components/compare/PackageSelector.spec.ts
index 89f8310f3..9aade0a4d 100644
--- a/test/nuxt/components/compare/PackageSelector.spec.ts
+++ b/test/nuxt/components/compare/PackageSelector.spec.ts
@@ -153,13 +153,29 @@ describe('PackageSelector', () => {
       })
 
       const input = component.find('input')
-      await input.setValue('my-package')
+      await input.setValue('lodash')
       await input.trigger('keydown', { key: 'Enter' })
       await flushPromises()
 
       const emitted = component.emitted('update:modelValue')
       expect(emitted).toBeTruthy()
-      expect(emitted![0]![0]).toEqual(['my-package'])
+      expect(emitted![0]![0]).toEqual(['lodash'])
+    })
+
+    it('adds "no dep" entry on Enter key', async () => {
+      const component = await mountSuspended(PackageSelector, {
+        props: {
+          modelValue: [],
+        },
+      })
+
+      const input = component.find('input')
+      await input.setValue('no dep')
+      await input.trigger('keydown', { key: 'Enter' })
+
+      const emitted = component.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect(emitted![0]![0]).toEqual(['__no_dependency__'])
     })
 
     it('clears input after adding package', async () => {
@@ -172,7 +188,7 @@ describe('PackageSelector', () => {
       })
 
       const input = component.find('input')
-      await input.setValue('my-package')
+      await input.setValue('lodash')
       await input.trigger('keydown', { key: 'Enter' })
       await flushPromises()