fix: NqLinks TypeScript and add variant docs

Author: onmax

docs/uno.config.ts

@@ -128,6 +128,7 @@ export default defineConfig<PresetWind3Theme>({
       utilities: true,
       attributifyUtilities: true,
       typography: true,
+      outputCSSLayer: false,
     }),
     presetIcons({
       collections: {
@@ -137,5 +138,5 @@ export default defineConfig<PresetWind3Theme>({
       },
     }),
   ],
-  outputToCssLayers: true,
+  outputToCssLayers: false,
 })

docs/vitepress-theme/components/links.md

@@ -11,12 +11,13 @@ A component for displaying external links with consistent styling. Perfect for s
 
 ### NqLinksItem Interface
 
-| Name    | Type     | Default     | Description                                    |
-| ------- | -------- | ----------- | ---------------------------------------------- |
-| `label` | `string` | required    | The text displayed for the link                |
-| `href`  | `string` | required    | The URL the link points to                     |
-| `icon`  | `string` | `undefined` | Optional icon class (e.g., `i-nimiq:external`) |
-| `title` | `string` | `undefined` | Optional tooltip text for accessibility        |
+| Name      | Type     | Default             | Description                                                              |
+| --------- | -------- | ------------------- | ------------------------------------------------------------------------ |
+| `label`   | `string` | required            | The text displayed for the link                                          |
+| `href`    | `string` | required            | The URL the link points to                                               |
+| `icon`    | `string` | `undefined`         | Optional icon class (e.g., `i-nimiq:external`)                           |
+| `variant` | `string` | `nq-pill-secondary` | Pill variant: `blue`, `gold`, `green`, `secondary`, `tertiary`, `orange` |
+| `title`   | `string` | `undefined`         | Optional tooltip text for accessibility                                  |
 
 All links automatically open in a new tab with `target="_blank"` and include `rel="noopener noreferrer"` for security.
 
@@ -98,6 +99,37 @@ Simple text links without icons for minimal designs.
 
 </ComponentPreview>
 
+### Links with Different Variants
+
+Use different pill variants to color-code your links.
+
+<ComponentPreview lang="vue">
+
+<NqPlayground>
+<NqLinks :items="[
+  {
+    label: 'Documentation',
+    href: '/docs',
+    variant: 'nq-pill-blue',
+    icon: 'i-nimiq:book'
+  },
+  {
+    label: 'API Reference',
+    href: '/api',
+    variant: 'nq-pill-green',
+    icon: 'i-nimiq:code'
+  },
+  {
+    label: 'Support',
+    href: '/support',
+    variant: 'nq-pill-orange',
+    icon: 'i-nimiq:help'
+  }
+]" />
+</NqPlayground>
+
+</ComponentPreview>
+
 ## Usage Notes
 
 - Use either `item` for a single link or `items` for multiple links, not both

packages/nimiq-css/src/unocss/icons.ts

@@ -9,7 +9,7 @@ export interface NimiqIconsOptions {
 export function getNimiqIcons(_options: NimiqIconsOptions): { rules: Rule<PresetWind4Theme>[], iconsNames: string[] } {
   const rules: Rule<PresetWind4Theme>[] = [
     [
-      /^i-nimiq:(.*)$/,
+      /^i-nimiq:([\w-]+)$/,
       async function* ([, name], { symbols }) {
         const iconData = getIconData(nimiqIconsJson, name)
         if (!iconData) {

packages/nimiq-vitepress-theme/src/components/NqLinks.vue

@@ -5,11 +5,11 @@ interface NqLinksItem {
   label: string
   href: string
   icon?: string
-  variant: `nq-pill-${'blue' | 'gold' | 'green' | 'secondary' | 'tertiary' | 'orange'}`
+  variant?: `nq-pill-${'blue' | 'gold' | 'green' | 'secondary' | 'tertiary' | 'orange'}`
   title?: string
 }
 
-const props = defineProps<{ item?: NqLinksItem, items?: NqLinksItems[] }>()
+const props = defineProps<{ item?: NqLinksItem, items?: NqLinksItem[] }>()
 
 const items = computed(() => props.items?.length ? props.items : props.item ? [props.item] : [])
 </script>