WIP

Author: danhollick

src/pages/docs/v4-beta.mdx

@@ -1166,9 +1166,31 @@ This works with any variant where it makes sense, including `group-*`, `peer-*`,
 
 The new `starting` variant adds support for the new CSS `@starting-style` feature, making it possible to transition element properties when an element is first displayed:
 
+```html {{example: {hint: 'Click the button to see the popover animate in'}}}
+<div class="relative pt-8 pb-12 grid justify-center">
+  <button popovertarget="my-popover" class="rounded-lg bg-blue-600 hover:bg-blue-500 text-white shadow px-2.5 py-1 font-semibold">Check for updates</button>
+  <div popover id="my-popover" class="rounded-md bg-blue-50 p-4 opacity-0 transition-all [transition-behavior:allow-discrete] duration-500 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0">
+    <div class="flex">
+      <div class="shrink-0">
+        <svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" /></svg>
+      </div>
+      <div class="ml-3 flex-1 md:flex md:justify-between">
+        <p class="text-sm text-blue-700">A new software update is available: v2.0.4.</p>
+        <p class="mt-3 text-sm md:mt-0 md:ml-6">
+          <a href="#" class="font-medium whitespace-nowrap text-blue-700 hover:text-blue-600">
+            Update
+            <span aria-hidden="true"> &rarr;</span>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
 ```html
 <div>
-  <button popovertarget="my-popover">Open Popover</button>
+  <button popovertarget="my-popover">Check for updates</button>
   <div popover id="my-popover" class="opacity-0 transition-all duration-500 [transition-behavior:allow-discrete] open:opacity-100 starting:open:opacity-0">
     <!-- ... -->
   </div>