ยูทิลิตีเส้นขอบรอบนอกและวงแหวน

<!-- Accessible focus ring replacing browser default -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Press Tab to focus me
</button>

<!-- Ring details: width + color + offset -->
<div class="flex gap-6 p-6">
  <!-- Width only -->
  <button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:outline-none">
    Ring width 2
  </button>
  <!-- Width + color -->
  <button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:outline-none">
    Colored ring
  </button>
  <!-- Width + color + offset -->
  <button class="bg-gray-200 px-4 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none">
    Ring with offset
  </button>
</div>

<!-- Ring width scale -->
<div class="flex gap-4 flex-wrap p-6">
  <div class="w-16 h-16 bg-white rounded-lg ring-1 ring-blue-500 flex items-center justify-center text-xs">ring-1</div>
  <div class="w-16 h-16 bg-white rounded-lg ring-2 ring-blue-500 flex items-center justify-center text-xs">ring-2</div>
  <div class="w-16 h-16 bg-white rounded-lg ring-4 ring-blue-500 flex items-center justify-center text-xs">ring-4</div>
  <div class="w-16 h-16 bg-white rounded-lg ring-8 ring-blue-500 flex items-center justify-center text-xs">ring-8</div>
</div>

<!-- Semantic ring colors for different states -->
<div class="space-y-3 max-w-xs">
  <input class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Default focus" />
  <input class="w-full border border-green-300 rounded-lg px-4 py-2 ring-2 ring-green-400" placeholder="Success state" />
  <input class="w-full border border-red-300 rounded-lg px-4 py-2 ring-2 ring-red-400" placeholder="Error state" />
</div>

<!-- ring-offset creating visual separation -->
<div class="flex gap-4 items-center p-6">
  <!-- On white: default white offset looks great -->
  <button class="bg-blue-500 text-white px-4 py-2 rounded-lg ring-2 ring-blue-500 ring-offset-2">
    White bg offset
  </button>

  <!-- On colored bg: match offset to background -->
  <div class="bg-blue-600 p-4 rounded-xl">
    <button class="bg-white text-blue-600 px-4 py-2 rounded-lg ring-2 ring-white ring-offset-2 ring-offset-blue-600">
      Colored bg offset
    </button>
  </div>
</div>

<!-- Inner ring for active/selected states -->
<div class="flex gap-3">
  <!-- Selected card with inner ring -->
  <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 ring-2 ring-inset ring-blue-500 cursor-pointer">
    <div class="font-semibold text-blue-700">Basic Plan</div>
    <div class="text-sm text-blue-600">$9/month</div>
  </div>

  <!-- Unselected card -->
  <div class="bg-white border border-gray-200 rounded-xl p-4 cursor-pointer hover:border-gray-300">
    <div class="font-semibold">Pro Plan</div>
    <div class="text-sm text-gray-500">$29/month</div>
  </div>
</div>

<!-- outline utilities -->
<div class="space-y-3 max-w-xs">
  <!-- Remove default outline (bad practice alone!) -->
  <button class="w-full bg-gray-200 p-2 rounded focus:outline-none">outline-none (no focus!)</button>

  <!-- Custom outline -->
  <button class="w-full bg-gray-200 p-2 rounded outline outline-2 outline-blue-500">
    outline-2 outline-blue-500
  </button>

  <!-- Dashed outline -->
  <button class="w-full bg-gray-200 p-2 rounded outline outline-dashed outline-2 outline-gray-400">
    outline-dashed
  </button>
</div>

<!-- outline-offset creates space between element and outline -->
<div class="flex gap-6 p-6">
  <button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-0">
    offset-0
  </button>
  <button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-2">
    offset-2
  </button>
  <button class="bg-blue-500 text-white px-4 py-2 rounded outline outline-2 outline-blue-500 outline-offset-4">
    offset-4
  </button>
</div>

<!-- focus-visible: best practice for modern a11y -->
<div class="flex gap-4">
  <!-- Ring shows for keyboard, hidden for mouse -->
  <button class="bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
    Smart Focus Ring
  </button>

  <!-- Compare: always visible on any focus -->
  <button class="bg-gray-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
    Always Visible Ring
  </button>
</div>

<!-- Color picker with ring-based selection indicator -->
<div class="flex gap-3">
  <!-- Selected: shows inset ring -->
  <button class="w-10 h-10 rounded-full bg-blue-500 ring-2 ring-blue-500 ring-offset-2" aria-label="Blue (selected)"></button>
  <!-- Unselected swatches -->
  <button class="w-10 h-10 rounded-full bg-purple-500 hover:ring-2 hover:ring-purple-500 hover:ring-offset-2 transition-all" aria-label="Purple"></button>
  <button class="w-10 h-10 rounded-full bg-green-500 hover:ring-2 hover:ring-green-500 hover:ring-offset-2 transition-all" aria-label="Green"></button>
  <button class="w-10 h-10 rounded-full bg-red-500 hover:ring-2 hover:ring-red-500 hover:ring-offset-2 transition-all" aria-label="Red"></button>
</div>

<!-- Card that keeps its shadow AND gets a ring on focus -->
<div class="p-6">
  <button class="w-full text-left bg-white rounded-xl shadow-md border border-gray-200 p-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 hover:shadow-lg transition-shadow">
    <h3 class="font-bold">Clickable Card</h3>
    <p class="text-gray-500 text-sm mt-1">Has shadow + focus ring when keyboard focused.</p>
  </button>
</div>