wally-ui 1.13.1 → 1.14.0

package/playground/showcase/src/app/components/selection-popover/selection-popover.ts

@@ -0,0 +1,205 @@
+import { AfterViewInit, Component, computed, ElementRef, HostListener, output, OutputEmitterRef, signal, ViewChild, WritableSignal } from '@angular/core';
+
+/**
+ * Selection Popover Component
+ *
+ * Displays a floating action toolbar above selected text (similar to Medium, Notion, Google Docs).
+ * Uses Selection API for text detection and supports custom actions via content projection.
+ *
+ * @example
+ * ```html
+ * <wally-selection-popover (textSelected)="onTextSelected($event)">
+ *   <div popoverActions>
+ *     <button>Custom Action</button>
+ *   </div>
+ *   <article>Selectable content...</article>
+ * </wally-selection-popover>
+ * ```
+ */
+@Component({
+  selector: 'wally-selection-popover',
+  standalone: true,
+  imports: [],
+  templateUrl: './selection-popover.html',
+  styleUrl: './selection-popover.css'
+})
+export class SelectionPopover implements AfterViewInit {
+  /** Reference to the popover element for positioning calculations */
+  @ViewChild('popover') popoverElement!: ElementRef<HTMLDivElement>;
+
+  /** Reference to custom actions slot for detecting projected content */
+  @ViewChild('customActionsSlot', { read: ElementRef }) customActionsSlot?: ElementRef;
+
+  /** Emits when text is selected (fallback action only) */
+  textSelected: OutputEmitterRef<string> = output<string>();
+
+  /** Current popover position (top, left in pixels) */
+  popoverPosition: WritableSignal<{ top: number; left: number; }> = signal<{ top: number; left: number; }>({ top: 0, left: 0 });
+
+  /** Whether custom actions are projected */
+  hasCustomActionsSignal: WritableSignal<boolean> = signal<boolean>(false);
+
+  /** Whether popover should be rendered in DOM */
+  isVisible: WritableSignal<boolean> = signal<boolean>(false);
+
+  /** Whether popover is positioned correctly (controls opacity) */
+  isPositioned: WritableSignal<boolean> = signal<boolean>(false);
+
+  /** Currently selected text */
+  selectedText: WritableSignal<string> = signal<string>('');
+
+  /**
+   * Computes adjusted position with viewport constraints
+   * Prevents popover from overflowing screen edges
+   */
+  adjustedPosition = computed(() => {
+    const position = this.popoverPosition();
+    const viewportWidth = window.innerWidth;
+
+    // Get real popover width if available, otherwise estimate
+    const popoverWidth = this.popoverElement?.nativeElement?.offsetWidth || 200;
+
+    let left = position.left;
+
+    // Prevent overflow on the right edge
+    if (left + popoverWidth > viewportWidth) {
+      left = viewportWidth - popoverWidth - 10;
+    }
+
+    // Prevent overflow on the left edge
+    if (left < 10) {
+      left = 10;
+    }
+
+    return {
+      top: position.top,
+      left: left
+    };
+  });
+
+  /**
+   * Handles mouseup event to detect text selection
+   * Uses setTimeout to ensure selection is complete
+   */
+  @HostListener('mouseup', ['$event'])
+  onMouseUp(event: MouseEvent) {
+    setTimeout(() => {
+      this.handleTextSelection();
+    }, 10);
+  }
+
+  /**
+   * Closes popover when clicking outside
+   * @param event - Mouse event from document click
+   */
+  @HostListener('document:mousedown', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (this.isVisible() && this.popoverElement) {
+      const clickedInside = this.popoverElement.nativeElement.contains(event.target as Node);
+
+      if (!clickedInside) {
+        this.hide();
+      }
+    }
+  }
+
+  /**
+   * Closes popover when ESC key is pressed
+   */
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    this.hide();
+  }
+
+  /**
+   * Handles text selection and shows popover
+   *
+   * Two-step positioning algorithm to prevent visual "flash":
+   * 1. Render popover invisible (opacity: 0) at selection center
+   * 2. Wait for DOM render to get real popover width
+   * 3. Recalculate centered position with actual width
+   * 4. Fade in popover (opacity: 100) at correct position
+   *
+   * Uses position: fixed + getBoundingClientRect() for viewport-relative positioning
+   * No window.scrollY needed - stays in place during scroll
+   */
+  handleTextSelection(): void {
+    const selection = window.getSelection();
+
+    if (!selection || selection.toString().trim().length < 3) {
+      this.hide();
+      return;
+    }
+
+    const text = selection.toString().trim();
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+
+    this.selectedText.set(text);
+
+    // Calculate selection center point
+    const selectionCenterX = rect.left + (rect.width / 2);
+    const selectionTop = rect.top;
+
+    // Step 1: Render invisible for width calculation
+    this.isVisible.set(true);
+    this.isPositioned.set(false); // opacity: 0
+
+    // Step 2: Recalculate position with real popover width
+    setTimeout(() => {
+      if (this.popoverElement?.nativeElement) {
+        const popoverWidth = this.popoverElement.nativeElement.offsetWidth;
+
+        // Center popover above selection (60px offset)
+        this.popoverPosition.set({
+          top: selectionTop - 60,
+          left: selectionCenterX - (popoverWidth / 2)
+        });
+
+        // Fade in at correct position
+        this.isPositioned.set(true); // opacity: 100
+      }
+
+      // Detect projected custom actions
+      if (this.customActionsSlot?.nativeElement) {
+        const slot = this.customActionsSlot.nativeElement;
+        const firstChild = slot.children[0] as HTMLElement;
+        const hasContent = firstChild && firstChild.children.length > 0;
+        this.hasCustomActionsSignal.set(hasContent);
+      }
+    }, 0);
+  }
+
+  /**
+   * Hides popover and clears browser text selection
+   */
+  hide(): void {
+    this.isVisible.set(false);
+    this.isPositioned.set(false);
+
+    window.getSelection()?.removeAllRanges();
+  }
+
+  /**
+   * Handles any click inside the popover
+   * Emits selected text and closes popover
+   * This allows both custom actions and fallback button to work
+   */
+  onPopoverClick() {
+    const text = this.selectedText();
+    this.textSelected.emit(text);
+    this.hide();
+  }
+
+  /**
+   * Lifecycle hook - detects custom actions on component init
+   */
+  ngAfterViewInit(): void {
+    if (this.customActionsSlot?.nativeElement) {
+      const slot = this.customActionsSlot.nativeElement;
+      const firstChild = slot.children[0] as HTMLElement;
+      const hasContent = firstChild && firstChild.children.length > 0;
+      this.hasCustomActionsSignal.set(hasContent);
+    }
+  }
+}

