diff --git a/.specs/dialog.md b/.specs/dialog.md
index 42f3d0f70..1149594a9 100644
--- a/.specs/dialog.md
+++ b/.specs/dialog.md
@@ -7,7 +7,7 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=482-935
   node_id: 482:935
-checksum: 7a70c8dfef2ecfa9a1d9bfc42dfaeaafddf7aeed69c5f5a02d05816dcc608f8c
+checksum: 1f438ae1419577fcce4f1c3fa9703c8f067a73d7c673cfc9129738c830a70ec2
 created: 2026-05-22
 last_updated: 2026-05-22
 ---
diff --git a/.specs/link.md b/.specs/link.md
index 64f67c5c7..8e88b7d30 100644
--- a/.specs/link.md
+++ b/.specs/link.md
@@ -4,15 +4,18 @@ category: navigation
 structure: monolithic
 status: implemented
 spec_version: 1
-checksum: 1de51434b1fd172a6c0de7cd7f1c86f291a0a264bf66629d28438e926e753665
+checksum: 42815455514e846bb1b8f6825c1ab7a00e53d155ae890edd2ffd48898ed9aa0c
 created: 2026-05-22
-last_updated: 2026-05-26
+last_updated: 2026-06-01
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3548-578
+  node_id: 3548:578
 ---
 # Link — Component Spec
 
 ## Purpose
 
-Helps users move between views or sections. Migrated from the existing implementation at `packages/webkit/src/components/navigation/link/`.
+Helps users move between views or sections. Migrated from the existing implementation at `packages/webkit/src/components/navigation/link/`. Design source: [Webkit — Link](https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3548-578) (`Size` × `State` variants; hover/active handled in CSS).
 
 ## Props
 
@@ -76,8 +79,7 @@ Helps users move between views or sections. Migrated from the existing implement
 ## Stories (Storybook)
 
 - Default
-- Medium (size)
-- Large (size)
+- Sizes
 - Disabled
 
 ## Constraints — DO NOT
