Mix format

Author: ukutaht

lib/prima_web/live/demo_live/dropdown_page.html.heex

@@ -110,25 +110,33 @@
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">Enter</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                Enter
+              </kbd>
               <span class="text-gray-400 mx-1">/</span>
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">Space</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                Space
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Opens the menu and focuses the first non-disabled item
             </td>
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">↓</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                ↓
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Opens the menu and focuses the first non-disabled item
             </td>
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">↑</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                ↑
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Opens the menu and focuses the last non-disabled item
@@ -144,57 +152,79 @@
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">Esc</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                Esc
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Closes the menu and returns focus to the trigger button
             </td>
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">↑</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                ↑
+              </kbd>
               <span class="text-gray-400 mx-1">/</span>
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">↓</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                ↓
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Focuses the previous/next non-disabled item (wraps around)
             </td>
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">Home</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                Home
+              </kbd>
               <span class="text-gray-400 mx-1">/</span>
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">PageUp</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                PageUp
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Focuses the first non-disabled item
             </td>
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">End</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                End
+              </kbd>
               <span class="text-gray-400 mx-1">/</span>
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">PageDown</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                PageDown
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Focuses the last non-disabled item
             </td>
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">Enter</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                Enter
+              </kbd>
               <span class="text-gray-400 mx-1">/</span>
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">Space</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                Space
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Activates/clicks the currently focused menu item
             </td>
           </tr>
           <tr class="hover:bg-gray-50">
             <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">A-Z</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                A-Z
+              </kbd>
               <span class="text-gray-400 mx-1">/</span>
-              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">0-9</kbd>
+              <kbd class="px-2 py-1.5 text-xs bg-gray-200 border border-gray-300 rounded shadow-sm font-semibold">
+                0-9
+              </kbd>
             </td>
             <td class="px-6 py-4 text-sm text-gray-700">
               Focuses the first item that starts with the typed character. Repeated presses cycle through matching items.

priv/code_examples/combobox/positioned.html.heex

@@ -34,7 +34,7 @@
       </.combobox_options>
     </.combobox>
   </div>
-
+  
 <!-- Right Placement -->
   <div>
     <label class="block text-sm font-medium text-gray-700 mb-2">Color (opens to right)</label>
@@ -71,7 +71,7 @@
       </.combobox_options>
     </.combobox>
   </div>
-
+  
 <!-- Bottom with Large Offset -->
   <div>
     <label class="block text-sm font-medium text-gray-700 mb-2">Country (12px offset)</label>