package/playground/showcase/src/app/pages/documentation/chat-sdk/chat-sdk.html

@@ -22,7 +22,7 @@
     </header>
 
     <!-- Live Demo -->
-    <section id="live-demo" class="mb-12" aria-labelledby="demo-heading">
+    <section id="live-demo" class="mb-12 font-sans" aria-labelledby="demo-heading">
       <h2 id="demo-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
         [ Live Demo ]
       </h2>

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts

@@ -79,7 +79,7 @@ export const ButtonCodeExamples = {
     <wally-button
       variant="secondary"
       type="button"
-      (click)="goToSignUp()">
+      (buttonClick)="goToSignUp()">
       Create Account
     </wally-button>
   </div>
@@ -109,14 +109,14 @@ export const ButtonCodeExamples = {
   <div class="flex gap-2 justify-end">
     <wally-button
       variant="ghost"
-      (click)="closeModal()">
+      (buttonClick)="closeModal()">
       Cancel
     </wally-button>
 
     <wally-button
       variant="destructive"
       [loading]="isDeleting()"
-      (click)="confirmDelete()">
+      (buttonClick)="confirmDelete()">
       Delete Account
     </wally-button>
   </div>
@@ -125,7 +125,7 @@ export const ButtonCodeExamples = {
   // Dashboard Actions
   dashboardExample: `<!-- Dashboard Actions -->
 <div class="dashboard-header">
-  <wally-button variant="outline" (click)="exportData()">
+  <wally-button variant="outline" (buttonClick)="exportData()">
     Export
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
          stroke-width="1.5" stroke="currentColor" class="size-5">
@@ -134,7 +134,7 @@ export const ButtonCodeExamples = {
     </svg>
   </wally-button>
 
-  <wally-button (click)="createNew()">
+  <wally-button (buttonClick)="createNew()">
     Create New
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
          stroke-width="2" stroke="currentColor" class="size-5">
@@ -162,7 +162,7 @@ export const ButtonCodeExamples = {
 
   // === EVENTS ===
 
-  clickTemplate: `<wally-button (click)="handleClick()">Click Me</wally-button>`,
+  clickTemplate: `<wally-button (buttonClick)="handleClick()">Click Me</wally-button>`,
 
   clickMethod: `handleClick(): void {
   console.log('Button clicked!');
@@ -263,7 +263,7 @@ export const ButtonCodeExamples = {
 </wally-button>
 
 <!-- Programmatic navigation -->
-<wally-button (click)="navigateToProfile()">
+<wally-button (buttonClick)="navigateToProfile()">
   View Profile
 </wally-button>`,
 
@@ -312,18 +312,18 @@ export class MyComponent {
 <wally-button
   [loading]="isLoading()"
   [disabled]="isDisabled()"
-  (click)="handleSubmit()">
+  (buttonClick)="handleSubmit()">
   Submit
 </wally-button>`,
 
   // Button vs type="button"
   buttonTypeExplained: `<!-- GOOD: Explicit type prevents accidental form submission -->
-<wally-button type="button" (click)="openModal()">
+<wally-button type="button" (buttonClick)="openModal()">
   Open
 </wally-button>
 
 <!-- CAUTION: Default type="button" is safe, but explicit is better -->
-<wally-button (click)="openModal()">Open</wally-button>
+<wally-button (buttonClick)="openModal()">Open</wally-button>
 
 <!-- GOOD: Use type="submit" for form submission -->
 <form (ngSubmit)="save()">

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html

@@ -484,7 +484,7 @@
       <div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
         aria-label="Live preview of button click event handling with feedback message">
         <div class="flex flex-col gap-2 text-center">
-          <wally-button (click)="handleClick()">Click Me</wally-button>
+          <wally-button (buttonClick)="handleClick()">Click Me</wally-button>
           @if (clickMessage()) {
           <p class="text-sm text-green-600 dark:text-green-400 font-medium">
             {{ clickMessage() }}
@@ -753,7 +753,7 @@
               </thead>
               <tbody>
                 <tr>
-                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">click</td>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">buttonClick</td>
                   <td class="p-4 font-mono text-purple-600 dark:text-purple-400">void</td>
                   <td class="p-4 text-gray-700 dark:text-gray-300">Emitted when button is clicked. Also handles
                     navigation for link variant</td>

package/playground/showcase/src/app/pages/documentation/components/components.html

@@ -181,6 +181,33 @@
         </article>
 
 
+        <!-- Selection Popover Component -->
+        <article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article"
+          aria-labelledby="selection-popover-heading">
+          <a href="/documentation/components/selection-popover"
+            class="block px-4 py-4 sm:py-5 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
+            aria-label="Navigate to Selection Popover component documentation with text selection detection, viewport-aware positioning, and zero-flash rendering">
+            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+              <div class="flex-1">
+                <div class="flex items-center gap-3 mb-2">
+                  <h3 id="selection-popover-heading"
+                    class="text-base sm:text-lg font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] uppercase tracking-wide transition-colors duration-150">
+                    <span aria-hidden="true">&gt;_ </span>Selection Popover
+                  </h3>
+                  <span class="text-[10px] font-bold bg-blue-500 text-white px-2 py-1 uppercase tracking-wider"
+                    aria-label="Status: New Component">
+                    NEW
+                  </span>
+                </div>
+                <p
+                  class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
+                  Floating action toolbar that appears above selected text (Medium/Notion-style). Features Selection API integration, viewport-aware positioning, zero-flash rendering, and custom actions via content projection.
+                </p>
+              </div>
+            </div>
+          </a>
+        </article>
+
         <!-- Tooltip Component -->
         <article class="group border-b-2 border-neutral-300 dark:border-neutral-700 last:border-b-0" role="article"
           aria-labelledby="tooltip-heading">

package/playground/showcase/src/app/pages/documentation/components/components.routes.ts

@@ -28,5 +28,9 @@ export const componentsRoutes: Routes = [
     {
         path: 'dropdown-menu',
         loadComponent: () => import('./dropdown-menu-docs/dropdown-menu-docs').then(m => m.DropdownMenuDocs)
+    },
+    {
+        path: 'selection-popover',
+        loadComponent: () => import('./selection-popover-docs/selection-popover-docs').then(m => m.SelectionPopoverDocs)
     }
 ];

package/playground/showcase/src/app/pages/documentation/components/selection-popover-docs/selection-popover-docs.css

@@ -0,0 +1 @@
+/* Selection Popover Documentation Styles */

package/playground/showcase/src/app/pages/documentation/components/selection-popover-docs/selection-popover-docs.examples.ts

@@ -0,0 +1,324 @@
+// Selection Popover documentation code examples
+export const SelectionPopoverCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add selection-popover`,
+
+  // Import examples
+  import: `import { SelectionPopover } from './components/wally-ui/selection-popover/selection-popover';`,
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [SelectionPopover],
+  templateUrl: './example.html'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-selection-popover>
+  <article>
+    <h1>Article Title</h1>
+    <p>Select any text in this content to see the popover appear...</p>
+  </article>
+</wally-selection-popover>`,
+
+  // === CUSTOM ACTIONS ===
+
+  customActions: `<wally-selection-popover (textSelected)="onTextSelected($event)">
+  <!-- Custom actions toolbar -->
+  <div popoverActions class="flex gap-1">
+    <button
+      class="px-3 py-2 text-sm text-[#0a0a0a] dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors">
+      Ask AI
+    </button>
+    <button
+      class="px-3 py-2 text-sm text-[#0a0a0a] dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors">
+      Copy
+    </button>
+    <button
+      class="px-3 py-2 text-sm text-[#0a0a0a] dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors">
+      Share
+    </button>
+  </div>
+
+  <!-- Selectable content -->
+  <article class="prose dark:prose-invert">
+    <p>Select text to see custom actions...</p>
+  </article>
+</wally-selection-popover>`,
+
+  customActionsTs: `export class MyComponent {
+  onTextSelected(text: string) {
+    console.log('Selected:', text);
+    // Handle the selected text
+    // This is called when any action is clicked
+  }
+}`,
+
+  // === WITH WALLY BUTTON ===
+
+  withWallyButton: `<wally-selection-popover (textSelected)="askAboutSelection($event)">
+  <!-- Custom action with Wally Button -->
+  <div popoverActions>
+    <wally-button variant="ghost" size="sm">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+           stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round"
+              d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+      </svg>
+      Ask AI
+    </wally-button>
+  </div>
+
+  <!-- Content -->
+  <article>
+    <p>Select text to ask AI about it...</p>
+  </article>
+</wally-selection-popover>`,
+
+  withWallyButtonTs: `export class MyComponent {
+  askAboutSelection(text: string) {
+    // Send to AI chat
+    this.aiService.ask(\`Explain: \${text}\`);
+  }
+}`,
+
+  // === PRODUCTION EXAMPLES ===
+
+  blogExample: `<!-- Blog Article with Selection Actions -->
+<wally-selection-popover (textSelected)="handleAction($event)">
+  <div popoverActions class="flex gap-1">
+    <button
+      (click)="highlight()"
+      class="px-3 py-2 text-sm text-[#0a0a0a] dark:text-white hover:bg-yellow-100 dark:hover:bg-yellow-900 rounded transition-colors"
+      aria-label="Highlight text">
+      Highlight
+    </button>
+    <button
+      (click)="addComment()"
+      class="px-3 py-2 text-sm text-[#0a0a0a] dark:text-white hover:bg-blue-100 dark:hover:bg-blue-900 rounded transition-colors"
+      aria-label="Add comment">
+      Comment
+    </button>
+    <button
+      (click)="share()"
+      class="px-3 py-2 text-sm text-[#0a0a0a] dark:text-white hover:bg-green-100 dark:hover:bg-green-900 rounded transition-colors"
+      aria-label="Share selection">
+      Share
+    </button>
+  </div>
+
+  <article class="max-w-2xl mx-auto prose dark:prose-invert">
+    <h1>Understanding Angular Signals</h1>
+    <p>
+      Angular Signals represent a major shift in how we handle reactivity...
+    </p>
+  </article>
+</wally-selection-popover>`,
+
+  blogExampleTs: `export class BlogComponent {
+  selectedText = signal<string>('');
+
+  handleAction(text: string) {
+    this.selectedText.set(text);
+  }
+
+  highlight() {
+    console.log('Highlighting:', this.selectedText());
+  }
+
+  addComment() {
+    console.log('Adding comment to:', this.selectedText());
+  }
+
+  share() {
+    console.log('Sharing:', this.selectedText());
+  }
+}`,
+
+  documentationExample: `<!-- Documentation with AI Assistant -->
+<wally-selection-popover (textSelected)="askAI($event)">
+  <div popoverActions>
+    <wally-button variant="ghost" size="sm">
+      <svg class="size-4">...</svg>
+      Explain with AI
+    </wally-button>
+  </div>
+
+  <div class="documentation-content">
+    <h2>API Reference</h2>
+    <pre><code>function useState&lt;T&gt;(initialValue: T): [T, (value: T) =&gt; void]</code></pre>
+    <p>Select any technical term to get AI explanation...</p>
+  </div>
+</wally-selection-popover>`,
+
+  readingModeExample: `<!-- Reading Mode with Actions -->
+<wally-selection-popover (textSelected)="onSelect($event)">
+  <div popoverActions class="flex items-center gap-2 px-2">
+    <button class="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded">
+      <svg class="size-4"><!-- Dictionary icon --></svg>
+    </button>
+    <button class="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded">
+      <svg class="size-4"><!-- Translate icon --></svg>
+    </button>
+    <button class="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded">
+      <svg class="size-4"><!-- Read aloud icon --></svg>
+    </button>
+  </div>
+
+  <div class="reading-content text-lg leading-relaxed">
+    <p>Select text to see reading assistance tools...</p>
+  </div>
+</wally-selection-popover>`,
+
+  // === ADVANCED ===
+
+  minSelectionLength: `<!-- Custom minimum selection length -->
+<wally-selection-popover>
+  <!-- By default, requires 3+ characters -->
+  <!-- Customize by handling selection in your code -->
+
+  <article>
+    <p>Select at least 3 characters...</p>
+  </article>
+</wally-selection-popover>
+
+<!-- Note: The component has a built-in 3-character minimum
+     to prevent accidental popover triggers on short selections -->`,
+
+  positioningBehavior: `<!-- Automatic viewport-aware positioning -->
+<wally-selection-popover>
+  <!-- Popover automatically:
+       1. Centers above selection
+       2. Prevents overflow on screen edges
+       3. Adjusts position if too close to viewport boundaries
+       4. Uses position: fixed for scroll stability
+  -->
+
+  <article>
+    <p>Try selecting text near screen edges...</p>
+  </article>
+</wally-selection-popover>`,
+
+  keyboardAccessibility: `<!-- Keyboard interaction -->
+<wally-selection-popover (textSelected)="onSelect($event)">
+  <!-- Supports:
+       - ESC key to close popover
+       - Click outside to dismiss
+       - Full ARIA dialog attributes
+       - role="dialog" with aria-label
+  -->
+
+  <article>
+    <p>Select text and press ESC to close...</p>
+  </article>
+</wally-selection-popover>`,
+
+  eventHandling: `<!-- Event handling example -->
+<wally-selection-popover (textSelected)="handleSelection($event)">
+  <div popoverActions>
+    <wally-button variant="ghost" (buttonClick)="performAction()">
+      Custom Action
+    </wally-button>
+  </div>
+
+  <article>
+    <p>Content here...</p>
+  </article>
+</wally-selection-popover>`,
+
+  eventHandlingTs: `export class MyComponent {
+  // This event fires when:
+  // 1. Any custom action is clicked
+  // 2. The fallback button is clicked (if no custom actions)
+  handleSelection(text: string) {
+    console.log('User selected:', text);
+
+    // The popover automatically closes after this event
+    // No need to manually clear selection
+  }
+
+  performAction() {
+    // Custom action logic
+    // The textSelected event will still fire with the selected text
+  }
+}`,
+
+  // === API USAGE ===
+
+  fullExample: `<!-- Complete example with all features -->
+<wally-selection-popover (textSelected)="onTextSelected($event)">
+  <!-- Custom actions (optional) -->
+  <div popoverActions class="flex gap-1">
+    <wally-button
+      variant="ghost"
+      size="sm"
+      [ariaLabel]="'Ask AI about selection'">
+      <svg class="size-4">...</svg>
+      Ask AI
+    </wally-button>
+
+    <wally-button
+      variant="ghost"
+      size="sm"
+      [ariaLabel]="'Copy to clipboard'">
+      <svg class="size-4">...</svg>
+      Copy
+    </wally-button>
+  </div>
+
+  <!-- Selectable content -->
+  <article class="prose dark:prose-invert max-w-none">
+    <h1>Your Content</h1>
+    <p>Select any text to see the action toolbar...</p>
+
+    <h2>Features</h2>
+    <ul>
+      <li>Automatic positioning</li>
+      <li>Viewport awareness</li>
+      <li>Keyboard accessible</li>
+      <li>Zero flash rendering</li>
+    </ul>
+  </article>
+</wally-selection-popover>`,
+
+  fullExampleTs: `export class MyComponent {
+  selectedText = signal<string>('');
+
+  onTextSelected(text: string) {
+    this.selectedText.set(text);
+
+    // Perform action based on user's custom button click
+    // For example: send to AI, copy to clipboard, etc.
+
+    console.log('Selected text:', text);
+  }
+}`,
+
+  // === STYLING ===
+
+  customStyling: `<!-- Custom popover styling -->
+<wally-selection-popover (textSelected)="onSelect($event)">
+  <!-- Use Tailwind classes for custom styling -->
+  <div popoverActions class="flex items-center gap-2 px-3 py-2">
+    <!-- Primary action with custom colors -->
+    <button class="
+      px-3 py-2 rounded-lg
+      bg-blue-500 text-white
+      hover:bg-blue-600
+      transition-colors">
+      Primary
+    </button>
+
+    <!-- Secondary action -->
+    <button class="
+      px-3 py-2 rounded-lg
+      text-neutral-700 dark:text-neutral-300
+      hover:bg-neutral-100 dark:hover:bg-neutral-800
+      transition-colors">
+      Secondary
+    </button>
+  </div>
+
+  <article>
+    <p>Content...</p>
+  </article>
+</wally-selection-popover>`,
+};