diff --git a/.specs/mini-button.md b/.specs/mini-button.md
new file mode 100644
index 000000000..a908144fb
--- /dev/null
+++ b/.specs/mini-button.md
@@ -0,0 +1,133 @@
+---
+name: mini-button
+category: actions
+structure: monolithic
+status: implemented
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3211-220
+  node_id: 3211:220
+checksum: 0aece9c0160c2aeb9b5e2a6113130750eb8d9f3d5845f654478366b1785d718e
+created: 2026-06-01
+last_updated: 2026-06-01
+---
+
+# Mini Button — Component Spec
+
+## Purpose
+
+Compact text action with an optional trailing external-link icon and a ghost hover surface. Use for secondary CTAs in dense layouts (cards, tables, toolbars) where a full `Button` is too heavy. Differs from `navigation/link` by using default body text color and a brand-colored icon.
+
+## Usage
+
+```vue
+<script setup>
+  import MiniButton from '@aziontech/webkit/mini-button'
+</script>
+
+<template>
+  <MiniButton
+    label="Learn More"
+    href="#"
+    target="_blank"
+  />
+</template>
+```
+
+## Props
+
+| Prop       | Type                  | Default                 | Required | JSDoc                                             |
+| ---------- | --------------------- | ----------------------- | -------- | ------------------------------------------------- |
+| `label`    | `string`              | `'Learn More'`          | no       | Visible label rendered inside the control.        |
+| `size`     | `'large' \| 'medium'` | `'large'`               | no       | Size token; affects height, gap, and typography.  |
+| `disabled` | `boolean`             | `false`                 | no       | Disables interaction and applies disabled tokens. |
+| `showIcon` | `boolean`             | `true`                  | no       | When true, renders the trailing icon.             |
+| `icon`     | `string`              | `'pi pi-external-link'` | no       | PrimeIcons class for the trailing icon.           |
+| `href`     | `string`              | `'#'`                   | no       | Destination URL for the anchor.                   |
+| `target`   | `'_blank' \| '_self'` | `'_self'`               | no       | Link target when navigating.                      |
+
+## Events
+
+| Event   | Payload      | Notes                                            |
+| ------- | ------------ | ------------------------------------------------ |
+| `click` | `MouseEvent` | Fires on activation; suppressed when `disabled`. |
+
+## Slots
+
+| _none_ | — | — |
+
+## States
+
+- Visual states: `default`, `hover`, `focus-visible`, `active`, `disabled`
+- `data-disabled` mirrors the `disabled` prop
+- `data-size` mirrors the `size` prop
+
+## Motion & Animations
+
+| Trigger                     | Animation / Transition                                          | Token  | Reduced-motion fallback                |
+| --------------------------- | --------------------------------------------------------------- | ------ | -------------------------------------- |
+| hover / focus ghost surface | `transition-opacity duration-150 ease-out`                      | inline | `motion-reduce:transition-none`        |
+| hover / focus ghost overlay | `before:transition-opacity before:duration-150 before:ease-out` | inline | `motion-reduce:before:transition-none` |
+
+## Tokens
+
+| Region               | Token (DESIGN.md)      |
+| -------------------- | ---------------------- |
+| typography (large)   | `.text-button-lg`      |
+| typography (medium)  | `.text-button-md`      |
+| text                 | `var(--text-default)`  |
+| text (disabled)      | `var(--text-disabled)` |
+| icon                 | `var(--primary)`       |
+| ghost surface        | `var(--bg-hover)`      |
+| ghost overlay        | `var(--bg-mask)`       |
+| ghost active         | `var(--bg-active)`     |
+| spacing.gap (large)  | `var(--spacing-xs)`    |
+| spacing.gap (medium) | `var(--spacing-xxs)`   |
+| spacing.ghost inset  | `var(--spacing-xs)`    |
+| shape                | `var(--shape-button)`  |
+| ring                 | `var(--ring-color)`    |
+| ring offset surface  | `var(--bg-canvas)`     |
+
+## Theme gaps
+
+| Figma variable        | Temporary primitive        | Follow-up         |
+| --------------------- | -------------------------- | ----------------- |
+| `gap/button-md` (6px) | `var(--spacing-xxs)` (4px) | `TODO: tokenizar` |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]`
+- Keyboard map: `Tab` focuses; `Enter` activates.
+- ARIA: `aria-disabled` and `tabindex="-1"` when disabled.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons), including disabled state.
+- `motion-reduce:transition-none` on animated states.
+- Touch target ≥40×40 px at `size: 'large'`; medium is for dense layouts.
+
+## Stories (Storybook)
+
+- Default
+- Sizes — composite story rendering every `size` value side-by-side.
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/src/stories/webkit/actions/mini-button/MiniButton.stories.js b/apps/storybook/src/stories/webkit/actions/mini-button/MiniButton.stories.js
new file mode 100644
index 000000000..04d5d6cd7
--- /dev/null
+++ b/apps/storybook/src/stories/webkit/actions/mini-button/MiniButton.stories.js
@@ -0,0 +1,133 @@
+import MiniButton from '@aziontech/webkit/mini-button'
+
+/** @type {import('@storybook/vue3').Meta<typeof MiniButton>} */
+const meta = {
+  title: 'Webkit/Actions/Mini Button',
+  component: MiniButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: true }]
+      }
+    },
+    docs: {
+      description: {
+        component: `Compact text action with an optional trailing external-link icon and a ghost hover surface. Use for secondary CTAs in dense layouts where a full \`Button\` is too heavy.
+
+\`\`\`vue
+<script setup>
+import MiniButton from '@aziontech/webkit/mini-button'
+</script>
+
+<template>
+  <MiniButton label="Learn More" href="#" target="_blank" />
+</template>
+\`\`\``
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Visible label rendered inside the control.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: 'Learn More' } }
+    },
+    size: {
+      control: 'select',
+      options: ['large', 'medium'],
+      description: 'Size token; affects height, gap, and typography.',
+      table: {
+        category: 'props',
+        type: { summary: "'large' | 'medium'" },
+        defaultValue: { summary: "'large'" }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables interaction and applies disabled tokens.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'When true, renders the trailing icon.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'true' } }
+    },
+    icon: {
+      control: 'text',
+      description: 'PrimeIcons class for the trailing icon.',
+      table: {
+        category: 'props',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'pi pi-external-link' }
+      }
+    },
+    href: {
+      control: 'text',
+      description: 'Destination URL for the anchor.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: '#' } }
+    },
+    target: {
+      control: 'select',
+      options: ['_self', '_blank'],
+      description: 'Link target when navigating.',
+      table: {
+        category: 'props',
+        type: { summary: "'_self' | '_blank'" },
+        defaultValue: { summary: "'_self'" }
+      }
+    },
+    onClick: {
+      action: 'click',
+      description: 'Emitted when the control is activated (unless disabled).',
+      table: { category: 'events', type: { summary: 'MouseEvent' } }
+    }
+  },
+  args: {
+    label: 'Learn More',
+    size: 'large',
+    disabled: false,
+    showIcon: true,
+    icon: 'pi pi-external-link',
+    href: '#',
+    target: '_self'
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { MiniButton },
+  setup() {
+    return { args }
+  },
+  template: '<MiniButton v-bind="args" @click="args.onClick" />'
+})
+
+/** @type {import('@storybook/vue3').StoryObj<typeof MiniButton>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: { description: { story: 'Default large mini button with trailing icon.' } }
+  }
+}
+
+/** @type {import('@storybook/vue3').StoryObj<typeof MiniButton>} */
+export const Sizes = {
+  render: () => ({
+    components: { MiniButton },
+    template: `
+      <div class="flex flex-wrap items-center gap-4">
+        <MiniButton size="medium" label="Learn More" href="#" />
+        <MiniButton size="large" label="Learn More" href="#" />
+      </div>
+    `
+  }),
+  parameters: {
+    docs: { description: { story: 'All size variants side by side.' } }
+  }
+}
diff --git a/apps/storybook/src/stories/webkit/navigation/Link.stories.js b/apps/storybook/src/stories/webkit/navigation/Link.stories.js
index a72a4b093..6b431489f 100644
--- a/apps/storybook/src/stories/webkit/navigation/Link.stories.js
+++ b/apps/storybook/src/stories/webkit/navigation/Link.stories.js
@@ -94,11 +94,20 @@ export default meta
 const Template = (args) => ({
   components: { Link },
   setup() {
-    const { onClick, ...props } = args
-
-    return { props, onClick }
+    return { args }
   },
-  template: '<Link v-bind="props" @click="onClick" />'
+  template: `
+    <Link
+      :label="args.label"
+      :size="args.size"
+      :disabled="args.disabled"
+      :show-icon="args.showIcon"
+      :icon="args.icon"
+      :href="args.href"
+      :target="args.target"
+      @click="args.onClick"
+    />
+  `
 })
 
 /** @type {import('@storybook/vue3').StoryObj<typeof Link>} */
@@ -110,20 +119,18 @@ export const Default = {
 }
 
 /** @type {import('@storybook/vue3').StoryObj<typeof Link>} */
-export const Medium = {
-  args: { size: 'medium' },
-  render: Template,
-  parameters: {
-    docs: { description: { story: 'Medium size variant.' } }
-  }
-}
-
-/** @type {import('@storybook/vue3').StoryObj<typeof Link>} */
-export const Large = {
-  args: { size: 'large' },
-  render: Template,
+export const Sizes = {
+  render: () => ({
+    components: { Link },
+    template: `
+      <div class="flex flex-wrap items-center gap-4">
+        <Link size="large" label="Learn More" />
+        <Link size="medium" label="Learn More" />
+      </div>
+    `
+  }),
   parameters: {
-    docs: { description: { story: 'Large size variant.' } }
+    docs: { description: { story: 'All size variants side by side.' } }
   }
 }
 
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 8246acc7a..36bff0507 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -92,6 +92,7 @@
     "./accordion-tab": "./src/core/primevue/accordion-tab/accordion-tab.vue",
     "./button": "./src/components/actions/button/button.vue",
     "./button-highlight": "./src/components/actions/button-highlight/button-highlight.vue",
+    "./mini-button": "./src/components/actions/mini-button/mini-button.vue",
     "./segmented-button": "./src/components/actions/segmented-button/segmented-button.vue",
     "./icon-button": "./src/components/actions/icon-button/icon-button.vue",
     "./button-cancel": "./src/components/wip/buttons/button-cancel/button-cancel.vue",
diff --git a/packages/webkit/src/components/actions/mini-button/mini-button.vue b/packages/webkit/src/components/actions/mini-button/mini-button.vue
new file mode 100644
index 000000000..0f846991e
--- /dev/null
+++ b/packages/webkit/src/components/actions/mini-button/mini-button.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  export type MiniButtonSize = 'large' | 'medium'
+  export type MiniButtonTarget = '_self' | '_blank'
+
+  defineOptions({
+    name: 'MiniButton',
+    inheritAttrs: false
+  })
+
+  interface Props {
+    /** Visible label rendered inside the control. */
+    label?: string
+    /** Size token; affects height, gap, and typography. */
+    size?: MiniButtonSize
+    /** Disables interaction and applies disabled tokens. */
+    disabled?: boolean
+    /** When true, renders the trailing icon. */
+    showIcon?: boolean
+    /** PrimeIcons class for the trailing icon. */
+    icon?: string
+    /** Destination URL for the anchor. */
+    href?: string
+    /** Link target when navigating. */
+    target?: MiniButtonTarget
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    label: 'Learn More',
+    size: 'large',
+    disabled: false,
+    showIcon: true,
+    icon: 'pi pi-external-link',
+    href: '#',
+    target: '_self'
+  })
+
+  const emit = defineEmits<{
+    click: [event: MouseEvent]
+  }>()
+
+  const attrs = useAttrs()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'actions-mini-button'
+  )
+
+  const rootClasses = computed(() => [
+    'group relative inline-flex shrink-0 items-center whitespace-nowrap',
+    'rounded-[var(--shape-button)] text-[var(--text-default)]',
+    'transition-opacity duration-150 ease-out motion-reduce:transition-none',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]',
+    'data-[size=large]:h-10 data-[size=large]:min-h-10 data-[size=large]:text-button-lg',
+    'data-[size=medium]:h-8 data-[size=medium]:min-h-8',
+    'data-[size=medium]:text-button-md',
+    'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed',
+    'data-[disabled]:!text-[var(--text-disabled)] data-[disabled]:[&_.mini-button-ghost]:hidden',
+    'data-[disabled]:[&_.mini-button-icon]:!text-[var(--text-disabled)]',
+    attrs['class']
+  ])
+
+  const handleClick = (event: MouseEvent) => {
+    if (props.disabled) {
+      event.preventDefault()
+      return
+    }
+
+    emit('click', event)
+  }
+</script>
+
+<template>
+  <a
+    :href="href"
+    :target="target"
+    :rel="target === '_blank' ? 'noopener noreferrer' : undefined"
+    :class="rootClasses"
+    :aria-disabled="disabled || undefined"
+    :tabindex="disabled ? -1 : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-size="size"
+    :data-testid="testId"
+    @click="handleClick"
+  >
+    <span
+      class="mini-button-ghost pointer-events-none absolute top-1/2 -translate-y-1/2 -left-[var(--spacing-xs)] -right-[var(--spacing-xs)] h-8 rounded-[var(--shape-button)] bg-[var(--bg-hover)] opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none group-hover:opacity-100 group-focus-visible:opacity-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--bg-mask)] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] motion-reduce:before:transition-none group-hover:before:opacity-100 group-focus-visible:before:opacity-100 group-active:before:bg-[var(--bg-active)]"
+      aria-hidden="true"
+      :data-testid="`${testId}__ghost`"
+    />
+    <span
+      :data-size="size"
+      class="relative z-[1] inline-flex flex-nowrap items-center gap-[var(--spacing-xs)] data-[size=medium]:gap-[var(--spacing-sm)]"
+      :data-testid="`${testId}__content`"
+    >
+      <span
+        class="inline leading-none"
+        :data-testid="`${testId}__label`"
+      >
+        {{ label }}
+      </span>
+      <i
+        v-if="showIcon"
+        :class="icon"
+        class="mini-button-icon inline-flex size-[var(--spacing-sm)] shrink-0 items-center justify-center text-[var(--primary)] leading-none"
+        aria-hidden="true"
+        :data-testid="`${testId}__icon`"
+      />
+    </span>
+  </a>
+</template>
diff --git a/packages/webkit/src/components/actions/mini-button/package.json b/packages/webkit/src/components/actions/mini-button/package.json
new file mode 100644
index 000000000..385a542e0
--- /dev/null
+++ b/packages/webkit/src/components/actions/mini-button/package.json
@@ -0,0 +1,11 @@
+{
+  "main": "./mini-button.vue",
+  "module": "./mini-button.vue",
+  "types": "./mini-button.vue.d.ts",
+  "browser": {
+    "./sfc": "./mini-button.vue"
+  },
+  "sideEffects": [
+    "*.vue"
+  ]
+}
diff --git a/packages/webkit/src/components/navigation/link/link.figma.ts b/packages/webkit/src/components/navigation/link/link.figma.ts
new file mode 100644
index 000000000..d5cdbeb3a
--- /dev/null
+++ b/packages/webkit/src/components/navigation/link/link.figma.ts
@@ -0,0 +1,24 @@
+import figma, { html } from '@figma/code-connect/html'
+
+const FIGMA_NODE = 'https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=3548-578'
+
+figma.connect(FIGMA_NODE, {
+  label: 'Link',
+  imports: ['import Link from "@aziontech/webkit/navigation/link"'],
+  props: {
+    label: figma.string('label'),
+    size: figma.enum('Size', {
+      Large: 'large',
+      Medium: 'medium'
+    }),
+    showIcon: figma.boolean('showIcon')
+  },
+  example: ({ label, size, showIcon }) => html`
+    <link
+      label=${label}
+      size=${size}
+      :show-icon=${showIcon}
+      href="#"
+    />
+  `
+})
diff --git a/packages/webkit/src/components/navigation/link/link.vue b/packages/webkit/src/components/navigation/link/link.vue
index 63d44e2b6..a8c93c331 100644
--- a/packages/webkit/src/components/navigation/link/link.vue
+++ b/packages/webkit/src/components/navigation/link/link.vue
@@ -42,53 +42,20 @@
 
   const attrs = useAttrs()
 
-  const passthroughAttrs = computed(() => {
-    const rest = { ...attrs }
-
-    delete rest.class
-    delete rest['data-testid']
-
-    return rest
-  })
-
   const testId = computed(() => (attrs['data-testid'] as string | undefined) ?? 'navigation-link')
 
-  const sharedClasses = [
+  const rootClasses = computed(() => [
     'group relative inline-flex shrink-0 items-center whitespace-nowrap',
-    'rounded-[var(--shape-button)] text-[var(--text-link)]',
-    'transition-colors motion-reduce:transition-none',
+    'min-h-10 h-10 rounded-[var(--shape-button)] text-[var(--text-link)]',
+    'transition-colors duration-150 ease-out motion-reduce:transition-none',
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]',
-    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]'
-  ]
-
-  const ghostClasses = [
-    'pointer-events-none absolute top-1/2 -translate-y-1/2',
-    '-left-[var(--spacing-xs)] -right-[var(--spacing-xs)] h-8',
-    'rounded-[var(--shape-button)] bg-[var(--bg-surface-raised)]',
-    'opacity-0 transition-opacity motion-reduce:transition-none',
-    'group-hover:opacity-100 group-focus-visible:opacity-100',
-    'before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit]',
-    "before:opacity-0 before:transition-opacity before:content-['']",
-    'group-hover:before:opacity-100 group-focus-visible:before:opacity-100',
-    'before:bg-[var(--bg-hover)] group-active:before:bg-[var(--bg-active)]'
-  ]
-
-  const disabledClasses =
-    'pointer-events-none cursor-not-allowed !text-[var(--text-disabled)] [&_.link-ghost]:hidden'
-
-  const sizeClasses: Record<LinkSize, string> = {
-    large: 'min-h-10 h-10 text-button-lg',
-    medium: 'min-h-10 h-10 text-button-md'
-  }
-
-  const contentClasses = 'inline-flex items-center gap-[var(--spacing-xs)]'
-
-  const rootClasses = computed(() => {
-    const state = props.disabled ? disabledClasses : ''
-    const size = sizeClasses[props.size]
-
-    return [...sharedClasses, size, state, attrs.class]
-  })
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)]',
+    'data-[size=large]:text-button-lg',
+    'data-[size=medium]:text-button-md',
+    'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed',
+    'data-[disabled]:!text-[var(--text-disabled)] data-[disabled]:[&_.link-ghost]:hidden',
+    attrs['class']
+  ])
 
   const handleClick = (event: MouseEvent) => {
     if (props.disabled) {
@@ -102,34 +69,36 @@
 
 <template>
   <a
-    v-bind="passthroughAttrs"
     :href="href"
     :target="target"
     :rel="target === '_blank' ? 'noopener noreferrer' : undefined"
     :class="rootClasses"
     :aria-disabled="disabled || undefined"
     :tabindex="disabled ? -1 : undefined"
-    :data-disabled="disabled ? '' : undefined"
+    :data-disabled="disabled || null"
+    :data-size="size"
     :data-testid="testId"
     @click="handleClick"
   >
     <span
-      :class="ghostClasses"
-      class="link-ghost"
+      class="link-ghost pointer-events-none absolute top-1/2 -translate-y-1/2 -left-[var(--spacing-xs)] -right-[var(--spacing-xs)] h-8 rounded-[var(--shape-button)] bg-[var(--bg-surface-raised)] opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none group-hover:opacity-100 group-focus-visible:opacity-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] motion-reduce:before:transition-none group-hover:before:opacity-100 group-focus-visible:before:opacity-100 before:bg-[var(--bg-hover)] group-active:before:bg-[var(--bg-active)]"
       aria-hidden="true"
       :data-testid="`${testId}__ghost`"
     />
     <span
-      :class="[contentClasses, 'relative z-[1]']"
+      class="relative z-[1] inline-flex flex-nowrap items-center gap-[var(--spacing-xs)]"
       :data-testid="`${testId}__content`"
     >
-      <span :data-testid="`${testId}__label`">
+      <span
+        class="inline leading-none"
+        :data-testid="`${testId}__label`"
+      >
         {{ label }}
       </span>
       <i
         v-if="showIcon"
         :class="icon"
-        class="size-[var(--spacing-sm)] shrink-0 text-[length:inherit] leading-none"
+        class="inline-flex size-[var(--spacing-sm)] shrink-0 items-center justify-center text-[length:inherit] leading-none"
         aria-hidden="true"
         :data-testid="`${testId}__icon`"
       />